/* White Citadel: one dark placeholder page (home and 404) with a WebGL citadel behind the text and film grain on top.
   Sections: tokens, base, layout, components, content, pages. */

/* Tokens */

:root {
    --ink: oklch(0% 0 none);
    --paper: oklch(95.53% 0.007 88.6);
    --paper-dim: color-mix(in oklch, var(--paper) 55%, transparent);
    --paper-soft: color-mix(in oklch, var(--paper) 75%, transparent);
    --paper-line: color-mix(in oklch, var(--paper) 50%, transparent);
    --ink-veil: color-mix(in oklch, var(--ink) 35%, transparent);

    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-serif: 'Instrument Serif', Georgia, serif;

    --text-s: .75rem;
    --text-m: .8125rem;
    /* 10vw from 480 to 1200 px wide; the rem part of rem + vw is 0 there. */
    --text-display: clamp(3rem, 10vw, 7.5rem);

    --space-xs: .25rem;
    --space-m: 1.25rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
    /* 4vw from 500 to 1200 px wide. */
    --space-gutter: clamp(1.25rem, 4vw, 3rem);

    --width-copy: 52rem;
    --width-lead: 30rem;

    --glow-l: 0 0 2rem var(--ink);
    --glow-m: 0 0 1rem var(--ink);

    --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* Base */

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

html { background: var(--ink); color: var(--paper); }

body {
    margin: 0;
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font: 400 var(--text-s)/1.6 var(--font-mono);
    letter-spacing: .02em;
}

a { color: inherit; }

img { max-inline-size: 100%; block-size: auto; }

:focus-visible {
    outline: max(2px, .08em) solid currentColor;
    outline-offset: .25em;
}

/* Layout */

.top, .bottom, .copy { position: relative; padding-block: var(--space-l); padding-inline: var(--space-gutter); }

.top, .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-xl);
    text-transform: uppercase;
    color: var(--paper-dim);
}

.bottom address { font-style: normal; }
.bottom a { text-decoration: none; }
.bottom a:focus-visible { color: var(--paper); }
.bottom a:active { opacity: .7; }

/* The text sits over the canvas; only its links take the pointer. */
.copy { align-self: end; max-inline-size: var(--width-copy); pointer-events: none; }
.copy a { pointer-events: auto; }

/* Film grain over everything, text included: grey fractal noise (SVG) with its contrast raised, shifted a few times a second. */
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: 10;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .3;
}
@keyframes grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-7%, 4%); }
    40% { transform: translate(5%, -6%); }
    60% { transform: translate(-3%, 8%); }
    80% { transform: translate(8%, 2%); }
    100% { transform: translate(-5%, -4%); }
}
@media (prefers-reduced-motion: no-preference) {
    body::after { animation: grain .9s steps(6) infinite; }
}

/* Components */

.mark { color: var(--paper); text-decoration: none; letter-spacing: .3em; }
.mark:active { opacity: .7; }

.contact {
    display: inline-block;
    padding-block: .7rem;
    padding-inline: 1.1rem;
    border: 1px solid var(--paper-line);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .2em;
    background: var(--ink-veil);
    transition: background-color .3s, color .3s;
}
/* Filled when focused: the ring takes the fill color, as currentColor is black on black. */
.contact:focus-visible { background: var(--paper); color: var(--ink); outline-color: var(--paper); }
.contact:active { transform: scale(.97); }
@media (prefers-reduced-motion: no-preference) {
    .contact { transition: background-color .3s, color .3s, transform 160ms var(--ease-out); }
}

@media (hover: hover) and (pointer: fine) {
    .bottom a:hover { color: var(--paper); }
    .contact:hover { background: var(--paper); color: var(--ink); }
}

/* Content */

h1 {
    margin-block: 0 var(--space-m);
    margin-inline: 0;
    font: 400 var(--text-display)/.92 var(--font-serif);
    letter-spacing: -.02em;
    text-shadow: var(--glow-l);
}
h1 em { display: block; padding-inline-start: .9em; }

.lead {
    max-inline-size: var(--width-lead);
    margin-block: 0 var(--space-l);
    margin-inline: 0;
    font-size: var(--text-m);
    color: var(--paper-soft);
    text-shadow: var(--glow-m);
}

@media (width <= 40rem) {
    h1 em { padding-inline-start: .5em; }
}

/* Pages */

/* Home: the canvas behind everything (assets/citadel.js); it fades in after its first frame. */
.stage {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    transition: opacity 2.5s ease;
}
.stage.on { opacity: 1; }