/* HQ layer (Oct 2026 redesign): golden-ratio scale, glass + tactile controls, editorial hero.
   Loaded last; overrides dev.css / depth.css. φ = 1.618 drives the type and space scales below. */
:root {
  --phi: 1.618;
  /* Type scale from 16px × φ^n, rounded: 16 · 25.9 · 41.9 · 67.8 · 109.7 */
  --fs-1: 1rem; --fs-2: 1.618rem; --fs-3: 2.618rem; --fs-4: 4.236rem; --fs-5: 6.854rem;
  /* Space scale from 8px × φ^n */
  --sp-1: 0.5rem; --sp-2: 0.809rem; --sp-3: 1.309rem; --sp-4: 2.118rem; --sp-5: 3.427rem; --sp-6: 5.545rem;
  --bg: #0a0b0f; --surface: #12141b; --surface-2: #1a1d27; --line: #252935;
  --ink: #f2efe8;           /* warm ivory */
  --muted: #a9adb9; --faint: #9195a2;
  --glass: rgba(18, 21, 30, 0.58); --glass-edge: rgba(255, 255, 255, 0.09); --glass-hi: rgba(255, 255, 255, 0.07);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms; --t-med: 240ms;
}
html { background: var(--bg); }

/* ---------- Materials ---------- */
.glass { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 20px 50px -24px rgba(0, 0, 0, 0.8); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: #141721; } }

/* ---------- Tactile buttons: primary raised, secondary recessed ---------- */
.btn { min-height: 2.75rem; transition: background-color var(--t-fast), transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), color var(--t-fast), border-color var(--t-fast); }
.btn--primary { background: linear-gradient(180deg, #3a67f7, #2a55e6); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 22px -12px rgba(0, 0, 0, 0.9); }
.btn--primary:hover { background: linear-gradient(180deg, #4673ff, #3160f0); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 28px -14px rgba(0, 0, 0, 0.95); }
.btn--primary:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.4); }
.btn--soft { background: rgba(255, 255, 255, 0.035); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.04); }
.btn--soft:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); }
.btn--soft:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45); }
.btn--xl { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1rem; }
.btn--xl span { transition: transform var(--t-med) var(--ease-out); }
.btn--xl:hover span { transform: translateX(3px); }
.ask__q[aria-selected="true"], .entry__link:hover, .skip { background: var(--accent-strong); color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 1; overflow-x: clip; max-width: 1240px; margin: 0 auto; min-height: 100svh;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vh, 4rem);
  display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__copy { display: flex; flex-direction: column; min-width: 0; }
.hero__kicker { display: flex; flex-wrap: wrap; gap: 0.35rem 0; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hero__kicker span + span::before { content: ""; display: inline-block; width: 1.5rem; height: 1px; margin: 0 0.75rem; vertical-align: 0.3em; background: var(--line); }
.hero__name { margin-top: var(--sp-4); font-size: clamp(3.1rem, 1rem + 7.4vw, var(--fs-5)); line-height: 0.92; letter-spacing: -0.05em; font-weight: 600; color: var(--ink); }
.hero__name span { display: block; }
.hero__name span:last-child { color: transparent; -webkit-text-stroke: 1.5px rgba(242, 239, 232, 0.9); }
.hero__statement { margin-top: var(--sp-4); max-width: 34ch; font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero__actions { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__facts { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; overflow: hidden; max-width: 34rem; }
.hero__facts div { padding: var(--sp-3) var(--sp-3) var(--sp-3) 1.25rem; }
.hero__facts div + div { border-left: 1px solid var(--glass-edge); }
.hero__facts dd { font-family: var(--mono); font-size: clamp(1.6rem, 1rem + 1.6vw, var(--fs-3)); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero__facts dd.is-live { color: var(--gold); }
.hero__facts dt { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }

/* Portrait frame: a golden rectangle (1 : φ). The head breaks out of the top of the panel. */
.hero__frame { position: relative; margin: 0; width: min(100%, calc((100svh - 7rem) / 1.618)); aspect-ratio: 1 / 1.618; justify-self: end; container-type: inline-size;
  --px: 0; --py: 0; }
.hero__atmo { position: absolute; inset: 30% 0 0 0; border-radius: 22px; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 18%, rgba(126, 164, 255, 0.22), transparent 70%), linear-gradient(180deg, #17203d 0%, #10131d 62%, #0c0e14 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.hero__atmo::after { /* hairline horizon + faint grid, the 'instrument' detail */
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 38.2%, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 23.6% 100%; }
.hero__cut { position: absolute; left: -15%; width: 130%; height: auto; max-width: none; bottom: 0; transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px), 0);
  clip-path: inset(0 11.5% 0 11.5% round 0 0 22px 22px); }
.hero__cut--head { clip-path: polygon(30% 0, 76% 0, 76% 50%, 66% 58%, 34% 58%, 30% 50%); z-index: 3; }
.hero__wrap { position: absolute; z-index: 2; left: 21.5%; top: 50%; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: "IBM Plex Sans Condensed", var(--font); font-weight: 700; font-size: 29cqw; line-height: 0.8; letter-spacing: -0.02em; color: var(--ink);
  transform: translate(-50%, -50%) rotate(-90deg) translate3d(calc(var(--py) * -14px), calc(var(--px) * 110px), 0); }
/* After rotate(-90deg) the local y axis is screen x: moving the cursor right slides the word across the face. */

.hero__wrap--ghost { z-index: 4; opacity: clamp(0.45, 0.7 + var(--px) * 1.2, 1); color: rgba(242, 239, 232, 0.16); -webkit-text-stroke: 1.5px rgba(242, 239, 232, 0.85); }

/* Entrance: word, then portrait, then copy. Content is visible without JS or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero:not(.is-in) .hero__wrap { clip-path: inset(0 100% 0 0); }
  .hero:not(.is-in) .hero__cut, .hero:not(.is-in) .hero__atmo { opacity: 0; translate: 0 18px; }
  .hero:not(.is-in) .hero__copy > * { opacity: 0; translate: 0 14px; }
  .hero__wrap { transition: clip-path 900ms var(--ease-out); }
  .hero__cut, .hero__atmo { transition: opacity 700ms var(--ease-out) 250ms, translate 900ms var(--ease-out) 250ms; }
  .hero__copy > * { transition: opacity 600ms var(--ease-out), translate 700ms var(--ease-out); }
  .hero__copy > :nth-child(1) { transition-delay: 380ms; } .hero__copy > :nth-child(2) { transition-delay: 440ms; }
  .hero__copy > :nth-child(3) { transition-delay: 520ms; } .hero__copy > :nth-child(4) { transition-delay: 600ms; }
  .hero__copy > :nth-child(5) { transition-delay: 680ms; }
}

/* ---------- After the hero: the sidebar keeps nav, loses the repeated portrait ---------- */
.shell--after-hero .side__photo { display: none; }
.shell--after-hero .side__name { margin-top: 0; font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.618rem); }
.shell--after-hero { border-top: 1px solid var(--line); }
.sec__label { color: var(--accent); }
.now { background: var(--glass); }

/* ---------- Tablet / phone: recomposed, not shrunk ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 2rem; gap: 1.5rem; }
  .hero__frame { order: -1; justify-self: center; width: min(78vw, 360px); }
  .hero__facts { max-width: none; }
  .hero__name { margin-top: var(--sp-3); }
}
@media (max-width: 480px) {
  .hero__facts div { padding: 0.9rem 0.75rem; }
  .hero__actions .btn--xl { flex: 1 1 100%; justify-content: center; }
  .hero__actions .btn--soft { flex: 1 1 0; justify-content: center; min-height: 3rem; }
}
@media (max-width: 600px) {
  .hero__kicker { gap: 0.25rem 0.9rem; }
  .hero__kicker { flex-direction: column; }
  .hero__kicker span + span::before { display: none; }
}