/* ═══════════════════════════════════════════════════════════
   thecinemachair — See Cinema Differently.
   Palette: Paper #EDE8DC · Void #090909 · Signal #F02A1F · Film #B3A68C
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#EDE8DC;
  --void:#090909;
  --signal:#F02A1F;        /* accent on dark: labels, rules, marks — 4.77:1 */
  --signal-solid:#E5281E;  /* fills that carry white text — 4.51:1 with #fff */
  --film:#B3A68C;

  --bg:#0A0A0A;
  --bg-2:#0C0C0C;
  --card:#131313;
  --card-hi:#191919;
  --line:rgba(237,232,220,.09);
  --line-2:rgba(237,232,220,.16);
  --muted:rgba(237,232,220,.52);
  --muted-2:rgba(237,232,220,.50);   /* .34 measured 2.66:1 — below AA */

  --sans:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:'Playfair Display',ui-serif,Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(1.25rem,4.6vw,5.5rem);
  --maxw:1520px;
  --r:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--signal-solid);color:#fff}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

/* ── cursor ─────────────────────────────────────────────
   A viewfinder, not a pointer: the same corner brackets used on the
   Look Closer card and the reel posters, with Signal red as the focus
   point. Hotspot is the centre dot. Over anything clickable the frame
   pulls in and turns red, like a camera locking focus.

   Real cursor images, not a JS follower — instant, no lag, no repaint
   cost. SVG first for crispness, PNG second for Safari, which has
   never handled SVG cursors reliably. A half-opacity dark underlay
   keeps the brackets legible over the bright areas of the stills.
   Touch devices match neither query and are left alone.              */
@media (hover:hover) and (pointer:fine){
  body{
    cursor:url("../img/cursor.svg") 16 16,
           url("../img/cursor.png") 16 16, auto;
  }
  a,button,select,summary,[role="button"],
  .reel-card,.break-card,.swatches figure,.follow-tile{
    cursor:url("../img/cursor-active.svg") 16 16,
           url("../img/cursor-active.png") 16 16, pointer;
  }
  /* typing beats branding — keep the native I-beam */
  input,textarea{cursor:text}
}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--signal-solid);color:#fff;padding:.75rem 1.1rem;border-radius:999px;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:top .2s;
}
.skip:focus{top:1rem}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ── type primitives ────────────────────────────────── */
.label{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);margin-bottom:1.75rem;
}
.h2{
  font-weight:700;
  font-size:clamp(2rem,4.4vw,3.9rem);
  line-height:1.04;
  letter-spacing:-.035em;
  color:var(--paper);
  text-wrap:balance;
}
.body{
  font-size:clamp(.95rem,1.02vw,1.075rem);
  line-height:1.62;
  color:var(--muted);
  max-width:56ch;
  letter-spacing:-.005em;
}
.h2 + .body{margin-top:1.75rem}
.body + .body{margin-top:1.1rem}
.serif{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.35rem,2.3vw,2rem);
  line-height:1.34;
  color:var(--paper);
  letter-spacing:-.01em;
}
.serif-caps{
  font-family:var(--serif);
  font-style:italic;font-weight:500;
  font-size:clamp(1.6rem,2.6vw,2.3rem);
  line-height:1.16;text-transform:uppercase;letter-spacing:.01em;
  color:var(--paper);
}
.wordmark{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:1.06rem;letter-spacing:-.045em;color:var(--paper);
}
.wm-mark{height:.98em;width:auto;flex:none;fill:currentColor}
.wordmark.lg{font-size:clamp(1.6rem,2.6vw,2.3rem);gap:.45em}
a.wordmark .wm-mark{transition:transform .5s var(--ease)}
a.wordmark:hover .wm-mark{transform:translateX(2px)}
.micro{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);line-height:1.7;
}

/* ── buttons ────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--signal-solid);color:#fff;
  border-radius:999px;padding:.95rem 1.7rem;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
  box-shadow:0 0 0 0 rgba(240,42,31,.5);
}
.pill:hover{transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(240,42,31,.65)}
.pill:active{transform:translateY(0)}
.pill.big{margin-top:2.5rem;padding:1.15rem 2.2rem;font-size:.74rem}

.ghost{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:.95rem 0;
  transition:color .25s;
}
.ghost:hover{color:var(--paper)}
.ghost i{font-style:normal;transition:transform .3s var(--ease)}
.ghost:hover i{transform:translateY(2px)}
.reel-follow:hover i{transform:translate(2px,-2px)}

.rec{
  width:8px;height:8px;border-radius:50%;background:var(--signal);
  display:inline-block;flex:none;
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ── overlays: grain, vignette, progress ────────────── */
.grain{
  position:fixed;inset:-150%;z-index:60;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,1%)}
}
.vignette{
  position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 42%,rgba(0,0,0,.55) 100%);
}
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;
  background:rgba(237,232,220,.07);
}
.progress i{
  display:block;height:100%;width:0;background:var(--signal);
  box-shadow:0 0 12px rgba(240,42,31,.8);
  transition:width .1s linear;
}
/* ── HUD ────────────────────────────────────────────── */
.hud{
  position:fixed;left:0;right:0;bottom:0;z-index:80;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem var(--pad);
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);
  background:linear-gradient(to top,rgba(10,10,10,.92),transparent);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hud.on{opacity:1;transform:none}
.hud-count b{color:var(--signal)}

/* ── NAV ────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;gap:2rem;
  padding-inline:var(--pad);
  transition:height .4s var(--ease),background .4s,backdrop-filter .4s,border-color .4s,transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  height:66px;
  background:rgba(9,9,9,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.hide{transform:translateY(-102%)}
.nav-links{display:none;margin-left:auto;gap:2.6rem}
.nav-links a{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);position:relative;padding:.4rem 0;transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--signal);transition:width .35s var(--ease);
}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--paper)}
.nav-cta{display:none;margin-left:.6rem}

.burger{
  margin-left:auto;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;
}
.burger span{display:block;height:1.5px;background:var(--paper);transition:.35s var(--ease)}
.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:18px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){width:26px;transform:translateY(-3.75px) rotate(-45deg)}

@media(min-width:1060px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .burger{display:none}
}

.mobile-menu{
  position:fixed;inset:0;z-index:95;
  background:rgba(9,9,9,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:var(--nav-h) var(--pad) 4rem;
}
.mobile-menu[hidden]{display:none}
.mobile-menu a:not(.pill){
  font-size:clamp(2rem,9vw,3.2rem);font-weight:700;letter-spacing:-.035em;
  color:var(--paper);padding:.35rem 0;
  border-bottom:1px solid var(--line);
}
.mobile-menu .pill{align-self:flex-start;margin-top:2.2rem}

/* ── HERO ───────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:calc(var(--nav-h) + clamp(1.5rem,5vh,3.25rem));
  padding-bottom:clamp(2rem,5vh,3.25rem);
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(90% 60% at 78% 42%,rgba(179,166,140,.055),transparent 65%),
    var(--bg);
  overflow:hidden;
}
.hero-grid{display:grid;gap:clamp(3rem,6vw,5rem);align-items:center}
@media(min-width:1060px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.kicker{
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);margin-bottom:clamp(1.75rem,4vw,3rem);
}
.kicker span{opacity:.5;margin:0 .35em}

/* The publication name, stated plainly above the headline. Real visible
   text at the same scale as the existing kicker — deliberately NOT hidden,
   offscreen or shrunk, and never animated to opacity:0. */
.hero-brand{
  display:block;
  margin-bottom:clamp(.85rem,1.8vw,1.25rem);
  font-size:clamp(.74rem,.95vw,.86rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--film);
}

.hero-title{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,7.1vw,6.6rem);
  line-height:.96;letter-spacing:-.04em;
  color:var(--paper);
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line > span{
  display:block;
  transform:translateY(102%);
  animation:riseIn 1.15s var(--ease) forwards;
}
.hero-title .line:nth-child(2) > span{animation-delay:.12s}
@keyframes riseIn{to{transform:none}}

.hero-serif{
  margin-top:clamp(1.3rem,2.4vw,1.9rem);
  max-width:22ch;
  opacity:0;animation:fadeUp .9s var(--ease) .45s forwards;
}
.hero-body{
  margin-top:1.2rem;max-width:44ch;
  opacity:0;animation:fadeUp .9s var(--ease) .6s forwards;
}
.hero-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;
  margin-top:clamp(1.8rem,3.2vw,2.5rem);
  opacity:0;animation:fadeUp .9s var(--ease) .75s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* emblem */
.hero-emblem{
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  opacity:0;animation:fadeUp 1.2s var(--ease) .5s forwards;
}
.emblem{width:min(100%,clamp(260px,32vw,430px));height:auto;overflow:visible}
.emblem .ring{fill:none;stroke:var(--film);opacity:.42;transform-origin:230px 230px}
.emblem .ring-1{stroke-width:1;opacity:.3;animation:spin 60s linear infinite}
.emblem .ring-2{stroke-width:.8;opacity:.22}
.emblem .ring-3{stroke-width:.8;opacity:.16;animation:spin 44s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.emblem .ticks line{stroke:var(--film);stroke-width:1;opacity:.5}
.emblem .mark{fill:var(--paper)}
.emblem .mark-ghost{fill:none;stroke:var(--paper);stroke-width:1.4;opacity:.22}
.emblem-cap{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);text-align:center;
}
.emblem-cap span{opacity:.45;margin:0 .3em}

.hero-foot{
  position:relative;
  width:100%;max-width:var(--maxw);margin:clamp(2rem,4.5vh,3.25rem) auto 0;
  padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);
}
.hero-foot span span{opacity:.45;margin:0 .3em}
.scroll-cue{position:relative;padding-left:60px}
.scroll-cue::before{
  content:'';position:absolute;left:0;top:50%;width:44px;height:1px;
  background:var(--signal);transform-origin:left;
  animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}

/* ── SECTIONS ───────────────────────────────────────── */
.sec{
  position:relative;
  padding-block:clamp(5.5rem,13vh,9.5rem);
  border-top:1px solid var(--line);
}
.sec::before{
  content:attr(data-idx);
  position:absolute;top:clamp(5.5rem,13vh,9.5rem);right:var(--pad);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--muted-2);
}
@media(max-width:720px){.sec::before{display:none}}

/* 01 — idea */
.idea-grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.idea-copy{max-width:64ch}
.stat-row{
  display:grid;gap:1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  max-width:760px;
}
.stat-row li{
  border-top:1px solid var(--line);padding-top:1.1rem;
}
.stat-row b{
  display:block;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:700;
  letter-spacing:-.02em;color:var(--paper);
}
.stat-row span{
  display:block;margin-top:.3rem;
  font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--film);
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
}
/* ── PLATE ───────────────────────────────────────────────
   A film still shown whole — never cropped — at its native ratio and
   full brightness, spanning the content width so it reads as a screen
   rather than a card. Shared by sections 01 and 05; each supplies its
   own --ar. The quote overlays from 760px up; below that it stacks
   underneath, because a wide frame on a phone is too short to hold
   type legibly.                                                      */
.plate{
  position:relative;
  padding:0;margin:0;
  overflow:hidden;
  background:var(--void);
}
.plate picture{display:contents}
.plate img{
  display:block;width:100%;height:auto;
  aspect-ratio:var(--ar);
  object-fit:contain;
}
.plate-body{padding:clamp(1.6rem,3vw,2.4rem)}

@media(min-width:760px){
  .plate{
    aspect-ratio:var(--ar);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:clamp(1.8rem,3vw,2.8rem);
  }
  .plate img{
    position:absolute;inset:0;z-index:0;
    width:100%;height:100%;object-fit:cover;
  }
  /* scrim only under the type — the rest of the frame stays clear */
  .plate::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,
      rgba(9,9,9,.92) 0%,rgba(9,9,9,.6) 18%,rgba(9,9,9,.15) 34%,transparent 48%);
  }
  .plate-body{position:relative;z-index:2;padding:0}
}

/* 01 — the Loki frame, native 16:9 */
.look-card{--ar:1308/736}

/* viewfinder brackets — the same motif as the cursor and the reel posters */
.look-frame{
  display:none;                 /* stacked: the card is image + text, so brackets
                                   framing the whole card would strand a corner
                                   in the copy. Only shown once the card IS the frame. */
  position:absolute;inset:0;z-index:2;pointer-events:none;
}
@media(min-width:760px){ .look-frame{display:block} }
.look-frame::before,.look-frame::after{
  content:'';position:absolute;width:20px;height:20px;
  border:1px solid rgba(237,232,220,.5);
}
.look-frame::before{top:16px;left:16px;border-right:0;border-bottom:0}
.look-frame::after{bottom:16px;right:16px;border-left:0;border-top:0}

.card-num{
  font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--signal);
}
.look-card .card-num{
  position:absolute;z-index:2;
  top:clamp(1.3rem,2.2vw,1.7rem);right:clamp(1.3rem,2.2vw,1.7rem);
}
.look-credit{
  margin-top:.85rem;
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
}
.look-credit span{opacity:.45;margin:0 .3em}

/* marquee */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  padding-block:1.15rem;background:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee-track span{
  display:flex;align-items:center;white-space:nowrap;
  font-size:clamp(1.1rem,2.3vw,1.9rem);font-weight:700;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(179,166,140,.42);
  padding-right:1.5rem;
}
.marquee-track i{
  font-style:normal;color:var(--signal);-webkit-text-stroke:0;
  font-size:.65em;margin:0 1.5rem;opacity:.9;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* 02 — breakdowns */
.cards{
  display:grid;gap:clamp(1.1rem,1.6vw,1.6rem);
  margin-top:clamp(3rem,6vw,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.break-card{
  padding:clamp(1.6rem,2.4vw,2.2rem);
  display:flex;flex-direction:column;
  min-height:clamp(320px,30vw,430px);
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.break-card:hover{
  transform:translateY(-6px) rotate(-.4deg);
  border-color:var(--line-2);
  background:var(--card-hi);
}
.badge{
  align-self:flex-start;
  background:var(--signal-solid);color:#fff;border-radius:999px;
  padding:.5rem 1.15rem;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;
}
.break-card .cat{
  margin-top:1.9rem;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);
}
.break-card h3{
  margin-top:.85rem;
  font-size:clamp(1.25rem,1.85vw,1.6rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.12;color:var(--paper);
}
.break-card .body{margin-top:1.6rem;font-size:.93rem}

/* 03 — the reel */
.reel-head{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  align-items:flex-end;justify-content:space-between;
}
.reel-follow{font-family:var(--mono);letter-spacing:.06em;text-transform:none}
.reel-mount{margin-top:clamp(3rem,6vw,4.5rem)}
.reel-loading{
  display:flex;align-items:center;gap:.75rem;
  color:var(--muted-2);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:3rem 0;
}

/* featured */
.featured{
  display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  padding:clamp(1.25rem,2.2vw,2rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(140deg,var(--card-hi),var(--card) 70%);
  margin-bottom:clamp(1.5rem,2.4vw,2.2rem);
}
@media(min-width:900px){
  .featured{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
}
.featured .thumb{width:min(100%,250px)}
@media(min-width:900px){.featured .thumb{width:min(100%,330px)}}
.featured-meta .now{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);
}
.featured-meta h3{
  margin-top:1.4rem;
  font-size:clamp(1.5rem,2.9vw,2.4rem);font-weight:700;
  letter-spacing:-.035em;line-height:1.08;color:var(--paper);
  text-wrap:balance;
}
.featured-meta .body{margin-top:1.2rem;font-size:.97rem}
.featured-meta .meta-row{
  display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.8rem;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);
}
.featured-meta .pill{margin-top:2rem}

/* grid */
.reel-grid{
  display:grid;gap:clamp(.7rem,1.5vw,1.4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:640px){.reel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1180px){.reel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* two-up posters on phones need tighter type */
@media(max-width:639px){
  .poster{padding:.85rem}
  .poster::before,.poster::after{width:12px;height:12px}
  .poster::before{top:9px;left:9px}
  .poster::after{bottom:9px;right:9px}
  .poster-cat{font-size:.53rem;letter-spacing:.16em;margin-bottom:.4rem}
  .poster b{font-size:.87rem;line-height:1.2}
  .poster-rule{margin:.6rem 0 .4rem}
  .poster em{font-size:.68rem}
  .chip{padding:.28rem .6rem;font-size:.56rem}
  .thumb-top{top:.6rem;left:.6rem;right:.6rem}
  .follow-tile{padding:1rem}
  .follow-tile b{font-size:1.02rem}
  .follow-tile .body{font-size:.78rem}
  .follow-tile .arrow{width:34px;height:34px}
}
.reel-card{
  position:relative;display:block;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease);
}
.reel-card:hover{
  transform:translateY(-6px) rotate(-.6deg) scale(1.012);
  border-color:rgba(240,42,31,.45);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.9);
}
.thumb{
  position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:inherit;
  background:linear-gradient(155deg,#1D1D1D,#0C0C0C 65%);
}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.reel-card:hover .thumb img{transform:scale(1.06)}
.thumb.has-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,9,9,.92) 0%,rgba(9,9,9,.25) 45%,rgba(9,9,9,.1) 100%);
}

/* typographic poster, drawn when a reel has no thumbnail image */
.poster{
  position:absolute;inset:0;padding:1.3rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:
    linear-gradient(180deg,rgba(240,42,31,.09),transparent 32%),
    repeating-linear-gradient(90deg,rgba(237,232,220,.055) 0 1px,transparent 1px 34px),
    linear-gradient(158deg,#262626,#0D0D0D 74%);
}
.poster::before,.poster::after{
  content:'';position:absolute;width:16px;height:16px;
  border:1px solid rgba(237,232,220,.3);
}
.poster::before{top:13px;left:13px;border-right:0;border-bottom:0}
.poster::after{bottom:13px;right:13px;border-left:0;border-top:0}
.poster-cat{
  font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--film);margin-bottom:.55rem;
}
.poster b{
  font-size:1.08rem;font-weight:700;letter-spacing:-.03em;line-height:1.18;
  color:var(--paper);text-wrap:balance;
}
.poster-rule{display:block;height:1px;background:var(--line-2);margin:.85rem 0 .6rem}
.poster em{
  font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--muted-2);
}
.featured .poster{padding:1.6rem}
.featured .poster b{font-size:1.3rem}
.thumb-top{
  position:absolute;top:.85rem;left:.85rem;right:.85rem;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.chip{
  background:var(--signal-solid);color:#fff;border-radius:999px;
  padding:.34rem .75rem;font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.06em;
}
.chip.ghost-chip{
  background:rgba(9,9,9,.6);color:var(--paper);
  border:1px solid var(--line-2);backdrop-filter:blur(8px);
}
.thumb-bot{
  position:absolute;left:.95rem;right:.95rem;bottom:.95rem;z-index:2;
}
.thumb-bot .cat{
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--film);
}
.thumb-bot h4{
  margin:.45rem 0 0;
  font-size:.98rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;
  color:var(--paper);
}
.play{
  position:absolute;inset:0;margin:auto;z-index:2;
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(237,232,220,.35);
  background:rgba(9,9,9,.42);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  opacity:0;transform:scale(.85);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s,border-color .3s;
}
.play::after{
  content:'';width:0;height:0;margin-left:3px;
  border-left:12px solid var(--paper);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.reel-card:hover .play{opacity:1;transform:none;background:rgba(240,42,31,.9);border-color:transparent}

/* follow tile */
.follow-tile{
  display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:9/16;padding:1.3rem;
  border-radius:20px;border:1px dashed var(--line-2);
  background:var(--bg-2);
  transition:border-color .4s,background .4s,transform .5s var(--ease);
}
.follow-tile:hover{
  border-color:var(--signal);background:var(--card);
  transform:translateY(-6px) rotate(.6deg);
}
.follow-tile b{
  font-size:1.3rem;font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--paper);
}
.follow-tile .body{font-size:.85rem;margin-top:.7rem}
.follow-tile .arrow{
  align-self:flex-start;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--paper);font-size:.95rem;transition:background .3s,border-color .3s,transform .4s var(--ease);
}
.follow-tile:hover .arrow{background:var(--signal);border-color:transparent;transform:rotate(45deg)}

.reel-note{
  margin-top:2rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}

/* 04 — language */
.lang-grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;
  margin-top:clamp(3rem,6vw,4.5rem);
}
@media(min-width:1000px){
  .lang-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
}
.swatches{
  display:grid;gap:clamp(.9rem,1.6vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));
}
.swatches .sw{
  display:block;aspect-ratio:1;border-radius:22px;background:var(--c);
  transition:transform .5s var(--ease);
}
.swatches figure:hover .sw{transform:translateY(-5px) rotate(-2deg)}
.swatches .sw-void{border:1px solid var(--line-2)}
.swatches figcaption{
  margin-top:.95rem;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);
}
.swatches figcaption span{opacity:.5;margin:0 .25em}
.lang-type{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start}
.lang-type .serif{font-style:italic}

.motion-grid{
  display:grid;gap:clamp(3rem,6vw,5rem);align-items:center;
  margin-top:clamp(5rem,10vh,8rem);
  padding-top:clamp(4rem,8vh,6rem);
  border-top:1px solid var(--line);
}
@media(min-width:1000px){
  .motion-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.steps{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:0}
.steps li{
  display:flex;align-items:center;gap:1rem;
  padding:1.25rem 0;border-top:1px solid var(--line);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);transition:color .3s,padding-left .4s var(--ease);
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li:hover{color:var(--paper);padding-left:.6rem}
.steps li span{font-family:var(--mono);color:var(--signal)}
.steps li i{font-style:normal;opacity:.35}

/* camera rig */
.camera-rig{display:flex;justify-content:center;perspective:1400px}
.cam-frame{
  position:relative;width:min(100%,560px);aspect-ratio:16/11;
  border:1px solid var(--line-2);border-radius:32px;
  transform:rotateX(9deg) rotateY(-13deg) rotate(1.5deg);
  transform-style:preserve-3d;
  transition:transform .9s var(--ease);
}
.camera-rig:hover .cam-frame{transform:rotateX(5deg) rotateY(-7deg)}
.rec-ring{
  position:absolute;top:8%;right:6%;
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--signal);display:grid;place-items:center;
  transform:translateZ(60px);
}
.rec-ring i{width:26px;height:26px;border-radius:50%;background:var(--signal);animation:blink 2s ease-in-out infinite}
.cam-card{
  position:absolute;border-radius:16px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);
}
.c-paper{
  width:44%;height:52%;left:11%;top:26%;
  background:var(--paper);transform:rotate(-4deg) translateZ(20px);
}
.c-signal{
  width:44%;height:52%;left:32%;top:22%;
  background:var(--signal);transform:rotate(7deg) translateZ(45px);
}
.c-void{
  width:38%;height:34%;left:22%;top:52%;
  background:#232323;border:1px solid var(--line-2);
  transform:rotate(-1deg) translateZ(75px);
}

/* 05 — chair */
/* Single column: the still is presented at its native scope ratio, uncropped,
   so it needs the full content width to read as a screen rather than a box. */
.chair-grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.chair-copy{max-width:64ch}
/* 05 — the Mobius frame, native scope ratio */
.quote-card{--ar:3182/1526}

.quote-card blockquote{
  font-style:italic;
  font-size:clamp(1.5rem,2.5vw,2.15rem);
  line-height:1.28;
}
.quote-card .label{margin:1.8rem 0 0}
.quote-credit{
  margin-top:.9rem;
  font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
}
.quote-credit span{opacity:.45;margin:0 .3em}

/* 06 — the signal (message panel) */
.signal-grid{display:grid;gap:clamp(3rem,6vw,5rem);align-items:start}
@media(min-width:1000px){
  .signal-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.form-card{
  padding:clamp(1.6rem,3vw,2.6rem);
  background:linear-gradient(150deg,var(--card-hi),var(--card) 65%);
}
.field{margin-bottom:1.35rem}
.field label{
  display:block;margin-bottom:.6rem;
  font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);
}
.field input,.field select,.field textarea{
  width:100%;
  background:rgba(9,9,9,.55);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.9rem 1rem;
  color:var(--paper);
  font-family:var(--sans);font-size:.95rem;line-height:1.5;
  transition:border-color .3s,background .3s,box-shadow .3s;
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:130px}
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EDE8DC' stroke-width='1.6' opacity='.55'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  padding-right:2.6rem;
}
.field select option{background:#141414;color:var(--paper)}
.field input::placeholder,.field textarea::placeholder{color:rgba(237,232,220,.28)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--signal);
  background:rgba(9,9,9,.8);
  box-shadow:0 0 0 3px rgba(240,42,31,.16);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--signal)}
.field-error{
  display:none;margin-top:.5rem;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);
}
.field-error.on{display:block}

/* honeypot — hidden from people, reachable by bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

#f-submit{border:0;cursor:pointer;font-family:var(--sans);margin-top:.4rem}
#f-submit[disabled]{opacity:.55;cursor:progress}
.form-status{
  margin-top:1.1rem;min-height:1.2em;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);
}
.form-status.ok{color:var(--film)}
.form-status.bad{color:var(--signal)}

/* sent confirmation replaces the form */
.form-sent{padding:clamp(1rem,2vw,2rem) 0;text-align:left}
.form-sent .serif{margin-bottom:1rem}
.form-sent .body{font-size:.95rem}

/* ── FOOTER ─────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line);
  padding-block:2.6rem calc(2.6rem + 2.5rem);
}
.foot-grid{
  display:flex;flex-wrap:wrap;gap:1.25rem;
  align-items:center;justify-content:space-between;
}
.foot-mid,.foot-right{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);
}
/* the byline reads as a marked highlight — Signal block, Paper text.
   Right padding is trimmed to absorb the trailing .2em letter-space. */
.by-link{
  display:inline-block;
  background:var(--signal-solid);
  color:#fff;
  padding:.34em .38em .34em .58em;
  margin-left:.35em;
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.by-link:hover,.by-link:focus-visible{
  background:var(--paper);
  color:var(--void);
  box-shadow:0 6px 22px -8px rgba(237,232,220,.5);
}
.by-link:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* grid children must be allowed to shrink below their content width */
.hero-grid > *,.idea-grid > *,.lang-grid > *,.motion-grid > *,
.chair-grid > *,.featured > *,.reel-head > *{min-width:0}

/* ── REVEAL ─────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(26px);filter:blur(9px);
  transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease);
}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.cards .reveal:nth-child(1){transition-delay:0s}
.cards .reveal:nth-child(2){transition-delay:.1s}
.cards .reveal:nth-child(3){transition-delay:.2s}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;filter:none}
  .hero-title .line > span{transform:none}
  .hero-serif,.hero-body,.hero-actions,.hero-emblem{opacity:1}
  .grain{display:none}
}

/* ═══════════════════════════════════════════════════════════
   THE JOURNAL — breakdown pages and their index
   ═══════════════════════════════════════════════════════════ */

.journal-article{padding-top:calc(var(--nav-h) + clamp(2rem,6vh,4rem))}
.journal-title{
  font-weight:700;
  font-size:clamp(2.1rem,5vw,4.2rem);
  line-height:1.02;letter-spacing:-.04em;
  color:var(--paper);text-wrap:balance;
  max-width:20ch;
}
.journal-meta{
  margin-top:1.6rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--muted-2);text-transform:uppercase;
}
.journal-meta span{opacity:.4;margin:0 .5em}
.journal-standfirst{
  margin-top:1.8rem;max-width:34ch;
  color:var(--film);
}
.journal-hero{margin-top:clamp(2.5rem,5vw,3.5rem)}
.journal-hero .plate-body{padding:0}
@media(min-width:760px){
  .journal-hero .plate-body{padding:0}
}

/* ── prose ───────────────────────────────────────────────
   A measure of ~68ch: long enough to breathe, short enough
   that the eye finds the next line without hunting.        */
.prose{
  /* nested inside .wrap, never sharing it — .wrap's margin-inline:auto would
     centre this narrow measure instead of aligning it with everything else */
  max-width:68ch;
  margin-top:clamp(3rem,6vw,4.5rem);
  font-size:clamp(1.02rem,1.15vw,1.18rem);
  line-height:1.75;
  color:rgba(237,232,220,.78);
  letter-spacing:-.004em;
}
.prose > * + *{margin-top:1.5rem}
.prose h2,.prose h3,.prose h4{
  color:var(--paper);font-weight:700;letter-spacing:-.03em;line-height:1.15;
  margin-top:clamp(3rem,5vw,4rem);
}
.prose h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.prose h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
.prose strong{color:var(--paper);font-weight:700}
.prose em{font-family:var(--serif);font-style:italic;font-size:1.06em}
.prose a{
  color:var(--paper);
  border-bottom:1px solid rgba(240,42,31,.55);
  transition:border-color .25s,color .25s;
}
.prose a:hover{border-bottom-color:var(--signal);color:#fff}
.prose blockquote{
  margin-top:clamp(2.2rem,4vw,3rem);
  padding-left:clamp(1.2rem,2.5vw,2rem);
  border-left:2px solid var(--signal);
  font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.38;color:var(--paper);
}
.prose-list{margin-top:1.5rem;display:grid;gap:.85rem}
.prose-list li{
  position:relative;padding-left:1.6rem;
}
.prose-list li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--signal);
}
.prose-figure{margin-top:clamp(2.2rem,4vw,3rem)}
.prose-figure img{
  width:100%;height:auto;border-radius:18px;
  border:1px solid var(--line);
}
.prose-figure figcaption{
  margin-top:.9rem;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);
}
.prose hr{
  border:0;height:1px;background:var(--line);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.prose code{
  font-family:var(--mono);font-size:.9em;
  background:var(--card);padding:.15em .4em;border-radius:5px;
}

.journal-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.8rem;
  margin-top:clamp(3.5rem,7vw,5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
}
.journal-cta .pill{margin-top:0}

/* ── prev / next ─────────────────────────────────────────── */
.journal-nav{
  display:grid;gap:1.2rem;
  padding-bottom:clamp(4rem,8vh,6rem);
}
@media(min-width:700px){
  .journal-nav{grid-template-columns:1fr 1fr}
}
.jn{
  display:block;padding:clamp(1.4rem,2.4vw,2rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);
  transition:border-color .35s,background .35s,transform .5s var(--ease);
}
.jn:hover{border-color:var(--line-2);background:var(--card-hi);transform:translateY(-4px)}
.jn span{
  display:block;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);
}
.jn b{
  display:block;margin-top:.7rem;
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.2;color:var(--paper);
}
.jn-next{text-align:right}

/* ── the index ───────────────────────────────────────────── */
.journal-list{
  display:grid;gap:clamp(1.2rem,2vw,1.8rem);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.journal-card{
  display:grid;gap:clamp(1.2rem,2.4vw,2rem);
  align-items:center;
  padding:clamp(1.2rem,2vw,1.6rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);
  transition:border-color .35s,background .35s,transform .5s var(--ease);
}
@media(min-width:760px){
  .journal-card{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
}
.journal-card:hover{
  border-color:var(--line-2);background:var(--card-hi);
  transform:translateY(-5px);
}
.journal-card-shot{
  display:block;overflow:hidden;border-radius:16px;
  aspect-ratio:var(--ar,16/9);background:var(--void);
}
.journal-card-shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.journal-card:hover .journal-card-shot img{transform:scale(1.05)}
.journal-card-body{display:block}
.journal-card-body .cat{
  display:block;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);
}
.journal-card-body b{
  display:block;margin-top:.9rem;
  font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.14;color:var(--paper);
  text-wrap:balance;
}
.journal-card-body .body{display:block;margin-top:.9rem;font-size:.95rem}
.journal-card-meta{
  display:block;margin-top:1.3rem;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);
}
.journal-card-meta span{opacity:.4;margin:0 .4em}

/* ── the glossary ────────────────────────────────────────── */
.gloss-def{
  color:var(--paper);
  max-width:44ch;
}
.gloss-also{color:var(--film);text-transform:none;letter-spacing:0}
.gloss-groups{display:grid;gap:clamp(3rem,6vw,4.5rem);margin-top:clamp(3rem,6vw,4.5rem)}
.gloss-group .label{margin-bottom:1.5rem}
.gloss-grid{
  display:grid;gap:clamp(1rem,1.6vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
.gloss-card{
  display:block;
  padding:clamp(1.4rem,2.2vw,1.9rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);
  transition:border-color .35s,background .35s,transform .5s var(--ease);
}
.gloss-card:hover{
  border-color:rgba(240,42,31,.4);background:var(--card-hi);
  transform:translateY(-5px);
}
.gloss-card b{
  display:block;
  font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.15;color:var(--paper);
}
.gloss-card .body{display:block;margin-top:.8rem;font-size:.92rem;max-width:none}
.gloss-related{
  padding-top:clamp(3rem,6vw,4rem);
  padding-bottom:clamp(4rem,8vh,6rem);
  border-top:1px solid var(--line);
}

/* card → glossary route; sits at the foot of each breakdown card */
.break-link{
  margin-top:auto;padding-top:1.6rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);
  transition:gap .3s var(--ease),color .25s;
}
.break-link i{font-style:normal;transition:transform .3s var(--ease)}
.break-card:hover .break-link i{transform:translateX(3px)}

/* inline glossary links inside prose and body copy */
.gloss-link,.body a{
  color:var(--paper);
  border-bottom:1px solid rgba(240,42,31,.5);
  transition:border-color .25s,color .25s;
}
.gloss-link:hover,.body a:hover{border-bottom-color:var(--signal);color:#fff}

/* ── home page: latest content ───────────────────────────
   Real links to real pages, refreshed by the builder. */
.latest{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  margin-top:clamp(3.5rem,7vw,5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
}
@media(min-width:860px){
  .latest{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.latest-col .body{margin-bottom:1.8rem}
.latest-item{
  display:block;padding:1.1rem 0;
  border-top:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.latest-item:last-of-type{border-bottom:1px solid var(--line)}
.latest-item:hover{padding-left:.6rem}
.latest-item b{
  display:block;
  font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.2;color:var(--paper);
}
.latest-item span{
  display:block;margin-top:.45rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);
}
.latest-item span i{font-style:normal;opacity:.4;margin:0 .35em}
.latest-terms{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.6rem}
.latest-term{
  display:inline-block;padding:.62rem 1.05rem;
  border:1px solid var(--line);border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
  transition:border-color .3s,color .3s,background .3s;
}
.latest-term:hover{border-color:var(--signal);color:var(--paper);background:var(--card)}

/* footer social row — official profiles, one line above the footer rule */
.foot-social{
  display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.2rem);
  padding-bottom:1.8rem;margin-bottom:1.8rem;
  border-bottom:1px solid var(--line);
}
.foot-social a{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);
  transition:color .25s;
}
.foot-social a:hover{color:var(--paper)}

/* social icons sit with their label — the label stays as anchor text */
.foot-social a{display:inline-flex;align-items:center;gap:.6rem}
.soc-icon{
  width:16px;height:16px;flex:none;
  color:var(--muted-2);
  transition:color .25s,transform .35s var(--ease);
}
.foot-social a:hover .soc-icon{color:var(--signal);transform:translateY(-1px)}

/* ── cookie consent ──────────────────────────────────────
   Injected by JS only when no choice is stored, so returning
   visitors never see a flash of it. position:fixed, so it adds
   no layout shift. Sits above the HUD strip on the home page. */
.consent{
  position:fixed;z-index:150;
  left:var(--pad);bottom:clamp(3.6rem,7vh,4.6rem);
  width:min(calc(100vw - var(--pad) * 2),360px);
  padding:clamp(1.3rem,2.2vw,1.7rem);
  background:var(--card-hi);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.consent.in{opacity:1;transform:none}
.consent .label{margin-bottom:.9rem}
.consent .body{font-size:.86rem;line-height:1.55;max-width:none}

/* the viewfinder motif, same as the stills and the cursor */
.consent-frame{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.consent-frame::before,.consent-frame::after{
  content:'';position:absolute;width:14px;height:14px;
  border:1px solid rgba(237,232,220,.28);
}
.consent-frame::before{top:12px;left:12px;border-right:0;border-bottom:0}
.consent-frame::after{bottom:12px;right:12px;border-left:0;border-top:0}

.consent-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;
  margin-top:1.5rem;
}
.consent-actions .pill{
  margin-top:0;border:0;cursor:pointer;font-family:var(--sans);
  padding:.8rem 1.4rem;font-size:.66rem;
}
.consent-actions .ghost{
  background:none;border:0;cursor:pointer;font-family:var(--sans);
  padding:.5rem 0;font-size:.66rem;
}

/* footer link back to the choice */
.foot-utility{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}
.cookie-reopen{
  background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);padding:0;
  transition:color .25s;
}
.cookie-reopen:hover{color:var(--paper)}

@media(prefers-reduced-motion:reduce){
  .consent{opacity:1;transform:none;transition:none}
}