/* TrackPrint's website, after the app's welcome tour, "Side A".
   The landing page reads as one side of a record: dark is the record, light
   is its sleeve, and the record itself stays black in both. The support page
   is the liner notes, one paper sheet in both themes. */

@font-face {
    font-family: "Barlow Condensed";
    src: url("fonts/barlow-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("fonts/barlow-condensed-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/jetbrains-mono-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/jetbrains-mono-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    /* The record */
    --ground: #0e0e0e;
    --stage: #1b1b1b;
    --card: #262626;
    --groove: #2e2e2e;
    --text: #f1ebdf;
    --muted: #a8a29a;
    --accent: #f48754;
    --on-accent: #141414;
    --accent-text: #f48754;
    --bar: rgb(14 14 14 / 0.78);
    --shadow: rgb(0 0 0 / 0.6);
    --vinyl: #0e0e0e;
    --vinyl-groove: #1d1d1d;
    /* The features' colours, as the app's welcome tour draws them */
    --pink: #f07cc6;
    --orange: #ff8a4c;
    --teal: #3dd1bd;
    --blue: #6ea0ff;
    --purple: #c79bff;
    --green: #4cd471;
    /* The liner notes: paper and ink in both themes */
    --table: #0e0e0e;
    --table-text: #a8a29a;
    --paper: #f1ebdf;
    --paper-2: #e8e0d1;
    --ink: #1d1a16;
    --ink-muted: #5e574d;
    --ink-red: #b04a26;
    --leader: #b9ae9c;
    --ok: #18692e;
    /* Type */
    --display: "Barlow Condensed", "SF Pro Display", "Arial Narrow", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --ground: #f1ebdf;
        --stage: #e8e0d1;
        --card: #faf6ee;
        --groove: #d9cfbd;
        --text: #1d1a16;
        --muted: #6b6358;
        --accent-text: #b04a26;
        --bar: rgb(241 235 223 / 0.82);
        --shadow: rgb(60 40 20 / 0.22);
        --pink: #b4287f;
        --orange: #b54708;
        --teal: #0b7568;
        --blue: #1f62d6;
        --purple: #7a3bd6;
        --green: #1d7f37;
        --table: #ddd4c3;
        --table-text: #4f483f;
    }
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font: 17px/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    overflow-x: clip;
}

a {
    color: var(--accent-text);
}

img {
    max-width: 100%;
    height: auto;
}

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

.wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

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

/* Top bar: the side's tracklist, and a playback bar that fills as you read. */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bar);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
}

.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 3.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.brand img {
    width: 26px;
    height: 26px;
}

.tracks {
    display: flex;
    gap: 1.25rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font: 400 0.8rem/1 var(--mono);
}

/* The side switch: A or B, the side being read filled. The tracks list
   only that side's. */

.sides {
    display: flex;
    flex: none;
    padding: 2px;
    border: 1px solid var(--groove);
    border-radius: 999px;
    font: 700 0.72rem/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sides a {
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
}

.sides a:hover {
    color: var(--text);
}

.sides a[aria-current] {
    background: var(--accent);
    color: var(--on-accent);
}

.topbar[data-side="a"] .tracks [data-side="b"],
.topbar[data-side="b"] .tracks [data-side="a"] {
    display: none;
}

.tracks a {
    display: flex;
    gap: 0.4rem;
    color: var(--muted);
    text-decoration: none;
}

.tracks a b {
    color: var(--c);
    font-weight: 700;
}

.tracks a:hover,
.tracks a[aria-current] {
    color: var(--text);
}

.support-link {
    color: var(--muted);
    font-size: 0.9rem;
    text-decoration: none;
}

.support-link:hover {
    color: var(--text);
}

.playhead {
    height: 2px;
    background: var(--groove);
}

.playhead span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--accent);
}

/* Track headers: the number in the feature's colour, the name in small capitals,
   centred between two rules. */

.track {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.8rem;
    margin: 0 0 1.1rem;
    font: 700 0.85rem/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.track b {
    color: var(--c);
    font-size: 1rem;
    letter-spacing: 0;
}

.track::before,
.track::after {
    content: "";
    flex: 0 1 4rem;
    height: 1px;
    align-self: center;
    background: var(--groove);
}

h1,
h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.005em;
    text-wrap: balance;
}

/* Every track opens with its header, headline and line, centred. */

.intro {
    text-align: center;
}

.intro h1 {
    font-size: clamp(3.4rem, 9vw, 6.6rem);
}

.intro h2 {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
}

.line {
    max-width: 32rem;
    margin: 1.1rem auto 0;
    font-size: 1.15rem;
    color: var(--muted);
}

.content {
    margin-top: 3rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
    font-size: 0.95rem;
}

.badge svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: -2px;
    fill: currentColor;
}

.cta {
    margin: 2rem 0 0;
}

/* A poster as a print: a thin paper edge and a shadow on the wall. */

.print {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    box-shadow: 0 1px 2px var(--shadow), 0 20px 40px var(--shadow);
}

/* A1 Welcome: a record at 33⅓ rpm with the sample album's cover as its label,
   under the headline. */

.hero {
    padding-block: 4.5rem 3rem;
}

.deck {
    width: min(100%, 26rem);
    margin: 3.5rem auto 0;
}

.record {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--vinyl);
    box-shadow: 0 30px 60px var(--shadow);
}

.disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle at 50% 50%,
        var(--vinyl) 0 2px,
        var(--vinyl-groove) 2px 3px
    );
    animation: spin 1.8s linear infinite;
}

.disc img {
    position: absolute;
    inset: 32%;
    width: 36%;
    height: 36%;
    border-radius: 50%;
    object-fit: cover;
}

.disc::after {
    content: "";
    position: absolute;
    inset: 49%;
    border-radius: 50%;
    background: var(--ground);
}

.sheen {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 20deg,
        transparent 0 10%,
        rgb(255 255 255 / 0.09) 14%,
        transparent 20% 60%,
        rgb(255 255 255 / 0.06) 64%,
        transparent 70%
    );
    pointer-events: none;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

.nowplaying {
    margin-top: 1.5rem;
    font: 0.78rem/1.3 var(--mono);
    color: var(--muted);
}

.nowplaying .row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.nowplaying strong {
    color: var(--text);
}

.nowplaying .bar {
    position: relative;
    height: 4px;
    margin: 0.6rem 0;
    border-radius: 2px;
    background: var(--groove);
}

.nowplaying .bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 2px;
    background: var(--accent);
}

.nowplaying .bar span::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

/* The hero's wall: three posters hung side by side. */

.wall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
    align-items: start;
    margin-top: 4rem;
    padding: 3.5rem 6% 4rem;
    border-radius: 6px;
    background: var(--stage);
}

.wall .print:nth-child(2) {
    margin-top: 2.5rem;
}

/* The tracks */

section.side {
    padding-top: 8rem;
}

/* A2 Find: where the albums and their covers come from, side by side. */

.sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 48rem;
    margin-inline: auto;
}

.source {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 1.8rem 1.5rem;
    border-radius: 4px;
    background: var(--card);
    text-align: center;
}

.source svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: var(--c);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.source h3 {
    margin: 0.3rem 0 0;
    font: 600 1.4rem/1 var(--display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.source p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
}

/* A3 Styles: a reel. The section holds still while you scroll; each poster
   morphs into the next and its number, name and description come in. Without
   JavaScript, or with reduced motion, it is a grid of all eight. */

.reel {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
}

.reel-index {
    display: none;
}

.reel-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.style {
    margin: 0;
    text-align: center;
}

.style .text {
    margin-top: 1.1rem;
}

.style .n {
    display: block;
    font: 700 0.8rem/1 var(--mono);
    color: var(--accent-text);
}

.style h3 {
    margin: 0.35rem 0 0.3rem;
    font: 600 1.6rem/1 var(--display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.style p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--muted);
}

/* The reel, once the script runs it: a stage pinned under the top bar, as
   tall as the screen, the eight styles stacked on it. */

.reel.playing {
    height: calc(var(--count) * 70svh + 100svh - 3.6rem);
}

.reel.playing .stage {
    position: sticky;
    top: 3.6rem;
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) 11rem;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    height: calc(100svh - 3.6rem);
    padding-block: 1.5rem;
}

.reel.playing .reel-index {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reel-index button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 3px;
    font: 400 0.8rem/1 var(--mono);
    color: var(--muted);
    cursor: pointer;
}

.reel-index button:hover {
    color: var(--text);
}

.reel-index button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0;
}

.reel-index b {
    font-weight: 700;
}

.reel-index [aria-current] {
    color: var(--accent-text);
}

.reel-index .meter {
    margin-left: auto;
}

.reel.playing .reel-items {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    align-self: stretch;
    min-height: 0;
    gap: 0;
}

/* Every style sits in the stage's one cell, the one playing on top: its
   poster above, its words below. */

.reel.playing .style {
    grid-area: 1 / 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
}

.reel.playing .style .print,
.reel.playing .style .phone-shot {
    grid-row: 1;
    place-self: center;
    width: auto;
    height: min(100%, 36rem);
    max-width: 100%;
    opacity: var(--shown, 0);
    filter: blur(calc(var(--away, 1) * 10px));
    transform: scale(calc(1 - var(--away, 1) * 0.08));
    will-change: opacity, transform, filter;
}

.reel.playing .style .text {
    grid-row: 2;
    width: min(100%, 30rem);
    min-height: 7.5rem;
    margin: 1.4rem auto 0;
    opacity: var(--read, 0);
    transform: translateY(calc(var(--toward, 0) * 1.25rem));
}

.reel.playing .style:not(.near) .print,
.reel.playing .style:not(.near) .phone-shot,
.reel.playing .style:not(.near) .text {
    visibility: hidden;
}

.reel-count {
    display: none;
}

.reel.playing .reel-count {
    display: block;
    justify-self: end;
    align-self: end;
    font: 0.75rem/1.4 var(--mono);
    color: var(--muted);
    text-align: right;
}

.reel-count b {
    display: block;
    font: 700 3.4rem/1 var(--display);
    color: var(--accent-text);
}

/* The level meter: five bars, moving on the style playing. */

.meter {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 0.9rem;
    opacity: 0;
}

.meter i {
    width: 3px;
    height: 30%;
    border-radius: 1px;
    background: var(--accent);
    animation: level 0.9s ease-in-out infinite alternate;
}

.meter i:nth-child(2) {
    animation-delay: -0.3s;
}

.meter i:nth-child(3) {
    animation-delay: -0.6s;
}

.meter i:nth-child(4) {
    animation-delay: -0.15s;
}

.meter i:nth-child(5) {
    animation-delay: -0.45s;
}

@keyframes level {
    0% {
        height: 20%;
    }

    50% {
        height: 90%;
    }

    100% {
        height: 45%;
    }
}

[aria-current] .meter {
    opacity: 1;
}

/* A4 Adjust: a cover and the five colours picked from it. */

.palette {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.5rem;
    align-items: center;
    max-width: 40rem;
    margin-inline: auto;
    padding: 2rem;
    border-radius: 4px;
    background: var(--stage);
}

.palette img {
    display: block;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 14px 30px var(--shadow);
}

.palette ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.palette li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font: 0.82rem/1 var(--mono);
    color: var(--muted);
}

.palette li::before {
    content: "";
    width: 3.2rem;
    height: 2.2rem;
    border-radius: 2px;
    background: var(--s);
}

/* A5 Print: the formats as outlines at their real proportions. */

.formats {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2rem;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
}

.formats li {
    flex: 1;
    max-width: 9rem;
}

.formats .frame {
    display: block;
    border: 2px solid var(--c);
    border-radius: 2px;
    background: color-mix(in srgb, var(--c) 12%, transparent);
}

.formats h3 {
    margin: 0.8rem 0 0.1rem;
    font: 600 1.3rem/1 var(--display);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.formats p {
    margin: 0;
    font: 0.75rem/1.3 var(--mono);
    color: var(--muted);
}

.exports {
    margin: 2.5rem 0 0;
    color: var(--muted);
    text-align: center;
}

.exports strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.9em;
}

.fineprint {
    max-width: 34rem;
    margin: 0.75rem auto 0;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
}

/* Side B: the record turned over. Its tracks are the players: what the
   Music app plays, in each style's player (B1), on the Lock Screen (B2), in
   the Mac's mini player (B3) and round its notch (B4). Their pictures are
   screenshots of the app playing the sample album. */

.turn {
    display: grid;
    justify-items: center;
    padding-top: 9rem;
    text-align: center;
}

.turn .track {
    margin-top: 2rem;
    white-space: nowrap;
}

.turn h2 {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
}

.label.turning {
    width: 11rem;
    background: repeating-radial-gradient(
        circle at 50% 50%,
        var(--vinyl) 0 2px,
        var(--vinyl-groove) 2px 3px
    );
    animation: spin 1.8s linear infinite;
}

.label.turning span {
    position: relative;
    font: 700 2.4rem/1 var(--display);
    color: var(--on-accent);
}

/* A phone's screenshot, in a thin dark bezel. */

.phone-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 1391;
    border-radius: 13% / 6%;
    background: #000;
    box-shadow: 0 0 0 5px #1a1a1a, 0 0 0 6px var(--groove), 0 24px 48px var(--shadow);
}

.players .style .text b {
    color: var(--text);
    font-weight: 600;
}

.players .reel-items {
    gap: 3rem 2.5rem;
}

.players + .fineprint {
    margin-top: 2.5rem;
}

/* B2: the Lock Screen beside the island held open. */

.lockup {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 26rem);
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.lockup figure {
    margin: 0;
    text-align: center;
}

.lockup figcaption {
    margin-top: 1.4rem;
    font: 0.75rem/1.3 var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.island img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 30px var(--shadow));
}

/* B3: a Mac desktop with another app's window, the mini player floating at
   its top right, at its size in points. */

.desk {
    position: relative;
    max-width: 52rem;
    min-height: 27rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background:
        radial-gradient(90% 120% at 85% 10%, #fbb677 0, transparent 55%),
        radial-gradient(80% 100% at 0% 100%, #3d4a7a 0, transparent 60%),
        linear-gradient(150deg, #8c6670, #ee7b45 60%, #fbb677);
    box-shadow: 0 0 0 1px var(--groove), 0 30px 60px var(--shadow);
}

.desk-bar,
.notch-bar {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    height: 1.75rem;
    padding: 0 0.9rem;
    background: rgb(28 20 24 / 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font: 500 0.75rem/1 var(--sans);
    color: #fff;
}

.desk-bar .clock {
    margin-left: auto;
}

.desk-window {
    position: absolute;
    top: 3.5rem;
    left: 6%;
    display: grid;
    gap: 0.7rem;
    align-content: start;
    width: 50%;
    height: 21rem;
    padding: 2.6rem 2rem;
    border-radius: 12px;
    background: #fbfaf7;
    box-shadow: 0 20px 50px rgb(40 20 20 / 0.35);
}

.desk-window::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    width: 3rem;
    height: 0.7rem;
    background:
        radial-gradient(circle at 0.35rem 50%, #ff5f57 0.32rem, transparent 0.34rem),
        radial-gradient(circle at 1.5rem 50%, #febc2e 0.32rem, transparent 0.34rem),
        radial-gradient(circle at 2.65rem 50%, #28c840 0.32rem, transparent 0.34rem);
}

.desk-window i {
    height: 0.55rem;
    border-radius: 3px;
    background: #e6e3dd;
}

.desk-window i:first-child {
    width: 55%;
    height: 1.2rem;
    margin-bottom: 0.6rem;
    background: #d6d1c8;
}

.desk-window i:nth-child(4n) {
    width: 70%;
}

.mini {
    position: absolute;
    top: calc(1.75rem + 16px);
    right: 16px;
    max-width: calc(100% - 24px);
    height: auto;
    filter: drop-shadow(0 14px 22px rgb(30 10 10 / 0.4));
}

.mini-controls {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    margin-top: 2rem;
}

.mini-controls[hidden] {
    display: none;
}

.seg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
}

.seg button {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--groove);
    border-radius: 999px;
    background: none;
    font: 700 0.72rem/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
}

.seg button:hover {
    color: var(--text);
}

.seg button[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

kbd {
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--groove);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: 700 0.8em/1 var(--mono);
    color: var(--text);
}

/* B4: the top of a MacBook's screen at its size in points (736 of them
   across, scaled down with the page), the notch in the middle of the menu
   bar. Open, the player hangs from the screen's top edge. */

.notch-screen {
    --pt: calc(100cqw / 736);
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
    container-type: inline-size;
    border: 6px solid #1a1a1a;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background:
        radial-gradient(70% 140% at 80% 0%, #fbb677 0, transparent 60%),
        linear-gradient(160deg, #3d4a7a, #8c6670 55%, #ee7b45);
    box-shadow: 0 30px 60px var(--shadow);
}

.notch-screen::after {
    content: "";
    display: block;
    height: calc(300 * var(--pt));
}

.notch-bar {
    position: absolute;
    inset: 0 0 auto;
    justify-content: space-between;
    height: calc(32 * var(--pt));
    font-size: max(0.55rem, calc(13 * var(--pt)));
}

.notch-bar > span {
    display: flex;
    gap: 1.1em;
}

.notch-shape {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(185 * var(--pt));
    height: calc(32 * var(--pt));
    padding: 0;
    border: 0;
    border-radius: 0 0 calc(9 * var(--pt)) calc(9 * var(--pt));
    background: #000;
    cursor: pointer;
    transform: translateX(-50%);
    transform-origin: 50% 0;
    transition: transform 0.25s, opacity 0.2s;
}

/* The soft shoulders where the notch meets the screen's top edge. */
.notch-shape::before,
.notch-shape::after {
    content: "";
    position: absolute;
    top: 0;
    width: calc(14 * var(--pt));
    height: calc(10 * var(--pt));
}

.notch-shape::before {
    right: 100%;
    background: radial-gradient(circle at 0 100%, transparent 70%, #000 72%);
}

.notch-shape::after {
    left: 100%;
    background: radial-gradient(circle at 100% 100%, transparent 70%, #000 72%);
}

.notch-margin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke-width: 2;
}

.notch-screen.near .notch-shape {
    transform: translateX(-50%) scale(1.08);
}

.notch-open {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(616 * var(--pt));
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(0.3, 0.13);
    transform-origin: 50% 0;
    transition: transform 0.4s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.2s, visibility 0s 0.4s;
}

/* The screenshot is the pill's open player, whose top corners are round;
   a band of black squares them off against the screen's top edge. */
.notch-open::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(28 * var(--pt));
    right: calc(28 * var(--pt));
    height: calc(30 * var(--pt));
    background: #000;
}

.notch-open img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.notch-screen.open .notch-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
    transition: transform 0.4s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.15s, visibility 0s;
}

.notch-screen.open .notch-shape {
    opacity: 0;
}

.notch-styles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    max-width: 60rem;
    margin: 3.5rem auto 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.notch-styles img {
    display: block;
    width: 100%;
    height: auto;
}

.notch-styles span {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
    font: 0.75rem/1 var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.notch-styles b {
    color: var(--teal);
}

.notch-styles + .fineprint {
    margin-top: 2rem;
}

/* And a little more */

.more {
    padding-top: 8rem;
}

.more h2 {
    margin-bottom: 2rem;
    font-size: clamp(2rem, 4vw, 2.6rem);
    text-align: center;
}

.more ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background: var(--groove);
    border: 1px solid var(--groove);
}

.more li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 0.8rem;
    background: var(--ground);
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
}

.more svg {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: var(--c, var(--accent-text));
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Closing: the label at the centre of the record. */

.closing {
    display: grid;
    justify-items: center;
    padding-block: 8rem 6rem;
    text-align: center;
}

.label {
    position: relative;
    display: grid;
    place-items: center;
    width: 13rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--vinyl);
    box-shadow: 0 0 0 1px var(--groove);
}

.label::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: var(--accent);
}

.label img {
    position: relative;
    width: 4.2rem;
    height: 4.2rem;
}

.closing h2 {
    margin-top: 1.6rem;
    font-size: 2.6rem;
}

.closing p {
    margin: 0.3rem 0 0;
    color: var(--muted);
}

.closing .cta {
    margin-top: 1.75rem;
}

/* Footer, centred: the links over the copyright. */

footer {
    border-top: 1px solid var(--groove);
}

footer .wrap {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.6rem;
    padding-block: 1.5rem 2.5rem;
    font: 0.75rem/1.6 var(--mono);
    color: var(--muted);
    text-align: center;
}

footer p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 1.2rem;
    margin: 0;
}

footer a {
    color: var(--muted);
    text-decoration: none;
}

footer a:hover {
    color: var(--text);
}

/* The record and the meters stand still; the meters hold one level. */

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

    .disc,
    .label.turning,
    .meter i {
        animation: none;
    }

    .notch-shape,
    .notch-open,
    .notch-screen.open .notch-open {
        transition: none;
    }

    .meter i:nth-child(1) {
        height: 45%;
    }

    .meter i:nth-child(2) {
        height: 80%;
    }

    .meter i:nth-child(3) {
        height: 60%;
    }

    .meter i:nth-child(4) {
        height: 95%;
    }

    .meter i:nth-child(5) {
        height: 35%;
    }
}

/* Narrow screens */

@media (max-width: 900px) {
    .topbar .wrap {
        gap: 1rem;
    }

    .tracks {
        gap: 0.9rem;
    }

    .tracks .t,
    .sides .t {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .reel-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 1.25rem;
    }

    /* The reel on a phone: the numbers in a row on top, the poster, then its words. */

    .reel.playing .stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 1rem;
        padding-block: 1rem;
    }

    .reel.playing .reel-index {
        display: flex;
        justify-content: center;
        gap: 0.1rem;
    }

    .reel-index button {
        width: auto;
        padding: 0.45rem 0.4rem;
    }

    .reel-index .name,
    .reel-index .meter {
        display: none;
    }

    .reel.playing .reel-count {
        display: none;
    }

    .reel.playing .style .print {
        height: min(100%, calc((100vw - 2rem) * 4 / 3));
    }

    .reel.playing .style .text {
        min-height: 8.5rem;
        margin-top: 1rem;
    }

    .more ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .reel.playing .style .phone-shot {
        height: 100%;
    }

    .notch-styles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .hero {
        padding-block: 3rem 2.5rem;
    }

    .deck {
        width: min(100%, 20rem);
        margin-top: 2.5rem;
    }

    .wall {
        margin-top: 3rem;
        padding: 2rem 5% 2.5rem;
    }

    .wall .print:nth-child(2) {
        margin-top: 1.25rem;
    }

    section.side,
    .more {
        padding-top: 5.5rem;
    }

    .turn {
        padding-top: 6rem;
    }

    .lockup {
        grid-template-columns: minmax(0, 15rem);
        gap: 3rem;
    }

    .desk {
        min-height: 25rem;
    }

    .desk-window {
        width: 80%;
        opacity: 0.85;
    }

    .sources {
        grid-template-columns: minmax(0, 1fr);
    }

    .palette {
        gap: 1rem;
        padding: 1.1rem;
    }

    .formats {
        gap: 0.9rem;
    }

    .closing {
        padding-block: 6rem 4rem;
    }
}

@media (max-width: 420px) {
    .topbar .wrap {
        gap: 0.75rem;
    }

    .brand span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .tracks {
        gap: 0.6rem;
    }
}

/* Support page: the liner notes, one paper sheet laid on the record's black
   (on a darker paper in light mode). */

body.notes {
    background: var(--table);
    color: var(--ink);
    font-size: 16px;
}

.notes .wrap {
    max-width: 46rem;
}

.notes a {
    color: var(--ink-red);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.notes :focus-visible {
    outline-color: var(--ink-red);
}

.back {
    display: flex;
    justify-content: space-between;
    padding-block: 1.2rem;
    font: 0.8rem var(--mono);
    color: var(--table-text);
}

.notes .back a {
    color: var(--table-text);
    text-decoration: none;
}

.notes .back a:hover {
    text-decoration: underline;
}

.sheet {
    margin-bottom: 3rem;
    padding: 3rem 3.25rem 3.5rem;
    background: var(--paper);
    box-shadow: 0 2px 4px var(--shadow), 0 30px 60px var(--shadow);
}

.sheet-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
    padding-bottom: 1.25rem;
    border-bottom: 3px double var(--ink);
}

.sheet-head .kicker {
    margin: 0;
    font: 700 0.75rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-red);
}

.sheet h1 {
    margin-top: 0.5rem;
    font-size: clamp(3rem, 9vw, 4.6rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.sheet-head .cat {
    margin: 0;
    font: 0.72rem/1.5 var(--mono);
    color: var(--ink-muted);
    text-align: right;
}

.lede-left {
    max-width: 36rem;
    margin: 1.25rem 0 0;
    color: var(--ink-muted);
}

.sheet h2 {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 3rem 0 1rem;
    font: 700 0.8rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sheet h2 b {
    color: var(--ink-red);
}

.sheet h2::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--ink);
}

.sheet h2 + .lede-left {
    margin-top: 0;
}

/* Questions: each a line on dotted leaders, opening to its answer. */

.faq details {
    border-bottom: 1px solid color-mix(in srgb, var(--leader) 45%, transparent);
}

.faq summary {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.75rem 0;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq .q {
    flex: none;
    font: 700 0.75rem var(--mono);
    color: var(--ink-muted);
}

.faq .lead {
    flex: 1 0 1.5rem;
    align-self: flex-end;
    margin-bottom: 0.4em;
    border-bottom: 2px dotted var(--leader);
}

.faq summary::after {
    content: "+";
    padding-left: 0.25rem;
    font: 400 1rem var(--mono);
    color: var(--ink-red);
}

.faq details[open] summary::after {
    content: "−";
}

.faq details p {
    max-width: 34rem;
    margin: 0 0 1rem 2.1rem;
    color: var(--ink-muted);
}

/* For rights holders: two columns, like a sleeve's credits. */

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}

.columns h3 {
    margin: 0 0 0.6rem;
    font: 700 0.72rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-red);
}

.columns ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.93rem;
    color: var(--ink-muted);
}

.columns li {
    padding: 0.45rem 0;
    border-top: 1px dotted var(--leader);
}

.contact {
    margin: 1.5rem 0 0;
    font: 0.85rem/1.6 var(--mono);
}

/* Send Feedback: a reply card, cut along the dashes. */

#feedback {
    margin-top: 1.25rem;
    padding: 1.5rem;
    border: 1.5px dashed var(--ink-muted);
    background: var(--paper-2);
}

.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.segmented legend,
#feedback > label {
    display: block;
    padding: 0;
    font: 700 0.72rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.segmented legend {
    margin-bottom: 0.7rem;
}

#feedback > label {
    margin: 1.1rem 0 0.3rem;
}

.segmented label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 500;
    cursor: pointer;
}

.segmented input {
    appearance: none;
    display: grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
}

.segmented input:checked::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--ink-red);
}

.segmented input:focus-visible {
    outline: 2px solid var(--ink-red);
    outline-offset: 2px;
}

#feedback input[type="text"],
#feedback textarea {
    display: block;
    width: 100%;
    padding: 0.55rem 0.6rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 0;
    border-bottom: 1.5px solid var(--ink);
    border-radius: 0;
}

#feedback textarea {
    border: 1.5px solid var(--ink);
    resize: vertical;
}

#feedback input[type="text"]:focus-visible,
#feedback textarea:focus-visible {
    outline: 2px solid var(--ink-red);
    outline-offset: 1px;
}

.hint {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.trap {
    position: absolute;
    left: -10000px;
}

#status {
    min-height: 1.4rem;
    margin: 1rem 0 0.6rem;
    font: 0.85rem var(--mono);
    color: var(--ink-muted);
}

#status.error {
    color: var(--ink-red);
}

#status.ok {
    color: var(--ok);
}

#feedback button {
    padding: 0.8rem 2rem;
    font: 700 0.95rem/1 var(--sans);
    color: var(--on-accent);
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

#feedback button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

#feedback button:disabled {
    opacity: 0.5;
    cursor: default;
}

.notes footer {
    border-top: 0;
}

.notes footer .wrap {
    padding-top: 0;
    color: var(--table-text);
}

.notes footer a {
    color: var(--table-text);
}

.notes footer a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .sheet {
        padding: 1.75rem 1.25rem 2.25rem;
    }

    .sheet-head {
        grid-template-columns: 1fr;
    }

    .sheet-head .cat {
        text-align: left;
    }

    .columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .faq details p {
        margin-left: 0;
    }

    #feedback {
        padding: 1.1rem;
    }
}