/* ==========================================================================
   site.css: lorenamaruch.com, mobile v1 (build spec revision 2)

   Order: tokens, @font-face, base, lenis, type, components, then one block per
   section, each fenced by   / * === section: <name> === * /  …  / * === /section: <name> === * /
   (names: chrome, hero, instagram, about, content, numbers, brands, gallery, contact).
   Section builders edit only their own blocks here, plus css/hero.css, css/content.css,
   css/proof.css (loaded after this file). Conventions: docs/build-foundation.md.

   CSS defaults are the STATIC, FINAL layout (no JS, reduced motion, CDN failure).
   Every pre-animation state is scoped under .motion or set by JS just before use.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens (§2) */
:root{
  color-scheme: light;
  /* client-approved palette */
  --vanilla:#F1EADA; --sand:#CEC1A8; --tobacco:#B59E7D; --mountain:#AAA396;
  --mahogany:#584738; --mahogany-deep:#4D342D; --moss:#6A6A53;

  /* light roles */
  --bg:        var(--vanilla);
  --surface:   #E6DECB;                 /* Sand 30% over Vanilla: brands band, chips, gallery scrub end */
  --ink:       var(--mahogany);
  --ink-strong:var(--mahogany-deep);
  --muted:     var(--moss);             /* captions, only on --bg */
  --line:      rgba(88,71,56,.18);      /* hairlines, decorative */
  --accent:    var(--tobacco);          /* rules, icons, highlight blocks, washes: never text on light */
  --wash:      var(--sand);             /* image-curtain wash on light sections */

  /* dark roles (hero end, Instagram block, menu, contact) */
  --bg-dark:        var(--mahogany-deep);
  --ink-on-dark:    var(--vanilla);
  --muted-on-dark:  var(--sand);
  --accent-on-dark: var(--tobacco);     /* large text only (>= 24 px) */
  --line-on-dark:   rgba(241,234,218,.2);
  --wash-on-dark:   var(--tobacco);

  /* type (Type §6) */
  --font-sans:  "LM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "LM Serif", "Iowan Old Style", Georgia, serif;   /* "the-seasons" leads once loaded (.has-seasons) */
  /* lockups + statement: block faces (below), then a system condensed face; The Seasons (Pages) blocks too */
  --font-sans-lockup:  "LM Sans Lockup", "Avenir Next Condensed", "sans-serif-condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-serif-lockup: "the-seasons", "LM Serif", "Iowan Old Style", Georgia, serif;
  --fs-display: clamp(3.75rem, 19vw, 7.5rem);       /* 74px  hero lockup */
  --fs-h2:      clamp(2.375rem, 11.6vw, 5rem);      /* 45px  section lockup */
  --fs-h3:      clamp(1.625rem, 7.4vw, 2.5rem);     /* 29px  chapter lockup */
  --fs-statement: clamp(1.75rem, 8.6vw, 3.25rem);   /* 33.5px  About statement */
  --fs-number:  clamp(3.25rem, 16.4vw, 6.5rem);     /* 64px  stat numerals */
  --fs-intro:   clamp(1.3125rem, 5.8vw, 1.875rem);  /* 22.6px serif intro */
  --fs-body:    clamp(0.9375rem, 3.9vw, 1.0625rem); /* 15.2px */
  --fs-caption: clamp(0.75rem, 3.1vw, 0.875rem);    /* 12.1px */
  --fs-eyebrow: clamp(0.6875rem, 2.8vw, 0.8125rem); /* 10.9px */
  --sans-lockup-wght: 480;    /* open question 14: 480 = current light feminine version; ~650 = closer to the reference's bold */

  /* spacing, layout */
  --gutter: 16px;
  --pad-x-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-x-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-4xl:96px;
  --section-pad: clamp(88px, 24vw, 160px);        /* 94px at 390, used as padding-block */
  --content-max: 640px;                           /* column cap on wide screens */
  --header-h: 64px;
  --anchor-offset: calc(var(--header-h) + 8px + env(safe-area-inset-top, 0px));

  /* radii */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-photo: 10px;
  --radius-card: 28px;
  --radius-shot: 26px;
  --radius-panel: 32px;
  --radius-pill: 999px;

  /* shadows */
  --shadow-shot:
    0 0 0 1px rgba(64,44,22,.06), 0 1px 1px rgba(64,44,22,.04),
    0 2px 4px -1px rgba(64,44,22,.05), 0 6px 12px -3px rgba(64,44,22,.06),
    0 14px 28px -6px rgba(64,44,22,.08), 0 32px 64px -14px rgba(64,44,22,.14);
  --shadow-card: 0 24px 48px -26px rgba(77,52,45,.55);
  --shadow-soft: 0 10px 30px -18px rgba(77,52,45,.35);

  /* z-index */
  --z-card-max: 10; --z-header: 50; --z-menu: 60; --z-toast: 70;

  /* motion (§2.4) */
  --ease-default: cubic-bezier(.65,.05,0,1);
  --dur-default: .75s;
  --ease-out:     cubic-bezier(.25,.46,.45,.94);
  --ease-out-3:   cubic-bezier(.215,.61,.355,1);
  --ease-in-out:  cubic-bezier(.455,.03,.515,.955);
  --ease-expo-out:cubic-bezier(.16,1,.3,1);
  --ease-back:    cubic-bezier(.34,1.36,.64,1);
}
.on-dark{ --shadow-shot: 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px -16px rgba(0,0,0,.45), 0 40px 80px -30px rgba(0,0,0,.5); }

/* Dark scope: role tokens flip, so primitives (.t-lockup, .t-caption, …) read correctly on dark. */
.on-dark{
  --bg: var(--bg-dark);
  --ink: var(--ink-on-dark);
  --ink-strong: var(--vanilla);
  --muted: var(--muted-on-dark);
  --line: var(--line-on-dark);
  --wash: var(--wash-on-dark);
  background: var(--bg);
  color: var(--ink);
}

/* ------------------------------------------------------------ @font-face (Type §5) */
@font-face {
  font-family: "LM Sans";              /* Mona Sans, Latin subset, renamed (OFL RFN "Mona") */
  src: url("../assets/fonts/lm-sans-var-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LM Serif";             /* roman: Gilda Display, renamed (OFL RFN "Gilda") */
  src: url("../assets/fonts/lm-display-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LM Serif";             /* italic: EB Garamond Italic 400 (swash caps via "swsh") */
  src: url("../assets/fonts/eb-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;                 /* lockup serif lines: see "LM Sans Lockup"; the running italics sit below the fold */
  size-adjust: 112%;                   /* optically matches The Seasons Italic / the roman */
}
/* LM Sans again with font-display:block, for the lockups and the statement: blank while loading (≤ 3 s), never a
   wide fallback that snaps narrow (hero "LORENA" 289 → 195 px). Header, eyebrows and body keep the swap face. */
@font-face {
  font-family: "LM Sans Lockup";
  src: url("../assets/fonts/lm-sans-var-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: block;
}
/* The Seasons (Adobe kit, Pages only, font-display:auto) leads the running serif once site.js has loaded it; no JS: at once */
html.has-seasons{ --font-serif: "the-seasons", "LM Serif", "Iowan Old Style", Georgia, serif; }
@media (scripting: none){ :root{ --font-serif: "the-seasons", "LM Serif", "Iowan Old Style", Georgia, serif; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background-color: var(--bg);
  scroll-behavior: auto;
  overflow-x: clip;
}
body{
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 380;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.site{ background-color: var(--bg); color: var(--ink); }
img, svg, video{ max-width: 100%; }
img{ display: block; height: auto; }
figure{ margin: 0; }
button{ font: inherit; color: inherit; }
a{ color: inherit; }
::selection{ background: var(--mahogany); color: var(--vanilla); }
:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }
main [id], footer[id]{ scroll-margin-top: var(--anchor-offset); }

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

/* ------------------------------------------------------------------ lenis (§3.2, inlined; lenis.css is not linked) */
html.lenis, html.lenis body { height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow:clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical] { overscroll-behavior:contain; }
/* horizontal scrollers (rails, fan) contain the x axis only: a vertical swipe that starts on one must still
   scroll the page (native touch scrolling on iOS; overflow-x:auto makes a rail a y scroll container too) */
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior-x:contain; overscroll-behavior-y:auto; }
html.lenis{ scroll-behavior: auto; scrollbar-width: none; }
html.lenis::-webkit-scrollbar, html.lenis body::-webkit-scrollbar{ display: none; }

/* ------------------------------------------------------------------ type (Type §6, verbatim + weight token §2.2) */
.t-lockup {                 /* interleaved heading: sans caps line + serif italic line */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: inherit;
  color: var(--ink);
}
.t-lockup--display { font-size: var(--fs-display); }
.t-lockup--sm { font-size: var(--fs-h3); }
.t-lockup--start { align-items: flex-start; text-align: left; }
.t-lockup--offset { align-items: flex-start; text-align: left; }      /* media-kit homage */
.t-lockup--offset .t-serif { align-self: flex-end; padding-right: .04em; margin-top: -.2em; }

.t-sans {                   /* the "bold" line, feminised: medium weight, narrow, airy */
  display: block;
  font-family: var(--font-sans-lockup);
  font-weight: var(--sans-lockup-wght);
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: .86;
}
.t-serif {                  /* the accent line: swash italic, sentence case */
  display: block;
  font-family: var(--font-serif-lockup);
  font-style: italic;
  font-weight: 400;
  font-feature-settings: "swsh" 1, "liga" 1;
  letter-spacing: -0.012em;
  line-height: .98;
  margin-top: -.06em;       /* tuck under the caps: the swash cap kisses the line above */
}
.t-lockup--display .t-sans { font-weight: calc(var(--sans-lockup-wght) - 40); font-stretch: 80%; letter-spacing: -0.015em; }

.t-eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 520;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.2;
  color: var(--ink);
}
.t-intro {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-intro);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.t-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 380;
  font-stretch: 100%;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: pretty;
}
.t-caption {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 420;
  font-stretch: 100%;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--muted);
}
.t-number {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-number);
  font-weight: 300;
  font-stretch: 76%;
  line-height: .9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.t-number .u {              /* unit: K / M / % in the serif italic */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .9em;
  letter-spacing: 0;
  margin-left: .04em;
}
em.t-accent, .t-accent {    /* inline accent words inside sans or serif copy */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.04em;
  letter-spacing: 0;
  text-transform: none;
}
.t-intro .t-accent { font-size: 1em; }
.t-statement {              /* §2.2: .t-sans at --fs-statement, caps, .t-accent words inside (no swash) */
  margin: 0;
  font-family: var(--font-sans-lockup);
  font-size: var(--fs-statement);
  font-weight: calc(var(--sans-lockup-wght) - 40);
  font-stretch: 80%;
  line-height: .95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------------ components */
.wrap{ width:100%; max-width:calc(var(--content-max) + 32px); margin-inline:auto; padding-left:var(--pad-x-l); padding-right:var(--pad-x-r); }

.skip{
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: var(--pad-x-l);
  z-index: calc(var(--z-toast) + 1);
  display: inline-flex; align-items: center; min-height: 44px;   /* tap target (§8.2) */
  padding: 0 18px; border-radius: var(--radius-pill);
  background: var(--mahogany); color: var(--vanilla);
  font: 520 12px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible{ transform: none; }

/* pill button / link (44 px tall) */
.pill{
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; padding: 0 18px;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  background: none; color: inherit; cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: 520; font-stretch: 100%;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1; text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-default) var(--ease-default), color var(--dur-default) var(--ease-default), border-color var(--dur-default) var(--ease-default);
}
.pill--line{ border-color: color-mix(in srgb, currentColor 40%, transparent); }
@media (hover:hover) and (pointer:fine){
  .pill:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
}

/* text link with arrow, eyebrow style, 44 px hit area */
.link-arrow{
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 520; font-stretch: 100%;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.2;
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .55em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.link-arrow span{ display: inline-block; text-decoration: none; transition: transform var(--dur-default) var(--ease-default); }
@media (hover:hover) and (pointer:fine){ .link-arrow:hover span{ transform: translate(2px,-2px); } }

/* round icon button (44 x 44) */
.icon-btn{
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  font: 400 18px/1 var(--font-sans);
}

/* editorial photo frame (soft squared, Lando §4): img fills it; parallax/curtain hooks */
.frame{
  position: relative; overflow: hidden;
  aspect-ratio: var(--ar, 4/5);
  border-radius: var(--radius-photo);
  background: var(--sand);
  box-shadow: var(--shadow-soft);
}
.frame > img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* signature SVG: Lorena's filled artwork in currentColor (.ink); js/signature.js writes it through its mask.
   Nothing here may stroke the ink or the pens (their widths are in viewBox units; never vector-effect). */
.sig{ display: block; height: auto; }

/* ------------------------------------------------- reveal helpers (states set by js/reveals.js while armed) */
.rv-hl{ display: inline-block; position: relative; }              /* one highlighted line (inline so the block hugs the text) */
.rv-hl__block{ position: absolute; inset: 0; background: var(--accent); transform-origin: right center; pointer-events: none; }
.rv-wash{ position: absolute; inset: 0; z-index: 5; background: var(--wash); pointer-events: none; }
.rv-line{ display: block; }                                       /* inner line of an oval-revealed lockup line */
.motion [data-parallax] > img{ height: calc(100% + 48px); }       /* inner parallax: 48 px taller, y 0 -> -48 */

/* ======================================================================== */
/* === section: chrome === */
/* header (fixed), menu, toast, scroll indicator (§4.0) */
.hdr{
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  padding: env(safe-area-inset-top, 0px) var(--pad-x-r) 0 var(--pad-x-l);
  color: var(--mahogany);
  background: rgba(241,234,218,.85);
  background: color-mix(in srgb, var(--vanilla) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transition: color var(--dur-default) var(--ease-default), background-color var(--dur-default) var(--ease-default),
              transform .45s var(--ease-default);
}
/* with JS the bar starts clear with Vanilla ink (the cover is dark under its scrim) until ui.js sets data-nav */
@media (scripting: enabled){
  .hdr:not([data-nav]){ color: var(--vanilla); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hdr[data-nav="dark"]{
  color: var(--vanilla);
  background: rgba(77,52,45,.85);
  background: color-mix(in srgb, var(--bg-dark) 85%, transparent);
}
.hdr.hdr--clear{ background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr.hdr--quick{ transition-duration: .15s, .15s, .45s; }   /* inside the hero: the theme follows the scrub closely */
.hdr.hdr--boot{ transition: none !important; }            /* ui.js: the first theme applies instantly */
.hdr.is-hidden{ transform: translateY(-100%); }
.hdr__bar{
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hdr__brand, .hdr__contact, .hdr__menu{ pointer-events: auto; }
.hdr__brand{
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 520; font-stretch: 100%;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.hdr__actions{ display: flex; align-items: center; gap: 8px; }
.hdr__contact{
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 12px; font-weight: 520; font-stretch: 100%;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  color: inherit; text-decoration: none;
}
.hdr__menu{
  position: relative; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  border: 0; background: none; color: inherit; cursor: pointer;
}
.hdr__menu-lines{ position: absolute; left: 11px; right: 11px; top: 50%; height: 0; }
.hdr__menu-lines i{
  position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform .5s var(--ease-default);
}
.hdr__menu-lines i:first-child{ transform: translateY(-4px); }
.hdr__menu-lines i:last-child{ transform: translateY(3.5px); }
.hdr__menu[aria-expanded="true"] .hdr__menu-lines i:first-child{ transform: translateY(0) rotate(45deg); }
.hdr__menu[aria-expanded="true"] .hdr__menu-lines i:last-child{ transform: translateY(0) rotate(-45deg); }
/* while the menu is open the bar sits above it (its button is the close control) */
.hdr.is-menu-open{ z-index: calc(var(--z-menu) + 1); color: var(--vanilla); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }

.menu{
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 24px) 0 calc(env(safe-area-inset-bottom, 0px) + 32px);
  background: var(--bg-dark); color: var(--ink-on-dark);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
  clip-path: ellipse(120% 0% at 50% 0%);
}
.menu.is-open{ visibility: visible; clip-path: none; }
.menu__list{ list-style: none; margin: 0; padding: 0; }
.menu__list li + li{ border-top: 1px solid var(--line-on-dark); }
.menu__link{
  display: flex; align-items: center; justify-content: center; min-height: 64px;
  font-size: var(--fs-h3); color: var(--vanilla); text-decoration: none;
}
.menu__link .t-serif{ margin-top: 0; padding-bottom: .06em; }
.menu__foot{ display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.menu__foot .t-eyebrow{ color: var(--sand); }

.toast{
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast);
  max-width: calc(100vw - 32px);
  padding: 14px 22px; border-radius: var(--radius-pill);
  background: var(--mahogany); color: var(--vanilla); box-shadow: var(--shadow-soft);
  font-family: var(--font-sans); font-size: 12px; font-weight: 520; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-default);
}
.toast:empty{ visibility: hidden; }
.toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

.scrollbar{                                    /* Lando §7.6: created by ui.js in motion mode only */
  position: fixed; right: max(4px, env(safe-area-inset-right, 0px)); top: 12svh; height: 76svh; width: 3px;
  z-index: var(--z-header); pointer-events: none; mix-blend-mode: difference; opacity: 0;
}
.scrollbar__thumb{ position: absolute; left: 0; top: 0; width: 100%; height: 15%; border-radius: 3px; background: rgba(255,255,255,.75); }

@media (prefers-reduced-motion: reduce){
  .hdr, .hdr__menu-lines i, .toast{ transition: none; }
  .scrollbar{ display: none; }
}
/* === /section: chrome === */

/* ======================================================================== */
/* === section: hero === */
/* Static resting layout (§4.1, revised by client feedback: no arch). The cover fills the first screen
   edge to edge; the lockup sits on a soft Mahogany-deep scrim in Vanilla. Motion-only rules (220svh,
   sticky, the card shrink, signature, handle, theme zones) live in css/hero.css. */
.hero{ --hero-bg: var(--vanilla); background: var(--hero-bg); position:relative;
       margin-top: calc(-1 * env(safe-area-inset-top, 0px)); }
.hero__stage{ position:relative; height:100svh; overflow:hidden; overflow:clip; background: var(--hero-bg);
  --hero-copy-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 28px);
  /* Cover framing, derived from the copy at any viewport (cover.jpg is 2:3; its eye line is at .387 of
     its height, the eye midpoint at .544 of its width). The image box is sized so the eye line sits at
     least 56 px under the lockup (short phones zoom in a little), it always covers the stage, and the
     eye midpoint sits on the centre line. 390 x 844: 844 tall, eyes at 327; 664 / 700: 798, eyes at 309;
     375 x 548: 785, eyes at 304 (lockup bottom ≈ 249 / 248). */
  --lockup-bottom: calc(var(--hero-copy-top) + 1.2 * var(--fs-eyebrow) + 12px + 1.84 * var(--fs-display));
  --eye-y: max(calc(var(--lockup-bottom) + 56px), 42svh);
  --img-h: max(100svh, 150vw, calc((var(--lockup-bottom) + 56px) / .387));
  --img-w: calc(var(--img-h) * 2 / 3);
  --img-x: clamp(calc(100vw - var(--img-w)), calc(50vw - .544 * var(--img-w)), 0px);
  --img-y: clamp(calc(100svh - var(--img-h)), calc(var(--eye-y) - .387 * var(--img-h)), 0px); }
.hero__copy{ position:relative; z-index:2; padding-top: var(--hero-copy-top); text-align:center; color:var(--vanilla); }
.hero__copy .t-eyebrow{ margin:0 0 12px; color:var(--vanilla); }
.hero__copy .t-lockup{ color:var(--vanilla); text-shadow: 0 1px 22px rgba(77,52,45,.32); }
.hero__photo{ position:absolute; inset:0; z-index:1; transform-origin: 50% 40%; background: var(--mahogany); }  /* Vanilla copy reads before the image loads */
/* iris centres in cover.jpg (1600 x 2400): (759, 939) and (981, 919). Scaled about the stage centre. */
.hero__photo img{ position:absolute; left:var(--img-x); top:var(--img-y); width:var(--img-w); height:var(--img-h);
  max-width:none; object-fit:cover; transform-origin: calc(50vw - var(--img-x)) calc(50svh - var(--img-y));
  transform: scale(1.06); }   /* the scrub's start state, in both modes */
/* Scrim for the Vanilla copy, laid out from the same tokens as the copy (px, not % of the height): a light
   wash from the top (.36, gone just under the lockup) plus a tight, soft oval behind the serif line, where it
   crosses the hair. Measured over the real pixels (5th percentile, 320-430 px): header ink >= 5.4, eyebrow
   >= 4.7, "LORENA" >= 4.5, "Maruch" >= 3.0 (large text). */
.hero__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 54% 88px at 50% calc(var(--lockup-bottom) - 30px), rgba(77,52,45,.54), rgba(77,52,45,0)),
    linear-gradient(to bottom, rgba(77,52,45,.36) 0px, rgba(77,52,45,.34) calc(var(--hero-copy-top) + 40px),
                    rgba(77,52,45,.2) calc(var(--lockup-bottom) - 40px), rgba(77,52,45,0) calc(var(--lockup-bottom) + 40px)); }
/* Motion only (hero.js fades it in from 0.4 H): darkens the card's lower half, where the Vanilla signature
   crosses the cream robe; the eye line (≈ 41% of the stage) keeps a light .12 veil. */
.hero__shade{ position:absolute; inset:0; opacity:0; pointer-events:none;
  background: linear-gradient(to bottom, rgba(77,52,45,.12) 0%, rgba(77,52,45,.12) 46%, rgba(77,52,45,.58) 64%, rgba(77,52,45,.62) 80%); }
.hero__light-zone, .hero__dark-zone, .sig--hero, .hero__handle{ display:none; }
/* === /section: hero === */

/* ======================================================================== */
/* === section: instagram === */
.ig{ position: relative; background: var(--bg-dark); padding-block: 24px var(--section-pad); }
.ig__inner{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.ig .ig__eyebrow{ color: var(--muted-on-dark); }
.ig__screen{ width: 100%; max-width: 430px; margin-top: 28px; --ig-shot-width: 430px; }
.ig__fallback{ margin-top: 16px; color: var(--sand); }
.ig__screen[data-ig-rendered] ~ .ig__fallback{ display: none; }
.ig__intro{ margin-top: 48px; max-width: 15em; color: var(--vanilla); }
.ig__follow{ margin-top: 20px; color: var(--vanilla); }
/* reserve each screen's box before render (no layout shift) */
[data-ig-screen]:not([data-ig-rendered=""]){ display: block; width: 100%; max-width: var(--ig-shot-width, 430px); aspect-ratio: 358/364; border-radius: var(--radius-shot); }
[data-ig-screen="profile"]:not([data-ig-rendered=""]){ aspect-ratio: 358/280; background: rgba(241,234,218,.06); }
[data-ig-screen="summary"]:not([data-ig-rendered=""]){ aspect-ratio: 358/364; }
[data-ig-screen="performance"]:not([data-ig-rendered=""]){ aspect-ratio: 358/747; }
[data-ig-screen="audience"]:not([data-ig-rendered=""]){ aspect-ratio: 358/780; }
/* no JS: the screens cannot render, so drop their empty boxes (the fallback line and the stats stay) */
html:not(.js) [data-ig-screen]{ display: none; }
/* === /section: instagram === */

/* ======================================================================== */
/* === section: about === */
.about{ position: relative; background: var(--bg); padding-block: var(--space-2xl) var(--section-pad); }
.about__inner{ position: relative; display: flex; flex-direction: column; }
.about__eyebrow{ margin-bottom: 20px; }
.about .t-lockup{ position: relative; z-index: 2; }
.about .t-lockup--offset .t-serif{ padding-right: calc(.04em + 6px); }   /* not on the photo's hard right edge */
.about__photo{ width: 78%; margin: 10px 0 0 auto; aspect-ratio: 4/5; }   /* clear of the italic: the warm wood wall would swallow it */
.about__bio{ max-width: 32ch; margin-top: 40px; }
.about__roles{ margin-top: 16px; color: var(--ink); }
.about__statement{ margin-top: 64px; text-wrap: balance; }   /* no lone last word ("STYLE.") at 320–430 */
/* === /section: about === */

/* ======================================================================== */
/* === section: content === */
.content{ position: relative; background: var(--bg); padding-block: var(--section-pad) var(--space-4xl); overflow-x: hidden; overflow-x: clip; }   /* hidden first: Safari < 16 has no clip */

/* fan intro */
.fan-intro{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.fan__icons{ position: relative; width: 40px; height: 40px; margin-bottom: 24px; color: var(--accent); }
.fan__icon{ position: absolute; inset: 0; width: 40px; height: 40px; opacity: 0; }
.fan__icon:first-child{ opacity: 1; }
.fan__hint{ margin-top: 18px; }

/* the fan (§4.4a): one unit --u, cards placed in their slots by custom properties */
.fan{
  --r: clamp(8.9px, 2.7778vw, 13.33px);
  --fan-k: 1.18;
  --u: calc(var(--r) * var(--fan-k));
  --card-w: calc(var(--u) * 14);
  --card-h: calc(var(--card-w) * 16 / 9);
  position: relative; height: calc(var(--u) * 36); margin-top: 20px;
  touch-action: pan-y;
}
@media (min-width: 992px){ .fan{ --fan-k: 1; --card-w: calc(var(--u) * 20); height: calc(var(--u) * 40); margin-top: 48px; } }   /* Lando's desktop card: 20 rem */
.fan__probe{ position: absolute; left: 0; top: 0; width: var(--u); height: 0; visibility: hidden; pointer-events: none; }
.fan:focus-visible{ outline-offset: -3px; }
.fan__noscript{ margin: 0; text-align: center; }
html:not(.js) .fan{ height: auto; padding-block: 40px 24px; }
html:not(.js) .fan__hint{ display: none; }
.fan .fan__card{
  --x: 0; --y: 0; --rot: 0deg; --s: 1; --z: 1;
  position: absolute; left: calc(50% - var(--card-w) / 2); top: calc(50% - var(--card-h) / 2);
  width: var(--card-w); aspect-ratio: 9/16;
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) rotate(var(--rot)) scale(var(--s));
  z-index: var(--z);
  backface-visibility: hidden;   /* no permanent will-change: GSAP promotes a card only while it tweens (force3D auto) */
}
.fan__hit{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.fan__caption{ display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 8px; }
.fan__cat{ color: var(--muted); }
.fan__title{ margin-top: 8px; }
.fan__more{ margin-top: 4px; }
.fan__controls{ display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 12px; }
.fan__count{ min-width: 6ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }

/* video card (static look; behaviour in js/video.js, details in css/content.css) */
.vcard{ position: relative; margin: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); isolation: isolate; }
.vcard__media{
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit;
  clip-path: inset(0 round var(--radius-card));
  background: var(--mahogany);
}
.vcard__poster, .vcard__video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__poster{ z-index: 0; }
.vcard__video{ z-index: 1; opacity: 0; }            /* the footage fades in over the poster on its first `playing` (§6.3); the poster stays at opacity 1 below */
.vcard.is-live .vcard__video{ opacity: 1; transition: opacity .45s var(--ease-out); }

/* chapters (§4.4b) */
.chapter{ padding-block: var(--space-4xl) 0; }
.chapter__head{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.chapter__sub{ max-width: 30ch; text-wrap: balance; }
.chapter__feature{ display: flex; flex-direction: column; align-items: center; margin-top: 32px; }
.vcard--feature{ width: min(78vw, 320px); aspect-ratio: 9/16; }
.chapter__caption{ margin-top: 18px; text-align: center; }
.chapter__title{ font-size: 18px; }
.chapter__meta{ margin-top: 4px; }
.rail{
  display: flex; gap: 10px; margin-top: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 6px var(--pad-x-r) 12px max(var(--pad-x-l), calc(50% - var(--content-max) / 2));
  scroll-padding-inline: max(var(--pad-x-l), calc(50% - var(--content-max) / 2));
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.rail::-webkit-scrollbar{ display: none; }
.rail__thumb{
  position: relative; flex: 0 0 120px; width: 120px; height: 213px; padding: 0; border: 0;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--sand); cursor: pointer;
  scroll-snap-align: start;
}
.rail__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.rail__thumb::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.rail__thumb[aria-current="true"]::after{ box-shadow: inset 0 0 0 2px var(--mahogany), inset 0 0 0 4px var(--vanilla); }
.rail__thumb:focus-visible{ outline-offset: 2px; }
.rail__play{ position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; color: var(--vanilla); background: rgba(77,52,45,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.rail__play svg{ width: 12px; height: 12px; margin-left: 1px; }

/* CHANEL spotlight (client, batch 2): after the Fashion rail, an editorial pair; the second frame overlaps the
   first's lower right, cut out by a Vanilla ring. Curtain (staggered .12 s) + inner parallax as in the gallery.
   A spread, not a chapter footnote: section-size lockup (--fs-h2), more air above, a Tobacco hairline over the
   eyebrow. A plain block (no region landmark); its h4 sits under the Fashion h3. */
.spotlight{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-top: 120px; }
.spotlight::before{ content: ""; width: 48px; height: 1px; margin-bottom: 6px; background: var(--accent); }
/* The Seasons italic: the degree sign touches the N's swash ("N5" at 1x); EB Garamond needs nothing */
.has-seasons .spotlight .deg{ margin-left: .12em; }
.spotlight__sub{ max-width: 30ch; }
.spotlight__pair{ width: 100%; max-width: 520px; margin-top: 18px; }
.spotlight__item--a{ width: 70%; }
.spotlight__item--b{ width: 58%; margin: -28% 0 0 auto; }
.spotlight__item--b .frame{ box-shadow: 0 0 0 6px var(--bg), var(--shadow-soft); }
/* its <img>s load through video.js's lookahead (data-src); without JS the <noscript> copy shows instead */
html:not(.js) .spotlight .frame > img[data-src]{ display: none; }
.spotlight .frame > noscript > img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* === /section: content === */

/* ======================================================================== */
/* === section: numbers === */
.numbers{ background: var(--bg); padding-block: var(--section-pad); }
.numbers > .wrap{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.numbers__eyebrow{ margin-bottom: 20px; }
.stats{ list-style: none; margin: 56px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.stat{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stat .t-number{ color: var(--ink); }
/* The three recreated screens: one snap rail (a screen plus a peek of the next), full-bleed like the chapter rails
   (outside .wrap; the first screen lines up with the content column), with proof.js's tab pills above it (one
   screen high instead of three; JS-only, like the screens). */
.numbers{ --rail-start: max(var(--pad-x-l), calc(50% - var(--content-max) / 2)); }
.numbers__tabs{ display: flex; justify-content: center; gap: 6px; margin-top: var(--space-3xl); padding-inline: var(--pad-x-l) var(--pad-x-r); }
.numbers__tabs .pill{ position: relative; min-height: 40px; padding: 0 10px; font-size: 11px; letter-spacing: .08em; border-color: var(--line); }   /* fits 288 px (320 wide) */
.numbers__tabs .pill::after{ content: ""; position: absolute; inset: -2px 0; }   /* 44 px hit area */
.numbers__tabs .pill[aria-current="true"]{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.numbers__screens{ position: relative; margin-top: 24px;
  display: flex; align-items: flex-start; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 4px var(--pad-x-r) 24px var(--rail-start); scroll-padding-inline: var(--rail-start) var(--pad-x-r); }
.numbers__screens::-webkit-scrollbar{ display: none; }
@media (min-width: 700px){   /* wide screens peek more of the next screen: it fades out at the edge, like the chapter rails, while more
     follows; at the end of the rail (proof.js: .is-end) the 120 px fade slides off, so the last screen shows whole */
  .numbers__screens{
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent);
    -webkit-mask-size: calc(100% + 120px) 100%; mask-size: calc(100% + 120px) 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: -120px 0; mask-position: -120px 0;
    transition: -webkit-mask-position .45s var(--ease-out), mask-position .45s var(--ease-out); }
  .numbers__screens.is-end{ -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.numbers__screen{ position: relative; flex: 0 0 min(calc(100% - 28px), 400px); display: flex; flex-direction: column; align-items: center; gap: 16px; scroll-snap-align: start; container-type: inline-size; }
/* The two tall screens show their top cards and chart (118cqw: the first section ends there), with "Show the full
   screen" (proof.js) straddling the cut, so a cropped screen is barely taller than Home: no empty band under it. */
.numbers__screen.is-cropped [data-ig-screen]{ max-height: 118cqw; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent); mask-image: linear-gradient(#000 calc(100% - 20px), transparent); }
.numbers__more{ position: relative; z-index: 1; color: var(--ink); background: var(--bg); }   /* above the masked screen (masks do not stop hits) */
.numbers__screen.is-cropped .numbers__more{ margin-top: calc(-8px - 6cqw); }   /* straddles the cut, >= 10 px under the chart's date labels (they end 7.3cqw above it) at every width */
.numbers__screen figcaption{ color: var(--muted); }
.numbers__tabs ~ .numbers__screens figcaption{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the pills name them */
.numbers__screen [data-ig-screen]{ --ig-shot-width: 430px; }
.numbers__note{ margin-top: 48px; max-width: 32ch; }
html:not(.js) .numbers__screens{ display: none; }
/* === /section: numbers === */

/* ======================================================================== */
/* === section: brands === */
/* Default (static/reduced): one centred, wrapping grid of all 46 logos, duplicates hidden.
   js/brands.js adds .brands--marquee for the moving rows (css/proof.css). */
.brands{ --muted: var(--ink); background: var(--surface); padding-block: var(--section-pad); overflow-x: hidden; overflow-x: clip; }
.brands__head{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.brands__head .t-lockup{ margin-top: 20px; }
.brands__caption{ margin-top: 20px; max-width: 30ch; }
.brands__caption strong{ font-weight: 600; }
.brands__rows{ margin-top: 48px; padding-inline: var(--pad-x-l) var(--pad-x-r); display: flex; flex-direction: column; gap: 20px; }
.brands__list{ list-style: none; margin: 0 auto; padding: 0; max-width: calc(var(--content-max) + 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 28px; }
.brands__list[aria-hidden="true"]{ display: none; }
.brands__item{ display: flex; align-items: center; }
.brands__item img{ height: calc(44px * var(--scale, 1)); width: auto; max-width: none; }
.brands__foot{ display: flex; justify-content: center; margin-top: 32px; }
.motion .brands__rows:empty{ height: 248px; }    /* reserve the 3 × 72 + 2 × 16 marquee box until brands.js renders it (CLS) */
/* === /section: brands === */

/* ======================================================================== */
/* === section: gallery === */
.gallery{ --muted: var(--ink); position: relative; background-color: var(--bg); padding-block: var(--section-pad) calc(var(--section-pad) + 32px); }
.gallery > .wrap{ display: flex; flex-direction: column; }
.gallery > .wrap > .t-eyebrow{ text-align: center; margin-bottom: 20px; }
.gallery__group{ margin-top: var(--space-2xl); }
.gallery .t-lockup + .gallery__group{ margin-top: 56px; }
.gallery__pair{ display: flex; justify-content: space-between; align-items: flex-start; }
.gallery__item figcaption{ margin-bottom: 10px; color: var(--ink); text-wrap: balance; }
.gallery__item--single figcaption{ width: calc(100% / .74 * .87); }   /* spans from the frame's left edge to the column's */
.gallery__item--left figcaption{ width: calc(100% / .56); }            /* may span the pair: the right photo starts 80 px lower */
@media (max-width: 374px){ .gallery__item figcaption{ letter-spacing: .08em; } }   /* one line in the 40% column (115 px at 320) */
.gallery__item--left{ width: 56%; }
.gallery__item--right{ width: 40%; margin-top: 80px; }
.gallery__item--single{ width: 74%; margin: var(--space-2xl) auto 0; }
.gallery__line{ margin: 72px auto 8px; max-width: 14em; text-align: center; }
/* === /section: gallery === */

/* ======================================================================== */
/* === section: contact === */
.contact{
  position: relative; z-index: 1;
  background: var(--bg-dark);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  margin-top: -32px;
  padding-block: var(--section-pad) calc(32px + env(safe-area-inset-bottom, 0px));
  margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
}
.contact__inner{ display: flex; flex-direction: column; align-items: center; text-align: center; }
/* optional small card (§4.8): a signed print; the signature's first stroke crosses its lower edge */
.contact__card{ width: 136px; margin: 0 0 -20px; transform: rotate(-3deg); }
.contact__card .frame{ box-shadow: 0 22px 40px -20px rgba(0,0,0,.6); }
.contact .sig--footer{ position: relative; z-index: 1; width: 70%; max-width: 420px; color: var(--vanilla); margin-bottom: 48px; }
.contact .contact__eyebrow, .contact__label{ color: var(--muted-on-dark); }
.contact .t-lockup{ margin-top: 20px; }
.contact .t-lockup .t-serif{ color: var(--accent-on-dark); }     /* large text only (>= 24 px): 4.42:1 */
.contact__intro{ margin-top: 24px; max-width: 17em; color: var(--vanilla); }
.contact__rows{ list-style: none; margin: 56px 0 0; padding: 0; width: 100%; text-align: left; border-bottom: 1px solid var(--line-on-dark); }
.contact__row{ min-height: 64px; padding: 16px 0; border-top: 1px solid var(--line-on-dark); display: flex; flex-direction: column; gap: 8px; }
.contact__line{ display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.contact__value{
  font-family: var(--font-sans); font-size: 18px; font-weight: 380; line-height: 1.4;
  color: var(--vanilla); text-decoration: none; user-select: text; -webkit-user-select: text;
  overflow-wrap: anywhere;
}
a.contact__value{ display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }
a.contact__value span{ font-size: .8em; }
.contact__actions{ display: inline-flex; gap: 8px; }
.contact .pill--line{ color: var(--vanilla); border-color: rgba(241,234,218,.4); }
.contact__legal{
  width: 100%; margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  color: var(--muted-on-dark); text-align: left;
}
.contact__top{ display: inline-flex; align-items: center; gap: .35em; min-height: 44px; color: var(--muted-on-dark); text-decoration: none; }
@media (max-width: 380px){ .contact__actions{ margin-left: auto; } }   /* wrapped pills stay right-aligned, like the Email row's */
/* === /section: contact === */

/* ------------------------------------------------------------------ wide screens (desktop polish later; must not break) */
@media (min-width: 768px){
  .about__photo{ width: 70%; }
}