/* The shell every page shares: tokens, reset, grain, rail. Page-specific
   styles stay inline in each page and load after this, so they win. The
   theme-restore <script> stays inline too — it has to run before paint. */

@view-transition { navigation: auto; }

:root {
    color-scheme: light dark;

    --bg:      light-dark(#FAFAF9, #0A0B0D);
    --text:    light-dark(#101215, #E8EAED);
    --muted:   light-dark(#6B7178, #7C838C);
    --faint:   light-dark(#8B9198, #5A616A);
    --rule:    light-dark(rgba(16,18,21,.13), rgba(232,234,237,.11));

    --sans: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

    --gutter: clamp(1.25rem, 4.5vw, 4rem);
    --ease: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--gutter);
    -webkit-font-smoothing: antialiased;
}

/* Film grain */
.grain {
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 4px;
    border-radius: 2px;
}

.rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
}

.back { color: var(--muted); transition: color .25s var(--ease); }
.back:hover { color: var(--text); }