/* ==========================================================================
   Prompt Genie — base typography and layout primitives
   Layer 3 of 5. Serif display type, section rhythm, a11y helpers.
   ========================================================================== */

h1, h2, h3, h4,
.pg-display {
  font-family: var(--pg-font-display);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.18; }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); }

/* Small-caps gold kicker above headings — the signature luxury detail */
.pg-eyebrow {
  display: block;
  font-family: var(--pg-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pg-gold-bright);
  margin-bottom: 0.75rem;
}

/* Thin gold divider */
.pg-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pg-gold-deep), transparent);
  margin: 2.5rem 0;
}

.pg-section { padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem); }

.pg-text-gold { color: var(--pg-gold-bright); }
.pg-text-muted { color: var(--pg-ink-muted); }

/* Accessibility */
.pg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pg-skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--pg-gold);
  color: var(--pg-gold-ink);
  border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
}
.pg-skip:focus { top: 0; }

:focus-visible { outline: 2px solid var(--pg-gold); outline-offset: 2px; }

/* Show/hide contract used by the tool JS (Tailwind-era class name kept:
   the untouched tool scripts toggle exactly this class). */
.hidden { display: none !important; }