/* Shared Hero adapter: marlo (family: local). CONTRACT.md §2/§3.
   Copied from: marlo/tokens.css (:root, .t-h1, .t-lead, .t-label), marlo/marlo.css (.eyebrow, .btn, .site-head, .home-hero),
   marlo/pages/index.html (home hero), typography/slots.json. Link this AFTER tokens.css / palette.css / type css. */
:root {
  --nav-bottom: 72px;   /* absolute header, bottom edge measured 2026-10-31 (0 = in flow) */
  /* (a) alias block: contract tokens Marlo lacks */
  --ink-bg: var(--dark);                  /* cocoa band */
  --star: var(--accent);                  /* rating stars: rust on white, white on photos is set by the hero */
  --font-label: var(--font-display);      /* .eyebrow / .t-label use Albert Sans */
  --r-hero: 0;                            /* square photos */

  /* (b) voice: .t-h1 = 64px / 1.04 / -1.6px / 700 uppercase (32px on phones); no italic em */
  --display-size: 64px;
  --display-size-sm: 32px;
  --display-weight: 700;
  --display-lh: 1.04;
  --display-tracking: -.025em;
  --display-em: normal;
  --lead-size: 18px;                      /* .t-lead (Lato) */
  --body-weight: 400;
  --label-size: 16px;                     /* .eyebrow / .t-label */
  --label-tracking: -.01em;
  --label-transform: uppercase;
  --label-weight: 500;

  /* (c) shape + nav */
  --nav-offset: 72px;                     /* .site-head: 24px top + 48px bar */
  --hero-tuck: 72px;                      /* the header sits over full-bleed photo heroes */
  --hero-pad-top: 120px;                  /* boxed heroes on white start under the absolute header */
}

/* (caps) measured width of one capital in this skill's own display font at its heaviest weight (2026-10-19). Zero specificity:
   a build's type.css (its assigned font pair) always wins. Wordmark heroes size the name from it. */
:where(:root) { --display-caps-em: 0.682; }

/* (header-over) a colour-band hero under the header (gb-olivia, data-hero-header="over", 2026-10-19). Marlo's .site-head is
   already absolute (24px from the top, 48px tall) and scrolls away with the hero; a build places it before <main> (as
   about.html does), so the hero starts at the very top: no tuck. On the band the logo text, its accent house mark, the links
   and MENU take --on-accent (white text would vanish on a light accent; the accent mark always would); the white quote
   button keeps its own fill. The phone MENU opens Marlo's own full-screen dark .menu, untouched. Clearance: 72px + 28px. */
body:has([data-hero-header="over"][data-host-skill="marlo"]) { --hero-tuck: 0px; --hero-pad-top: 100px; }
body:has([data-hero-header="over"][data-host-skill="marlo"]) .site-head:not(.site-head--ink) { color: var(--on-accent); }
body:has([data-hero-header="over"][data-host-skill="marlo"]) .site-head:not(.site-head--ink) .logo svg { fill: var(--on-accent); }

/* under_nav heroes (dark band or photo at the top, e.g. marlo-e): the host header floats over them, so it reads light
   even when the page ships the ink header (Farhan 2026-10-22: dark menu on the cocoa band was invisible). */
body:has([data-shared-hero][data-host-skill="marlo"][data-hero-under-nav]) .site-head { color: var(--on-accent); }
body:has([data-shared-hero][data-host-skill="marlo"][data-hero-under-nav]) .site-head .logo svg { fill: var(--on-accent); }

/* the build's assigned heading voice (type.css) — wins over the adapter's demo voice */
:root { --display-weight: 600; --display-tracking: -0.028em; --display-lh: 1.02; }