/* ============ INDEX — ASSEMBLY GLUE (v2) ============
   Loaded LAST, after the six section stylesheets. The sections were built
   as standalone pages, so several of them set their own body / :root /
   shared-class rules. This file reconciles exactly those collisions and
   nothing else — every section-scoped rule in the section files is left
   untouched, so the assembled page keeps visual parity with the approved
   standalone pages.

   Collisions reconciled here:
   1. body globals (footer.css paints the body dark-text; the page body
      is the hero's: near-black ground, paper text, Manrope).
   2. CSS variables that mean different things per section:
      --ink is DARK in hero/about/services but the light TEXT colour in
      work; --line / --cream / --cream-dim carry per-section tints.
      They are re-scoped onto each section element below.
   3. .kicker exists in work / about / services with three different
      designs (centred with two rules / left with one rule / plain).
   4. .glass::after: hero uses the mask-faded top light (the pill-nav
      corner fix); services + studio use the 42% wedge. Scoped per zone.
   5. .line: hero's overflow:hidden line-mask would clip About's
      statement lines (About only resets display). Reset for About.
   6. Reveal timing: work runs .9s / cubic-bezier(.22,.61,.36,1) against
      the shared .7s rule; mobile durations/steps restored per section.
   ============================================================ */

/* ---------- 1+2. page base + deterministic root ---------- */
:root{
  --bg:#060607;
  --ink:#0b0b0c;
  --paper:#f4f1ea;
  --paper-dim:rgba(244,241,234,.74);
  --paper-faint:rgba(244,241,234,.55);
  --gold:#c9a96a;
  --gold-soft:rgba(201,169,106,.55);
  --font-d:"Fraunces",Georgia,serif;
  --font-b:"Manrope",system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}

/* header + hero keep hero.css's dark --ink (button text on paper pills) */
.site-header,.hero{--ink:#0b0b0c}

/* ---------- 2. per-section variable scopes + inherited text colour ---------- */
.work{
  --ink:#F1EDFB; --ink-dim:#BDB5D6; --ink-faint:#A79FC4;
  --indigo:#141126; --deep:#0E0B1E; --deep-2:#0A0817; --violet:#8B7CF6;
  --line:rgba(255,255,255,.10);
  --shot-h:320px;
  color:#F1EDFB;
}
@media (max-width:1020px){ .work{--shot-h:280px} }
@media (max-width:768px){ .work{--shot-h:300px} }
@media (max-width:420px){ .work{--shot-h:260px} }

.about{
  --ink:#0B0A08; --char:#14110D;
  --cream:#EFE7D8; --cream-dim:#CFC5B2; --copper:#C9A96A;
  --line:rgba(239,231,216,.16);
  color:#EFE7D8;
}
.services-exp3{
  --cream:#EFE6D4; --cream-dim:#BFAF92; --copper:#C9A96A;
  --line:rgba(239,230,212,.14); --warm:#221C14;
  color:#EFE6D4;
}
.studio{color:#eef1f8}
.footer{color:#1d1710}

/* line-height parity: the hero page body runs 1.6, but the work / about /
   services / footer standalone bodies set no line-height (normal). Their
   multi-line text without its own line-height (work's .section-sub,
   footer's link columns, services' .process-head h3) must keep the
   standalone leading, so restore normal inside those sections. Studio's
   own body already runs 1.6 and the hero IS the page base: untouched. */
.work,.about,.services,.letters,.footer{line-height:normal}

/* ---------- 3. .kicker de-collision ---------- */
/* Work: centred, gold rules both sides, .32em tracking, no bottom margin */
.work .kicker{letter-spacing:.32em;margin-bottom:0}
.work .kicker::after{
  width:min(64px,14vw);
  background:linear-gradient(90deg,rgba(201,169,106,.65),transparent);
}
/* About: left-aligned flex row, its own bottom margin, rule only after */
.about .kicker{justify-content:flex-start;margin-bottom:clamp(20px,3vh,34px)}
.about .kicker::before{content:none}
/* Services: plain block kicker, no rules */
.services .kicker{display:block;margin-bottom:18px}
.services .kicker::before,.services .kicker::after{content:none}

/* ---------- 4b. .glass carries position:relative in services.css and
   studio.css; linked after hero.css, that demotes the header's pill nav
   and mobile panel from absolute to relative (the panel then inflates
   the fixed header in flow). Restore the header's absolute pieces. --- */
.site-header .pill-nav{position:absolute}
.site-header .mobile-panel{position:absolute}

/* ---------- 5. About statement lines are not hero line-masks ---------- */
.about-statement .line{overflow:visible;padding:0;margin:0}

/* ---------- 4. glass ::after per zone ---------- */
/* header + hero: full-height white layer faded out by a mask
   (identical box to the host, so the corners can never step) */
.site-header .glass::after,.hero .glass::after{
  inset:0;height:auto;border-radius:inherit;
  background:rgba(255,255,255,.13);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 55%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 55%);
}
/* services + studio: the original 42% top wedge, unmasked */
.services-exp3 .glass::after,.studio .glass::after{
  inset:0 0 auto 0;height:42%;
  border-radius:24px 24px 50% 50%/24px 24px 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
  -webkit-mask-image:none;mask-image:none;
}
/* no-backdrop-filter fallbacks, per zone (hero dark / services warm / studio blue) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header .glass,.hero .glass{background:rgba(6,6,7,.82)}
  .services-exp3 .glass{background:linear-gradient(155deg, rgba(38,32,24,.92), rgba(24,20,15,.88))}
  .studio .glass{background:rgba(16,24,48,.82)}
}

/* ---------- 6. reveal timing parity ---------- */
/* Work's reveals run longer than the shared rule */
.work [data-reveal]{transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
@media (max-width:768px){
  /* hero's mobile step shortens every reveal to 20px/.6s; restore the
     standalone per-section values where they differed */
  .js .hero [data-reveal],.js .site-header[data-reveal]{transition-duration:.6s}
  .js .about [data-reveal],.js .services [data-reveal]{transition-duration:.6s}
  .js .work [data-reveal]{transform:translateY(28px)}
  .js .studio [data-reveal],.js .footer [data-reveal]{
    transform:translateY(28px);transition-duration:.7s;
  }
}

/* ---------- assembly 2 pins: Services exp3 + FAQ Letters ---------- */
/* exp3's .halftone (masked, .07) would otherwise override About's
   (unmasked, .18) page-wide; pin About's approved values back. */
.about .halftone{
  inset:-6% 0;opacity:.18;z-index:auto;
  -webkit-mask-image:none;mask-image:none;
}
/* FAQ letters carry the section's own plum text colour */
.letters{color:#F5EFE0}