/* The public website. One night and the morning after: the page opens at night (what Equinox stops), crosses a
   horizon, runs in daylight (everything else it does) and ends at night again. The film (js/film.js) is the
   one thing that moves.

   Type: Source Serif 4 for titles, set large like a film's title cards, and Inter for everything read: the
   dashboard's own typeface, so the page and the pictures of the dashboard on it read alike. Both are files the
   dashboard already ships (the bot's repository writes them into fonts/, see the README).

   Both are drawn from their outlines alone. A typeface that carries pixel hinting (Atkinson Hyperlegible, the
   first choice here, does) has its letters snapped to the pixel grid by Windows, which left them blocky and
   uneven; and a serif lighter than its regular weight breaks up in light letters on a dark page. So: no hinted
   typeface, and no title lighter than 400 (tests/test_site.py holds both). */

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/source-serif-4.woff2) format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter.woff2) format('woff2');
}

:root {
    /* Night */
    --midnight: #130b1b;
    --dusk: #1f1329;
    --paper: #efe8f5;
    --paper-soft: #b9abc7;
    --line-night: rgba(239, 232, 245, 0.14);
    /* The brand's two purples (the mark's gradient), and the one that takes white text */
    --violet: #a462c4;
    --deep: #65317f;
    --plum: #8446a3;
    /* First light: the sun, and whatever Equinox has dealt with */
    --light: #f3b54a;
    --alarm: #f0776c;
    /* Day */
    --day: #f5f2fa;
    --ink: #1f1329;
    --ink-soft: #57476a;
    --line-day: rgba(31, 19, 41, 0.14);

    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --gutter: clamp(1.25rem, 5vw, 4.5rem);
    --wide: 80rem;          /* (1280px: the width of the dashboard's window in the pictures, see .tour-shot img) */
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--midnight);
    color: var(--paper);
    font: 400 1.0625rem/1.6 var(--sans);
}

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

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

b,
strong {
    font-weight: 600;
}

:focus-visible {
    outline: 3px solid var(--light);
    outline-offset: 3px;
    border-radius: 0.3rem;
}

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

.skip {
    position: absolute;
    left: var(--gutter);
    top: -4rem;
    z-index: 10;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background: var(--paper);
    color: var(--ink);
}

.skip:focus {
    top: 0.75rem;
}

/* ── Buttons and links ───────────────────────────────────────────────────── */

.button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.55rem 1.15rem;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, var(--plum), var(--deep));
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: filter 0.15s ease;
}

.button:hover {
    filter: brightness(1.14);
}

.button-large {
    min-height: 3.25rem;
    padding: 0.7rem 1.6rem;
    font-size: 1.125rem;
}

.quiet-link {
    color: var(--paper);
}

/* ── Night: the top of the page ──────────────────────────────────────────── */

.night {
    padding: 0 var(--gutter);
    overflow-x: clip;       /* (the film's horizon line runs past the page's edges) */
}

.top,
.hero,
.film,
.stops,
.rest,
.dash,
.looks,
.premium,
.trust,
.adds,
.without,
.how,
.closing,
.foot {
    max-width: var(--wide);
    margin-inline: auto;
}

.top {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-block: 1.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
}

.brand sup,
.foot sup {
    font-size: 0.55em;
    font-weight: 400;
}

.top-links {
    display: flex;
    gap: 1.5rem;
    margin-left: auto;
    color: var(--paper-soft);
    white-space: nowrap;
}

.top-links a {
    text-decoration: none;
}

.top-links a:hover {
    color: var(--paper);
    text-decoration: underline;
}

.hero {
    padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}

.hero h1 {
    max-width: 13ch;
    font-size: clamp(2.9rem, 8.2vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.lead {
    max-width: 34rem;
    margin-top: 1.75rem;
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    color: var(--paper-soft);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 2.25rem;
}

/* A page under the home page (Premium): a smaller title, with room for a longer one */
.hero-page {
    padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.hero-page h1 {
    max-width: 17ch;
    font-size: clamp(2.6rem, 6.2vw, 4.75rem);
    line-height: 1.02;
}

/* What Premium costs: the sum in the color of first light, then where things stand */
.price {
    display: grid;
    gap: 0.6rem;
    max-width: 34rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-night);
}

.price-sum {
    font: 400 clamp(1.3rem, 2.2vw, 1.6rem)/1.25 var(--serif);
}

.price-sum b {
    margin-right: 0.15em;
    font-weight: 400;
    font-size: 1.9em;
    letter-spacing: -0.02em;
    color: var(--light);
}

.price-note {
    color: var(--paper-soft);
}

.top-links [aria-current] {
    color: var(--paper);
}

/* ── The film ────────────────────────────────────────────────────────────── */

/* The horizon the film sits on runs on across the page, as the rule under EQX does in the mark. It is placed from
   the frame's own height (this box is exactly as tall as the frame), the way the film places its own horizon:
   worked out from the window's width it sat a few pixels low wherever the window has a scrollbar */
.film-screen {
    position: relative;
}

.film-screen::before {
    content: '';
    position: absolute;
    left: -100vw;
    right: -100vw;
    top: 60%;
    height: 1px;
    background: var(--line-night);
}

.film-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1rem;
    background: #0d0713;
    box-shadow: 0 0 0 1px var(--line-night), 0 3rem 7rem -3rem rgba(164, 98, 196, 0.5);
    container-type: inline-size;
}

.film-stage {
    position: absolute;
    inset: 0;
    font-size: 1.3cqw;
    line-height: 1.4;
    user-select: none;
}

/* The Play button is the sun: it sits where the film's rings are centered, on the horizon */
.film-start {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: none;
    color: var(--paper);
    font: 700 1.125rem/1.3 var(--sans);
    cursor: pointer;
}

.film-start > span {
    position: absolute;
    left: 74%;
    top: 60%;
    translate: -50% -50%;
}

.film-start > span:last-child {
    top: calc(60% + 4.6rem);
    width: max-content;
    text-align: center;
}

.film-start small {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--paper-soft);
}

.film-start-mark {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: #ffe9c4;
    box-shadow: 0 0 0 0.6rem rgba(243, 181, 74, 0.16), 0 0 4rem rgba(243, 181, 74, 0.45);
    transition: transform 0.2s ease;
}

.film-start-mark::before {
    content: '';
    margin-left: 0.35rem;
    border-style: solid;
    border-width: 0.85rem 0 0.85rem 1.4rem;
    border-color: transparent transparent transparent var(--midnight);
}

.film-start:hover .film-start-mark {
    transform: scale(1.06);
}

.film-start[hidden] {
    display: none;
}

.film-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.film-bar[hidden] {
    display: none;
}

.film-toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line-night);
    border-radius: 50%;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
}

.film-toggle:hover {
    background: rgba(239, 232, 245, 0.08);
}

/* Two bars while it plays, a triangle while it is paused */
.film-toggle span {
    width: 0.8rem;
    height: 0.9rem;
    border-inline: 0.28rem solid currentColor;
}

.film-toggle.is-paused span {
    width: 0;
    height: 0;
    margin-left: 0.2rem;
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.8rem;
    border-color: transparent transparent transparent currentColor;
}

.film-chapters {
    flex: 1;
    display: flex;
    gap: 0.4rem;
    min-width: 0;
}

.film-chapter {
    --played: 0;
    position: relative;
    min-width: 0;
    padding: 0.85rem 0 0;
    border: 0;
    background: none;
    color: var(--paper-soft);
    font: 400 0.9rem/1.3 var(--sans);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.film-chapter::before,
.film-chapter::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    border-radius: 2px;
}

.film-chapter::before {
    right: 0;
    background: var(--line-night);
}

.film-chapter::after {
    width: calc(var(--played) * 100%);
    background: var(--light);
}

.film-chapter:hover,
.film-chapter.is-now {
    color: var(--paper);
}

.film-time {
    flex: none;
    min-width: 5.5ch;
    font-variant-numeric: tabular-nums;
    color: var(--paper-soft);
    font-size: 0.9rem;
    text-align: right;
}

.film-words {
    margin-top: 1.25rem;
    color: var(--paper-soft);
}

.film-words summary {
    width: fit-content;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.film-words ol {
    display: grid;
    gap: 0.75rem;
    max-width: 44rem;
    margin-top: 1rem;
}

.film-words strong {
    color: var(--paper);
}

/* ── What it stops: a ledger, a threat on the left and the answer on the right ── */

.section-head {
    display: grid;
    gap: 1.25rem;
    max-width: 46rem;
}

.section-head h2 {
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
}

.section-head p {
    max-width: 38rem;
    font-size: 1.125rem;
}

.stops {
    padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 8vw, 7rem);
}

.stops .section-head p {
    color: var(--paper-soft);
}

.ledger {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ledger > div {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem 3rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--line-night);
}

.ledger dt {
    font: 400 clamp(1.4rem, 2.3vw, 1.85rem)/1.2 var(--serif);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.ledger dd {
    max-width: 38rem;
    color: #d8cde4;
}

/* ── The horizon ─────────────────────────────────────────────────────────── */

.horizon {
    height: clamp(11rem, 26vw, 20rem);
    overflow: hidden;
    color: rgba(255, 233, 196, 0.34);
    background: linear-gradient(to bottom, var(--midnight) 0%, #2a1638 34%, #5d3275 64%, #b0688f 86%, #f1b77a 100%);
}

.horizon svg {
    width: 100%;
    height: 100%;
    max-width: none;
}

.horizon circle {
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.horizon .horizon-sun {
    fill: #ffe9c4;
    stroke: none;
}

/* ── Day ─────────────────────────────────────────────────────────────────── */

.day {
    padding: 0 var(--gutter);
    background: var(--day);
    color: var(--ink);
}

.day .section-head p,
.day figcaption {
    color: var(--ink-soft);
}

/* (the amber ring that shows where the keyboard is can't be seen on daylight) */
.day :focus-visible {
    outline-color: var(--deep);
}

/* A ledger in daylight (the Premium page) */
.day .ledger > div {
    border-top-color: var(--line-day);
}

.day .ledger dd {
    color: var(--ink-soft);
}

.rest,
.adds {
    padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
}

.rest .section-head {
    max-width: 50rem;
}

.inventory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.inventory > section {
    padding-block: 2rem;
    border-top: 1px solid var(--line-day);
}

.inventory h3 {
    font-size: 1.75rem;
}

.inventory ul {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.1rem;
    color: var(--ink-soft);
}

.inventory strong,
.dash-facts strong,
.trust-list strong {
    color: var(--ink);
}

.dash,
.looks,
.premium,
.without {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.dash-shot,
.tour {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* A picture of the dashboard (dark, so it sits on daylight like a screen on a desk; and dark while it loads, so
   a change of picture never flashes white).

   Every picture is one window of the dashboard, 1280 by 800, kept without loss. Where the page is as wide as
   that, the picture is shown at its own size, so what is seen is the dashboard's own pixels and nothing is
   scaled or softened; a screen with two pixels to each gets the picture taken at two. Narrower windows are
   given the larger picture to scale down, which stays cleaner than scaling the smaller one. The markup's
   <source media="(min-width: 89rem)"> is where the page becomes 1280 wide: change the two together. */
.dash-shot img,
.tour-shot img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.9rem;
    background: #14171c;
    /* (a close, plain shadow: a wide colored one tinted the caption under the picture) */
    box-shadow: 0 0 0 1px var(--line-day), 0 1rem 2rem -1.25rem rgba(31, 19, 41, 0.45);
}

.dash-shot figcaption,
.tour-shot figcaption {
    margin-top: 1.1rem;
}

/* Pictures, one at a time, picked by name: what Equinox runs, the dashboard, and the dashboard's looks, all
   three in this one shape. The names stand in rows, each row behind what its names have in common, in columns
   of one width so every row lines up with the others. The names are radio buttons, so the arrow keys move
   between them and no script is needed. Where :has() isn't known the names are left out and every picture
   shows, one under the other */
.tour-tabs {
    display: none;
    grid-template-columns: 10rem repeat(5, 9.5rem);
    align-items: center;
    justify-items: start;
    row-gap: 0.25rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.tour-tabs input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tour-tabs label span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-weight: 600;
    cursor: pointer;
}

.tour-tabs label span:hover {
    color: var(--ink);
}

/* What a row of names has in common. It always starts its row */
.tour-group {
    grid-column: 1;
    color: var(--ink-soft);
}

/* A look's two main colors beside its name: the page behind everything, and its buttons */
.swatch {
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    /* (half a pixel of blend where the two colors meet, so the slanted edge is smooth) */
    background: linear-gradient(135deg, var(--page) calc(50% - 0.5px), var(--mark) calc(50% + 0.5px));
    box-shadow: 0 0 0 1px var(--line-day);
}

.swatch.is-dark {
    --page: #14171c;
    --mark: #3774c7;
}

.swatch.is-midnight {
    --page: #070708;
    --mark: #3774c7;
}

.swatch.is-navy {
    --page: #101828;
    --mark: #6a9ee0;
}

.swatch.is-steel {
    --page: #16191d;
    --mark: #c3cad4;
}

.swatch.is-light {
    --page: #f3f4f6;
    --mark: #2463c2;
}

.swatch.is-nebula {
    --page: #100e24;
    --mark: #8b6cf0;
}

.swatch.is-aurora {
    --page: #081521;
    --mark: #2fbf8f;
}

.swatch.is-ember {
    --page: #1a1210;
    --mark: #c2553a;
}

.tour-tabs input:checked + span {
    border-bottom-color: var(--plum);
    color: var(--ink);
}

.tour-tabs input:focus-visible + span {
    outline: 3px solid var(--deep);
    outline-offset: 3px;
    border-radius: 0.3rem;
}

.tour-shot + .tour-shot {
    margin-top: 2.5rem;
}

.tour-note {
    margin-top: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

@supports selector(:has(*)) {
    .tour-tabs {
        display: grid;
    }

    .tour-shot {
        display: none;
    }

    .tour-shot + .tour-shot {
        margin-top: 0;
    }

    /* Where the rows don't fit side by side with what they have in common, that goes on a line of its own and
       the names under it, in as many columns of one width as there is room for */
    @media (max-width: 62rem) {
        .tour-tabs {
            grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
        }

        .tour-group {
            grid-column: 1 / -1;
            margin-top: 0.75rem;
        }

        .tour-group:first-of-type {
            margin-top: 0;
        }
    }

    /* The picture that stands where its name does: the first name shows the first picture, and so on, for as
       many names as the longest list has (tests/test_site.py counts them) */
    .tour:has(label:nth-of-type(1) :checked) .tour-shot:nth-of-type(1),
    .tour:has(label:nth-of-type(2) :checked) .tour-shot:nth-of-type(2),
    .tour:has(label:nth-of-type(3) :checked) .tour-shot:nth-of-type(3),
    .tour:has(label:nth-of-type(4) :checked) .tour-shot:nth-of-type(4),
    .tour:has(label:nth-of-type(5) :checked) .tour-shot:nth-of-type(5),
    .tour:has(label:nth-of-type(6) :checked) .tour-shot:nth-of-type(6),
    .tour:has(label:nth-of-type(7) :checked) .tour-shot:nth-of-type(7),
    .tour:has(label:nth-of-type(8) :checked) .tour-shot:nth-of-type(8),
    .tour:has(label:nth-of-type(9) :checked) .tour-shot:nth-of-type(9),
    .tour:has(label:nth-of-type(10) :checked) .tour-shot:nth-of-type(10) {
        display: block;
    }

    /* A picked picture comes in softly, for people whose device hasn't asked for less motion */
    @media (prefers-reduced-motion: no-preference) {
        .tour-shot {
            animation: tour-in 0.35s ease-out;
        }
    }
}

@keyframes tour-in {
    from {
        opacity: 0;
    }
}

.dash-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 4rem;
    margin-top: 2.5rem;
    color: var(--ink-soft);
}

/* What Premium costs, under what it adds */
.premium-price {
    max-width: 46rem;
    margin-top: 2.25rem;
    font-size: 1.125rem;
}

.premium-price a {
    color: var(--deep);
    font-weight: 700;
    white-space: nowrap;
}

.trust,
.how {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(4.5rem, 9vw, 7.5rem);
}

.trust-list {
    display: grid;
    gap: 1.1rem;
    max-width: 46rem;
    margin-top: 2.25rem;
    color: var(--ink-soft);
}

.trust-list li {
    padding-left: 1.4rem;
    border-left: 2px solid var(--violet);
}

code {
    padding: 0.1em 0.35em;
    border-radius: 0.3em;
    background: rgba(101, 49, 127, 0.12);
    color: var(--deep);
    font: inherit;
    font-weight: 700;
}

.trust-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin-top: 2.25rem;
    color: var(--deep);
    font-weight: 700;
}

/* ── Night again ─────────────────────────────────────────────────────────── */

/* The day ends as it began: a sunset, the horizon's colors in the other order */
.nightfall {
    padding: 0 var(--gutter);
    background: linear-gradient(to bottom, #f1b77a 0, #b0688f 2.25rem, #5d3275 5.5rem, #2a1638 10rem, var(--midnight) 19rem);
}

.closing {
    display: grid;
    gap: 1.25rem;
    justify-items: start;
    padding-block: clamp(11rem, 16vw, 14rem) clamp(4rem, 8vw, 6.5rem);
}

.closing h2 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
}

.closing p {
    color: var(--paper-soft);
    font-size: 1.125rem;
}

.foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 2rem 2.5rem;
    border-top: 1px solid var(--line-night);
    color: var(--paper-soft);
    font-size: 0.95rem;
}

.foot-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

/* ── Smaller windows ─────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
    .top-links {
        display: none;
    }

    .top .button {
        margin-left: auto;
    }
}

/* A narrow, upright window (a phone held upright) gets the film in a tall frame, no wider than a phone. The
   film's own layout for that frame is at the end of this file, under the same condition: the two must match,
   or a wide frame gets the tall layout (tests/test_site.py). A phone on its side keeps the wide film. */
@media (max-width: 46rem) and (orientation: portrait) {
    .film-frame,
    .film-bar,
    .film-words {
        max-width: 28rem;
        margin-inline: auto;
    }

    .film-frame {
        aspect-ratio: 2 / 3;
    }

    .film-stage {
        font-size: 3.5cqw;
    }

    /* Only the part being played is named: four names don't fit under four short bars */
    .film-chapter {
        overflow: visible;
        color: transparent;
    }

    .film-chapter.is-now {
        color: var(--paper);
    }
}

@media (max-width: 46rem) {
    /* The name and the button stay on one line down to the narrowest phones, and part company below that */
    .top {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .top .button {
        padding-inline: 0.7rem;
        font-size: 0.95rem;
    }

    .ledger > div,
    .inventory,
    .dash-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .ledger > div {
        gap: 0.6rem;
    }
}

/* ── Inside the film (everything in em, so it scales with the frame) ─────── */

.fx-back,
.fx-scene,
.fx-dawn {
    position: absolute;
    inset: 0;
}

.fx-back {
    background: linear-gradient(to bottom, #0d0713 0%, #1a0f24 60%, #150c1d 60%, #0f0816 100%);
}

.fx-dawn {
    background: linear-gradient(to bottom, #3b2150 0%, #7b4390 34%, #c9788c 52%, #f4bd7e 60%, #2a1838 60%, #1d1128 100%);
    opacity: 0;
}

.fx-sky {
    position: absolute;
    inset: 0 0 40% 0;
    overflow: hidden;
}

.fx-rings {
    position: absolute;
    left: 74%;
    top: 100%;
    width: 60em;
    max-width: none;
    height: 60em;
    margin: -30em;
    color: rgba(239, 232, 245, 0.13);
}

.fx-rings circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    vector-effect: non-scaling-stroke;
}

.fx-sun {
    position: absolute;
    left: 74%;
    top: 100%;
    width: 9em;
    height: 9em;
    margin: -4.5em;
    border-radius: 50%;
    background: radial-gradient(circle, #fff2d2 0%, #ffd68a 46%, rgba(243, 181, 74, 0) 70%);
    opacity: 0;
}

.fx-horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    height: 1px;
    background: rgba(239, 232, 245, 0.3);
    transform-origin: left;
}

.fx-scene {
    opacity: 0;
    pointer-events: none;
}

.fx-clock {
    position: absolute;
    left: 2.6em;
    top: 2em;
    font-weight: 700;
    color: var(--paper-soft);
    opacity: 0;
}

.fx-caption {
    position: absolute;
    left: 50%;
    bottom: 2.1em;
    width: min(48em, 88%);
    translate: -50% 0;
    font: 400 1.55em/1.28 var(--serif);
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
    opacity: 0;
}

.fx-shade {
    position: absolute;
    inset: 78% 0 0 0;
    background: linear-gradient(to bottom, rgba(13, 7, 19, 0), rgba(13, 7, 19, 0.8) 60%);
}

/* A shot: where a scene's windows sit, clear of the clock above and the caption below */
.fx-shot {
    position: absolute;
    inset: 5.2em 3em 9.4em;
    display: grid;
    gap: 1.4em;
    align-items: end;
}

.fx-shot.is-scam {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.fx-shot.is-raid,
.fx-shot.is-staff {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.fx-side {
    position: relative;
    display: grid;
    gap: 1em;
    align-content: end;
    min-height: 100%;
}

/* An alert that takes the place of what was in the column before it */
.fx-side > .is-over {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.fx-win,
.fx-alert {
    border: 1px solid rgba(239, 232, 245, 0.1);
    border-radius: 0.9em;
    background: #1d1226;
    box-shadow: 0 1.8em 4em -1.8em rgba(0, 0, 0, 0.8);
    opacity: 0;
}

.fx-win {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fx-win-h {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.65em 1em;
    border-bottom: 1px solid rgba(239, 232, 245, 0.08);
    font-weight: 700;
}

.fx-win-h i {
    font-style: normal;
    color: var(--paper-soft);
}

.fx-win-b {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.8em;
    padding: 1em;
    min-height: 0;
}

.fx-win.is-small {
    font-size: 0.82em;
}

.fx-m {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr);
    gap: 0.7em;
    opacity: 0;
}

.fx-av {
    display: grid;
    place-items: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background: #4c6fb0;
    color: #ffffff;
    font-size: 0.95em;
    font-weight: 700;
}

.fx-av.is-b {
    background: #b0567a;
}

.fx-av.is-c {
    background: #3f8f7a;
}

.fx-av.is-d {
    background: #9a6a2c;
}

.fx-av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.fx-m b {
    margin-right: 0.5em;
}

.fx-m small,
.fx-j small,
.fx-a small {
    color: var(--paper-soft);
    font-size: 0.84em;
}

.fx-m p {
    color: #dcd2e6;
}

.fx-link {
    color: #cfa7e6;
    text-decoration: underline;
}

.fx-bad {
    color: var(--alarm);
    font-weight: 700;
}

.fx-tag {
    display: inline-block;
    margin-top: 0.45em;
    padding: 0.2em 0.6em;
    border-radius: 0.4em;
    background: rgba(240, 119, 108, 0.16);
    color: #ffc0b8;
    font-size: 0.88em;
    opacity: 0;
}

.fx-alert {
    display: grid;
    gap: 0.7em;
    padding: 1.1em 1.2em 1.2em;
    border-color: rgba(243, 181, 74, 0.42);
}

.fx-alert h4 {
    margin: 0;
    font: 700 1.08em/1.3 var(--sans);
}

.fx-alert h4 small {
    display: block;
    color: var(--paper-soft);
    font-size: 0.84em;
    font-weight: 400;
}

.fx-done {
    display: grid;
    grid-template-columns: 1.15em minmax(0, 1fr);
    gap: 0.6em;
    align-items: start;
    opacity: 0;
}

.fx-done::before {
    content: '';
    width: 0.62em;
    height: 0.34em;
    margin: 0.38em 0 0 0.2em;
    border: solid var(--light);
    border-width: 0 0 0.16em 0.16em;
    rotate: -45deg;
}

.fx-btns {
    display: flex;
    gap: 0.6em;
    opacity: 0;
}

.fx-btn {
    padding: 0.32em 0.9em;
    border-radius: 0.45em;
    background: rgba(239, 232, 245, 0.11);
    font-size: 0.92em;
    font-weight: 700;
}

.fx-btn.is-danger {
    background: rgba(240, 119, 108, 0.2);
    color: #ffc0b8;
}

.fx-note {
    color: var(--paper-soft);
    font-size: 0.86em;
    opacity: 0;
}

/* The raid: a list of joins, and how many in the last minute */
.fx-joins {
    position: relative;
    height: 15.5em;
    overflow: hidden;
}

.fx-joins-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.fx-j,
.fx-a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    padding-block: 0.42em;
    border-bottom: 1px solid rgba(239, 232, 245, 0.06);
    opacity: 0;
}

.fx-count {
    display: grid;
    gap: 0.2em;
    opacity: 0;
}

.fx-count b {
    font: 400 6.4em/0.95 var(--serif);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.fx-count span {
    color: var(--paper-soft);
}

.fx-banner {
    padding: 0.55em 0.9em;
    border: 1px solid rgba(240, 119, 108, 0.45);
    border-radius: 0.7em;
    background: rgba(240, 119, 108, 0.16);
    color: #ffc8c1;
    font-weight: 700;
    opacity: 0;
}

/* The stolen login: what the account did, and the ten seconds it did it in */
.fx-a b {
    font-weight: 400;
}

.fx-a.is-last b {
    color: var(--alarm);
    font-weight: 700;
}

.fx-meter {
    display: grid;
    gap: 0.4em;
    margin-top: 0.4em;
    color: var(--paper-soft);
    font-size: 0.86em;
    opacity: 0;
}

.fx-meter i {
    display: block;
    height: 0.36em;
    border-radius: 0.2em;
    background: var(--alarm);
    transform-origin: left;
}

/* Morning: the dashboard, and the night's three entries beside it */
.fx-screen {
    position: absolute;
    left: 3em;
    top: 4.6em;
    width: 54%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(239, 232, 245, 0.18);
    border-radius: 0.8em;
    box-shadow: 0 2.4em 5em -2em rgba(0, 0, 0, 0.8);
    opacity: 0;
}

.fx-screen img {
    width: 100%;
    max-width: none;
    transform-origin: 0 0;
}

.fx-night-list {
    position: absolute;
    right: 3em;
    top: 5.6em;
    width: 33%;
    display: grid;
    gap: 1em;
    padding: 1.3em 1.4em;
    border-radius: 0.9em;
    background: rgba(19, 11, 27, 0.62);
    opacity: 0;
}

.fx-entry {
    display: grid;
    gap: 0.1em;
    padding-left: 1em;
    border-left: 0.18em solid var(--light);
    opacity: 0;
}

.fx-entry small {
    color: rgba(255, 244, 222, 0.82);
    font-size: 0.86em;
}

.fx-entry b {
    font: 400 1.3em/1.25 var(--serif);
}

/* The title cards */
.fx-title {
    position: absolute;
    left: 3em;
    top: 50%;
    display: grid;
    gap: 0.35em;
    translate: 0 -78%;
}

.fx-title b {
    font: 400 5.4em/0.95 var(--serif);
    letter-spacing: -0.03em;
    opacity: 0;
}

.fx-title span {
    max-width: 24em;
    font: 400 1.7em/1.3 var(--serif);
    color: var(--paper-soft);
    opacity: 0;
}

.fx-end {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.1em;
    text-align: center;
}

.fx-end img {
    width: 7.5em;
    height: 7.5em;
    opacity: 0;
}

.fx-end b {
    font: 400 4.2em/1 var(--serif);
    letter-spacing: -0.02em;
    opacity: 0;
}

/* (the wordmark sits on the horizon and the line under it, as the rule sits under EQX in the mark) */
.fx-end {
    translate: 0 -1.1em;
}

.fx-end span {
    margin-top: 1em;
    font: 400 1.6em/1.3 var(--serif);
    color: var(--paper-soft);
    opacity: 0;
}

/* The film in a tall frame: one window above the other, and less in each (the same condition as the frame's
   own rules under "Smaller windows") */
@media (max-width: 46rem) and (orientation: portrait) {
    .fx-shot {
        inset: 4.4em 1.3em 9.2em;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.8em;
        align-content: start;
        align-items: start;
    }

    .fx-win-b {
        gap: 0.6em;
        padding: 0.8em 1em;
    }

    .fx-shot.is-scam,
    .fx-shot.is-raid,
    .fx-shot.is-staff {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-only-wide {
        display: none;
    }

    /* (the alert that takes a column's place sits at the foot of the shot here, under the window) */
    .fx-side {
        position: static;
        min-height: 0;
    }

    .fx-clock {
        left: 1.3em;
        top: 1.3em;
    }

    .fx-caption {
        bottom: 1.4em;
        width: 92%;
        font-size: 1.3em;
    }

    .fx-joins {
        height: 8.6em;
    }

    .fx-count b {
        font-size: 3.6em;
    }

    /* The title card sits above the horizon, clear of the Play button on it */
    .fx-title {
        left: 1.3em;
        right: 1.3em;
        top: 14%;
        translate: none;
    }

    .fx-title b {
        font-size: 4em;
    }

    .fx-screen {
        left: 1.3em;
        top: 4.2em;
        width: calc(100% - 2.6em);
    }

    .fx-night-list {
        left: 1.3em;
        right: 1.3em;
        top: auto;
        bottom: 9.4em;
        width: auto;
        gap: 0.6em;
    }

    .fx-entry b {
        font-size: 1.05em;
    }
}