/* ================================================================
   Shared Design System
   Swiss Editorial / Cold Modernist
   Fonts: EB Garamond (body) · IBM Plex Sans Condensed (UI)
          IBM Plex Mono / Iosevka (code)
   ================================================================ */

/* ── Fonts ───────────────────────────────────────────────────────
   Served from this site, not from a font CDN: no third party sees who reads
   the site, nothing breaks if an outside service is slow or blocked, and the
   content security policy can keep font-src locked to 'self'.
   Both families are open source under the SIL Open Font License —
   see /static/fonts/LICENSE.txt. Latin subset only.
   font-display: swap paints text immediately in a fallback face and swaps the
   real one in when it arrives, so the article is readable straight away. */

@font-face
{
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face
{
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face
{
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/eb-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face
{
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face
{
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/eb-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face
{
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-sans-condensed-latin-400-normal.woff2') format('woff2');
}
@font-face
{
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2') format('woff2');
}
@font-face
{
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2');
}
@font-face
{
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face
{
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ── Variables ───────────────────────────────────────────────── */

:root
{
    /* light theme (default) */
    --bg:           #f5f2ec;
    --bg-alt:       #ede9e0;
    --bg-raised:    #eae6dc;
    --ink:          #1a1814;
    --ink-2:        #3d3a34;
    --ink-3:        #7a756c;
    --ink-4:        #a39e94;
    --rule:         #c8c2b6;
    --rule-heavy:   #8a8478;
    --accent:       #8b1a1a;
    --accent-dim:   #b84040;
    --accent-bg:    #f0e6e6;
    --code-bg:      #e8e4da;
    --selection-bg: #e2dcd0;

    --font-body:    'EB Garamond', Georgia, serif;
    --font-ui:      'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
    --font-mono:    'Iosevka', 'IBM Plex Mono', 'Courier New', monospace;

    --size-xs:      0.7rem;
    --size-sm:      0.85rem;
    --size-base:    1.125rem;
    --size-md:      1.25rem;
    --size-lg:      1.5rem;
    --size-xl:      2rem;
    --size-2xl:     2.75rem;
    --size-3xl:     3.75rem;

    --lh-tight:     1.2;
    --lh-base:      1.65;
    --lh-loose:     1.85;

    --space-1:      0.25rem;
    --space-2:      0.5rem;
    --space-3:      0.75rem;
    --space-4:      1rem;
    --space-6:      1.5rem;
    --space-8:      2rem;
    --space-12:     3rem;
    --space-16:     4rem;
    --space-24:     6rem;

    --max-w:        1080px;
    --col-text:     680px;
    --transition:   150ms ease;
}
[data-theme="dark"]
{
    --bg:           #111111;
    --bg-alt:       #191919;
    --bg-raised:    #222222;
    --ink:          #d9d4c7;
    --ink-2:        #b0aa9c;
    --ink-3:        #6b665c;
    --ink-4:        #45413a;
    --rule:         #2a2722;
    --rule-heavy:   #3d3933;
    --accent:       #c4795a;
    --accent-dim:   #a35f44;
    --accent-bg:    #241a14;
    --code-bg:      #1a1a18;
    --selection-bg: #3a362f;
}
/* ── Reset ───────────────────────────────────────────────────── */

*, *::before, *::after
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
input, textarea, select
{
    resize: none;
}
html
{
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body
{
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: var(--lh-base);
    transition: background-color var(--transition), color var(--transition);
    min-height: 100vh;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
::selection
{
    background-color: var(--selection-bg);
    color: inherit;
}
img
{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
figure { margin: var(--space-6) 0; text-align: center; }
figcaption { font-family: var(--font-ui); font-size: var(--size-xs); color: var(--ink-3); margin-top: var(--space-2); display: block; }
a
{
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), color var(--transition);
}
@media (hover: hover)
{
    a:hover
    {
        border-bottom-color: var(--accent-dim);
        color: var(--accent-dim);
    }
}
/* ── Typography ──────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6
{
    font-family: var(--font-body);
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--ink);
}
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
small { font-size: var(--size-sm); }
/* ── Utilities ───────────────────────────────────────────────── */

.ui-label
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.visually-hidden
{
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ── Tag pill ────────────────────────────────────────────────── */

.tag
{
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 1px var(--space-2);
    transition: all var(--transition);
}
@media (hover: hover)
{
    .tag:hover
    {
        color: var(--accent);
        border-color: var(--accent);
    }
}
/* ── Site Header ─────────────────────────────────────────────── */

.site-header
{
    background-color: var(--bg);
    border-bottom: 2px solid var(--ink);
    position: relative;
    z-index: 100;
    transition: background-color var(--transition);
}
.site-header.is-stuck
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.site-header__inner
{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--space-2) var(--space-8);
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.site-header__wordmark
{
    font-family: var(--font-ui);
    font-size: var(--size-md);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: none;
}
@media (hover: hover)
{
    .site-header__wordmark:hover
    {
        color: var(--accent);
        border-bottom: none;
    }
}
.site-header__nav
{
    display: flex;
    gap: var(--space-6);
    align-items: center;
    flex-grow: 1;
}
.site-header__nav a
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: none;
    padding-bottom: 2px;
    transition: color var(--transition);
}
.site-header__nav a[aria-current="page"]
{
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
}
@media (hover: hover)
{
    .site-header__nav a:hover
    {
        color: var(--accent);
        border-bottom: 1px solid var(--accent);
    }
}
.site-header__actions
{
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.site-header__admin-link
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: none;
    line-height: 1;
}
@media (hover: hover)
{
    .site-header__admin-link:hover { color: var(--accent); border-bottom: none; }
}
.site-header__logout-form
{
    display: flex;
    align-items: center;
}
.site-header__logout-btn
{
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 0;
    line-height: 1;
    transition: color var(--transition);
}
@media (hover: hover)
{
    .site-header__logout-btn:hover { color: var(--accent); }
}
.theme-toggle
{
    background: none;
    border: 1px solid var(--rule-heavy);
    cursor: pointer;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: var(--size-sm);
    padding: var(--space-1) var(--space-3);
    line-height: 1;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
@media (hover: hover)
{
    .theme-toggle:hover
    {
        border-color: var(--ink-2);
        color: var(--ink);
    }
}
/* ── Site Footer ─────────────────────────────────────────────── */

.site-footer
{
    border-top: 2px solid var(--ink);
    margin-top: var(--space-24);
    padding: var(--space-12) var(--space-8) var(--space-8);
}
.site-footer__inner
{
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-8);
    align-items: start;
}
.site-footer__col h4
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--rule);
}
.site-footer__col ul { list-style: none; }
.site-footer__col ul li { margin-bottom: var(--space-2); }
.site-footer__col ul li a
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink-3);
    border-bottom: none;
}
@media (hover: hover)
{
    .site-footer__col ul li a:hover { color: var(--accent); border-bottom: none; }
}
.site-footer__bottom
{
    max-width: var(--max-w);
    margin: var(--space-8) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-footer__bottom p
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    color: var(--ink-4);
    margin: 0;
}
/* ── Support strip ───────────────────────────────────────────── */

.support-strip
{
    background-color: var(--bg-alt);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-6) var(--space-8);
    text-align: center;
    margin-top: var(--space-16);
}
.support-strip p
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink-3);
    margin-bottom: var(--space-3);
}
.support-strip__buttons
{
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}
.site-footer__soon
{
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
}
/* ── Buttons ─────────────────────────────────────────────────── */

.btn
{
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-6);
    border: 1px solid currentColor;
    cursor: pointer;
    background: none;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid currentColor;
    text-decoration: none;
}
.btn--primary { color: var(--accent); }
@media (hover: hover)
{
    .btn--primary:hover
    {
        background-color: var(--accent);
        color: var(--bg);
        border-color: var(--accent);
        border-bottom-color: var(--accent);
    }
}
/* the seat the real support buttons will take once KOFI_URL / PATREON_URL are
   set. it borrows .btn wholesale so it occupies exactly the space the buttons
   will, and only changes what marks it as not-yet: a dashed rule instead of a
   solid one, muted ink, and no pointer or hover, since there is nothing to
   click. it deliberately has no :hover rule of its own. */
.btn--soon
{
    color: var(--ink-3);
    border-style: dashed;
    border-bottom-style: dashed;
    cursor: default;
}
.btn--secondary { color: var(--ink-3); }
@media (hover: hover)
{
    .btn--secondary:hover
    {
        color: var(--ink);
        border-color: var(--ink);
        border-bottom-color: var(--ink);
    }
    /* the Patreon button fills solid ink on hover, mirroring the Ko-fi button
       beside it that fills with its accent. both places the pair appears: the
       home page support block and the support strip under articles */
    .home-block__btns .btn--secondary:hover,
    .support-strip__buttons .btn--secondary:hover
    {
        background-color: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
        border-bottom-color: var(--ink);
    }
}
.btn--full { width: 100%; justify-content: center; }
/* ── Draft badge ─────────────────────────────────────────────── */

.draft-badge
{
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 1px var(--space-2);
    vertical-align: middle;
}
/* ── Empty state ─────────────────────────────────────────────── */

.empty-state
{
    text-align: center;
    padding: var(--space-16) var(--space-8);
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    color: var(--ink-3);
}
.empty-state a { color: var(--accent); }
/* ── Pagination ──────────────────────────────────────────────── */

.pagination
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
    font-family: var(--font-ui);
}
.pagination__pages
{
    display: flex;
    list-style: none;
    gap: var(--space-2);
}
.pagination__page span,
.pagination__page a
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--size-sm);
    font-weight: 500;
    border: 1px solid var(--rule);
    color: var(--ink-3);
    border-bottom: 1px solid var(--rule);
    transition: all var(--transition);
}
.pagination__page--active span
{
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
@media (hover: hover)
{
    .pagination__page a:hover
    {
        border-color: var(--ink-2);
        color: var(--ink);
    }
}
.pagination__prev,
.pagination__next
{
    font-size: var(--size-sm);
    font-weight: 500;
    color: var(--ink-3);
    border-bottom: none;
}
@media (hover: hover)
{
    .pagination__prev:hover,
    .pagination__next:hover { color: var(--accent); border-bottom: none; }
}
.pagination__prev--disabled,
.pagination__next--disabled
{
    color: var(--ink-4);
    cursor: default;
}
/* ── Modals ──────────────────────────────────────────────────── */

.site-modal-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(26, 24, 20, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.site-modal-overlay.is-open
{
    opacity: 1;
    pointer-events: all;
}
.site-modal
{
    font-family: var(--font-ui);
    background-color: var(--bg);
    border: 1px solid var(--rule-heavy);
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
    padding: var(--space-6) var(--space-8);
    max-width: 440px;
    width: 90%;
    transform: translateY(10px);
    transition: transform 200ms ease;
}
.site-modal-overlay.is-open .site-modal
{
    transform: translateY(0);
}
.site-modal__title
{
    font-family: var(--font-ui);
    font-size: var(--size-md);
    margin-bottom: var(--space-3);
    color: var(--ink);
    line-height: var(--lh-tight);
}
.site-modal__text
{
    font-size: var(--size-sm);
    color: var(--ink-2);
    margin-bottom: var(--space-6);
}
.site-modal__actions
{
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}
/* a removed contributor's name is dimmed to a lighter grey to signal the account
   is gone, the way a disabled control is dimmed. only staff ever see the byline,
   and for them the title attribute explains it on hover. */
.author-removed
{
    color: var(--ink-4);
}
.author-removed[title] { cursor: help; }



/* ── Small screens (phones, narrow tiles) ────────────────────── */

@media (max-width: 700px)
{
    /* a slightly smaller root notch scales every rem-based size down */
    html { font-size: 15px; }

    /* the header wraps to two rows on phones; pinning a two-row bar over
       the content costs too much height, so it simply scrolls away */
    .site-header.is-stuck { position: relative; top: auto; }
    /* the spacer's size is set inline by theme.js, so important is needed */
    .site-header-spacer { display: none !important; }

    .site-header__inner

    {
        padding: var(--space-2) var(--space-4);
        gap: var(--space-2) var(--space-4);
    }

    .site-header__nav { gap: var(--space-4); }

    .site-footer { padding: var(--space-8) var(--space-4) var(--space-6); margin-top: var(--space-16); }

    .site-footer__bottom

    {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .support-strip { padding: var(--space-6) var(--space-4); }

    .pagination { flex-wrap: wrap; }

    .empty-state { padding: var(--space-8) var(--space-4); }
}

/* ── Error pages (404 / 403): standalone editorial layout ────────── */

.error-page
{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}
.error-page__inner
{
    max-width: 34rem;
}
.error-page__wordmark
{
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: none;
    margin-bottom: var(--space-12);
}
.error-page__code
{
    font-family: var(--font-body);
    font-size: clamp(5rem, 22vw, 11rem);
    line-height: 0.9;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.02em;
}
.error-page__rule
{
    width: 3.5rem;
    height: 2px;
    background: var(--accent);
    margin: var(--space-6) auto;
}
.error-page__heading
{
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--size-2xl);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--space-3);
}
.error-page__message
{
    font-family: var(--font-body);
    font-size: var(--size-md);
    color: var(--ink-2);
    line-height: var(--lh-base);
    margin-bottom: var(--space-8);
}
.error-page__home
{
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--size-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
}
@media (hover: hover)
{
    .error-page__home:hover { color: var(--accent); }
}