/* v31: lower the central composition gently, with a closer introduction.
   The principle strip moves only 8px; the CTA keeps its established position.
   Geometry controllers still measure the final word and every contact box. */
#site-main { display: block; }
#hero {
  --hero-gap-tags: clamp(14px, 2.5vh, 28px);
  --hero-gap-summary: clamp(16px, 3.2vh, 38px);
  --hero-gap-bottom: clamp(38px, 6.5vh, 72px);
  --hero-gap-cta: clamp(16px, 3vh, 32px);
}
.hero-composition { top: clamp(16px, 2.8vh, 32px); padding-top: clamp(4px, 1vh, 8px); padding-bottom: clamp(12px, 2vh, 24px); }
.hero-prelude { position: relative; top: 8px; }
.hero-focus { display:flex; flex-direction:column; align-items:center; width:100%; min-width:0; margin-top: clamp(-36px, -3vh, -16px); margin-bottom: clamp(12px, 1.8vh, 22px); }
.hero-tags { margin-bottom: var(--hero-gap-tags); }
.hero h1 { font-size: clamp(30.8px,3.74vw,64px); }
.typography-stage { position: relative; margin-top: 20px; }
/* The opaque, dithered canvas belongs directly to #hero, below every content
   layer. It never receives a CSS opacity animation or a backdrop filter. */
.hero-light-canvas { position: absolute; z-index: 0; display: block; max-width: none; pointer-events: none; user-select: none; }
.hero-light-canvas[hidden] { display: none; }
/* Static fallback, built by scripts/bake-hero-light.js. Without stage isolation
   its negative layer sits behind the entire composition, including the heading. */
.typography-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(50% + 44px);
  left: 50%;
  width: calc(clamp(448px, 84vw, 1540px) * 1.08);
  aspect-ratio: 1.4;
  transform: translate(-50%, -50%);
  /* The same quiet ~#1a1a1e centre, with spatial dithering already baked in. */
  background: url('./assets/hero-light-dither.png') center / 100% 100% no-repeat;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
/* No gradient opacity tween: hero-light.js computes each finite fade frame
   before dithering. The fallback is always a single stable image. */
.hero[data-hero-boot='pending'] .typography-stage::before { opacity: 0; }
.hero[data-hero-light-ready='true'] .typography-stage::before { display: none; }
.word { font-size: clamp(40px,12.28vw,230px); }
.hero-summary { max-width: 920px; margin-top: var(--hero-gap-summary); line-height: 1.6; }
/* Shift only the introduction's paint box. Its reserved height and the hover
   detail stay put, so the accepted word, strip and CTA keep their positions. */
.hero-summary-default { position: relative; top: -8px; }
.hero-summary-copy { font-size: 20px; line-height: 1.6; text-wrap: balance; }
.hero-summary-phrase { display: inline; }
@media (max-width: 900px) {
  .hero-summary-subphrase { display: inline-block; }
  .hero-summary-break { display: none; }
}
.hero-summary-break { display: initial; }
.hero-actions { width: auto; }
.hero-actions > .button { min-width: 222px; }
.hero-bottom { flex-direction: column; align-items: center; gap: var(--hero-gap-bottom); padding-top: var(--hero-gap-cta); }

/* Delimiters, not cards. Hidden copy still occupies its exact layout space,
   so unlocking any combination cannot move the word, key, or page below it. */
.hero-principles { position: relative; top: 8px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: min(1752px, 100%); padding: 0; margin: 0 auto; list-style: none; }
.hero-principle { position: relative; min-width: 0; padding: 4px 24px; border-left: 1px solid #ffffff16; text-align: left; }
.hero-principle:first-child { border-left: 0; }
.hero-principle-text { display: flex; flex-direction: column; gap: 7px; color: #a5a5ad; font-size: 12.5px; line-height: 1.7; overflow-wrap: anywhere; }
.hero-principle-text strong { color: #dedde5; font-size: 13px; font-weight: 600; line-height: 1.4; }
.hero-principle-text[hidden] { display: flex !important; visibility: hidden; opacity: 0; pointer-events: none; }
.hero-principle-question { position: absolute; inset: 0; display: grid; place-items: center; color: #8d879d; pointer-events: none; }
.hero-principle-question svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.hero-principle-question .question-dot { fill: currentColor; stroke: none; }
.hero-principle[data-state='unlocked'] .hero-principle-text { animation: hero-meaning-in 240ms cubic-bezier(.2,.7,.2,1) both; }
.hero-principle[data-state='locked'] .hero-principle-question { animation: hero-meaning-in 180ms ease-out both; }
@keyframes hero-meaning-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* Shares the established entrance clock: the strip follows the short copy,
   then the single CTA. Its measured box is stable even while transparent. */
.hero[data-hero-boot='pending'] .hero-principles { opacity: 0; }
.hero[data-intro-state='playing'] .hero-principles { --enter-delay: calc(var(--intro-summary,1490ms) + 50ms); animation: hero-opacity-in 650ms cubic-bezier(.42,0,.58,1) var(--enter-delay) both; }

@media (max-width:1320px) {
  .hero-principles { max-width: 810px; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .hero-principle { padding-inline: 24px; }
  .hero-principle:nth-child(3n + 1) { border-left: 0; }
  .hero-principle-text { font-size: 13px; }
  .hero-principle-text strong { font-size: 13px; }
}
@media (max-width:900px) {
  .hero h1 { font-size: 39.6px; }
  .word { font-size: 12.02vw; }
}
@media (max-width:700px) {
  .hero-summary-break { display: none; }
  .hero-principle { padding-inline: 14px; }
}
@media (max-width:600px) {
  .hero-composition { top: 24px; padding-top: 8px; padding-bottom: 22px; }
  .hero-focus { margin-top:-20px; margin-bottom:16px; }
  .hero-tags { margin-bottom: 28px; }
  .hero h1 { font-size: clamp(26.4px,6.6vw,38.5px); }
  .typography-stage { margin-top: 18px; }
  .word { font-size: 12.28vw; }
  .hero-summary { margin-top: 28px; line-height: 1.6; }
  .hero-summary-copy { font-size: 18px; }
  .hero-principles { row-gap: 22px; }
  .hero-principle { padding-inline: 12px; }
  .hero-principle-text { font-size: 12px; line-height: 1.7; }
  .hero-principle-text strong { font-size: 12.5px; line-height: 1.4; }
  .hero-bottom { padding-top: 16px; }
  .hero-actions { width: auto; }
  .hero-actions > .button { min-width: 224px; }
}
@media (max-width:380px) {
  .hero h1 { font-size: 26.4px; }
  .hero-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-principle { padding-inline: 12px; }
  .hero-principle:nth-child(3n + 1) { border-left: 1px solid #ffffff16; }
  .hero-principle:nth-child(2n + 1) { border-left: 0; }
}
@media (max-height:940px) and (min-width:1101px) {
  .hero-composition { top: 32px; padding-top: 4px; padding-bottom: 14px; }
  .hero-focus { margin-top:-32px; margin-bottom:20px; }
  .hero-tags { margin-bottom: 26px; }
  .typography-stage { margin-top: 18px; }
  .hero-summary { margin-top: 30px; }
}
@media (max-height:780px) and (min-width:601px) {
  .hero-composition { top: 28px; padding-top: 8px; padding-bottom: 12px; }
  .hero-focus { margin-top:-26px; margin-bottom:18px; }
  .hero-tags { margin-bottom: 24px; }
  .hero h1 { font-size: clamp(30.8px,3.3vw,50.6px); }
  .typography-stage { margin-top: 16px; }
  .word { font-size: min(11.07vw,195px); }
  .hero-summary { margin-top: 26px; }
}
@media (max-height:600px) and (min-width:601px) {
  .hero { min-height: 630px; }
  .hero-composition { padding-top: 16px; }
  .word { font-size: min(10.54vw,158px); }
  .hero-summary { margin-top: 22px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero .typography-stage::before { opacity: 1 !important; animation: none !important; }
  .hero-principles, .hero-principle-text, .hero-principle-question { animation: none !important; transition: none !important; }
}