:root {
  --parchment-ink: #241a0c;
  --parchment-ink-soft: #4a361d;
  --parchment-accent: #4a361d;
  --parchment-accent-hover: #2f2210;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: #ebe0c4;
  overflow-x: clip;
}

html, body {
  height: 100%;
  min-height: 100%;
}

body {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: var(--parchment-ink);
  background: #ebe0c4;
  overflow-x: clip;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/cormorant-regular-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-italic-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.vhq-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: #ebe0c4;
}

.vhq-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
 * Crispy parchment — light sheet, not brown mud.
 * soft-light / overlay add tooth without darkening the page.
 */
.vhq-base {
  background:
    /* soft sun-bleached center */
    radial-gradient(ellipse 90% 75% at 40% 35%, #f4ead0 0%, rgba(244,234,208,0) 62%),
    radial-gradient(ellipse 70% 60% at 78% 70%, #e8d9b4 0%, rgba(232,217,180,0) 55%),
    /* overall cream paper */
    linear-gradient(165deg, #f0e4c8 0%, #e9d9b2 42%, #e2d0a6 78%, #dcc89a 100%);
}

/* Micro flecks / pulp bits — high frequency, very light */
.vhq-speckle {
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(120,88,42,0.14) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 67% 41%, rgba(120,88,42,0.12) 0 0.5px, transparent 1px),
    radial-gradient(circle at 34% 72%, rgba(100,72,36,0.11) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 88% 22%, rgba(120,88,42,0.1) 0 0.45px, transparent 0.95px),
    radial-gradient(circle at 51% 9%,  rgba(90,66,30,0.1) 0 0.5px, transparent 1px),
    radial-gradient(circle at 22% 55%, rgba(120,88,42,0.09) 0 0.4px, transparent 0.9px),
    radial-gradient(circle at 79% 81%, rgba(100,72,36,0.11) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 43% 38%, rgba(120,88,42,0.08) 0 0.4px, transparent 0.85px);
  background-size: 180px 160px, 220px 190px, 200px 170px, 240px 200px,
                   190px 150px, 210px 180px, 230px 195px, 170px 140px;
  background-repeat: repeat;
}

.vhq-texture-svg {
  width: 100%;
  height: 100%;
}

/* Fine crispy grain — soft-light keeps paper bright */
.vhq-grain {
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

/* Directional pulp fibers */
.vhq-fiber {
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* Whisper edge only — no heavy brown burn */
.vhq-edge {
  background:
    radial-gradient(
      ellipse 120% 110% at 50% 45%,
      rgba(255,248,230,0) 58%,
      rgba(160,120,60,0.08) 88%,
      rgba(120,85,40,0.14) 100%
    );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* Keep stage fallback bright if layers lag */

/* Copy — left, calm, no chrome */
.vhq-hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding: clamp(40px, 7vw, 104px);
}

.vhq-hero-inner {
  max-width: min(640px, 100%);
}

.vhq-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
  color: var(--parchment-accent);
}

.vhq-badge-name {
  font-size: 13px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 600;
}

.vhq-badge-rule {
  display: block;
  flex: 1;
  max-width: 72px;
  min-width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.vhq-badge-status {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}

.vhq-headline {
  margin: 0;
  font-size: clamp(40px, 6.6vw, 92px);
  font-weight: 500;
  color: var(--parchment-ink);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.vhq-subhead {
  margin: 28px 0 0;
  font-size: clamp(18px, 2.1vw, 26px);
  font-style: italic;
  color: var(--parchment-ink-soft);
  max-width: 34ch;
  line-height: 1.45;
  text-wrap: pretty;
}

/* GFB easter egg — quiet mark, fat invisible hit target */
.vhq-gfb {
  position: absolute;
  z-index: 4;
  left: max(6px, env(safe-area-inset-left, 0px));
  bottom: max(4px, env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px 6px 12px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment-ink);
  opacity: 0.18;
  transition: opacity 0.28s ease;
  pointer-events: auto;
  line-height: 1;
}

.vhq-gfb:hover,
.vhq-gfb:focus-visible {
  opacity: 0.72;
  outline: none;
}

.vhq-gfb:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile: one quiet corner stamp + clear type/diagram hierarchy */
@media (max-width: 900px) {
  .vhq-hero {
    padding:
      max(44px, env(safe-area-inset-top, 0px) + 32px)
      max(24px, env(safe-area-inset-right, 0px) + 18px)
      max(56px, env(safe-area-inset-bottom, 0px) + 40px)
      max(24px, env(safe-area-inset-left, 0px) + 18px);
    /* optical center the stack — balanced parchment, not a dead lower half */
    align-items: center;
    justify-content: flex-start;
  }

  .vhq-hero-inner {
    max-width: 100%;
    width: 100%;
  }

  .vhq-badge-row {
    margin-bottom: 1.5rem;
    gap: 0.75rem 1rem;
}

  .vhq-badge-name,
  .vhq-badge-status {
    letter-spacing: 0.22em;
    font-size: 11px;
  }

  .vhq-badge-rule {
    max-width: 48px;
    min-width: 28px;
  }

  .vhq-headline {
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 14ch;
  }

  .vhq-subhead {
    margin-top: 1.2rem;
    max-width: 22ch;
    font-size: 17px;
    line-height: 1.5;
  }

  .vhq-diagram {
    margin-top: 1.75rem;
    opacity: 1;
  }

  .vhq-diagram--train {
    width: 100%;
    max-width: 100%;
    margin-top: 1.75rem;
  }
}

/* Short viewports: quieter stamp, tighter type */
@media (max-width: 900px) and (max-height: 720px) {
  .vhq-hero {
    padding-bottom: max(52px, env(safe-area-inset-bottom, 0px) + 40px);
  }

  .vhq-badge-row {
    margin-bottom: 1.1rem;
}

  .vhq-subhead {
    margin-top: 0.9rem;
  }

  .vhq-diagram {
    margin-top: 1.15rem;
  }
}

/* Very small phones: type scale */
@media (max-width: 400px) {
  .vhq-hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  .vhq-headline {
    font-size: 32px;
  }

  .vhq-subhead {
    font-size: 16px;
    margin-top: 1.15rem;
  }
}

/* Hero diagram — the machine (2026-07-18) */
.vhq-diagram {
  margin: clamp(32px, 4vw, 56px) 0 0;
  opacity: 0.94;
}
.vhq-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}
.vhq-diagram--train {
  /* fit-one-page: never taller than the viewport space left under the copy */
  width: clamp(480px, min(76vw, calc((100svh - 600px) * 1.6)), 1120px);
  max-width: none;
}
/* short desktop viewports: tighten the copy so page + machine still fit one screen */
@media (min-width: 901px) and (max-height: 920px) {
  .vhq-headline { font-size: clamp(34px, 4.6vw, 64px); }
  .vhq-badge-row { margin-bottom: 22px; }
  .vhq-subhead { margin-top: 16px; }
  .vhq-diagram { margin-top: 20px; }
  .vhq-diagram--train {
    width: clamp(420px, min(70vw, calc((100svh - 460px) * 1.6)), 1120px);
  }
}
@media (max-width: 900px) {
  /* hierarchy owned by the main mobile block above — keep diagram full-bleed width */
  .vhq-diagram--train {
    width: 100%;
    max-width: 100%;
  }
}
/* short landscape phones: keep the tease clean, copy only */
@media (max-width: 900px) and (max-height: 720px) and (orientation: landscape) {
  .vhq-diagram--train { display: none; }
}