/* Base typography and layout (structure only, no colors) */

/* Self-hosted variable fonts - latin subset only.
   Each file contains all weights for the family; the browser
   interpolates based on font-weight. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/fraunces-latin.woff2') format('woff2');
}

/* Typography tokens */
:root {
    /* Font stacks */
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-mono: 'Consolas', 'SF Mono', Menlo, 'DejaVu Sans Mono', monospace;

    /* Modular scale - 1.25 ratio ("major third") */
    --size-xs:   0.8rem;      /* ~12.8px */
    --size-sm:   0.875rem;    /* ~14px */
    --size-base: 1rem;        /* 16px */
    --size-md:   1.25rem;     /* 20px */
    --size-lg:   1.563rem;    /* 25px */
    --size-xl:   1.953rem;    /* 31px */
    --size-2xl:  2.441rem;    /* 39px */
    --size-3xl:  3.052rem;    /* 49px */

    /* Line heights */
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.7;

    /* Content width cap */
    --measure: 65ch;
}

body {
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: var(--leading-normal);
    font-feature-settings: "kern", "liga", "calt";
}

/*
    contrast notes: from #fff, go down to #555
        or darker for an AAA rating
    dark mode: from #212121 go up to #ababab
        or lighter for an AAA rating
*/

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: var(--leading-tight);
    font-weight: 500;
}

h1 {
    font-size: var(--size-2xl);
    font-weight: 500;
}

h2 {
    font-size: var(--size-xl);
    font-weight: 500;
}

h3 {
    font-size: var(--size-lg);
    font-weight: 500;
}

h4 {
    font-size: var(--size-md);
    font-weight: 600;
}

/* Cap the reading measure on main content for readability.
   Short viewports and narrow screens are unaffected. */
main {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Link typography - refined underlines */
a {
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: color 150ms ease;
}

/* Tabular numerals for metadata/dates so columns align */
time,
ul.post-meta,
.post-nav-direction {
    font-variant-numeric: tabular-nums;
}

/* Accessibility helpers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    padding: 1rem;
}

.dark-mode-commentary {
    display: none;
}

.scooted-down {
    margin-top: 1rem;
}

/* Responsive */
@media screen and (max-width: 640px) {
    .wide-screen {
        display: none;
    }
}

/* Header */
header {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: 1rem;
}
div.logo-header {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--size-xl);
    text-align: center;
}
div.logo-header a, div.logo-header a:visited {
    text-decoration: none;
}
nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Footer - scoped to the site footer only (direct child of body),
   so article-level <footer> elements (e.g. citations) aren't affected. */
body > footer {
    max-width: var(--measure);
    margin-inline: auto;
    margin-top: 4rem;
    padding: 2rem 1rem;
    text-align: center;
    font-size: var(--size-sm);
}

body > footer nav ul {
    margin-bottom: 1rem;
}

body > footer .colophon {
    margin: 0;
}

/* Print Scheme */
@media print {
    nav {
        display: none;
    }

    div.logo-header {
        display: none;
    }

    a,
    .data-table thead th {
        text-decoration: none;
    }

    body > footer {
        display: none;
    }
}

/* Diagnostics */
.word-breakable {
    overflow-wrap: break-word;
}

li.claim-type-value {
    margin-bottom: 1rem;
}