/* ============================================================
   HEADER ARCHETYPES  —  candidate stylesheet, not yet adopted
   ------------------------------------------------------------
   Lives in assets/css/ on purpose: a url() inside a custom
   property resolves against the stylesheet that REFERENCES it,
   so var(--pic) only finds ../img/bg/ from here. Declaring these
   rules in a page's own <style> block silently 404s every frame.
   On adoption this file folds into site.css.
   ============================================================ */

/* ============================================================
   HEADER ARCHETYPES — the actual proposal
   ============================================================ */

/* ---- 2 · SPLIT ------------------------------------------------------
   The photograph blooms from one edge; the words sit on the cream half,
   left-aligned against a gold rule. Nothing is boxed. This is the
   .ground-side recipe promoted from a section ground to a header. */
.hero-split{padding:5.5rem 0 5rem;background-position:center;
  background-size:cover;background-repeat:no-repeat}
.hero-split .wrap{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
.hero-split .hs-body{max-width:37rem;border-left:2px solid var(--gold);
  padding-left:2.1rem}
.hero-split.is-flip .wrap{display:flex;justify-content:flex-end}
.hero-split .eyebrow{display:block;color:var(--terracotta);margin-bottom:1rem}
.hero-split h1{font-family:var(--display);color:var(--olive);
  font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.1;letter-spacing:.005em}
.hero-split h1 .amp{color:var(--terracotta)}
.hero-split .lede{margin-top:1.4rem;max-width:46ch}
.hero-split .btn-row{justify-content:flex-start}

/* ---- 4 · WARM PLATE -------------------------------------------------
   The rust-to-cream frame you approved for the closing band, opened up
   and used as a header. Top of the page rhymes with the bottom. */
.hero-warm{text-align:center;padding:6rem 0 4.5rem;
  background-color:var(--cream);background-position:center top;
  background-size:cover;background-repeat:no-repeat;
  background-image:linear-gradient(180deg,rgba(248,241,234,.34) 0%,
    rgba(248,241,234,.58) 45%,rgba(248,241,234,.93) 100%),
  var(--pic)}
.hero-warm .wrap{max-width:50rem;margin:0 auto;padding:0 2rem}
.hero-warm .eyebrow{display:block;color:var(--terracotta);margin-bottom:1.1rem}
.hero-warm h1{font-family:var(--display);color:var(--olive);
  font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.1}
.hero-warm h1 .amp{color:var(--terracotta)}
.hero-warm .lede{margin:1.4rem auto 0;max-width:48ch}

/* ---- 5 · EDITORIAL RULE ---------------------------------------------
   The quietest of the set. Near-flat cream, the photograph felt only at
   the outer edge, a large display line over a gold rule and a meta row.
   For pages that are an index of writing or of people. */
.hero-editorial{padding:5.5rem 0 0;min-height:400px;background-position:center;
  background-size:cover;background-repeat:no-repeat;
  background-image:linear-gradient(100deg,var(--cream) 0%,var(--cream) 44%,
    rgba(248,241,234,.82) 64%,rgba(248,241,234,.38) 86%,
    rgba(248,241,234,.18) 100%),
  var(--pic)}
.hero-editorial .wrap{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
.hero-editorial .eyebrow{display:block;color:var(--terracotta);margin-bottom:1.2rem}
.hero-editorial h1{font-family:var(--display);color:var(--olive);
  font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.06;max-width:18ch}
.hero-editorial .lede{margin-top:1.3rem;max-width:52ch}
.hero-editorial .he-rule{margin-top:2.6rem;border-top:1px solid var(--gold);
  padding:.9rem 0 1.6rem;display:flex;gap:1.6rem;flex-wrap:wrap;
  font-family:var(--ui);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive-72)}

@media (max-width:900px){
  .hero-split.is-flip .wrap{display:block}
  .hero-split .hs-body{max-width:none}
  .hero-banner{min-height:360px}
}


/* ---- 3 · INSTRUMENT PLATE  (replaces the water banner) --------------
   Labs is the one page that is not a landscape. It is the laboratory
   and the tool, so the ground is drawn, not photographed: a ruled
   graticule, and the Labs device opened up as a construction drawing
   that resolves into the solid mark at its centre. No photograph is
   loaded here at all — the whole plate is gradients and one SVG.

   Four stacked layers, in z order:
     0  the plate      ground, graticule (minor 58px / major 290px),
                       plate frame and corner registration marks
     1  the drawing    .lab-schematic, centred on the solid mark and
                       masked so it dissolves into the dark before it
                       reaches the headline
     2  the scrim      ::before — a gold pool at the mark, and a soft
                       darkening of the band the words sit in
     3  the title block .wrap

   Layout is deliberately block flow, not centred flex: the mark's
   optical centre has to be a known number (--lab-eye) so the drawing
   can be hung off it.
   -------------------------------------------------------------------- */
.hero-lab{
  --lab-mark:96px;                     /* the solid mark */
  --lab-eye:200px;                     /* its centre, measured from the plate top */
  --lab-draw:480px;                    /* the construction drawing, concentric with it */
  position:relative;overflow:hidden;text-align:center;
  padding:calc(var(--lab-eye) - var(--lab-mark)/2) 0 3.6rem;
  background-color:#241e0d;
  background-position:center;
  background-image:
    /* every fifth rule is drawn heavier — this is what makes it read as
       a ruled plate rather than as a texture */
    repeating-linear-gradient(0deg,rgba(201,165,59,.26) 0 1px,transparent 1px 290px),
    repeating-linear-gradient(90deg,rgba(201,165,59,.26) 0 1px,transparent 1px 290px),
    /* the graticule */
    repeating-linear-gradient(0deg,rgba(201,165,59,.14) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(90deg,rgba(201,165,59,.14) 0 1px,transparent 1px 58px),
    /* light pooling high on the plate, falling off to the edges */
    radial-gradient(122% 94% at 50% 30%,rgba(98,82,39,.88) 0%,
      rgba(58,48,21,.94) 52%,rgba(26,21,9,.99) 100%);
  border-top:1px solid rgba(201,165,59,.45);
  border-bottom:1px solid rgba(201,165,59,.45)}

/* the plate frame — a hairline inset the registration marks thicken at
   the corners, so the band reads as an instrument face */
.hero-lab::after{content:"";position:absolute;inset:20px;z-index:1;
  pointer-events:none;border:1px solid rgba(201,165,59,.15)}

/* the scrim: light gathers at the mark, and the band the words sit in
   is pulled down so the drawing never fights the type */
.hero-lab::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(170px 170px at 50% var(--lab-eye),rgba(201,165,59,.12) 0%,
      rgba(201,165,59,.045) 48%,transparent 76%),
    radial-gradient(70% 40% at 50% 72%,rgba(22,18,7,.60) 0%,
      rgba(22,18,7,.26) 60%,transparent 100%)}

/* the device, drawn as a schematic rather than stamped as a logo.
   Hung off --lab-eye so the drawing is concentric with the solid mark,
   and masked so it has dissolved by the time it reaches the headline. */
.hero-lab .lab-schematic{position:absolute;left:50%;top:var(--lab-eye);
  transform:translate(-50%,-50%);width:min(var(--lab-draw),96vw);height:auto;
  opacity:.62;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,
    rgba(0,0,0,.42) 88%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 0%,#000 78%,
    rgba(0,0,0,.42) 88%,transparent 97%)}

/* corner registration marks */
.hero-lab .lab-reg{position:absolute;width:18px;height:18px;z-index:2;
  border-color:rgba(201,165,59,.75);border-style:solid;border-width:0}
.hero-lab .lab-reg--tl{top:20px;left:20px;border-top-width:1px;border-left-width:1px}
.hero-lab .lab-reg--tr{top:20px;right:20px;border-top-width:1px;border-right-width:1px}
.hero-lab .lab-reg--bl{bottom:20px;left:20px;border-bottom-width:1px;border-left-width:1px}
.hero-lab .lab-reg--br{bottom:20px;right:20px;border-bottom-width:1px;border-right-width:1px}

.hero-lab .wrap{position:relative;z-index:2;max-width:54rem;margin:0 auto;padding:0 2rem}
.hero-lab .lab-mark{width:var(--lab-mark);height:var(--lab-mark);display:block;
  /* clear the drawn petals (radius = --lab-draw/3) before the words begin, so
     only the sparse outer dial ever passes behind type */
  margin:0 auto calc(var(--lab-draw)/3 - var(--lab-mark)/2 + 22px)}
/* the Labs wordmark, in the reversed treatment the footer lockup uses:
   cream fill, gold outline, Marcellus — the artwork, not live text */
.hero-lab .lab-wordmark{display:block;width:min(240px,62vw);height:auto;
  margin:0 auto 1.5rem}
.hero-lab .eyebrow{display:block;color:var(--gold);margin-bottom:1rem}
.hero-lab h1{font-family:var(--display);color:var(--cream);letter-spacing:.005em;
  font-size:clamp(2.2rem,5.2vw,3.3rem);line-height:1.1;text-wrap:balance;
  text-shadow:0 1px 16px rgba(18,14,4,.6)}
.hero-lab h1 .amp{color:var(--gold)}
.hero-lab .lede{color:var(--cream-90);margin:1.4rem auto 0;max-width:50ch;
  text-shadow:0 1px 14px rgba(18,14,4,.55)}
/* the spec row — instrument labels, ruled off in gold */
.hero-lab .lab-spec{margin:2rem auto 0;padding-top:1.1rem;max-width:44rem;
  border-top:1px solid rgba(201,165,59,.34);
  display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap;
  font-family:var(--ui);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-72)}
.hero-lab .lab-spec b{color:var(--gold);font-weight:600}

/* ---- split: hold the cream further across, so the words never sit on
   the picture. The section-level .ground-side is tuned for a body band
   with no long measure on it; a header needs a wider solid run. ---- */
.hero-split.ground-side{background-image:
  linear-gradient(96deg,var(--cream) 0%,var(--cream) 46%,
    rgba(248,241,234,.88) 62%,rgba(248,241,234,.44) 82%,
    rgba(248,241,234,.20) 100%),
  var(--pic)}
.hero-split.ground-side--flip{background-image:
  linear-gradient(264deg,var(--cream) 0%,var(--cream) 46%,
    rgba(248,241,234,.88) 62%,rgba(248,241,234,.44) 82%,
    rgba(248,241,234,.20) 100%),
  var(--pic)}

@media (max-width:900px){
  .hero-lab{--lab-eye:196px;--lab-draw:430px;padding-bottom:4rem}
  .hero-lab .lab-schematic{opacity:.5}
}
@media (max-width:640px){
  .hero-lab{--lab-mark:74px;--lab-eye:156px;--lab-draw:330px;padding-bottom:3rem}
  .hero-lab::after{inset:12px}
  .hero-lab .lab-reg{width:13px;height:13px}
  .hero-lab .lab-reg--tl,.hero-lab .lab-reg--tr{top:12px}
  .hero-lab .lab-reg--bl,.hero-lab .lab-reg--br{bottom:12px}
  .hero-lab .lab-reg--tl,.hero-lab .lab-reg--bl{left:12px}
  .hero-lab .lab-reg--tr,.hero-lab .lab-reg--br{right:12px}
  .hero-lab .lab-mark{margin-bottom:1.2rem}
  .hero-lab .lab-wordmark{width:min(196px,58vw);margin-bottom:1.2rem}
  .hero-lab .lab-spec{gap:.55rem 1.4rem;font-size:.63rem}
}