/* ============================================================
   YOUR LIL COOK — SELECTED BRAND STORIES
   The media kit, made to move.

   Typography, colour, spacing, rules and rhythm are taken from
   Your-Lil-Cook-Media-Kit-2026.pdf: Bodoni Moda headings, Inter
   labels and body, cream paper, espresso fields, hairline rules,
   brass used sparingly, and very generous margins.

   No rounded cards, no pills, no glassmorphism, no gradients as
   decoration, no glow, no floating blobs.
   ============================================================ */

:root{
  --paper:      #F3EEE5;
  --paper-soft: #E9E2D7;
  --ink:        #1A120D;
  --espresso:   #201612;
  --deep-brown: #4C3323;
  --brass:      #B58A4B;
  --terracotta: #8C5633;
  --stone:      #9D948A;
  --cream-text: #F3EEE5;

  /* derived, used only for hairlines and scrims */
  --rule-dark:  rgba(26,18,13,.16);
  --rule-light: rgba(243,238,229,.20);
  --chocolate:  #2A1A12;
  --strawberry: #8E2C30;   /* restrained. never bright commercial red */

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --pad:  clamp(22px, 6vw, 110px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); }

body.pf{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--brass); color:var(--ink); }

/* ------------------------------------------------------------
   SHARED EDITORIAL PRIMITIVES  (straight from the media kit)
   ------------------------------------------------------------ */

/* the clipped mask reveal — serif lines rise out of a hidden edge */
.clip{ display:block; overflow:hidden; padding-bottom:.06em; }
.clip > span{ display:block; will-change:transform; }

/* Bodoni display heading, two lines, tight */
.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.05rem, 4.3vw, 3.65rem);
  line-height:1.06;
  letter-spacing:-.012em;
  margin:0;
}

/* wide-tracked Inter label */
.lbl{
  display:block;
  font-family:var(--body);
  font-weight:500;
  font-size:clamp(9px,.72vw,10.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 clamp(16px,1.9vw,26px);
}

/* running head — the tiny line that sits above every media-kit page */
.rh{
  font-family:var(--body);
  font-weight:400;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(243,238,229,.46);
  white-space:nowrap;
}
.rh--r{ text-align:right; }

/* body copy — Inter Light, narrow measure, generous leading */
.bd{
  font-size:clamp(13.5px,.95vw,15px);
  line-height:1.78;
  font-weight:300;
  max-width:44ch;
  margin:0;
}

/* one-pixel rules */
.rule{ display:block; height:1px; width:100%; background:var(--rule-dark); border:0; }
.rule--brass{ background:var(--brass); }
.on-dark .rule{ background:var(--rule-light); }

/* the small ROLE / SURFACE / FORMAT list under a story */
.notes{ margin:clamp(30px,3.4vw,48px) 0 0; padding:0; list-style:none; max-width:34ch; }
.notes li{
  display:flex; justify-content:space-between; gap:20px;
  padding:11px 0;
  border-top:1px solid var(--rule-dark);
  font-size:11px; letter-spacing:.02em;
}
.on-dark .notes li{ border-top-color:var(--rule-light); }
.notes b{
  font-weight:500; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--stone);
  padding-top:2px;
}
.notes span{ font-family:var(--display); font-size:13.5px; }

/* rise-in for body copy: short, quiet, no dreamy fade */
[data-rise]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
[data-rise].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-rise]{ opacity:1; transform:none; transition:none; }
  .clip > span{ transform:none !important; }
}

/* ------------------------------------------------------------
   BACK LINK
   ------------------------------------------------------------ */
.pf-back{
  position:fixed;
  top:clamp(16px,2vw,28px);
  left:var(--pad);
  z-index:90;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px 7px 11px;
  border:1px solid rgba(243,238,229,.24);
  background:rgba(26,18,13,.62);
  color:var(--cream-text);
  text-decoration:none;
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .25s, background .25s, color .25s;
}
.pf-back:hover{ border-color:var(--brass); color:var(--brass); }
.pf-back svg{ width:12px; height:12px; }
/* over cream sections the chrome inverts */
body.pf.on-paper .pf-back{
  border-color:rgba(26,18,13,.22);
  background:rgba(243,238,229,.62);
  color:var(--ink);
}
body.pf.on-paper .pf-back:hover{ border-color:var(--brass); color:var(--deep-brown); }

/* ============================================================
   1 · COVER
   ============================================================ */
.cover{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream-text);
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(58px,6vw,74px) var(--pad) clamp(34px,4vw,58px);
}

.cover__pic{ position:absolute; inset:0; z-index:0; display:block; }
.cover__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:62% 38%;      /* keeps her face and the pot in frame */
  transform:scale(1.1);          /* headroom for the parallax */
  will-change:transform;
}
.cover__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(26,18,13,.90) 0%, rgba(26,18,13,.72) 32%, rgba(26,18,13,.20) 62%, rgba(26,18,13,.34) 100%),
    linear-gradient(to top,  rgba(26,18,13,.86) 0%, rgba(26,18,13,0) 46%);
}

.cover__head{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(243,238,229,.18);
}

.cover__body{
  position:relative; z-index:3;
  align-self:end;
  max-width:min(760px, 62vw);
  will-change:transform;
}

.cover__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.1rem, 8.4vw, 7.4rem);
  line-height:.98;
  letter-spacing:-.022em;
  margin:0;
}

.cover__body .rule--brass{
  width:0;                       /* animated open */
  max-width:220px;
  margin:clamp(24px,2.6vw,34px) 0 clamp(20px,2.2vw,28px);
  height:1px;
}

.cover__italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.15rem,2.05vw,1.75rem);
  line-height:1.3;
  color:rgba(243,238,229,.9);
  margin:0 0 clamp(20px,2.4vw,30px);
}

.cover__brands{
  font-size:11px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,238,229,.62);
  margin:0;
}
.cover__brands .dot{ color:var(--brass); padding:0 6px; }

.cover__cue{
  position:relative; z-index:3;
  justify-self:end; align-self:end;
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(243,238,229,.4);
  grid-row:3;
}

/* ============================================================
   2 · THE WORK — one pinned filmstrip

   A two-column spread: the type holds a real grid column on the
   left, the five portrait films run as a horizontal track on the
   right. Scroll pulls the track along; the film crossing centre
   is the active one. Nothing here is shrink-to-fit, so the text
   column can never collapse.
   ============================================================ */
.work{ position:relative; background:var(--paper); }

/* the colour field travels cream -> each chapter's own ground */
.work__field{
  position:absolute; inset:0; z-index:0;
  background:var(--paper);
}

.work__pin{
  position:relative; z-index:1;
  height:100svh;
  display:grid;
  grid-template-columns:minmax(300px, 32%) minmax(0, 1fr);
  align-items:stretch;
  overflow:hidden;
}

/* ---------- left column ---------- */
.work__aside{
  position:relative; z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(24px,3vh,44px);
  padding:clamp(72px,9vh,110px) clamp(20px,2.4vw,44px) clamp(48px,6vh,80px) var(--pad);
  min-width:0;
}

.work__head{ will-change:transform,opacity; }
.work__head .h2{ font-size:clamp(1.7rem,2.5vw,2.6rem); }
.work__support{
  font-size:clamp(12.5px,.88vw,14px);
  line-height:1.74; font-weight:300;
  color:var(--deep-brown);
  max-width:38ch;
  margin:clamp(18px,2vw,26px) 0 0;
  transition:color .5s var(--ease);
}
.work.is-dark .work__support{ color:rgba(243,238,229,.6); }

/* the caption stack. Explicit block with its own height, so the
   absolutely-stacked brand blocks inside always have a box to
   fill and text never wraps one-word-per-line. */
.work__caption{
  position:relative;
  width:100%;
  min-height:clamp(190px, 26vh, 260px);
}
.wc{
  position:absolute; inset:0;
  width:100%;
  opacity:0;
  will-change:transform,opacity;
}
.wc__chapter{
  display:block;
  font-family:var(--body); font-weight:400;
  font-size:9px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(243,238,229,.4);
  margin:0 0 9px;
}
.wc__brand{
  display:block;
  font-family:var(--body); font-weight:500;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass);
  margin:0 0 clamp(14px,1.6vw,20px);
}
.wc__statement{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.55rem,2.35vw,2.5rem);
  line-height:1.1;
  letter-spacing:-.012em;
  color:var(--cream-text);
  margin:0 0 clamp(14px,1.5vw,20px);
  text-wrap:balance;
}
.wc__support{
  font-size:clamp(12.5px,.86vw,14px);
  line-height:1.74; font-weight:300;
  color:rgba(243,238,229,.62);
  max-width:34ch;
  margin:0;
}

/* the progress meter — five hairlines, the active one brass */
.work__meter{ display:flex; gap:8px; align-items:center; }
.work__meter i{
  display:block; height:1px; width:26px;
  background:rgba(243,238,229,.22);
  transition:background .45s var(--ease), width .45s var(--ease);
}
.work__meter i.on{ background:var(--brass); width:46px; }

/* ---------- right column: the filmstrip ---------- */
.work__viewport{
  position:relative; z-index:2;
  overflow:hidden;
  min-width:0;
}
.work__track{
  position:absolute;
  top:50%;
  left:0;
  display:flex;
  align-items:center;
  gap:clamp(24px,3.4vw,64px);
  will-change:transform;
}

.frm{
  position:relative;
  flex:0 0 auto;
  height:clamp(340px, 64vh, 620px);
  aspect-ratio:9/16;            /* portrait, native. never stretched */
  overflow:hidden;              /* hard rectangle. no radius anywhere */
  background:var(--ink);
  opacity:.26;
  transition:opacity .55s var(--ease);
  will-change:transform,opacity;
}
.frm.is-active{ opacity:1; }
.frm video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
/* a hairline that only draws on the active film */
.frm::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s var(--ease);
}
.frm.is-active::after{ transform:scaleX(1); }

/* ============================================================
   3 · THE FIVE CHAPTERS
   COOK → HOST → STYLE → LAUNCH → FINISH

   Cream and espresso alternate so the page breathes the way the
   media kit does. Each chapter has its own grid, its own media
   arrangement and its own centre of gravity, so five chapters
   never read as five identical cards.
   ============================================================ */
.story{
  position:relative;
  overflow:hidden;
  --field-w:0vw;               /* driven from portfolio.js */
}

.story--dark { background:var(--espresso); color:var(--cream-text); }
.story--paper{ background:var(--paper);    color:var(--ink); }

/* the incoming colour field — how one chapter hands over to the next */
.story::after{
  content:'';
  position:absolute; z-index:0;
  right:0; top:0; bottom:0;
  width:var(--field-w);
  background:var(--field, var(--chocolate));
}

/* the chapter word, deepest layer, an outline never a chip */
.st__word{
  position:absolute; z-index:1;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(5rem, 17vw, 15rem);
  line-height:.8;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px currentColor;
  opacity:.13;
  pointer-events:none;
  white-space:nowrap;
  will-change:transform;
}
.story--dark  .st__word{ color:var(--cream-text); }
.story--paper .st__word{ color:var(--deep-brown); opacity:.16; }

.st{
  position:relative; z-index:2;
  padding:clamp(84px,11vh,150px) var(--pad) clamp(80px,10vh,140px);
  display:grid;
  gap:clamp(34px,4.4vw,72px);
  align-items:center;
}

.st__head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.st__idx{
  font-family:var(--display); font-size:13px; letter-spacing:.06em;
  color:var(--brass);
}
.st__brand{
  display:block;
  font-family:var(--body); font-weight:500;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass);
  margin:clamp(22px,2.6vw,34px) 0 clamp(10px,1.2vw,16px);
}
.st__prod{
  font-style:normal;
  color:var(--stone);
  letter-spacing:.24em;
}
.st__prod::before{ content:'·'; padding:0 8px; color:var(--stone); }

.st__text .h2{ margin:0; }
.st__text .rule{ margin:clamp(28px,3vw,42px) 0 clamp(26px,2.8vw,38px); max-width:200px; }
.st__body{ margin:0 0 clamp(16px,1.7vw,22px); }
.st__body:last-of-type{ margin-bottom:0; }
.story--dark  .st__body{ color:rgba(243,238,229,.74); }
.story--paper .st__body{ color:var(--deep-brown); }

/* the short italic aside (P·TAL) */
.st__italic{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.32rem);
  line-height:1.42;
  margin:clamp(22px,2.6vw,32px) 0 0;
  max-width:30ch;
}
.story--dark  .st__italic{ color:rgba(243,238,229,.86); }
.story--paper .st__italic{ color:var(--terracotta); }

/* the pull quote (Motif, Baccarat) */
.st__quote{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,1.62vw,1.45rem);
  line-height:1.44;
  margin:clamp(26px,3vw,38px) 0 0;
  padding:clamp(20px,2.2vw,28px) 0 0;
  border-top:1px solid var(--rule-dark);
  max-width:34ch;
}
.story--dark .st__quote{ border-top-color:var(--rule-light); color:rgba(243,238,229,.88); }
.story--paper .st__quote{ color:var(--deep-brown); }

/* ---------- media primitives ---------- */
.st__media{ display:grid; gap:clamp(14px,1.6vw,22px); }

.mv{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  aspect-ratio:9/16;          /* native portrait. never stretched */
  will-change:transform;
}
.mv video, .mv img{ width:100%; height:100%; object-fit:cover; }

.sf{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  will-change:transform;
}
.sf img{ width:100%; height:100%; object-fit:cover; }
.sf--tall{ aspect-ratio:3/4; }
.sf--wide{ aspect-ratio:4/3; }
.sf--square{ aspect-ratio:1/1; }

/* ============================================================
   FIVE DISTINCT COMPOSITIONS
   ============================================================ */

/* Every chapter grid uses a floor of 320px on the text column, so
   a narrow viewport drops to one column instead of squeezing the
   type into a one-word-per-line ribbon. */
.st{ grid-template-columns:minmax(320px,1fr) minmax(0,1fr); }
.st__text{ min-width:0; }
.st__media{ min-width:0; }

/* 01 COOK — text left, tall video anchoring a two-column stack.
   Warm, food-led, tactile. */
.lay-cook .st{ grid-template-columns:minmax(320px,1fr) minmax(0,.94fr); }
.lay-cook .st__media{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end; }
.lay-cook .mv{ grid-row:span 2; }
.lay-cook .st__word{ left:-1.5vw; top:5vh; }

/* 02 HOST — the table leads. A wide lead still spans the column
   before anything else, then the video and the craft detail sit
   beneath it. Media on the left, text on the right. */
.lay-host .st{ grid-template-columns:minmax(0,1fr) minmax(320px,1fr); }
.lay-host .st__text { order:2; }
.lay-host .st__media{ order:1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.lay-host .sf.is-lead{ grid-column:1 / -1; }
.lay-host .st__word{ right:-1.5vw; bottom:4vh; }

/* 03 STYLE — the most romantic. Two tall portraits flank a taller
   video; wide margins, text sits low and narrow. */
.lay-style .st{
  grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);
  align-items:end;
}
.lay-style .st__media{ grid-template-columns:repeat(3, minmax(0,1fr)); align-items:end; }
.lay-style .mv{ grid-column:2 / 4; }
.lay-style .sf{ align-self:end; }
.lay-style .st__word{ left:-1vw; bottom:6vh; }
.lay-style .st__text{ padding-bottom:clamp(10px,3vh,42px); }

/* 04 LAUNCH — the grid tightens. Even columns, smaller gap,
   flatter rhythm. Contemporary without leaving the system. */
.lay-launch .st{
  grid-template-columns:minmax(320px,1fr) minmax(0,1.1fr);
  gap:clamp(28px,3.4vw,56px);
  align-items:start;
}
.lay-launch .st__media{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(10px,1.1vw,14px);
  align-items:start;
}
.lay-launch .mv{ grid-row:span 2; }
.lay-launch .st__word{ right:-1vw; top:6vh; }

/* 05 FINISH — the ending. Media dominates, text steps back,
   the cake reveal runs wide across the full column. */
.lay-finish .st{
  grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);
  align-items:center;
}
.lay-finish .st__media{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; }
.lay-finish .sf--wide{ grid-column:1 / -1; }
.lay-finish .mv{ grid-row:span 2; }
.lay-finish .st__word{ right:-2vw; bottom:5vh; }

/* the one restrained strawberry-red detail, finale only */
.story.is-finale .strawberry{
  position:absolute; z-index:1;
  right:var(--pad); top:clamp(84px,11vh,150px);
  width:1px; height:0;
  background:var(--strawberry);
}

/* Below this width two columns stop being honest — the chapters
   go single-column and the media leads underneath the type. */
@media (max-width: 1000px){
  .st,
  .lay-cook .st, .lay-host .st, .lay-style .st,
  .lay-launch .st, .lay-finish .st{
    grid-template-columns:1fr;
    align-items:start;
  }
  .st__text { order:1; padding-bottom:0; }
  .st__media{ order:2; }
  .lay-style .st__media{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lay-style .mv{ grid-column:1 / -1; }
  .lay-cook .mv, .lay-launch .mv, .lay-finish .mv{ grid-row:auto; }
  .st__word{ font-size:clamp(4.5rem,15vw,9rem); }
}

/* ============================================================
   5 · ENQUIRY
   ============================================================ */
.enq{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream-text);
  min-height:88svh;
  display:grid;
  align-items:center;
}
.enq__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  will-change:transform;
  transform:scale(1.08);
}
.enq__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(95deg, rgba(26,18,13,.94) 0%, rgba(26,18,13,.86) 44%, rgba(26,18,13,.62) 100%);
}
.enq__in{
  position:relative; z-index:2;
  padding:clamp(84px,11vh,150px) var(--pad);
  display:grid;
  gap:clamp(38px,5vw,86px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:end;
}
.enq .lbl{ color:var(--brass); }
.enq__head{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,6vw,5.1rem);
  line-height:1.02; letter-spacing:-.02em;
  margin:0;
}
.enq__support{
  font-size:clamp(13.5px,.95vw,15px);
  line-height:1.78; font-weight:300;
  color:rgba(243,238,229,.72);
  max-width:38ch;
  margin:clamp(26px,3vw,38px) 0 0;
}
.enq__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:clamp(30px,3.4vw,44px) 0 0; }
/* restrained rectangular text links. never pills. */
.enq__link{
  display:inline-block;
  padding:13px 22px;
  border:1px solid rgba(243,238,229,.28);
  color:var(--cream-text);
  text-decoration:none;
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .28s var(--ease), color .28s var(--ease), background .28s var(--ease);
}
.enq__link:hover{ border-color:var(--brass); color:var(--brass); }
.enq__link--primary{ border-color:rgba(181,138,75,.6); }

.enq__lines{ margin:0; }
.enq__lines div{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:15px 0;
  border-top:1px solid rgba(243,238,229,.16);
}
.enq__lines dt{
  font-size:9px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,238,229,.44);
  margin:0;
}
.enq__lines dd{
  margin:0;
  font-family:var(--display); font-size:clamp(14px,1.1vw,17px);
  text-align:right;
}
.enq__note{
  grid-column:1 / -1;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(13.5px,1.1vw,16.5px);
  line-height:1.6;
  color:rgba(243,238,229,.58);
  margin:clamp(30px,3.6vw,52px) 0 0;
  padding-top:clamp(24px,2.8vw,36px);
  border-top:1px solid rgba(243,238,229,.16);
  max-width:52ch;
}

/* ============================================================
   FOOTER (unchanged site footer)
   ============================================================ */
.pf-foot{
  background:var(--ink);
  color:rgba(243,238,229,.5);
  border-top:1px solid rgba(243,238,229,.14);
  padding:clamp(26px,3vw,40px) var(--pad);
  display:flex; flex-wrap:wrap; gap:14px 28px;
  justify-content:space-between; align-items:center;
  font-size:10.5px; letter-spacing:.1em;
}
.pf-foot nav{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.pf-foot a{ color:inherit; text-decoration:none; transition:color .22s; }
.pf-foot a:hover{ color:var(--brass); }

/* ============================================================
   MOBILE — built around the native portrait media,
   not a shrunk desktop page
   ============================================================ */
@media (max-width: 760px){
  body.pf{ font-size:15px; }

  .pf-back{ top:14px; left:20px; padding:6px 12px 6px 9px; font-size:9px; }

  /* --- cover --- */
  .cover{ padding:52px 22px 30px; }
  .cover__img{ object-position:58% 34%; }
  .cover__scrim{
    background:
      linear-gradient(to top, rgba(26,18,13,.94) 0%, rgba(26,18,13,.52) 44%, rgba(26,18,13,.30) 100%);
  }
  .cover__head .rh--r{ display:none; }
  .cover__body{ max-width:none; }
  .cover__title{ font-size:clamp(2.9rem,15vw,4.4rem); }
  .cover__italic{ font-size:1.12rem; }
  .cover__cue{ display:none; }

  /* --- the work: one frame at a time, larger, copy beneath --- */
  .work__pin{ height:100svh; }
  .work__head{
    top:64px; left:22px; right:22px; max-width:none;
  }
  .work__head .h2{ font-size:clamp(1.62rem,7.4vw,2.1rem); }
  .work__support{ display:none; }   /* the pin is shorter on mobile; keep it uncluttered */

  /* the filmstrip stacks: films on top, type beneath */
  .work__pin{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto;
  }
  .work__viewport{ order:1; }
  .work__aside{
    order:2;
    justify-content:flex-start;
    gap:16px;
    padding:0 22px clamp(26px,4vh,44px);
  }
  .work__head{ display:none; }        /* the heading has had its moment by now */
  .work__track{ gap:20px; }
  .frm{ height:min(46vh, 58vw * 16 / 9); }

  .work__caption{ min-height:150px; }
  .wc__statement{ font-size:clamp(1.3rem,6vw,1.7rem); }
  .wc__support{ font-size:12.5px; max-width:none; }
  .work__meter i{ width:18px; }
  .work__meter i.on{ width:34px; }

  /* --- chapters: single column, portrait media dominant.
     Order is inherited from the DOM, which is data order, so the
     mobile sequence cannot diverge from the desktop sequence. --- */
  .st{
    grid-template-columns:1fr !important;
    gap:clamp(28px,7vw,40px);
    padding:clamp(64px,9vh,92px) 22px clamp(60px,8vh,86px);
    align-items:start;
  }
  /* text always leads on mobile, whatever the desktop order was */
  .st__text { order:1 !important; padding-bottom:0 !important; }
  .st__media{ order:2 !important; }

  .h2{ font-size:clamp(1.85rem,8.4vw,2.5rem); }
  .bd{ max-width:none; }
  .notes{ max-width:none; }
  .st__italic, .st__quote{ max-width:none; }

  .st__media{
    grid-template-columns:1fr 1fr !important;
    gap:10px;
  }
  /* the portrait video spans full width and leads the media block */
  .mv{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .sf.is-lead{ grid-column:1 / -1; }
  .lay-finish .sf--wide{ grid-column:1 / -1; }

  /* the chapter word stays, smaller and out of the reading path */
  .st__word{
    font-size:clamp(3.6rem,22vw,7rem);
    left:auto !important; right:-3vw !important;
    top:auto !important; bottom:2vh !important;
    opacity:.09;
  }

  .story::after{ display:none; }
  .story.is-finale .strawberry{ display:none; }

  /* --- enquiry --- */
  .enq{ min-height:auto; }
  .enq__in{
    grid-template-columns:1fr;
    gap:clamp(32px,8vw,46px);
    padding:clamp(70px,10vh,100px) 22px clamp(60px,8vh,84px);
  }
  .enq__scrim{
    background:linear-gradient(to top, rgba(26,18,13,.96) 10%, rgba(26,18,13,.84) 60%, rgba(26,18,13,.7) 100%);
  }
  .enq__head{ font-size:clamp(2.5rem,11.5vw,3.4rem); }
  .enq__actions{ flex-direction:column; align-items:stretch; }
  .enq__link{ text-align:center; }
  .enq__lines dd{ font-size:14px; }

  .pf-foot{ font-size:10px; padding:24px 22px 34px; }
}

/* ============================================================
   NO-MOTION LAYER
   Used when GSAP fails to load or the visitor asks for reduced
   motion. This is a deliberate static editorial composition,
   not a broken version of the animated page.
   ============================================================ */
body.pf:not(.motion) .cover__body .rule--brass{ width:200px; }

/* the filmstrip becomes a static editorial spread, still in order */
body.pf:not(.motion) .work{ background:var(--espresso); color:var(--cream-text); }
body.pf:not(.motion) .work__field{ display:none; }
body.pf:not(.motion) .work__pin{
  height:auto;
  display:block;
  overflow:visible;
  padding:clamp(84px,11vh,150px) var(--pad) clamp(80px,10vh,140px);
}
body.pf:not(.motion) .work__aside{
  display:block; padding:0; min-width:0;
}
body.pf:not(.motion) .work__head{ max-width:60ch; }
body.pf:not(.motion) .work__head .lbl{ color:var(--brass); }
body.pf:not(.motion) .work__support{ color:rgba(243,238,229,.7); }
body.pf:not(.motion) .work__meter{ display:none; }
body.pf:not(.motion) .work__viewport{ overflow:visible; }
body.pf:not(.motion) .work__track{
  position:static; transform:none !important;
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:clamp(10px,1.2vw,18px);
  margin:clamp(40px,5vh,72px) 0 0;
}
body.pf:not(.motion) .frm{
  height:auto; width:100%; aspect-ratio:9/16;
  opacity:1; transform:none !important;
}
body.pf:not(.motion) .frm::after{ transform:scaleX(1); }
body.pf:not(.motion) .work__caption{
  min-height:0;
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:clamp(16px,2vw,28px);
  align-items:start;
  margin:clamp(26px,3vh,40px) 0 0;
}
body.pf:not(.motion) .wc{ position:static; inset:auto; opacity:1; }
body.pf:not(.motion) .wc__statement{ font-size:clamp(1.05rem,1.5vw,1.3rem); }
body.pf:not(.motion) .wc__support{ font-size:12px; }
body.pf:not(.motion) .story::after{ width:0; }
body.pf:not(.motion) .story.is-finale .strawberry{ height:120px; }
body.pf:not(.motion) .cover__img,
body.pf:not(.motion) .enq__img{ transform:scale(1); }

@media (max-width: 1100px){
  body.pf:not(.motion) .work__track,
  body.pf:not(.motion) .work__caption{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 760px){
  body.pf:not(.motion) .work__pin{ padding-left:22px; padding-right:22px; }
  body.pf:not(.motion) .work__track,
  body.pf:not(.motion) .work__caption{ grid-template-columns:1fr 1fr; }
}