/* ══════════════════════════════════════════════════════════════════════
   SHOEBILL STUDIO — CAMERA CHROME
   Everything that frames the scenes rather than living inside one:
   the colour grade, the letterbox cut, the HUD slate, the cut banner,
   the boot slate, the menu, the overlays and the cursor.

   The playable hall opts out of the whole layer (see § HALL below).
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════ 1 · COLOUR GRADE ══════════
   One static fixed layer above the scenes and the curtain, below the HUD.
   Corner weighting ONLY.

   It used to carry a warm key radial and a warm/cool split tone as well, and
   because this layer is fixed over every page that pale wash was the "fog"
   hanging over the whole site — the hero, the reel, the end card, everywhere.
   Neither belongs here: scene lighting is the scene's own job.
   No scanlines either; the CRT pass is a Projects effect, in scenes.css. */

.grade {
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.grade::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* eased off at the corners: at 0.5 it was knocking a third of the
       brightness out of the hero's scroll cue, which sits down there */
    radial-gradient(126% 104% at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(9, 7, 6, 0.14) 80%, rgba(5, 4, 3, 0.3) 100%);
}

/* ══════════ 2 · LETTERBOX ══════════ */

.letterbox {
  position: fixed;
  inset: 0;
  z-index: 43;
  pointer-events: none;
}
.letterbox i {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: #050403;
  transition: height 0.5s var(--ease-cut, cubic-bezier(0.76, 0, 0.18, 1));
  will-change: height;
}
.letterbox i:first-child { top: 0;    box-shadow: 0 1px 0 rgba(163, 32, 23, 0.6); }
.letterbox i:last-child  { bottom: 0; box-shadow: 0 -1px 0 rgba(163, 32, 23, 0.6); }
body.is-cutting .letterbox i { height: 8.5vh; }

/* ══════════ 3 · HUD ══════════
   Red on purpose: the one hue that stays legible over the void AND the
   paper scenes, so the chrome never has to know which scene is running. */

:root {
  --frame: clamp(9px, 1.1vh, 14px);
  --hud-in: calc(var(--frame) + 22px);
  --hud: #bb3527;
}

.reel-hud {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: clamp(8px, 1vh, 11px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--hud);
  transition: opacity 0.4s ease;
}
.reel-hud .hud {
  position: absolute;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.reel-hud em { font-style: normal; color: var(--red-hot); }

.hud--brand {
  top: var(--hud-in);
  left: var(--hud-in);
  display: flex;
  align-items: center;
  gap: 0.85em;
}
.hud--brand b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-hot);
  box-shadow: 0 0 9px rgba(255, 58, 32, 0.85);
  animation: rec-blink 2.4s steps(1, end) infinite;
}
@keyframes rec-blink { 0%, 58% { opacity: 1; } 59%, 100% { opacity: 0.12; } }

.hud--slate {
  /* sits a touch lower than the rest of the HUD furniture on purpose --
     it reads as a slate stamped near the bottom edge, not as part of the
     corner frame */
  bottom: calc(var(--hud-in) - 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.1em;
}
.hud--slate #hud-tc { letter-spacing: 0.2em; }

.hud-mark {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.5px solid rgba(187, 53, 39, 0.7);
}
.hud-mark--tl { top: var(--frame);    left: var(--frame);  border-right: 0; border-bottom: 0; }
.hud-mark--tr { top: var(--frame);    right: var(--frame); border-left: 0;  border-bottom: 0; }
.hud-mark--bl { bottom: var(--frame); left: var(--frame);  border-right: 0; border-top: 0; }
.hud-mark--br { bottom: var(--frame); right: var(--frame); border-left: 0;  border-top: 0; }

/* ══════════ HALL ══════════
   The playable hall is out of scope for the revamp: while it is running,
   every framing layer steps aside so it looks exactly as it always did. */
body:has(#page-hall.is-active) .grade,
body:has(#page-hall.is-active) .reel-hud,
body:has(#page-hall.is-active) .letterbox { opacity: 0; visibility: hidden; }

/* ══════════ 4 · CUT BANNER ══════════ */

.curtain__banner {
  gap: 0.9vh;
  align-items: flex-start;
}
.curtain__banner span {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(30px, 7.4vh, 92px);
  letter-spacing: 0.02em;
  line-height: 0.92;
  color: var(--bone);
  text-shadow: 5px 5px 0 var(--red), 10px 10px 0 rgba(7, 5, 4, 0.55);
}
.curtain__banner-ghost {
  font-family: var(--font-mono) !important;
  font-size: clamp(10px, 1.7vh, 18px) !important;
  letter-spacing: 0.5em !important;
  color: var(--red-hot) !important;
  text-shadow: none !important;
}
/* ── the hall's own card ──
   Every other cut is a slanted italic shout that is gone in a second. This
   one has to sit there while a 3D room builds, so it is the opposite: square
   to the frame, outlined rather than filled, with a mono readout ticking
   underneath. It runs 3s instead of 1s, and .is-done cuts it short the
   instant the hall reports its first frame. */
.curtain__banner.flash--hall {
  transform: translate(-50%, -50%) rotate(0deg);
  gap: 2.2vh;
  /* fades IN and then simply stays: no timed exit, because the card is not
     decoration here -- it is the answer to "is it ready yet". chrome.js takes
     it away on shoebill:hall-ready and not a moment before. */
  animation: banner-hall-in 0.5s ease-out forwards;
}
.curtain__banner.flash--hall.is-done { animation: banner-hall-out 0.32s ease-in forwards; }
@keyframes banner-hall-in {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(1.06); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}
@keyframes banner-hall-out {
  from { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.985); }
}
/* THE HALL — outlined, not filled, so it reads as a plate and not a shout.
   The ghost rule it overrides ships !important, hence the same here. */
.curtain__banner.flash--hall .curtain__banner-ghost {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 7.4vh, 74px) !important;
  font-style: normal !important;
  letter-spacing: 0.1em !important;
  color: transparent !important;
  -webkit-text-stroke: 2px var(--red);
  text-shadow: none !important;
}
/* LOADING... — the readout, and the only thing still moving */
.curtain__banner.flash--hall #cut-title {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(9px, 1.5vh, 14px);
  letter-spacing: 0.62em;
  text-indent: 0.62em;      /* balance the trailing letter-space */
  color: var(--bone);
  text-shadow: none;
  animation: hall-loading 1.05s steps(1, end) infinite;
}
@keyframes hall-loading { 0%, 55% { opacity: 0.92; } 56%, 100% { opacity: 0.34; } }

.curtain__banner-bar {
  width: 34vw;
  height: 4px;
  background: var(--red);
}

/* ══════════ 5 · TITLE SEQUENCE ══════════
   A closed shutter with a red seam down the middle, a film-leader dial that
   sweeps while the site loads, and a checklist that ticks off for real. It
   ends by OPENING the shutter — the same gesture the letterbox makes on
   every scene cut, which is why it belongs to this file.

   Opaque from the first paint; see intro.js for what it waits on. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 96;
  overflow: hidden;
  background: #030303;
  display: grid;
  place-items: center;
}
.intro.is-gone { display: none; }

/* — the shutter halves — */
.intro__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.2%;
  background:
    linear-gradient(rgba(6, 5, 5, 0.95), rgba(6, 5, 5, 0.95)),
    url("assets/tex-paper-black.jpg") center / cover;
  will-change: transform;
  transition: transform 0.62s cubic-bezier(0.72, 0, 0.14, 1);
}
.intro__half--top { top: 0; }
.intro__half--bottom { bottom: 0; }

/* — the seam they meet on — */
.intro__seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  animation: seam-open 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes seam-open { to { transform: scaleX(1); } }

/* — registration marks, the same language as the running HUD — */
.intro__crop {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(187, 53, 39, 0.55);
  z-index: 4;
  opacity: 0;
  animation: crop-in 0.5s ease 0.5s both;
}
@keyframes crop-in { to { opacity: 1; } }
.intro__crop--tl { top: 26px; left: 26px; border-right: 0; border-bottom: 0; }
.intro__crop--tr { top: 26px; right: 26px; border-left: 0; border-bottom: 0; }
.intro__crop--bl { bottom: 26px; left: 26px; border-right: 0; border-top: 0; }
.intro__crop--br { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }

/* — the core — */
.intro__core {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 26px);
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.72, 0, 0.14, 1);
}

/* the film-leader dial */
.intro__dial {
  position: relative;
  width: clamp(96px, 13vh, 156px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: dial-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes dial-in {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}
.intro__dial-ring,
.intro__dial-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.intro__dial-ring {
  border: 1px solid rgba(244, 241, 233, 0.16);
}
.intro__dial-ring::before {
  /* the leader's index tick at twelve o'clock */
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 2px;
  height: 9px;
  margin-left: -1px;
  background: var(--red-hot);
}
.intro__dial-sweep {
  background: conic-gradient(from 0deg,
    rgba(224, 18, 44, 0) 0deg,
    rgba(224, 18, 44, 0.65) 46deg,
    rgba(224, 18, 44, 0) 78deg);
  mask: radial-gradient(circle, transparent 66%, #000 68%);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%);
  animation: dial-spin 1.5s linear infinite;
}
@keyframes dial-spin { to { transform: rotate(360deg); } }
/* the crosshair through it */
.intro__dial-cross::before,
.intro__dial-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(244, 241, 233, 0.1);
}
.intro__dial-cross::before { width: 1px; height: 128%; margin: -64% 0 0 0; }
.intro__dial-cross::after  { height: 1px; width: 128%; margin: 0 0 0 -64%; }

.intro__mark {
  position: relative;
  z-index: 2;
  width: 46%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(224, 18, 44, 0.4));
}

/* the wordmark */
.intro__word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32em;
  text-align: center;
  overflow: hidden;
}
.intro__word-a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.6vh, 2.1rem);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--bone);
  animation: word-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}
.intro__word-b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.3vh, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--red-hot);
  animation: word-track 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}
@keyframes word-rise {
  from { opacity: 0; transform: translateY(110%); }
  to   { opacity: 1; transform: none; }
}
@keyframes word-track {
  from { opacity: 0; letter-spacing: 0.02em; }
  to   { opacity: 1; letter-spacing: 0.54em; }
}

/* the checklist — no longer a list. It reads as one centred line,
   ORDER IN CHAOS, whose three words light up as their milestone lands. */
.intro__list {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: 0.75em;
  margin-top: 0.4em;
  padding-left: 0.3em;          /* balance the trailing letter-space */
  font-family: var(--font-mono);
  font-size: clamp(8px, 1.15vh, 11px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.3);
  animation: meter-in 0.5s ease 0.66s both;
}
.intro__list li { transition: color 0.35s ease; }
.intro__list li.is-done { color: var(--bone); }

/* the meter */
.intro__meter {
  display: flex;
  align-items: center;
  gap: 1em;
  animation: meter-in 0.5s ease 0.78s both;
}
@keyframes meter-in { from { opacity: 0; } to { opacity: 1; } }
.intro__rail {
  width: clamp(140px, 22vw, 260px);
  height: 2px;
  background: rgba(244, 241, 233, 0.14);
  overflow: hidden;
}
.intro__rail i {
  display: block;
  height: 100%;
  background: var(--red-hot);
  transform: scaleX(0);
  transform-origin: left;
}
.intro__pct {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.3vh, 12px);
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--hud);
  min-width: 3.6em;
}
.intro__pct em { font-style: normal; opacity: 0.45; }

/* ── the exit: the core drops out, the seam flares, the shutter opens ── */
.intro.is-out { background: transparent; }
.intro.is-out .intro__core {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}
.intro.is-out .intro__crop { opacity: 0; transition: opacity 0.2s ease; animation: none; }
.intro.is-out .intro__seam {
  animation: seam-flare 0.44s cubic-bezier(0.7, 0, 0.2, 1) 0.16s both;
}
@keyframes seam-flare {
  0%   { transform: scaleX(1) scaleY(1); background: var(--red); }
  38%  { transform: scaleX(1) scaleY(5); background: #ff6a4a; }
  100% { transform: scaleX(1) scaleY(1); background: var(--red); opacity: 0; }
}
.intro.is-out .intro__half--top {
  transform: translate3d(0, -100%, 0);
  transition-delay: 0.26s;
}
.intro.is-out .intro__half--bottom {
  transform: translate3d(0, 100%, 0);
  transition-delay: 0.26s;
}

@media (max-width: 640px) {
  /* only the size shrinks here: setting all four insets at once made every
     mark collapse into the top-left corner */
  .intro__crop { width: 14px; height: 14px; }
  .intro__crop--tl { top: 16px; left: 16px; }
  .intro__crop--tr { top: 16px; right: 16px; }
  .intro__crop--bl { bottom: 16px; left: 16px; }
  .intro__crop--br { bottom: 16px; right: 16px; }
  .intro__rail { width: 44vw; }
}

@media (prefers-reduced-motion: reduce) {
  .intro__seam, .intro__dial, .intro__dial-sweep, .intro__word-a,
  .intro__word-b, .intro__list, .intro__meter, .intro__crop { animation: none; }
  .intro__seam { transform: scaleX(1); }
  .intro__word-b { letter-spacing: 0.54em; }
  .intro__crop { opacity: 1; }
  .intro__half { transition: opacity 0.2s linear; }
  .intro.is-out .intro__half { opacity: 0; transform: none; }
  .intro.is-out .intro__core { transform: none; }
  .intro.is-out .intro__seam { animation: none; opacity: 0; }
}

/* ══════════ 6 · MENU ══════════ */

.menu__panel {
  padding-left: 0;
  background:
    linear-gradient(rgba(8, 7, 6, 0.93), rgba(8, 7, 6, 0.93)),
    url("assets/tex-paper-black.jpg") center / cover;
}
.menu__panel::before {
  content: "INDEX";
  position: absolute;
  left: 4.5%;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.3vh, 13px);
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: var(--red);
}
.menu ul { counter-reset: nav; width: 76%; margin-left: 12%; }
.menu li {
  list-style: none;
  counter-increment: nav;
  border-bottom: 1px solid rgba(244, 241, 233, 0.1);
}
.menu a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 100%;
  padding: 0.5em 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.4vh, 52px);
  letter-spacing: 0.01em;
  line-height: 1.24;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  cursor: none;
  transition: color 0.3s var(--ease-out, ease), transform 0.3s var(--ease-out, ease);
}
/* scoped to the NAV list: unscoped, `.menu a` also caught the address in
   .menu__foot, which is a following sibling of the <ul> and therefore still
   inside the counter's scope -- so the email rendered with a stray "05"
   glued to its left and sat a few pixels off the name below it. */
.menu ul a::before {
  content: counter(nav, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.3em;
  letter-spacing: 0.24em;
  /* --red, at full strength: every red the menu shows at rest is this one tone,
     the same one "and the occasional strange idea" uses on the contact page.
     The 0.85 that used to sit here dimmed it into a fifth shade of red. */
  color: var(--red);
}
.menu a i {
  margin-left: auto;
  font-style: normal;
  font-size: 0.34em;
  color: var(--red-bright);
  opacity: 0;
  transition: opacity 0.25s;
}
.menu a:hover { color: var(--red-bright); transform: translateX(0.3em); }
.menu a:hover i { opacity: 1; }
.menu a.menu-play { color: var(--red); }
.menu a.menu-play:hover { color: var(--red-hot); }
.menu__foot {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6vh;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: clamp(8px, 1.2vh, 12px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.4);
  line-height: 2.1;
}
/* The address is plain text here, not a link: a mailto in this panel had no
   data-goto, so the menu's own click handler ran gotoPage(NaN) and froze the
   page behind the curtain. Contact still carries the real mailto. As a span it
   also inherits the foot's mono/tracking/line-height instead of the display
   face `.menu a` was handing it, so it lines up with the name underneath. */
.menu__mail {
  display: block;
  color: var(--red);
}
.menu__foot em { font-style: normal; color: var(--red); margin: 0 0.5em; }

.burger span { height: 2px; }
/* the shell is dark on every scene now, so the burger is light by default */
.burger:not(.is-open) span { background: var(--bone); }

/* ══════════ 7 · OVERLAYS · the screening room ══════════ */

.overlay { background: rgba(5, 4, 3, 0.96); }
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 50% 45%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
}
.overlay__inner { position: relative; z-index: 2; }
.overlay__slate {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 2.2vh;
  font-family: var(--font-mono);
  font-size: clamp(8px, 1.3vh, 13px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.5);
}
.overlay__slate em {
  font-style: normal;
  padding: 0.3em 0.6em 0.25em;
  background: var(--red);
  color: var(--bone);
  letter-spacing: 0.14em;
}
.overlay__slate i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(163, 32, 23, 0.8), rgba(163, 32, 23, 0)); }

#proj-overlay-video {
  box-shadow: -14px 14px 0 var(--red), 0 30px 60px -20px rgba(0, 0, 0, 0.9);
  outline: 1px solid rgba(244, 241, 233, 0.14);
}
.overlay__title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(20px, 4vh, 44px);
  letter-spacing: 0.01em;
  line-height: 1.06;
  color: var(--bone);
}
.overlay__title::after {
  content: "";
  display: block;
  width: 5vw;
  height: 3px;
  margin-top: 1.8vh;
  background: var(--red);
}
.overlay__text {
  font-family: var(--font-ui);
  color: rgba(217, 212, 201, 0.82);
  columns: 2;
  column-gap: 3vw;
  max-width: none;
}
.overlay__images img { box-shadow: -10px 10px 0 rgba(163, 32, 23, 0.45), 0 20px 40px -18px rgba(0, 0, 0, 0.8); }

.overlay__close {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.6vh, 15px);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone);
}
.overlay__close::after { content: "CLOSE"; }
.overlay__close:hover { transform: none; color: var(--red-hot); }

.reel-btn span { font-family: var(--font-display); font-style: normal; letter-spacing: 0.05em; }
.reel-btn small { letter-spacing: 0.34em; }

/* ══════════ 8 · CURSOR ══════════ */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
.cursor__dot,
.cursor__ring,
.cursor__label {
  position: absolute;
  left: 0;
  top: 0;
}
.cursor__dot {
  transform: translate(-50%, -50%);
  color: var(--red-hot);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s ease;
}
.cursor__ring {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(192, 57, 43, 0.55);
  border-radius: 50%;
  transition:
    width 0.32s var(--ease-pop, ease), height 0.32s var(--ease-pop, ease),
    margin 0.32s var(--ease-pop, ease), border-color 0.25s ease, background 0.25s ease;
}
.cursor__label {
  transform: translate(-50%, -50%);
  padding: 0.55em 0.9em 0.5em;
  background: var(--red);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 8%, 97% 0, 100% 92%, 3% 100%);
  opacity: 0;
  scale: 0.7;
  transition: opacity 0.25s ease, scale 0.32s var(--ease-pop, ease);
}
.cursor.is-hot .cursor__ring {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--red-hot);
}
.cursor.is-labelled .cursor__ring { background: rgba(163, 32, 23, 0.14); }
.cursor.is-labelled .cursor__dot { opacity: 0; }
.cursor.is-labelled .cursor__label { opacity: 1; scale: 1; }
.cursor.is-down .cursor__ring { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

/* ══════════ 9 · SHARED BITS ══════════ */

.legal-links {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: inherit;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.legal-links a { color: inherit; text-decoration: none; opacity: 0.7; transition: opacity 0.2s, color 0.2s; }
.legal-links a:hover { opacity: 1; color: var(--red-hot); }
.legal-links .sep { color: var(--red); opacity: 0.8; }

/* ══════════ 10 · RESPONSIVE ══════════ */

@media (max-width: 900px) { .overlay__text { columns: 1; } }

@media (max-width: 640px) {
  .hud--slate { display: none; }
  .hud--brand { font-size: 8px; letter-spacing: 0.24em; }
  :root { --hud-in: calc(var(--frame) + 16px); }
  .hud-mark { width: 11px; height: 11px; }
  body.is-cutting .letterbox i { height: 5.5vh; }

  .menu__panel::before { display: none; }
  .menu ul { width: 78%; }
  /* the NAV links only. Unscoped, this also caught the mailto in .menu__foot
     -- same specificity as .menu__foot a but further down the file, so it won
     and blew the address up to 7.4vw on phones. */
  .menu ul a { font-size: 7.4vw; }
  .menu__foot { bottom: 4vh; font-size: 9px; }

  .curtain__banner span { font-size: clamp(24px, 6.4vh, 48px); }
}

@media (hover: none) and (pointer: coarse) {
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hud--brand b { animation: none; opacity: 1; }
  body.is-cutting .letterbox i { height: 0; }
}