/* SPDX-License-Identifier: GPL-3.0 */

/* ===== Fonts ===== */
/* Self-hosted. Place the files in vendor/fonts/ — see vendor/fonts/README.md */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('vendor/fonts/Fraunces.woff2') format('woff2-variations'),
         url('vendor/fonts/Fraunces.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url('vendor/fonts/Fraunces-Italic.woff2') format('woff2-variations'),
         url('vendor/fonts/Fraunces-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('vendor/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('vendor/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: clamp(16px, 0.4vw + 14px, 19px); }

/* ===== Theme =====
   Light/dark resolved via `light-dark()` keyed off `color-scheme`.
   Mid-tone tokens are derived via `color-mix(in oklch, ...)` so the palette
   is driven by two base colours per scheme (--ink and --bg). */
:root {
    color-scheme: light;

    --bg:        light-dark(#f3ece0, #141210);   /* warm paper / deep ink */
    --ink:       light-dark(#1b1912, #f3ead8);
    --rule:      var(--ink);

    --ink-2:     color-mix(in oklch, var(--ink) 70%, var(--bg));
    --ink-3:     color-mix(in oklch, var(--ink) 42%, var(--bg));
    --bg-2:      color-mix(in oklch, var(--bg) 78%, var(--ink));

    --accent:    light-dark(#c9541a, #ff9147);   /* burnt orange */
    --accent-2:  light-dark(#d79a2b, #f2c15b);   /* mustard sun */
    --positive:  light-dark(#2e6e3b, #7bc790);
    --negative:  light-dark(#9b2d1f, #ff8a72);
    --card:      light-dark(#f8f1e4, #1c1915);

    --serif:     'Fraunces', Georgia, 'Times New Roman', serif;
    --display:   'Fraunces', Georgia, 'Times New Roman', serif;
    --mono:      'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sans:      'Fraunces', Georgia, serif;
}

body:has(#theme-toggle:checked) { color-scheme: dark; }

/* ===== Base ===== */
html, body {
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;       /* fallback for older mobile browsers */
    min-height: 100dvh;
    font-family: var(--sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .4s ease, color .4s ease;
}

body { padding-block: 40px 80px; padding-inline: 28px; }

/* ===== Top bar ===== */
.top-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    display: flex;
    justify-content: flex-end;
    padding-block: 16px;
    padding-inline: 20px;
    background: var(--bg);
    border-block-end: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.top-bar.scrolled {
    border-block-end-color: var(--rule);
    box-shadow: 0 6px 18px -12px rgba(0,0,0,.25);
}
.top-controls { display: flex; gap: 10px; align-items: center; }

.icon-link {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.icon-link:hover { background: var(--ink); color: var(--bg); }
.icon-link:active { transform: scale(.94); }
.icon-link svg { width: 16px; height: 16px; }

/* ===== Toggles ===== */
.toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }

.toggle-label {
    min-width: 36px;
    height: 36px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.toggle-label:hover { background: var(--ink); color: var(--bg); }
.toggle-label:active { transform: scale(.94); }

.time-format-label {
    padding-inline: 14px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.time-format-text::after { content: '24h'; }
#time-format-toggle:checked + .time-format-label .time-format-text::after { content: '12h'; }

.theme-icon { width: 16px; height: 16px; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline; }
body:has(#theme-toggle:checked) .theme-icon-sun { display: inline; }
body:has(#theme-toggle:checked) .theme-icon-moon { display: none; }

/* ===== Almanac layout ===== */
.almanac {
    max-width: 1080px;
    margin-block-start: 72px;
    margin-inline: auto;
    container-type: inline-size;
}

.almanac-masthead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-block: 14px 10px;
    border-block-start: 3px solid var(--rule);
    border-block-end: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-2);
    white-space: nowrap;
}
.almanac-masthead .vol { flex: 0 0 auto; white-space: nowrap; }
.almanac-masthead .issue { flex: 1 1 auto; text-align: center; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.almanac-hero {
    padding-block: 56px 40px;
    border-block-end: 1px solid var(--rule);
    position: relative;
}
.almanac-eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--accent);
    margin-block-end: 18px;
}
.almanac-headline {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(3.5rem, 9.5vw, 8.75rem);
    line-height: .9;
    letter-spacing: -0.035em;
    color: var(--ink);
    text-wrap: balance;
    font-variation-settings: "opsz" 144;
    max-width: 820px;
}
.almanac-headline em {
    font-style: italic;
    font-weight: 300;
    color: var(--accent);
}
.almanac-dek {
    margin-block-start: 28px;
    max-width: 620px;
    font-family: var(--serif);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.45;
    color: var(--ink-2);
    font-weight: 400;
}
.almanac-dek .delta {
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.almanac-sun {
    position: absolute;
    inset-block-start: 48px;
    inset-inline-end: 0;
    width: 220px; height: 220px;
    pointer-events: none;
}
.sun-disc { fill: var(--accent-2); }
.sun-rays { stroke: var(--ink); stroke-width: 1.2; }
.sun-ring { stroke: var(--ink); stroke-width: 1.2; }
@media (min-width: 861px) { .almanac-hero { padding-inline-end: 260px; } }
@media (max-width: 860px) { .almanac-sun { display: none; } }

/* Stats row */
.almanac-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    column-gap: 1px;
    row-gap: 1px;
    background: var(--rule);                /* shows through gaps as separator lines */
    border-block-end: 1px solid var(--rule);
}
.almanac-stats .stat {
    display: grid;
    grid-template-rows: auto 1fr auto;      /* T11: pin label to top, sub to bottom */
    background: var(--bg);
    padding-block: 28px;
    padding-inline: 24px;
}
.stat-label {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ink-3);
    margin-block-end: 14px;
}
.stat-value {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}
.stat-num {
    display: inline-block;
}
.stat-unit {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.5em;
    color: var(--ink-3);
    margin-inline: 3px 2px;
    font-weight: 400;
    vertical-align: baseline;
}
.stat-sub {
    margin-block-start: 6px;
    font-family: var(--serif);
    font-size: 0.875rem;
    color: var(--ink-3);
    font-style: italic;
}
/* Chart rows */
:is(.almanac-year, .almanac-today) {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    padding-block: 40px;
    border-block-end: 1px solid var(--rule);

    .caption {
        font-family: var(--serif);
        font-size: 0.9375rem;
        line-height: 1.5;
        color: var(--ink-2);
        font-style: italic;

        strong {
            display: block;
            font-style: normal;
            font-family: var(--mono);
            font-size: 0.625rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: .18em;
            color: var(--ink-3);
            margin-block-end: 10px;
        }
    }
}

.chart-wrap { position: relative; contain: layout style; }
.yearchart,
.arcchart {
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 180px;             /* keep the curve readable when the container is narrow */
    display: block;
}

@container (max-width: 760px) {
    :is(.almanac-year, .almanac-today) {
        grid-template-columns: 1fr;
        gap: 16px;

        .caption { max-width: none; }
    }
}

/* Footer */
.almanac-foot {
    padding-block: 32px 16px;
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-3);
}
.almanac-foot a {
    color: var(--ink-2);
    text-decoration: none;
    border-block-end: 1px solid var(--ink-3);
    transition: color .2s ease, border-color .2s ease;
}
.almanac-foot a:hover { color: var(--ink); border-color: var(--ink); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    body { padding-block: 28px 60px; padding-inline: 16px; }
    .almanac { margin-block-start: 60px; }
    .almanac-hero { padding-block: 40px 32px; }
    .almanac-stats .stat { padding-block: 20px; padding-inline: 16px; }
    .almanac-year,
    .almanac-today { padding-block: 28px; }
}