@import url('./tokens.css');
@import url('./navigation.css');

@font-face {
    font-family: 'Newsreader';
    src: url('./newsreader.woff2') format('woff2');
    font-weight: 300 600;
    font-display: swap;
}
@font-face {
    font-family: 'Varela Round';
    src: url('./varela-round.woff2') format('woff2');
    font-display: swap;
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-top: 24px; }
body {
    margin: 0;
    color: var(--ink);
    font: 17px/1.65 var(--sans);
    -webkit-text-size-adjust: 100%;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('./topo-charcoal.png');
    background-position: var(--topo-position);
    background-size: var(--topo-size);
    opacity: var(--topo-opacity);
    pointer-events: none;
}
main, footer { position: relative; z-index: 1; width: min(100% - 48px, 800px); margin-inline: auto; }
.support-contact { margin-top: 56px; padding: 28px; background: var(--cream); border: 1px solid var(--hairline); border-radius: 16px; }
.support-contact h2 { margin: 0 0 12px; }
.support-contact p:last-child { margin-bottom: 0; }
.article-contact { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }
main { padding-block: 64px 32px; }
body:has(.index) main { width: min(100% - 48px, 1120px); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.06; margin: 0 0 20px; }
h2 { font-size: 32px; line-height: 1.15; margin: 48px 0 16px; }
h3 { font-size: 19px; line-height: 1.4; margin: 32px 0 12px; }
p { margin: 0 0 20px; }
a { color: var(--ink); text-decoration-color: var(--ember); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ember); outline-offset: 5px; }
.summary { font-size: 20px; color: var(--ink-strong); max-width: 58ch; margin-bottom: 40px; }
.effective { color: var(--ink-body); }
code { font: 0.88em/1.4 var(--mono); background: var(--hairline); border-radius: 4px; padding: 2px 5px; }
ul { padding-left: 24px; }
li { margin: 8px 0; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 24px 0; border: 1px solid var(--hairline); border-radius: 12px; background: var(--cream); }
.table-scroll:has(th:nth-child(7)) {
    width: min(1120px, calc(100vw - 48px));
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
table:has(th:nth-child(7)) { min-width: 1080px; }
td:has(a) { min-width: 220px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; min-width: 110px; }
th { font-size: 12px; font-weight: 600; background: var(--paper); }
tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: rgba(39, 43, 33, 0.025); }
figure { margin: 32px 0; }
figure img, figure video { display: block; max-width: 100%; max-height: 580px; width: auto; height: auto; border-radius: 16px; }
figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-body); margin-top: 12px; }
.article-contents { display: block; padding: 20px 24px; margin: 0 0 40px; border-left: 2px solid var(--ember); background: var(--cream); }
.article-contents p { margin-bottom: 8px; font: 12px/1.5 var(--round); text-transform: uppercase; letter-spacing: 0.1em; }
.article-contents ul { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 0; list-style: none; }
.article-contents li { margin: 0; }
.index > .summary { margin-bottom: 40px; }
.help-group { margin-top: 36px; }
.help-group h2 { font: 12px/1.5 var(--round); letter-spacing: 0.12em; text-transform: uppercase; margin: 16px 0; }
.index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; padding: 0; list-style: none; margin: 0; }
.index li { margin: 0; border-top: 1px solid var(--hairline); padding: 20px 0; }
.index li a { font: 27px/1.2 var(--serif); text-decoration: none; }
.index li a:hover { text-decoration: underline; text-decoration-color: var(--ember); }
.index li p { font-size: 15px; color: var(--ink-strong); margin: 8px 0 0; }
footer { border-top: 1px solid var(--hairline); padding-block: 24px 56px; margin-top: 32px; font-size: 14px; color: var(--ink-body); }
@media (max-width: 600px) {
    main { padding-top: 40px; }
    .index ul { grid-template-columns: minmax(0, 1fr); }
    h2 { font-size: 28px; }
    .summary { font-size: 18px; }
}
@media (prefers-color-scheme: dark) {
    :root {
        --paper: #272b21;
        --ink: #f0ece2;
        --cream: #30352a;
        --ink-strong: rgba(240, 236, 226, 0.86);
        --ink-body: rgba(240, 236, 226, 0.76);
        --hairline: rgba(240, 236, 226, 0.18);
    }
    body::before { filter: invert(1); }
    .site-header .brand img { filter: brightness(0) invert(0.92); }
}