/* ==========================================================================
   headers.css — the ten page-header modules.

   These rules used to live in a <style> block inside
   lab/components/frag/headers.html, which meant the library could show a
   header working while the same markup on a real page rendered unstyled. The
   manifest named css/hero-concepts.css for them, and that file never had them.

   Load after styles.css and vc.css. The specimen chrome that documents the
   modules (.spec-top, .spec-label) stays in the fragment — it is not part of
   any module and must never reach a live page.
   ========================================================================== */
/* ================= shared header vocabulary ================= */
.hd{padding:56px var(--pad);border-bottom:1px solid var(--border)}
.hd-bleed{padding:0;border-bottom:1px solid var(--border)}   /* modules that run edge to edge */
.hd .eyebrow{font-family:var(--font-eyebrow);font-size:12px;line-height:20px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
/* h1 as well as h2: these modules are page headers, so on the page they head
   the heading is the document's h1. The demos in the library are h2 because a
   fragment cannot carry one. Same treatment either way. */
.hd h1,.hd h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:40px;line-height:40px;letter-spacing:0}
.hd .lead{color:var(--muted);font-size:20px;line-height:28px;margin-top:20px;max-width:64ch}
.hd .actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hd .mono{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}

/* ---- 02 full-bleed photograph ---- */
.hd-photo{position:relative;min-height:420px;display:flex;align-items:flex-end;
  background-size:cover;background-position:center}
.hd-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,22,19,.25) 0%,rgba(26,22,19,.72) 55%,rgba(26,22,19,.94) 100%)}
.hd-photo .in{position:relative;z-index:1;padding:56px var(--pad);width:100%}
.hd-photo .lead{color:rgba(250,250,249,.82)}

/* ---- 03 photograph beside ---- */
.hd-beside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);min-height:400px}
.hd-beside .txt{padding:56px var(--pad);display:flex;flex-direction:column;justify-content:center}
.hd-beside .img{background-size:cover;background-position:center;border-left:1px solid var(--border)}

/* ---- 04 stat bar ---- */
.hd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);
  margin-top:36px}
.hd-stats div{padding:20px 24px 0;border-left:1px solid var(--hairline)}
.hd-stats div:nth-child(4n+1){padding-left:0;border-left:none}
.hd-stats .v{font-family:var(--font-head);font-weight:700;font-size:34px;line-height:34px;letter-spacing:0}
.hd-stats .k{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-2);margin-top:8px}

/* ---- 05 split rule ---- */
.hd-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.hd-split .l{padding-right:48px}
.hd-split .r{padding-left:48px;border-left:1px solid var(--border);display:flex;flex-direction:column;
  justify-content:flex-end}
.hd-split .r p{color:var(--muted);font-size:18px;line-height:28px}

/* ---- 06 index plate ---- */
.hd-plate{display:grid;grid-template-columns:104px minmax(0,1fr)}
.hd-plate .rail{border-right:1px solid var(--border);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;padding-right:24px;min-height:190px}
.hd-plate .num{font-family:var(--font-head);font-weight:700;font-size:56px;line-height:48px;
  letter-spacing:0;color:var(--accent)}
.hd-plate .vert{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);writing-mode:vertical-rl;transform:rotate(180deg)}
.hd-plate .body{padding-left:40px}


/* ---- 08 inverted panel ---- */
.hd-invert{background:var(--to-white);color:var(--to-espresso)}
.hd-invert h2{color:var(--to-espresso)}
.hd-invert .eyebrow{color:rgba(26,22,19,.62)}
.hd-invert .lead{color:rgba(26,22,19,.78)}
.hd-invert .btn-dark{display:inline-flex;align-items:center;padding:10px 18px;background:var(--to-espresso);
  color:var(--to-white);font-size:14px;line-height:20px;font-weight:500;border-radius:0}
.hd-invert .btn-line{display:inline-flex;align-items:center;padding:10px 18px;border:1px solid rgba(26,22,19,.3);
  color:var(--to-espresso);font-size:14px;line-height:20px;font-weight:500;border-radius:0}

/* ---- 09 article header ---- */
.hd-article{max-width:74ch}
.hd-article .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:24px}
.hd-article h2{font-size:44px;line-height:44px}
.hd-article .standfirst{color:var(--muted);font-size:20px;line-height:30px;margin-top:20px}
.hd-article .byline{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:32px;padding-top:20px;
  border-top:1px solid var(--border);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2)}
.hd-article .byline b{color:var(--text);font-weight:500}

/* ---- 10 anchored ---- */
.hd-anchors{display:flex;flex-wrap:wrap;gap:0;margin-top:36px;border-top:1px solid var(--border)}
.hd-anchors a{padding:16px 24px 16px 0;margin-right:24px;font-size:15px;line-height:22px;color:var(--muted);
  border-bottom:2px solid transparent}
.hd-anchors a.on{color:var(--text);border-bottom-color:var(--accent)}
.hd-anchors a:hover{color:var(--text)}

/* ---- 10 record header ---- */
.hd-record .crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:24px}
.hd-record .crumb a{color:var(--muted-2)}
.hd-record .crumb a:hover{color:var(--text)}
.hd-record .kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px;
  border-top:1px solid var(--border)}
.hd-record .kv div{padding:18px 24px 0;border-left:1px solid var(--hairline)}
.hd-record .kv div:nth-child(4n+1){padding-left:0;border-left:none}
.hd-record .kv .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted-2)}
/* text-align:left is not redundant. vc.css:111 gives `.kv .v` text-align:right
   for the definition-list .kv, and this .kv is a four-up stat rail where a
   right-aligned value floats away from the label it belongs to. Same class name,
   two components — see known_drift in the manifest. */
.hd-record .kv .v{font-size:16px;line-height:24px;margin-top:6px;text-align:left}


/* ---- Grain reveal -------------------------------------------------------
   The picture resolves out of noise: a coarse grain sheet sits over it and
   burns off, while the image itself lifts its own opacity and a touch of
   scale. Fired by IntersectionObserver so it plays on scroll-in, once.
   Anything that has not been observed yet stays fully visible, so the effect
   can never leave an image hidden if the script does not run. ------------- */
.reveal{position:relative;overflow:hidden;isolation:isolate}  /* isolate: the sheet below blends with `screen`, and without a local
     compositing context that blend reaches past this element into the page. */
.reveal::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22r%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.55%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%20result%3D%22t%22%2F%3E%3CfeColorMatrix%20in%3D%22t%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%201%200%200%200%200%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22gamma%22%20amplitude%3D%221%22%20exponent%3D%221.4%22%20offset%3D%220%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22220%22%20height%3D%22220%22%20filter%3D%22url%28%23r%29%22%2F%3E%3C%2Fsvg%3E");
  background-size:220px 220px;background-repeat:repeat;
  mix-blend-mode:screen;opacity:0;
}
.reveal.armed::after{opacity:.85}
.reveal.armed .hd-photo,.reveal.armed .img{opacity:.35;transform:scale(1.04)}
.reveal.done::after{opacity:0;transition:opacity 1100ms cubic-bezier(.22,.61,.36,1)}
.reveal.done .hd-photo,.reveal.done .img{
  opacity:1;transform:scale(1);
  transition:opacity 900ms cubic-bezier(.22,.61,.36,1),transform 1400ms cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .reveal.armed::after{opacity:0}
  .reveal.armed .hd-photo,.reveal.armed .img{opacity:1;transform:none}
}

@media (max-width:900px){
  .hd-stats,.hd-record .kv{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  /* two-up: clear the divider at the start of every row, not just the first cell */
  .hd-stats div:nth-child(2n+1),.hd-record .kv div:nth-child(2n+1){padding-left:0;border-left:none}
  .hd-split,.hd-plate,.hd-beside{grid-template-columns:1fr}
  .hd-split .l{padding-right:0}
  .hd-split .r{padding-left:0;border-left:none;border-top:1px solid var(--border);margin-top:28px;padding-top:28px}
  .hd-plate .rail{flex-direction:row;align-items:center;justify-content:flex-start;gap:20px;min-height:0;
    border-right:none;border-bottom:1px solid var(--border);padding:0 0 20px}
  .hd-plate .vert{writing-mode:horizontal-tb;transform:none}
  .hd-plate .body{padding-left:0;padding-top:28px}
  .hd-beside .img{min-height:240px;border-left:none;border-top:1px solid var(--border)}
  .hd h1,.hd h2{font-size:32px;line-height:34px}
  .hd-article h2{font-size:34px;line-height:36px}
  .hd-photo{min-height:340px}
}