/* =================================================================
   PROJECT DOOMSDAY — Typography System (Oberklasse)
   Layered on top of style.css; does not replace any utility classes.
   Fonts via Google Fonts (free, variable, subsettable):
     - Fraunces      : Display serif (editorial weight)
     - Inter         : Body sans (optical size adjusted)
     - JetBrains Mono: Numerals, counter, technical labels
   ================================================================= */

/* — Font loading (italics and numeric axes enabled) — */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&family=JetBrains+Mono:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    /* Family tokens */
    --font-display: 'Fraunces', 'GT Alpina', 'Iowan Old Style', 'Palatino', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

    /* Modular type-scale (base 16px, ratio ≈ 1.25) */
    --fs-xs:    0.78rem;   /* 12.5px  — micro labels */
    --fs-sm:    0.875rem;  /* 14px    — UI meta */
    --fs-base:  1rem;      /* 16px    — body */
    --fs-lg:    1.125rem;  /* 18px    — lead paragraph */
    --fs-xl:    1.375rem;  /* 22px    — h5/h6 */
    --fs-2xl:   1.75rem;   /* 28px    — h4 */
    --fs-3xl:   2.25rem;   /* 36px    — h3 */
    --fs-4xl:   3rem;      /* 48px    — h2 */
    --fs-5xl:   4rem;      /* 64px    — h1 */
    --fs-display-1: clamp(3.5rem, 7.5vw, 6.5rem);
    --fs-display-2: clamp(2.5rem, 5vw, 4.5rem);

    /* Line-height scale */
    --lh-tight:   1.05;
    --lh-snug:    1.2;
    --lh-normal:  1.55;
    --lh-relaxed: 1.7;

    /* Letter-spacing */
    --ls-tightest: -0.035em;
    --ls-tight:    -0.015em;
    --ls-normal:   0;
    --ls-wide:     0.05em;
    --ls-widest:   0.16em;

    /* Measure (optimal reading width) */
    --measure: 66ch;
}

/* — Global body typography — */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01' on, 'cv11' on, 'kern' on;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    font-variation-settings: "opsz" 18;
}

/* — Display / headlines use Fraunces (serif, editorial) — */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.hero-title,
.section-title,
.page-title,
.pd-display {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tightest);
    text-wrap: balance;
    font-variation-settings: "opsz" 96, "SOFT" 30;
}

/* Precise size anchors (overrides only where base style.css was ambiguous) */
h1, .h1 { font-size: var(--fs-5xl); font-weight: 600; }
h2, .h2 { font-size: var(--fs-4xl); font-weight: 500; }
h3, .h3 { font-size: var(--fs-3xl); font-weight: 500; }
h4, .h4 { font-size: var(--fs-2xl); font-weight: 500; }
h5      { font-size: var(--fs-xl);  font-weight: 600; font-family: var(--font-body); letter-spacing: var(--ls-tight); }
h6      { font-size: var(--fs-lg);  font-weight: 600; font-family: var(--font-body); letter-spacing: var(--ls-tight); }

/* Smart-italics for display emphasis */
.pd-display em,
h1 em, h2 em, h3 em {
    font-style: italic;
    font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 1;
    color: #ff6b00;
}

/* — Body paragraphs — */
p, li, dd {
    font-family: var(--font-body);
    line-height: var(--lh-relaxed);
    font-variation-settings: "opsz" 18;
}
p.lead,
.lead-paragraph {
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    color: #d0d0d0;
    max-width: var(--measure);
}

/* — Tabular numerals for all numeric UI — */
.pd-visitor-counter,
.pdc-v,
.score-value,
.shop-price,
.stat-value,
.risk-score,
table td,
table th,
[data-nums="tabular"] {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" on, "lnum" on;
}

/* Counter + score numerals get mono face */
.pd-visitor-counter,
.pdc-v,
.score-value,
.risk-score,
[data-mono] {
    font-family: var(--font-mono);
}

/* — Small-caps labels for editorial kickers — */
.kicker,
.eyebrow,
.section-eyebrow,
[data-kicker] {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: #ff6b00;
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* — Drop-cap optional for longform article first paragraph — */
.pd-longread > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-weight: 600;
    float: left;
    font-size: 4.5em;
    line-height: 0.85;
    margin: 0.15em 0.1em 0 0;
    color: #ff6b00;
    font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* — Blockquote (editorial) — */
blockquote,
.pd-blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: #e8e8e8;
    border-left: 3px solid #ff6b00;
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 2rem 0;
    max-width: calc(var(--measure) + 2rem);
    font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
}

/* — Links (softer underline, not brutal) — */
a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color 0.18s, text-decoration-color 0.18s;
}
p a, .prose a {
    text-decoration: underline;
    text-decoration-color: rgba(255,107,0,0.35);
}
p a:hover, .prose a:hover {
    text-decoration-color: #ff6b00;
}

/* — Selection (brand accent) — */
::selection {
    background: rgba(255,107,0,0.28);
    color: #fff;
}

/* — Reader measure on articles — */
article .prose,
.pd-longread,
article > p {
    max-width: var(--measure);
}

/* — Hanging punctuation where supported (webkit) — */
.pd-display,
h1, h2, h3 {
    hanging-punctuation: first allow-end;
}

/* — Responsive adjustments — */
@media (max-width: 768px) {
    :root {
        --fs-5xl: 2.75rem;
        --fs-4xl: 2.125rem;
        --fs-3xl: 1.75rem;
        --fs-2xl: 1.375rem;
        --measure: 42ch;
    }
}