/* ============================================================
   Stacey Vanthuyne — shared site system
   Ported from brand-guide-v4. Tagline: Build a Better View.
   Load order: fonts.css -> site.css -> page <style>
   ============================================================ */

/* ---------- 1. PALETTE ---------- */
:root{
  --gold:#B8924A; --gold-l:#D4AD6A; --gold-d:#9A7836;
  --gold-cream:#8A6B2E;              /* only gold allowed as text on cream (5.4:1) */
  --copper:#C17F59;
  --hot:#FFEDC7;

  --black:#141210; --black2:#1C1916; --ink:#211E1A; --char:#2C2C2C;
  --cream:#F5F0E8; --stone:#8A8178;
  --read-light:#3a3530;

  --pos:#3E7A52; --neg:#A8472F;

  /* gold alpha ladder — six steps, no others */
  --a1:.06; --a2:.12; --a3:.18; --a4:.28; --a5:.45; --a6:.62;

  /* type */
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Figtree',system-ui,-apple-system,sans-serif;
  --label:'Jost',system-ui,sans-serif;

  --t-d1:clamp(3.2rem,8.5vw,7rem);
  --t-d2:clamp(2.6rem,6vw,5rem);
  --t-h2:clamp(2.1rem,5vw,3.6rem);
  --t-h3:clamp(1.35rem,2.3vw,1.85rem);
  --t-quote:clamp(1.5rem,3.6vw,2.5rem);
  --t-anchor:clamp(1.3rem,3vw,2.1rem);
  --t-lead:clamp(1.1rem,1.6vw,1.35rem);
  --t-body:17px;
  --t-s1:.95rem; --t-s2:.88rem; --t-s3:.8rem;

  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. SURFACE TOKENS ---------- */
body,.s-dark{
  --bg:var(--black); --tx:var(--cream); --ti:var(--cream); --ac:var(--gold);
  --mu:rgba(245,240,232,.6); --cb:rgba(184,146,74,.06); --bd:rgba(245,240,232,.12);
}
.s-deep{
  --bg:var(--black2); --tx:var(--cream); --ti:var(--cream); --ac:var(--gold);
  --mu:rgba(245,240,232,.58); --cb:rgba(184,146,74,.07); --bd:rgba(245,240,232,.13);
}
.s-light{
  --bg:var(--cream); --tx:var(--read-light); --ti:var(--ink); --ac:var(--gold-cream);
  --mu:rgba(44,44,44,.62); --cb:#fff; --bd:rgba(44,44,44,.1);
}
section{background:var(--bg);color:var(--tx);position:relative}

/* ---------- 3. BASE ---------- */
body{
  background:var(--black);color:var(--cream);
  font-family:var(--body);font-size:var(--t-body);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display);color:var(--ti);font-weight:500}
h1{font-size:var(--t-d2);line-height:1.05;font-weight:300}
h2{font-size:var(--t-h2);line-height:1.07;letter-spacing:-.005em}
h3{font-size:var(--t-h3);line-height:1.07}
p{max-width:68ch}
em,i{font-family:var(--display);font-style:italic}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,48px)}

/* ---------- 4. LABELS ---------- */
.eyebrow{
  font-family:var(--label);font-size:11.5px;font-weight:500;
  letter-spacing:3.5px;text-transform:uppercase;color:var(--ac);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--ac);opacity:.8;flex:none}
.eyebrow--center{justify-content:center}

.lbl{font-family:var(--label);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ac)}
.chip{font-family:var(--label);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mu);
  border:1px solid var(--bd);border-radius:999px;padding:7px 14px;display:inline-block}

/* ---------- 5. TYPE HELPERS ---------- */
.anchor{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:var(--t-anchor);line-height:1.25;max-width:26ch;color:var(--tx)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--tx)}
.quote{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:var(--t-quote);line-height:1.2}

/* ---------- 6. BUTTONS ---------- */
.btn{
  font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;padding:16px 34px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .3s var(--ease);
}
.btn-solid{background:var(--gold);color:var(--black);border-color:var(--gold)}
.btn-solid:hover{background:var(--gold-l);border-color:var(--gold-l);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--tx);border-color:rgba(184,146,74,var(--a5))}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-l);transform:translateY(-2px)}

/* ---------- 7. SMOKE BED ----------
   ONE fixed canvas behind the whole document. Sections either let it through
   (.s-smoke) or cover it (.s-dark / .s-light). One WebGL context per page. */
html{background:var(--black)}
/* body must NOT paint an opaque ground or it hides the fixed canvas */
body{background:transparent!important;position:relative;z-index:0}

#gl{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:0;display:block;pointer-events:none;
}
/* The legibility veil is ONE fixed layer over the canvas, never per-section.
   A per-section veil ends on a straight horizontal line at every section join,
   which is exactly the "low quality" banding the client flagged. ::after so it
   paints above the canvas; sections sit at z-index 1 and stay above it. */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:rgba(20,18,16,.58)}
/* every section paints its own ground unless it opts into the smoke */
section,header,footer,main{position:relative;z-index:1}

/* Ground classes must beat the pages' legacy inline <style>, which loads after
   this file. These four are the only !important rules in the system. */
.s-smoke,.smoked{background:transparent!important}
.s-dark{background:var(--black)!important}
.s-deep{background:var(--black2)!important}
.s-light{background:var(--cream)!important}

/* --- smoke section: transparent over the live canvas ---
   Measured worst case: the brightest composited smoke ground is L=0.0589.
   Against it, --gold #B8924A scores 3.33:1 and .62 cream scores 3.70:1. Both
   are used at 10-13px label sizes, where AA needs 4.5:1. Smoke grounds
   therefore run the lighter gold and a stronger muted. Cream grounds keep
   --gold-cream, which is already tuned for the opposite direction. */
.s-smoke,.smoked{color:var(--cream);
  --bg:transparent; --tx:var(--cream); --ti:var(--cream); --ac:var(--gold-l);
  --mu:rgba(245,240,232,.8); --cb:rgba(184,146,74,.06); --bd:rgba(245,240,232,.14)}
.s-smoke > *{position:relative;z-index:1}

/* opaque grounds cover the canvas */
.s-dark{background:var(--black)}
.s-deep{background:var(--black2)}
.s-light{background:var(--cream)}

/* --- hero --- */
.smoked{position:relative;overflow:hidden;background:transparent;cursor:crosshair}
.smoked > .poster{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  display:block;object-fit:cover;opacity:.9}
.smoked > .hero-figure{position:absolute;inset:0;z-index:1;pointer-events:none}
.smoked::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
.smoked > .wrap{position:relative;z-index:3;width:100%;cursor:auto}

/* Hero scrims are soft vignettes only. Every stop must reach TRANSPARENT before
   the section edge, or the leftover alpha draws a rule across the page at the
   join. Darkening sits behind the copy column, never at a boundary. */
/* No scrim of any kind. A gradient that still carries alpha at the section edge
   draws a rule across the page; one that fades early draws a soft one. The
   single fixed body veil already supplies contrast, identically everywhere. */
.smoked--full::after,
.smoked--band::after{background:none}

/* The header is position:fixed, so it is out of flow: a hero that centres its
   content in 88svh centres it straight through the header, and the eyebrow
   lands on top of the wordmark. Reserve the header's height so the centring
   happens in the space below it. Pages that define their own --header-h
   (assessment) keep theirs, since their inline style loads after this file. */
/* Fallback only. site.js measures the real header and overwrites this, because
   the height differs per page (91-106px). 106 is the tallest, so a no-JS
   visitor over-reserves slightly rather than colliding. */
:root{--header-h:106px}

.hero.smoked--full{min-height:88svh;display:flex;align-items:center;
  padding-top:var(--header-h);box-sizing:border-box}
.hero.smoked--band{padding:clamp(118px,15vw,168px) 0 clamp(52px,7vw,88px)}

/* ---------- 7b. NO STRAIGHT EDGES ----------
   Hero photography feathers into the smoke on every side instead of ending on a
   crop. Mask is the image's own alpha, so it works over the live canvas. */
/* Mask the WRAPPER, not the <img>. The wrappers ship a two-stop linear mask that
   only feathers left and top, and overflow:hidden hard-clips right and bottom,
   which is what reads as a straight crop against the smoke. */
.smoked .hero-photo,
.smoked .ab-photo,
.smoked .hero-figure > *{
  overflow:visible!important;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 62% 46%,#000 38%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.42) 80%,transparent 100%)!important;
          mask-image:radial-gradient(ellipse closest-side at 62% 46%,#000 38%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.42) 80%,transparent 100%)!important;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* The wrapper carries the noise displacement, its child carries the alpha.
   Only applied once site.js has injected the filter defs, so a failed script
   leaves the clean feathered edge rather than a reference to a missing filter. */
.has-smoke-edge .hero.smoked > .hero-figure{filter:url(#smokeEdge)}
.has-smoke-edge .ab-hero.smoked > .hero-figure{filter:url(#smokeEdge2)}

/* the inner <img> must not re-clip */
.smoked .hero-photo img,
.smoked .ab-photo img{-webkit-mask-image:none;mask-image:none}

/* ---------- 7c. LIGHT BANDS FEATHER INTO THE SMOKE ----------
   A cream section against the canvas butts on a razor edge. Fade its own ground
   out at top and bottom so it dissolves instead. The fade zone is smaller than
   the section's vertical padding, so no copy is ever caught in it. */
.s-light{--fade:clamp(40px,5.5vw,92px)}
/* Eased, not linear. A straight ramp still reads as a band with two visible
   ends; the intermediate stops curve it so the cream dissolves into the smoke. */
.s-light:not(.no-feather){
  --feather:linear-gradient(180deg,
     transparent 0,
     rgba(0,0,0,.26) calc(var(--fade) * .36),
     rgba(0,0,0,.70) calc(var(--fade) * .68),
     #000 var(--fade),
     #000 calc(100% - var(--fade)),
     rgba(0,0,0,.70) calc(100% - var(--fade) * .68),
     rgba(0,0,0,.26) calc(100% - var(--fade) * .36),
     transparent 100%);
  -webkit-mask-image:var(--feather);
          mask-image:var(--feather);
}

/* ---------- 7d. PANELS ON SMOKE ----------
   The shader's plumes reach near-white. A 6%-gold card fill lets that through
   and the copy inside drops below AA. Cards on a smoke ground get a real fill.
   They read as objects, not bands, so they add no straight edge. */
.s-smoke .heard-card,
.s-smoke .card,
.s-smoke .panel,
.s-smoke .n-card,
.s-smoke .p-card,
.s-smoke .t-card,
.s-smoke .stat,
.s-smoke .q-card{
  background:rgba(20,18,16,.74);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}

/* The footer keeps its dark ground, but not its hard top edge. The 1px rule is
   gone and the ground feathers in, so it reads as a band the smoke settles into
   rather than a slab dropped on top of it. The fade is smaller than the
   footer's own top padding, so no content is ever caught in it. */
footer{
  background:var(--black)!important;border-top:0!important;position:relative;z-index:1;
  --foot-fade:clamp(36px,4vw,64px);
  --foot-feather:linear-gradient(180deg,
     transparent 0,
     rgba(0,0,0,.26) calc(var(--foot-fade) * .36),
     rgba(0,0,0,.70) calc(var(--foot-fade) * .68),
     #000 var(--foot-fade),
     #000 100%);
  -webkit-mask-image:var(--foot-feather);
          mask-image:var(--foot-feather);
}
footer::before{display:none!important}

/* kill every hairline rule that cuts across a smoke ground */
.s-smoke,.smoked{border-top:0!important;border-bottom:0!important}
.s-smoke + .s-smoke{border-top:0!important}

.hero-content{display:flex;flex-direction:column;gap:clamp(20px,3vw,30px);align-items:flex-start}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- 8. MOTION ---------- */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.d4{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #gl{display:none}
  .poster{opacity:1}
}

/* ---------- 9. Z-INDEX LADDER ---------- */
/* poster/canvas 0 · figure 1 · scrim 2 · copy 3 · header 110 · menu 115 · progress 120 */
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold),var(--copper));transition:width .1s linear}