/* Storytale — shared styles for index-storytale.html and press.html

   A simple studio site: who Storytale is, what it makes, what people say,
   how to reach it. The hero is a house at night, lit by the visitor's lamp.

   Type: Averia Serif Libre (decaying into pixels through an SVG filter) is
   the voice of the
   stories; Departure Mono is the interface. Departure sizes are multiples of
   11px with whole-pixel letter-spacing, the grid it is drawn on.
   Colour: black and grays; the logo red is the only accent. */

/* Departure Mono by Helena Zhang, SIL OFL 1.1 (see assets/fonts/DepartureMono-LICENSE.txt) */
@font-face {
    font-family: 'Departure Mono';
    src: url('/assets/fonts/DepartureMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Averia Serif Libre by Dan Sayers, SIL OFL 1.1 (see assets/fonts/AveriaSerifLibre-LICENSE.txt) */
@font-face {
    font-family: 'Averia Serif Libre';
    src: url('/assets/fonts/AveriaSerifLibre-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('/assets/fonts/AveriaSerifLibre-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

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

:root {
    color-scheme: dark;
    --bg: #0b0b0b;
    --ink: #e6e6e6;
    --soft: #8c8c8c;
    --faint: #4a4a4a;
    --rule: #222;
    --red: #ee2a2f;          /* the logo red, a touch lighter so small text passes 4.5:1 */
    --red-fill: #d91b20;     /* deeper, behind white text */

    --font: 'Departure Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --serif: 'Averia Serif Libre', Georgia, 'Times New Roman', serif;
    /* Decay is a pixelate filter (SVG, injected by site.js) applied to the
       same font, so letters never change width */
    --pixel: url(#pixel-3);
    --pixel-lg: url(#pixel-6);

    --t-s: 11px;
    --t-m: 22px;
    --t-l: 33px;
    --t-xl: 44px;
    --t-xxl: 66px;

    --u: 11px;
    --gutter: 44px;
    --measure: 880px;

    /* Light and depth, updated by site.js from the pointer: --dx/--dy point
       away from the light, --rx/--ry tilt toward it */
    --dx: .4;
    --dy: .5;
    --rx: 0deg;
    --ry: 0deg;
}

html {
    scroll-behavior: smooth;
    /* Full-bleed scenes are wider than the column; clip (not hidden) keeps sticky working */
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Grayscale antialiasing keeps light-on-dark text thin and sharp (macOS) */
body {
    -webkit-tap-highlight-color: transparent;
    font-family: var(--serif);
    font-synthesis: none;
    font-size: var(--t-m);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

/* Interface text in Departure Mono */
.label,
.nav,
.brand,
.skip-link,
.secret,
.index .arrow,
.sound {
    font-family: var(--font);
    text-rendering: optimizeSpeed;
    font-kerning: none;
}

::selection {
    background: var(--red-fill);
    color: #fff;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.page {
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: var(--u);
    z-index: 90;
    background: var(--red-fill);
    color: #fff;
    padding: var(--u) 22px;
    font-size: var(--t-s);
}

.skip-link:focus {
    left: var(--u);
}

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

.label {
    font-size: var(--t-s);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--soft);
}

.nowrap {
    white-space: nowrap;
}

/* Links: a red bar sweeps in under the text; links and buttons dip a pixel when pressed */
a {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0% 2px;
    transition: background-size .25s ease, color .15s ease;
}

a:hover,
a:focus-visible {
    background-size: 100% 2px;
    color: #fff;
}

a:active,
button:active {
    translate: 0 1px;
}

/* Red highlighter sweep */
mark {
    color: inherit;
    background: linear-gradient(var(--red), var(--red)) no-repeat 0 0 / 0% 100%;
    animation: ink .9s .3s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes ink {
    to { background-size: 100% 100%; color: #fff; }
}

.cursor {
    display: inline-block;
    width: .55em;
    height: .85em;
    margin-left: .12em;
    vertical-align: -.04em;
    background: var(--red);
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    to { visibility: hidden; }
}

/* Faint film grain over everything */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(11, 11, 11, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.site-header .page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--u);
    font-size: var(--t-s);
    letter-spacing: 3px;
    background: none;
}

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

.nav {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
}

.nav a,
.sound {
    font-size: var(--t-s);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--soft);
}

.nav a[aria-current],
.sound[aria-pressed="true"] {
    color: #fff;
}

/* A red square fades in just left of the hovered or current link */
.nav a {
    position: relative;
    display: inline-block;
}

.nav a::before {
    content: "■";
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    color: var(--red);
    opacity: 0;
    translate: 4px 0;
    transition: opacity .2s ease, translate .2s ease;
}

.nav a:hover::before,
.nav a:focus-visible::before,
.nav a[aria-current]::before {
    opacity: 1;
    translate: 0 0;
}

.nav a:hover {
    background: none;
}

.sound:hover,
.sound:focus-visible {
    color: #fff;
}

/* ---------- Sections ---------- */

section {
    padding: 88px 0;
    scroll-margin-top: 66px;
}

.section-label {
    display: block;
    margin-bottom: 44px;
}

.section-label b {
    font-weight: 400;
    color: var(--red);
    margin-right: var(--u);
}

/* ---------- Scenes: the house at night, lit by the visitor's lamp ---------- */

/* A dim copy of the scene is always there; a brighter copy shows only where
   the lamp (pointer) falls. --bg-* choose which part of the house each
   scene frames. */
.scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* At rest a lamp is already set down on the porch, so the house reads
       before anyone moves; the pointer picks it up */
    --sx: 66%;
    --sy: 46%;
    --bg-x: 0;
    --bg-y: 40%;
    --bg-size: max(150vw, 178vh) auto;
}

.scene-dim,
.scene-lit {
    position: absolute;
    inset: 0;
    background: url('/assets/house.webp') var(--bg-x) var(--bg-y) / var(--bg-size) no-repeat;
}

.scene-dim {
    filter: brightness(.5) saturate(.6);
}

.scene-lit {
    filter: brightness(1.7) saturate(.85) sepia(.2);
    -webkit-mask-image: radial-gradient(circle 260px at var(--sx) var(--sy), #000 0, rgba(0, 0, 0, .4) 45%, transparent 100%);
    mask-image: radial-gradient(circle 260px at var(--sx) var(--sy), #000 0, rgba(0, 0, 0, .4) 45%, transparent 100%);
}

/* Fade into the page at the bottom; darken behind the text on the left */
.scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, transparent 55%, var(--bg) 100%),
        linear-gradient(to right, rgba(11, 11, 11, .75) 15%, transparent 65%);
}

/* The figure: barely there (2%) until the light finds her. The wrapper
   fades her edges; the image carries the lamp. */
.apparition {
    position: absolute;
    top: 0;
    right: calc(var(--gutter) * -1);
    z-index: 0;
    height: 100%;
    aspect-ratio: 1;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 55% 40%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 55% 40%, #000 35%, transparent 100%);
}

.apparition-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    filter: grayscale(.45) contrast(1.15) brightness(.8);
    --ax: -999px;
    --ay: -999px;
    -webkit-mask-image: radial-gradient(circle 200px at var(--ax) var(--ay), #000 0, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .02) 100%);
    mask-image: radial-gradient(circle 200px at var(--ax) var(--ay), #000 0, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .02) 100%);
}

/* Far layers drift against the pointer (whole pixels, set by site.js) */
.secret,
.apparition {
    translate: var(--far-x, 0) var(--far-y, 0);
}

.secret {
    transition: translate .4s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: min(calc(100svh - 66px), 820px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 44px;
    --mx: -999px;
    --my: -999px;
}

.hero > .scene {
    top: -66px;
    left: 50%;
    right: auto;
    width: 100vw;
    translate: -50% 0;
}

.hero > :not(.secret):not(.apparition):not(.scene) {
    position: relative;
    z-index: 1;
}

.hero h1,
.hero .title-decay {
    font-size: 88px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.hero {
    cursor: crosshair;
}

.hero p {
    max-width: 40ch;
    margin-top: 44px;
    color: var(--soft);
}

.hero .hint {
    margin-top: 44px;
    color: var(--soft);
}

/* Taboos written in the dark, revealed by the lamp */
.secret {
    position: absolute;
    inset: 0 calc(var(--gutter) * -1);
    padding: 44px var(--gutter);
    font-size: var(--t-m);
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--red);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: .8;
    -webkit-mask-image: radial-gradient(circle 160px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .3) 45%, transparent 100%);
    mask-image: radial-gradient(circle 160px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .3) 45%, transparent 100%);
}

/* 3D headline, per line: each line has its own distance (--z), is pushed
   toward the reader by that much, tilts with the pointer, and is extruded
   away from the light. A faint top-left rim catches the light. */
.title {
    position: relative;
    --hx: -999px;
    --hy: -999px;
}

.title .line {
    position: relative;
    display: block;
    --e: calc(var(--z) * 1.6px);
    transform:
        perspective(1100px)
        rotateX(calc(var(--rx) * var(--z)))
        rotateY(calc(var(--ry) * var(--z)));
    transform-origin: 30% 50%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .22),
        calc(var(--dx) * var(--e) * 1) calc(var(--dy) * var(--e) * 1) 0 #2b2b2b,
        calc(var(--dx) * var(--e) * 2) calc(var(--dy) * var(--e) * 2) 0 #272727,
        calc(var(--dx) * var(--e) * 3) calc(var(--dy) * var(--e) * 3) 0 #232323,
        calc(var(--dx) * var(--e) * 4) calc(var(--dy) * var(--e) * 4) 0 #1f1f1f,
        calc(var(--dx) * var(--e) * 5) calc(var(--dy) * var(--e) * 5) 0 #1c1c1c,
        calc(var(--dx) * var(--e) * 6) calc(var(--dy) * var(--e) * 6) 0 #191919,
        calc(var(--dx) * var(--e) * 7) calc(var(--dy) * var(--e) * 7) 0 #161616,
        calc(var(--dx) * var(--e) * 8) calc(var(--dy) * var(--e) * 8) 0 #131313,
        calc(var(--dx) * var(--e) * 9) calc(var(--dy) * var(--e) * 9) 0 #101010,
        calc(var(--dx) * var(--e) * 10) calc(var(--dy) * var(--e) * 10) 0 #0d0d0d,
        calc(var(--dx) * var(--e) * 22) calc(var(--dy) * var(--e) * 22) 28px rgba(0, 0, 0, .95);
}

/* Earlier lines sit above later ones, so descenders overlap the red block */
.title .line:nth-child(1) { z-index: 4; }
.title .line:nth-child(2) { z-index: 3; }
.title .line:nth-child(3) { z-index: 2; }
.title .line:nth-child(4) { z-index: 1; }

.title .line mark {
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .25);
    box-shadow:
        calc(var(--dx) * var(--e) * 2) calc(var(--dy) * var(--e) * 2) 0 #a8161a,
        calc(var(--dx) * var(--e) * 4) calc(var(--dy) * var(--e) * 4) 0 #861114,
        calc(var(--dx) * var(--e) * 6) calc(var(--dy) * var(--e) * 6) 0 #640d0f,
        calc(var(--dx) * var(--e) * 8) calc(var(--dy) * var(--e) * 8) 0 #43080a,
        calc(var(--dx) * var(--e) * 10) calc(var(--dy) * var(--e) * 10) 0 #2a0506,
        calc(var(--dx) * var(--e) * 22) calc(var(--dy) * var(--e) * 22) 28px rgba(0, 0, 0, .95);
}

/* Under the lamp the headline decays: the clean cut fades out and an
   identical copy, pixelated, fades in. Masks clip everything outside
   their box, so they only apply while lit (.lit), with 120px of room. */
.title h1 {
    margin: -120px;
    padding: 120px;
}

.title.lit h1 {
    -webkit-mask-image: radial-gradient(circle 140px at var(--hx) var(--hy), transparent 0 50%, #000 100%);
    mask-image: radial-gradient(circle 140px at var(--hx) var(--hy), transparent 0 50%, #000 100%);
}

.hero .title-decay {
    position: absolute;
    inset: -120px;
    margin-top: 0;
    padding: 120px;
    max-width: none;
    color: var(--ink);
    filter: var(--pixel-lg);
    pointer-events: none;
    user-select: none;
    visibility: hidden;
    -webkit-mask-image: radial-gradient(circle 140px at var(--hx) var(--hy), #000 0 50%, transparent 100%);
    mask-image: radial-gradient(circle 140px at var(--hx) var(--hy), #000 0 50%, transparent 100%);
}

.title.lit .title-decay {
    visibility: visible;
}

/* ---------- Games ---------- */

.games h2 {
    font-size: var(--t-xl);
    font-weight: 400;
    line-height: 1.25;
}

.games > p {
    max-width: 44ch;
    margin-top: 22px;
    color: var(--soft);
}

.index {
    list-style: none;
    margin-top: 44px;
    border-top: 1px solid var(--rule);
}

.index a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    background: none;
    transition: padding-left .25s ease, color .15s ease;
}

.index .ep {
    font-size: var(--t-l);
    line-height: 1.33;
}

.index .label,
.index .arrow {
    transition: color .15s ease, translate .25s ease;
}

.index .arrow {
    font-size: var(--t-s);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--soft);
    align-self: start;
    padding-top: 6px;
}

.ep-text {
    display: grid;
    gap: 6px;
}

.ep-line {
    max-width: 52ch;
    font-size: 17px;
    line-height: 1.5;
    color: var(--soft);
}

/* The art is the preview now */
.preview {
    display: none !important;
}

.index a:hover,
.index a:focus-visible {
    padding-left: 22px;
    color: #fff;
}

.index a:hover .label,
.index a:focus-visible .label,
.index a:hover .arrow,
.index a:focus-visible .arrow {
    color: var(--red);
}

.index a:hover .arrow,
.index a:focus-visible .arrow {
    translate: 6px 0;
}

.go {
    display: inline-flex;
    gap: var(--u);
    margin-top: 44px;
    font-size: var(--t-s);
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid var(--faint);
    padding: var(--u) 22px;
    background: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.go::after {
    content: "→";
    transition: translate .15s ease;
}

.go:hover,
.go:focus-visible {
    background: var(--red-fill);
    border-color: var(--red-fill);
}

.go:hover::after {
    translate: 4px 0;
}

/* Episode art floats beside the pointer, swinging with its movement */
.preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: 330px;
    height: auto;
    pointer-events: none;
    opacity: 0;
    scale: .96;
    transform-origin: 50% 0;
    transition: opacity .2s ease, scale .2s ease, rotate .3s ease-out;
}

.preview.on {
    opacity: 1;
    scale: 1;
}

/* ---------- Press quotes ---------- */

.voices {
    display: grid;
    gap: 66px;
}

.voices blockquote {
    font-size: var(--t-l);
    line-height: 1.33;
}

.voices figcaption {
    margin-top: 22px;
}

.more {
    display: inline-block;
    margin-top: 66px;
}

/* ---------- Studio ---------- */

.lead {
    max-width: 40ch;
    margin-bottom: 44px;
    font-size: var(--t-l);
    line-height: 1.33;
}

/* The studio's statement: bigger, tighter, balanced lines; the closing
   phrase is set in the decayed cut */
.statement {
    max-width: 26ch;
    margin-bottom: 88px;
    font-size: var(--t-xl);
    line-height: 1.17;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.statement em {
    transition: color .3s ease;
    cursor: default;
    font-style: normal;
    color: var(--soft);
}

/* What we do: three aligned columns, each under a hairline */
.doing {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px;
}

.doing li {
    position: relative;
    padding-top: 22px;
    border-top: 1px solid var(--line, #3a3a3a);
}

.doing li::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--red);
    transform-origin: 0 50%;
    scale: 0 1;
    transition: scale .4s cubic-bezier(.2, .7, .2, 1);
}

.doing li:hover::before {
    scale: 1 1;
}

.doing h3 {
    font-weight: 400;
    color: var(--red);
    margin-bottom: 22px;
}

.doing p {
    color: var(--ink);
    text-wrap: pretty;
}

/* ---------- Contact ---------- */

.copy {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--u) 22px;
    margin-top: 0;
    font-family: var(--serif);
    font-size: var(--t-xl);
    line-height: 1.25;
    text-align: left;
    word-break: break-word;
}

.copy .label {
    color: var(--soft);
    transition: color .15s ease;
}

.copy:hover .label,
.copy:focus-visible .label {
    color: var(--ink);
}

.copy.done .label {
    color: var(--red);
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    list-style: none;
    margin-top: 44px;
}


/* ---------- Press archive (press.html) ---------- */

.archive h2 {
    margin-top: 66px;
    padding-bottom: var(--u);
    border-bottom: 1px solid var(--rule);
    font-weight: 400;
}

.archive h2:first-child {
    margin-top: 0;
}

.archive ul {
    list-style: none;
}

.archive li {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: var(--u) 22px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
}

.archive .outlet {
    display: block;
    margin-bottom: var(--u);
}

.lang {
    border: 1px solid var(--rule);
    padding: 0 6px;
}

/* On the press page the headline is flat, with a short extrusion */
.lift {
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, .14),
        calc(var(--dx) * 2px) calc(var(--dy) * 2px) 0 #1f1f1f,
        calc(var(--dx) * 4px) calc(var(--dy) * 4px) 0 #181818,
        calc(var(--dx) * 6px) calc(var(--dy) * 6px) 0 #121212,
        calc(var(--dx) * 16px) calc(var(--dy) * 16px) 16px rgba(0, 0, 0, .9);
}

/* ---------- Footer ---------- */

.site-footer {
    border-top: 1px solid var(--rule);
}

.site-footer .page {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 22px;
    padding-top: 44px;
    padding-bottom: 88px;
}

.taboo-line b {
    font-weight: 400;
    color: var(--red);
    margin-right: var(--u);
}

/* ---------- Depth on scroll ---------- */

/* Blocks fade and rise into place as they enter. No blur or scaling, and
   nothing on exit, so text on screen is always sharp. */
@supports (animation-timeline: view()) {
    .after-dark > :not(ul):not(.voices),
    .doing li,
    .index li,
    .voices figure,
    .archive li {
        animation: depth linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 25%;
    }
}

@keyframes depth {
    from {
        opacity: 0;
        translate: 0 22px;
    }
}

/* Fog at the bottom of the window: content rises out of the dark */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 82%, var(--bg) 100%);
}

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
    :root {
        --gutter: 22px;
    }

    .nav {
        gap: var(--u) 22px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    section {
        padding: 55px 0;
    }

    .hero h1,
    .hero .title-decay {
        font-size: var(--t-xl);
    }


    .games h2,
    .copy,
    .lead,
    .voices blockquote {
        font-size: var(--t-m);
    }

    /* On phones the art spans the row, the words sit under it */
    .index a {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 14px;
    }



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

    .archive time {
        grid-column: 1 / -1;
    }


    .scene {
        --bg-size: auto 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --gutter: 11px;
    }

    .nav {
        gap: var(--u);
    }

    /* Logo mark only; the wordmark stays readable to screen readers */
    .brand {
        gap: 0;
        font-size: 0;
    }

    /* Sections matter more than the sound toggle on small phones */
    .nav li:has(.sound) {
        display: none;
    }
}

/* No hover on touch screens: no lamp to aim, so the scenes are lit softly
   in the middle, the hidden text shows a trace, and previews are skipped */
@media (hover: none) {
    .scene {
        --sx: 60%;
        --sy: 45%;
    }

    .secret {
        -webkit-mask-image: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, .3) 100%);
        mask-image: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, .3) 100%);
    }

    .hero .hint,
    .preview {
        display: none;
    }

    /* Phones: the finger carries the lamp */
    .touch-light .hero .hint {
        display: block;
    }
}

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

    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    mark {
        background-size: 100% 100%;
        color: #fff;
    }

}

/* Line breaks: headings balanced, paragraphs without a lonely last word */
h1, h2, blockquote {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

@media (max-width: 760px) {
    .doing {
        grid-template-columns: minmax(0, 1fr);
        gap: 33px;
    }

    .statement {
        margin-bottom: 66px;
        font-size: var(--t-l);
        line-height: 1.33;
    }
}

/* Press archive rows: slide and turn red on hover, like the episode list */
.archive li {
    transition: padding-left .25s ease;
}

.archive li:hover {
    padding-left: 22px;
}

.archive li:hover .label {
    color: var(--red);
}

/* Sound on: three small bars move like a level meter */
.sound[aria-pressed="true"]::after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 6px;
    vertical-align: -1px;
    background:
        linear-gradient(var(--red), var(--red)) 0 100% / 2px 40% no-repeat,
        linear-gradient(var(--red), var(--red)) 50% 100% / 2px 90% no-repeat,
        linear-gradient(var(--red), var(--red)) 100% 100% / 2px 60% no-repeat;
    animation: levels .9s steps(3, end) infinite alternate;
}

@keyframes levels {
    to { background-size: 2px 90%, 2px 30%, 2px 100%; }
}

/* ---------- Per-letter text ---------- */

/* site.js splits display text and labels into letters. The original text
   stays in .sr-only for screen readers; the letters are decoration. Letters
   never move or scale (so they stay crisp); they only change cut, colour or
   glyph. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.word {
    white-space: nowrap;
}

.ch {
    transition: color .35s ease, opacity .5s ease;
}

/* Near the pointer a letter rots into pixels; the closest turn red */
.ch.rot {
    filter: var(--pixel);
    color: var(--soft);
}

.statement em .ch {
    filter: var(--pixel);
}

.ch.rot.hot {
    color: var(--red);
}

/* In the already-decayed phrase it works the other way: the light cleans it */
.statement em .ch.rot {
    filter: none;
    color: var(--ink);
}

/* Arriving text: letters start decayed and faint, and resolve one by one.
   The pixel filter is only on while a block is on screen and resolving:
   a filter on every waiting letter makes phones drop frames. */
.ch.ghost {
    opacity: .12;
}

.arriving .ch.ghost {
    filter: var(--pixel);
}

/* Scrambling pixel labels flash red while they settle */
.ch.scrambling {
    color: var(--red);
}

/* Letters are locked to their measured width (set by site.js), so a letter
   in another cut or a scramble glyph is drawn in exactly the same space and
   lines never re-wrap. The glyph is centred in its slot and may overflow it. */
.ch {
    display: inline-block;
    text-align: center;
    white-space: pre;
}

/* While measuring, every letter shows in its normal cut */
.measuring .ch.rot,
.measuring .ch.ghost,
.measuring .ch.scrambling {
    font-family: inherit !important;
    filter: none !important;
}

/* ---------- Languages ---------- */

/* Language picker in the header */
.lang-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font);
    font-size: var(--t-s);
    letter-spacing: 1px;
    color: var(--soft);
    background: transparent;
    border: 1px solid var(--faint);
    padding: 4px 22px 4px 8px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%);
    background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    transition: border-color .15s ease, color .15s ease;
}

.lang-select:hover,
.lang-select:focus-visible {
    border-color: var(--red);
    color: #fff;
}

.lang-select option {
    background: var(--bg);
    color: var(--ink);
}

/* Asian scripts: Averia Serif Libre and Departure Mono only cover Latin, so their
   text falls through to Noto (loaded by i18n.js for the active language),
   while Latin words inside it keep the house fonts. Japanese labels use the
   pixel font DotGothic16. More line height, no faux italics, and proper
   line-breaking rules. */
:root:lang(ja) {
    --serif: 'Averia Serif Libre', 'Noto Serif JP', serif;
    --font: 'Departure Mono', 'DotGothic16', monospace;
}

:root:lang(ko) {
    --serif: 'Averia Serif Libre', 'Noto Serif KR', serif;
    --font: 'Departure Mono', 'Noto Sans KR', monospace;
}

:root:lang(zh-Hans) {
    --serif: 'Averia Serif Libre', 'Noto Serif SC', serif;
    --font: 'Departure Mono', 'Noto Sans SC', monospace;
}

:root:lang(zh-Hant) {
    --serif: 'Averia Serif Libre', 'Noto Serif TC', serif;
    --font: 'Departure Mono', 'Noto Sans TC', monospace;
}

:root:is(:lang(ja), :lang(ko), :lang(zh)) body {
    line-height: 1.8;
}

:root:is(:lang(ja), :lang(ko), :lang(zh)) :is(h1, h2, .statement, .lead, blockquote, .title-decay) {
    line-height: 1.4;
    letter-spacing: 0;
}

:root:is(:lang(ja), :lang(ko), :lang(zh)) :is(i, em) {
    font-style: normal;
}

:root:is(:lang(ja), :lang(zh)) body {
    line-break: strict;
}

/* Korean breaks between words, never inside them */
:root:lang(ko) body {
    word-break: keep-all;
}

/* The hero headline is shorter in these scripts; a touch smaller keeps
   its four lines balanced */
:root:is(:lang(ja), :lang(ko), :lang(zh)) .hero h1,
:root:is(:lang(ja), :lang(ko), :lang(zh)) .hero .title-decay {
    font-size: 77px;
}

@media (max-width: 760px) {
    :root:is(:lang(ja), :lang(ko), :lang(zh)) .hero h1,
    :root:is(:lang(ja), :lang(ko), :lang(zh)) .hero .title-decay {
        font-size: var(--t-l);
    }
}

@media (max-width: 480px) {
    .lang-select {
        max-width: 132px;
    }
}

/* ---------- Watch: live streams and creators' videos ---------- */

.player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--rule);
    overflow: hidden;
}

.player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Live: a pulsing red dot and label above the stream */
.live {
    margin-bottom: 88px;
}

.live-badge {
    display: flex;
    align-items: center;
    gap: var(--u);
    margin-bottom: 22px;
    color: var(--red);
}

.live-dot {
    width: 9px;
    height: 9px;
    background: var(--red);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    50% { opacity: .25; }
}

.live-meta {
    margin-top: 22px;
}

.live-others {
    list-style: none;
    margin-top: var(--u);
    color: var(--faint);
}

.live-others li + li {
    margin-top: 6px;
}

/* The reel: a thumbnail (grayscale until hovered) that becomes the player */
.facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(.7);
    transition: filter .4s ease;
}

.facade:hover img,
.facade:focus-visible img {
    filter: none;
}

/* A plain red play triangle in a black square */
.facade-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 66px;
    height: 66px;
    translate: -50% -50%;
    background: rgba(0, 0, 0, .75);
    border: 1px solid var(--red);
    transition: background-color .2s ease;
}

.facade-play::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 21px;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent var(--red);
}

.facade:hover .facade-play,
.facade:focus-visible .facade-play {
    background: var(--red-fill);
}

.facade:hover .facade-play::after,
.facade:focus-visible .facade-play::after {
    border-left-color: #fff;
}

.reel-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 22px;
    margin-top: 22px;
}

.reel-meta {
    display: grid;
    gap: 6px;
}

.reel-title {
    font-size: var(--t-m);
    line-height: 1.33;
}

.reel-controls {
    display: flex;
    flex: none;
    gap: 22px;
    align-items: baseline;
}

.reel-controls button {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--soft);
    transition: color .15s ease;
}

.reel-controls button:hover,
.reel-controls button:focus-visible {
    color: var(--red);
}

.reel-count {
    color: var(--soft);
}

@media (max-width: 760px) {
    .reel-bar {
        flex-direction: column;
    }
}

/* ---------- Consent banner and footer links ---------- */

.consent {
    position: fixed;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 85;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.consent[hidden] {
    display: none;
}

.consent-inner {
    width: min(100%, 660px);
    pointer-events: auto;
    background: #111;
    border: 1px solid var(--faint);
    padding: 22px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .6);
}

.consent-title {
    color: var(--ink);
    margin-bottom: var(--u);
}

.consent-text {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
}

.consent-choices {
    display: grid;
    gap: var(--u);
    margin-top: 22px;
}

.consent-choices[hidden] {
    display: none;
}

.consent-choices label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--u);
    align-items: start;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.45;
    color: var(--soft);
}

.consent-choices b {
    display: block;
    font-weight: 400;
    color: var(--ink);
}

.consent-choices input {
    accent-color: var(--red);
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--u);
    margin-top: 22px;
}

/* Accept and Reject look the same: neither is the "easy" choice */
.consent-actions button {
    font-family: var(--font);
    font-size: var(--t-s);
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid var(--line);
    padding: var(--u) 22px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.consent-actions button[hidden] {
    display: none;
}

.consent-actions button:hover,
.consent-actions button:focus-visible {
    background: var(--red-fill);
    border-color: var(--red-fill);
    color: #fff;
}

.consent-policy {
    margin-left: auto;
}

@media (max-width: 560px) {
    .consent {
        left: 11px;
        right: 11px;
        bottom: 11px;
    }

    .consent-actions button[data-act="accept"],
    .consent-actions button[data-act="reject"] {
        flex: 1;
    }

    .consent-policy {
        margin-left: 0;
    }
}

.link-button {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0% 2px;
    transition: background-size .25s ease, color .15s ease;
}

.link-button:hover,
.link-button:focus-visible {
    background-size: 100% 2px;
    color: #fff;
}

/* Note under the play button when a stream waits for a click */
.facade-note {
    position: absolute;
    left: 50%;
    top: calc(50% + 55px);
    translate: -50% 0;
    color: var(--ink);
    white-space: nowrap;
}

/* ---------- Hero intro, per word ---------- */

/* Easier reading: brighter, a step larger, shorter lines */
.hero .hero-intro {
    max-width: 34ch;
    font-size: 26px;
    line-height: 1.5;
    color: var(--ink);
}

/* Each word rises toward the reader by --k (0–1, set by site.js from the
   pointer's distance): lifted, brightened and extruded away from the light.
   At rest --k is 0 and the word is plain, flat text. */
.hero-intro .w {
    --k: 0;
    display: inline-block;
    color: color-mix(in srgb, #fff calc(var(--k) * 100%), #b8b8b8);
    translate: 0 calc(var(--k) * -4px);
    text-shadow:
        calc(var(--dx) * var(--k) * 1px) calc(var(--dy) * var(--k) * 1px) 0 #2b2b2b,
        calc(var(--dx) * var(--k) * 2px) calc(var(--dy) * var(--k) * 2px) 0 #222,
        calc(var(--dx) * var(--k) * 3px) calc(var(--dy) * var(--k) * 3px) 0 #191919,
        calc(var(--dx) * var(--k) * 10px) calc(var(--dy) * var(--k) * 10px) 12px rgba(0, 0, 0, calc(var(--k) * .9));
    transition: color .35s ease, translate .35s cubic-bezier(.2, .7, .2, 1), text-shadow .35s ease;
}

.hero-intro i .w {
    color: color-mix(in srgb, var(--red) calc(var(--k) * 100%), #b8b8b8);
}

@media (max-width: 760px) {
    .hero .hero-intro {
        font-size: var(--t-m);
    }
}

/* ---------- Touch and keyboard targets ---------- */

/* Every control is at least 24px tall to point at; on phones, 44px */
.nav a,
.sound,
.reel-controls button,
.footer-links a,
.footer-links .link-button,
.voices figcaption a {
    padding-block: 4px;
}

@media (max-width: 760px) {
    /* Two calm rows: the mark and the language on top, the sections below
       across the full width. The header scrolls away rather than taking a
       third of a small screen. */
    .site-header {
        position: relative;
    }

    .site-header .page {
        position: relative;
        flex-wrap: wrap;
        row-gap: 0;
        padding-top: 11px;
        padding-bottom: 0;
    }

    .brand {
        min-height: 44px;
    }

    nav[aria-label="Main"] {
        flex-basis: 100%;
    }

    .nav {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0;
        border-top: 1px solid var(--rule);
    }

    .nav a,
    .sound {
        padding-block: 13px;
    }

    /* The marker sits inside the link's own space, so it never runs into
       the word before */
    .nav a {
        padding-left: 14px;
    }

    .nav a::before {
        right: auto;
        left: 0;
        top: calc(50% - .6em);
    }

    .nav li:has(.lang-select) {
        position: absolute;
        top: 19px;
        right: var(--gutter);
    }

    .reel-controls button,
    .footer-links a,
    .footer-links .link-button {
        padding-block: 13px;
    }
}

/* ---------- Cookie bar on wide screens ---------- */

/* A slim bar along the bottom edge: the text on the left, the choices on
   the right, and the page above it left uncovered */
@media (min-width: 900px) {
    .consent {
        left: 0;
        right: 0;
        bottom: 0;
    }

    .consent-inner {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 44px;
        align-items: center;
        border: 0;
        border-top: 1px solid var(--faint);
        padding: 18px max(22px, calc((100vw - 880px) / 2));
        box-shadow: 0 -22px 44px rgba(0, 0, 0, .6);
    }

    .consent-title {
        grid-column: 1;
    }

    .consent-text {
        grid-column: 1;
        font-size: 15px;
        max-width: 62ch;
    }

    .consent-choices {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .consent-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-wrap: nowrap;
        margin-top: 0;
    }

    .consent-policy {
        margin-left: 11px;
    }
}

.consent-inner {
    max-width: 100%;
}

main:focus {
    outline: none;
}

/* The sound toggle answers like the nav: the red square slides in */
.sound {
    position: relative;
}

.sound::before {
    content: "■";
    position: absolute;
    top: 4px;
    right: calc(100% + 6px);
    color: var(--red);
    opacity: 0;
    translate: 4px 0;
    transition: opacity .2s ease, translate .2s ease;
}

.sound:hover::before,
.sound:focus-visible::before,
.sound[aria-pressed="true"]::before {
    opacity: 1;
    translate: 0 0;
}

@media (max-width: 760px) {
    /* Only the home hero fills the screen; other page heads sit up top */
    .hero:not(#hero) {
        min-height: 0;
        padding-top: 44px;
    }

    /* A compact cookie bar: short text, the choices on one row */
    .consent-inner {
        padding: 16px;
    }

    .consent-text {
        font-size: 15px;
    }

    .consent-actions {
        margin-top: 16px;
        gap: 6px;
    }

    .consent-actions button {
        padding: 11px 14px;
    }
}

/* The headline's padding (room for its 3D extrusion) reaches past the screen
   edge on phones; clip at the window edge so the page never grows sideways */
body {
    overflow-x: clip;
}

section.consent {
    align-items: flex-end;
    padding: 0;
}

@media (min-width: 900px) {
    /* The policy link wraps under the buttons, leaving the text room */
    .consent-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 440px;
    }

    .consent-policy {
        margin-left: 0;
        flex-basis: 100%;
        text-align: right;
    }
}

/* Small text links still give the pointer and the thumb room */
.consent-policy,
.voices figcaption a,
.more,
.contact-links a {
    display: inline-block;
    padding-block: 6px;
}

@media (max-width: 760px) {
    .consent-policy,
    .voices figcaption a,
    .more,
    .contact-links a {
        padding-block: 12px;
    }
}

/* ---------- Between pages: the lamp closes, then opens on the next room ---------- */

@view-transition {
    navigation: auto;
}

.site-header {
    view-transition-name: site-header;
}

::view-transition-old(root) {
    animation: lamp-close .32s cubic-bezier(.5, 0, .75, 0) both;
}

::view-transition-new(root) {
    animation: lamp-open .5s .22s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes lamp-close {
    from {
        clip-path: circle(110% at 50% 45%);
    }

    to {
        clip-path: circle(0 at 50% 45%);
        filter: brightness(.4);
    }
}

@keyframes lamp-open {
    from {
        clip-path: circle(0 at 50% 45%);
        filter: brightness(1.6) sepia(.3);
    }

    to {
        clip-path: circle(110% at 50% 45%);
    }
}

::view-transition-group(site-header) {
    animation-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* ---------- Cookie bar, compact ---------- */

/* One sentence, with the policy linked inline */
.consent-text .consent-policy {
    display: inline;
    margin: 0;
    padding: 0;
    flex-basis: auto;
    text-align: left;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--soft);
    text-underline-offset: 3px;
}

.consent-text .consent-policy:hover,
.consent-text .consent-policy:focus-visible {
    text-decoration-color: var(--red);
}

/* Desktop: a single line along the bottom edge */
@media (min-width: 900px) {
    .consent-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 22px;
        padding: 12px max(22px, calc((100vw - 880px) / 2));
    }

    .consent-title {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    .consent-text {
        grid-column: 2;
        grid-row: 1;
        max-width: none;
    }

    .consent-actions {
        grid-column: 3;
        grid-row: 1;
        max-width: none;
        flex-wrap: nowrap;
    }

    .consent-actions button {
        padding: 8px 16px;
    }

    .consent-choices {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Phones: a short strip, the three choices on one row */
@media (max-width: 899px) {
    .consent-title {
        display: none;
    }

    .consent-inner {
        padding: 12px;
    }

    .consent-text {
        font-size: 14px;
    }

    .consent-actions {
        margin-top: 10px;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .consent-actions button {
        flex: 1;
        padding: 12px 6px;
        letter-spacing: 1px;
    }
}

/* ---------- The mark ---------- */

/* The logo answers like a lamp being lit */
.brand img {
    transition: filter .25s ease, scale .25s cubic-bezier(.2, .7, .2, 1);
}

.brand:hover img,
.brand:focus-visible img {
    scale: 1.12;
    filter: drop-shadow(0 0 8px rgba(238, 42, 47, .75));
}

.brand {
    padding-block: 3px;
}

/* Phones keep the sound toggle: it sits on the top row, left of the
   language picker */
@media (max-width: 760px) {
    .nav li:has(.sound) {
        display: block;
        position: absolute;
        top: 19px;
        right: calc(var(--gutter) + 146px);
    }

    .nav li:has(.sound) .sound {
        padding-block: 4px;
    }

    .lang-select {
        width: 132px;
    }
}

@media (max-width: 760px) {
    /* The game's name leads its section on phones too */
    .games h2 {
        font-size: var(--t-l);
        line-height: 1.2;
    }

    .games > p {
        font-size: 17px;
    }
}

/* The footer is the last room: it sits above the fog at the window's edge,
   so its links are never dimmed */
.site-footer {
    position: relative;
    z-index: 11;
    background: var(--bg);
}

/* The inline policy link still gives a thumb room */
.consent-text .consent-policy {
    padding-block: 5px;
}

/* The pixel face draws © poorly; the serif has a clean one */
.c-mark {
    font-family: var(--serif);
    font-size: 1.2em;
    line-height: 1;
    letter-spacing: 0;
}

.nowrap {
    white-space: nowrap;
}

@media (max-width: 760px) {
    /* Press rows: the language tag rides on the date line, so headlines
       get the full width */
    .archive li {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
    }

    .archive li .lang {
        position: absolute;
        top: 20px;
        right: 0;
    }

    .archive li:hover {
        padding-left: 0;
    }
}

/* ---------- The light, below the hero ---------- */

/* Rows and blocks below the hero are part of the same dark house: a soft
   pool follows the light (the pointer; on phones, the middle of the
   screen as you scroll). --lx/--ly are set by site.js. */
.lamp {
    --lx: -999px;
    --ly: -999px;
    position: relative;
    isolation: isolate;
}

.lamp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle 280px at var(--lx) var(--ly), rgba(255, 228, 196, .075), transparent 70%);
}

/* Episodes: a band of the episode's key art in the dark. A dim copy is
   always there; a lit copy shows only inside the pool of light. */
.ep-row {
    min-height: 196px;
    overflow: hidden;
}

.ep-row::before,
.ep-row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* The scene fills the right of the band and fades into the dark */
    background: var(--art) right center / 64% auto no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 34%, #000 62%);
    mask-image: linear-gradient(to right, transparent 34%, #000 62%);
}

.ep-row::before {
    filter: grayscale(.7) brightness(calc(.6 * var(--exp, 1))) contrast(1.1);
}

.ep-row::after {
    /* Warm, like a lamp held up to the room */
    filter: sepia(.3) saturate(1.2) brightness(calc(1.5 * var(--exp, 1))) contrast(1.05);
    -webkit-mask-image:
        radial-gradient(circle 200px at var(--lx) var(--ly), #000 0, rgba(0, 0, 0, .35) 55%, transparent 100%),
        linear-gradient(to right, transparent 34%, #000 62%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle 200px at var(--lx) var(--ly), #000 0, rgba(0, 0, 0, .35) 55%, transparent 100%),
        linear-gradient(to right, transparent 34%, #000 62%);
    mask-composite: intersect;
}

/* The words stay on the dark side of the band */
.ep-row .ep-text {
    max-width: 58%;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
}

.ep-row .arrow {
    position: relative;
}

@media (max-width: 760px) {
    /* On phones the art fills the band behind the words, darker */
    .ep-row {
        min-height: 240px;
        align-items: end;
    }

    .ep-row::before,
    .ep-row::after {
        background-size: cover;
        -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
        mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
    }

    .ep-row::after {
        -webkit-mask-image:
            radial-gradient(circle 170px at var(--lx) var(--ly), #000 0, rgba(0, 0, 0, .35) 55%, transparent 100%),
            linear-gradient(to bottom, #000 30%, transparent 95%);
        mask-image:
            radial-gradient(circle 170px at var(--lx) var(--ly), #000 0, rgba(0, 0, 0, .35) 55%, transparent 100%),
            linear-gradient(to bottom, #000 30%, transparent 95%);
    }

    .ep-row .ep-text {
        max-width: none;
        padding-top: 96px;
    }
}

/* Page heads other than the home hero sit near the top on every screen */
.hero:not(#hero) {
    min-height: 0;
    padding-top: 88px;
}

@media (max-width: 760px) {
    /* The home headline starts near the top on phones, the house below */
    #hero {
        justify-content: flex-start;
        padding-top: 66px;
    }
}

.footer-links a,
.footer-links .link-button {
    padding-block: 6px;
}