/* ============================================================
   FLYINGOAT — "Liquid Identity" launch campaign · WO! Studio case
   ------------------------------------------------------------
   A studio whose identity is to take on every identity. The case
   is a single liquid surface that pours through four colour worlds
   — pink → red → green → chrome — held by one contact-sheet frame.
   Dark-ground; chromatic, pillar-coded reveals; molten-chrome motif.
   Type: Newsreader (quiet editorial serif) × Inter × Space Mono.
   Real brand assets: Flyingoat wordmark / icon / secondary lockup (vector).
   ============================================================ */

:root{
  /* ground — Flyingoat's own environment: warm chrome-black + metallic lines,
     NOT EIMA's cool matte near-black with warm bone. */
  --ground:#0A0809;
  --ground-2:#141013;
  --vignette:#020102;
  --paper:#F2F0F0;
  --paper-2:#C9C6C6;
  --paper-dim:#8B8788;
  --line:rgba(210,216,224,.13);
  --line-2:rgba(210,216,224,.055);

  /* the worlds (sampled from the real campaign) */
  --coral:#FF6A6A;          /* signature glow */
  --coral-deep:#F92526;     /* punch */
  --rose:#EBC0CD;           /* logo tint */
  --red:#8E0A0D;            /* services world */
  --red-deep:#5C0608;
  --green:#1C6B3F;          /* get-in-touch / feed world */
  --green-deep:#0B4323;
  --green-bright:#16A34A;
  --sand:#ECB183;           /* warm skin highlight */
  --chrome-1:#E4E4E6;
  --chrome-2:#BFC2C7;
  --chrome-3:#8C9097;

  /* the live world (driven by scroll) */
  --world:#FF6A6A;
  --world-deep:#F92526;

  /* type — Flyingoat's skin: a high-contrast fashion Didone, not WO's quiet book serif */
  --f-disp:"Bodoni Moda",Didot,"Times New Roman",serif;
  --f-sans:"Inter",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,Menlo,monospace;

  /* fluid scale (φ-tracked) */
  --s--1:clamp(.74rem,.71rem + .14vw,.84rem);
  --s-0:clamp(.98rem,.94rem + .2vw,1.1rem);
  --s-1:clamp(1.2rem,1.04rem + .7vw,1.55rem);
  --s-2:clamp(1.7rem,1.36rem + 1.5vw,2.55rem);
  --s-3:clamp(2.3rem,1.66rem + 2.8vw,4.1rem);
  --s-4:clamp(3rem,1.8rem + 5.4vw,6.6rem);
  --s-5:clamp(3.4rem,1.5rem + 8.6vw,9.5rem);

  --gutter:clamp(20px,4.6vw,84px);
  --maxw:1500px;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.76,0,.24,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.fo{
  margin:0;background:var(--ground);color:var(--paper);
  font-family:var(--f-sans);font-weight:400;font-size:var(--s-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;                 /* clip not hidden — keeps sticky alive */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--coral);color:#0A0B0D}
body.fo.no-js [data-reveal],body.fo.no-js [data-split]{opacity:1!important;transform:none!important}

/* ---------- atmosphere ---------- */
.fo-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* the colour-world field — a slow molten wash that takes the live world's colour */
.fo-atmos{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 12%, color-mix(in srgb,var(--world) 24%,transparent) 0%, transparent 60%),
    radial-gradient(120% 80% at 80% 88%, color-mix(in srgb,var(--world-deep) 18%,transparent) 0%, transparent 55%),
    var(--ground);
  transition:background 1.1s var(--e-out)}
.fo-vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 50%, transparent 52%, var(--vignette) 100%)}

/* ---------- liquid cursor (desktop fine only) ---------- */
.fo-spark{position:fixed;left:0;top:0;z-index:60;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 42%, var(--world) 0%, color-mix(in srgb,var(--world) 35%,transparent) 45%, transparent 70%);
  filter:blur(2px);transition:opacity .4s,width .35s var(--e-out),height .35s var(--e-out)}
body.has-spark .fo-spark{opacity:.85}
.fo-spark.is-hot{width:60px;height:60px;opacity:1}

/* ---------- progress + nav ---------- */
.fo-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:var(--line-2)}
.fo-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--world),var(--world-deep));box-shadow:0 0 14px var(--world)}
.fo-nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:clamp(14px,2vw,22px) var(--gutter);
  transition:transform .5s var(--e-out),background .5s;mix-blend-mode:normal}
.fo-nav.is-hidden{transform:translateY(-104%)}
.fo-nav__brand{display:flex;align-items:center;gap:11px;color:var(--paper)}
.fo-nav__mark{width:26px;height:26px;color:var(--world);transition:color .8s var(--e-out)}
.fo-nav__mark svg{width:100%;height:100%}
.fo-nav__wm{height:15px;width:auto;color:var(--paper);opacity:.92}
.fo-nav__wm svg{height:100%;width:auto}
.fo-nav__case{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-nav__back{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);
  border:1px solid var(--line);padding:8px 14px;border-radius:40px;transition:border-color .3s,color .3s}
.fo-nav__back:hover{border-color:var(--world);color:var(--world)}
.fo-nav__back i{font-style:normal;opacity:.7}
@media(max-width:720px){.fo-nav__case{display:none}}

/* ---------- shared section system ---------- */
.fo-sec{position:relative;z-index:2;padding:clamp(5rem,12vh,10rem) var(--gutter)}
.fo-in{max-width:var(--maxw);margin:0 auto}
.fo-narrow{max-width:min(880px,92vw);margin:0 auto}
.fo-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--world);
  display:flex;align-items:center;gap:10px;margin:0 0 1.4rem;transition:color .8s var(--e-out)}
.fo-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.fo-h{font-family:var(--f-disp);font-weight:500;line-height:1.02;letter-spacing:-.012em;margin:0;color:var(--paper)}
.fo-h--xl{font-size:var(--s-4)}
.fo-h--l{font-size:var(--s-3)}
.fo-h--m{font-size:var(--s-2)}
.fo-h em{font-style:normal;color:var(--world);transition:color .8s var(--e-out)}
.fo-body{font-size:var(--s-1);line-height:1.5;color:var(--paper-2);max-width:54ch;margin:1.4rem 0 0;font-weight:300}
.fo-body em{font-style:italic;color:var(--paper)}
.fo-body strong{font-weight:600;color:var(--paper)}

/* reveals */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out)}
[data-reveal].in{opacity:1;transform:none}
[data-split]{}
[data-split] .w{display:inline-block;opacity:0;transform:translateY(40%) rotate(2deg);
  transition:opacity .8s var(--e-out),transform .9s var(--e-out)}
[data-split].in .w{opacity:1;transform:none}

/* ============================================================
   HERO — the liquid identity
   ============================================================ */
.fo-hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(5rem,13vh,9rem) var(--gutter) clamp(3rem,7vh,5rem);overflow:hidden}
.fo-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.fo-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  opacity:.2;filter:saturate(.95) contrast(1.04);transform:none}
.fo-hero__media::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(100% 78% at 50% 44%, color-mix(in srgb,var(--ground) 28%,transparent) 0%, color-mix(in srgb,var(--ground) 58%,transparent) 46%, var(--ground) 86%),
    linear-gradient(180deg, color-mix(in srgb,var(--ground) 64%,transparent) 0%, transparent 30%, transparent 58%, var(--ground) 100%)}
.fo-hero__in{position:relative;z-index:2;max-width:min(1080px,92vw);margin:0 auto;width:100%;text-align:center}
.fo-hero__eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-2);
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;opacity:0;animation:foUp 1s var(--e-out) .3s forwards}
.fo-hero__eyebrow b{color:var(--coral);font-weight:400}
/* the wordmark, in molten chrome */
.fo-hero__wm{position:relative;margin:clamp(1.4rem,3.4vh,2.6rem) auto clamp(1.2rem,3vh,2rem);
  width:min(820px,88%);filter:drop-shadow(0 10px 34px rgba(0,0,0,.6))}
.fo-hero__wm::before{content:"";position:absolute;inset:-26% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 130% at 44% 50%, rgba(0,0,0,.5), rgba(0,0,0,.22) 54%, transparent 76%);filter:blur(26px)}
.fo-hero__wm svg{width:100%;height:auto;display:block;overflow:visible}
.fo-hero__concept{font-family:var(--f-disp);font-style:normal;font-weight:400;font-size:var(--s-2);color:var(--paper);
  margin:0 auto;max-width:24ch;line-height:1.12;letter-spacing:-.01em;opacity:0;animation:foUp 1s var(--e-out) .7s forwards}
.fo-hero__concept b{font-style:normal;font-weight:500;color:var(--coral)}
.fo-hero__sub{margin:1.3rem auto 0;max-width:52ch;color:var(--paper-2);font-weight:300;font-size:var(--s-0);
  opacity:0;animation:foUp 1s var(--e-out) .9s forwards}
.fo-hero__cue{position:absolute;left:50%;bottom:clamp(1.4rem,4vh,2.6rem);transform:translateX(-50%);z-index:3;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:foFade 1s ease 1.4s forwards}
.fo-hero__cue i{width:1px;height:34px;background:linear-gradient(var(--world),transparent);animation:foCue 1.8s var(--e-inout) infinite}
@keyframes foUp{to{opacity:1;transform:none}}
@keyframes foFade{to{opacity:1}}
@keyframes foCue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}}

/* contact-sheet frame — the discipline that holds the colour */
.fo-frame{position:absolute;inset:clamp(12px,2vw,26px);z-index:1;pointer-events:none;border:1px solid var(--line)}
.fo-frame__tick{position:absolute;width:12px;height:12px;border:1px solid var(--world);opacity:.7;transition:border-color .8s var(--e-out)}
.fo-frame__tick--tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.fo-frame__tick--tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.fo-frame__tick--bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.fo-frame__tick--br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.fo-frame__lab{position:absolute;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim)}
.fo-frame__lab--l{left:-6px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.fo-frame__lab--r{right:-6px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center}
.fo-frame__lab--t{top:-22px;left:0}
.fo-frame__lab--b{bottom:-22px;right:0}
@media(max-width:720px){.fo-frame__lab--l,.fo-frame__lab--r{display:none}}

/* ============================================================
   META / BRIEF
   ============================================================ */
.fo-meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(2.4rem,5vh,3.4rem) var(--gutter)}
.fo-meta__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px)}
.fo-meta__grid li{list-style:none}
.fo-meta__grid b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--world);margin-bottom:.5rem;transition:color .8s var(--e-out)}
.fo-meta__grid span{font-size:var(--s-0);color:var(--paper);font-weight:300}
@media(max-width:720px){.fo-meta__grid{grid-template-columns:1fr 1fr;gap:22px}}

/* ============================================================
   CONCEPT — the liquid-identity thesis + four worlds
   ============================================================ */
.fo-concept__lead{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end}
@media(max-width:860px){.fo-concept__lead{grid-template-columns:1fr;gap:1.6rem}}
/* (old four-worlds-chip rules removed — the .fo-world / .fo-worlds names are now the case's world sections) */

/* ============================================================
   SYSTEM — constants vs variables + frame anatomy
   ============================================================ */
.fo-sys__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(2.4rem,5vh,3.6rem)}
@media(max-width:860px){.fo-sys__grid{grid-template-columns:1fr}}
.fo-card{border:1px solid var(--line);border-radius:16px;padding:clamp(1.5rem,3vw,2.4rem);background:color-mix(in srgb,var(--paper) 3%,transparent);position:relative;overflow:hidden}
.fo-card h3{font-family:var(--f-disp);font-weight:500;font-size:var(--s-2);margin:.2rem 0 .8rem;color:var(--paper)}
.fo-card p{color:var(--paper-2);font-weight:300;margin:0;font-size:var(--s-0)}
.fo-card .fo-eyebrow{color:var(--world)}
.fo-card--motif{background:
  radial-gradient(80% 60% at 70% 30%,color-mix(in srgb,var(--chrome-1) 22%,transparent),transparent 60%),
  color-mix(in srgb,var(--paper) 3%,transparent)}
.fo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2rem}
.fo-chip{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-2);
  border:1px solid var(--line);border-radius:40px;padding:6px 12px}

/* anatomy of a frame */
.fo-anat{margin-top:clamp(2.4rem,5vh,3.6rem);position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:760px){.fo-anat{grid-template-columns:1fr}}
.fo-anat__shot{position:relative;aspect-ratio:4/5;background:#111;overflow:hidden}
.fo-anat__shot img{width:100%;height:100%;object-fit:cover}
.fo-anat__pts{position:relative;padding:clamp(1.5rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.fo-anat__pt{display:flex;gap:14px;align-items:flex-start;opacity:0;transform:translateX(16px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.fo-anat.is-on .fo-anat__pt{opacity:1;transform:none}
.fo-anat__pt b{font-family:var(--f-mono);font-size:11px;color:var(--world);flex:none;width:26px}
.fo-anat__pt span{font-size:var(--s-0);color:var(--paper-2);font-weight:300}
.fo-anat__pt span em{color:var(--paper);font-style:normal;font-weight:500}

/* ============================================================
   WORK — the colour-world journey (post + story pairs)
   ============================================================ */
.fo-work{padding-top:0}
.fo-chapter{padding:clamp(3rem,8vh,6rem) var(--gutter) clamp(1.5rem,3vh,2.5rem)}
.fo-chapter__in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fo-chapter__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--world);transition:color .8s var(--e-out)}
.fo-chapter__t{font-family:var(--f-disp);font-weight:500;font-size:var(--s-2);color:var(--paper);margin:0}
.fo-chapter__n{font-family:var(--f-mono);font-size:11px;color:var(--paper-dim)}

/* a "spread" — a pillar shown as a hero piece + its post/story pair */
.fo-spread{max-width:var(--maxw);margin:0 auto clamp(2rem,5vh,3.5rem);display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:1.5fr 1fr;align-items:stretch}
.fo-spread--flip{grid-template-columns:1fr 1.5fr}
@media(max-width:860px){.fo-spread,.fo-spread--flip{grid-template-columns:1fr 1fr}}
.fo-shot{position:relative;overflow:hidden;border-radius:14px;background:#0d0e11;border:1px solid var(--line);min-width:0;max-width:100%}
.fo-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.fo-shot:hover img{transform:scale(1.035)}
.fo-shot__cap{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:5px 10px;border-radius:30px}
.fo-shot--tall{grid-row:span 2}
.fo-shot__col{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-rows:1fr 1fr}
.fo-ar45{aspect-ratio:4/5}
.fo-ar916{aspect-ratio:9/16}
.fo-arboard{aspect-ratio:3/2}

/* a big full-bleed feature */
.fo-feature{position:relative;max-width:var(--maxw);margin:0 auto clamp(2rem,5vh,3.5rem);border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.fo-feature img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fo-feature__cap{position:absolute;left:clamp(16px,2.5vw,30px);bottom:clamp(16px,2.5vw,30px);z-index:2;max-width:30ch}
.fo-feature__cap p{font-family:var(--f-disp);font-style:italic;font-size:var(--s-1);color:#fff;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.5)}

/* story strip (the feed system) */
.fo-feed{max-width:var(--maxw);margin:0 auto;overflow:hidden}
.fo-feed__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,22%);gap:clamp(10px,1.4vw,18px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.fo-feed__track::-webkit-scrollbar{height:5px}
.fo-feed__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.fo-feed__cell{scroll-snap-align:start;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0d0e11}
.fo-feed__cell img{width:100%;aspect-ratio:9/16;object-fit:cover}

/* dark-ads triptych */
.fo-dark{max-width:var(--maxw);margin:clamp(2rem,5vh,3.5rem) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:760px){.fo-dark{grid-template-columns:1fr}}

/* ============================================================
   RANGE / SCOPE tally
   ============================================================ */
.fo-range__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(2.4rem,5vh,3.6rem)}
@media(max-width:760px){.fo-range__grid{grid-template-columns:1fr 1fr}}
.fo-stat{border-top:1px solid var(--line);padding-top:1rem}
.fo-stat b{display:block;font-family:var(--f-disp);font-weight:500;font-size:var(--s-3);color:var(--paper);line-height:1}
.fo-stat span{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);margin-top:.6rem;display:block}
.fo-stat b em{font-style:normal;color:var(--world);transition:color .8s var(--e-out)}

/* ============================================================
   CLOSE — the seal
   ============================================================ */
.fo-end{position:relative;z-index:2;text-align:center;padding:clamp(6rem,16vh,12rem) var(--gutter) clamp(3rem,8vh,5rem);overflow:hidden}
.fo-end__mark{width:min(46vw,200px);margin:0 auto clamp(1.6rem,4vh,2.6rem);color:var(--world);opacity:.92;transition:color .8s var(--e-out)}
.fo-end__mark svg{width:100%;height:auto;display:block}
.fo-end__pre{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);margin:0 0 1rem}
.fo-end__big{font-family:var(--f-disp);font-weight:500;font-size:var(--s-3);line-height:1.05;margin:0 auto;max-width:18ch;color:var(--paper)}
.fo-end__big em{font-style:normal;color:var(--world);transition:color .8s var(--e-out)}
.fo-end__foot{margin-top:clamp(2.6rem,6vh,4rem);max-width:62ch;margin-left:auto;margin-right:auto}
.fo-end__credit{font-size:var(--s-0);color:var(--paper-2);font-weight:300}
.fo-end__credit a{color:var(--coral);border-bottom:1px solid color-mix(in srgb,var(--coral) 40%,transparent)}
.fo-end__note{font-family:var(--f-mono);font-size:10.5px;line-height:1.7;letter-spacing:.02em;color:var(--paper-dim);margin-top:1.2rem}
.fo-next{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-top:clamp(2.4rem,5vh,3.4rem);
  border:1px solid var(--line);border-radius:50px;padding:14px 30px;transition:border-color .3s,transform .3s}
.fo-next:hover{border-color:var(--world);transform:translateY(-2px)}
.fo-next__label{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.fo-next__name{font-family:var(--f-disp);font-style:italic;font-size:var(--s-1);color:var(--paper)}

.fo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ============================================================
   THE WORK — directions grouped by goal, every version shown
   ============================================================ */
.fo-dirs{position:relative;z-index:2;padding:clamp(4rem,10vh,8rem) var(--gutter) clamp(2rem,5vh,4rem)}
.fo-goal{margin-top:clamp(2.6rem,6vh,4.4rem)}
.fo-goal__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:1.1rem;margin-bottom:clamp(1.2rem,2.4vh,1.8rem);border-bottom:1px solid var(--line)}
.fo-goal__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--world);transition:color .8s var(--e-out)}
.fo-goal__t{font-family:var(--f-disp);font-weight:500;font-size:var(--s-2);color:var(--paper);margin:0;line-height:1}
.fo-goal__n{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin-left:auto}
.fo-dir{margin-top:clamp(1.6rem,3.4vh,2.6rem)}
.fo-dir__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.fo-dir__head b{font-family:var(--f-disp);font-weight:500;font-size:var(--s-1);color:var(--paper)}
.fo-dir__head span{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);flex:none}
.fo-dir__set{--row:clamp(176px,30vh,360px);display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px)}

/* a clickable version tile (height-driven so mixed aspects sit in one filmstrip) */
.fo-tile{position:relative;display:block;padding:0;margin:0;border:1px solid var(--line);background:#0d0e11;border-radius:13px;overflow:hidden;cursor:zoom-in;
  min-width:0;max-width:100%;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;isolation:isolate}
.fo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--e-out)}
.fo-tile:hover img,.fo-tile:focus-visible img{transform:scale(1.04)}
.fo-tile:focus-visible{outline:2px solid var(--world);outline-offset:2px}
.fo-tile::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 120%,color-mix(in srgb,var(--world) 16%,transparent),transparent 55%);opacity:0;transition:opacity .5s;pointer-events:none}
.fo-tile:hover::after{opacity:1}
.fo-tile__sz{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.62);backdrop-filter:blur(6px);padding:5px 9px;border-radius:30px;pointer-events:none}
.fo-tile__zoom{position:absolute;right:10px;top:10px;z-index:2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);color:#fff;opacity:0;transition:opacity .4s;pointer-events:none;font-size:12px}
.fo-tile:hover .fo-tile__zoom{opacity:1}
.fo-dir__set .fo-tile{height:var(--row);flex:0 0 auto}
/* mobile: re-express the version rack as a big swipeable snap-rail (not a cramped 3-across) */
@media(max-width:640px){
  .fo-dir__set{--row:clamp(360px,60vh,520px);flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:12px;scrollbar-width:thin;margin-right:calc(-1*var(--gutter))}
  .fo-dir__set::-webkit-scrollbar{height:4px}
  .fo-dir__set::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  .fo-dir__set .fo-tile{scroll-snap-align:start}
}

/* ============================================================
   IN SITU — two surfaces (posts on black ⇆ stories on stone)
   ============================================================ */
.fo-surfaces{position:relative;z-index:2;padding:clamp(4rem,10vh,8rem) var(--gutter)}
.fo-surf__toggle{position:relative;display:inline-flex;margin-top:clamp(1.6rem,3.4vh,2.4rem);border:1px solid var(--line);border-radius:44px;padding:4px;background:color-mix(in srgb,var(--paper) 3%,transparent)}
.fo-surf__toggle button{position:relative;z-index:1;border:0;background:none;cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-dim);padding:11px 20px;border-radius:40px;transition:color .4s}
.fo-surf__toggle button.is-active{color:var(--paper)}
.fo-surf__ind{position:absolute;z-index:0;top:4px;left:4px;height:calc(100% - 8px);width:calc(50% - 4px);border-radius:40px;
  background:color-mix(in srgb,var(--world) 22%,transparent);border:1px solid color-mix(in srgb,var(--world) 50%,transparent);transition:transform .55s var(--e-inout)}
.fo-surf__view{margin-top:clamp(1.8rem,4vh,3rem);overflow:hidden;border-radius:18px}
.fo-surf__track{display:flex;width:200%;transition:transform .7s var(--e-inout)}
.fo-surf{width:50%;flex:0 0 50%;padding:clamp(16px,2.4vw,34px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);align-content:start;
  background:repeating-linear-gradient(90deg,#0a0b0d 0,#0a0b0d 3px,#0d0e12 3px,#0d0e12 7px)}
.fo-surf--stone{grid-template-columns:repeat(3,1fr);
  background:
    radial-gradient(90% 70% at 30% 10%,rgba(120,108,96,.16),transparent 60%),
    radial-gradient(80% 80% at 80% 90%,rgba(70,64,58,.18),transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23s)' opacity='0.5'/></svg>"),
    #14110f}
.fo-surf .fo-tile{width:100%;height:auto}
.fo-surf--stone .fo-tile{background:#0c0a09}
@media(max-width:860px){.fo-surf,.fo-surf--stone{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fo-surf,.fo-surf--stone{grid-template-columns:1fr}}

/* big system boards */
.fo-boards{margin-top:clamp(2rem,4vh,3rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
@media(max-width:760px){.fo-boards{grid-template-columns:1fr}}
.fo-board{width:100%}
.fo-board img{aspect-ratio:3/2}

/* ============================================================
   LIGHTBOX — full display + slide
   ============================================================ */
body.fo-lb-on{overflow:hidden}
.fo-lb{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(6,7,9,.95);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s var(--e-out)}
.fo-lb.is-open{display:flex;opacity:1}
.fo-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:92vw;max-height:90vh;cursor:zoom-out}
.fo-lb__img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:8px;background:#0d0e11;
  box-shadow:0 30px 100px rgba(0,0,0,.7);transition:opacity .3s var(--e-out);cursor:default}
.fo-lb__cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);text-align:center}
.fo-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--paper);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .3s,background .3s,color .3s}
.fo-lb__nav:hover{border-color:var(--world);color:var(--world);background:rgba(0,0,0,.6)}
.fo-lb__nav--prev{left:clamp(10px,3vw,40px)}
.fo-lb__nav--next{right:clamp(10px,3vw,40px)}
.fo-lb__x{position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,28px);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--paper);font-size:15px;cursor:pointer;display:grid;place-items:center;transition:border-color .3s,color .3s}
.fo-lb__x:hover{border-color:var(--world);color:var(--world)}
.fo-lb__count{position:absolute;bottom:clamp(14px,3vh,26px);left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--paper-dim)}
@media(max-width:600px){.fo-lb__nav{width:44px;height:44px;font-size:22px}.fo-lb__img{max-height:74vh}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal],[data-split] .w{opacity:1!important;transform:none!important}
  .fo-hero__eyebrow,.fo-hero__concept,.fo-hero__sub,.fo-hero__cue{opacity:1!important;animation:none!important}
}

/* persistent WO! Studio badge — consistent across all WO! cases */
.wobadge{position:fixed;left:clamp(12px,1.8vw,26px);bottom:clamp(12px,1.8vw,26px);z-index:78;display:inline-flex;align-items:center;gap:.55em;padding:.5em .82em;min-height:44px;box-sizing:border-box;border:1px solid rgba(236,231,219,.16);border-radius:100px;background:rgba(10,11,13,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:.84;text-decoration:none;transition:opacity .35s ease,border-color .35s ease,transform .5s ease}
.wobadge:hover{opacity:1;border-color:#F2843A;transform:translateY(-2px)}
.wobadge__wo{font-weight:700;font-size:.98rem;letter-spacing:.01em;color:#ECE7DB;line-height:1}
.wobadge__wo b{color:#F2843A;font-weight:700}
.wobadge__name{font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,231,219,.6)}
@media(max-width:560px){.wobadge{padding:.5em;min-width:44px;justify-content:center}.wobadge__name{display:none}}

/* ============================================================
   ELEVATION v4 — master-led overture · original footage · in the wild
   ============================================================ */

/* lift world-tinted small labels for AA on green/red worlds */
.fo-eyebrow,.fo-goal__k,.fo-stage__k,.fo-chapter__k{color:color-mix(in srgb,var(--world) 66%,#F6EFE6 34%)}

/* slim meta line (replaces the 4-col report grid) */
.fo-meta__line{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(14px,2.6vw,44px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.fo-meta__line span{position:relative}
.fo-meta__line span+span::before{content:"";position:absolute;left:calc(-1*clamp(7px,1.3vw,22px));top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--world);transform:translateY(-50%);transition:background .8s var(--e-out)}

/* OVERTURE — the master visuals, big */
.fo-over{position:relative;z-index:2;padding:clamp(3.5rem,9vh,7rem) 0 clamp(1rem,3vh,2rem)}
.fo-over__intro{padding:0 var(--gutter) clamp(.5rem,2vh,1.6rem)}
.fo-over__lead{max-width:16ch}
.fo-stage{position:relative;min-height:90svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(2rem,5vw,6rem);padding:clamp(3rem,7vh,6rem) var(--gutter)}
.fo-stage--flip .fo-stage__media{order:2}
.fo-stage--flip .fo-stage__txt{order:1}
@media(max-width:860px){.fo-stage{grid-template-columns:1fr;min-height:0;gap:clamp(1.4rem,4vh,2.2rem);padding:clamp(2.6rem,7vh,4.4rem) var(--gutter)}
  .fo-stage--flip .fo-stage__media,.fo-stage--flip .fo-stage__txt{order:0}}
.fo-stage__media{position:relative;justify-self:center;width:min(94%,440px);aspect-ratio:4/5;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  padding:0;margin:0;background:#0d0e11;cursor:zoom-in;box-shadow:0 50px 130px -42px rgba(0,0,0,.85);isolation:isolate;-webkit-appearance:none;appearance:none}
.fo-stage__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--e-out)}
.fo-stage__media:hover img,.fo-stage__media:focus-visible img{transform:scale(1.045)}
.fo-stage__media:focus-visible{outline:2px solid var(--world);outline-offset:3px}
.fo-stage__tag{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 11px;border-radius:30px;pointer-events:none}
.fo-stage__txt{max-width:42ch}
.fo-stage__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1rem;transition:color .8s var(--e-out)}
.fo-stage__h{font-family:var(--f-disp);font-weight:500;font-size:var(--s-3);line-height:1.02;letter-spacing:-.012em;margin:0;color:var(--paper)}
.fo-stage__h em{font-style:italic;color:var(--world);transition:color .8s var(--e-out)}
.fo-stage__p{font-size:var(--s-0);line-height:1.6;color:var(--paper-2);font-weight:300;margin:1.3rem 0 0;max-width:40ch}

/* CONCEPT 'why' */
.fo-sec--why .fo-h em{font-style:italic}
.fo-body--big{font-size:var(--s-2);line-height:1.32;color:var(--paper);font-weight:400;margin-top:1.8rem;max-width:26ch}
.fo-body--big strong{color:var(--world);font-weight:500;transition:color .8s var(--e-out)}
.fo-body--big em{font-style:italic;color:var(--paper)}

/* SYSTEM two-statement */
.fo-sys__two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,3rem);margin-top:clamp(2rem,4vh,3rem)}
@media(max-width:760px){.fo-sys__two{grid-template-columns:1fr;gap:1.2rem}}
.fo-sys__two p{margin:0;color:var(--paper-2);font-weight:300;font-size:var(--s-0);line-height:1.6;padding-top:1rem;border-top:1px solid var(--line)}
.fo-sys__two b{display:block;font-family:var(--f-disp);font-weight:500;font-size:var(--s-1);color:var(--paper);margin-bottom:.4rem}

/* ORIGINAL FOOTAGE (flared) */
.fo-footage{position:relative;z-index:2;padding:clamp(4rem,10vh,8rem) var(--gutter)}
.fo-footage .fo-h em{font-style:italic}
.fo-film{max-width:var(--maxw);margin:clamp(2rem,5vh,3.4rem) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:640px){.fo-film{grid-template-columns:1fr}}
.fo-film__cell{aspect-ratio:9/16}
.fo-film__cell img{width:100%;height:100%;object-fit:cover}

/* IN THE WILD */
.fo-wild{position:relative;z-index:2;padding:clamp(4rem,10vh,8rem) var(--gutter)}
.fo-wild__ads{max-width:var(--maxw);margin:clamp(2rem,5vh,3.4rem) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
@media(max-width:860px){.fo-wild__ads{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fo-wild__ads{grid-template-columns:1fr}}
.fo-wild__ads .fo-tile{aspect-ratio:3/2}
.fo-wild__ads .fo-tile img{width:100%;height:100%;object-fit:cover}
.fo-fan{max-width:var(--maxw);margin:clamp(2.2rem,5vh,3.6rem) auto 0;text-align:center}
.fo-fan .fo-tile{aspect-ratio:3/2;width:100%;display:block}
.fo-fan .fo-tile img{width:100%;height:100%;object-fit:cover}
.fo-fan figcaption{font-family:var(--f-disp);font-style:italic;font-size:var(--s-1);color:var(--paper-2);margin-top:1.1rem}

/* ============================================================
   PRODUCED — posts + dark ads · real work, full display, liquid
   ============================================================ */
.fo-mock{position:relative;z-index:2;padding:clamp(4rem,10vh,8rem) 0 clamp(3rem,7vh,5rem)}
.fo-mock__intro{padding:0 var(--gutter)}
.fo-comp{max-width:var(--maxw);margin:clamp(2.6rem,6vh,4.4rem) auto 0;padding:0 var(--gutter)}
.fo-comp__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1rem}
.fo-comp__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--world) 66%,#F6EFE6 34%)}
.fo-comp__t{font-family:var(--f-disp);font-weight:500;font-size:var(--s-2);color:var(--paper);margin:0;line-height:1}
.fo-comp__n{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);margin-left:auto}

/* full-display plate */
.fo-plate{position:relative;display:block;width:100%;padding:0;margin:0;border:0;background:#070809;overflow:hidden;cursor:zoom-in;
  -webkit-appearance:none;appearance:none;isolation:isolate;color:inherit;
  opacity:0;clip-path:inset(0 0 14% 0);transform:translateY(16px);transition:opacity 1s var(--e-out),clip-path 1.4s var(--e-out),transform 1.1s var(--e-out)}
.fo-plate.in{opacity:1;clip-path:inset(0 0 0 0);transform:none}
.fo-plate img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform 1.6s var(--e-out)}
.fo-plate:hover img,.fo-plate:focus-visible img{transform:scale(1.035)}
.fo-plate:focus-visible{outline:2px solid var(--world);outline-offset:-3px}
.fo-plate__cap{position:absolute;left:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);z-index:3;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);padding:7px 13px;border-radius:30px;pointer-events:none}
.fo-plate__cap i{font-style:normal;color:var(--world);padding:0 3px}
/* chrome sheen — the liquid pass on reveal */
.fo-plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(108deg,transparent 34%,rgba(255,255,255,.16) 47%,rgba(255,140,150,.13) 51%,rgba(176,196,255,.1) 55%,transparent 68%);
  transform:translateX(-130%)}
.fo-plate.in::after{animation:foSheen 1.5s var(--e-out) .15s 1}
@keyframes foSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* full-bleed — the dark environment merges with the page */
.fo-bleed{position:relative;left:50%;width:100vw;max-width:100vw;margin-left:-50vw;margin-top:clamp(14px,2.4vw,28px)}
.fo-bleed--cap{margin-top:clamp(22px,4vw,46px)}
.fo-bleed .fo-plate{border-radius:0}

/* contained pair / quad */
.fo-grid2{max-width:var(--maxw);margin:clamp(14px,2.4vw,28px) auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
.fo-grid2 .fo-plate{border-radius:14px;border:1px solid var(--line)}
@media(max-width:740px){.fo-grid2{grid-template-columns:1fr;padding:0;gap:3px;max-width:none}.fo-grid2 .fo-plate{border-radius:0;border:0}}

/* liquid divider between components */
.fo-pour{position:relative;height:clamp(50px,9vh,100px);display:grid;place-items:center}
.fo-pour span{display:block;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--world) 72%,#fff) 50%,transparent);
  box-shadow:0 0 18px var(--world);opacity:.5}
@media(prefers-reduced-motion:reduce){.fo-plate{clip-path:none!important}.fo-plate::after{display:none}}

/* ============================================================
   EIMA-GRADE PASS — numbered kicker · masthead hero
   ============================================================ */
/* numbered spine kicker (the editorial through-line) */
.fo-kick{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);
  display:flex;align-items:center;gap:11px;margin:0 0 1.4rem;font-weight:400}
.fo-kick span{color:color-mix(in srgb,var(--world) 66%,#F6EFE6 34%);transition:color .8s var(--e-out)}

/* HERO — the masthead (no contact-sheet frame; refined, centred, generous air) */
.fo-hero__in{text-align:center}
[data-hero-fade]{opacity:0;transform:translateY(14px)}
body.fo.no-js [data-hero-fade]{opacity:1;transform:none}
body.fo:not(.no-js) .fo-hero__in [data-hero-fade]{animation:foUp 1.05s var(--e-out) forwards}
.fo-hero__eyebrow[data-hero-fade]{animation-delay:.30s}
.fo-hero__tag[data-hero-fade]{animation-delay:.62s}
.fo-hero__sub[data-hero-fade]{animation-delay:.82s}
.fo-hero__meta[data-hero-fade]{animation-delay:1.02s}
.fo-hero__tag{font-family:var(--f-disp);font-weight:500;font-size:var(--s-2);line-height:1.04;letter-spacing:-.012em;
  color:var(--paper);margin:clamp(.7rem,1.8vh,1.4rem) auto 0}
.fo-hero__tag em{font-style:italic;color:var(--coral)}
.fo-hero__sub{margin:clamp(1.1rem,2.6vh,1.7rem) auto 0;max-width:50ch;color:var(--paper-2);font-weight:300;font-size:var(--s-0)}
.fo-hero__meta{list-style:none;margin:clamp(1.9rem,4.4vh,3.2rem) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,3vw,54px);max-width:800px}
.fo-hero__meta li{display:flex;flex-direction:column;gap:.4rem}
.fo-hero__meta b{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  color:color-mix(in srgb,var(--world) 66%,#F6EFE6 34%);transition:color .8s var(--e-out)}
.fo-hero__meta span{font-size:var(--s--1);color:var(--paper-2);font-weight:300;white-space:nowrap}
@media(max-width:600px){
  .fo-hero__meta{gap:18px 0;max-width:340px}
  .fo-hero__meta li{flex:0 0 50%;align-items:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){[data-hero-fade]{opacity:1!important;transform:none!important;animation:none!important}}

/* ============================================================
   LIQUID HERO — WebGL field of flowing, morphing faces
   ============================================================ */
.fo-liquid{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity 1.4s var(--e-out)}
body.has-fluid .fo-liquid{opacity:1}
body.has-fluid .fo-hero__media{opacity:0}                 /* fluid replaces the static fallback image */
.fo-hero__media img{transition:opacity .8s var(--e-out)}
.fo-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 43%, color-mix(in srgb,var(--ground) 20%,transparent) 0%, color-mix(in srgb,var(--ground) 52%,transparent) 38%, color-mix(in srgb,var(--ground) 86%,transparent) 72%, var(--ground) 96%),
    linear-gradient(180deg, color-mix(in srgb,var(--ground) 74%,transparent) 0%, transparent 22%, transparent 50%, color-mix(in srgb,var(--ground) 90%,transparent) 79%, var(--ground) 95%)}
.fo-hero__in{position:relative;z-index:2}
.fo-hero__eyebrow b{color:var(--coral);font-weight:400;padding:0 .35em}
.fo-hero__hint{position:absolute;left:50%;bottom:clamp(4.4rem,11vh,7rem);transform:translateX(-50%);z-index:3;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);opacity:0;transition:opacity 1s var(--e-out)}
body.has-fluid.has-spark .fo-hero__hint{animation:foHint 4s ease 2.4s infinite}
@keyframes foHint{0%,100%{opacity:.28}50%{opacity:.62}}
@media(pointer:coarse){.fo-hero__hint{display:none}}
@media(prefers-reduced-motion:reduce){.fo-hero__hint{display:none}}

/* ============================================================
   THE WORLDS — per play: the post + how it ran in the wild
   ============================================================ */
.fo-worlds{position:relative;z-index:2;padding:clamp(3.5rem,9vh,7rem) var(--gutter) clamp(2rem,5vh,4rem)}
.fo-world{margin-top:clamp(3.4rem,8vh,6rem)}
.fo-world__head{display:flex;align-items:baseline;gap:16px;padding-bottom:1rem;margin-bottom:clamp(1.4rem,3vh,2.2rem);border-bottom:1px solid var(--line)}
.fo-world__k{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:color-mix(in srgb,var(--world) 66%,#F6EFE6 34%);transition:color .8s var(--e-out)}
.fo-world__t{font-family:var(--f-disp);font-weight:500;font-size:var(--s-2);color:var(--paper);margin:0;line-height:1}
.fo-world__post{width:min(540px,100%);margin:0 auto}
.fo-world__post .fo-plate{aspect-ratio:4/5;border-radius:14px;border:1px solid var(--line);width:100%}
.fo-world__post .fo-plate img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover}
.fo-world .fo-bleed{margin-top:clamp(18px,2.8vw,34px)}
.fo-world__duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);align-items:start}
.fo-world__duo .fo-plate{border-radius:14px;border:1px solid var(--line);width:100%}
.fo-world__duo .fo-plate img{aspect-ratio:auto;width:100%;height:auto;object-fit:cover;display:block}
@media(max-width:760px){.fo-world__duo{grid-template-columns:1fr;max-width:min(540px,100%);margin-left:auto;margin-right:auto}}

/* ============================================================
   THE FLARED CUT — a visibly swipeable rail
   ============================================================ */
.fo-rail{position:relative;max-width:var(--maxw);margin:clamp(1.6rem,4vh,2.8rem) auto 0}
.fo-rail__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(.9rem,2vh,1.4rem);padding:0 var(--gutter)}
.fo-rail__hint{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--world) 66%,#F6EFE6 34%)}
.fo-rail__hint .ln{width:34px;height:1px;background:currentColor;opacity:.5;flex:none}
.fo-rail__hint i{font-style:normal}
.fo-rail__hint b{font-weight:400;display:inline-block;animation:foArr 1.8s var(--e-inout) infinite}
@keyframes foArr{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(5px);opacity:1}}
.fo-rail__nav{display:flex;gap:8px;flex:none}
.fo-rail__nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--paper);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .3s,color .3s}
.fo-rail__nav button:hover{border-color:var(--world);color:var(--world)}
.fo-rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(208px,24vw,300px);gap:clamp(12px,1.6vw,20px);
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) 16px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--world) 55%,var(--line)) transparent;cursor:grab}
.fo-rail__track.is-grab{cursor:grabbing}
.fo-rail__track::-webkit-scrollbar{height:6px}
.fo-rail__track::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--world) 60%,var(--line));border-radius:4px}
.fo-rail__track::-webkit-scrollbar-track{background:var(--line-2);border-radius:4px}
.fo-rail__cell{scroll-snap-align:start;border-radius:13px;overflow:hidden;border:1px solid var(--line);background:#0d0e11;padding:0;margin:0;cursor:zoom-in;-webkit-appearance:none;appearance:none;position:relative;isolation:isolate}
.fo-rail__cell img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;transition:transform 1.1s var(--e-out)}
.fo-rail__cell:hover img,.fo-rail__cell:focus-visible img{transform:scale(1.04)}
.fo-rail__cell:focus-visible{outline:2px solid var(--world);outline-offset:2px}
@media(max-width:600px){.fo-rail__nav{display:none}.fo-rail__track{grid-auto-columns:72vw}}

/* ============================================================
   SKIN v5 — the case wears FLYINGOAT'S skin, not WO's house grade.
   Bodoni fashion display · glossy saturated colour-worlds ·
   the interactive skin-switcher (one frame, every skin).
   ============================================================ */

/* ---- Bodoni fashion display: high contrast, tight, editorial ---- */
.fo-h{font-weight:500;line-height:1.0;letter-spacing:-.006em}
.fo-h em{font-style:italic;font-weight:500}
.fo-hero__tag{font-weight:500;letter-spacing:-.006em}
.fo-hero__tag em{font-style:italic;color:var(--coral)}
.fo-world__t,.fo-stage__h{letter-spacing:-.006em}
.fo-end__big{font-weight:500;letter-spacing:-.008em}
.fo-end__big em{font-style:italic}
/* Bodoni hairlines need weight on small screens */
@media(max-width:600px){.fo-h,.fo-end__big,.fo-hero__tag{font-weight:600}}

/* ---- glossy colour-world atmosphere — the page bathes in the live skin ---- */
.fo-atmos{
  background:
    radial-gradient(90% 56% at 50% -10%, rgba(255,255,255,.055), transparent 60%),                       /* chrome top sheen */
    radial-gradient(130% 96% at 50% 6%, color-mix(in srgb,var(--world) 34%,transparent) 0%, transparent 56%),
    radial-gradient(120% 90% at 82% 94%, color-mix(in srgb,var(--world-deep) 28%,transparent) 0%, transparent 54%),
    radial-gradient(80% 60% at 16% 40%, color-mix(in srgb,var(--world) 12%,transparent) 0%, transparent 60%),
    var(--ground);
  transition:background 1.05s var(--e-out)}
::selection{background:var(--world);color:#08090b}

/* hero frame label copy — the editorial contact-sheet signature */
.fo-hero .fo-frame{inset:clamp(14px,2.2vw,30px)}
.fo-hero .fo-frame__lab--l,.fo-hero .fo-frame__lab--r{color:color-mix(in srgb,var(--world) 56%,var(--paper-dim) 44%)}

/* ============================================================
   THE SKIN-SWITCHER — one frame, four skins, live recolour
   ============================================================ */
.fo-skin{position:relative;z-index:2;padding:clamp(4rem,11vh,8rem) var(--gutter)}
.fo-skin__head{max-width:var(--maxw);margin:0 auto}
.fo-skinner{max-width:var(--maxw);margin:clamp(2.2rem,5.5vh,4rem) auto 0;display:grid;
  grid-template-columns:1.18fr .82fr;gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center}
@media(max-width:840px){.fo-skinner{grid-template-columns:1fr;gap:clamp(1.6rem,4vh,2.4rem)}}

.fo-skinner__stage{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#0b0908;cursor:zoom-in;padding:0;margin:0;-webkit-appearance:none;appearance:none;
  isolation:isolate;box-shadow:0 60px 150px -56px rgba(0,0,0,.9)}
.fo-skinner__stage:focus-visible{outline:2px solid var(--world);outline-offset:3px}
.fo-skinner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.012);transition:opacity .85s var(--e-out),transform 1.4s var(--e-out)}
.fo-skinner__img.is-on{opacity:1;transform:none}
.fo-skinner__sheen{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(108deg,transparent 34%,rgba(255,255,255,.24) 47%,color-mix(in srgb,var(--world) 70%,#fff) 51%,rgba(180,200,255,.16) 56%,transparent 68%);
  transform:translateX(-130%)}
.fo-skinner__stage.is-pour .fo-skinner__sheen{animation:foSheen 1.05s var(--e-out) 1}
.fo-skinner__edge{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:18px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--world) 30%,transparent),inset 0 0 60px -20px color-mix(in srgb,var(--world) 50%,transparent);transition:box-shadow .8s var(--e-out)}

.fo-skinner__side{min-width:0}
.fo-skinner__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);margin:0 0 .7rem}
.fo-skinner__now{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:var(--s-2);line-height:1.02;color:var(--world);
  margin:0 0 1.4rem;transition:color .6s var(--e-out)}
.fo-skinner__now b{font-style:normal;font-weight:400;display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-dim);margin-top:.6rem}
.fo-skinner__swatches{display:flex;gap:clamp(12px,1.6vw,18px);flex-wrap:wrap}
.fo-skinner__sw{width:clamp(48px,8vw,58px);height:clamp(48px,8vw,58px);border-radius:50%;cursor:pointer;position:relative;
  border:1px solid color-mix(in srgb,var(--paper) 18%,transparent);padding:0;
  background:radial-gradient(62% 58% at 36% 30%, color-mix(in srgb,var(--sw) 78%,#fff 30%) 0%, var(--sw) 52%, var(--swd) 100%);
  transition:transform .42s var(--e-out),box-shadow .42s var(--e-out)}
.fo-skinner__sw::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--sw);opacity:0;transition:opacity .42s}
.fo-skinner__sw:hover{transform:translateY(-2px)}
.fo-skinner__sw.is-on{transform:scale(1.07);box-shadow:0 10px 30px -8px var(--sw)}
.fo-skinner__sw.is-on::after{opacity:.9}
.fo-skinner__sw:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.fo-skinner__hint{margin:clamp(1.4rem,3vh,2rem) 0 0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper-dim);display:flex;align-items:center;gap:10px}
.fo-skinner__hint b{font-style:normal;font-weight:400;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);color:var(--world);transition:color .6s var(--e-out);animation:foSpin 5.5s linear infinite}
@keyframes foSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fo-skinner__hint b{animation:none}.fo-skinner__img{transition:opacity .3s}}

/* ============================================================
   ENVIRONMENT v6 — Flyingoat's OWN fingerprint: liquid chrome on
   real black stone. NOT EIMA's matte architectural void. The page
   is wet metal + the ads' own stone + caustic colour light — alive.
   ============================================================ */

/* the ads' real crumpled-stone surface, under everything */
.fo-stone{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("assets/work/env-stone.webp") center center/cover no-repeat;
  opacity:.22;mix-blend-mode:soft-light;filter:contrast(1.06) brightness(.96)}

/* liquid-chrome atmosphere — caustic colour blooms + a slow drifting metal sheen */
.fo-atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(68% 48% at 20% 16%, color-mix(in srgb,var(--world) 32%,transparent) 0%, transparent 60%),
    radial-gradient(82% 60% at 84% 26%, color-mix(in srgb,var(--world) 22%,transparent) 0%, transparent 58%),
    radial-gradient(96% 74% at 62% 98%, color-mix(in srgb,var(--world-deep) 32%,transparent) 0%, transparent 60%),
    radial-gradient(56% 40% at 42% 58%, color-mix(in srgb,var(--world) 12%,transparent) 0%, transparent 66%),
    var(--ground);
  transition:background 1.05s var(--e-out)}
.fo-atmos::after{content:"";position:absolute;inset:-35%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(114deg,transparent 32%,rgba(222,228,236,.05) 45%,rgba(255,255,255,.075) 50%,rgba(188,200,216,.045) 56%,transparent 72%);
  animation:foMetal 24s var(--e-inout) infinite}
@keyframes foMetal{0%,100%{transform:translate(-9%,-4%)}50%{transform:translate(9%,4%)}}
.fo-grain{opacity:.035}                                     /* quieter — real stone now carries the texture */
.fo-vig{background:radial-gradient(132% 104% at 50% 46%, transparent 48%, var(--vignette) 100%)}
@media(prefers-reduced-motion:reduce){.fo-atmos::after{animation:none}}

/* glossy wet-metal edge on the campaign plates (vs EIMA's matte hairline) */
.fo-world__art .fo-plate,.fo-world__pair .fo-plate{border:1px solid var(--line);border-radius:14px;
  box-shadow:0 46px 120px -54px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.06)}

/* ============================================================
   THE WORK — each play a triptych: artwork → feed post → story
   ============================================================ */
.fo-world__art{width:min(600px,92%);margin:0 auto}
.fo-world__art .fo-plate{aspect-ratio:4/5;width:100%}
.fo-world__art .fo-plate img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover}
.fo-world__pair{max-width:var(--maxw);margin:clamp(16px,2.6vw,30px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
.fo-world__pair .fo-plate{width:100%}
.fo-world__pair .fo-plate img{aspect-ratio:3/2;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .fo-world__pair{grid-template-columns:1fr;gap:clamp(14px,3vw,22px);max-width:min(600px,92%)}
}

/* ============================================================
   REVIEW FIXES v6.1 — a11y + polish from the multi-POV critique
   ============================================================ */
/* P0 — hero frame labels must clear AA: fixed chrome tone (not world-tinted), a touch larger, shadowed */
.fo-hero .fo-frame__lab{font-size:10.5px;letter-spacing:.2em;color:rgba(230,233,238,.72);text-shadow:0 1px 4px rgba(0,0,0,.62)}
/* P1 — make the scroll cue easier to find over the busy chrome-smoke */
.fo-hero__cue{color:var(--paper-2);text-shadow:0 1px 6px rgba(0,0,0,.55)}
.fo-hero__cue i{width:1px}