/* 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). */

/* The two typefaces are used under names of the site's own, not "Source Serif 4" and "Inter". Software that
   filters what a browser loads can add typefaces to a page under their usual names: AdGuard adds its own copies
   of Inter, and on computers that run it those copies drew everything read here in place of this file, unevenly.
   Under a name nothing else uses, the files below are the ones that draw the page (tests/test_site.py). */
@font-face {
    font-family: 'Equinox Serif';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url(../fonts/source-serif-4.woff2) format('woff2');
}

@font-face {
    font-family: 'Equinox Sans';
    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: 'Equinox Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Equinox Sans', '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: hidden;     /* (for a browser that doesn't know clip: an iPhone before iOS 16) */
    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;
}

/* A button that doesn't ask to be pressed first: the way into the dashboard, and what the film's frame can play */
.button-quiet {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--line-night);
    border-radius: 0.7rem;
    background: transparent;
    color: var(--paper);
    font: 600 1rem/1.3 var(--sans);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

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

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

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

.night {
    padding: 0 var(--gutter);
    overflow-x: hidden;     /* (the same, for a browser that doesn't know clip) */
    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-actions {
    display: flex;
    gap: 0.6rem;
}

.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;
    /* (the typeface's cut for large sizes, asked for by name: a browser that doesn't pick it by itself draws
       the headline in the sturdier cut made for small text, which looks heavy at this size) */
    font-variation-settings: 'opsz' 60;
}

.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;
    -webkit-user-select: none;      /* (an iPhone only knows it by this name: without it a long press picks out text) */
    user-select: none;
}

/* What the frame holds, back to front: a picture from the trailer, the film's stage, and the trailer's video.
   The frame is the video's own size where the page is at its widest (1280 by 720), so its pixels are the film's */
.film-poster img,
.film-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* The frame is a button too: a press anywhere on the picture plays the trailer (on a phone the picture is what
   people press, and the loop under it has neither sound nor controls). The mark in its middle says so. The
   loop's pause button comes after it and so lies on top of it, in its corner */
.film-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;       /* (or a phone grays the whole picture at each press) */
}

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

.film-play:focus-visible {
    outline-offset: -0.5rem;        /* (inside the frame, which cuts off whatever lies outside it) */
    border-radius: 0.7rem;
}

.film-play span {
    display: grid;
    place-items: center;
    width: 3.5rem;                  /* (for a browser that doesn't know the frame's own units) */
    width: clamp(3.5rem, 8cqw, 5.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(19, 11, 27, 0.8);
    box-shadow: 0 0 0 1px var(--line-night);
    transition: background-color 0.15s ease;
}

.film-play:hover span {
    background: var(--dusk);
}

.film-play span::before {
    content: '';
    width: 34%;
    aspect-ratio: 5 / 6;
    margin-left: 8%;                /* (a triangle looks centered a little right of center) */
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The loop's own pause button, in the corner of the frame the trailer leaves empty (its words are bottom left) */
.film-pause {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    background: rgba(19, 11, 27, 0.8);
}

.film-pause:hover {
    background: var(--dusk);
}

/* The two programs, under the frame */
.film-programs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.film-program {
    gap: 0.6rem;
    white-space: normal;
    text-align: left;
}

.film-program[aria-current="true"] {
    border-color: var(--light);
}

.film-program small {
    color: var(--paper-soft);
    font-size: 0.85rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.film-program[hidden],
.film-toggle[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 h3 {
    margin-top: 1.25rem;
    font: 600 1rem/1.3 var(--sans);
    letter-spacing: 0;
    color: var(--paper);
}

.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: 0.75rem;
}

.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-actions {
        margin-left: auto;
    }
}

/* Between there and a wide window the menu and both buttons share one line, so they sit a little closer */
@media (min-width: 62.0625rem) and (max-width: 72rem) {
    .top {
        gap: 1.25rem;
    }

    .top-links {
        gap: 1.1rem;
    }

    .top .button,
    .top .button-quiet {
        padding-inline: 0.85rem;
    }
}

/* 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. The frame
   is only tall while it shows the film (js/screen.js says when): the trailer is a wide picture on every screen. */
@media (max-width: 46rem) and (orientation: portrait) {
    .shows-film .film-frame,
    .shows-film .film-bar {
        max-width: 28rem;
        margin-inline: auto;
    }

    .shows-film .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 two buttons stay on one line while they fit */
    .top {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

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

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

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

/* On a phone held upright they no longer fit beside the name: the two buttons take a line of their own, each
   half of it */
@media (max-width: 27rem) {
    .top-actions {
        flex-basis: 100%;
        margin-left: 0;
    }

    .top-actions > * {
        flex: 1;
        justify-content: center;
    }
}

/* On a touch screen, a line of text to press gets a finger's height (44 px, what phones' own guidelines ask;
   the buttons are that tall everywhere). It gets it as padding that its own margin takes back, so nothing on
   the page moves: only what a finger can hit grows */
@media (pointer: coarse) {
    .brand,
    .quiet-link,
    .film-words summary,
    .trust-links a,
    .foot nav a {
        padding-block: 0.65rem;
        margin-block: -0.65rem;
    }
}

/* ── 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;
    }
}