/* Yellow Stamp hero — homepage only (owner 2026-10-10). Behaviour: design/hero/hero-yellow-stamp-v20.html (approved).
   Two stacked worlds: underneath, the dark site (nav + work, pinned under the yellow while it collapses); on top, a
   fixed laser-yellow layer whose circular clip collapses into the seal's centre while the seal flies into the nav
   logo slot and turns white. Geometry and the headline size are set by js/home-hero.js; values from tokens.css.
   Copy, nav and content share the site's gutter: the script aligns the copy to the real nav's content edges. */

.yh-track { height: var(--nav-h); }                  /* clearance under the fixed nav; the script sets the measured height */
/* the page held under the nav while the yellow collapses: held by the browser (sticky), released where the held
   position equals the natural one (the spacer = the collapse length, set by the script) */
.yh-hold > main { position: sticky; top: var(--nav-h); }
.yh-seal { position: fixed; left: 0; top: 0; width: 400px; height: 400px; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.yh-seal svg { display: block; width: 100%; height: 100%; }
.yh-seal--w { z-index: var(--z-hero-seal); color: var(--c-brand-paper); }
.yh-seal--w .seal-dot { fill: var(--c-brand); }
.yh-seal--b { position: absolute; color: var(--c-on-brand); }

.yh { position: fixed; inset: 0; z-index: var(--z-hero); background: var(--c-brand); color: var(--c-on-brand); will-change: clip-path; pointer-events: none; }   /* no overflow clipping: the circle clip does it */
/* clicks (owner 2026-10-10): the yellow layer catches clicks everywhere EXCEPT the nav strip, which lets them through
   to the real nav underneath (same layout as the ink copy); the hold behind the yellow stays unclickable */
.yh::before { content: ""; position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: 0; pointer-events: auto; }
.yh-skip { pointer-events: auto; }
/* the ink nav mirrors the real nav's hover + keyboard focus (js/home-hero.js): near-black underline / ring on yellow */
.yh .nav .nav__label { background-image: linear-gradient(var(--c-on-brand), var(--c-on-brand)); }
.yh .nav .is-hover .nav__label, .yh .nav .is-focus .nav__label { background-size: 100% var(--bs-underline); }
.yh .nav .is-focus { outline: var(--bw-2) solid var(--c-on-brand); outline-offset: var(--focus-offset); }
/* phone: an open menu sits above the yellow layer */
body > .nav.is-open { z-index: calc(var(--z-hero) + 1); }

/* the nav, repeated in ink on the yellow (a copy of the real header: same layout, not interactive) */
.yh .nav { background: transparent; }
.yh .nav::before { content: none; }   /* no dark full-width bar on the yellow */
.yh .nav * { color: var(--c-on-brand); }
.yh .nav .nav__logo svg { visibility: hidden; }    /* the seal is the logo here (the box stays, for the focus ring) */
.yh .nav .nav__item--active .nav__label { color: var(--c-on-brand); }
.yh .nav .nav__item::after { content: none; }
.yh .nav .nav__menu { border-color: var(--yh-menu-line); background: transparent; }

.yh-copy { position: absolute; display: flex; flex-direction: column; gap: var(--yh-copy-gap); }
.yh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yh-tags-gap); }
.yh-role {
  display: inline-flex; align-items: center; gap: var(--sp-10);
  padding: 0.75em 1.25em 0.75em 1em; border-radius: 999px;
  background: var(--c-on-brand); color: var(--c-brand); box-shadow: var(--yh-role-shadow);
  font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--yh-role-fs); letter-spacing: 0.005em;
  animation: yh-chip 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}
.yh-role__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c-brand); box-shadow: var(--yh-dot-ring); }
.yh-skills {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--yh-skills-gap);
  font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--yh-skills-fs);
  letter-spacing: var(--yh-skills-ls); text-transform: uppercase;
  animation: yh-chip 0.8s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.yh-skills b { font-weight: var(--fw-regular); font-size: 0.9em; letter-spacing: 0; opacity: 0.55; }
.yh-skills__row { display: contents; }   /* desktop: the 4 skills on one line, as before */
/* "Design → Code": the arrow is an SVG with the same space either side as a ✦ separator, centred on the caps */
.yh-to { display: inline-flex; align-items: center; column-gap: var(--yh-skills-cgap); }
.yh-to__arrow { flex: none; width: 0.8em; height: 0.48em; }
@keyframes yh-chip { from { opacity: 0; transform: translateY(-14px) scale(1.12); } to { opacity: 1; transform: none; } }

/* Headline: Figtree ExtraBold Italic, ONE size (--fs, fitted by the script), words reveal from outline to ink */
.yh-hl {
  --fs: var(--yh-hl-fs);
  margin: 0; font-family: var(--font-figtree); font-style: italic; font-weight: var(--fw-extrabold);
  font-size: var(--fs); line-height: var(--yh-hl-lh); letter-spacing: var(--yh-hl-ls); text-wrap: balance;
}
/* each word: room for the italic overhang (padding + matching negative margin), no transform, no will-change */
.yh-w { display: inline-block; padding-right: var(--yh-overhang); margin-right: calc(var(--yh-word-gap) - var(--yh-overhang)); paint-order: stroke fill; }

.yh-skip {
  position: absolute; bottom: var(--yh-bottom); font-size: var(--yh-skip-fs); color: var(--c-on-brand);
  text-decoration: none; border-bottom: var(--bw-1) solid var(--yh-skip-line); padding-bottom: var(--sp-2);
}
.yh-skip .ico-arrow { width: 1em; height: 1em; margin-left: var(--sp-4); vertical-align: -0.125em; }
.yh-skip:focus-visible { outline-color: var(--c-on-brand); }
.yh-cue { position: absolute; bottom: var(--yh-bottom); font-size: var(--yh-cue-fs); letter-spacing: var(--yh-cue-ls); text-transform: uppercase; opacity: 0.6; }

@media (max-width: 767.98px) {
  .yh-copy { gap: var(--yh-copy-gap-phone); bottom: var(--yh-copy-bottom-phone); }
  .yh-tags { gap: var(--yh-tags-gap-phone); }
  .yh-role { font-size: var(--yh-role-fs-phone); }
  .yh-skills { font-size: var(--yh-skills-fs-phone); letter-spacing: var(--yh-skills-ls-phone); gap: var(--yh-skills-gap-phone);
    flex-direction: column; align-items: flex-start; }   /* phone: exactly 2 rows (owner 2026-10-10) */
  .yh-skills__row { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--yh-skills-gap-phone); white-space: nowrap; }
  .yh-skills__mid { display: none; }   /* no separator at the end / start of a row */
  .yh-to { column-gap: var(--yh-skills-cgap-phone); }
  .yh-hl { --fs: var(--yh-hl-fs-phone); }
}
@media (prefers-reduced-motion: reduce) {
  .yh-role, .yh-skills { animation: none; }
  .yh-track { height: var(--nav-h); }   /* the script sets the measured nav height */
}

/* v4.2 (owner 2026-10-14): no layout shift on load. The hero copy and the held page are placed by js/home-hero.js; until then they
   are hidden (visibility only), so they appear in place instead of jumping there. Fallback: shown after 1.5 s without the script. */
html:not(.yh-placed) .yh-copy, html:not(.yh-placed) .yh-hold > main { visibility: hidden; animation: yh-show 0s linear 2.5s forwards; }   /* v4.3: safety reveal 2.5 s */
@keyframes yh-show { to { visibility: visible; } }