/* Yule Log microsite. Inter is licensed SIL OFL 1.1 (fonts/OFL.txt). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Inter-Regular.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/Inter-Medium.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Inter-SemiBold.woff") format("woff")}

:root{
  --bg:#26272b;
  --ink:rgba(255,255,255,.88);
  --ink-soft:rgba(255,255,255,.66);   /* year label color: session 5 stand-in, not a ruling */
  --line:rgba(255,255,255,.14);
  --fill:rgba(255,255,255,.06);
  --gap:clamp(14px,1.8vw,28px);       /* 26 px at 1440 wide, as on the Cargo grid */
  --side:clamp(18px,2.7vw,40px);      /* 38.9 px at 1440 wide */
  --radius:15.55px;
  --sans:"Inter",-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  background-image:url("../img/linen.png");   /* 8 x 8 px basket weave taken from the approved grid preview */
  background-size:4px 4px;                    /* shown at 4 CSS px so a 2x screen renders it 1:1 */
  color:var(--ink);
  font-family:var(--sans);
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* soft vignette and faint overhead light over the weave, fixed to the window */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(255,255,255,.045),transparent 70%),
    radial-gradient(ellipse 85% 80% at 50% 42%,transparent 50%,rgba(0,0,0,.30) 100%);
}
.page{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:56px var(--side) 72px}

.top{text-align:center}
h1{margin:0 0 26px;font-size:25.92px;line-height:31.1px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

.picker{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.picker button{
  font:500 15.55px/1 var(--sans);
  color:var(--ink);
  background:var(--fill);
  border:1px solid var(--line);
  border-radius:999px;
  padding:11px 18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.picker button:hover{background:rgba(255,255,255,.12)}
.picker button[aria-pressed="true"]{background:rgba(255,255,255,.9);color:#1b1c1f;border-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}

.panel{max-width:900px;margin:34px auto 0}
.panel[hidden]{display:none}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--fill);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px 22px;
}
.card h2,.note h2{margin:0;font-size:18px;line-height:1.25;font-weight:600}
.card .open{
  color:var(--ink);font-size:15.55px;font-weight:500;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px;
}
.card .open:hover{border-bottom-color:var(--ink)}
.badge{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-soft);border:1px dashed var(--line);border-radius:6px;padding:3px 7px}

.note{background:var(--fill);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;max-width:640px;text-align:left}
.note h2{margin-bottom:10px}
.note p,.note li{font-size:15.55px;line-height:1.55;font-weight:400;color:var(--ink)}
.note p{margin:0 0 12px}
.note ol{margin:0;padding-left:1.3em}
.note li{margin:0 0 6px}
.note a{color:var(--ink);text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}

.grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--gap);row-gap:var(--gap);
  margin:52px 0 0;
}
.tile{margin:0}
.tile-link{display:block;color:inherit;text-decoration:none}
/* Each image is the case plus its soft shadow. It is 111.6% of the column wide and pulled left 9.56%
   so the case itself fills the column exactly (as in the approved grid preview) and the shadow spills into the gap. */
.tile img{display:block;width:111.6%;max-width:none;margin-left:-9.56%;margin-bottom:-7%;height:auto;aspect-ratio:1985/1760}
.tile figcaption{
  position:relative;
  text-align:center;
  font:500 15.55px/1.2 var(--sans);
  color:var(--ink-soft);
}

/* Cargo's screen-shape rule: portrait at 4:5 or narrower, or landscape 500 px tall or less */
@media (max-aspect-ratio:4/5),(min-aspect-ratio:2/3) and (max-height:500px){
  :root{--gap:10.5px;--side:21px}
  .page{padding-top:36px;padding-bottom:48px}
  h1{font-size:18.8px;line-height:22.6px;margin-bottom:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .picker{gap:8px}
  .picker button{padding:10px 14px}
}