/* Daily Poster
   Lots of white, small quiet type, one hairline colour, and the day's hue used
   only as a marker. The day's headlines are the only loud thing on the page. */

:root {
  /* type scale: five sizes, used everywhere */
  --t-xs: 11px;                          /* mono labels, captions, meta */
  --t-s: 13px;                           /* body, notes, specs, buttons */
  --t-m: 17px;                           /* story summary, sublines */
  --t-l: clamp(24px, 2.4vw, 36px);       /* section statements: story title, headline options, ledes */
  --t-xl: clamp(34px, 3.9vw, 60px);      /* the hero headline and the info title */
  --bg: #ffffff;
  --fg: #111111;
  --muted: #8a8a86;
  --faint: #c4c4c0;
  --line: #ebebe8;
  --accent: #d97706;
  --pad: clamp(20px, 3.2vw, 48px);
  --gap: clamp(16px, 2vw, 28px);
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --serif: "EB Garamond", "Apple Garamond", Garamond, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--t-s)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
h1, h2, p, ol, dl, dd { margin: 0; }

/* ---------- top bar: small mono, pushed to the corners ---------- */
.mono, .top, .label, .kicker, .pill, .info-close {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
}
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--pad);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
}
.top .brand { flex: 1; }
.days { display: flex; gap: 14px; color: var(--fg); }
.days a { color: var(--fg); }
.days a[aria-disabled="true"] { color: var(--faint); pointer-events: none; }
.top-links { flex: 1; display: flex; justify-content: flex-end; gap: 20px; }
.top button { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.top button:hover { color: var(--muted); }

/* ---------- info overlay ---------- */
.info {
  --bg: #000000; --fg: #ffffff; --muted: #9a9a96; --faint: #5c5c59; --line: #262626;
  position: fixed; inset: 0; z-index: 30; background: var(--bg); color: var(--fg); overflow: auto;
  /* a blind that drops from the top, and lifts away again */
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .85s var(--ease-io), visibility 0s linear .85s;
}
.info.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .85s var(--ease-io); }
.info-close { position: fixed; top: 16px; right: var(--pad); z-index: 31; color: var(--fg); opacity: 0; transition: opacity .4s ease; }
.info.open .info-close { opacity: 1; transition-delay: .6s; }
.info .intro-lead p, .info .intro-how, .info .intro-rules { opacity: 0; transform: translateY(28px); transition: opacity .5s ease, transform .5s var(--ease); }
.info.open .intro-lead p, .info.open .intro-how, .info.open .intro-rules { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s var(--ease); }
.info.open .intro-lead p { transition-delay: .55s; }
.info.open .intro-lead p + p { transition-delay: .62s; }
.info.open .intro-lead p + p + p { transition-delay: .69s; }
.info.open .intro-how { transition-delay: .7s; }
.info.open .intro-rules { transition-delay: .8s; }
.info .wm .w { transition: transform .4s var(--ease); }
.info.open .wm .w { transform: none; transition: transform 1s var(--ease); transition-delay: calc(.38s + var(--i) * 45ms); }

/* ---------- motion: masked words, load-in and scroll reveals ---------- */
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.w { display: inline-block; transform: translateY(110%); }
.js .top { opacity: 0; transition: opacity .9s ease .15s; }
.ready .top { opacity: 1; }
.js .kicker > * { opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform 1s var(--ease); }
.ready .kicker-title { opacity: 1; transform: none; transition-delay: .25s; }
.ready .kicker-meta { opacity: 1; transform: none; transition-delay: .35s; }
.js .hero-count, .js .hero-actions { opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform 1s var(--ease); }
.ready .hero-count { opacity: 1; transform: none; transition-delay: 1.05s; }
.ready .hero-actions { opacity: 1; transform: none; transition-delay: 1.15s; }
/* sections: the hairline draws in, then the label and content rise */
.js .sec, .js .archive .label, .js .foot { border-top-color: transparent; }
.js .sec { position: relative; }
.js .sec::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease-io); }
.js .sec.in::before { transform: none; }
.js .sec > .label, .js .sec > .body, .js .sec > .strip, .js .archive, .js .foot { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1.2s var(--ease); }
.js .sec.in > .label { opacity: 1; transform: none; transition-delay: .15s; }
.js .sec.in > .body { opacity: 1; transform: none; transition-delay: .25s; }
.js .sec.in > .strip { opacity: 1; transform: none; transition-delay: .4s; }
.js .archive.in, .js .foot.in { opacity: 1; transform: none; }
.js .wall li { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.js .archive.in .wall li { opacity: 1; transform: none; }
.info-close:hover { color: var(--muted); }
.intro {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 48px;
  margin: 18vh var(--pad) 12vh;
}
.intro-lead { grid-column: 1 / 6; }
.intro-lead h1 { font-family: var(--serif); font-size: var(--t-xl); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; max-width: 14ch; text-wrap: balance; }
.intro-lead p { margin-top: 22px; max-width: 42ch; color: var(--fg); }
.intro-lead p + p { margin-top: 12px; }
.intro-how { grid-column: 7 / 10; }
.intro-rules { grid-column: 10 / 13; }
.intro .label { margin-bottom: 20px; }
.steps, .rules { list-style: none; padding: 0; display: grid; gap: 14px; font-size: var(--t-s); line-height: 1.45; }
.steps li, .rules li { display: grid; grid-template-columns: 28px 1fr; }
.steps span, .rules span { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); padding-top: 2px; }
.steps b, .lede b { font-weight: 500; }

/* ---------- layout ---------- */
.page {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  padding: 0 var(--pad);
}
main { grid-column: 1 / -1; min-width: 0; }

/* ---------- hero: one centred statement ---------- */
.hero {
  min-height: calc(100svh - 48px); padding: 0 var(--pad) 8vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hero { position: relative; }
.hero > :not(.hero-imgs) { position: relative; z-index: 1; }
html { overflow-x: clip; }

/* the day's images, arranged around the headline; they drift outwards as you scroll */
.hero-imgs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hi { position: absolute; margin: 0; will-change: transform; }
.hi-in { opacity: 0; transform: translateY(28px) scale(.94); transition: opacity 1.1s ease, transform 1.6s var(--ease); }
.hi.in .hi-in { opacity: 1; transform: none; }
.hi img { display: block; width: 100%; height: auto; }
.hi.is-obj img { background: #f2f2f0; }
@media (max-width: 960px) { .hi.far { display: none; } }

.kicker { display: grid; justify-items: center; gap: 8px; margin: 0 0 24px; }
.kicker-title { color: var(--fg); display: inline-flex; align-items: center; gap: 8px; }
.kicker-meta { color: var(--muted); }
.kicker .dot { width: 7px; height: 7px; }
.hero-hl {
  display: grid; margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.012em; max-width: 24ch;
}
.hero-hl .hl { grid-area: 1 / 1; align-self: center; text-wrap: balance; }
.hero-hl .w { transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.hero-hl .hl.on .w { transform: none; }
.hero-hl .hl.out .w { transform: translateY(-110%); transition-duration: .6s; transition-delay: calc(var(--i) * 30ms); }
.hero-hl .hl.reset .w { transition: none; }
.hero-count button { transition: color .3s ease; }
.hero-count { display: flex; gap: 4px; margin-top: 30px; }
.hero-count button { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; color: var(--faint); padding: 4px 6px; }
.hero-count button[aria-pressed="true"] { color: var(--fg); }
.hero-count button:hover { color: var(--fg); }
.hero-actions { display: flex; gap: 8px; margin-top: 18px; }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: var(--t-xs); border: 1px solid var(--fg); border-radius: 3px; color: var(--fg); }
.pill:hover { background: var(--fg); color: var(--bg); }
.pill.ghost { border-color: var(--line); }
.pill.ghost:hover { border-color: var(--fg); }
.pill.solid { background: var(--fg); color: var(--bg); gap: 7px; padding-left: 7px; }
.pill.solid:hover { opacity: .85; }
/* a pulsing dot in the day's colour, until the panel has been opened once */
.ping { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(3); opacity: 0; } }
.pill.solid.seen .ping::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .ping::after { animation: none; display: none; } }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }
.summary { font-family: var(--sans); font-size: var(--t-m); line-height: 1.45; max-width: 46ch; }
.small, #story-source { font-size: var(--t-s); color: var(--muted); }
#story-source { margin-top: 18px; }
#story-source a { color: var(--fg); border-bottom: 1px solid var(--line); }

/* ---------- sections ---------- */
.sec {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); scroll-margin-top: 64px;
  margin-top: 20vh; padding-top: 14px; border-top: 1px solid var(--line);
}
.sec.first { margin-top: 6vh; }
.label { color: var(--fg); display: flex; gap: 10px; margin: 0; }
.label span { color: var(--faint); }
.sec .label { grid-column: 1 / 4; }
.sec .body { grid-column: 4 / 11; min-width: 0; }
.sec.wide .body { grid-column: 4 / 13; }
.sec .story-title { font-family: var(--sans); font-weight: 400; font-size: var(--t-l); line-height: 1.12; letter-spacing: -0.02em; max-width: 26ch; margin: 0 0 22px; text-wrap: balance; }
.note { margin-top: 28px; font-size: var(--t-s); color: var(--muted); max-width: 52ch; }

/* option lists: unselected options recede, the chosen one is in full black */
.options { display: grid; }
.opt {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
  width: 100%; padding: 10px 0; color: var(--faint); transition: color .2s ease;
}
.opt:hover { color: var(--muted); }
.opt[aria-pressed="true"] { color: var(--fg); }
.opt[aria-pressed="true"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--gap) + 4px); top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent);
}
.opt .meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); display: grid; justify-items: end; }
.opt .meta > span { grid-area: 1 / 1; transition: opacity .15s ease; }
.opt .m-copy { opacity: 0; color: var(--fg); text-transform: uppercase; font-weight: 500; letter-spacing: .02em; }
.opt:hover .m-info, .opt:focus-visible .m-info { opacity: 0; }
.opt:hover .m-copy, .opt:focus-visible .m-copy { opacity: 1; }
@media (hover: none) { .opt .m-info { opacity: 0; } .opt .m-copy { opacity: 1; color: var(--faint); } }
.headlines .opt .txt { font-size: var(--t-l); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.sublines .opt .txt { font-size: var(--t-m); line-height: 1.4; max-width: 44ch; }

/* colour */
/* the wheel: all twelve colours in day order, touching; today grows to triple width */
.wheel { display: flex; height: 22px; }
.wheel i { flex: 1; display: block; opacity: .22; }
.wheel i.on { opacity: 1; }
.wheel i.on { transition: flex 1.1s var(--ease) .5s; }
.sec.in .wheel i.on, .no-io .wheel i.on { flex: 3; }
.wheel-key { display: grid; gap: 4px; margin-top: 14px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.wheel-key span { display: flex; align-items: center; gap: 8px; }
.wheel-key .now { color: var(--fg); }
.wheel-key i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* the palette: equal bands, plus black and white; click one to copy it */
.bands { margin-top: 44px; display: grid; box-shadow: 0 0 0 1px var(--line); }
.bands button { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 14px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.bands button .act { display: none; }
.bands button:hover .act { display: inline; }
.bands button:hover .num { display: none; }

/* type */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.spec-type .aa { font-size: clamp(72px, 8vw, 128px); line-height: 1; display: block; }
.spec-type .tname { margin-top: 18px; font-size: var(--t-s); }
.spec-type .trole { font-size: var(--t-s); color: var(--muted); }
.spec-type a { border-bottom: 1px solid var(--line); }
.reason { margin-top: 40px; max-width: 52ch; }

/* images: a looping strip across the page */
.img-note { margin-top: 0; }
.strip {
  grid-column: 1 / -1; margin: 40px calc(-1 * var(--pad)) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.track { display: flex; gap: var(--gap); width: max-content; min-height: clamp(320px, 50vh, 540px); padding: 24px 0 8px; animation: drift var(--drift, 80s) linear infinite; }
.strip:hover .track, .strip:focus-within .track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.shot { display: grid; gap: 10px; flex: none; margin: 0; color: var(--fg); }
.shot .frame { display: block; height: var(--h); aspect-ratio: var(--ar); overflow: hidden; background: var(--line); transform-origin: 50% 60%; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* seven size, shape and height variations, so the strip feels pinned up by hand */
.track { align-items: flex-start; }
.shot.v0 { --h: clamp(220px, 34vh, 380px); --ar: 4 / 5; align-self: flex-end; }
.shot.v1 { --h: clamp(140px, 20vh, 220px); --ar: 1 / 1; margin-top: 4vh; }
.shot.v2 { --h: clamp(260px, 42vh, 460px); --ar: 2 / 3; }
.shot.v3 { --h: clamp(160px, 24vh, 270px); --ar: 3 / 2; align-self: flex-end; }
.shot.v4 { --h: clamp(200px, 30vh, 330px); --ar: 3 / 4; margin-top: 10vh; }
.shot.v5 { --h: clamp(120px, 17vh, 190px); --ar: 1 / 1; align-self: center; }
.shot.v6 { --h: clamp(200px, 31vh, 350px); --ar: 16 / 11; align-self: flex-end; }
/* textures: squares, in three sizes */
.shot.t0 { --h: clamp(150px, 21vh, 230px); --ar: 1 / 1; margin-top: 6vh; }
.shot.t1 { --h: clamp(120px, 16vh, 180px); --ar: 1 / 1; align-self: flex-end; }
.shot.t2 { --h: clamp(180px, 26vh, 280px); --ar: 1 / 1; align-self: center; }
.shot.is-texture figcaption .src { color: var(--faint); }
/* the 3D renders: transparent PNGs, sat on a soft ground */
.shot.o0 { --h: clamp(200px, 30vh, 330px); --ar: 1 / 1; margin-top: 3vh; }
.shot.o1 { --h: clamp(160px, 24vh, 270px); --ar: 1 / 1; align-self: flex-end; }
.shot.o2 { --h: clamp(220px, 34vh, 380px); --ar: 1 / 1; align-self: center; }
.shot.is-object .frame { background: #f2f2f0; }
.shot.is-object img { object-fit: contain; }
.shot.is-object figcaption .src { color: var(--faint); }
/* hover, on devices with a mouse: the strip pauses and the image eases into a slight tilt */
.shot .frame { transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .shot:hover .frame, .shot:focus-visible .frame { transform: rotate(-2deg); }
  .shot:nth-child(even):hover .frame, .shot:nth-child(even):focus-visible .frame { transform: rotate(2deg); }
}
.shot figcaption { display: flex; gap: 10px; width: 0; min-width: 100%; overflow: hidden; white-space: nowrap; }
.shot figcaption .src { flex: none; }
.shot figcaption .src::before { content: "· "; }
.shot figcaption span:first-child { color: var(--faint); }
.shot figcaption .who { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shot figcaption .src { color: var(--muted); }
.shot .frame.missing { display: grid; place-items: center; }
.shot .frame.missing img { display: none; }
.shot .frame.missing::after { content: "Image unavailable here"; font-size: var(--t-xs); color: var(--muted); }
/* touch screens and narrow windows: no auto-drift, just swipe */
@media (hover: none), (max-width: 960px) {
  .strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .strip::-webkit-scrollbar { display: none; }
  .track { animation: none; padding-left: var(--pad); padding-right: var(--pad); min-height: 0; }
  .track [aria-hidden="true"] { display: none; }
  .shot { scroll-snap-align: start; scroll-margin-left: var(--pad); }
  .shot.v0 { --h: 260px; } .shot.v1 { --h: 150px; } .shot.v2 { --h: 300px; } .shot.v3 { --h: 170px; }
  .shot.v4 { --h: 220px; } .shot.v5 { --h: 130px; } .shot.v6 { --h: 210px; }
  .shot.v1 { margin-top: 24px; } .shot.v4 { margin-top: 56px; }
  .shot.t0 { --h: 170px; margin-top: 40px; } .shot.t1 { --h: 130px; } .shot.t2 { --h: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .track { animation: none; padding-left: var(--pad); padding-right: var(--pad); }
  .track [aria-hidden="true"] { display: none; }
  .shot:hover .frame, .shot:focus-visible .frame { animation: none; }
}

/* grid diagram */
.grid-body { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: calc(var(--gap) * 2); align-items: start; }
.grid-fig { margin: 0; }
.grid-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.grid-side .note { margin-top: 24px; }
.spec dt b { display: inline-block; width: 18px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; color: var(--accent); }

/* mockups */
.mocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 40px; transition: opacity .3s ease; }
.mocks.drop { opacity: .6; }
.mock { margin: 0; }
.mock svg { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--line); }
.mock figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); }
.mock figcaption button { font: inherit; color: var(--fg); text-transform: inherit; letter-spacing: inherit; }
.mock figcaption button:hover { opacity: .6; }
label.cta { cursor: pointer; }
@media (max-width: 960px) {
  .mocks { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad, 20px) * -1); padding-inline: var(--pad, 20px); }
  .mock { flex: 0 0 78%; scroll-snap-align: center; }
}

/* make + share */
.lede { font-size: var(--t-l); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  background: var(--fg); color: var(--bg); font-size: var(--t-s); transition: opacity .2s ease;
}
.cta:hover { color: var(--bg); opacity: .82; }
.cta.ghost { background: none; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.cta.ghost:hover { color: var(--fg); opacity: .6; }
.cta.small { height: 34px; padding: 0 14px; font-size: var(--t-s); }
.make { margin-top: 40px; display: grid; grid-template-columns: 120px 1fr; column-gap: var(--gap); row-gap: 14px; font-size: var(--t-s); max-width: 620px; }
.make dt { color: var(--muted); }
.make dd a { border-bottom: 1px solid var(--line); }
.grid-settings { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; background: #f6f6f4; font: 400 var(--t-xs)/1.6 var(--mono); }
.share-copy { margin-top: 20px; max-width: 46ch; }
.caption { margin-top: 32px; display: grid; gap: 14px; justify-items: start; max-width: 520px; }
.caption pre { margin: 0; width: 100%; padding: 18px 20px; background: #f6f6f4; font: 400 var(--t-xs)/1.6 var(--mono); white-space: pre-wrap; }
.share-links { margin-top: 16px; font-size: var(--t-s); display: flex; gap: 20px; }
.share-links a { border-bottom: 1px solid var(--line); }

/* grid spec */
.spec { display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; row-gap: 10px; font-size: var(--t-s); }
.spec dt { color: var(--muted); }
.spec dd { font-variant-numeric: tabular-nums; }

/* archive: a wall of designed posters, picked by hand */
.wall .poster { aspect-ratio: 1080 / 1528; background: #f2f2f0; overflow: hidden; }
.wall .poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }
.wall a:hover .poster img { opacity: .85; }
.archive { margin: 24vh var(--pad) 0; }
.archive-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 40px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 28px; }
.archive .label { margin: 0; }
.wall button { display: grid; gap: 10px; width: 100%; padding: 0; text-align: left; color: inherit; cursor: zoom-in; }
.wall button:hover .poster img { opacity: .85; }

/* filters: small mono selects */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.filters label { position: relative; display: inline-flex; align-items: center; }
.filters select {
  appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--muted); padding: 4px 16px 4px 0; cursor: pointer; max-width: 22ch; text-overflow: ellipsis;
}
.filters label::after { content: "▾"; position: absolute; right: 0; pointer-events: none; color: var(--faint); font-size: 9px; }
.filters select:hover, .filters select.on { color: var(--fg); }
.filters .count { color: var(--faint); }
.filters .clear { color: var(--fg); border-bottom: 1px solid var(--line); }
.filters .clear[hidden] { display: none; }

/* the lightbox: one poster, big, on black */
.lightbox {
  --bg: #000; --fg: #fff; --muted: #9a9a96; --faint: #5c5c59;
  position: fixed; inset: 0; z-index: 40; background: var(--bg); color: var(--fg);
  display: grid; grid-template-columns: 72px 1fr 72px; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.lb-fig { margin: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; gap: 16px; padding: 56px 0 24px; min-width: 0; }
.lb-stage { display: grid; place-items: center; min-height: 0; }
.lb-stage img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; object-fit: contain; display: block; opacity: 0; transform: scale(.985); transition: opacity .35s ease, transform .6s var(--ease); }
.lb-stage img.on { opacity: 1; transform: none; }
.lightbox.open .lb-stage img.on { transform: none; }
.lb-cap { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.lb-cap .meta { color: var(--muted); display: flex; gap: 6px 16px; flex-wrap: wrap; }
.lb-cap .sw { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.lb-cap a { color: var(--fg); border-bottom: 1px solid var(--faint); }
.lb-nav { height: 100%; width: 100%; text-align: center; font-family: var(--mono); font-size: var(--t-s); color: var(--muted); }
.lb-nav:hover { color: var(--fg); }
.lb-nav:disabled { visibility: hidden; }
.lb-close { position: absolute; top: 16px; right: var(--pad); font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--fg); z-index: 1; }
@media (max-width: 600px) {
  .lightbox { grid-template-columns: 1fr; }
  .lb-nav { position: absolute; bottom: 20px; height: auto; padding: 8px 12px; z-index: 1; }
  .lb-prev { left: calc(var(--pad) - 12px); } .lb-next { right: calc(var(--pad) - 12px); }
  .lb-fig { padding: 56px var(--pad) 64px; }
  .lb-stage img { max-height: calc(100svh - 250px); }
}
.wall { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px var(--gap); }
.wall a { display: grid; gap: 10px; }
.mini {
  position: relative; container-type: inline-size; aspect-ratio: 1 / 1.414; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}
.mini-in { position: absolute; inset: 0; padding: 4cqw; display: grid; grid-template-rows: 1fr 1fr; gap: 4cqw; }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-hl { align-self: end; font-size: 11cqw; line-height: 1; overflow-wrap: anywhere; }
.wall .cap { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.wall .cap span:last-child { text-align: right; }
.wall a:hover .mini { opacity: .85; }
.wall [aria-current="true"] .cap span:first-child::after { content: " ●"; color: var(--accent); }

.foot { margin: 24vh var(--pad) 0; padding: 14px 0 var(--pad); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--gap); font-size: var(--t-s); color: var(--muted); }
.foot p:first-child { max-width: 52ch; }
.foot a { color: var(--fg); border-bottom: 1px solid var(--line); }


.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); opacity: 0;
  background: var(--fg); color: var(--bg); font: 400 var(--t-xs) var(--mono); padding: 8px 12px;
  transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 20;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.loading { background: #E6E6E3; color: #111; animation: toast-pulse 1.2s ease-in-out infinite; }
@keyframes toast-pulse { 0%, 100% { color: #111; } 50% { color: #A8A8A4; } }
@media (prefers-reduced-motion: reduce) { .toast.loading { animation: none; color: #555; } }

/* ---------- small screens: one column ---------- */
@media (max-width: 960px) {
  .days { display: none; }
  main { grid-column: 1 / -1; }
  .hero { min-height: 82svh; }
  .wall { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .foot { flex-direction: column; }
  .sec { grid-template-columns: 1fr; }
  .sec .label { margin-bottom: 28px; }
  .intro { grid-template-columns: 1fr; margin: 12vh var(--pad) 8vh; }
  .intro-lead, .intro-how, .intro-rules { grid-column: 1; }
  .grid-body { grid-template-columns: 1fr; }
  .grid-fig { max-width: 300px; }
  .make { grid-template-columns: 1fr; row-gap: 4px; }
  .make dd { margin-bottom: 14px; }
  .sec { margin-top: 14vh; }
  .opt[aria-pressed="true"]::before { display: none; }
  .sec .label, .sec .body, .sec.wide .body { grid-column: 1 / -1; }
  .images { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .w { transform: none !important; }
  .hero-hl .hl:not(.on) { visibility: hidden; }
  .hi-in, .js .top, .js .kicker > *, .js .hero-count, .js .hero-actions, .js .sec > *, .js .archive, .js .foot, .js .wall li, .info .intro-lead p, .info .intro-how, .info .intro-rules { opacity: 1 !important; transform: none !important; }
  .js .sec::before { transform: none !important; }
}

[hidden] { display: none !important; }