/* ============================================================
   BASE — reset, type scale, shared primitives
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--grey-d);color:var(--paper);
  font-family:var(--sans);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:var(--orange);color:var(--grey)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:12px;z-index:300;background:var(--orange);color:var(--grey);padding:.6rem 1rem}

/* ---------- type ---------- */
.d1,.d2,.d3{
  font-family:var(--display);text-transform:uppercase;
  letter-spacing:-.045em;line-height:.94;margin:0;font-weight:400;
}
.d1{font-size:clamp(2.5rem,7.4vw,6rem)}
.d2{font-size:clamp(1.8rem,4vw,3.3rem)}
.d3{font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.03em;line-height:1.08}
.eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;opacity:.62;margin:0;
}
.lede{font-size:clamp(.98rem,1.1vw,1.1rem);line-height:1.6;font-weight:300;opacity:.82}

/* ---------- light ("paper") ground ---------- */
.on-paper{background:var(--paper);color:var(--grey);position:relative;isolation:isolate}
.on-paper .lede{opacity:.76}
/* CONTRAST CORRECTION (revision pass, folded in). Was opacity:.6 on
   --earth, which multiplied out to 2.28:1 and failed AA. Full opacity
   on --earth-t measures 5.12:1. Do not reintroduce the opacity. */
.on-paper .eyebrow{opacity:1;color:var(--earth-t)}

/* Americana star field on light ground. Sits behind content at very low
   opacity. The deck used a washed flag over its light slides; this is the
   same idea at web scale. */
.on-paper > *{position:relative;z-index:1}
.on-paper::before{
  content:'';position:absolute;left:0;right:0;top:0;height:190px;z-index:0;
  background-image:var(--stars);
  background-repeat:repeat-x;background-position:left top;background-size:auto 190px;
  pointer-events:none;
}

/* ROUND-ONE FEEDBACK: flag progression. Upper light sections keep the stars;
   sections marked .on-stripes swap to the fabric folds of the flag.

   FULL-BLEED, unlike the stars. The stars are a 190px header flourish; the
   fabric is the ground this whole section sits on, so height goes to 100%
   and the tile repeats in both directions.

   That needs --stripes-tile rather than --stripes: the band version is
   mirrored horizontally only, so repeating it downwards would seam every
   380px. The tile adds the vertical mirror (measured wrap difference 0.00
   vertical, 0.02 horizontal). Fixed 380px sizing rather than `auto 100%`
   keeps the fabric at the same scale whatever the section height — scaling
   it to fit turned the folds into one large shape on tall viewports and
   lost the texture. */
.on-paper.on-stripes::before{
  height:100%;
  background-image:var(--stripes-tile);
  background-size:auto 380px;
  background-repeat:repeat;
  background-position:left top;
  /* multiply drops the fabric's light areas out entirely and lets only the
     folds darken the paper, which is what keeps a photograph reading as
     texture rather than as a pasted-in picture. --stars bakes its 0.05 into
     the SVG; a raster has to take opacity here. */
  mix-blend-mode:multiply;
  opacity:.16;
}

/* The flag texture darkens the paper enough to break --earth-t, which had
   only 0.62 of headroom. See --earth-t-deep in 01-tokens.css. Body copy is
   --grey and measures ~11.6:1 here, so it needs no adjustment. */
.on-paper.on-stripes .eyebrow{color:var(--earth-t-deep)}

/* ---------- image placeholder ----------
   Greyscale by default: direction 4A is black and white, high contrast.
   Real photography drops straight in behind the same scrims.
   STILL IN USE by the leadership section (slot 8). Do not delete until
   that photograph lands. */
.ph{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(118deg,rgba(21,22,22,.25),rgba(21,22,22,.7)),
    repeating-linear-gradient(101deg,#3c3d3d 0 3px,#333434 3px 6px),
    #2e2f2f;
  display:grid;place-items:center;
}
.ph--light{
  background:
    linear-gradient(118deg,rgba(37,38,38,.12),rgba(37,38,38,.42)),
    repeating-linear-gradient(97deg,#d9d7ce 0 3px,#d0cec5 3px 6px),
    #d4d2c9;
}
.ph b{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:400;color:rgba(247,247,243,.45);border:1px dashed rgba(247,247,243,.3);
  padding:.65rem 1rem;text-align:center;line-height:2;max-width:78%;
}
.ph--light b{color:rgba(37,38,38,.6);border-color:rgba(37,38,38,.32)}

/* ---------- button ---------- */
.btn{display:inline-block;background:var(--orange);color:var(--grey);
  font-family:var(--display);text-transform:uppercase;letter-spacing:-.03em;
  font-size:.98rem;padding:.95rem 2.1rem;border-radius:2px;
  transition:background .22s ease,transform .22s ease}
.btn:hover{background:var(--apricot);transform:translateY(-2px)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}