/* hero.css — the specimen (over-built moment) + bio ledger */

.hero { position: relative; padding-top: var(--header-h); min-height: min(100vh, 980px); display: flex; flex-direction: column; }
.hero-stage { position: relative; padding: clamp(56px, 12vh, 140px) var(--margin) 0; flex: 0 0 auto; }

/* wordmark */
.wm-wrap { position: relative; }
.wm { position: relative; z-index: 60; margin: 0; line-height: 1; white-space: nowrap; pointer-events: none; mix-blend-mode: difference; }
.wm-t {
  display: inline-block; font-weight: 200; letter-spacing: var(--track-display); line-height: 1;
  font-size: var(--fs-wordmark);       /* JS refits to the margin width */
  transform-origin: 0 0; will-change: transform;
  color: var(--ink);
}
.wm.is-docked .wm-t { z-index: 60; }
.wm-t { position: relative; z-index: 60; color: #fff; }
html[data-palette="kelvin"] .wm, html[data-palette="cobalt"] .wm, html[data-palette="moss"] .wm, html[data-palette="plum"] .wm { mix-blend-mode: normal; }
html[data-palette="kelvin"] .wm-t, html[data-palette="cobalt"] .wm-t, html[data-palette="moss"] .wm-t, html[data-palette="plum"] .wm-t { color: var(--ink); }

/* the drawing: an SVG that overlays the wordmark box; JS positions everything from measured glyph rects */
.wm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.wm-svg .g-rule { stroke: var(--ink); stroke-opacity: .22; stroke-width: 1; fill: none; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.wm-svg .g-rule.solid { stroke-dasharray: none; stroke-opacity: .16; }
.wm-svg .g-red { stroke: var(--red); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.wm-svg .g-tick { stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wm-svg .g-box { stroke: var(--red); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 120ms var(--ease-out); }
.wm-svg .g-box.is-on { opacity: 1; }
.wm-svg .g-fill { fill: var(--red); }
.wm-svg .g-cross { stroke: var(--red); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 120ms var(--ease-out); }
.wm-svg .g-cross.is-on { opacity: .9; }

/* labels: mono, red, positioned in px by JS (left/top) */
.wm-labels { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.wm-labels .lb {
  position: absolute; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  line-height: 1; color: var(--red); white-space: nowrap; opacity: 0; transform: translateY(2px);
  font-variant-numeric: tabular-nums;
}
.wm-labels .lb.is-in { opacity: 1; transform: none; transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.wm-labels .lb.muted { color: var(--ink-3); }
.wm-labels .lb.hover { color: var(--ink); background: var(--ground); padding: 2px 4px; margin: -2px -4px; }
.wm-labels .lb.hover b { font-weight: 500; color: var(--red); }

/* wordmark particle canvas (js/heroText.js) */
.hero-text-canvas { position: absolute; inset: 0; z-index: 61; pointer-events: none; mix-blend-mode: difference; }

/* invisible glyph hit boxes for the inspect-hover */
.wm-hit { position: absolute; inset: 0; z-index: 45; }
.wm-hit i { position: absolute; display: block; cursor: crosshair; }
.wm.is-docked ~ .wm-hit { display: none; }

/* loupe: circular magnifier that follows the pointer over the glyphs */
.loupe { position: absolute; left: 0; top: 0; width: 128px; height: 128px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ground); overflow: hidden; pointer-events: none; z-index: 62; opacity: 0; transition: opacity 140ms var(--ease-out); box-shadow: 0 0 0 4px var(--ground); will-change: transform; }
.loupe.is-on { opacity: 1; }
.loupe-t { position: absolute; left: 0; top: 0; font-family: var(--font-sans); font-weight: 200; line-height: 1; white-space: nowrap; color: var(--ink); will-change: transform; }
.loupe-x, .loupe-b { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--red); opacity: .8; }
.loupe-l { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font: 500 var(--fs-micro)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--red); background: var(--ground); padding: 2px 5px; border: 1px solid var(--red); border-radius: 999px; }
@media (max-width: 720px) { .loupe { display: none; } }

/* specimen tag under the wordmark */
.hero-tag { position: relative; z-index: 3; margin-top: clamp(14px, 2vh, 22px); color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: baseline; opacity: 0; }
.hero-tag.is-in { animation: tagin 400ms var(--ease-out) 900ms both; }
@keyframes tagin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero-tag #hero-em { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* bio ledger inside the hero: sits in the lower third */
.bio { margin-top: auto; padding-top: clamp(48px, 9vh, 120px); padding-bottom: clamp(48px, 9vh, 120px); }
.bio-mail { margin-top: 1.4em; }
.subtext { margin-top: 2em; font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }

@media (max-width: 720px) {
  .hero { min-height: 0; }
  .hero-stage { padding-top: clamp(40px, 8vh, 80px); }
  .hero-tag #hero-em, .hero-tag span:nth-of-type(6) { display: none; }
  .bio { margin-top: 0; padding-top: clamp(40px, 8vh, 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tag { opacity: 1; animation: none !important; }
  .wm-labels .lb { opacity: 1; transform: none; }
}