/* ==========================================================================
   Narsaik: shared foundation
   One family (Instrument Sans): condensed bold for display, normal width for
   text. Blackout ground, bone ink, one signal red (tally) with a deeper stop for
   the paper ground. Everything here is shared by every page; page files add
   their own composition on top.
   ========================================================================== */

/* The studio's own faces, self-hosted: Syne for display, Inter for text. */
@font-face { font-family: "Syne"; src: url("/fonts/syne-700-800.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-italic-500-600.woff2") format("woff2"); font-weight: 500 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400-800.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* scrollcraft colour roles */
  --sc-canvas: #0b0b0c;
  --sc-surface: #151516;
  --sc-ink: #f1eee8;
  --sc-ink-soft: #a29e97;
  --sc-accent: #a78bfa;
  --sc-accent-ink: #0b0b0c;
  --sc-font-display: "Syne", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono: "Inter", "Helvetica Neue", Arial, sans-serif;
  --sc-shadow-color: 30 6% 2%;

  /* brand */
  --blackout: #0b0b0c;
  --surface: #151516;
  --surface-2: #1d1d1f;
  --bone: #f1eee8;
  --ash: #a29e97;
  --tally: #a78bfa;
  --tally-deep: #7c3aed;
  --paper: #ece8e1;
  --paper-2: #e2ddd4;
  --paper-ink: #121212;
  --paper-soft: #56524b;

  --line: color-mix(in oklab, var(--bone) 13%, transparent);
  --line-strong: color-mix(in oklab, var(--bone) 24%, transparent);

  --cond: 75%;
  --r-ui: 8px;
  --r-frame: 14px;
  --bar-h: 76px;
  --gutter: clamp(16px, 4.4vw, 64px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: dark;
}

/* --------------------------------------------------------------- base -- */
html { background: var(--blackout); }
body {
  font-family: var(--sc-font-text);
  font-stretch: 100%;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  background: var(--blackout);
  color: var(--bone);
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
a:hover { color: var(--tally); }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, video { height: auto; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 10px 14px; border-radius: var(--r-ui);
  background: var(--tally); color: var(--blackout); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform 160ms var(--ease);
}
.skip:focus { transform: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Display type: condensed bold, set tight. Tracking eases off as the face
   narrows, so condensed display needs less negative tracking than a normal
   width would at the same size. */
.display, h1, h2, h3 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* The studio's signature: one word in each headline set in Cormorant italic. */
.serif {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 1.12em; line-height: 0; letter-spacing: -0.005em; color: var(--tally);
}
.ground-paper .serif, .ground-paper .vhero .serif { color: var(--tally-deep); }
.vhero .serif { color: var(--tally); }
/* Labels and small headings: Syne, uppercase, spaced, as the old eyebrows were. */
.post-head__kick, .tier, .tcard__name, .roll__h, .wk-sec__h, .foot__h, .meta, .note__meta, .kick {
  font-family: var(--sc-font-display); font-weight: 800; letter-spacing: 0.16em;
}
.d-1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.8rem); }
.d-2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.4rem); }
.d-3 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem); }
.d-4 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1; }

.lede { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 1.5; max-width: 40ch; text-wrap: pretty; color: var(--bone); }
.body { max-width: 62ch; color: var(--ash); text-wrap: pretty; }
.body + .body { margin-top: 0.9em; }

/* Metadata: the slate. Real labels and real numbers only. */
.meta {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ash);
}
.tc { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* --------------------------------------------------------- the wordmark -- */
.wm { display: block; height: 100%; width: auto; overflow: visible; }
.wm__l { fill: currentColor; }
.wm__p { fill: var(--tally); }

/* ------------------------------------------------------------ the bar --
   Transparent while the page is at rest. Once it moves, the bar gathers into a
   floating shape with its own ground, on every page. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 28px;
  padding-inline: var(--gutter);
  color: var(--bone);
}
.bar::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 8px max(10px, calc(var(--gutter) - 20px));
  border-radius: 16px;
  background: color-mix(in oklab, var(--blackout) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.06), 0 14px 34px -14px rgb(0 0 0 / 0.75);
  opacity: 0; transform: translateY(-8px) scale(0.985);
  transition: opacity 260ms var(--ease), transform 320ms var(--ease);
}
html.is-scrolled .bar::before { opacity: 1; transform: none; }
/* At rest the bar sits straight on footage; a soft shadow keeps its type legible. */
html[data-ground="dark"]:not(.is-scrolled) .bar__link, html[data-ground="dark"]:not(.is-scrolled) .bar__menu { text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
html[data-ground="dark"]:not(.is-scrolled) .bar__mark { filter: drop-shadow(0 1px 8px rgb(0 0 0 / 0.5)); }
.bar__mark { display: block; height: 37px; color: inherit; flex: none; }
.bar__mark .wm__p { transition: transform 260ms var(--ease); transform-box: fill-box; }
.bar__mark:hover { color: inherit; }
.bar__mark:hover .wm__p { transform: translateY(-4%); }
.bar__nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.bar__link {
  position: relative; font-size: 0.9375rem; font-weight: 500; text-decoration: none; padding: 10px 0;
}
.bar__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 200ms var(--ease);
}
.bar__link:hover { color: inherit; }
.bar__link:hover::after, .bar__link[aria-current="page"]::after { transform: scaleX(1); }
.bar__menu { display: none; }

/* ------------------------------------------------------------ buttons --
   Keys, not stickers: a raised face on a darker edge, lit from above. Hover
   lifts the key and runs a light across it; press pushes it into its edge. */
.btn {
  --face: var(--tally); --face-hi: #c4b5fd; --edge: #efe9df; --shade: 0 0 0; --btn-ink: var(--blackout);
  --lift: 0px; --edge-h: 4px; --glow: 0.5; --shade: 0 0 0;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: 10px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap;
  text-decoration: none; color: var(--btn-ink);
  background: linear-gradient(to bottom, var(--face-hi), var(--face) 62%);
  box-shadow:
    0 var(--edge-h) 0 var(--edge),
    0 calc(var(--edge-h) + 6px) 18px -6px rgb(var(--shade) / var(--glow)),
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 -2px 0 rgb(0 0 0 / 0.08);
  transform: translateY(var(--lift));
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
}
.btn::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -70%; width: 50%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.42), transparent);
  transform: skewX(-20deg); opacity: 0; pointer-events: none;
}
.btn:hover { --lift: -2px; --edge-h: 6px; --glow: 0.62; color: var(--btn-ink); filter: brightness(1.05) saturate(1.05); }
.btn:hover::after { opacity: 1; left: 130%; transition: left 680ms var(--ease), opacity 200ms; }
.btn:active { --lift: 3px; --edge-h: 1px; --glow: 0.3; filter: brightness(0.97); transition-duration: 90ms; }
.btn:focus-visible { outline-offset: 5px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; --edge-h: 3px; }
.btn--sm:hover { --edge-h: 5px; }
.btn--sm:active { --edge-h: 1px; }
.btn--ghost { --face: #232326; --face-hi: #303034; --edge: #7c3aed; --btn-ink: var(--bone); --shade: 167 139 250; --glow: 0.32; }
.btn--ghost::after { background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.16), transparent); }
.btn__icon { width: 15px; height: 15px; flex: none; transition: transform 200ms var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

/* The secondary key, in the brand's colours: a dark face on a red edge that
   floods red when pointed at. For "watch", "read", "see" actions. */
.btn--alt { --face: #1d1c1e; --face-hi: #2a292c; --edge: var(--tally-deep); --btn-ink: var(--bone); --shade: 167 139 250; --glow: 0.32; }
.btn--alt::after { background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.3), transparent); }
.btn--alt:hover { --face: var(--tally); --face-hi: #c4b5fd; --edge: #efe9df; --shade: 0 0 0; --btn-ink: var(--blackout); color: var(--blackout); }
.btn__play {
  display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%;
  background: var(--tally); color: var(--blackout); flex: none;
  box-shadow: 0 0 0 4px rgb(167 139 250 / 0.18);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn__play svg { width: 12px; height: 12px; }
.btn--alt:hover .btn__play { background: var(--blackout); color: var(--tally); box-shadow: 0 0 0 4px rgb(11 11 12 / 0.18); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.link-arrow svg { width: 14px; height: 14px; transition: transform 160ms var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

:focus-visible { outline: 2px solid var(--tally); outline-offset: 3px; border-radius: var(--r-ui); }

/* ---------------------------------------------------------- paper ground --
   Restate `color` wherever the ink token changes, or text that already resolved
   on <body> keeps the dark-ground ink. */
.ground-paper {
  --sc-ink: var(--paper-ink); --sc-ink-soft: var(--paper-soft); --sc-accent: var(--tally-deep);
  --line: color-mix(in oklab, var(--paper-ink) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--paper-ink) 26%, transparent);
  background: var(--paper); color: var(--paper-ink); color-scheme: light;
}
.ground-paper .body, .ground-paper .meta { color: var(--paper-soft); }
.ground-paper .lede { color: var(--paper-ink); }
.ground-paper a:hover { color: var(--tally-deep); }
.ground-paper :focus-visible { outline-color: var(--tally-deep); }
.ground-paper .btn, html[data-ground="paper"] .bar .btn { --face: #1c1c1d; --face-hi: #303032; --edge: #7c3aed; --btn-ink: var(--paper); --shade: 124 58 237; --glow: 0.3; }
.ground-paper .btn:hover, html[data-ground="paper"] .bar .btn:hover { --glow: 0.36; color: var(--paper); }
.ground-paper .btn--ghost { --face: #f7f4ee; --face-hi: #fffdf9; --edge: #7c3aed; --btn-ink: var(--paper-ink); --shade: 124 58 237; --glow: 0.22; }
.ground-paper .btn--ghost:hover { color: var(--paper-ink); }

html[data-ground="paper"] .bar { color: var(--paper-ink); }
html[data-ground="paper"] .bar::before { background: color-mix(in oklab, var(--paper) 90%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 0 0 1px color-mix(in oklab, var(--paper-ink) 10%, transparent), 0 14px 30px -16px rgb(40 30 20 / 0.35); }
html[data-ground="paper"] .bar .wm__p { fill: var(--tally-deep); }

/* --------------------------------------------------------------- forms -- */
.field { display: grid; gap: 8px; }
.field > label, .field > legend, .field__label { font-size: 0.8125rem; font-weight: 600; color: var(--bone); padding: 0; }
.field__hint { font-size: 0.8125rem; color: var(--ash); }
.input, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-ui);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--bone); font-size: 1rem; line-height: 1.4;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.textarea { min-height: 128px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--ash) 78%, transparent); }
.input:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus-visible, .textarea:focus-visible { outline: 2px solid var(--tally); outline-offset: 0; border-color: transparent; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--tally); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-ui);
  font-size: 0.875rem; font-weight: 500; color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.chip:hover span { box-shadow: inset 0 0 0 1px var(--bone); }
.chip input:checked + span { background: var(--bone); color: var(--blackout); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--tally); outline-offset: 3px; }

/* -------------------------------------------------------------- footer -- */
.foot { padding: clamp(64px, 10vh, 112px) var(--gutter) 28px; color: var(--ash); font-size: 0.9375rem; border-top: 1px solid var(--line); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.foot__mark { display: block; height: clamp(34px, 4vw, 52px); color: var(--bone); }
.foot__mark:hover { color: var(--bone); }
.foot__line { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem); letter-spacing: -0.02em; color: var(--bone); margin-right: auto; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; padding: 40px 0; }
.foot__col { display: grid; align-content: start; gap: 10px; }
.foot__h { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-bottom: 4px; }
.foot__col a { color: var(--bone); text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 220ms var(--ease), color 160ms var(--ease); }
.foot__col a:hover { color: var(--tally); background-size: 100% 1px; }
.foot__col span { color: var(--bone); }
.foot__mail { font-weight: 600; }
.foot__social { display: flex; gap: 12px; }
.foot__social .soc {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background-image: none;
  background-color: #1d1c1e; color: var(--bone);
  box-shadow: 0 3px 0 #7c3aed, 0 8px 16px -6px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.1);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.foot__social .soc svg { width: 21px; height: 21px; }
.foot__social .soc:hover { background-color: var(--tally); color: var(--blackout); transform: translateY(-2px); box-shadow: 0 5px 0 #efe9df, 0 12px 22px -6px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.foot__social .soc:active { transform: translateY(2px); box-shadow: 0 1px 0 #7c3aed; }
.foot__small { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.8125rem; }
.foot__small a { color: var(--ash); text-decoration: none; }
.foot__small a:hover { color: var(--bone); }
.ground-paper .foot, .journal-page .foot { --line: rgb(241 238 232 / 0.12); }
@media (max-width: 899px) {
  .foot, .foot__top, .foot__col { text-align: center; }
  .foot__top { flex-direction: column; justify-content: center; }
  .foot__mark { margin-inline: auto; }
  .foot__line { margin-right: 0; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .foot__col { justify-items: center; }
  .foot__col a { margin-inline: auto; }
  .foot__social { justify-content: center; }
  .foot__small { justify-content: center; gap: 8px 22px; }
}

/* --------------------------------------------------------------- menu --
   Phones: a full-screen reel list. Always its own dark ground and light ink,
   whatever page it opens over. Links are numbered like reels on a slate; the
   current page carries the playhead; everything rises in, staggered. */
.sheet {
  position: fixed; inset: 0; z-index: 90; display: grid;
  color: var(--bone); color-scheme: dark;
  background: rgb(8 8 9 / 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease);
}
.sheet[hidden] { display: none; }
.sheet[data-open="true"] { opacity: 1; pointer-events: auto; }
.sheet__panel {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: auto;
  margin: 8px; border-radius: 22px; color: var(--bone);
  background: radial-gradient(120% 60% at 100% 0%, rgb(167 139 250 / 0.16), transparent 60%), linear-gradient(to bottom, #161617, #0b0b0c);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.06), 0 30px 60px -20px rgb(0 0 0 / 0.8);
  padding: 14px 22px calc(26px + env(safe-area-inset-bottom));
  transform: translateY(-14px) scale(0.985); transition: transform 320ms var(--ease);
}
.sheet[data-open="true"] .sheet__panel { transform: none; }
.sheet__close {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  color: var(--bone); font-weight: 600; background: #232326; box-shadow: 0 3px 0 #7c3aed, inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.sheet__close::after { content: ""; width: 12px; height: 12px; background: linear-gradient(45deg, transparent 43%, var(--tally) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--tally) 43% 57%, transparent 57%); }
.sheet__links { display: grid; align-content: center; counter-reset: reel; padding-block: 8px; }
.sheet__links a {
  counter-increment: reel; position: relative;
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: 8px; min-height: 64px;
  color: var(--bone); text-decoration: none; border-bottom: 1px solid rgb(241 238 232 / 0.1);
  font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.7rem, 8vw, 2.2rem); letter-spacing: -0.01em;
  opacity: 0; transform: translateY(14px); transition: opacity 360ms var(--ease), transform 420ms var(--ease), color 160ms var(--ease);
}
.sheet__links a::before { content: counter(reel, decimal-leading-zero); font: 800 0.75rem/1 var(--sc-font-display); letter-spacing: 0.12em; color: var(--tally); }
.sheet__links a span { color: rgb(241 238 232 / 0.4); font-size: 1rem; transition: color 160ms var(--ease), transform 160ms var(--ease); }
.sheet__links a:hover, .sheet__links a:focus-visible { color: var(--tally); }
.sheet__links a:hover span { color: var(--tally); transform: translate(2px, -2px); }
.sheet__links a[aria-current="page"] { color: var(--tally); }
.sheet__links a[aria-current="page"]::after { content: ""; position: absolute; left: -22px; top: 50%; width: 12px; height: 14px; margin-top: -7px; background: var(--tally); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%); }
.sheet__links a[href^="mailto"] { counter-increment: none; grid-template-columns: auto 1fr; border-bottom: 0; margin-top: 18px; min-height: 48px;
  font-family: var(--sc-font-text); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: rgb(241 238 232 / 0.8); }
.sheet__links a[href^="mailto"]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px rgb(167 139 250 / 0.2); animation: nk-rec 1.2s steps(1) infinite; }
@keyframes nk-rec { 50% { opacity: 0.2; } }
.sheet[data-open="true"] .sheet__links a { opacity: 1; transform: none; }
.sheet[data-open="true"] .sheet__links a:nth-child(1) { transition-delay: 60ms, 60ms, 0s; }
.sheet[data-open="true"] .sheet__links a:nth-child(2) { transition-delay: 110ms, 110ms, 0s; }
.sheet[data-open="true"] .sheet__links a:nth-child(3) { transition-delay: 160ms, 160ms, 0s; }
.sheet[data-open="true"] .sheet__links a:nth-child(4) { transition-delay: 210ms, 210ms, 0s; }
.sheet[data-open="true"] .sheet__links a:nth-child(5) { transition-delay: 260ms, 260ms, 0s; }
.sheet[data-open="true"] .sheet__links a:nth-child(6) { transition-delay: 310ms, 310ms, 0s; }
@media (prefers-reduced-motion: reduce) { .sheet__links a, .sheet__panel { transform: none !important; transition: opacity 150ms; } .sheet__links a[href^="mailto"]::before { animation: none; } }

@media (max-width: 899px) {
  :root { --bar-h: 64px; }
  .bar { gap: 14px; }
  .bar__mark { height: 29px; }
  .bar__nav .bar__link { display: none; }
  .bar__menu {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    font-size: 0.875rem; font-weight: 600; color: inherit;
  }
}

/* -------------------------------------------------------------- grain -- */
.sc-grain { z-index: 80; opacity: 0.04; }

/* Cross-document navigation: a quick dip, the way a cut lands. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 140ms var(--ease) both nk-out; }
::view-transition-new(root) { animation: 220ms var(--ease) both nk-in; }
@keyframes nk-out { to { opacity: 0; } }
@keyframes nk-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .btn, .chip span, .bar__link::after, .bar::before { transition: none; }
  .btn:hover, .btn:active { --lift: 0px; }
  .btn::after { display: none; }
}

/* ------------------------------------------------------------ film heroes --
   The opening of every inner page: real footage, a scrim only where the type
   sits, the copy on the centre line. Layers drift at different rates on scroll
   (data-drift, driven by site.js) so the hero has depth, not just a picture. */
.vhero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: center; justify-items: center;
  min-height: 100svh; padding: calc(var(--bar-h) + 40px) var(--gutter) clamp(48px, 8vh, 88px);
  background: var(--blackout); color: var(--bone); text-align: center; color-scheme: dark;
}
.vhero__media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.vhero__media img, .vhero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.vhero__media video { opacity: 0; transition: opacity 600ms var(--ease); }
.vhero__media video.is-live { opacity: 1; }
.vhero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 55%, rgb(8 8 9 / 0.62), rgb(8 8 9 / 0.2) 70%, transparent),
    linear-gradient(to bottom, rgb(8 8 9 / 0.55), rgb(8 8 9 / 0.15) 32%, rgb(8 8 9 / 0.4) 70%, rgb(8 8 9 / 0.92));
}
.vhero__copy { position: relative; width: min(100%, 1000px); will-change: transform, opacity; }
.vhero .lede, .ground-paper .vhero .lede, .vhero .post-head__dek { color: color-mix(in oklab, var(--bone) 90%, var(--ash)); margin-inline: auto; }
.vhero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.vhero__count { margin-top: 22px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--bone) 70%, transparent); }
.ground-paper .vhero a:hover { color: var(--tally); }
@media (prefers-reduced-motion: reduce) { .vhero__media, .vhero__copy, .vhero [data-drift] { transform: none !important; } }
/* Over a dark hero the bar's key is the red one, even on a paper page. */
html[data-ground="dark"] .bar .btn { --face: var(--tally); --face-hi: #c4b5fd; --edge: #efe9df; --shade: 0 0 0; --btn-ink: var(--blackout); --glow: 0.5; }
html[data-ground="dark"] .bar .btn:hover { color: var(--blackout); }
.post-head__kick { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tally); }
.vhero .lede { margin-top: clamp(16px, 2.4vh, 26px); }

/* ======================================================== one button rule --
   Every CTA is a key. Red keys sit on a white edge; dark keys on an orange one.
   Inline links inside running text stay links; actions are buttons. */
.bel__more.btn, .note__go.btn, .rates__more.btn, .plan__copy.btn { text-decoration: none; }
.bel__more.btn { margin-top: 20px; color: var(--btn-ink); }
.bel__more.btn:hover { color: var(--blackout); }
.note .note__go.btn { justify-self: start; align-self: start; margin-top: auto; padding-top: 0; color: var(--btn-ink); gap: 8px; }
.note a:hover .note__go.btn { --face: var(--tally); --face-hi: #c4b5fd; --edge: #efe9df; --shade: 0 0 0; --btn-ink: var(--blackout); --lift: -2px; color: var(--blackout); }
.note a:hover .note__go svg { transform: translateX(3px); }
.rates__more.btn { margin: 14px auto 0; display: flex; width: fit-content; }
.plan__copy.btn { margin-left: 10px; min-height: 34px; padding: 0 12px; font-size: 0.8125rem; vertical-align: middle; }
@media (max-width: 899px) { .note .note__go.btn { justify-self: center; } }
.rates__note a.btn, .rates__note a.btn:hover { color: var(--btn-ink); }

/* ====================================================== the photographer --
   A real person, keyed, who walks the floor under the home hero's buttons and
   the footer's floor on every page (walker.js). He sits behind the copy; the
   light of his flash is laid over it. */
.walker { position: absolute; z-index: 1; pointer-events: none; transition: opacity 500ms var(--ease); }
.walker-light {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: plus-lighter;
  background: radial-gradient(var(--fr, 400px) circle at var(--fx, 50%) var(--fy, 50%), rgb(255 250 240 / 0.34), rgb(255 244 228 / 0.1) 30%, transparent 70%);
}
.foot { position: relative; }
/* the footer's floor only takes room when he is there to walk it */
.foot__floor { position: relative; display: none; justify-self: stretch; width: auto; }
.has-walker .foot__floor { display: block; height: clamp(150px, 20vh, 200px); }
@media (max-width: 899px) { .has-walker .foot__floor { height: clamp(130px, 19vh, 170px); } }

/* the studio's credit line, in the footer's bottom row */
.foot__by { color: var(--ash); }
.foot__small .foot__by a { color: var(--bone); font-weight: 600; text-decoration: none; }
.foot__small .foot__by a:hover { color: var(--tally); }
@media (max-width: 899px) { .foot__by { order: 3; flex-basis: 100%; text-align: center; } }
@media (min-width: 900px) {
  .foot__small { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .foot__small > :first-child { justify-self: start; }
  .foot__small > .foot__by { justify-self: center; }
  .foot__small > :last-child { justify-self: end; }
}
.foot__col span, .foot__col a { text-wrap: balance; }