/* Built by `manage.py build_css` — edit the layers, not this file. */

/* ===== tokens.css ===== */
/* ========================
   TOKENS — Design tokens
   ======================== */

:root {
    /* Palette */
    --ink: #141312;
    --bone: #e9e3d5;
    --dim: #8d877b;

    /* Theme roles — light by default; dark via data-theme or the system (below) */
    --bg: var(--bone);
    --fg: var(--ink);
    --muted: #6f695e;
    --stroke: #141312;
    --core: #57534b;
    --deep: #dcd6c8;

    /* Colors — the starter's names, mapped onto the theme roles */
    --color-primary: var(--fg);
    --color-secondary: var(--bg);
    --color-accent: var(--fg);
    --color-text: var(--fg);
    --color-text-muted: var(--muted);
    --color-bg: var(--bg);
    --color-bg-alt: var(--deep);
    --color-border: var(--stroke);

    /* Typography */
    --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, Consolas, monospace;
    --font-body: var(--mono);
    --font-heading: var(--display);
    --font-mono: var(--mono);

    /* Scale (modular, fluid) */
    --step--2: clamp(0.69rem, 0.66rem + 0.18vw, 0.80rem);
    --step--1: clamp(0.83rem, 0.78rem + 0.29vw, 1.00rem);
    --step-0: clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);
    --step-1: clamp(1.20rem, 1.07rem + 0.63vw, 1.56rem);
    --step-2: clamp(1.44rem, 1.26rem + 0.89vw, 1.95rem);
    --step-3: clamp(1.73rem, 1.48rem + 1.24vw, 2.44rem);
    --step-4: clamp(2.07rem, 1.73rem + 1.70vw, 3.05rem);

    /* Space (consistent with type scale) */
    --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);
    --space-2xs: clamp(0.50rem, 0.46rem + 0.22vw, 0.63rem);
    --space-xs: clamp(0.75rem, 0.68rem + 0.33vw, 0.94rem);
    --space-s: clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);
    --space-m: clamp(1.50rem, 1.37rem + 0.65vw, 1.88rem);
    --space-l: clamp(2.00rem, 1.83rem + 0.87vw, 2.50rem);
    --space-xl: clamp(3.00rem, 2.74rem + 1.30vw, 3.75rem);
    --space-2xl: clamp(4.00rem, 3.65rem + 1.74vw, 5.00rem);

    /* Measures */
    --measure: min(88vw, 44ch);   /* the one column shared by crawl, story and contact */
    --measure-compact: 45ch;
    --measure-prose: 65ch;
    --measure-wide: 90ch;

    /* Gutter */
    --gutter: var(--space-m);

    /* Borders */
    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: var(--ink);
        --fg: var(--bone);
        --muted: var(--dim);
        --stroke: var(--bone);
        --core: #48453f;
        --deep: #1e1d1b;
    }
}

:root[data-theme="dark"] {
    --bg: var(--ink);
    --fg: var(--bone);
    --muted: var(--dim);
    --stroke: var(--bone);
    --core: #48453f;
    --deep: #1e1d1b;
}

/* ===== reset.css ===== */
/* ========================
   RESET — Modern reset
   ======================== */

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

* {
    margin: 0;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    min-height: 100svh;
    line-height: 1.6;
}

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

p, li, figcaption {
    max-width: var(--measure-prose);
    text-wrap: pretty;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

a {
    color: currentColor;
}

ul[role="list"], ol[role="list"] {
    list-style: none;
    padding: 0;
}

/* ===== global.css ===== */
/* ========================
   GLOBAL — Body defaults
   ======================== */

/* ---- Self-hosted fonts ----
   Atkinson Hyperlegible Mono 400 (body), Barlow Condensed 500 (titles, frame lines,
   sign-off) and 600 (references). */

/* Atkinson Hyperlegible Mono — latin-ext */
@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-mono-latin-ext.67e4cf605428.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Atkinson Hyperlegible Mono — latin */
@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-mono-latin.387c8dcba3be.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 500 — latin-ext */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-condensed-500-latin-ext.8c35f80d9e5a.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 500 — latin */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-condensed-500-latin.24f826a7cf9c.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow Condensed 600 — latin-ext */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-600-latin-ext.ee77e8f678d5.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed 600 — latin */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-600-latin.ba4513495282.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Base rules ---- */

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

body {
    font-family: var(--font-body);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

a {
    color: inherit;
}

/* the reset makes every svg display:block, which outranks the browser's own [hidden] */
[hidden] {
    display: none !important;
}

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

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

/* the reset zeroes all margins; a modal dialog centres itself on auto margins */
dialog {
    margin: auto;
    border: 1px solid var(--stroke);
    background: var(--bg);
    color: var(--fg);
}
dialog::backdrop {
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(6px);
}

/* ===== compositions.css ===== */
/* ========================
   COMPOSITIONS — Layout primitives
   ======================== */

/* Vertical rhythm */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}
.stack[data-gap="l"] { gap: var(--space-l); }
.stack[data-gap="xl"] { gap: var(--space-xl); }

/* Horizontal grouping */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
    align-items: center;
}

/* Constrained width container */
.wrapper {
    max-width: var(--measure-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Sidebar layout */
.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
}
.with-sidebar > :first-child {
    flex-basis: 20rem;
    flex-grow: 1;
}
.with-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-width: 60%;
}

/* Auto grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--gutter);
}

/* Region (vertical spacing between page sections) */
.region {
    padding-block: var(--space-xl);
}

/* ---- R·A·D homepage ---- */

/* One column for crawl, story and contact */
.crawl,
.story p {
    inline-size: var(--measure);
    margin-inline: auto;
}
.contact .pitch,
.form {
    max-inline-size: var(--measure);
}

/* Sticky stage: mark, crawl and constellation share one screen while the page scrolls.
   (.js / .rm are conditions set in <head>, not states.) */
.js:not(.rm) .scroll {
    height: 520vh;
}
.js:not(.rm) .stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.js:not(.rm) .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0;
    will-change: transform;
    pointer-events: none;
    transform: translate(-50%, -50%) translateY(-16.667vh);
}
.js:not(.rm) .crawl-view {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 32%);
    mask-image: linear-gradient(to bottom, transparent 4%, #000 32%);
}
.js:not(.rm) .crawl {
    position: absolute;
    left: 50%;
    top: 66.667vh;
    will-change: transform, opacity;
    transform: translateX(-50%);
}
.js:not(.rm) .sky {
    position: absolute;
    inset: 0;
    padding: 0;
    visibility: hidden;
}
/* reduced motion: static text, the constellation gets its own screen */
.js.rm .sky {
    position: relative;
    height: 100vh;
    height: 100svh;
    padding: 0;
}

/* Contact: stacked, then pitch beside form from 900px */
.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    padding: 10vh 7vw 6vh;
}
.contact .sign {
    margin-block-start: 6vh;
}
@media (min-width: 900px) {
    .contact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-content: center;
        column-gap: 6vw;
        row-gap: 4vh;
        padding: 12vh 10vw 8vh;
    }
    .contact .pitch {
        grid-column: 1;
        align-self: start;
    }
    .contact .form {
        grid-column: 2;
        align-self: start;
    }
    .contact .sign {
        grid-column: 1 / -1;
        margin-block-start: 8vh;
    }
}

/* Case image grids */
.case .shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem;
    margin-block-end: 1.2rem;
}
.shots.imgs {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.shots.imgs.two {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

/* ===== utilities.css ===== */
/* ========================
   UTILITIES — Single-purpose classes
   ======================== */

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }

.font-heading { font-family: var(--font-heading); }
.font-mono { font-family: var(--font-mono); }

.step--1 { font-size: var(--step--1); }
.step-0 { font-size: var(--step-0); }
.step-1 { font-size: var(--step-1); }
.step-2 { font-size: var(--step-2); }
.step-3 { font-size: var(--step-3); }
.step-4 { font-size: var(--step-4); }

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.flow > * + * {
    margin-block-start: var(--flow-space, 1em);
}

/* keep a hyphenated group on one line; normal hyphens inside, never U+2011 */
.nw { white-space: nowrap; }

/* ===== blocks.css ===== */
/* ========================
   BLOCKS — Component styles
   ======================== */

/* Site header */
.site-header {
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--color-border);
}

.site-header > .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}

.site-logo {
    font-size: var(--step-1);
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Site footer */
.site-footer {
    margin-block-start: auto;
    padding-block: var(--space-l);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--step--1);
    color: var(--color-text-muted);
}

/* Prose (richtext) */
.prose > * + * {
    margin-block-start: 1em;
}

.prose h2 { font-size: var(--step-2); }
.prose h3 { font-size: var(--step-1); }

.prose a {
    color: var(--color-accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

/* ======== R·A·D homepage ======== */
/* Base rules give the no-JS page: text, the reference list, the cases stacked.
   Rules gated on .js enhance it. */

/* Mark */
.logo {
    width: clamp(8rem, 30vw, 14rem);
    margin: 0 auto;
    padding: 10vh 0 10vh;
    user-select: none;
}
.logo svg,
.sky-core svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Aurora behind the mark: two baked textures, never a runtime blur or mask.
   Shown and animated from state.css, in animated mode only. */
.rays {
    display: none;
}
.rays > span {
    position: absolute;
    inset: 0;
}
.rays > span::before,
.rays > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    will-change: transform, opacity;
}
.rays > span::before {
    background-image: url("../rad/img/aurora-a.23e85e019afa.webp");
    scale: 1.14 .9;
}
.rays > span::after {
    background-image: url("../rad/img/aurora-b.f75c1b3c31c3.webp");
    scale: .92 1.16;
}

/* Crawl */
.crawl {
    font-family: var(--mono);
    font-weight: 400;
    font-size: clamp(.95rem, 3.4vw, 1.35rem);
    line-height: 1.5;
    text-align: left;
    text-wrap: pretty;
}
.crawl p {
    margin: 0 0 1em;
}

/* Constellation */
.sky {
    padding: 10vh 1rem;
}
.sky ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1.6rem;
}
.ref {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(.8rem, 2vw, 1.2rem);
    color: var(--muted);
    white-space: nowrap;
}
.ref a {
    font-size: clamp(1rem, 2.8vw, 1.6rem);
    color: var(--fg);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
}
.ref a:hover {
    text-decoration-thickness: 4px;
}
.sky canvas,
.sky-core,
.hint {
    display: none;
}
.js .sky {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.js .sky canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.js .sky ul {
    display: block;
    position: absolute;
    inset: 0;
}
.js .sky .ref {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform, opacity;
    padding: .35em .5em;
}
/* reduced motion: a separate core mark (animated mode reuses the hero mark) */
.js.rm .sky-core {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(8rem, 30vw, 14rem);
    transform: translate(-50%, -50%);
    z-index: 50;
    color: var(--core);
    pointer-events: none;
    user-select: none;
}
.js .hint {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4vh;
    max-width: none;
    text-align: center;
    font-size: .8rem;
    color: var(--muted);
    pointer-events: none;
}

/* Cases: stacked under the page without JS, opened in the dialog with it */
.js .cases {
    display: none;
}
.case {
    width: min(92vw, 46rem);
    margin: 0 auto 12vh;
}
.case h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.9rem, 6.5vw, 3.2rem);
    line-height: 1;
    margin: 0 0 .3em;
}
.case .frame {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    line-height: 1.15;
    margin: 0 0 1.2rem;
}
.case .meta {
    font-size: .85rem;
    color: var(--muted);
    margin: 0 0 1.2rem;
}
.case p {
    max-width: 62ch;
    margin: 0 0 1rem;
}
.shots.imgs img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    background: #000;
}

/* Overlay */
dialog {
    width: min(96vw, 52rem);
    max-height: 92svh;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    overflow: auto;
}
dialog .case {
    width: auto;
    margin: 0;
}
.close {
    position: sticky;
    top: 0;
    float: right;
    font: inherit;
    font-size: .85rem;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--stroke);
    padding: .4em .8em;
    cursor: pointer;
    margin: 0 0 1rem 1rem;
}
.close:hover {
    background: var(--fg);
    color: var(--bg);
}

/* Story: same voice as the opening lines, one column, nothing emphasised */
.story {
    position: relative;
    z-index: 60;
    background: var(--bg);
    padding: 8vh 0;
}
.story p {
    font-family: var(--mono);
    font-weight: 400;
    font-size: clamp(.85rem, 3vw, 1.15rem);
    line-height: 1.55;
    margin-block: 0 1em;
    text-align: left;
    text-wrap: pretty;
}
.story p:last-child {
    margin-bottom: 0;
}
@media (min-width: 900px) {
    .story {
        padding: 10vh 0;
    }
}

/* Contact */
.contact {
    position: relative;
    z-index: 60;
    background: var(--bg);
    min-height: 100vh;
    min-height: 100svh;
}
.contact .pitch {
    font-size: clamp(.9rem, 2.1vw, 1.05rem);
    line-height: 1.55;
}
.contact .pitch span {
    display: block;
    color: var(--muted);
}
.contact .pitch span:last-child {
    margin-top: .9em;
    color: var(--fg);
}
.form {
    width: 100%;
    display: grid;
    gap: 1.6rem;
}
.form label {
    display: grid;
    gap: .45rem;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.form input,
.form textarea {
    font: inherit;
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--fg);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--muted);
    border-radius: 0;
    padding: .5rem 0;
    width: 100%;
}
.form textarea {
    resize: vertical;
    min-height: 4.5rem;
    line-height: 1.5;
}
.form input:focus-visible,
.form textarea:focus-visible {
    outline: 0;
    border-bottom-color: var(--fg);
}
.form .error {
    letter-spacing: normal;
    text-transform: none;
    color: var(--fg);
}
.form button {
    justify-self: start;
    font: inherit;
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--fg);
    border: 0;
    padding: .7rem 1.6rem;
    cursor: pointer;
}
.form button:hover {
    opacity: .85;
}
.form .said,
.form .consent {
    margin: 0;
    font-size: .85rem;
    color: var(--muted);
}
.sign {
    max-width: none;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.05rem, 4vw, 1.7rem);
    letter-spacing: .06em;
    color: var(--fg);
    text-align: center;
}

/* ===== exceptions.css ===== */
/* ========================
   EXCEPTIONS — Overrides
   ========================
   Use data-attributes: [data-state="active"]
   Keep this file small. If it grows, refactor.
*/

/* the line that hands over to the constellation */
.crawl .lead-in {
    text-align: center;
    margin-top: 2em;
}

/* Case image display variants (CaseImageBlock.display) */
.shots.imgs img.wide {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    object-fit: contain;
}
.shots.imgs img.mark {
    aspect-ratio: auto;
    object-fit: contain;
    max-width: 20rem;
    margin: 1rem auto;
    background: none;
}
.shots.imgs img.tall {
    aspect-ratio: auto;
    object-fit: contain;
    max-width: 22rem;
    margin: 0 auto;
    background: none;
}
/* white-on-transparent marks: flip to ink on the light theme */
.inv {
    filter: invert(1);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .inv {
        filter: none;
    }
}
:root[data-theme="dark"] .inv {
    filter: none;
}

/* the aurora textures are white; on a light theme they are flipped to ink once, not per frame */
[data-theme="light"] .rays {
    filter: invert(1);
}

/* ===== state.css ===== */
/* ========================
   STATE / MOTION — Classes set by JS, animation, reduced motion
   ======================== */

/* Constellation: the grab affordance appears only once dragging works (.live) */
.js .sky.live {
    cursor: grab;
}
.js .sky.grabbing {
    cursor: grabbing;
}
.js .sky:not(.live) .ref {
    pointer-events: none;
}
.js .hint {
    transition: opacity .6s;
}
.js .hint.gone {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    /* Intro: the mark, then the lines one by one (--i is set per line in the template);
       skipped on the first scroll */
    .js:not(.rm) .logo svg {
        animation: rise .6s ease-out both;
    }
    .js:not(.rm) .crawl p {
        animation: rise .5s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(.35s + var(--i) * .1s);
    }
    .js.intro-skip .logo svg,
    .js.intro-skip .crawl p {
        animation: none;
    }
    @keyframes rise {
        from { opacity: .01; transform: translateY(8px); }
    }

    /* Aurora behind the mark, animated mode only. It fades out on the first scroll in
       twelfths (home.js); .calm pauses everything inside it while it fades. */
    .js:not(.rm) .rays {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(780px, 196vw);
        height: min(780px, 196vw);
        translate: -50% -50%;
        z-index: -1;
        pointer-events: none;
    }
    .js:not(.rm) .logo svg {
        position: relative;
    }
    .rays > span {
        animation: rays-in 2.2s .6s ease-out both, rays-breathe 11s ease-in-out 2.8s infinite alternate;
    }
    .rays > span::before {
        animation: rays-spin 240s linear infinite, rays-glow 9s ease-in-out infinite alternate, rays-drift-a 19s ease-in-out infinite alternate;
    }
    .rays > span::after {
        animation: rays-spin 170s linear infinite reverse, rays-glow 13s ease-in-out -6s infinite alternate, rays-drift-b 23s ease-in-out -8s infinite alternate;
    }
    .rays.calm > span,
    .rays.calm > span::before,
    .rays.calm > span::after {
        animation-play-state: paused;
    }
    @keyframes rays-in { from { opacity: 0; scale: .9; } }
    @keyframes rays-breathe { to { scale: 1.05 1.02; } }
    @keyframes rays-spin { to { rotate: 360deg; } }
    @keyframes rays-glow { 0% { opacity: .3; } 60% { opacity: .85; } 100% { opacity: 1; } }
    @keyframes rays-drift-a { 0% { translate: -3% 2%; } 100% { translate: 2% -1.5%; } }
    @keyframes rays-drift-b { 0% { translate: 3.5% -2.5%; } 100% { translate: -2% 3%; } }

    /* Overlay */
    dialog[open] {
        animation: pop .28s cubic-bezier(.2, .8, .2, 1);
    }
    @keyframes pop {
        from { opacity: 0; transform: translateY(12px) scale(.98); }
    }
}