/* ============================================================
   Rubin5 Studio
   Display: Archivo Black. Body: Urbanist. Both self-hosted,
   the same two faces the original site used.
   Palette: filmic near-black, warm bone, one rust accent (#ff6b4a,
   carried over from the original brand).
   ============================================================ */

@font-face {
  font-family: 'Archivo Black';
  src: url('../assets/fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('../assets/fonts/urbanist.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:      #000000;
  --ink-2:    #0e0e11;
  --line:     #1f1f1e;   /* hairline rules. Decorative, never a boundary. */
  --line-2:   #2c2c29;   /* quiet borders on things that already read as text */
  /* An input's underline IS the input: if you cannot see it, there is no
     field. #2c2c29 measures 1.43:1 on the ink, which is a rule you can
     only find by clicking around. This is the one border that has to be
     visible, so it gets its own token at 3:1 (WCAG 1.4.11). */
  --line-input: #6e6a60;
  --bone:     #f4f2ec;
  --dim:      #f4f2ec;   /* was #8b867c — Captain: all grey body text to white */
  /* Was #55524a = 2.57:1 — under the 4.5:1 floor, and it is the token
     carrying every 11-14px label on the site, including the contact form.
     Small, tracked, uppercase type is the hardest thing to read on a dark
     ground; it cannot also be the faintest. #7b7870 = 4.54:1. The tier
     below --dim is still legible because size, tracking and weight carry
     it, not colour alone. */
  --faint:    #f4f2ec;   /* was #7b7870 — Captain: all grey labels to white */
  --rust:     #ff6b4a;
  --rust-deep:#d4472a;

  --gut: 44px;
  --max: 1240px;
  --nav-h: 84px;

  /* ONE type scale for the content pages (Sizzle, Field Notes, About) so the
     size stops jumping around. Five steps, nothing in between. */
  --h1:   clamp(34px, 8vw, 60px);   /* page title */
  --h2:   clamp(25px, 6vw, 34px);   /* section heading */
  --h3:   20px;                     /* sub-heading */
  --lede: 21px;                     /* opening line */
  --body: 17px;                     /* everything else */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Stop mobile Safari from auto-inflating text: without this it boosts the
   Archivo Black stat figures past their columns and the numbers stick out
   over the screen edge. Chrome does not, which is why it was Safari-only. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  position: relative;   /* containing block for the grain layer below */
  background: var(--ink);
  color: var(--bone);
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* fine filmic grain: texture without weight.
   Spans the WHOLE document (absolute, full height), not the viewport. A
   viewport-fixed layer only covers one screen; on iOS Safari the toolbar
   showing/hiding then left an ungrained strip = a hard seam / two-tone band.
   Anchored to the page, it grains everything uniformly with no seam. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: 100;
  pointer-events: none;
  opacity: .014;   /* a whisper of texture only; keeps the flat ground reading
     as true black to match the pure-black iOS status bar */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .display {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.022em;
  line-height: .94;
  margin: 0;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--rust); color: #fff; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }

/* ---------- reveal ----------
   16px and one long ease, on the films and the photographs only. The
   restraint is the point: a site that animates its paragraphs reads as a
   theme, a site where the images settle reads as a film.
   .js-reveal is set by js/site.js and nowhere else, so if the script
   fails or never loads, none of this applies and the page is simply
   visible. Never hide content behind a class the HTML sets itself. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Reading pages (the journal posts) carry nothing but a column of
   text, so the page itself narrows to the measure and centres. The
   header and the body then share one axis. Before this, both sat at
   the left edge of a 1240 shell and stranded ~600px of dead space to
   the right of every paragraph. The width resolves to exactly
   .article's 680px measure plus the gutters, so nothing inside needs
   its own centring and the left edges stay flush. */
.wrap.reading { max-width: calc(680px + var(--gut) * 2); }

/* ---------- shared atoms ---------- */
.eyebrow {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.btn {
  display: inline-block;
  padding: 15px 32px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--line-2);
  color: var(--bone);
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.btn:hover { border-color: var(--bone); }
.btn.solid { background: var(--rust); border-color: var(--rust); color: #140602; font-weight: 700; }
.btn.solid:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: #fff; }

/* ---------- nav ----------
   Baked into the page, not floating. A fixed bar dragged the mark
   down the page and sat it on top of the body copy on every long
   read. The mark belongs to the top of the page, so it stays there
   and scrolls away like everything else. */
.topbar {
  position: relative; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gut);
}
/* The mark's text is 29px tall, which is a 29px thing to hit with a thumb.
   Padding grows the target to 44 and the negative margin gives the pixels
   back to the layout, so nothing moves. */
.mark {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Archivo Black', sans-serif; font-size: 18px; letter-spacing: .01em;
  padding: 8px 0; margin: -8px 0;
}
.mark .five {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border: 1.5px solid var(--bone); border-radius: 50%;
  font-size: 11px; padding-left: 1px;
}
/* On a phone this button IS the navigation, and it measured 40x36. A 44px
   box, with the icon centred in it and the box pulled back to the gutter
   by half the slack so the rules still line up optically. */
.menu-btn {
  background: none; border: 0; cursor: pointer; line-height: 0;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-right: -9px;
}

.overlay {
  position: fixed; inset: 0; z-index: 70;
  background: #060608;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.overlay.open { opacity: 1; visibility: visible; }
.overlay nav { text-align: center; }
.overlay a {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: -.02em;
  padding: 13px 0;
  color: var(--bone);
  transition: opacity .18s ease;
}
/* current page marked with a small rust underline — a clean accent, not the
   whole word flashing colour on tap (which read as a strange pink) */
.overlay a[aria-current="page"] { position: relative; }
.overlay a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 26px; height: 3px; background: var(--rust); transform: translateX(-50%);
}
@media (hover: hover) { .overlay a:hover { opacity: .55; } }
.overlay .close { position: absolute; top: 26px; right: calc(var(--gut) - 9px); margin-right: 0; }

/* ---------- hero ----------
   Left-aligned, not centred. Centred display type is the single
   loudest "theme" tell; every prestige house in the survey is
   left-aligned or carries no hero copy at all. */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 0 70px;
  position: relative;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 22% 45%, rgba(255,107,74,.055), transparent 72%);
}
.hero .wrap { position: relative; }
.hero h1 { font-size: clamp(42px, 8vw, 100px); }
.hero .sub {
  margin: 30px 0 0; font-size: clamp(16px, 1.5vw, 20px); font-weight: 300;
  color: var(--dim); max-width: 460px;
}
/* accent as a rule, never a filled pill */
.hero .bar { width: 88px; height: 2px; background: var(--rust); margin-top: 40px; }
.hero .strip {
  margin-top: 40px; display: flex; gap: 28px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500;
}
.hero .ctas { margin-top: 46px; display: flex; gap: 12px; flex-wrap: wrap; }

/* page headers (inner pages) */
.phead { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.phead h1 { font-size: var(--h1); margin-top: 20px; }
.phead .sub { margin-top: 26px; max-width: 560px; color: var(--dim); font-weight: 300; font-size: var(--lede); }

/* Work page: the first film is the point of the page, so the intro has
   to fit in the same screen as its poster. .compact folds the category
   label into the header itself (instead of repeating it in a shead
   below) and .tight drops the section's own 96px of lead-in, so a
   normal laptop screen shows title, one line of copy and the first
   frame together, with no scroll required to reach "press play". */
.phead.compact { padding: 40px 0 24px; }
.phead.compact h1 { margin-top: 10px; font-size: clamp(28px, 4.6vw, 56px); }
.phead.compact .sub { margin-top: 14px; max-width: 620px; font-size: 16.5px; }
section.tight { padding-top: 28px; }
@media (max-width: 640px) {
  .phead.compact { padding: 28px 0 18px; }
  .phead.compact h1 { font-size: clamp(26px, 8vw, 56px); }
  section.tight { padding-top: 18px; }
}

section { padding: 96px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
.shead { margin-bottom: 56px; max-width: 640px; }
.shead h2 { font-size: var(--h2); margin-top: 18px; }
.shead p { color: var(--dim); margin-top: 18px; font-weight: 300; }

/* ---------- proof numbers ---------- */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.proof .cell { background: var(--ink); padding: 40px 28px; }
.proof .fig { font-family: 'Archivo Black', sans-serif; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.03em; }
.proof .cap { margin-top: 12px; font-size: 13px; color: var(--dim); font-weight: 300; line-height: 1.45; }
@media (max-width: 900px) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof { grid-template-columns: 1fr; } }

/* ---------- video ----------
   No card chrome. Frame, then a hairline rule, then a three tier
   caption: title / what it was for / role. Borrowed from how the
   prestige houses attribute work. A bordered box reads as a theme. */
/* A lead spans the grid. With two films that means two full-width rows,
   which is the right answer anyway: fewer things, larger, further apart
   reads as confidence. A half-width straggler next to a full-width lead
   reads as a grid with an item missing. */
.reels { display: grid; gap: 104px 56px; grid-template-columns: repeat(2, 1fr); }
.reel { display: block; }
.reel.lead { grid-column: 1 / -1; }
@media (max-width: 760px) { .reels { grid-template-columns: 1fr; gap: 36px; } }

.frame {
  aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  background: linear-gradient(145deg, #17171a 0%, #0a0a0c 72%);
  display: flex; align-items: center; justify-content: center;
}
/* Scope films.
   fight-token.mp4 is a 1100x466 scope image with 76px of black baked into
   the top and bottom of a 16:9 container, while its poster is the same
   image with no bars. In a 16:9 frame that meant the poster filled the
   frame and then the picture visibly shrank and grew bars the instant you
   pressed play. Giving the frame the film's real 2.36 and covering it
   crops exactly the 76px: 1.7799/2.3605 = 0.7540, and the image is
   466/618 = 0.7540 of the height. Zero re-encode, zero quality lost, and
   a filmmaker's site never letterboxes a letterbox. */
.reel.scope .frame { aspect-ratio: 1100 / 466; }
.reel.scope .frame video { object-fit: cover; }
.frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
/* scrim so the play control holds up over a bright frame */
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6,6,8,.42), rgba(6,6,8,.12) 70%);
  transition: opacity .3s ease;
}
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244,242,236,.07);
}
/* Bigger and thinner than before. A heavy ring on a film frame reads as
   a plugin; a wide hairline reads as a cinema. */
.play {
  width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(244,242,236,.55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), background .3s ease, border-color .3s ease;
  position: relative; z-index: 2;
}
.play::after {
  content: ""; border-style: solid; border-width: 7px 0 7px 13px;
  border-color: transparent transparent transparent var(--bone); margin-left: 4px;
  transition: border-left-color .3s ease;
}
/* No rust on tap/focus — that read as a "red light" on the video. Keep a
   quiet white focus ring for keyboard users, nothing coloured. */
.reel:focus-visible { outline: 2px solid rgba(244,242,236,.5); outline-offset: 3px; }
.reel:focus-visible .play { border-color: var(--bone); }
/* Hover-only reel effects, gated to devices that actually have a hover
   state. Unguarded :hover on a tapped link "sticks" on touch until the
   user taps elsewhere — the frame looked stuck mid-zoom with a darkened
   scrim and a rust play button after every tap on an iPhone. */
@media (hover: hover) and (pointer: fine) {
  .reel:hover .frame img { transform: scale(1.035); }
  .reel:hover .frame::before { opacity: .65; }
  .reel:hover .play { transform: scale(1.06); background: var(--rust); border-color: var(--rust); }
  .reel:hover .play::after { border-left-color: #140602; }
  .reel:hover .cap { border-color: var(--rust); }
}

/* click-to-play: nothing but a poster frame is fetched until someone asks,
   so the page weighs one still image until then. The Vimeo player loads
   into the same frame the poster occupied. */
.frame video, .frame iframe {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; background: #000; border: 0;
}
.frame.playing img, .frame.playing .play, .frame.playing .runtime { opacity: 0; }
.frame.playing::before { opacity: 0; }

/* One click both plays and asks the frame to go fullscreen (site.js).
   Fullscreen sizes the element to the screen already; the aspect-ratio
   box just needs to stop fighting that and actually fill it. */
.frame:fullscreen, .frame:-webkit-full-screen {
  aspect-ratio: auto; width: 100vw; height: 100vh; background: #000;
}

/* Runtime chip. A small factual mark, top-right, the way a print catalogue
   sets a length beside a title. Never a badge, never a pill. */
.runtime {
  position: absolute; top: 15px; right: 15px; z-index: 4;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--bone); background: rgba(6,6,8,.5);
  padding: 5px 9px 4px; border: 1px solid rgba(244,242,236,.16);
  backdrop-filter: blur(3px); font-variant-numeric: tabular-nums;
  transition: opacity .3s ease;
}

.cap { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; transition: border-color .25s ease; }
/* the film titles are the page's top-level sections, so they are h2 */
.cap h2 { font-size: clamp(19px, 1.9vw, 27px); }
.reel.lead .cap h2 { font-size: clamp(24px, 2.6vw, 36px); }
.cap .line { font-size: 16.5px; color: var(--dim); font-weight: 300; margin: 10px 0 0; max-width: 46ch; }
.cap .role { font-size: 14px; color: var(--faint); font-weight: 300; margin: 7px 0 0; }

/* ---------- steps (genuinely sequential: the sizzle process) ---------- */
.steps { border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.step .n { display: none; }   /* Captain: drop the 01/02 step numbers */
.step h3 { font-size: var(--h3); }
.step p { color: var(--dim); margin: 14px 0 0; font-weight: 300; max-width: 620px; }
@media (max-width: 720px) { .step { grid-template-columns: 1fr; gap: 12px; } }

/* A quiet note under a section: the things that are true but are not
   the work itself. Deliberately not a card and not a callout. */
.aside {
  margin: 72px 0 0; max-width: 58ch;
  color: var(--dim); font-weight: 300; font-size: var(--body);
  padding-top: 26px; border-top: 1px solid var(--line);
}
.aside a { color: var(--bone); border-bottom: 1px solid var(--line-2); }
.aside a:hover { border-bottom-color: var(--bone); }

/* ---------- prose ---------- */
.prose { max-width: 660px; }
.prose p { margin: 0 0 22px; font-size: var(--body); font-weight: 300; color: var(--dim); line-height: 1.7; }
.prose p.lede { font-size: var(--lede); color: var(--bone); font-weight: 400; line-height: 1.55; }
.prose strong { color: var(--bone); font-weight: 600; }

/* credit list */
.credits { border-top: 1px solid var(--line); margin-top: 8px; }
.credits .row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.credits .row .what { font-weight: 600; font-size: var(--h3); }
.credits .row .what span { display: block; color: var(--dim); font-size: var(--body); font-weight: 300; margin-top: 6px; }
.credits .row .yr { display: none; }   /* Captain: drop the 01/02 timing numbers */
/* On a phone the two columns collapsed to 194px of description beside
   120px of "DIRECTOR, EDITOR" — a third of the width spent on the least
   important word in the row, and the sentence shredded into four-word
   lines. The role goes under the title, where it costs nothing. */
@media (max-width: 640px) {
  .credits .row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .credits .row .yr { order: -1; font-size: 11px; }
}

/* ---------- the ranch ----------
   Real photographs of a real place, so they are given room rather than
   thumbnailed. One wide lead, then a quiet 2x2 below it. The frames are
   the only place on the site that carries a radius, which is what marks
   this section as the personal one. */
.ranch { margin: 0; }
.ranch .box {
  position: relative; overflow: hidden;
  border-radius: 6px; background: #16161a;
}
.ranch .box img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.ranch .box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244,242,236,.08); border-radius: 6px;
}
.ranch figure { margin: 0; }
.ranch figcaption {
  margin-top: 13px; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.ranch-lead .box { aspect-ratio: 3 / 2; }
.ranch-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 44px 24px; margin-top: 44px;
}
.ranch-grid .box { aspect-ratio: 4 / 3; }
/* the house was shot at 938px, so it is never asked to fill a wide slot */
.ranch-grid .box img.soft { image-rendering: auto; }
@media (hover: hover) {
  .ranch figure:hover .box img { transform: scale(1.028); }
}
@media (max-width: 720px) {
  .ranch-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
}

/* ---------- price ---------- */
.pricebox { border: 1px solid var(--line); background: var(--ink-2); padding: 34px 36px; max-width: 620px; }
.pricebox .fig { font-family: 'Archivo Black', sans-serif; font-size: 40px; letter-spacing: -.03em; }
.pricebox p { color: var(--dim); font-weight: 300; margin: 14px 0 0; font-size: 15.5px; }

/* ---------- contact ---------- */
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
@media (max-width: 820px) { .cgrid { grid-template-columns: 1fr; gap: 48px; } }
.clinks a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 21px; transition: color .18s ease; }
.clinks a:hover { color: var(--rust); }
.clinks .lab { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
form label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
form input, form select, form textarea {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-input);
  color: var(--bone); font-family: inherit; font-size: 16px; padding: 12px 0; margin-bottom: 28px;
}
form input:focus, form select:focus, form textarea:focus { outline: 0; border-bottom-color: var(--rust); }
form select { appearance: none; -webkit-appearance: none; }
form option { background: var(--ink-2); color: var(--bone); }
form textarea { resize: vertical; min-height: 96px; }
form button { width: 100%; }
.fnote { margin-top: 18px; font-size: 13.5px; color: var(--faint); font-weight: 300; }

/* ---------- footer ----------
   The footer carries the nav now. With the mark baked into the top of
   the page rather than fixed, a reader at the bottom of a long journal
   post has no menu within reach; this gives them one without floating
   anything over the film. */
footer { border-top: 1px solid var(--line); padding: 34px 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 14px; }
/* smaller type than the topbar mark, so it needs a little more padding to
   reach the same 44px target */
footer .mark { font-size: 15px; padding: 10px 0; margin: -10px 0; }
footer .mark .five { width: 18px; height: 18px; font-size: 10px; }
footer .fnav { display: flex; gap: 4px 22px; flex-wrap: wrap; }
/* These were 19px tall. They are the only navigation on a long page once
   the mark has scrolled away, so they get a real target: 44px of height
   with the text still sitting on the same line it did before. */
footer .fnav a {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--dim); transition: color .18s ease;
  display: inline-flex; align-items: center; min-height: 44px;
}
footer .fnav a:hover, footer .fnav a[aria-current="page"] { color: var(--bone); }
footer .meta { font-size: 12px; color: var(--faint); display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
footer .meta a:hover { color: var(--rust); }
@media (max-width: 900px) {
  footer .wrap { justify-content: flex-start; }
  footer .fnav { order: 3; width: 100%; }
  footer .meta { order: 4; width: 100%; }
}

@media (max-width: 640px) { :root { --gut: 24px; --nav-h: 64px; } }

/* Phone: pull everything closer. Sections and their headings run tight so
   the page (the work reel especially) scrolls far less between blocks. */
@media (max-width: 640px) {
  section { padding: 52px 0; }
  .shead { margin-bottom: 30px; }

  /* Menu always within reach: the bar sticks to the top so you can switch
     pages from anywhere without scrolling all the way back up. On pure black
     it blends in and never reads as a floating overlay. */
  .topbar {
    position: sticky; top: 0; z-index: 60;
    height: var(--nav-h); background: #000;
  }

  /* Mobile-first buttons, site-wide: big, full-width, thumb-friendly, rounded.
     One tap target per row so nothing is fiddly. */
  .ctas { flex-direction: column; align-items: stretch; }
  .btn {
    display: block; width: 100%; text-align: center;
    border-radius: 4px; padding: 17px 24px;
  }
  .btn.solid { background: #FF5A36; color: #000; font-weight: 600; }
  .btn:not(.solid) { border-color: rgba(255,255,255,.28); color: var(--bone); }
}

/* ---------- journal ----------
   Education is what converts this buyer. Every credible player in the
   niche teaches before it sells. Nobody teaches the funding side at all. */
.posts { border-top: 1px solid var(--line); }
.post-link {
  display: grid; grid-template-columns: 150px 1fr; gap: 44px;
  padding: 40px 0; border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.post-link:hover { background: #0d0d10; }
.post-link .kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); font-weight: 600; padding-top: 5px; }
.post-link h2 { font-size: var(--h2); }
.post-link p { color: var(--dim); font-weight: 300; margin: 12px 0 0; max-width: 62ch; font-size: 16px; }
.post-link .go { margin-top: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.post-link:hover .go { color: var(--bone); }
@media (max-width: 760px) { .post-link { grid-template-columns: 1fr; gap: 10px; } }

/* article body */
.article { max-width: 680px; }
.article > p { font-size: var(--body); line-height: 1.7; color: var(--dim); font-weight: 300; margin: 0 0 22px; }
.article > p.lede { font-size: var(--lede); line-height: 1.55; color: var(--bone); font-weight: 400; margin-bottom: 34px; }
.article h2 {
  font-size: var(--h2); margin: 48px 0 18px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.article h3 { font-family: 'Urbanist', sans-serif; text-transform: none; font-weight: 600; font-size: var(--h3); letter-spacing: 0; margin: 30px 0 10px; color: var(--bone); }
.article strong { color: var(--bone); font-weight: 600; }
.article a:not(.btn) { color: var(--bone); border-bottom: 1px solid var(--line-2); }
.article a:not(.btn):hover { border-bottom-color: var(--rust); color: var(--rust); }
.article ul { padding-left: 0; list-style: none; margin: 0 0 26px; }
.article li {
  color: var(--dim); font-weight: 300; font-size: 18px; line-height: 1.65;
  padding: 0 0 0 26px; margin-bottom: 13px; position: relative;
}
.article li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--rust); }
.article blockquote {
  margin: 34px 0; padding: 0 0 0 24px; border-left: 2px solid var(--rust);
  font-size: 20px; line-height: 1.55; color: var(--bone); font-weight: 300; font-style: normal;
}
.article blockquote cite { display: block; margin-top: 12px; font-size: 13px; color: var(--faint); font-style: normal; letter-spacing: .04em; }

/* data table */
.tbl-wrap { overflow-x: auto; margin: 0 0 30px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; }
.tbl th {
  text-align: left; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: 0 18px 12px 0; border-bottom: 1px solid var(--line-2);
}
.tbl td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); color: var(--dim); font-weight: 300; vertical-align: top; }
.tbl td:last-child { font-variant-numeric: tabular-nums; color: var(--bone); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }

.byline { margin-top: 22px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); display: flex; gap: 18px; flex-wrap: wrap; }
.callout {
  border: 1px solid var(--line); background: var(--ink-2); padding: 26px 28px; margin: 34px 0;
  font-size: 16.5px; color: var(--dim); font-weight: 300; line-height: 1.65;
}
.callout strong { color: var(--bone); }
.sources { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); font-weight: 300; }
.sources a { color: var(--dim); border-bottom: 1px solid var(--line-2); }
.sources a:hover { color: var(--rust); }

/* ---------- home hero with stats above the fold ----------
   The proof numbers used to sit a full screen down. They now live inside
   the hero so a first-time visitor never has to scroll to see what the
   work moved. They settle in on load, staggered: minimal, once, and only
   the numbers. */
.hero.has-stats { justify-content: center; padding: 40px 0; }
.hero.has-stats h1 { font-size: clamp(38px, 6.6vw, 84px); }
.hero.has-stats .sub { margin-top: 26px; }
.hero.has-stats .ctas { margin-top: 34px; }
/* On a phone the first screen is the hero alone: headline, rule, subhead
   and buttons, centred in the viewport. The four proof numbers sit just
   past the fold, so they arrive the moment you start scrolling. */
@media (max-width: 640px) {
  .hero.has-stats { min-height: 0; padding: 0 0 52px; }
  .hero.has-stats h1 { font-size: clamp(33px, 9.8vw, 84px); }
  .hero.has-stats .hero-lead {
    min-height: calc(100vh - var(--nav-h));    /* fallback */
    min-height: calc(100svh - var(--nav-h));   /* SMALL viewport = a STABLE
       height that does NOT change as Safari's toolbar shows/hides, so the hero
       never jitters on scroll. The 18vh gap below keeps the numbers hidden even
       when the toolbar collapses and reveals a little more of the screen. */
    display: flex; flex-direction: column; justify-content: flex-start;
    /* buttons sit low, just clearing Safari's floating search bar */
    padding: 22px 0 calc(env(safe-area-inset-bottom, 0px) + 4vh);
  }
  .hero.has-stats .bar { margin-top: 18px; }
  .hero.has-stats .sub { margin-top: 12px; }
  .hero.has-stats .ctas { margin-top: auto; }  /* pin buttons to the bottom */
}

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  margin-top: 50px; padding-top: 32px; border-top: 1px solid var(--line);
}
.hero-stats .stat {
  opacity: 0;
  animation: statRise .85s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-stats .stat:nth-child(1) { animation-delay: .20s; }
.hero-stats .stat:nth-child(2) { animation-delay: .33s; }
.hero-stats .stat:nth-child(3) { animation-delay: .46s; }
.hero-stats .stat:nth-child(4) { animation-delay: .59s; }
.hero-stats .fig {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(24px, 2.5vw, 34px); letter-spacing: -.03em; line-height: 1;
}
.hero-stats .lbl { margin-top: 11px; font-size: 12.5px; color: var(--dim); font-weight: 300; line-height: 1.45; }
@keyframes statRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-stats .stat { opacity: 1; animation: none; } }
@media (max-width: 820px) { .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 30px; } }
/* Phone: the numbers stack two-up right below the hero, no divider line,
   tight spacing so the set reads as one compact block just past the fold. */
@media (max-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 22px;
    /* a full, deliberate gap below the hero so the numbers are a distinct
       second beat, well clear of the fold on any device */
    margin-top: 18vh; padding-top: 0; border-top: 0;
  }
  .hero-stats .stat { min-width: 0; }
  .hero-stats .fig { font-size: 25px; }
  .hero-stats .lbl { margin-top: 7px; font-size: 11px; line-height: 1.4; }
}

/* ============================================================
   GEMINI HERO TEST — homepage hero, MOBILE ONLY. Experimental.
   Delete this whole block to revert to the standard hero.
   ============================================================ */
@media (max-width: 640px) {
  /* pure black hero — no glow, no spotlight box */
  .hero.has-stats::before { display: none; }
  /* headline: bigger, tighter */
  .hero.has-stats h1 {
    font-size: clamp(2.4rem, 11vw, 2.75rem);
    line-height: .95; letter-spacing: -.03em;
  }
  /* subhead as an uppercase tracked label */
  .hero.has-stats .sub {
    font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--bone); font-weight: 500; margin-top: 1.4rem;
  }
  /* full-width, rounded, Gemini-orange buttons */
  .hero.has-stats .ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero.has-stats .ctas .btn {
    display: block; width: 100%; text-align: center;
    border-radius: 4px; padding: 17px 24px;
  }
  .hero.has-stats .ctas .btn.solid { background: #FF5A36; color: #000; font-weight: 600; }
  .hero.has-stats .ctas .btn:not(.solid) { border-color: rgba(255,255,255,.22); color: #fff; }

  /* --- carry the format through the rest of the homepage (mobile) --- */
  .home section .shead h2 { font-size: clamp(2rem, 8.5vw, 2.4rem); line-height: .98; letter-spacing: -.02em; }
  .home section .btn,
  .home section .ctas .btn {
    display: block; width: 100%; text-align: center;
    border-radius: 4px; padding: 17px 24px;
  }
  .home section .btn.solid { background: #FF5A36; color: #000; font-weight: 600; }
  .home section .btn:not(.solid) { border-color: rgba(255,255,255,.22); color: #fff; }
}

/* ---------- work: a category's label sits beside its film ----------
   Single-film categories put the heading in one column and the film in
   the other, so every film frame is the same 16:9 box as the paired
   categories. Uniform boxes, coherent page. */
.cat-aside { align-self: center; }
.cat-aside h2 { font-size: var(--h2); margin-top: 16px; }
.cat-aside p { color: var(--dim); font-weight: 300; margin-top: 16px; max-width: 42ch; }
@media (max-width: 760px) { .cat-aside { align-self: start; } }

/* ---------- dedication (about) ---------- */
.dedication {
  margin: 6px auto 0; max-width: 64ch; text-align: center;
  color: var(--faint); font-weight: 300; font-size: 14.5px; line-height: 1.66;
  padding-top: 30px; border-top: 1px solid var(--line);
}