/* ===========================================================================
   COMPONENTS — buttons, cards, nav, badges, media, tables, forms
   ========================================================================= */

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ochre); --btn-fg: var(--ink); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.5rem;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 700;
  letter-spacing: .01em; line-height: 1;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: transform var(--t-quick) var(--ease-gate), box-shadow var(--t-quick), background var(--t-quick), color var(--t-quick);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0) scale(.985); }
.btn .btn__arrow { transition: transform var(--t-quick) var(--ease-paper); width: 1em; height: 1em; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:hover .btn__ext { transform: translate(2px, -2px); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--ochre   { --btn-bg: var(--ochre);  --btn-fg: var(--ink); box-shadow: var(--sh-ochre); position: relative; }
.btn--ochre::after {
  content: ''; position: absolute; inset: -6px; border-radius: var(--r-pill);
  border: var(--bw-line) solid var(--ochre); opacity: 0; pointer-events: none;
}
.btn--ochre:hover::after { animation: breathring 900ms var(--ease-paper) 1; }
@keyframes breathring {
  0%   { transform: scale(.92); opacity: .8; }
  100% { transform: scale(1.2);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn--ochre:hover::after { animation: none; } }
.btn--ochre:hover { --btn-bg: var(--ochre-lift); }
.btn--accent  { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); }
.btn--accent:hover { --btn-bg: var(--accent-lift); }
.btn--ink     { --btn-bg: var(--ink);    --btn-fg: var(--chalk); }
.btn--petrol  { --btn-bg: var(--petrol); --btn-fg: var(--chalk); }
.btn--claret  { --btn-bg: var(--claret); --btn-fg: var(--chalk); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--chalk); --btn-bd: var(--ink); }
.btn--light   { --btn-bg: var(--chalk); --btn-fg: var(--ink); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--chalk); --btn-bd: rgba(237,230,214,.5); }
.btn--outline-light:hover { --btn-bg: var(--chalk); --btn-fg: var(--ink); --btn-bd: var(--chalk); }
.btn--sm  { padding: .6rem 1.1rem; font-size: .85rem; }
.btn--lg  { padding: 1.05rem 2rem; font-size: 1.03rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Text link with a drawn underline that fills on hover. */
.link-draw {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; text-decoration: none; color: var(--accent-deep);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--t-base) var(--ease-paper);
  padding-bottom: 2px;
}
.link-draw:hover { background-size: 100% 2px; }
.ground--ink .link-draw, .ground--petrol .link-draw { color: var(--corn-lift); background-image: linear-gradient(var(--corn-lift), var(--corn-lift)); }

/* --- Badges & pips ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--chalk);
}
.badge--out   { background: var(--slate); }
.badge--low   { background: var(--claret); color: var(--chalk); }
.badge--new   { background: var(--moss); color: var(--chalk); }
.badge--sale  { background: var(--claret); color: var(--chalk); }
.badge--award { background: var(--corn); color: var(--ink); }
.badge--free  { background: var(--moss); color: var(--chalk); }
.badge--soft  { background: var(--chalk-deep); color: var(--text-soft); }

.pips { display: inline-flex; align-items: center; gap: .22rem; }
.pips i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); }
.pips i.on { background: var(--accent); }
.pips--heat i.on  { background: var(--claret); }
.pips--abv i.on   { background: var(--amber); }
.pips__label { margin-left: .4rem; font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }

/* --- Cards --------------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--t-base) var(--ease-paper), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--sh-accent); border-color: var(--accent); color: inherit; }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--chalk-deep); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-paper); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media--square { aspect-ratio: 1; }
.card__media--tall   { aspect-ratio: 3 / 4; }
.card__badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2; }
.card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.card__meta { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); }
.card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.card__lead { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5; }
.card__foot { margin-top: auto; padding-top: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card__price { font-family: var(--font-mono); font-weight: 700; font-size: 1.02rem; }
.card__price s { color: var(--text-faint); font-weight: 500; margin-right: .4rem; }
.card__go { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
.card:hover .card__go .dse-icon { transform: translateX(3px); }
.card__go .dse-icon { transition: transform var(--t-quick); }

.card--dark { background: var(--ink-2); border-color: var(--ink-3); color: var(--chalk); }
.card--dark .card__lead { color: rgba(237,230,214,.7); }
.card--dark .card__meta, .card--dark .card__go { color: var(--corn); }
.card--flat { background: transparent; border: 0; }
.card--flat:hover { box-shadow: none; }
.card--bordered { background: transparent; }

/* Poster card — the colour-blocked panel from the wheat-paste set. */
.poster {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 22rem; padding: 1.75rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
  transition: transform var(--t-base) var(--ease-paper), box-shadow var(--t-base);
}
.poster:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--sh-xl); color: var(--accent-ink); }
.poster__label { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: var(--track-card); text-transform: uppercase; line-height: 1.02; }
.poster__beast {
  position: absolute; left: 50%; bottom: 3.2rem; transform: translateX(-50%);
  width: 76%; opacity: .24; pointer-events: none;
}
.poster:hover .poster__beast { opacity: .3; }
.poster__beast .dse-beast { transition: opacity var(--t-base); }
.poster__beast .dse-beast { width: 100%; }
.poster__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* --- Figures ------------------------------------------------------------- */
.dse-figure { margin: 0; }
.dse-figure__frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--chalk-deep); }
.dse-figure__frame img { width: 100%; }
.dse-figure figcaption { margin-top: .65rem; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }
.dse-figure--tall .dse-figure__frame { aspect-ratio: 3 / 4; }
.dse-figure--tall img { height: 100%; object-fit: cover; }
.dse-figure--wide .dse-figure__frame { aspect-ratio: 16 / 9; }
.dse-figure--wide img { height: 100%; object-fit: cover; }

/* ===========================================================================
   THE HEADER STACK
   Three tiers: the rail (live estate state), the bar (brand and navigation),
   the sub-rail (where you are). The rail retracts on scroll and the bar stays,
   so the header is dense on arrival and quiet once you are reading.
   ========================================================================= */
.nav {
  position: fixed; top: var(--announce-h, 2.35rem); left: 0; right: 0; z-index: var(--z-nav);
  display: grid; grid-template-rows: auto auto auto;
  transition: transform var(--t-base) var(--ease-tractor);
  /* The entrance lives here, not in GSAP. A CSS keyframe always finishes, so
     there is no combination of slow CDN, deferred script or JS error that can
     leave the header parked off the top of the screen. `backwards` fill gives
     the drop its start state without anything having to write one. */
  animation: nav-drop var(--t-slow, 500ms) var(--ease-tractor) 60ms backwards;
}
@keyframes nav-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .nav { animation: none; } }

/* The header retracts its rail on scroll but never leaves. An auto-hiding
   header that depends on a scroll handler is one stalled script away from
   being a site with no navigation, and it is the first thing a visitor
   reaches for. `.is-hidden` is kept only for the mega-menu's own use. */
.nav.is-hidden { transform: none; }

/* --- Tier 0: the rail ---------------------------------------------------- */
.hrail {
  height: var(--rail-h); overflow: hidden;
  background: var(--ink); color: rgba(237,230,214,.82);
  font-size: .7rem; letter-spacing: .01em;
  transition: height var(--t-base) var(--ease-tractor), opacity var(--t-quick);
}
.nav.is-scrolled .hrail { height: 0; opacity: 0; }
.hrail__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--rail-h); }
.hrail__state { display: flex; align-items: center; gap: .45rem; white-space: nowrap; flex: none; }
.hrail__state b { font-weight: 700; color: var(--chalk); }
.hrail__state .dse-icon { width: .95em; height: .95em; color: var(--corn); }
.hrail__sep { opacity: .35; }
.hrail__pulse {
  width: .38rem; height: .38rem; border-radius: 50%; background: var(--moss-lift, #8CA04A);
  box-shadow: 0 0 0 0 rgba(140,160,74,.7); animation: railpulse 2.8s var(--ease-settle) infinite; flex: none;
}
@keyframes railpulse {
  0%   { box-shadow: 0 0 0 0 rgba(140,160,74,.55); }
  70%  { box-shadow: 0 0 0 .42rem rgba(140,160,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(140,160,74,0); }
}
.hrail__ticker { flex: 1; min-width: 0; height: var(--rail-h); overflow: hidden; position: relative; }
.hrail__ticker ul { list-style: none; margin: 0; padding: 0; will-change: transform; }
.hrail__ticker li {
  height: var(--rail-h); display: flex; align-items: center; justify-content: center;
  gap: .45rem; white-space: nowrap; padding-inline: .5rem;
}
.hrail__ticker li span { overflow: hidden; text-overflow: ellipsis; }
.hrail__ticker .dse-icon { width: .95em; height: .95em; opacity: .6; flex: none; }
.hrail__links { display: flex; align-items: center; gap: .1rem; flex: none; }
.hrail__links a, .hrail__theme {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .5rem; border-radius: var(--r-xs);
  color: inherit; text-decoration: none; font-size: .7rem; font-weight: 600;
  transition: background var(--t-quick), color var(--t-quick);
}
.hrail__links a:hover, .hrail__theme:hover { background: rgba(237,230,214,.12); color: var(--chalk); }
.hrail__links .dse-icon { width: .95em; height: .95em; opacity: .65; }
.hrail__theme .is-night { display: none; }
[data-theme="dark"] .hrail__theme .is-day { display: none; }
[data-theme="dark"] .hrail__theme .is-night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hrail__theme .is-day { display: none; }
  :root:not([data-theme="light"]) .hrail__theme .is-night { display: block; }
}
@media (max-width: 1100px) { .hrail__ticker, .hrail__links a span { display: none; } }
@media (max-width: 700px)  { .hrail { display: none; } }

/* --- Tier 1: the bar ----------------------------------------------------- */
.bar {
  height: var(--nav-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.7) blur(20px);
  -webkit-backdrop-filter: saturate(1.7) blur(20px);
  border-bottom: var(--bw-hair) solid transparent;
  transition: background var(--t-base), border-color var(--t-base);
}
.nav.is-scrolled .bar { background: color-mix(in srgb, var(--surface) 97%, transparent); border-bottom-color: var(--line); }
.bar__inner { display: flex; align-items: center; gap: .9rem; height: var(--nav-h);
  max-width: var(--container-wide); flex-wrap: nowrap; }
.hrail__inner, .sub__inner { max-width: var(--container-wide); }
/* The header runs tighter to the edge than the page does — it has three tiers
   of content to fit and no room for a 52px gutter on each side. */
.bar__inner, .hrail__inner, .sub__inner { padding-inline: clamp(1rem, 2.4vw, 2.25rem); }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; flex: none; }
.dse-logo { height: 2.15rem; width: auto; max-width: none; flex: none; background: none; }
.brand__logo { display: block; }
.brand__logo--light { display: none; }
.footer .dse-logo, .footer__brand .dse-logo { height: 2.7rem; }
@media (max-width: 700px) { .dse-logo { height: 1.8rem; } }

.bar__nav { display: flex; align-items: center; gap: .1rem; margin-left: .6rem; }
.bar__link {
  position: relative; display: flex; align-items: baseline; gap: .34rem;
  padding: .5rem .55rem; border-radius: var(--r-sm); white-space: nowrap;
  font-size: .855rem; font-weight: 600; text-decoration: none; color: var(--text);
  transition: background var(--t-quick), color var(--t-quick);
}
.bar__link-n {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  color: var(--text-faint); letter-spacing: .04em; transition: color var(--t-quick);
}
.bar__link::after {
  content: ''; position: absolute; left: .55rem; right: .55rem; bottom: .3rem; height: 2px;
  background: var(--accent, var(--ochre)); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-paper);
}
.bar__link:hover { color: var(--text); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.bar__link:hover::after, .bar__link.is-on::after { transform: scaleX(1); }
.bar__link:hover .bar__link-n, .bar__link.is-on .bar__link-n { color: var(--accent-deep); }
@media (max-width: 1400px) { .bar__link-n { display: none; } }
@media (max-width: 1200px) { .bar__nav .bar__link:nth-child(n+6) { display: none; } }
@media (max-width: 1080px) { .bar__nav .bar__link:nth-child(n+5) { display: none; } }
@media (max-width:  960px) { .bar__nav { display: none; } }

/* The ledger pill — the estate is one continuously numbered work, and this is
   that thesis as a control. On a numbered page it walks the chapter ledger; on
   an unnumbered one it walks the siblings. */
.ledger {
  display: flex; align-items: stretch; margin-left: auto; flex: none;
  border: var(--bw-hair) solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-raised); overflow: hidden; box-shadow: var(--sh-sm);
}
.ledger__step {
  display: grid; place-items: center; width: 2rem; color: var(--text-soft);
  text-decoration: none; transition: background var(--t-quick), color var(--t-quick);
}
.ledger__step:hover { background: var(--ink); color: var(--chalk); }
.ledger__step.is-off { opacity: .25; pointer-events: none; }
.ledger__step .dse-icon { width: .95rem; height: .95rem; }
.ledger__body {
  display: flex; flex-direction: column; justify-content: center; gap: .05rem;
  padding: .3rem .85rem; text-decoration: none; color: inherit; min-width: 0;
  border-inline: var(--bw-hair) solid var(--line);
  transition: background var(--t-quick);
}
.ledger__body:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: inherit; }
.ledger__n {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep);
}
.ledger__t {
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 11rem;
}
@media (max-width: 1280px) { .ledger { display: none; } }

.bar__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex: none; }
.ledger + .bar__actions { margin-left: .8rem; }

.find {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.35rem; padding: 0 .55rem 0 .75rem;
  border: var(--bw-hair) solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-raised); color: var(--text-soft);
  font-size: .82rem; font-weight: 600;
  transition: border-color var(--t-quick), color var(--t-quick), background var(--t-quick);
}
.find:hover { border-color: var(--accent); color: var(--text); background: var(--surface); }
.find .dse-icon { width: 1rem; height: 1rem; }
.find__kbd {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  padding: .18rem .42rem; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--text-faint);
}
@media (max-width: 1000px) { .find__label, .find__kbd { display: none; } .find { padding: 0; width: 2.35rem; justify-content: center; } }

.menu-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.35rem; padding: 0 .95rem;
  border-radius: var(--r-pill); background: var(--ink); color: var(--chalk);
  font-size: .82rem; font-weight: 700;
  transition: background var(--t-quick), transform var(--t-quick) var(--ease-gate);
}
.menu-toggle:hover { background: var(--accent-deep); transform: translateY(-1px); }
.menu-toggle__bars { display: grid; gap: 3px; }
.menu-toggle__bars span {
  display: block; width: 1.05rem; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--t-base) var(--ease-gate), opacity var(--t-quick);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 560px) { .menu-toggle__label { display: none; } .menu-toggle { padding: 0; width: 2.35rem; justify-content: center; } }

/* --- Tier 2: the sub-rail ------------------------------------------------ */
.sub {
  height: var(--sub-h); overflow: hidden;
  background: color-mix(in srgb, var(--surface-sunk) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--bw-hair) solid var(--line);
  font-size: .76rem;
}
.sub__inner { display: flex; align-items: center; gap: 1.25rem; height: var(--sub-h); }
.sub__crumbs { flex: none; min-width: 0; padding-right: 1.1rem; border-right: var(--bw-hair) solid var(--line); }
.sub__crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .3rem; }
.sub__crumbs li { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.sub__crumbs a { color: var(--text-faint); text-decoration: none; font-weight: 500; }
.sub__crumbs a:hover { color: var(--accent-deep); }
.sub__crumbs [aria-current] { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.sub__sep { width: .7em; height: .7em; opacity: .4; }
.sub__anchors {
  display: flex; align-items: center; gap: .3rem; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.sub__anchors::-webkit-scrollbar { display: none; }
.sub__anchors a {
  padding: .26rem .6rem; border-radius: var(--r-pill); white-space: nowrap;
  font-weight: 600; font-size: .74rem; color: var(--text-soft); text-decoration: none;
  border: var(--bw-hair) solid transparent;
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick);
}
.sub__anchors a:hover { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.sub__anchors a.is-on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.sub__read {
  flex: none; display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  color: var(--text-faint); letter-spacing: .02em;
}
.sub__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
@media (max-width: 980px)  { .sub__read { display: none; } }
@media (max-width: 760px)  { .sub__anchors { display: none; } }
@media (max-width: 520px)  { .sub { display: none; } }

/* Reading progress — a hairline across the very top of the header stack. */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-nav) + 3);
  pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--ochre) 55%, var(--claret) 100%);
  transition: width 90ms linear;
}

/* Anchor targets: zero-height, but they carry the whole header as offset. */
.anchor-target { display: block; height: 0; scroll-margin-top: calc(var(--head-h) + 1rem); }

/* --- The bar over a cinema hero ----------------------------------------- */
body.has-cinema-hero .nav:not(.is-scrolled) .hrail { border-bottom: var(--bw-hair) solid rgba(237,230,214,.14); }
body.has-cinema-hero .nav:not(.is-scrolled) .bar {
  background: linear-gradient(to bottom, rgba(35,33,30,.34), rgba(35,33,30,0));
  backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent;
}
body.has-cinema-hero .nav:not(.is-scrolled) .sub {
  background: linear-gradient(to bottom, rgba(35,33,30,.22), rgba(35,33,30,0));
  backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent;
  border-top: var(--bw-hair) solid rgba(237,230,214,.12);
  --text: var(--chalk); --text-soft: rgba(237,230,214,.82); --text-faint: rgba(237,230,214,.66);
  --line-strong: rgba(237,230,214,.3); --surface: rgba(237,230,214,.12);
}
body.has-cinema-hero .nav:not(.is-scrolled) .brand__logo--dark { display: none; }
body.has-cinema-hero .nav:not(.is-scrolled) .brand__logo--light { display: block; }
body.has-cinema-hero .nav:not(.is-scrolled) .bar__link { color: rgba(237,230,214,.9); }
body.has-cinema-hero .nav:not(.is-scrolled) .bar__link:hover { color: var(--chalk); background: rgba(237,230,214,.14); }
body.has-cinema-hero .nav:not(.is-scrolled) .bar__link-n { color: rgba(237,230,214,.55); }
body.has-cinema-hero .nav:not(.is-scrolled) .icon-btn,
body.has-cinema-hero .nav:not(.is-scrolled) .find {
  color: var(--chalk); border-color: rgba(237,230,214,.3); background: rgba(35,33,30,.22);
}
body.has-cinema-hero .nav:not(.is-scrolled) .find__kbd { background: rgba(237,230,214,.16); color: rgba(237,230,214,.8); }
body.has-cinema-hero .nav:not(.is-scrolled) .ledger {
  background: rgba(35,33,30,.3); border-color: rgba(237,230,214,.24); color: var(--chalk);
}
body.has-cinema-hero .nav:not(.is-scrolled) .ledger__body { border-color: rgba(237,230,214,.18); }
body.has-cinema-hero .nav:not(.is-scrolled) .ledger__n { color: var(--corn); }
body.has-cinema-hero .nav:not(.is-scrolled) .ledger__step { color: rgba(237,230,214,.75); }
body.has-cinema-hero .nav:not(.is-scrolled) .menu-toggle { background: var(--chalk); color: var(--ink); }
@media (prefers-reduced-transparency: reduce) {
  body.has-cinema-hero .nav:not(.is-scrolled) .hrail { border-bottom: var(--bw-hair) solid rgba(237,230,214,.14); }
body.has-cinema-hero .nav:not(.is-scrolled) .bar { background: rgba(35,33,30,.76); }
}

/* ===========================================================================
   THE MEGA MENU — a place, not a list.
   Twelve pillars as a vertical tablist; one panel each, with its own poster
   plate, beast, four link columns and a feature card.
   ========================================================================= */
.mega { position: fixed; inset: 0; z-index: var(--z-mega); }
.mega__scrim { position: absolute; inset: 0; background: rgba(12,11,9,.62); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-base); }
.mega.is-open .mega__scrim { opacity: 1; }
.mega__panel {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-rows: auto 1fr auto; align-content: start;
  background: var(--ink); color: var(--chalk);
  transform: translateY(-2%); opacity: 0;
  transition: transform var(--t-slow) var(--ease-paper), opacity var(--t-base);
}
.mega.is-open .mega__panel { transform: none; opacity: 1; }

.mega__head { border-bottom: var(--bw-hair) solid var(--ink-3, rgba(237,230,214,.16)); }
.mega__head-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 1.1rem; flex-wrap: wrap; }
.mega__state { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: rgba(237,230,214,.62); }
.mega__state .dse-icon { width: .95em; height: .95em; color: var(--corn); }
.mega__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; letter-spacing: var(--track-display); flex: none; }
.mega__search { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 16rem; max-width: 34rem; margin-left: auto;
  border: var(--bw-hair) solid rgba(237,230,214,.24); border-radius: var(--r-pill); padding: .28rem .28rem .28rem .95rem; }
.mega__search .btn { flex: none; padding-inline: 1.15rem; }
.mega__search .dse-icon { width: 1rem; height: 1rem; opacity: .6; flex: none; }
.mega__search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--chalk); font-size: .88rem; outline: none; }
.mega__search input::placeholder { color: rgba(237,230,214,.42); }
.icon-btn--light { border-color: rgba(237,230,214,.28); color: var(--chalk); }
.icon-btn--light:hover { background: rgba(237,230,214,.14); }

.mega__body { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); padding-block: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.mega__rail { display: grid; gap: .1rem; border-right: var(--bw-hair) solid rgba(237,230,214,.14); padding-right: 1rem; }
.mega__tab {
  display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left;
  padding: .5rem .7rem; border-radius: var(--r-sm); color: rgba(237,230,214,.62);
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 600;
  transition: background var(--t-quick), color var(--t-quick), padding-left var(--t-base) var(--ease-paper);
}
.mega__tab-n { font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .1em; opacity: .55; flex: none; width: 2.1rem; }
.mega__tab-t { flex: 1; }
.mega__tab-go { width: .95rem; height: .95rem; opacity: 0; transform: translateX(-4px); transition: opacity var(--t-quick), transform var(--t-quick); }
.mega__tab:hover { color: var(--chalk); background: rgba(237,230,214,.07); }
.mega__tab[aria-selected="true"] { color: var(--chalk); background: rgba(237,230,214,.11); padding-left: 1rem; }
.mega__tab[aria-selected="true"] .mega__tab-go { opacity: .8; transform: none; }
.mega__tab[aria-selected="true"] .mega__tab-n { color: var(--corn); opacity: 1; }
.mega__tab.is-here .mega__tab-t::after { content: '·'; margin-left: .4rem; color: var(--corn); }

.mega__pane { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); animation: megapane var(--t-base) var(--ease-paper) both; }
@keyframes megapane { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mega__pane-head { display: flex; align-items: flex-start; gap: 2rem; justify-content: space-between; }
.mega__pane-head .eyebrow { color: var(--corn); }
.mega__pane-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.02; margin-top: .45rem; }
.mega__pane-title a { color: var(--chalk); text-decoration: none; display: inline-flex; align-items: baseline; gap: .5rem; }
.mega__pane-title .dse-icon { width: .5em; height: .5em; opacity: .5; transition: transform var(--t-quick); }
.mega__pane-title a:hover .dse-icon { transform: translate(3px, -3px); opacity: 1; }
.mega__pane-lead { margin-top: .6rem; max-width: 52ch; color: rgba(237,230,214,.72); font-size: .95rem; line-height: 1.55; }
.mega__pane-beast { width: clamp(6rem, 11vw, 10rem); flex: none; }
.mega__pane-beast .dse-beast { width: 100%; color: var(--corn); opacity: .30; }
@media (max-width: 900px) { .mega__pane-beast { display: none; } }

.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.25rem 2rem; }
.mega__col-title {
  font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(237,230,214,.42); padding-bottom: .5rem; margin-bottom: .5rem;
  border-bottom: var(--bw-hair) solid rgba(237,230,214,.14);
}
.mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mega__links a {
  display: flex; align-items: center; gap: .5rem; padding: .28rem 0;
  color: rgba(237,230,214,.82); text-decoration: none; font-size: .875rem; line-height: 1.35;
  transition: color var(--t-quick);
}
/* A 1px leader that grows on hover instead of an underline. */
.mega__links a i { display: block; width: 0; height: 1px; background: var(--corn); flex: none; transition: width var(--t-base) var(--ease-paper); }
.mega__links a:hover { color: var(--chalk); }
.mega__links a:hover i { width: 14px; }

.mega__feature {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; align-items: center;
  padding: 1rem; border-radius: var(--r-lg); text-decoration: none; color: inherit;
  background: rgba(237,230,214,.06); border: var(--bw-hair) solid rgba(237,230,214,.14);
  transition: background var(--t-quick), border-color var(--t-quick), transform var(--t-base) var(--ease-paper);
}
.mega__feature:hover { background: rgba(237,230,214,.1); border-color: rgba(237,230,214,.28); transform: translateY(-3px); color: inherit; }
.mega__feature-art { position: relative; aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: var(--ink-2, #201E18); }
.mega__feature-art img { width: 100%; height: 100%; object-fit: cover; }
.mega__feature-grain { position: absolute; inset: 0; background: var(--grain-url, none); opacity: .3; mix-blend-mode: multiply; pointer-events: none; }
.mega__feature-body { display: grid; gap: .4rem; }
.mega__feature-body .eyebrow { color: var(--corn); }
.mega__feature-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; }
.mega__feature-text { font-size: .88rem; color: rgba(237,230,214,.7); line-height: 1.5; max-width: 56ch; }
.mega__feature-go { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--corn); }
.mega__feature-go .dse-icon { width: 1em; height: 1em; transition: transform var(--t-quick); }
.mega__feature:hover .mega__feature-go .dse-icon { transform: translateX(4px); }
@media (max-width: 760px) { .mega__feature { grid-template-columns: 1fr; } }

.mega__foot { border-top: var(--bw-hair) solid rgba(237,230,214,.16); background: rgba(0,0,0,.22); }
.mega__foot-inner { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-block: 1rem; }
.mega__util { display: flex; gap: .2rem; flex-wrap: wrap; }
.mega__util a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 600; color: rgba(237,230,214,.78); text-decoration: none;
  border: var(--bw-hair) solid rgba(237,230,214,.18); transition: background var(--t-quick), color var(--t-quick);
}
.mega__util a:hover { background: rgba(237,230,214,.14); color: var(--chalk); }
.mega__util .dse-icon { width: .9em; height: .9em; opacity: .7; }
.mega__social { display: flex; gap: .3rem; margin-left: .5rem; }
.mega__social a {
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%;
  color: rgba(237,230,214,.72); border: var(--bw-hair) solid rgba(237,230,214,.18);
  transition: background var(--t-quick), color var(--t-quick), transform var(--t-quick) var(--ease-gate);
}
.mega__social a:hover { background: var(--corn); color: var(--ink); transform: translateY(-2px); border-color: transparent; }
.mega__social .dse-icon { width: .95rem; height: .95rem; }
.mega__safety { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: rgba(237,230,214,.55); margin-left: auto; max-width: 34ch; }
.mega__safety .dse-icon { width: .95em; height: .95em; color: var(--claret-lift, #D14346); }

@media (max-width: 900px) {
  .mega__body { grid-template-columns: 1fr; }
  .mega__rail { border-right: 0; border-bottom: var(--bw-hair) solid rgba(237,230,214,.14); padding: 0 0 .75rem;
    grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .mega__rail::-webkit-scrollbar { display: none; }
  .mega__tab { font-size: 1rem; white-space: nowrap; }
  .mega__tab-n, .mega__tab-go { display: none; }
  .mega__tab[aria-selected="true"] { padding-left: .7rem; }
}

/* ===========================================================================
   THE COMMAND PALETTE — Rummaging, from the keyboard.
   ========================================================================= */
.palette { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: start center; padding: clamp(3rem, 12vh, 9rem) 1rem 1rem; }
.palette__scrim { position: absolute; inset: 0; background: rgba(12,11,9,.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-base); }
.palette.is-open .palette__scrim { opacity: 1; }
.palette__panel {
  position: relative; width: min(42rem, 100%); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); border: var(--bw-hair) solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--sh-xl); overflow: hidden;
  transform: translateY(-10px) scale(.985); opacity: 0;
  transition: transform var(--t-base) var(--ease-gate), opacity var(--t-quick);
}
.palette.is-open .palette__panel { transform: none; opacity: 1; }
.palette__field { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: var(--bw-hair) solid var(--line); }
.palette__field .dse-icon { width: 1.1rem; height: 1.1rem; color: var(--text-faint); flex: none; }
.palette__field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1.05rem; font-weight: 500; color: var(--text); }
.palette__field input::placeholder { color: var(--text-faint); font-weight: 400; }
.palette__field kbd, .palette__foot kbd {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; padding: .16rem .38rem;
  border-radius: var(--r-xs); background: var(--surface-sunk); color: var(--text-faint);
  border: var(--bw-hair) solid var(--line);
}
.palette__results { list-style: none; margin: 0; padding: .4rem; overflow-y: auto; flex: 1; }
.palette__group {
  padding: .6rem .7rem .3rem; font-size: .62rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}
.palette__hit {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--r-sm);
  text-decoration: none; color: inherit; cursor: pointer;
}
.palette__hit .dse-icon { width: 1rem; height: 1rem; color: var(--text-faint); flex: none; }
.palette__hit-t { flex: 1; min-width: 0; font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__hit-t mark { background: color-mix(in srgb, var(--corn) 55%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.palette__hit-p { font-family: var(--font-mono); font-size: .66rem; color: var(--text-faint); white-space: nowrap; }
.palette__hit.is-on { background: var(--accent); color: var(--accent-ink); }
.palette__hit.is-on .dse-icon, .palette__hit.is-on .palette__hit-p { color: inherit; opacity: .75; }
.palette__hit.is-on mark { background: rgba(255,255,255,.35); }
.palette__empty { padding: 2rem 1rem; text-align: center; color: var(--text-soft); font-size: .9rem; }
.palette__foot {
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
  border-top: var(--bw-hair) solid var(--line); background: var(--surface-sunk);
  font-size: .7rem; color: var(--text-faint);
}
.palette__foot span { display: inline-flex; align-items: center; gap: .3rem; }
.palette__count { margin-left: auto; font-family: var(--font-mono); }

/* --- Breadcrumbs & passport --------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-faint); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent-deep); text-decoration: underline; }
.crumbs .dse-icon { width: .85em; height: .85em; opacity: .5; }
.crumbs [aria-current] { color: var(--text); font-weight: 700; }

.passport {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 1.75rem; border-radius: var(--r-lg);
  background: var(--ink); color: var(--chalk);
  text-decoration: none; transition: transform var(--t-base) var(--ease-paper), box-shadow var(--t-base);
}
.passport:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); color: var(--chalk); }
.passport__eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--corn); }
.passport__title { font-family: var(--font-display); font-size: var(--fs-l); margin-top: .3rem; }
.passport__text { font-size: var(--fs-sm); color: rgba(237,230,214,.7); margin-top: .35rem; max-width: 46ch; }

/* --- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-raised); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
table.data th, table.data td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--chalk-deep); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); position: sticky; top: 0; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
table.data td.num { font-family: var(--font-mono); text-align: right; }

/* --- Accordion ----------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; text-align: left;
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.3;
}
.acc__q:hover { color: var(--accent-deep); }
.acc__mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: transform var(--t-base) var(--ease-gate), background var(--t-quick), border-color var(--t-quick); }
.acc__q[aria-expanded="true"] .acc__mark { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease-settle); }
.acc__q[aria-expanded="true"] + .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { padding-bottom: 1.25rem; color: var(--text-soft); max-width: 62ch; }

/* --- Tabs / filter chips ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .5rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent;
  font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--text);
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick), transform var(--t-quick);
}
.chip:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }
.chip.is-on, .chip[aria-selected="true"] { background: var(--ink); color: var(--chalk); border-color: var(--ink); }

/* --- Forms --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.field input, .field textarea, .field select {
  padding: .8rem 1rem; border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--text);
  transition: border-color var(--t-quick), box-shadow var(--t-quick);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field--grow { flex: 1 1 14rem; }
.field--small { flex: 0 1 9rem; }
.field--full { flex: 1 1 100%; }
.field.is-bad input, .field.is-bad textarea { border-color: var(--claret); }
.field__err { font-size: var(--fs-xs); color: var(--claret); font-weight: 700; text-transform: none; letter-spacing: 0; }
.hp { position: absolute; left: -9999px; }

/* --- Toast --------------------------------------------------------------- */
.toast-stack { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: .65rem;
  padding: .8rem 1.25rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--chalk); box-shadow: var(--sh-lg);
  font-size: .9rem; font-weight: 600; pointer-events: auto;
  animation: toast-in var(--t-base) var(--ease-gate) both;
}
.toast--ok  { background: var(--moss); }
.toast--bad { background: var(--claret); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* --- Quote --------------------------------------------------------------- */
.pull {
  font-family: var(--font-display); font-size: var(--fs-l); font-weight: 600;
  line-height: 1.24; letter-spacing: var(--track-display); max-width: 24ch;
}
.pull__mark { display: block; font-size: 3.5em; line-height: .55; color: var(--accent); opacity: .35; }
.pull__cite { display: block; margin-top: 1.1rem; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }

/* --- Stat ---------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: .3rem; }
.stat__n { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 900; line-height: .95; color: var(--accent-deep); letter-spacing: -.02em; }
.stat__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.stat__note { font-size: var(--fs-sm); color: var(--text-faint); line-height: 1.45; }
.ground--ink .stat__n, .ground--petrol .stat__n { color: var(--corn); }
.ground--ink .stat__label, .ground--petrol .stat__label { color: rgba(237,230,214,.66); }
.ground--ink .stat__note, .ground--petrol .stat__note { color: rgba(237,230,214,.55); }

/* --- Scroll rail --------------------------------------------------------- */
.rail { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.rail > * { flex: 0 0 clamp(15rem, 26vw, 21rem); scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rail-nav { display: flex; gap: .4rem; }

/* --- Footer -------------------------------------------------------------- */
.foot { background: var(--ink); color: var(--chalk); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot a { color: rgba(237,230,214,.8); text-decoration: none; }
.foot a:hover { color: var(--corn); }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.foot__col-title { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--corn); margin-bottom: .7rem; }
.foot__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .32rem; font-size: .88rem; }
.foot__bar { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: rgba(237,230,214,.55); }
.foot__legal { max-width: 74ch; line-height: 1.6; }
.foot__social { display: flex; gap: .5rem; }
.foot__social a { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--ink-3); display: grid; place-items: center; transition: background var(--t-quick), border-color var(--t-quick), transform var(--t-quick); }
.foot__social a:hover { background: var(--corn); border-color: var(--corn); color: var(--ink); transform: translateY(-2px); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .poster { min-height: 17rem; }
}

/* The account link is also the seventh item in the rail and the menu foot;
   it is the first thing to go when the bar runs out of room. */
@media (max-width: 1500px) { .bar__account { display: none; } }