/* ============================================================
   odNOVA — hero-system.css
   Shared desktop hero system. Phase 1 reference page: Contact.

   INERT BY DESIGN
   - Every rule is scoped to .od-hero-sys, so a page joins the
     system only by adding that class to its hero <section>.
     Nothing here can reach a page that has not been wired.
   - Every rule sits inside @media (min-width: 861px), so the
     system has no effect at <=860px. Mobile is out of scope
     until Piotr authorises a separate pass.
   - The tokens below are declarations only; they paint nothing.

   Added 2026-07-31. Nothing published.
   ============================================================ */

:root {
  /* frame + geometry */
  --hs-measure: 1100px;                          /* interior hero text measure */
  --hs-content-top: clamp(120px, 21vh, 250px);   /* stable content start, viewport-relative */
  --hs-chrome-ref: 130px;                        /* reference hero chrome (Contact: announce + nav) */
  --hs-rhythm: 24px;                             /* default step between hero blocks */
  --hs-gap-title: 16px;                          /* eyebrow -> H1 */
  --hs-gap-cta: 32px;                            /* last text block -> CTA row */

  /* type */
  --hs-h1-size: 58px;
  --hs-h1-lh: 1.08;
  --hs-lede-size: 18px;
  --hs-lede-lh: 1.62;
  --hs-lede-ink: #BCC6D2;
  --hs-lede-measure: 84ch;                       /* readable, not narrow */
  --hs-h1-measure: 20ch;
  --hs-eyebrow-size: 11.5px;
  --hs-eyebrow-ls: 0.18em;

  /* ghost od·NOVA device */
  --hs-ghost-op: 0.05;                           /* base opacity ceiling */
  --hs-ghost-w: clamp(420px, 44vw, 600px);
  --hs-ghost-ratio: 2.4525;                      /* lockup width / height */
  --hs-ghost-fade: 0.6;                          /* gone by 60% of hero scroll */

  /* CTA family */
  --hs-btn-size: 12.5px;
  --hs-btn-ls: 0.16em;
  --hs-btn-pad: 17px 32px;
  --hs-btn-min: 50px;
  --hs-btn-radius: 2px;
  --hs-btn-primary: #E7D3AC;
  --hs-btn-primary-hover: #F0DFBE;
  --hs-btn-primary-ink: #10151D;
  --hs-btn-line: rgba(237, 232, 223, 0.38);
  --hs-btn-ink: #EDE8DF;
}

/* Hero micro-block (mono contact details / short factual lines).
   Unscoped on purpose: it carries the exact values the reference page
   previously held inline, so removing that inline style changes nothing
   at any width. Only elements given the class are affected. */
.od-hero-meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; line-height: 2; color: var(--text-body-2); margin: 0 0 24px; }

@media (min-width: 861px) {

  /* --hs-active is the runtime gate: js/hero-ghost.js only animates
     while it resolves to 1, so the dissolve is desktop-only too. */
  .od-hero-sys { --hs-active: 1; min-height: 100svh; overflow: hidden; }

  /* 1 · geometry — one left-aligned column on the shared page margin.
     Rhythm comes from flow steps between siblings, not per-element
     offsets, so a page with more or fewer blocks stays coherent. */
  .od-hero-sys .pf-hero-body { align-items: flex-start; padding-top: var(--hs-content-top); }
  .od-hero-sys .pf-hero-text { display: flex; flex-direction: column; align-items: flex-start; max-width: var(--hs-measure); }
  .od-hero-sys .pf-hero-text > * { margin: 0; }
  .od-hero-sys .pf-hero-text > * + * { margin-top: var(--hs-rhythm); }
  .od-hero-sys .pf-hero-text > .pf-hero-name { margin-top: var(--hs-gap-title); }
  .od-hero-sys .pf-hero-text > .pf-hero-ctas { margin-top: var(--hs-gap-cta); }

  /* 2 · type */
  .od-hero-sys .od-eyebrow { font-size: var(--hs-eyebrow-size); letter-spacing: var(--hs-eyebrow-ls); }
  .od-hero-sys .pf-hero-name { font-size: var(--hs-h1-size); line-height: var(--hs-h1-lh); }
  .od-hero-sys .pf-hero-name .pf-surname { display: inline; }
  .od-hero-sys .pf-hero-lede { font-family: var(--font-sans); font-weight: 300; font-size: var(--hs-lede-size); line-height: var(--hs-lede-lh); color: var(--hs-lede-ink); max-width: none; }

  /* 3 · CTA family — one shape, two ranks */
  .od-hero-sys .pf-btn { font-size: var(--hs-btn-size); letter-spacing: var(--hs-btn-ls); padding: var(--hs-btn-pad); min-height: var(--hs-btn-min); border-radius: var(--hs-btn-radius); transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
  .od-hero-sys .pf-btn--gold { background: var(--hs-btn-primary); color: var(--hs-btn-primary-ink); border-color: transparent; }
  .od-hero-sys .pf-btn--gold:hover { background: var(--hs-btn-primary-hover); color: var(--hs-btn-primary-ink); }
  .od-hero-sys .pf-btn--ghost { background: transparent; color: var(--hs-btn-ink); border-color: var(--hs-btn-line); }
  .od-hero-sys .pf-btn--ghost:hover { border-color: var(--gold-soft, #C9B79A); color: var(--gold-soft, #C9B79A); }
  .od-hero-sys .pf-btn:focus-visible { outline: 2px solid var(--gold-soft, #C9B79A); outline-offset: 3px; }

  /* 4 · ghost device. #top.od-hero-sys is deliberate: it must outrank
     the pages' own `#top .gm-mark` block (1,1,0) without !important. */
  #top.od-hero-sys .gm-mark {
    right: -2%;
    bottom: -4%;
    --odn-h: calc(var(--hs-ghost-w) / var(--hs-ghost-ratio));
    opacity: var(--hs-ghost-op);
  }

  /* ============================================================
     5 · ADAPTER LAYER (Phase 2)
     The interior pages hold their hero type in page-level <style>
     blocks and, on several pages, in inline style attributes. An
     inline declaration cannot be beaten by specificity, so this
     layer is deliberately !important — and because every rule sits
     inside @media(min-width:861px), <=860px stays byte-identical.
     A page opts in per element with the hs-* role classes; nothing
     here matches an element that has not been given one.
     ============================================================ */

  /* band: the flex row that holds the hero content.
     The padding compensates for each page's own chrome height (announce
     strip + nav, measured live into --hs-chrome), so the eyebrow and H1
     land the same distance from the top of the viewport on every page
     instead of inheriting that page's header depth. */
  .od-hero-sys .hs-band {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: max(0px, calc(var(--hs-content-top) + var(--hs-chrome-ref) - var(--hs-chrome, var(--hs-chrome-ref)))) !important;
    text-align: left !important;
  }
  /* band that is also the content column (no .od-wrap inside):
     reproduce .od-wrap's left anchor exactly, so the title starts on
     the same page margin as every other hero. */
  .od-hero-sys .hs-band.hs-col {
    max-width: none !important;
    margin: 0 !important;
    padding-left: calc(max(0px, (100% - var(--wrap-max, 1320px)) / 2) + var(--pad-x, 60px)) !important;
    padding-right: var(--pad-x, 60px) !important;
  }
  .od-hero-sys .hs-col { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  /* first-viewport clip: for a hero section that legitimately continues
     below the fold. Height comes from --hs-chrome, measured live by
     js/hero-ghost.js, so no hard-coded header constant is needed. */
  .od-hero-sys .hs-clip { position: relative; overflow: hidden; min-height: calc(100svh - var(--hs-chrome, 128px)); }

  /* roles — one rhythm scale, shared with the Contact reference */
  .od-hero-sys .hs-eyebrow { margin: 0 !important; justify-content: flex-start !important; font-size: var(--hs-eyebrow-size) !important; letter-spacing: var(--hs-eyebrow-ls) !important; }
  .od-hero-sys .hs-h1 { margin: var(--hs-gap-title) 0 0 !important; max-width: var(--hs-h1-measure) !important; width: auto !important; font-size: var(--hs-h1-size) !important; line-height: var(--hs-h1-lh) !important; text-align: left !important; }
  .od-hero-sys .hs-h1 > span { margin-left: 0 !important; margin-right: 0 !important; }
  .od-hero-sys .hs-lede { margin: var(--hs-rhythm) 0 0 !important; max-width: min(var(--hs-measure), var(--hs-lede-measure)) !important; font-family: var(--font-sans) !important; font-weight: 300 !important; font-size: var(--hs-lede-size) !important; line-height: var(--hs-lede-lh) !important; color: var(--hs-lede-ink) !important; text-align: left !important; }
  /* a page's own distinctive one-line salutation keeps the serif voice
     but takes the system's rhythm and alignment */
  .od-hero-sys .hs-salutation { margin: var(--hs-rhythm) 0 0 !important; max-width: min(var(--hs-measure), var(--hs-lede-measure)) !important; text-align: left !important; }
  .od-hero-sys .hs-meta { margin: var(--hs-rhythm) 0 0 !important; }
  .od-hero-sys .hs-ctas { margin: var(--hs-gap-cta) 0 0 !important; justify-content: flex-start !important; }
}

/* Reduced motion: no interpolation. The ghost keeps its static base
   opacity and simply leaves with the hero (the hero clips it). */
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
  #top.od-hero-sys .gm-mark { opacity: var(--hs-ghost-op); }
}