/* Theme tokens (dark is the default) */

:root {
    --ink: #dfe6ec;
    --ink-soft: #8fa0b3;
    --accent: #7fb2ff;
    --accent-glow: rgba(127, 178, 255, .35);

    --bg-a: #10151a;
    --bg-b: #0c1f22;
    --surface: rgba(255, 255, 255, .04);
    --hairline: rgba(223, 230, 236, .16);

    color-scheme: dark;

    --particle: 223, 230, 236;

    --shell: min(1080px, 92vw);
    --ease: cubic-bezier(.22, .8, .3, 1);
}

/* Light theme, enabled by the theme toggle */
:root[data-theme="light"] {
    --ink: #3d464d;
    --ink-soft: #6c7a8d;
    --accent: #00295e;
    --accent-glow: rgba(0, 41, 94, .35);

    --bg-a: #f0f0f0;
    --bg-b: #e1fffa;
    --surface: rgba(255, 255, 255, .55);
    --hairline: rgba(61, 70, 77, .18);

    --particle: 61, 70, 77;

    color-scheme: light;
}

/* Base */

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

html {
    font-size: 18px;
    line-height: 1.4;
    scroll-behavior: smooth;
    /* keeps anchored sections clear of the sticky nav */
    scroll-padding-top: 6.5rem;
}

@media (max-width: 500px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 355px) {
    html {
        font-size: 13px;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);

    background: linear-gradient(45deg, var(--bg-a), var(--bg-b));
    background-size: 200% 200%;
    background-attachment: fixed;
    animation: drift 18s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

h1, h2, h3, h4 {
    line-height: 1.15;
    text-rendering: optimizeLegibility;
    margin: 0;
}

h1, h2, h3, h4 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

#age,
.date,
.subrole-date {
    font-variant-numeric: tabular-nums;
}

a {
    color: inherit;
}

::selection {
    background: var(--accent-glow);
    color: var(--ink);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-soft);
}

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

/* The circular reveal is animated in js/theme.js */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

#bg-particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: block;
}

/* Film grain */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

:root[data-theme="light"] body::after {
    opacity: .05;
    mix-blend-mode: multiply;
}

/* Layout */

.content {
    width: var(--shell);
    margin: 0 auto;
    padding-bottom: 7rem;
}

.section {
    padding: 4.5rem 0 1rem;
}

.section-title {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    margin-bottom: 2.5rem;
}

.section-title::after {
    content: "";
    display: block;
    width: 2.2rem;
    height: 1px;
    margin: .9rem auto 0;
    background: var(--hairline);
}

/* Reveal on scroll */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Section titles slide up from behind a mask */
.section-title .title-mask {
    display: block;
    overflow: hidden;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}

/* offsets trailing letter-spacing so the text stays centered */
.section-title .title-mask > span {
    display: inline-block;
    padding-left: .22em;
}

.js .section-title[data-reveal] {
    opacity: 1;
    transform: none;
}

.js .section-title[data-reveal] .title-mask > span {
    transform: translateY(110%);
    transition: transform .9s var(--ease);
}

.js .section-title[data-reveal]::after {
    transform: scaleX(0);
    transition: transform .8s var(--ease) .3s;
}

.js .section-title[data-reveal].is-visible .title-mask > span,
.js .section-title[data-reveal].is-visible::after {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body {
        animation: none;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js .section-title[data-reveal] .title-mask > span,
    .js .section-title[data-reveal]::after {
        transform: none;
        transition: none;
    }
}