/* ============================================================
   EIMA — Identity, Art Direction & System   ·   a WO! Studio experience
   The Darkroom grade: perception resolving from the dark.
   Canvas = warm near-black; the brand's own colours/patterns/marks
   appear as LIT ELEMENTS, never as background. One Eye. One Vision.
   Real EIMA palette lives in the swatches (§ colour), not the page.
   Type: Chronicle Display (real, embedded) × Inter (free Neue Haas stand-in — the Neue Haas upload is trial-only, not web-licensable).
   ============================================================ */
@font-face{font-family:"Chronicle Display";src:url(assets/fonts/chronicle-roman.otf) format("opentype");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Chronicle Display";src:url(assets/fonts/chronicle-lightitalic.otf) format("opentype");font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"Chronicle Display";src:url(assets/fonts/chronicle-semibold.otf) format("opentype");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Chronicle Display";src:url(assets/fonts/chronicle-black.otf) format("opentype");font-weight:800 900;font-style:normal;font-display:swap}
:root{
  --ground:#0B0A09;        /* warm near-black darkroom */
  --ground-2:#131110;      /* lifted panel */
  --ground-3:#1c1916;      /* exhibit plinth */
  --ink:#ECE7DB;           /* bone — primary ink on dark */
  --ink-2:#C7BAA7;         /* sand — secondary */
  --dim:#9d917f;           /* muted label — lightened to clear AA+ at small sizes */
  --sand:#D9C5B5;          /* brand limestone, as light */
  --cocoa:#6C584D;         /* brand espresso */
  --gold:#C9A86A;          /* the only warmth — the eye's light */
  --gold-soft:rgba(201,168,106,.46);
  --line:rgba(217,197,181,.14);
  --line-2:rgba(217,197,181,.07);

  --f-disp:"Chronicle Display",Georgia,"Times New Roman",serif;
  --f-grot:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(20px,5.4vw,96px);
  --maxw:1500px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body.eima{
  background:var(--ground);color:var(--ink);
  font-family:var(--f-grot);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.js [data-cursor]{cursor:none}
@media (pointer:coarse){body.js [data-cursor]{cursor:auto}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--gold);color:var(--ground)}

/* ---------- shared label ---------- */
.kick{font-family:var(--f-grot);font-size:clamp(.72rem,.68rem + .12vw,.78rem);font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:flex;align-items:baseline;gap:.9em;margin-bottom:clamp(22px,3.2vh,42px)}
.kick span{font-variant-numeric:tabular-nums;color:var(--gold);opacity:.7;font-size:.82em;letter-spacing:.12em}
.kick::after{content:"";flex:1;height:1px;background:var(--line);align-self:center;margin-left:.4em;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--e-out) .15s}
.kick.in::after,[data-reveal].in .kick::after{transform:none}
.kick--plain::after{display:none}

/* ---------- film grain (the darkroom) ---------- */
.grain{position:fixed;inset:-60px;z-index:60;pointer-events:none;opacity:.4;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px;will-change:transform;animation:grain 5.6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-14px,8px)}40%{transform:translate(10px,-12px)}60%{transform:translate(-8px,14px)}80%{transform:translate(12px,6px)}100%{transform:translate(0,0)}}

/* ---------- spark cursor (desktop aperture) ---------- */
.spark{position:fixed;left:0;top:0;z-index:80;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;opacity:0;
  transition:opacity .5s,width .4s var(--e-soft),height .4s var(--e-soft),margin .4s var(--e-soft);
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 4.8 10.8 12 12-7.2 1.2-11.4 5.4-12 12-.6-6.6-4.8-10.8-12-12C7.2 10.8 11.4 6.6 12 0z' fill='%23C9A86A'/%3E%3C/svg%3E")}
body.has-spark .spark{opacity:.92}
.spark.is-hot{width:44px;height:44px;margin:-22px 0 0 -22px;opacity:.7}
.spark.is-lens{width:62px;height:62px;margin:-31px 0 0 -31px;opacity:.5}   /* dilates into a focus lens over the photography */

/* ---------- reading progress hairline ---------- */
.eprog{position:fixed;top:0;left:0;z-index:85;width:100%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--cocoa),var(--gold));
  transform:scaleX(var(--prog,0));transform-origin:left;
  opacity:.6;will-change:transform}
.no-js .eprog{display:none}

/* ---------- atmospheric expressions — the brand's monogram dispersed into drifting mist ---------- */
.atmos{position:absolute;inset:-14%;z-index:0;pointer-events:none;background:var(--gold);
  -webkit-mask:url(assets/atmos/a-1.png) center/contain no-repeat;mask:url(assets/atmos/a-1.png) center/contain no-repeat;
  opacity:.09;mix-blend-mode:screen;will-change:transform;animation:atmosdrift 40s ease-in-out infinite alternate}
.atmos--2{background:var(--cocoa);-webkit-mask-image:url(assets/atmos/a-2.png);mask-image:url(assets/atmos/a-2.png);opacity:.18;animation-duration:54s;animation-direction:alternate-reverse}
.atmos--3{background:var(--sand);-webkit-mask-image:url(assets/atmos/a-3.png);mask-image:url(assets/atmos/a-3.png);opacity:.08;animation-duration:66s}
@keyframes atmosdrift{0%{transform:translate(-3%,2%) scale(1.05) rotate(-1.4deg)}100%{transform:translate(4%,-3%) scale(1.16) rotate(1.6deg)}}
.reduce .atmos{animation:none}

/* ---------- nav ---------- */
.enav{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:1em;
  padding:clamp(15px,2.2vw,26px) var(--gutter);
  background:linear-gradient(var(--ground),transparent);
  transition:transform .6s var(--e-out),opacity .5s var(--e-out)}
.enav.is-hidden{transform:translateY(-110%);opacity:0}
.enav__brand{display:flex;align-items:center;gap:.5em;font-family:var(--f-disp);font-weight:500;font-size:1.02rem;letter-spacing:.04em;color:var(--ink)}
.enav__eye{width:1.18em;height:1.18em;color:var(--gold);display:inline-block}
.enav__name{padding-top:.05em}
.enav__case{font-family:var(--f-grot);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:none}
.enav__back{font-family:var(--f-grot);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:.4em;align-items:center;opacity:.82;transition:opacity .3s}
.enav__back:hover{opacity:1;color:var(--gold)}
.enav__back i{font-style:normal;transition:transform .4s var(--e-out)}
.enav__back:hover i{transform:translate(2px,-2px)}
[data-eye] svg{width:100%;height:100%;display:block;fill:currentColor}
@media (min-width:760px){.enav__case{display:block}}

/* ---------- persistent WO! studio badge (fixed, bottom-left, back to home) ---------- */
.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 var(--line);border-radius:100px;
  background:color-mix(in srgb,var(--ground) 66%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:.82;transition:opacity .35s var(--e-out),border-color .35s var(--e-out),transform .5s var(--e-out)}
.wobadge:hover{opacity:1;border-color:var(--gold);transform:translateY(-2px)}
.wobadge__wo{font-family:var(--f-disp);font-weight:600;font-size:.98rem;letter-spacing:.01em;color:var(--ink);line-height:1}
.wobadge__wo b{color:var(--gold);font-weight:600}
.wobadge__name{font-family:var(--f-grot);font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:560px){.wobadge{padding:.45em .7em;gap:.4em;min-width:44px;justify-content:center}.wobadge__name{display:none}}
/* ── tap targets: grow inline nav/footer links to a ≥44px hit area without shifting layout ── */
.enav__brand,.enav__back{position:relative}
.enav__brand::after,.enav__back::after{content:"";position:absolute;inset:-15px -8px}

/* ---------- wayfinding rail — the spine, navigable (desktop only) ---------- */
.wayfind{position:fixed;right:clamp(14px,1.5vw,28px);top:50%;transform:translateY(-50%);z-index:76;display:none;flex-direction:column;gap:10px;align-items:flex-end}
@media (min-width:1000px){.wayfind{display:flex}}
.wayfind__i{display:flex;align-items:center;justify-content:flex-end;gap:.7em;min-height:22px;background:none;border:0;cursor:pointer;padding:2px 0;color:var(--dim);font-family:var(--f-grot);font-size:.58rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:color .35s var(--e-out)}
.wayfind__i span{opacity:0;transform:translateX(6px);transition:opacity .4s var(--e-out),transform .4s var(--e-out);white-space:nowrap}
.wayfind__i::after{content:"";width:18px;height:1px;background:currentColor;opacity:.45;transition:width .4s var(--e-out),opacity .4s var(--e-out)}
.wayfind:hover .wayfind__i span,.wayfind__i:focus-visible span{opacity:1;transform:none}
.wayfind__i:hover{color:var(--ink)}
.wayfind__i.is-here{color:var(--gold)}
.wayfind__i.is-here::after{width:32px;opacity:1}
/* active shows the gold tick only; labels reveal on hover/focus (keeps the rail off full-bleed media) */
/* keyboard focus — a visible ring (the desktop cursor is hidden) */
a:focus-visible,button:focus-visible,.wobadge:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}

/* ============================================================
   PRIMITIVES — the developing language
   ============================================================ */
/* blur→focus develop: perception resolving as an element nears centre */
[data-develop]{--p:0;
  filter:blur(calc((1 - var(--p)) * 8px)) brightness(calc(.68 + var(--p) * .32)) saturate(calc(.72 + var(--p) * .28)) contrast(calc(.96 + var(--p)*.04));
  opacity:calc(.55 + var(--p) * .45);
  transform:scale(calc(1.045 - var(--p) * .045));
  transition:filter .16s linear,opacity .16s linear,transform .16s linear;
  will-change:filter,opacity,transform}
.no-js [data-develop],.reduce [data-develop]{--p:1;filter:none;opacity:1;transform:none}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.05s var(--e-out),transform 1.05s var(--e-out)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal],.reduce [data-reveal]{opacity:1;transform:none}

[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.05em}
[data-split] .w>span{display:inline-block;transform:translateY(115%);transition:transform .95s var(--e-out)}
[data-split].in .w>span{transform:none;transition-delay:min(var(--wi,0) * .04s,.5s)}  /* measured word cascade — editorial cadence, capped so long lines don't drag */
.no-js [data-split] .w>span{transform:none}

[data-parallax]{will-change:transform}

/* ---------- section base ---------- */
section{position:relative;padding-block:clamp(84px,15vh,200px);padding-inline:var(--gutter)}
.intro,.lede,.creed,.iris,.end{min-height:100svh}
h2{font-weight:400}

/* ============================================================
   00 · INTRO APERTURE — the Inner Eye resolves out of the dark
   ============================================================ */
.intro{display:grid;place-items:center;text-align:center;padding-block:0;overflow:hidden}
/* the opening frame — the brand's monogram scattered as atmosphere */
.intro__field{position:absolute;inset:0;z-index:0;pointer-events:none}
.imono{position:absolute;color:var(--gold);transform:translate(-50%,-50%);will-change:transform}  /* JS drives float + cursor-repel */
.imono svg{width:100%;height:100%;display:block;fill:currentColor}
.intro__stage{position:relative;z-index:1;transform-origin:50% 50%;display:grid;place-items:center}  /* only the eye is in flow → the monogram sits dead-centre; the line hangs below it */
.intro__eye{position:relative;width:clamp(108px,22vw,240px);aspect-ratio:1;color:var(--sand);
  filter:blur(30px) brightness(.5);opacity:.25;transform:scale(1.14);
  transition:filter 1.6s var(--e-out),opacity 1.6s var(--e-out),transform 1.6s var(--e-out)}
.intro__eye::after{content:"";position:absolute;inset:-44%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),transparent 62%);opacity:0;transition:opacity 1.8s .3s}
.intro.is-resolved .intro__eye{filter:blur(0) brightness(1);opacity:1;transform:none}
.intro.is-resolved .intro__eye::after{opacity:.55;animation:bloom 2.4s var(--e-out) .15s both,glowpulse 6s ease-in-out 2.7s infinite}
@keyframes bloom{0%{opacity:0;transform:scale(.66)}46%{opacity:.9;transform:scale(1.08)}100%{opacity:.55;transform:scale(1)}}  /* the print exposing — light blooms, then settles */
@keyframes glowpulse{0%,100%{opacity:.44}50%{opacity:.62}}
.intro__line{position:absolute;left:50%;top:calc(100% + clamp(26px,6vh,58px));transform:translateX(-50%);width:max-content;max-width:88vw;font-family:var(--f-disp);font-weight:320;font-size:clamp(1.5rem,1rem + 2.6vw,3rem);letter-spacing:-.01em;color:var(--ink);overflow:hidden}
.intro__line span{display:inline-block;opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--e-out),transform 1.1s var(--e-out)}
.intro__line .i{font-style:italic;color:var(--sand);filter:blur(7px);transition:opacity 1.1s var(--e-out),transform 1.1s var(--e-out),filter 1.4s var(--e-out)}  /* "without looking" develops into focus a beat after "Seen" */
.intro.is-resolved .intro__line .i{filter:blur(0)}
.intro.is-resolved .intro__line span{opacity:1;transform:none}
.intro.is-resolved .intro__line span:last-child{transition-delay:.22s}
.intro__cue{position:absolute;bottom:clamp(24px,5vh,46px);left:0;right:0;text-align:center;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);opacity:0;transition:opacity 1s 1s}
.intro.is-resolved .intro__cue{opacity:1}
.intro__cue i{display:block;font-style:normal;margin-top:8px;animation:bob 2.4s var(--e-soft) infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}

/* ============================================================
   MASTHEAD
   ============================================================ */
.lede{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(22px,3.4vh,40px);padding-top:clamp(110px,16vh,160px)}
.lede__eyebrow{font-size:clamp(.7rem,.64rem + .26vw,.8rem);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.lede__mark{width:min(72vw,580px);position:relative}
.lede__mark::after{content:"";position:absolute;inset:-26% -14%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 24% 50%,var(--gold-soft),transparent 60%);opacity:calc(var(--p,0)*.42);pointer-events:none}  /* the eye's light, carried into the name; tracks the develop */
.lede__mark img{width:100%;height:auto;filter:invert(1) sepia(.10) brightness(1.04)}  /* black artwork → warm bone on dark */
.lede__line{position:relative;font-family:var(--f-disp);font-weight:330;font-size:clamp(1.5rem,1rem + 2.4vw,2.7rem);letter-spacing:-.01em;color:var(--sand)}
.lede__line::after{content:"";position:absolute;left:50%;bottom:-.55em;height:1px;width:0;background:var(--gold);transform:translateX(-50%);opacity:.7;transition:width 1.1s var(--e-out) .5s}  /* a single controlled hairline */
.lede__line.in::after{width:clamp(38px,7vw,84px)}
.lede__sub{max-width:46ch;font-size:clamp(1rem,.96rem + .2vw,1.14rem);line-height:1.62;color:var(--ink-2)}
.lede__meta{list-style:none;display:grid;grid-template-columns:repeat(2,auto);gap:.7em clamp(28px,6vw,72px);margin-top:clamp(14px,2vh,28px);transform:none}
.lede__meta li{display:flex;flex-direction:column;gap:.35em;text-align:left;opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.lede__meta.in li{opacity:1;transform:none}
.lede__meta.in li:nth-child(2){transition-delay:.07s}
.lede__meta.in li:nth-child(3){transition-delay:.14s}
.lede__meta.in li:nth-child(4){transition-delay:.21s}
.no-js .lede__meta li,.reduce .lede__meta li{opacity:1;transform:none}
.lede__meta b{font-family:var(--f-grot);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.lede__meta span{font-family:var(--f-disp);font-style:italic;font-size:clamp(.92rem,.85rem + .3vw,1.08rem);color:var(--ink)}
.lede__cue{position:absolute;bottom:clamp(22px,4vh,40px);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.lede__cue i{display:block;font-style:normal;margin-top:7px;text-align:center;animation:bob 2.4s var(--e-soft) infinite}
@media (min-width:760px){.lede__meta{grid-template-columns:repeat(4,auto)}}

/* ============================================================
   HERO PORTAL — the masthead sits BEHIND the monogram; scroll zooms through it
   (only engages with JS + motion via .portal-on; otherwise the two sections simply stack)
   ============================================================ */
/* sticky stage (NOT a ScrollTrigger pin) — smooth on mobile, no position:fixed swap */
.portal-on .hero-rack{position:relative;height:210vh}
.portal-on .hero-portal{position:sticky;top:0;height:100vh;overflow:hidden}
.portal-on .hero-portal .intro,.portal-on .hero-portal .lede{position:absolute;inset:0;min-height:0;height:100vh}
.portal-on .hero-portal .lede{z-index:1}
.portal-on .hero-portal .intro{z-index:2;background:var(--ground)}

/* ============================================================
   AMBIENCE — the mark, in the world (cinematic develop interlude)
   ============================================================ */
.amb{padding-inline:0;max-width:none;display:grid;gap:clamp(18px,3vh,32px)}
.amb__media{position:relative;width:100%;aspect-ratio:5/4;overflow:hidden;background:var(--ground-2) center/cover;background-image:var(--ph)}
.amb__media img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}  /* bias up — keep the head, not a torso band */
.amb__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 clamp(60px,12vw,180px) rgba(11,10,9,.85);
  background:radial-gradient(122% 92% at 50% 50%,transparent 42%,rgba(11,10,9,.5));
  opacity:calc(1 - var(--p,0) * .5)}   /* the frame stops in until the image resolves */
.amb__cap{text-align:center;font-family:var(--f-disp);font-style:italic;font-weight:320;font-size:clamp(1.1rem,.9rem + 1vw,1.7rem);line-height:1.3;color:var(--sand);padding-inline:var(--gutter)}
@media (min-width:760px){.amb__media{aspect-ratio:16/10}}

/* ============================================================
   FIRST LOOK — immersive editorial mosaic (the brand's world, shown not told). Dazzle, early.
   ============================================================ */
.firstlook{max-width:none;padding-inline:clamp(8px,1.6vw,22px);overflow:hidden}
.firstlook__lead{max-width:var(--maxw);margin:0 auto clamp(22px,3.4vh,46px);padding-inline:var(--gutter)}
.firstlook__line{font-family:var(--f-disp);font-weight:310;font-size:clamp(1.7rem,1.05rem + 3vw,3.6rem);line-height:1.05;letter-spacing:-.02em;max-width:18ch;color:var(--ink);margin-top:.2em}
.firstlook__line em{font-style:italic;color:var(--sand)}
/* golden-ratio justified rows — each row's tiles split by --ar weight (1 : .62 ≈ φ); colour-ordered top→bottom */
.fl-rows{display:flex;flex-direction:column;gap:clamp(6px,.8vw,12px)}
.fl-row{display:flex;gap:clamp(6px,.8vw,12px);height:clamp(224px,28vw,372px)}      /* heights step in φ: band ÷φ · standard · tall ×φ */
.fl-row--tall{height:clamp(362px,45.3vw,602px)}    /* standard × 1.618 — the anchor rows */
.fl-row--band{height:clamp(138px,17.3vw,230px)}    /* standard ÷ 1.618 — slim word bands between colour sections */
.fl-row>*{flex:var(--ar,1) 1 0;min-width:0}
.fl{position:relative;overflow:hidden;background:var(--ground-2);border:1px solid var(--line-2);
  opacity:0;transform:translateY(26px) scale(.992);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out)}
.fl.in{opacity:1;transform:none}
.fl img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(10px) brightness(.66) saturate(.85);transform:scale(1.06);
  transition:filter 1.1s var(--e-out),transform 1.3s var(--e-out)}   /* each frame develops into focus as it arrives */
.fl.in img{filter:blur(0) brightness(.82) saturate(.94);transform:scale(1)}
@media (hover:hover){.fl:hover img{filter:blur(0) brightness(1.04) saturate(1);transform:scale(1.05)}}
.no-js .fl,.reduce .fl{opacity:1;transform:none}.no-js .fl img,.reduce .fl img{filter:none;transform:none}
/* a text tile — a brand line set among the images (evokes the message, magazine-style) */
.fl--word{display:grid;place-items:center;text-align:center;background:var(--ground);border-color:var(--line);padding:clamp(16px,3vw,44px)}
.fl--word p{font-family:var(--f-disp);font-weight:320;font-style:italic;font-size:clamp(1rem,.78rem + 1.05vw,1.7rem);line-height:1.2;color:var(--sand);overflow-wrap:break-word;max-width:34ch}
.fl--word p b{display:block;font-family:var(--f-grot);font-style:normal;font-weight:500;font-size:.4em;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.9em}
.fl figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(9px,1.3vw,15px);font-family:var(--f-grot);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(transparent,rgba(11,10,9,.82));opacity:0;transform:translateY(8px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
@media (hover:hover){.fl:hover figcaption{opacity:.96;transform:none}}
@media (max-width:760px){
  .fl-row{flex-wrap:wrap;height:auto;gap:6px}
  .fl-row>*{flex:1 1 calc(50% - 3px);aspect-ratio:4/5}
  .fl-row--feat>*{flex-basis:100%;aspect-ratio:3/2}
  .fl-row>.fl--word{flex:1 1 100%;aspect-ratio:auto;min-height:30vw}
  .fl figcaption{display:none}
}

/* ============================================================
   GENERIC dark content sections — width + headings
   ============================================================ */
.origin,.pos,.values,.logo,.type,.col,.img,.app{max-width:none}
.origin>*,.pos>*,.values>*,.logo>*,.type>*,.col>*,.img>*,.app>*{max-width:var(--maxw);margin-inline:auto}

/* ░ ORIGIN ░ */
.origin__head{font-family:var(--f-disp);font-weight:320;font-size:clamp(1.9rem,1.1rem + 3.6vw,4.6rem);line-height:1.06;letter-spacing:-.02em;max-width:18ch;margin-bottom:clamp(40px,7vh,92px);color:var(--ink)}
.origin__cols{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,64px);margin-left:0;max-width:760px;border-left:1px solid var(--line);padding-left:clamp(20px,3vw,48px)}
.origin__cols p{font-size:clamp(1.02rem,.96rem + .3vw,1.22rem);line-height:1.64;color:var(--ink-2)}
.origin__note{color:var(--dim)}
.origin__pull{font-family:var(--f-disp);font-style:italic;font-weight:320;font-size:clamp(1.6rem,1rem + 3vw,3.4rem);line-height:1.18;letter-spacing:-.012em;margin:clamp(60px,10vh,140px) auto 0;max-width:22ch;text-align:center;color:var(--ink)}
.origin__pull em{color:var(--sand)}
.origin__pull .dimword{color:var(--dim)}
@media (min-width:760px){.origin__cols{grid-template-columns:1fr 1fr}}

/* ░ PHILOSOPHY ░ */
.creed{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(20px,3vh,34px);overflow:hidden}
.creed__eye{position:absolute;left:50%;top:50%;width:min(118vw,1080px);aspect-ratio:1;color:var(--cocoa);z-index:0;pointer-events:none;
  opacity:calc(.13 + var(--ef,0) * .2);
  filter:blur(calc((1 - var(--ef,0)) * 15px));
  transform:translate(-50%,-50%) scale(var(--es,1));transition:transform 1.2s var(--e-soft)}
.creed__eye::before{content:"";position:absolute;inset:2%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--gold-soft),transparent 58%);
  opacity:calc(var(--ef,0) * .55);transition:opacity 1s var(--e-soft)}   /* the eye lights up as clarity arrives */
.no-js .creed__eye,.reduce .creed__eye{opacity:.26;filter:none}
.creed>:not(.creed__eye){position:relative;z-index:1}
.creed__lead{font-family:var(--f-disp);font-weight:310;font-size:clamp(2rem,1.1rem + 4.4vw,5rem);line-height:1.04;letter-spacing:-.025em;max-width:15ch;color:var(--ink)}
.creed__body{max-width:42ch;font-size:clamp(1.04rem,.98rem + .34vw,1.3rem);line-height:1.6;color:var(--ink-2)}
.creed__coda{max-width:38ch;font-family:var(--f-disp);font-style:italic;font-weight:320;font-size:clamp(1.2rem,.95rem + 1.1vw,1.8rem);line-height:1.34;color:var(--sand)}
.creed__coda em{color:var(--gold)}

/* ░ POSITIONING ░ */
.pos__title{font-family:var(--f-disp);font-weight:320;font-size:clamp(1.7rem,1.1rem + 3vw,3.8rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch;margin-bottom:clamp(26px,4vh,48px);color:var(--ink)}
.pos__body{max-width:60ch;font-size:clamp(1rem,.95rem + .28vw,1.18rem);line-height:1.64;color:var(--ink-2)}
.pos__graphs{display:grid;gap:clamp(22px,3.4vh,40px);margin:clamp(48px,8vh,96px) 0 clamp(40px,6vh,72px);max-width:760px}
.slide figcaption{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.slide figcaption span:first-child{color:var(--dim)}
.slide figcaption span:last-child{color:var(--ink)}
.slide__rail{position:relative;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e-out)}
.pos__graphs.in .slide__rail{transform:none}
.slide__rail::before{content:"";position:absolute;left:0;top:0;height:100%;width:5%;background:linear-gradient(90deg,transparent,var(--gold));opacity:.6;transition:width 1.4s var(--e-out)}  /* intensity-fill: the reading toward the pole */
.pos__graphs.in .slide:nth-child(1) .slide__rail::before{width:var(--at);transition-delay:.2s}
.pos__graphs.in .slide:nth-child(2) .slide__rail::before{width:var(--at);transition-delay:.35s}
.pos__graphs.in .slide:nth-child(3) .slide__rail::before{width:var(--at);transition-delay:.5s}
.slide__rail i{position:absolute;top:50%;left:5%;width:11px;height:11px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 16%,transparent),0 0 18px var(--gold-soft);transition:left 1.4s var(--e-out)}
.pos__graphs.in .slide:nth-child(1) .slide__rail i{left:var(--at);transition-delay:.2s}
.pos__graphs.in .slide:nth-child(2) .slide__rail i{left:var(--at);transition-delay:.35s}
.pos__graphs.in .slide:nth-child(3) .slide__rail i{left:var(--at);transition-delay:.5s}
.no-js .slide__rail{transform:none}.no-js .slide__rail i{left:var(--at)}.no-js .slide__rail::before{width:var(--at)}
.pos__pair{display:grid;gap:clamp(16px,2.4vh,26px);border-top:1px solid var(--line);padding-top:clamp(26px,4vh,44px)}
.pos__pair p{font-family:var(--f-disp);font-size:clamp(1.1rem,.9rem + 1vw,1.7rem);font-weight:320;line-height:1.3;color:var(--ink)}
.pos__pair b{font-family:var(--f-grot);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.5em}
@media (min-width:760px){.pos__pair{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}}

/* ░ THE RULE — a charged dark moment ░ */
.rule{max-width:none;text-align:center;background:radial-gradient(120% 80% at 50% 30%,var(--ground-2),var(--ground) 70%)}
.rule>*:not(.atmos){max-width:var(--maxw);margin-inline:auto;position:relative;z-index:1}
.rule__line{font-family:var(--f-disp);font-weight:320;font-size:clamp(2rem,1.2rem + 4vw,5.2rem);line-height:1.03;letter-spacing:-.025em;max-width:16ch;margin-inline:auto;color:var(--ink)}
.rule__sub{max-width:50ch;margin:clamp(28px,4vh,44px) auto 0;font-size:clamp(1rem,.95rem + .26vw,1.16rem);line-height:1.6;color:var(--ink-2)}
.rule__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,80px);margin:clamp(48px,8vh,96px) auto clamp(36px,5vh,60px);max-width:760px;text-align:left}
.rule__lbl{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1em;padding-bottom:.8em;border-bottom:1px solid var(--line)}
.rule__col ul{list-style:none;display:grid;gap:.7em}
.rule__col li{font-family:var(--f-disp);font-style:italic;font-weight:320;font-size:clamp(1.05rem,.9rem + .8vw,1.5rem);color:var(--dim)}
.rule__col--keep li{color:var(--sand)}
/* the refused, struck out as you arrive — the rejection filter, enacted */
.rule__col:not(.rule__col--keep) li{position:relative;width:max-content;max-width:100%}
.rule__col:not(.rule__col--keep) li::after{content:"";position:absolute;left:0;top:54%;height:1px;width:100%;background:var(--dim);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out)}
.rule__cols.in .rule__col:not(.rule__col--keep) li::after{transform:scaleX(1)}
.rule__cols.in .rule__col:not(.rule__col--keep) li:nth-child(1)::after{transition-delay:.35s}
.rule__cols.in .rule__col:not(.rule__col--keep) li:nth-child(2)::after{transition-delay:.45s}
.rule__cols.in .rule__col:not(.rule__col--keep) li:nth-child(3)::after{transition-delay:.55s}
.rule__cols.in .rule__col:not(.rule__col--keep) li:nth-child(4)::after{transition-delay:.65s}
.no-js .rule__col:not(.rule__col--keep) li::after,.reduce .rule__col:not(.rule__col--keep) li::after{transform:scaleX(1)}
@media (max-width:600px){.rule__cols{grid-template-columns:1fr;gap:clamp(26px,5vh,40px);max-width:32ch;margin-inline:auto}}
.rule__foot{font-size:clamp(1rem,.92rem + .4vw,1.3rem);font-family:var(--f-disp);font-style:italic;font-weight:320;color:var(--ink);max-width:24ch;margin-inline:auto}

/* ░ CORE VALUES ░ */
.values__list{list-style:none;counter-reset:v;display:grid;gap:0}
.values__list li{counter-increment:v;position:relative;display:grid;gap:.5em .9em;grid-template-columns:1fr;padding:clamp(24px,3.6vh,40px) 0;border-top:1px solid var(--line)}
.values__list li:last-child{border-bottom:1px solid var(--line)}
.values__list li::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ink-2);opacity:.5;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e-out) .15s}  /* the divider draws in — the site's hairline motif */
.values__list li.in::after{transform:scaleX(1)}
.no-js .values__list li::after,.reduce .values__list li::after{transform:scaleX(1)}
.values__list b{font-family:var(--f-disp);font-weight:340;font-size:clamp(1.3rem,1rem + 1.5vw,2.3rem);letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
.values__list b::before{content:counter(v,decimal-leading-zero);font-family:var(--f-grot);font-weight:500;font-size:.58em;color:var(--gold);margin-right:1em;letter-spacing:.06em;vertical-align:.2em}
.values__list span{font-size:clamp(1rem,.95rem + .26vw,1.16rem);line-height:1.6;color:var(--ink-2);max-width:54ch}
@media (min-width:860px){.values__list li{grid-template-columns:1.05fr 1.2fr;align-items:baseline;gap:clamp(30px,5vw,90px)}}

/* ░ SYSTEM DIVIDER ░ */
.div{position:relative;text-align:center;min-height:66svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;overflow:hidden}
.div>*:not(.div__iris):not(.div__field){position:relative;z-index:1}
.div__field{position:absolute;inset:0;z-index:0;pointer-events:none}
/* the aperture — opens as you pass through into the system */
.div__iris{position:absolute;inset:0;margin:auto;width:min(70vw,520px);height:min(70vw,520px);z-index:0;pointer-events:none;opacity:0;
  border-radius:50%;border:1px solid var(--gold);
  background:radial-gradient(circle,transparent 58%,var(--gold-soft) 72%,transparent 74%);
  box-shadow:0 0 90px var(--gold-soft),inset 0 0 70px var(--gold-soft)}
.div__no{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.div__t{font-family:var(--f-disp);font-weight:300;font-size:clamp(3rem,1.6rem + 7vw,9rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.div__s{font-size:clamp(.84rem,.8rem + .2vw,.98rem);letter-spacing:.04em;color:var(--ink-2);max-width:34ch}
/* the threshold is a STICKY reveal-portal (no pin → smooth on mobile): the "The System" curtain
   zooms/dissolves to reveal the system index sitting BEHIND it — mirrors the hero. JS adds .sys-on;
   without JS the divider just stacks normally and the reveal layer is hidden. */
.sys-reveal{display:none}
.sys-on .sys-rack{position:relative;height:210vh}
body.is-touch.sys-on .sys-rack{height:140vh}   /* touch: tighten the threshold — less trailing sticky scroll (no dead space before The Brandmark) */
.sys-on .sys-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ground)}
.sys-on .sys-stage>*{position:absolute;inset:0}
.sys-on .div{z-index:2;background:var(--ground);transform-origin:50% 50%}        /* opaque curtain over the reveal */
.sys-on .div__t,.sys-on .div__iris,.sys-on .div__field{transform-origin:50% 50%;will-change:transform,opacity}
.sys-on .sys-reveal{display:grid;place-items:center;align-content:center;text-align:center;z-index:1;padding-inline:var(--gutter)}
.sys-reveal__lbl{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(20px,3.4vh,44px)}
.sys-reveal__idx{list-style:none;counter-reset:s 4;display:flex;flex-direction:column;gap:clamp(5px,1vh,12px)}
.sys-reveal__idx li{counter-increment:s;font-family:var(--f-disp);font-weight:300;font-size:clamp(1.3rem,.95rem + 2.4vw,2.8rem);line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.sys-reveal__idx li::before{content:counter(s,decimal-leading-zero);font-family:var(--f-grot);font-weight:500;font-size:.36em;letter-spacing:.06em;color:var(--gold);margin-right:1.1em;vertical-align:.32em}

/* ============================================================
   THE SYSTEM — brand elements as lit exhibits
   ============================================================ */
.logo__head,.type__head,.col__head,.img__head,.app__head{margin-bottom:clamp(36px,6vh,80px)}
.logo__title,.type__title,.col__title,.img__title,.app__title,.mono__title{font-family:var(--f-disp);font-weight:320;letter-spacing:-.02em;line-height:1.07;color:var(--ink)}
.logo__title{font-size:clamp(1.6rem,1.05rem + 2.6vw,3.4rem);max-width:22ch;margin-bottom:clamp(22px,3vh,40px)}
.logo__body,.col__body,.img__body,.app__body,.mono__body{font-size:clamp(1rem,.95rem + .26vw,1.16rem);line-height:1.62;color:var(--ink-2)}
.logo__body{max-width:56ch}

/* wordmark exhibit */
.logo__show{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.4em;padding:clamp(48px,9vh,120px) 0;margin-block:clamp(20px,3vh,40px);border-block:1px solid var(--line)}
.logo__show::before{content:"";position:absolute;inset:8% 4%;z-index:0;background:radial-gradient(ellipse at 22% 50%,var(--gold-soft),transparent 60%);opacity:.16;pointer-events:none;animation:spotlight 7s ease-in-out infinite}  /* the exhibit, lit and breathing */
@keyframes spotlight{0%,100%{opacity:.12}50%{opacity:.22}}
.reduce .logo__show::before{animation:none}
.logo__show > *{position:relative;z-index:1}
.logo__show img{width:min(78vw,640px);height:auto;filter:invert(1) sepia(.1) brightness(1.04)}
.logo__show figcaption{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.7em}
.logo__show figcaption::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-soft)}
.logo__specs{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vh,72px);margin-top:clamp(40px,6vh,72px)}
.spec figcaption{margin-top:1.4em}
.spec figcaption b{display:block;font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:clamp(1.05rem,.9rem + .6vw,1.35rem);margin-bottom:.4em;color:var(--ink)}
.spec figcaption span{font-size:.92rem;line-height:1.55;color:var(--ink-2);max-width:40ch;display:block}
/* exclusion-zone diagram */
.zone{aspect-ratio:16/9;display:grid;place-items:center;background:var(--ground-2);
  background-image:repeating-linear-gradient(45deg,transparent 0 8px,var(--line-2) 8px 9px)}
.zone__inner{background:var(--ground);padding:8% 7%;outline:1px dashed var(--line);outline-offset:0}
.zone__inner img{width:min(46vw,300px);height:auto;filter:invert(1) sepia(.1) brightness(1.04)}
/* scale tiers */
.tiers{list-style:none;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(14px,3vw,40px);padding:clamp(26px,4vh,46px) clamp(14px,3vw,40px);background:var(--ground-2);min-height:160px;border:1px solid var(--line-2)}
.tiers li{display:flex;flex-direction:column;align-items:center;gap:1.2em;flex:0 1 auto;opacity:0;transform:translateY(10px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.spec.in .tiers li{opacity:1;transform:none}
.spec.in .tiers li:nth-child(2){transition-delay:.12s}
.spec.in .tiers li:nth-child(3){transition-delay:.24s}
.no-js .tiers li,.reduce .tiers li{opacity:1;transform:none}
.tiers img{width:var(--w);max-width:26vw;height:auto;filter:invert(1) sepia(.1) brightness(1.04)}
/* mobile blowout guards — keep the spec captions inside the gutter */
.logo__specs,.logo__specs>*,.spec,.spec figcaption,.tiers{min-width:0}
.spec figcaption,.spec figcaption b,.spec figcaption span{max-width:100%;overflow-wrap:anywhere}
.tiers i{font-style:normal;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
@media (min-width:860px){.logo__specs{grid-template-columns:1fr 1fr;align-items:start}}

/* ░ MONOGRAM ░ */
.mono{max-width:none;display:grid;gap:clamp(40px,6vh,72px)}
.mono>*{max-width:var(--maxw);width:100%;margin-inline:auto}
.mono__title{font-size:clamp(1.8rem,1.1rem + 3.4vw,4.2rem);margin-bottom:.5em}
.mono__body{max-width:48ch}
.mono__rule{margin-top:1.4em;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.mono__holds{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;justify-content:center}
.hold{display:flex;flex-direction:column;align-items:center;gap:1em}
.hold__shape{width:clamp(120px,30vw,190px);aspect-ratio:1;display:grid;place-items:center;background:var(--ground-3);color:var(--gold);padding:24%;border:1px solid var(--line-2);position:relative}
.hold__shape::before{content:"";position:absolute;inset:16%;border:1px dashed var(--line);border-radius:inherit;pointer-events:none}  /* the 25% exclusion zone, shown */
.hold--circle .hold__shape{border-radius:50%}
.hold--square .hold__shape{border-radius:18px}
.hold figcaption{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
@media (min-width:860px){.mono{grid-template-columns:1.1fr .9fr;align-items:center}.mono__holds{justify-content:flex-end}}

/* ░ TYPOGRAPHY ░ */
.type__title{font-size:clamp(1.6rem,1.05rem + 2.6vw,3.4rem);max-width:20ch}
.type__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);margin-bottom:clamp(36px,5vh,64px)}
.face{display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(22px,3vh,36px);border:1px solid var(--line-2);background:var(--ground-2)}
.face__big{font-family:var(--f-disp);font-weight:380;font-size:clamp(4rem,2rem + 9vw,8.5rem);line-height:.8;letter-spacing:-.02em;color:var(--ink);filter:blur(7px);opacity:.6;transition:filter 1.1s var(--e-out),opacity 1.1s var(--e-out)}  /* the typeface resolves into focus */
.face.in .face__big{filter:blur(0);opacity:1}
.no-js .face__big,.reduce .face__big{filter:none;opacity:1}
.face__big em{font-style:italic;color:var(--sand)}   /* roman + the real Chronicle italic — the face's range, in one specimen */
.face__big--sans{font-family:var(--f-grot);font-weight:500}
.face__meta b{display:block;font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:clamp(1.1rem,.95rem + .7vw,1.5rem);margin-bottom:.45em;color:var(--ink)}
.face__meta span{display:block;font-size:.96rem;line-height:1.55;color:var(--ink-2);max-width:42ch;margin-bottom:.7em}
.face__meta i{font-style:normal;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.scaleT{width:100%;border-collapse:collapse}
.scaleT tr{opacity:0;transform:translateY(8px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.scaleT.in tr{opacity:1;transform:none}
.scaleT.in tr:nth-child(2){transition-delay:.1s}.scaleT.in tr:nth-child(3){transition-delay:.2s}.scaleT.in tr:nth-child(4){transition-delay:.3s}
.no-js .scaleT tr,.reduce .scaleT tr{opacity:1;transform:none}
.scaleT td{padding:clamp(14px,2vh,22px) 0;border-top:1px solid var(--line);vertical-align:baseline;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.scaleT td:nth-child(2){text-align:right}
.scaleT td:last-child{text-align:right;width:5em;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.scaleT__spec{font-family:var(--f-disp)!important;font-weight:340!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important;line-height:1!important;width:55%}
.scaleT__spec--sans{font-family:var(--f-grot)!important;font-weight:500!important;font-size:clamp(1rem,.9rem + .5vw,1.3rem)!important}
.type__note{margin-top:clamp(24px,3vh,40px);font-family:var(--f-disp);font-style:italic;font-size:clamp(1rem,.92rem + .5vw,1.3rem);color:var(--sand)}
.type__note span{display:block;font-family:var(--f-grot);font-style:normal;font-size:.78rem;letter-spacing:.02em;color:var(--dim);margin-top:.7em}
@media (min-width:860px){.type__grid{grid-template-columns:1fr 1fr}}

/* ░ COLOUR — the palette as a material wall (large planes, name + hex set in-plane) ░ */
.col__title{font-size:clamp(1.7rem,1.1rem + 3vw,3.8rem);margin-bottom:clamp(20px,3vh,36px)}
.col__body{max-width:54ch}
.col__lbl{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:1em}
.col__lbl i{font-style:normal;color:var(--gold);letter-spacing:.06em}
.col__set{margin-top:clamp(28px,4vh,56px)}
.col__set:first-of-type{margin-top:clamp(22px,3vh,40px)}
.col__wall{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}   /* planes meet — the neutrals read as one continuous material */
.col__wall--4{grid-template-columns:repeat(4,1fr)}
.col__caveat{margin-top:1.1em;font-family:var(--f-disp);font-style:italic;font-size:clamp(1rem,.92rem + .4vw,1.3rem);line-height:1.3;color:var(--sand);max-width:40ch}
.col__plane{position:relative;aspect-ratio:5/6;background:var(--c);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(13px,1.5vw,22px);overflow:hidden}
.col__plane b{font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:clamp(1rem,.9rem + .4vw,1.32rem);line-height:1.08;color:var(--ink)}
.col__plane i{font-style:normal;font-size:.66rem;letter-spacing:.1em;color:var(--ink);opacity:.62;font-variant-numeric:tabular-nums;margin-top:.4em}
/* the governing ratio — an architectural bar, 60·30·10 in real proportion */
.col__ratio{margin-top:clamp(44px,7vh,96px)}
.col__ratio .ratio__bar{display:flex;height:clamp(104px,16vh,184px);overflow:hidden;gap:2px}
.col__ratio .ratio__bar span{width:0;background:var(--c);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(13px,1.5vw,22px);overflow:hidden;transition:width 1.4s var(--e-out)}
.col__ratio.in .ratio__bar span{width:var(--w)}
.col__ratio.in .ratio__bar span:nth-child(2){transition-delay:.18s}.col__ratio.in .ratio__bar span:nth-child(3){transition-delay:.36s}
.no-js .ratio__bar span,.reduce .ratio__bar span{width:var(--w)}
.ratio__bar b{font-family:var(--f-grot);font-weight:500;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.72;white-space:nowrap}
.ratio__bar em{font-style:normal;font-family:var(--f-disp);font-size:clamp(1.6rem,1rem + 2vw,3rem);font-weight:340;color:var(--ink);line-height:1;margin-top:.1em}
.col__ratio figcaption{margin-top:1.2em;font-family:var(--f-disp);font-style:italic;font-size:clamp(1.05rem,.92rem + .5vw,1.4rem);line-height:1.3;color:var(--sand);max-width:42ch}
@media (max-width:560px){.col__plane{aspect-ratio:4/5}.col__ratio .ratio__bar{height:clamp(132px,33vw,184px)}}

/* ░ PATTERN — EIMA Orbit alive ░ */
.pat{max-width:none;overflow:hidden;min-height:80svh;display:flex;align-items:center}
.pat__orbit{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1}
.pat__inner{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;width:100%;display:grid;gap:clamp(36px,6vh,72px);align-items:center}
.pat__title{font-family:var(--f-disp);font-weight:310;font-size:clamp(2rem,1.2rem + 4vw,5rem);line-height:1.04;letter-spacing:-.025em;max-width:16ch;margin-bottom:clamp(22px,3vh,38px);color:var(--ink)}
.pat__body{max-width:46ch;font-size:clamp(1.02rem,.96rem + .3vw,1.22rem);line-height:1.6;color:var(--ink-2)}
.pat__body em{font-style:italic;color:var(--gold)}
/* lit specimen — the Orbit unit, so Pattern is an exhibit not copy-over-void */
.pat__spec{background:var(--ground-2);border:1px solid var(--line-2);padding:clamp(20px,3vw,34px);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
/* the two real EIMA pattern systems — Weave + Orbit, lifted from the brand artwork, drawn in gold on the plate */
.pat__plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.pat__plate{position:relative;aspect-ratio:1;background:var(--ground-3);border:1px solid var(--line-2);overflow:hidden}
.pat__plate::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(11,10,9,.92))}  /* scrim — keeps the label legible over the pattern */
.pat__plate::after{content:attr(data-name);position:absolute;left:clamp(11px,1.6vw,17px);bottom:clamp(10px,1.4vw,15px);z-index:2;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.94}
.pat__tile{position:absolute;inset:-16%;z-index:0;background:var(--gold);opacity:.86;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;will-change:transform}
.pat__tile--weave{-webkit-mask-image:url(assets/patterns/weave.svg);mask-image:url(assets/patterns/weave.svg);
  -webkit-mask-size:760px;mask-size:760px;transform:rotate(-15deg) scale(1.42)}   /* the Weave reads on the diagonal — tilted, as in the brand artwork */
.pat__tile--orbit{-webkit-mask-image:url(assets/patterns/orbit.svg);mask-image:url(assets/patterns/orbit.svg);
  -webkit-mask-size:520px;mask-size:520px}
@media (max-width:560px){.pat__tile--weave{-webkit-mask-size:520px;mask-size:520px}.pat__tile--orbit{-webkit-mask-size:380px;mask-size:380px}}
/* mobile: the Orbit re-expressed as a CSS monogram field — the canvas is off on touch, so this fills the section instead of dead space */
.is-touch .pat{position:relative}
.is-touch .pat__orbit{display:none}
.is-touch .pat::after{content:"";position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;background:var(--gold);opacity:.12;
  -webkit-mask:url(assets/patterns/orbit.svg) 0 0/150px repeat;mask:url(assets/patterns/orbit.svg) 0 0/150px repeat;
  animation:orbitDrift 42s linear infinite}
@keyframes orbitDrift{to{transform:translate(-150px,-150px)}}
.reduce .pat::after{animation:none}
.pat__spec figcaption{margin-top:1.4em;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
@media (min-width:860px){.pat__inner{grid-template-columns:1.05fr .95fr}}

/* ░ THE INNER EYE — dilating ░ */
.iris{display:grid;align-items:center;overflow:hidden}
.iris__field{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.iris__stars{position:absolute;inset:0;pointer-events:none}   /* twinkling monogram stars — rhymes the Pattern galaxy */
@keyframes twinkle{0%,100%{opacity:.05}50%{opacity:.22}}
.reduce .imono{animation:none}
.iris__eye{width:clamp(220px,46vw,580px);aspect-ratio:1;color:var(--cocoa);opacity:.9;transform:scale(var(--es,1));transition:transform .7s var(--e-soft)}
.iris__halo{position:absolute;width:clamp(300px,60vw,820px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),transparent 60%);transform:scale(var(--hs,1));transition:transform .9s var(--e-soft);opacity:.5}
.iris__copy{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;width:100%}
.iris__title{font-family:var(--f-disp);font-weight:310;font-size:clamp(1.9rem,1.1rem + 3.8vw,4.4rem);line-height:1.05;letter-spacing:-.02em;margin:.3em 0 .6em;max-width:16ch;color:var(--ink)}
.iris__body{font-size:clamp(1rem,.95rem + .34vw,1.22rem);line-height:1.6;color:var(--ink-2);max-width:42ch}
.iris__rule{margin-top:1.4em;font-family:var(--f-disp);font-style:italic;font-size:clamp(1.1rem,.9rem + .9vw,1.6rem);color:var(--gold);max-width:24ch}
/* mobile: the monogram sits ABOVE the copy (in flow), not behind it — no overlap */
@media (max-width:760px){
  .iris{display:block}
  .iris__field{position:relative;inset:auto;height:clamp(230px,60vw,330px);margin-bottom:clamp(8px,2vh,22px)}
  .iris__eye{width:clamp(170px,46vw,280px)}
  .iris__halo{width:clamp(220px,62vw,360px)}
}

/* ░ IMAGERY — photographs developing ░ */
.img__title{font-size:clamp(1.8rem,1.1rem + 3.4vw,4rem);margin-bottom:clamp(18px,2.6vh,32px)}
.img__body{max-width:50ch}
.img__set{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,34px);counter-reset:frame}
.shot{counter-increment:frame}
.shot--wide{grid-column:1/-1}
.shot__media{position:relative;overflow:hidden;background:var(--ground-2) center/cover;background-image:var(--ph)}
.shot__media img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;aspect-ratio:4/5}  /* portrait, head-biased — full figure, no joint-crop */
.shot--wide .shot__media img{aspect-ratio:16/10}
.shot figcaption{display:flex;flex-wrap:wrap;gap:.3em 1em;align-items:baseline;margin-top:1em}
.shot figcaption::before{content:"Frame " counter(frame,decimal-leading-zero);flex-basis:100%;font-family:var(--f-grot);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.75;margin-bottom:.15em}  /* contact-sheet frame marker */
.shot figcaption b{font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:clamp(1rem,.9rem + .5vw,1.3rem);color:var(--ink)}
.shot figcaption i{font-style:normal;font-size:.72rem;letter-spacing:.06em;color:var(--ink-2)}
@media (max-width:560px){.img__set{grid-template-columns:1fr}.shot--wide .shot__media img{aspect-ratio:4/5}}

/* ░ APPLICATIONS — lit prints on the wall ░ */
.app__title{font-size:clamp(1.8rem,1.1rem + 3.4vw,4rem);margin-bottom:clamp(18px,2.6vh,32px)}
.app__body{max-width:48ch}
.app__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,30px)}
.ap{overflow:hidden;border:1px solid var(--line-2);background:var(--ground-2);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.ap img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:blur(8px) brightness(.7);transition:filter 1.2s var(--e-out)}  /* the print develops on the wall — controlled reveal */
.ap.in img{filter:blur(0) brightness(1)}
.no-js .ap img,.reduce .ap img{filter:none}
.ap--tall img{height:100%}
@media (hover:hover){.ap{transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}.ap:hover{transform:translateY(-4px);box-shadow:0 42px 72px -36px rgba(0,0,0,.92)}}
.ap figcaption{padding:.75em clamp(10px,1.4vw,16px) .9em;font-size:.72rem;letter-spacing:.04em;color:var(--ink-2);background:var(--ground-2)}
@media (min-width:860px){.app__grid{grid-template-columns:repeat(3,1fr);grid-auto-flow:dense}.ap--tall{grid-row:span 2}.ap--tall img{aspect-ratio:3/4}}
/* lifestyle band — the brand in the world (portrait environmental frames) */

/* ░ THE WORLD — immersive streaming marquee (EIMA, all around) ░ */
.world{max-width:none;padding-inline:0;overflow:hidden}
.world__head{max-width:var(--maxw);margin:0 auto clamp(34px,6vh,72px);padding-inline:var(--gutter)}
.world__title{font-family:var(--f-disp);font-weight:310;font-size:clamp(2rem,1.2rem + 4vw,5rem);line-height:1.04;letter-spacing:-.025em;max-width:16ch;color:var(--ink);margin:.2em 0 .5em}
.world__body{max-width:46ch;font-size:clamp(1rem,.95rem + .26vw,1.16rem);line-height:1.6;color:var(--ink-2)}
.world__marq{display:flex;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.world__marq+.world__marq{margin-top:clamp(12px,1.6vw,22px)}
.world__track{display:flex;gap:clamp(12px,1.6vw,22px);width:max-content;will-change:transform;animation:marq 70s linear infinite}
.world__marq--rev .world__track{animation-duration:84s;animation-direction:reverse}
@media (hover:hover){.world__marq:hover .world__track{animation-play-state:paused}}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.wfig{flex:0 0 auto;width:clamp(190px,23vw,320px);aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--ground-2);border:1px solid var(--line-2)}
.wfig img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.9) contrast(1.02);transition:filter .6s var(--e-out),transform 1s var(--e-out)}
@media (hover:hover){.wfig:hover img{filter:brightness(1.03) saturate(1);transform:scale(1.05)}}
.reduce .world__track{animation:none}
.world__marq.is-off .world__track{animation-play-state:paused}   /* paused when off-screen — no wasted compositor work while scrolling elsewhere */
@media (max-width:560px){.wfig{width:52vw}}

/* ░ CLOSE ░ */
.end{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(20px,3vh,36px)}
.end>*:not(.atmos){position:relative;z-index:1}   /* content above the drifting atmosphere */
.end__eye{position:relative;width:clamp(64px,11vw,120px);aspect-ratio:1;color:var(--sand);opacity:.95}
.end__eye::after{content:"";position:absolute;inset:-42%;z-index:-1;border-radius:50%;background:radial-gradient(circle,var(--gold-soft),transparent 60%);opacity:.5;animation:glowpulse 6s ease-in-out infinite}  /* the eye, fully lit — it remained (bookends the intro's resolve) */
.reduce .end__eye::after{animation:none}
.end__pre{font-size:clamp(1rem,.95rem + .3vw,1.24rem);color:var(--ink-2)}
.end__big{font-family:var(--f-disp);font-weight:310;font-size:clamp(2.4rem,1.3rem + 5.4vw,6.4rem);line-height:1;letter-spacing:-.025em;color:var(--ink)}
.end__foot{display:flex;flex-direction:column;gap:1em;margin-top:clamp(26px,5vh,56px)}
.end__credit{font-size:.84rem;letter-spacing:.04em;color:var(--ink-2)}
.end__credit a{color:var(--ink);border-bottom:1px solid var(--gold);padding:8px 0 2px;display:inline-block}
.end__note{font-size:.7rem;line-height:1.5;color:var(--dim);max-width:40ch;margin-inline:auto}

/* ============================================================
   TOUCH performance profile — keep the experience, cut the always-on GPU work that lagged / froze mobile scroll
   (full-screen soft-light grain, per-frame blur develops, drifting screen-blend mist all re-composite on every scroll frame)
   ============================================================ */
.is-touch .grain{animation:none;mix-blend-mode:normal;opacity:.05}                       /* no full-screen blend re-composite while scrolling */
.is-touch .atmos{animation:none}                                                         /* static mist — no per-frame blend recompute */
.is-touch [data-develop]{will-change:auto;filter:blur(calc((1 - var(--p)) * 5px)) brightness(calc(.72 + var(--p) * .28))}  /* lighter develop — far cheaper to paint */
.is-touch .creed__eye{filter:none;will-change:auto}                                      /* the huge blurred philosophy eye was very expensive on mobile */

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .intro__cue i{animation:none}
  .intro__eye{filter:none;opacity:1;transform:none}
  .intro__eye::after{animation:none}
  .intro__line span{opacity:1;transform:none;filter:none}
  *{transition-duration:.001ms !important;transition-delay:0s !important}
}