/* ==========================================================================
   Shared fonts. Loaded LAST on every page.

   Type system (fonts only; layout, sizes and spacing come from each page's
   own stylesheet, matching the live site)
   - Fraunces: all headings.
   - Cormorant Garamond italic: accent lines and quotes only.
   - Inter: body text, labels, buttons, and small caps.

   Legacy tokens used by older page stylesheets (--serif-display, --serif-head,
   --serif-body, --sans, --luxury-serif, --luxury-sans) are re-pointed here so
   old rules use the unified fonts.
   ========================================================================== */

:root {
    --font-display: 'Fraunces', Georgia, serif;
    --font-accent: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --serif-display: var(--font-display);
    --serif-head: var(--font-accent);
    --serif-body: var(--font-body);
    --sans: var(--font-body);
    --luxury-serif: var(--font-display);
    --luxury-sans: var(--font-body);
}

body {
    margin: 0; /* the quiz page kept the browser's 8px body margin, which pushed the full-width header off-screen */
    font-family: var(--font-body);
}

/* Form controls do not inherit the page font by default. */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); text-wrap: pretty; }
p, li, blockquote, figcaption { text-wrap: pretty; }

.type-accent { font-family: var(--font-accent); font-style: italic; }

/* One small line under every Snapshot text invitation: what happens next. */
.expect-line {
    margin: 0.6rem 0 0;
    max-width: 720px;
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.8;
}

/* The Snapshot invitation: reads like a sentence, not a label. */
a.snapshot-link {
    color: #f2eadb;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.5;
    text-transform: none;
    text-decoration: underline;
    text-decoration-color: #c5a95e;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.28em;
}
a.snapshot-link:hover, a.snapshot-link:focus-visible { color: #fffdf8; text-decoration-color: #e6d9b8; }