/* =============================================================================
   Typography and spacing tuning
   -----------------------------------------------------------------------------
   Loaded after theme.css, so it only overrides what needs changing.

   The original scale topped out at 3.75rem — 60px — for h1. At that size a
   two-line hero heading fills half a laptop screen before the reader has seen
   what the site does. The ratio was also inconsistent: roughly 1.25 between
   the small steps but 1.36 higher up, which is why the largest sizes ran away
   from the rest of the page.

   This resets the scale to a steady 1.25 (a major third) all the way up and
   caps h1 at 2.85rem. Everything stays fluid, so small screens are unaffected;
   only the wide-screen upper bound comes down.
   ========================================================================== */

:root {
    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
    --step-0:  clamp(1.00rem, 0.98rem + 0.12vw, 1.06rem);
    --step-1:  clamp(1.18rem, 1.13rem + 0.24vw, 1.33rem);
    --step-2:  clamp(1.42rem, 1.32rem + 0.45vw, 1.72rem);
    --step-3:  clamp(1.70rem, 1.52rem + 0.78vw, 2.24rem);
    --step-4:  clamp(2.00rem, 1.72rem + 1.20vw, 2.85rem);
}

/* Large text needs tighter tracking and leading than body copy. Left at the
   body defaults, a 2.8rem heading looks loose and slightly unfinished. */
h1, .display {
    line-height: 1.12;
    letter-spacing: -0.021em;
}

h2 { line-height: 1.2;  letter-spacing: -0.015em; }
h3 { line-height: 1.28; letter-spacing: -0.008em; }

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

/* The hero is the one place step-4 is justified, and even there the line is
   capped so it wraps at a readable measure instead of stretching across a
   1600px monitor. */
.section:first-of-type h1,
.hero h1 {
    font-size: var(--step-4);
    max-width: 18ch;
}

@media (min-width: 900px) {
    .section:first-of-type h1,
    .hero h1 { max-width: 22ch; }
}

/* Body copy sits comfortably between 60 and 75 characters per line. Without a
   cap, paragraphs on a wide screen run past 120 characters and the eye starts
   losing its place returning to the left margin. */
p, .muted, .faint { max-width: 68ch; }

.wrap p.lead,
.section > .wrap > p { max-width: 62ch; }

/* Inside cards and table cells the container already constrains the width, so
   the cap there just creates ragged right edges. */
.card p, .panel p, td p, .legal-body p { max-width: none; }

/* ---- The oversized numbers on result pages ------------------------------- */

/* Numerology and milan show a single figure at step-4. As a lone glyph that is
   fine, but it was inheriting body line-height and pushing the card tall. */
.display[style*="--step-4"],
.grad-text.display {
    line-height: 1;
}

/* ---- Eyebrow labels ------------------------------------------------------ */

.eyebrow {
    font-size: var(--step--2);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-faint);
    margin-bottom: 0.5rem;
}

/* ---- Section rhythm ------------------------------------------------------ */

/* Sections were spaced for the old, larger headings. With smaller type the
   original gaps read as gaps rather than as structure. */
.section { padding-block: clamp(2.2rem, 4vw, 3.6rem); }
.section:first-of-type { padding-block-start: clamp(1.8rem, 3vw, 2.8rem); }

/* ---- Tables -------------------------------------------------------------- */

/* Planetary tables are dense and numeric. Tabular figures keep the degree
   columns aligned; without them the digits jitter row to row. */
.table .num, .figure, .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.table th {
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- Small screens ------------------------------------------------------- */

@media (max-width: 560px) {
    /* One long word — "Vimshottari", "विशाखा", a place name — can force
       horizontal scrolling on a narrow phone. Breaking is preferable to a
       sideways-scrolling page. */
    h1, h2, h3 { overflow-wrap: anywhere; }

    .section:first-of-type h1,
    .hero h1 { max-width: none; }

    .btn--lg { font-size: var(--step-0); }
}