/* Shared Hero adapter: raylo (family: local). CONTRACT.md §2/§3.
   Copied from: raylo/tokens.css (:root, .t-display, .t-lead, .t-label), raylo/raylo.css (.tag, .btn, .site-head,
   .page--paper .site-head, .hero, main > .s-hero/.c-hero), raylo/pages/index.html (home hero), typography/slots.json.
   Raylo defines every colour, shape and layout contract token natively (incl. --accent-ink, --star, --r-hero),
   so only --font-label is aliased. Link this AFTER tokens.css / palette.css / type css. */
:root {
  /* (a) alias block: the one contract token Raylo lacks */
  --font-label: var(--font);              /* .tag / .t-label use the body family */

  /* (b) voice: .t-display = clamp(44px, 5vw, 72px) / 1 / -.048em / 600; Stack Sans has no italic em */
  --display-size: 72px;
  --display-size-sm: 44px;
  --display-weight: 600;
  --display-lh: 1;
  --display-tracking: -.048em;
  --display-em: normal;
  --lead-size: 18px;                      /* .t-lead */
  --body-weight: 300;                     /* .t-lead / body weight */
  --label-size: 13px;                     /* .tag / .t-label */
  --label-tracking: .04em;
  --label-transform: uppercase;
  --label-weight: 400;

  /* (c) shape + nav: --r-hero is native (32px) */
  --nav-offset: 78px;                     /* .site-head: 22px top + 56px white bar (8px pad + 40px btn--sm) */
  --hero-tuck: 78px;                      /* home: fixed floating bar sits over the full-bleed .hero photo */
  --hero-pad-top: 96px;                   /* main > .s-hero / .c-hero padding-top under the in-flow (page--paper) nav */
}

/* (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.674; }

/* (header-over) a colour-band hero under the header (gb-olivia, data-hero-header="over", 2026-10-19). Raylo's home .site-head
   is already fixed (22px from the top, white 16px-radius bar); on paper pages (body.page--paper) it is sticky in the flow,
   which would leave a paper strip above the band, so here it is always fixed at the same spot and the hero starts at the
   very top with no tuck. The white bar keeps its fill + ink text (reads on any band and on the rest of the page).
   Clearance: 78px + 28px. */
body:has([data-hero-header="over"][data-host-skill="raylo"]) { --hero-tuck: 0px; --hero-pad-top: 106px; }
body:has([data-hero-header="over"][data-host-skill="raylo"]) .site-head { position: fixed; top: 22px; left: 0; right: 0; padding-top: 0; }

/* raylo-split + raylo-wide (redesigned 2026-10-22: full-bleed photo + review badges / photo slider): Farhan paired it with the clear header — no white
   bar, white logo and links over the photo, a white button. Same rules as raylo.css .site-head--clear. */
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) { --hero-tuck: 0px; }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) .site-head { position: absolute; top: 0; left: 0; right: 0; padding-top: 0; }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) .site-head .bar { width: min(100% - 2 * var(--gutter), var(--container)); padding: 24px 0; border-radius: 0; background: none; box-shadow: none; }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) .site-head :is(.logo, .nav-links > a, .nav-dd > button) { color: var(--on-dark); }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) .site-head .logo svg path[stroke] { stroke: var(--on-dark); }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) .site-head .btn--dark { background: var(--surface); color: var(--text); }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) .site-head .nav-toggle { color: var(--on-dark); background: color-mix(in srgb, var(--gs-on-brand) 14.0%, transparent); }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) [data-shared-hero] .btn--dark { background: var(--surface); color: var(--text); }
body:has([data-shared-hero][data-host-skill="raylo"]:is([data-shared-hero="raylo-split"], [data-shared-hero="raylo-wide"])) [data-shared-hero] .btn--dark:hover { background: var(--surface-2); }