/* ---------------------------------------------------------------
   Hero: the original specimen body, top-left justified instead of
   floated in the vertical center of the viewport. Everything from
   .typographic-core down is the shipped page's CSS unchanged,
   except colors that moved onto theme tokens.
------------------------------------------------------------------*/
.hero{
  padding: var(--space-3) 0 0 0;
  position: relative;
}

.typographic-core{position: relative;}

.anno-line{
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.anno-line .line{
  width: min(950px, 67vw);
  height: 1px;
  flex-shrink: 0;
}

.anno-line .label{
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
  opacity: 0.7;
}

.line-solid { background: currentColor; }
.line-dashed {
  background: repeating-linear-gradient(90deg,
    currentColor 0px, currentColor 4px,
    transparent 4px, transparent 8px);
}
.line-dotted {
  background: repeating-linear-gradient(90deg,
    currentColor 0px, currentColor 1px,
    transparent 1px, transparent 5px);
}
.line-varied {
  background: repeating-linear-gradient(90deg,
    currentColor 0px, currentColor 1px,
    transparent 1px, transparent 4px,
    currentColor 4px, currentColor 9px,
    transparent 9px, transparent 16px);
}
.line-dot-dash {
  background: repeating-linear-gradient(90deg,
    currentColor 0px, currentColor 1px,
    transparent 1px, transparent 4px,
    currentColor 4px, currentColor 7px,
    transparent 7px, transparent 13px);
}

/* Line positions, set dynamically by JS. Greyscale: the hero follows the
   house rule (no accent hue outside the content swatch), and the five lines
   are told apart by dash pattern, not color. The per-theme alpha tokens stay
   the density knobs: a grey hairline still needs more alpha on paper than on
   the navy surface. */
.anno-ascender,
.anno-cap-height,
.anno-x-height,
.anno-baseline,
.anno-descender {
  top: 0;
  color: color-mix(in srgb, var(--fg-muted) calc(var(--anno-al) * 100%), transparent);
}

.anno-ascender .label,
.anno-cap-height .label,
.anno-x-height .label,
.anno-baseline .label,
.anno-descender .label {
  color: color-mix(in srgb, var(--fg-muted) calc(var(--anno-label-al) * 100%), transparent);
}

.wordmark{
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(60px, 8.5vw, 122px);
  letter-spacing: 6px;
  line-height: 1;
  color: var(--fg);
  margin-bottom: 28px;
  position: relative;
  z-index: 2;
}

/* Grey, not the brand pink: the type/orem break is a value step now. */
.wordmark .interpunct { color: var(--fg-muted); }

.subtitle-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.ipa{
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: 6px;
  color: var(--fg-muted);
  line-height: normal;
}
.ipa-n{ font-weight: 400; }
.ipa-f{ font-weight: 400; }

.tagline{
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: 2.7px;
  color: var(--fg-muted);
  font-style: italic;
  line-height: normal;
}

.coming-soon{
  padding-top: 120px;
  padding-bottom: 40px;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--accent-gold);
}