/* =====================================================================
   WITCH OF THE EAST // 2027 HOME PAGE
   One stylesheet for the new home page. Bump ?v= in main.html on every edit.

   Layout rule carried over from the old site: the narrow layout applies on
   touch devices at ANY width and on pointer devices below 1100px.
   Nothing here puts filter or transform on <body>, so position:fixed is
   true viewport-fixed (the old site lost that to a body filter).
   ===================================================================== */

:root {
    --ink: #05060a;
    --panel: #0b0d14;
    --panel-2: #11141d;
    --line: rgba(255, 255, 255, 0.12);
    --bone: #f1ede6;
    --muted: #9aa0b2;
    --blood: #ff0040;
    --blood-deep: #c70033;
    --violet: #7a3cff;
    --cyan: #00f0ff;
    --display: 'Big Shoulders Display', 'Rajdhani', 'Arial Narrow', sans-serif;
    --ui: 'Rajdhani', 'Segoe UI', sans-serif;
    --mono: 'Share Tech Mono', 'Courier New', monospace;
    --wrap: 1320px;
    --gut: clamp(18px, 4vw, 56px);
    --cut: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--ui);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.centre { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--blood); color: #000; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- Buttons: chamfered, with a light sweep ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 34px;
    font-family: var(--ui);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
    transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.btn > span { position: relative; z-index: 2; }
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    transform: translateX(-120%);
}
.btn:hover::after, .door:hover .btn::after { transform: translateX(120%); transition: transform 0.6s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--blood); color: #fff; }
.btn-solid:hover { background: #fff; color: #000; }
.btn-line, .btn-ghost { background: var(--cyan); color: var(--cyan); }
.btn-line::before, .btn-ghost::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: 0;
    background: var(--ink);
    clip-path: polygon(0 0, calc(100% - var(--cut) + 0.6px) 0, 100% calc(var(--cut) - 0.6px), 100% 100%, calc(var(--cut) - 0.6px) 100%, 0 calc(100% - var(--cut) + 0.6px));
    transition: background-color 0.25s ease;
}
.btn-line:hover, .door:hover .btn-ghost { color: #000; }
.btn-line:hover::before, .door:hover .btn-ghost::before { background: var(--cyan); }
.btn-ghost::before { background: rgba(5, 6, 10, 0.82); }
.btn-ink { background: #000; color: var(--blood); }
.btn-ink:hover { background: #fff; color: #000; }

/* ---------- Module labels ---------- */
.module-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.module-tag { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--cyan); text-transform: uppercase; }
.module-tag.dim { color: var(--muted); }
.module-tag.ink { color: #000; }
.module-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 240, 255, 0.5), rgba(0, 240, 255, 0)); }
.module-link { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--bone); text-decoration: none; white-space: nowrap; }
.module-link:hover { color: var(--blood); }

/* =====================================================================
   HEADER
   ===================================================================== */
.top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--gut);
    transition: background-color 0.3s ease, padding 0.3s ease, transform 0.35s ease;
}
.top.scrolled { background: rgba(5, 6, 10, 0.9); padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.top.hide { transform: translateY(-110%); }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand-mark { font-family: var(--ui); font-weight: 700; font-size: clamp(19px, 2vw, 27px); letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 18px rgba(255, 0, 64, 0.65); }
.brand-sub { margin-top: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.42em; color: var(--blood); }

.bar {
    display: flex;
    align-items: stretch;
    height: 44px;
    background: rgba(11, 13, 20, 0.86);
    border: 1px solid var(--line);
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
    padding-left: 12px;
}
.bar > a, .more-btn {
    display: flex;
    align-items: center;
    padding: 0 17px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.13em;
    text-decoration: none;
    color: var(--bone);
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
}
.bar > a::after, .more-btn::after {
    content: '';
    position: absolute;
    left: 17px; right: 17px; bottom: 8px;
    height: 2px;
    background: var(--blood);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.bar > a:hover::after, .more-btn:hover::after, .more.open .more-btn::after { transform: scaleX(1); }
.bar > a.bar-cta { background: var(--blood); color: #fff; padding: 0 26px; margin-left: 10px; }
.bar > a.bar-cta::after { display: none; }
.bar > a.bar-cta:hover { background: #fff; color: #000; }
.more { position: relative; display: flex; }
.more-menu {
    position: absolute;
    top: 100%; right: 0;
    min-width: 230px;
    padding: 8px 0;
    background: rgba(11, 13, 20, 0.97);
    border: 1px solid var(--line);
    border-top: 2px solid var(--blood);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.more.open .more-menu, .more:hover .more-menu, .more:focus-within .more-menu { opacity: 1; visibility: visible; transform: none; }
.more-menu a { display: block; padding: 9px 18px; font-weight: 600; font-size: 15px; letter-spacing: 0.12em; text-decoration: none; color: var(--bone); }
.more-menu a:hover { background: var(--blood); color: #fff; }
/* The bar is clipped for its chamfer, which would also clip the dropdown. */
.bar { clip-path: none; position: relative; }
.bar::before {
    content: '';
    position: absolute;
    left: -1px; top: -1px;
    border-style: solid;
    border-width: 16px 16px 0 0;
    border-color: var(--ink) transparent transparent transparent;
}

.burger { display: none; width: 48px; height: 48px; background: rgba(11, 13, 20, 0.86); border: 1px solid var(--line); cursor: pointer; padding: 0; position: relative; z-index: 120; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 23px; background: var(--blood); }
.burger span:nth-child(3) { top: 31px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

.drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(5, 6, 10, 0.98);
    padding: 92px var(--gut) 40px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--cyan); margin-bottom: 14px; }
.drawer nav a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    min-height: 48px;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.35s ease, transform 0.35s ease, color 0.2s ease;
}
.drawer.open nav a { opacity: 1; transform: none; }
.drawer nav a i { font-family: var(--mono); font-style: normal; font-size: 12px; color: var(--blood); letter-spacing: 0.1em; width: 22px; }
.drawer nav a:hover, .drawer nav a.drawer-cta { color: var(--blood); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 104px var(--gut) 128px;
    overflow: hidden;
    isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -1; background: #000; }
#hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
#embers { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
.hero-shade {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 6, 10, 0.94) 0%, rgba(5, 6, 10, 0.7) 30%, rgba(5, 6, 10, 0) 60%),
        linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0) 26%),
        linear-gradient(180deg, rgba(5, 6, 10, 0.75) 0%, rgba(5, 6, 10, 0) 18%);
}
.scan {
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 4px);
    opacity: 0.55;
}
.scan::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(0, 240, 255, 0) 0%, rgba(0, 240, 255, 0.07) 80%, rgba(0, 240, 255, 0.22) 100%);
    animation: sweep 7s linear infinite;
}
@keyframes sweep { from { transform: translateY(-160px); } to { transform: translateY(110vh); } }

/* --- HUD: positioned on her face by wote-2027.js (--fx, --fy, --fs) --- */
.hud {
    position: absolute;
    left: var(--fx, 69%);
    top: var(--fy, 32%);
    width: calc(var(--fs, 1) * 400px);
    height: calc(var(--fs, 1) * 400px);
    transform: translate(-50%, -50%);
    overflow: visible;
    opacity: 0;
    transition: opacity 1.2s ease 0.9s;
}
.loaded .hud { opacity: 0.9; }
.hud .ring { fill: none; stroke: var(--cyan); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hud .ring-dash { stroke-dasharray: 2 14; stroke-width: 2; opacity: 0.8; }
.hud .ring-tick { stroke: var(--blood); stroke-dasharray: 60 240 20 220; stroke-width: 2; }
.hud .ring-thin { opacity: 0.25; }
.hud-arc { fill: none; stroke: var(--bone); stroke-width: 1.5; stroke-dasharray: 220; stroke-dashoffset: 220; vector-effect: non-scaling-stroke; }
.loaded .hud-arc { animation: draw 2.2s ease 1.2s forwards, arc-pulse 5s ease-in-out 3.6s infinite; }
.hud-bracket { fill: none; stroke: var(--bone); stroke-width: 1.5; opacity: 0.7; vector-effect: non-scaling-stroke; animation: bracket 4s ease-in-out infinite; transform-origin: 200px 200px; }
.hud-cross { stroke: var(--cyan); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.7; }
.hud-spin { transform-origin: 200px 200px; animation: spin 38s linear infinite; }
.hud-spin-rev { transform-origin: 200px 200px; animation: spin 24s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes arc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes bracket { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.hud-read {
    position: absolute;
    left: calc(var(--fx, 69%) + var(--fs, 1) * 205px);
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.8s ease 1.8s;
}
.loaded .hud-read { opacity: 1; }
.hud-read::before { content: ''; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 2px; background: var(--blood); }
.hud-read span { color: var(--muted); }
.hud-read b { font-weight: 400; color: var(--cyan); }
.hud-read-a { top: calc(var(--fy, 32%) - var(--fs, 1) * 170px); }
.hud-read-b { top: calc(var(--fy, 32%) + var(--fs, 1) * 110px); }
/* Aeris, 13 November 2026: anything that flashes next to Lady Lazarus is distracting.
   The readout words beside her face and the dot on her monitor now sit steady. Keep them steady. */
.blink { animation: none; }
@keyframes blink { to { visibility: hidden; } }

/* --- Copy --- */
.hero-copy { position: relative; max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--cyan); margin-bottom: 18px; }
.dot { width: 9px; height: 9px; background: var(--blood); border-radius: 50%; box-shadow: 0 0 12px var(--blood); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

.hero h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(64px, min(11.4vw, 17.5vh), 196px);
    line-height: 0.84;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #fff;
}
.hero h1 .line { display: block; overflow: hidden; padding-top: 0.05em; }
.hero h1 .line > span { display: inline-block; }
/* Size goes on the line itself, not the inner span, or the line box keeps the
   full headline height and leaves a hole above "OF THE". */
.hero h1 .line:nth-child(2) { font-size: 0.56em; line-height: 1; padding: 0.08em 0 0.1em; }
.hero h1 .line:nth-child(2) > span {
    color: transparent;
    -webkit-text-stroke: 2px var(--blood);
    letter-spacing: 0.08em;
}
.glitch { animation: glitch 7s steps(1) infinite 3s; }
@keyframes glitch {
    0%, 91%, 100% { text-shadow: none; transform: none; clip-path: none; }
    92% { text-shadow: -5px 0 var(--cyan), 5px 0 var(--blood); transform: translateX(3px) skewX(-4deg); }
    93% { text-shadow: 5px 0 var(--cyan), -5px 0 var(--blood); transform: translateX(-4px); clip-path: inset(12% 0 38% 0); }
    94% { text-shadow: -3px 0 var(--cyan), 3px 0 var(--blood); transform: none; clip-path: inset(55% 0 8% 0); }
    95% { text-shadow: none; clip-path: none; }
    96% { text-shadow: 4px 0 var(--blood); transform: translateX(2px); }
    97% { text-shadow: none; transform: none; }
}
.lede { max-width: 520px; margin-top: 22px; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; color: #d9d5cf; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.streams { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; }
.streams a { font-weight: 700; font-size: 15px; letter-spacing: 0.2em; text-decoration: none; color: var(--muted); padding: 6px 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.streams a:hover { color: #fff; border-color: var(--blood); }

.laurels {
    position: absolute;
    left: var(--gut); right: var(--gut); bottom: 46px;
    display: flex;
    gap: clamp(18px, 3vw, 54px);
}
.laurels li { display: flex; align-items: center; gap: 12px; padding-left: 14px; border-left: 2px solid var(--blood); }
.laurels b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.laurels span { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }

.scroll-cue {
    position: absolute;
    right: var(--gut); bottom: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--muted);
    text-decoration: none;
    min-height: 44px;
}
.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(180deg, var(--blood), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* --- Load choreography (only when JS is running) --- */
.js .hero h1 .line > span { transform: translateY(108%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.js .hero h1 .line:nth-child(2) > span { transition-delay: 0.12s; }
.js .hero h1 .line:nth-child(3) > span { transition-delay: 0.24s; }
.js.loaded .hero h1 .line > span { transform: none; }
.js .eyebrow, .js .lede, .js .cta-row, .js .streams, .js .laurels, .js .scroll-cue { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.js.loaded .eyebrow { opacity: 1; transform: none; transition-delay: 0.1s; }
.js.loaded .lede { opacity: 1; transform: none; transition-delay: 0.55s; }
.js.loaded .cta-row { opacity: 1; transform: none; transition-delay: 0.7s; }
.js.loaded .streams { opacity: 1; transform: none; transition-delay: 0.85s; }
.js.loaded .laurels, .js.loaded .scroll-cue { opacity: 1; transform: none; transition-delay: 1.1s; }

/* --- Scroll reveals --- */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* =====================================================================
   TICKER
   ===================================================================== */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #000; padding: 13px 0; }
.ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 46s linear infinite; }
.ticker span { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.1em; white-space: nowrap; color: var(--bone); }
.ticker span.hot { color: var(--blood); }
.ticker i { font-family: var(--mono); font-style: normal; font-size: 13px; color: var(--cyan); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   LATEST
   ===================================================================== */
.latest { padding: clamp(56px, 8vw, 110px) 0 clamp(70px, 9vw, 130px); position: relative; }
.latest::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 50% at 12% 20%, rgba(255, 0, 64, 0.1), transparent 70%),
        radial-gradient(50% 50% at 95% 80%, rgba(122, 60, 255, 0.1), transparent 70%);
    pointer-events: none;
}
.latest .wrap { position: relative; }
.latest-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }

.feature { border: 2px solid var(--cyan); background: var(--panel); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); box-shadow: 0 0 40px rgba(0, 240, 255, 0.12); }
.feature-art { position: relative; overflow: hidden; background: #000; }
.feature-art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.feature:hover .feature-art img { transform: scale(1.05); }
.feature-body { padding: clamp(18px, 2.2vw, 32px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--blood); margin-bottom: 8px; }
.feature h2 { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 4.3vw, 68px); line-height: 0.92; letter-spacing: 0.01em; color: var(--cyan); }
.feature-line { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); margin: 12px 0 16px; }
.teaser { width: 100%; border: 1px solid rgba(0, 240, 255, 0.35); background: rgba(5, 6, 10, 0.8); padding: 12px 14px; margin-bottom: 20px; }
.teaser-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--cyan); margin-bottom: 8px; }
#tml-eq { width: 100%; height: 56px; margin-bottom: 10px; }
.teaser-row { display: flex; align-items: center; gap: 12px; }
#tml-teaser-btn { width: 44px; height: 44px; flex-shrink: 0; background: transparent; border: 2px solid var(--blood); color: var(--blood); font-family: var(--mono); font-size: 15px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
#tml-teaser-btn:hover { background: var(--blood); color: #fff; }
.teaser-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.12); }
#tml-teaser-progress { width: 0; height: 100%; background: var(--blood); box-shadow: 0 0 8px rgba(255, 0, 64, 0.7); }
#tml-teaser-time { font-family: var(--mono); font-size: 12px; color: var(--cyan); }
.tml-presave-btn { animation: tml-pulse 2.2s ease-in-out infinite; }
@keyframes tml-pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 0, 64, 0.4)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 0, 64, 0.95)); } }

.corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--bone); pointer-events: none; }
.corner.tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.corner.tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.corner.bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.corner.br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }

.news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.news-card { display: block; text-decoration: none; position: relative; }
.news-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); }
.news-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(0.85); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease; }
.news-img.wide img { object-position: center; }
.news-img::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--blood); opacity: 0; transition: opacity 0.25s ease; }
.news-card:hover .news-img img { transform: scale(1.07); filter: saturate(1.1); }
.news-card:hover .news-img::after { opacity: 1; }
.news-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin: 10px 0 6px; }
.news-meta span:last-child { color: var(--blood); }
.news-card h3 { font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: 0.05em; }
.news-card p { font-size: 15px; line-height: 1.4; color: var(--muted); margin-top: 5px; }
.news-card h3::after { content: ''; display: block; width: 28px; height: 2px; background: var(--bone); margin-top: 10px; transition: width 0.3s ease, background-color 0.3s ease; }
.news-card:hover h3::after { width: 72px; background: var(--blood); }
.latest .centre { margin-top: clamp(36px, 5vw, 64px); }

/* =====================================================================
   BLOOD SLABS + NOTCHED EDGES
   ===================================================================== */
.world, .signup { position: relative; background: var(--blood); color: #000; }
.notch { position: absolute; left: 0; right: 0; height: 26px; background: var(--blood); pointer-events: none; }
.notch-top {
    top: -25px;
    clip-path: polygon(0 100%, 0 46%, 3% 46%, 3% 70%, 9% 70%, 9% 30%, 9.6% 30%, 9.6% 70%, 14% 70%, 15% 100%, 21% 100%, 21% 62%, 21.5% 62%, 22.3% 20%, 23.1% 62%, 34% 62%, 34% 100%, 47% 100%, 47% 58%, 48.2% 58%, 50% 0, 51.8% 58%, 53% 58%, 53% 100%, 68% 100%, 68% 66%, 74% 66%, 74% 38%, 74.5% 38%, 74.5% 12%, 75.5% 12%, 75.5% 38%, 76.3% 38%, 76.3% 66%, 88% 66%, 89% 100%, 94% 100%, 94% 50%, 100% 50%, 100% 100%);
}
.notch-bottom {
    bottom: -25px;
    clip-path: polygon(0 0, 100% 0, 100% 55%, 93% 55%, 93% 0, 86% 0, 85% 40%, 71% 40%, 71% 78%, 70.2% 78%, 70.2% 40%, 58% 40%, 58% 0, 52% 0, 50% 100%, 48% 0, 31% 0, 31% 44%, 24% 44%, 24% 80%, 23.4% 80%, 23.4% 44%, 12% 44%, 11% 0, 6% 0, 6% 60%, 0 60%);
}
.notch-foot { top: -25px; background: var(--ink); clip-path: polygon(0 100%, 0 40%, 8% 40%, 9% 100%, 27% 100%, 27% 55%, 27.6% 55%, 28.6% 10%, 29.6% 55%, 30.2% 55%, 30.2% 100%, 49% 100%, 50% 30%, 51% 100%, 72% 100%, 72% 50%, 79% 50%, 80% 100%, 96% 100%, 96% 45%, 100% 45%, 100% 100%); }
.notch { animation: notch-flick 9s steps(1) infinite; }
@keyframes notch-flick { 0%, 96%, 100% { transform: none; } 97% { transform: translateX(-10px); } 98% { transform: translateX(6px); } }

.world { padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 120px); z-index: 2; }
.slab-title { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6.4vw, 96px); line-height: 0.92; letter-spacing: 0.01em; text-align: center; margin-top: 10px; }
.slab-title.small { font-size: clamp(38px, 5vw, 72px); margin-top: 0; }
.slab-lede { max-width: 720px; margin: 18px auto 0; text-align: center; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.45; }
.world .module-tag { display: block; text-align: center; }
.brackets { display: flex; justify-content: space-between; max-width: 620px; margin: 34px auto 26px; }
.brackets span { width: 22px; height: 22px; border-top: 3px solid #000; }
.brackets span:nth-child(1) { border-left: 3px solid #000; }
.brackets span:nth-child(2) { position: relative; border: 0; border-top: 3px solid #000; }
.brackets span:nth-child(2)::after { content: ''; position: absolute; left: 50%; top: 0; width: 3px; height: 22px; background: #000; transform: translateX(-50%); }
.brackets span:nth-child(3) { border-right: 3px solid #000; }

.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: #000; padding: 6px; }
.door { position: relative; display: block; aspect-ratio: 3 / 5; overflow: hidden; text-decoration: none; color: #fff; background: #000; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; filter: saturate(0.9) brightness(0.92); }
.door img.pos-centre { object-position: 50% 50%; }
.door::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 6, 10, 0) 30%, rgba(5, 6, 10, 0.92) 78%); }
.door::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.door:hover img { transform: scale(1.08); filter: saturate(1.15) brightness(1); }
.door:hover::after { transform: scaleX(1); }
.door-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(14px, 1.6vw, 24px); display: flex; flex-direction: column; align-items: flex-start; }
.door-idx { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--blood); }
.door h3 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3vw, 50px); line-height: 0.95; letter-spacing: 0.02em; margin: 4px 0 6px; }
.door p { font-size: 16px; line-height: 1.35; color: #d9d5cf; margin-bottom: 16px; min-height: 2.7em; }
.door .btn { width: 100%; min-height: 46px; font-size: 16px; padding: 0 12px; }

/* =====================================================================
   CHANNEL
   ===================================================================== */
.channel { position: relative; padding: clamp(90px, 11vw, 160px) 0 clamp(60px, 8vw, 110px); background: radial-gradient(70% 60% at 22% 45%, rgba(122, 60, 255, 0.13), transparent 70%), var(--ink); }
.channel-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.monitor-frame { position: relative; isolation: isolate; aspect-ratio: 1; background: #000; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 0 80px rgba(255, 0, 64, 0.16), 0 0 0 8px rgba(255, 255, 255, 0.02); }
/* The filter is NOT decoration. Aeris saw the whole close-up flicker brighter and darker for a
   split second, about once a second, in her own browser. The video file itself is steady
   (measured frame by frame). The likely cause: a plain <video> gets handed to the graphics
   card as a "hardware overlay", and each time something drawn on top of it changes the browser
   swaps it in and out of that mode, and the two modes show slightly different brightness.
   A filter keeps the video on the normal drawing path all the time, so there is nothing to swap.
   The hero video never flickered because the ember layer over it already has that effect. */
.monitor-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.01); }
.monitor-top, .monitor-bottom { position: absolute; left: 44px; right: 44px; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--bone); }
.monitor-top { top: 20px; }
.monitor-bottom { bottom: 16px; justify-content: space-between; color: var(--cyan); }
#ll-wave { flex: 1; height: 40px; min-width: 0; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--blood); animation: pulse 1.2s ease-in-out infinite; }
.monitor-frame .rec { animation: none; box-shadow: 0 0 10px var(--blood); }

/* --- Mind link: how she "talks". Her lips never move (a moving mouth was tried and
   rejected). While her voice plays, slow rings spread from her brow and the frame
   turns violet: she is speaking inside the listener's head. Slow and soft on purpose,
   nothing here may flash. --- */
.mind { position: absolute; left: 50%; top: 33%; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.channel.speaking .mind { opacity: 1; }
.mind i { position: absolute; left: 0; top: 0; width: min(820px, 150vw); height: min(820px, 150vw); margin: calc(min(820px, 150vw) / -2) 0 0 calc(min(820px, 150vw) / -2); border-radius: 50%; border: 1px solid rgba(190, 150, 255, 0.55); box-shadow: 0 0 26px rgba(122, 60, 255, 0.35), inset 0 0 26px rgba(122, 60, 255, 0.2); transform: scale(0.04); opacity: 0; animation: mind-ring 6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; animation-play-state: paused; }
.mind i:nth-child(2) { animation-delay: -2s; }
.mind i:nth-child(3) { animation-delay: -4s; }
.channel.speaking .mind i { animation-play-state: running; }
@keyframes mind-ring { 0% { transform: scale(0.04); opacity: 0; } 18% { opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }
.mind-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; background: radial-gradient(circle at 50% 33%, rgba(150, 90, 255, 0.2) 0%, rgba(122, 60, 255, 0.06) 26%, transparent 46%), radial-gradient(circle at 50% 40%, transparent 42%, rgba(10, 0, 30, 0.6) 100%); }
.channel.speaking .mind-veil { opacity: 1; }
.monitor-frame { transition: box-shadow 1.4s ease, border-color 1.4s ease; }
.channel.speaking .monitor-frame { border-color: rgba(160, 110, 255, 0.6); box-shadow: 0 0 110px rgba(122, 60, 255, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.02); }
#ll-state { transition: color 0.8s ease; }
.channel.speaking #ll-state { color: #c9a8ff; }
.channel-copy h2 { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 6vw, 96px); line-height: 0.9; margin: 10px 0 18px; }
.channel-copy p { max-width: 560px; color: #cfcbc5; margin-bottom: 14px; }

.terminal { margin-top: 26px; border: 1px solid rgba(255, 0, 64, 0.55); background: rgba(8, 9, 14, 0.92); box-shadow: 0 0 34px rgba(255, 0, 64, 0.12); }
.terminal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--blood); border-bottom: 1px solid rgba(255, 0, 64, 0.35); background: rgba(255, 0, 64, 0.06); }
.terminal-led { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2s ease-in-out infinite; }
.terminal-log { height: 230px; overflow-y: auto; padding: 14px; font-family: var(--mono); font-size: 15px; line-height: 1.55; color: var(--bone); scrollbar-width: thin; scrollbar-color: var(--blood) transparent; }
.ll-message { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 8px; }
.ll-user-message { color: #00aaaa; }
.ll-cursor { display: inline-block; width: 9px; height: 17px; background: var(--blood); animation: blink 1s steps(2, start) infinite; }
.terminal-input { display: flex; border-top: 1px solid rgba(255, 0, 64, 0.35); }
.terminal-input input { flex: 1; min-width: 0; height: 52px; padding: 0 14px; background: transparent; border: 0; color: var(--cyan); font-family: var(--mono); font-size: 16px; }
.terminal-input input::placeholder { color: rgba(0, 240, 255, 0.45); }
.terminal-input input:focus { outline: none; background: rgba(0, 240, 255, 0.05); }
.terminal-input button { width: 96px; height: 52px; background: var(--blood); border: 0; color: #fff; font-weight: 700; letter-spacing: 0.14em; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.terminal-input button:hover { background: #fff; color: #000; }

/* =====================================================================
   STATS
   ===================================================================== */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #000; padding: clamp(34px, 4.5vw, 60px) 0; }
/* The first figure is always the long one (100,000 / 11,000), so it gets the widest column.
   With four equal columns it ran into its own label and the next figure (Aeris, 13 Nov 2026).
   The figure never shrinks; the label beside it is the part that wraps. */
.stats-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
.stat { display: flex; align-items: center; gap: 16px; min-width: 0; }
.stat b { flex: none; }
.stat span { min-width: 0; }
.stat b { font-family: var(--display); font-weight: 900; font-size: clamp(46px, 5.4vw, 86px); line-height: 0.9; color: var(--blood); font-variant-numeric: tabular-nums; }
.stat span { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.14em; color: var(--muted); }

/* =====================================================================
   DISCOGRAPHY RAIL
   ===================================================================== */
.disco { padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 5vw, 70px); }
.rail { overflow: hidden; }
.rail-track { display: flex; gap: 18px; width: max-content; padding: 0 var(--gut); animation: marquee 70s linear infinite; }
.rail:hover .rail-track { animation-play-state: paused; }
.sleeve { position: relative; display: block; width: clamp(170px, 17vw, 250px); flex-shrink: 0; text-decoration: none; }
.sleeve img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); filter: grayscale(1) contrast(1.05); transition: filter 0.4s ease, transform 0.4s ease; }
.sleeve:hover img { filter: none; transform: translateY(-6px); }
.sleeve span { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; letter-spacing: 0.1em; line-height: 1.25; color: var(--muted); transition: color 0.2s; }
.sleeve:hover span { color: #fff; }

/* =====================================================================
   DIRECT
   ===================================================================== */
.direct { padding: clamp(40px, 5vw, 70px) 0 clamp(90px, 11vw, 150px); }
.goods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.good { display: grid; grid-template-columns: 38% 1fr; background: var(--panel); border: 1px solid var(--line); transition: border-color 0.25s ease, transform 0.25s ease; }
.good:hover { border-color: var(--blood); transform: translateY(-4px); }
.good-img { background: #000; overflow: hidden; }
.good-img img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.good-body { padding: 18px; display: flex; flex-direction: column; align-items: flex-start; }
.good h3 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: 0.02em; }
.good p { font-size: 15px; line-height: 1.35; color: var(--muted); margin-top: 8px; }
.good .price { font-family: var(--display); font-weight: 900; font-size: 30px; color: var(--cyan); margin: 10px 0 14px; }
.good .price small { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.good .btn { min-height: 46px; padding: 0 20px; font-size: 16px; margin-top: auto; }
.quiet { font-size: 14px; color: var(--muted); margin-top: 10px; padding: 4px 0; }
.quiet:hover { color: #fff; }

.donate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(26px, 3vw, 44px); padding: 20px 24px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(255, 0, 64, 0.1), transparent 70%); }
.donate-label { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: 0.04em; line-height: 1.1; }
.donate-label small { display: block; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); margin-top: 6px; }
.donate-row { display: flex; gap: 10px; }
.donate-btn { display: flex; align-items: center; justify-content: center; min-width: 68px; height: 48px; padding: 0 14px; border: 2px solid var(--blood); color: var(--blood); font-weight: 700; font-size: 18px; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.donate-btn:hover { background: var(--blood); color: #fff; }

/* =====================================================================
   SIGNUP
   ===================================================================== */
.signup { padding: clamp(60px, 7vw, 100px) 0 clamp(70px, 8vw, 110px); }
.signup-inner { text-align: center; }
.signup-form { display: flex; justify-content: center; align-items: flex-end; gap: 18px; max-width: 760px; margin: 34px auto 0; }
.signup-form input { flex: 1; min-width: 0; height: 54px; background: transparent; border: 0; border-bottom: 3px solid #000; color: #000; font-family: var(--ui); font-weight: 600; font-size: 20px; padding: 0 4px; border-radius: 0; }
.signup-form input::placeholder { color: rgba(0, 0, 0, 0.6); }
.signup-form input:focus { outline: none; background: rgba(0, 0, 0, 0.08); }
#inline-form-message { min-height: 26px; margin-top: 16px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; color: #000; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot { position: relative; background: var(--ink); padding: clamp(50px, 6vw, 80px) 0 40px; text-align: center; z-index: 2; }
.foot-social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; }
.foot-social span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--muted); width: 100%; margin-bottom: 8px; }
.foot-social a { font-weight: 700; font-size: 16px; letter-spacing: 0.16em; text-decoration: none; color: var(--bone); padding: 10px 0; transition: color 0.2s; }
.foot-social a:hover { color: var(--cyan); }
.foot-mark { margin: 40px 0 26px; font-weight: 700; font-size: clamp(24px, 4vw, 46px); letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 24px rgba(255, 0, 64, 0.6); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.foot-legal a { color: var(--cyan); font-weight: 600; font-size: 15px; text-decoration: none; padding: 8px 0; }
.foot-legal a:hover { text-decoration: underline; }
/* Interface sounds switch. Hidden in the page; wote-2027.js shows it only on desktop, where the sounds exist. */
.sfx-toggle { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--muted); background: none; border: 1px solid var(--line); padding: 8px 12px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.sfx-toggle:hover { color: var(--cyan); border-color: var(--cyan); }
.sfx-toggle[aria-pressed="true"] { color: var(--cyan); }
.sfx-toggle[hidden] { display: none; }
.foot-copy { margin-top: 22px; font-size: 13px; color: var(--muted); }

/* =====================================================================
   VIDEO MODAL
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 70px var(--gut) 30px; background: rgba(0, 0, 0, 0.94); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-frame { width: min(100%, 1280px, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border: 2px solid var(--blood); box-shadow: 0 0 60px rgba(255, 0, 64, 0.35); }
.modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal-close { position: absolute; top: 16px; right: var(--gut); min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--line); color: #fff; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; cursor: pointer; }
.modal-close:hover { background: var(--blood); border-color: var(--blood); }

/* =====================================================================
   NARROW LAYOUT: touch at any width, or a pointer device under 1100px
   ===================================================================== */
@media (pointer: coarse), (max-width: 1100px) {
    .bar { display: none; }
    .burger { display: block; }
    .hud-read { display: none; }
    .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .door { aspect-ratio: 4 / 5; }
    .goods { grid-template-columns: 1fr; }
    .good { grid-template-columns: 150px 1fr; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .latest-grid { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
    /* Finger-sized targets */
    .brand { min-height: 44px; justify-content: center; }
    .module-link, .quiet, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
    /* No hover on touch, so the sleeves show in colour and the rail is swiped by hand. */
    .sleeve img { filter: none; }
    .rail { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .rail::-webkit-scrollbar { display: none; }
    .rail-track { animation: none; }
}

@media (max-width: 900px) {
    .channel-grid { grid-template-columns: minmax(0, 1fr); }   /* minmax(0, ...) lets it shrink on the narrowest phones (320px) */
    .monitor { max-width: 560px; width: 100%; margin: 0 auto; }
    .laurels li:nth-child(3) { display: none; }
}

/* Phones and tall narrow windows: portrait video, copy sits low over her dress */
@media (max-width: 760px) {
    body { font-size: 17px; }
    /* The video fills the first screen only and the copy starts under her face
       (which sits about 36% down the portrait cut). The hero may run past the
       fold; the laurels fall below it on solid black. */
    .hero { justify-content: flex-start; padding: 46vh var(--gut) 34px; padding-top: 46svh; min-height: 0; }
    .hero-media { bottom: auto; height: 100vh; height: 100svh; }
    #hero-video { object-position: 50% 20%; }
    .eyebrow { font-size: 11px; letter-spacing: 0.12em; margin-bottom: 10px; }
    .hero-shade {
        background:
            linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0.9) 30%, rgba(5, 6, 10, 0.25) 58%, rgba(5, 6, 10, 0) 72%),
            linear-gradient(180deg, rgba(5, 6, 10, 0.7) 0%, rgba(5, 6, 10, 0) 16%);
    }
    .hero h1 { font-size: clamp(56px, 17vw, 104px); }
    .lede { font-size: 16px; line-height: 1.4; margin-top: 12px; }
    .cta-row { margin-top: 16px; gap: 12px; }
    .cta-row .btn { flex: 1 1 100%; min-height: 48px; }
    .streams { margin-top: 8px; gap: 0 20px; }
    .streams a { display: flex; align-items: center; min-height: 44px; padding: 0; }
    .laurels { position: static; margin-top: 26px; gap: 18px; }
    .laurels b { font-size: 24px; }
    .laurels span { font-size: 10px; }
    .scroll-cue { display: none; }
    .ticker span { font-size: 18px; }
    .feature { grid-template-columns: 1fr; }
    .news { gap: 22px 14px; }
    .news-card h3 { font-size: 16px; }
    .news-card p { font-size: 14px; }
    .module-head { flex-wrap: wrap; gap: 8px 14px; }
    .module-rule { display: none; }
    .doors { gap: 4px; padding: 4px; }
    .door p { display: none; }
    .door h3 { margin-bottom: 12px; }
    .door .btn { font-size: 14px; letter-spacing: 0.08em; }
    .monitor-top, .monitor-bottom { left: 40px; right: 40px; font-size: 11px; }
    .terminal-log { height: 210px; font-size: 16px; }
    .stat { flex-direction: column; align-items: flex-start; gap: 8px; }
    .good { grid-template-columns: 118px 1fr; }
    .good-img img { min-height: 180px; }
    .donate { flex-direction: column; align-items: stretch; text-align: center; }
    .donate-row { justify-content: center; }
    .donate-btn { flex: 1; min-width: 0; }
    .signup-form { flex-direction: column; align-items: stretch; }
    .signup-form input { flex: none; }
    .signup-form .btn { width: 100%; }
}

/* Short laptop screens: keep the whole hero above the fold */
@media (min-width: 761px) and (max-height: 760px) {
    .hero { padding-top: 84px; padding-bottom: 118px; }
    .lede { margin-top: 14px; }
    .cta-row { margin-top: 20px; }
    .streams { margin-top: 16px; }
    .laurels, .scroll-cue { bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .js .reveal, .js .hero h1 .line > span, .js .eyebrow, .js .lede, .js .cta-row, .js .streams, .js .laurels, .js .scroll-cue { opacity: 1; transform: none; }
    .hud, .hud-read { opacity: 0.9; }
    .hud-arc { stroke-dashoffset: 0; }
}

/* =====================================================================
   INNER PAGES: shared page hero (music page first)
   ===================================================================== */
.bar > a.active::after { transform: scaleX(1); }
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: 128px 0 76px; background: #000; }
#page-eq { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.page-hero-shade {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(5, 6, 10, 0.9) 0%, rgba(5, 6, 10, 0.45) 55%, rgba(5, 6, 10, 0.7) 100%),
        linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0) 40%),
        radial-gradient(60% 70% at 78% 40%, rgba(255, 0, 64, 0.16), transparent 70%);
}
.page-hero .scan { z-index: -1; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
.page-hero h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(88px, min(15vw, 26vh), 250px);
    line-height: 0.84;
    letter-spacing: 0.005em;
    color: #fff;
}
.page-hero h1 .line { display: block; overflow: hidden; padding-top: 0.05em; }
.page-hero h1 .line > span { display: inline-block; }
.js .page-hero h1 .line > span { transform: translateY(108%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.js.loaded .page-hero h1 .line > span { transform: none; }
.js .now { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease 0.5s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; }
.js.loaded .now { opacity: 1; transform: none; }

/* Current single card in the hero */
.now { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); border: 2px solid var(--cyan); background: rgba(11, 13, 20, 0.92); box-shadow: 0 0 50px rgba(0, 240, 255, 0.14); }
.now-art { position: relative; overflow: hidden; background: #000; }
.now-art img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.now:hover .now-art img { transform: scale(1.05); }
.now-body { padding: clamp(18px, 2vw, 30px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.now h2 { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 3.8vw, 62px); line-height: 0.92; color: var(--cyan); margin-bottom: 16px; }

/* Discography grid */
.tapes { position: relative; padding: clamp(56px, 7vw, 100px) 0 clamp(80px, 10vw, 140px); }
.tapes::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 90% 10%, rgba(122, 60, 255, 0.1), transparent 70%), radial-gradient(50% 40% at 5% 70%, rgba(255, 0, 64, 0.08), transparent 70%); }
.tapes .wrap { position: relative; }
.tape-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px) clamp(14px, 1.8vw, 26px); }
.tape { display: block; text-decoration: none; }
.tape-head { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); padding: 7px 10px; border: 1px solid var(--line); border-bottom: 0; background: var(--panel); transition: color 0.25s, border-color 0.25s; }
.tape-head span:last-child { color: var(--blood); }
.tape-art { position: relative; overflow: hidden; background: #000; border: 1px solid var(--line); transition: border-color 0.25s; }
.tape-art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.45s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.tape-go { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px; font-weight: 700; font-size: 15px; letter-spacing: 0.14em; color: #fff; background: linear-gradient(0deg, rgba(5, 6, 10, 0.95), rgba(5, 6, 10, 0)); opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.tape h3 { font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: 0.06em; margin-top: 10px; }
.tape h3::after { content: ''; display: block; width: 28px; height: 2px; background: var(--bone); margin-top: 8px; transition: width 0.3s ease, background-color 0.3s ease; }
.tape:hover .tape-art img, .tape:focus-visible .tape-art img { filter: none; transform: scale(1.06); }
.tape:hover .tape-art, .tape:hover .tape-head { border-color: var(--blood); }
.tape:hover .tape-head { color: #fff; }
.tape:hover .tape-go, .tape:focus-visible .tape-go { opacity: 1; transform: none; }
.tape:hover h3::after { width: 72px; background: var(--blood); }

/* Playlists slab */
.playlists .slab-title { max-width: 980px; margin-left: auto; margin-right: auto; }
.playlist-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: clamp(28px, 4vw, 50px); }
.playlist-log { font-family: var(--mono); font-size: 15px; line-height: 1.7; letter-spacing: 0.04em; border-left: 4px solid #000; padding-left: 18px; }
.playlist-log p + p { margin-top: 8px; }
.playlist-log .log-head { font-weight: 700; letter-spacing: 0.14em; margin-bottom: 14px; }
.playlist-carousel { background: #000; padding: 6px; }
.playlist-slide { display: none; }
.playlist-slide.active { display: block; }
.playlist-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--cyan); padding: 8px 8px 10px; }
.playlist-slide iframe { display: block; border: 0; border-radius: 0; }
.playlist-nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--bone); }
.playlist-nav button { width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); color: var(--blood); cursor: pointer; }
.playlist-nav button:hover:not(:disabled) { background: var(--blood); color: #fff; }
.playlist-nav button:disabled { opacity: 0.3; cursor: default; }

/* Lyrics call-out */
.callout { padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 9vw, 120px); }
.callout-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); background: linear-gradient(90deg, rgba(0, 240, 255, 0.07), transparent 70%); }
.callout h2 { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 5vw, 76px); line-height: 0.95; margin: 6px 0 8px; }
.callout p { color: var(--muted); }

@media (pointer: coarse), (max-width: 1100px) {
    .tape-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-hero-grid { grid-template-columns: 1fr; }
    .now { max-width: 720px; }
    .playlist-grid { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
    .tape-art img { filter: none; }
    .tape-go { opacity: 1; transform: none; font-size: 12px; padding: 22px 8px 8px; }
}
@media (max-width: 760px) {
    .page-hero { padding: 104px 0 44px; }
    .page-hero h1 { font-size: clamp(84px, 30vw, 150px); }
    .now { grid-template-columns: 1fr; }
    .tape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
    .tape-head { font-size: 9px; letter-spacing: 0.06em; padding: 6px; }
    .tape h3 { font-size: 15px; }
    .playlist-log { font-size: 13px; }
    .callout-inner { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .js .page-hero h1 .line > span, .js .now { opacity: 1; transform: none; }
}

/* =====================================================================
   GAMES PAGE
   ===================================================================== */
.btn-static { cursor: default; }
.btn-static:hover { transform: none; background: var(--blood); color: #fff; }
.btn-static::after { display: none; }

.shots-sec { position: relative; padding: clamp(56px, 7vw, 100px) 0 clamp(80px, 10vw, 140px); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.shot { position: relative; margin: 0; overflow: hidden; background: #000; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.shot.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* A full-width strip (the Chamber Warden). Its picture is already cut to 21:9. */
.shot.wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.shot:hover img { transform: scale(1.06); }
.shot::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--cyan); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.shot:hover::after { opacity: 1; }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-weight: 700; font-size: 16px; letter-spacing: 0.14em; background: linear-gradient(0deg, rgba(5, 6, 10, 0.92), rgba(5, 6, 10, 0)); }
.shot figcaption i { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--blood); margin-right: 10px; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: #000; padding: 6px; margin-top: clamp(30px, 4vw, 54px); }
.fact { background: var(--panel); color: #fff; padding: clamp(18px, 2.4vw, 34px); }
.fact b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4vw, 60px); line-height: 1; color: var(--cyan); }
.fact span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 760px) {
    .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shot.big { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
    .shot.wide { aspect-ratio: 16 / 9; }
    .shot.span { grid-column: span 2; }
    .shot figcaption { font-size: 12px; padding: 22px 8px 8px; letter-spacing: 0.08em; }
    .shot figcaption i { display: none; }
    .facts { grid-template-columns: 1fr; }
}

/* =====================================================================
   BOOKS PAGE
   ===================================================================== */
#page-glyphs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.55; }
.stack { position: relative; height: clamp(360px, 44vw, 560px); perspective: 1400px; }
.stack img { position: absolute; top: 50%; height: 92%; width: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 0, 64, 0.22); border: 1px solid var(--line); }
.stack-a { left: 46%; transform: translate(-50%, -50%) rotateY(-16deg) rotateZ(2deg); animation: float-a 7s ease-in-out infinite; z-index: 2; }
.stack-b { left: 68%; transform: translate(-50%, -50%) rotateY(-24deg) rotateZ(7deg) scale(0.9); animation: float-b 8s ease-in-out infinite; filter: brightness(0.7); }
@keyframes float-a { 0%, 100% { transform: translate(-50%, -50%) rotateY(-16deg) rotateZ(2deg); } 50% { transform: translate(-50%, -53%) rotateY(-10deg) rotateZ(1deg); } }
@keyframes float-b { 0%, 100% { transform: translate(-50%, -50%) rotateY(-24deg) rotateZ(7deg) scale(0.9); } 50% { transform: translate(-50%, -47%) rotateY(-19deg) rotateZ(8deg) scale(0.9); } }

.book { position: relative; padding: clamp(70px, 9vw, 130px) 0; }
.book::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 18% 45%, rgba(255, 0, 64, 0.1), transparent 70%); }
.book-flip::before { background: radial-gradient(45% 55% at 82% 45%, rgba(122, 60, 255, 0.12), transparent 70%); }
.book-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 96px); align-items: center; }
.book-flip .book-cover { order: 2; }
.book-cover { position: relative; justify-self: center; width: min(100%, 440px); perspective: 1200px; }
.book-cover img { width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 60px rgba(255, 0, 64, 0.2); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.25s ease-out, box-shadow 0.4s ease; will-change: transform; }
.book-cover:hover img { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 80px rgba(0, 240, 255, 0.28); }
.book-cover .corner { width: 34px; height: 34px; }
.book-cover .corner.tl { left: -14px; top: -14px; border-color: var(--blood); }
.book-cover .corner.br { right: -14px; bottom: -14px; border-color: var(--cyan); }
.book-info h2 { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 5.4vw, 88px); line-height: 0.92; margin: 10px 0 12px; }
.book-kind { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--blood); margin-bottom: 18px; }
.book-info blockquote { margin: 0 0 18px; padding-left: 18px; border-left: 3px solid var(--blood); font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; line-height: 1.35; color: #fff; }
.book-info > p { max-width: 620px; color: #cfcbc5; }
.ranks { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 22px; }
.ranks li { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 2px solid var(--cyan); }
.ranks b { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; white-space: nowrap; }
.ranks span { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.book-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 30px; }
.book-price { display: flex; align-items: center; gap: 12px; margin-right: 8px; }
.book-price b { font-family: var(--display); font-weight: 900; font-size: 50px; line-height: 1; color: var(--cyan); }
.book-price span { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.1em; color: var(--muted); }
.book-info > p.book-alt { margin-top: 14px; font-size: 15px; color: var(--muted); }
.book-sample { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(0, 240, 255, 0.4); }
.book-sample:hover { color: #fff; border-color: var(--blood); }

.quote-slab { padding: clamp(60px, 8vw, 110px) 0; text-align: center; z-index: 2; }
.big-quote { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 7vw, 112px); line-height: 0.95; max-width: 1100px; margin: 14px auto 0; }

@media (pointer: coarse), (max-width: 1100px) {
    .stack { display: none; }
}
@media (max-width: 900px) {
    .book-grid { grid-template-columns: 1fr; }
    .book-flip .book-cover { order: 0; }
    .book-cover { width: min(78%, 340px); }
}
@media (max-width: 760px) {
    .book-buy .btn { flex: 1 1 100%; }
    .book-price { width: 100%; }
}

/* =====================================================================
   FILMS PAGE
   ===================================================================== */
.film-hero { min-height: min(86vh, 820px); display: flex; align-items: center; }
.film-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.film-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; filter: saturate(0.8) contrast(1.05); animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
.film-hero .page-hero-shade {
    background:
        linear-gradient(90deg, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.78) 38%, rgba(5, 6, 10, 0.1) 75%),
        linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0) 35%),
        linear-gradient(180deg, rgba(5, 6, 10, 0.8) 0%, rgba(5, 6, 10, 0) 22%);
}
.film-hero .wrap { width: 100%; }
/* FILMS page hero (Aeris, 13 November 2026: "my face looks awkward"). The still used to fill
   the whole hero, blown up so far that the title sat across her face and her chin was cut off.
   Now the picture is a panel on the right, sized by the hero's HEIGHT, so her whole face shows
   beside the title, and it has the site's black-and-white treatment under the screen lines. */
.films-hero .film-bg { inset: 0 0 0 auto; width: 62%; }
.films-hero .film-bg img { object-position: 50% 30%; filter: grayscale(1) contrast(1.08) brightness(0.92); animation: film-drift 30s ease-in-out infinite alternate; }
@keyframes film-drift { from { transform: scale(1.02); } to { transform: scale(1.07); } }
.films-hero .page-hero-shade {
    background:
        radial-gradient(60% 80% at 72% 50%, rgba(255, 0, 64, 0.1), transparent 70%),
        linear-gradient(90deg, var(--ink) 0%, var(--ink) 38%, rgba(5, 6, 10, 0.6) 56%, rgba(5, 6, 10, 0) 78%),
        linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0) 30%),
        linear-gradient(180deg, rgba(5, 6, 10, 0.75) 0%, rgba(5, 6, 10, 0) 20%);
}
.finder { position: absolute; inset: 96px var(--gut) 34px; pointer-events: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--bone); opacity: 0; transition: opacity 1s ease 0.8s; }
.loaded .finder { opacity: 1; }
.finder .corner { width: 30px; height: 30px; }
.finder .corner.tl { left: 0; top: 0; } .finder .corner.tr { right: 0; top: 0; }
.finder .corner.bl { left: 0; bottom: 0; } .finder .corner.br { right: 0; bottom: 0; }
.finder-top, .finder-bottom { position: absolute; right: 46px; display: flex; align-items: center; gap: 10px; }
.finder-top { top: 12px; color: var(--blood); }
.finder-bottom { bottom: 12px; color: var(--cyan); font-size: 16px; }
.finder i { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 8px; }
.film .book-cover { display: block; }
.film-status { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--cyan) !important; margin-top: 22px; }
.stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); counter-reset: still; }
/* Film stills get the same treatment as the gallery feeds: black and white under screen lines
   with a small label, full colour when the pointer is on them (always colour on touch screens). */
.stills .shot { counter-increment: still; }
.stills .shot img { filter: grayscale(1) contrast(1.05); transition: filter 0.45s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.stills .shot::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 4px); opacity: 0.6; transition: opacity 0.3s; }
.stills .shot picture::after { content: 'STILL_0' counter(still); position: absolute; left: 12px; top: 10px; z-index: 2; padding-left: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--bone); background: radial-gradient(circle at 4px 50%, var(--blood) 0 4px, transparent 5px); text-shadow: 0 0 6px #000; }
.stills .shot:hover img { filter: none; }
.stills .shot:hover::before { opacity: 0; }
@media (pointer: coarse) { .stills .shot img { filter: none; } .stills .shot::before { opacity: 0.25; } }
@media (max-width: 760px) {
    .film-hero { min-height: 0; }
    .film-bg img { object-position: 62% 30%; }
    .films-hero .film-bg { inset: 0 0 auto 0; width: auto; height: 58%; }       /* phones: the still fills the top, copy sits below it */
    .films-hero .film-bg img { object-position: 50% 22%; }
    .film-hero .page-hero-shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0.82) 55%, rgba(5, 6, 10, 0.45) 100%); }
    .finder { inset: 84px 12px 14px; font-size: 11px; }
    .finder-bottom { font-size: 13px; }
    .finder i { display: none; }
    .stills { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .finder { opacity: 1; } }

/* Films hero on phones: tall enough to see the still, copy at the bottom,
   timecode moved to the top so it cannot sit on the buttons. */
@media (max-width: 760px) {
    .film-hero { min-height: 82vh; min-height: 82svh; align-items: flex-end; padding-bottom: 34px; }
    .film-hero .page-hero-shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0.88) 34%, rgba(5, 6, 10, 0.1) 62%), linear-gradient(180deg, rgba(5, 6, 10, 0.75) 0%, rgba(5, 6, 10, 0) 20%); }
    .finder { bottom: auto; height: 46vh; }
    .finder-bottom { bottom: auto; top: 12px; right: auto; left: 44px; }
    .finder .corner.bl, .finder .corner.br { display: none; }
}

/* =====================================================================
   SHOWS PAGE
   ===================================================================== */
.shows-hero .film-bg img { object-position: 50% 35%; filter: grayscale(1) contrast(1.1) brightness(0.8); }
.radar { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.radar-dish { position: relative; width: clamp(220px, 24vw, 340px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0, 240, 255, 0.5); background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0, rgba(5, 6, 10, 0.55) 70%), repeating-radial-gradient(circle, transparent 0 18%, rgba(0, 240, 255, 0.22) 18% 18.6%); overflow: hidden; box-shadow: 0 0 60px rgba(0, 240, 255, 0.15); }
.radar-dish::before, .radar-dish::after { content: ''; position: absolute; background: rgba(0, 240, 255, 0.25); }
.radar-dish::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar-dish::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 0, 64, 0) 0deg, rgba(255, 0, 64, 0) 290deg, rgba(255, 0, 64, 0.55) 360deg); animation: spin 4s linear infinite; }
.radar-ping { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 12px var(--blood); animation: ping 4s ease-out infinite; opacity: 0; }
.radar-ping.p1 { left: 62%; top: 30%; animation-delay: 0.6s; }
.radar-ping.p2 { left: 28%; top: 58%; animation-delay: 2.3s; }
.radar-ping.p3 { left: 70%; top: 70%; animation-delay: 3.2s; }
@keyframes ping { 0% { opacity: 0; transform: scale(0.4); } 8% { opacity: 1; transform: scale(1.3); } 45%, 100% { opacity: 0; transform: scale(1); } }
.radar-read { display: flex; gap: 14px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; }
.radar-read span { color: var(--muted); }
.radar-read b { font-weight: 400; color: var(--cyan); }

.gigs { position: relative; padding: clamp(56px, 7vw, 96px) 0 0; }
.gigs-past { padding-bottom: clamp(80px, 10vw, 140px); }
.gig { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 44px); padding: clamp(18px, 2.4vw, 32px); border: 1px solid var(--line); border-left: 4px solid var(--blood); background: var(--panel); margin-bottom: 14px; transition: border-color 0.25s, transform 0.25s; }
.gig:hover { border-color: var(--blood); transform: translateX(6px); }
.gig-date { text-align: center; min-width: 96px; }
.gig-date b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(56px, 6vw, 92px); line-height: 0.85; color: #fff; }
.gig-date span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--blood); }
.gig-status { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--cyan); }
.gig h2 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.6vw, 58px); line-height: 0.95; margin: 4px 0 6px; }
.gig-where { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--muted); }
.gig.past { border-left-color: var(--line); opacity: 0.72; }
.gig.past .gig-date b { color: var(--muted); }
.gig.past .gig-status { color: var(--muted); }
.show-countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 14px; font-family: var(--mono); letter-spacing: 0.12em; }
.countdown-label { font-size: 12px; color: var(--cyan); }
.countdown-digits { font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; }
.countdown-units { font-size: 10px; color: var(--muted); }
.show-countdown.critical .countdown-digits { color: var(--blood); text-shadow: 0 0 14px rgba(255, 0, 64, 0.7); }
.show-countdown.live .countdown-label { color: var(--blood); font-size: 15px; }

.gig-empty { position: relative; overflow: hidden; padding: clamp(34px, 5vw, 70px) clamp(20px, 3vw, 40px); border: 1px dashed rgba(0, 240, 255, 0.45); background: rgba(0, 240, 255, 0.03); text-align: center; }
.gig-empty-head { font-family: var(--mono); font-size: clamp(15px, 1.7vw, 22px); letter-spacing: 0.14em; color: var(--cyan); margin-bottom: 10px; }
.gig-empty p { color: var(--muted); margin-bottom: 22px; }
.gig-scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: gig-scan 3.4s ease-in-out infinite; }
@keyframes gig-scan { 0% { top: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.track { text-align: center; padding: clamp(60px, 8vw, 100px) 0; }
.track-btn { display: flex; justify-content: center; margin-top: 28px; min-height: 44px; align-items: center; }
.track-btn iframe { display: block; max-width: 100%; }

@media (pointer: coarse), (max-width: 1100px) { .radar { display: none; } }
@media (max-width: 760px) {
    .gig { grid-template-columns: auto minmax(0, 1fr); }
    .gig .btn { grid-column: 1 / -1; }
    .gig-date { min-width: 70px; }
    .gig:hover { transform: none; }
}

/* SHOWS is a wide word: keep it inside its half of the hero grid. */
@media (min-width: 761px) { .shows-hero h1 { font-size: clamp(88px, min(12vw, 26vh), 210px); } }

/* =====================================================================
   VIDEOS PAGE
   ===================================================================== */
.more-menu a.active { color: var(--blood); }
.vid-hero { padding-bottom: 56px; }
#page-static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.2; image-rendering: pixelated; }
.vid-log { font-family: var(--mono); font-size: 15px; line-height: 1.7; letter-spacing: 0.06em; color: var(--bone); border-left: 3px solid var(--blood); padding-left: 18px; }
.vid-log .log-head { color: var(--blood); letter-spacing: 0.14em; margin-bottom: 10px; }
.vid-log p + p { margin-top: 6px; }

.theatre { padding: clamp(40px, 5vw, 70px) 0 clamp(90px, 11vw, 150px); }
.theatre-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.now-viewing { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--cyan); margin-bottom: 12px; min-height: 2.6em; }
.screen-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border: 2px solid var(--blood); box-shadow: 0 0 60px rgba(255, 0, 64, 0.25); }
.screen-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen-frame .corner { pointer-events: none; }
.screen-frame .corner.tl { left: -12px; top: -12px; } .screen-frame .corner.tr { right: -12px; top: -12px; }
.screen-frame .corner.bl { left: -12px; bottom: -12px; } .screen-frame .corner.br { right: -12px; bottom: -12px; }
.screen-caption { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); margin-top: 18px; }
.screen-log { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; margin-top: 8px; color: var(--cyan); }
.screen-log a { color: var(--cyan); }

.reel { display: flex; flex-direction: column; gap: 8px; max-height: calc(380px * 2.02); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--blood) transparent; }
.reel-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 6px; text-align: left; text-decoration: none; color: var(--bone); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; font: inherit; transition: border-color 0.2s, background-color 0.2s; }
.reel-item img { width: 132px; height: 74px; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.3s; }
.reel-item:hover, .reel-item.active { border-color: var(--blood); border-left-color: var(--blood); background: var(--panel-2); }
.reel-item:hover img, .reel-item.active img { filter: none; }
.reel-text { display: block; min-width: 0; }
.reel-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--blood); margin-bottom: 4px; }
.reel-item.active .reel-label { color: var(--cyan); }
.reel-title { display: block; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: 0.04em; }

@media (pointer: coarse), (max-width: 1100px) {
    .theatre-grid { grid-template-columns: 1fr; }
    .reel { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; }
    .reel-item img { filter: none; }
}
@media (max-width: 760px) {
    .reel { grid-template-columns: 1fr; }
    .reel-item { grid-template-columns: 120px minmax(0, 1fr); min-height: 80px; }
    .reel-item img { width: 120px; height: 68px; }
    .screen-frame .corner { display: none; }
    .vid-log { font-size: 13px; }
}

/* =====================================================================
   IMAGES PAGE
   ===================================================================== */
.img-hero { padding-bottom: 64px; }
.feed-wall { position: absolute; inset: 0; z-index: -2; overflow: hidden; display: flex; align-items: center; }
.feed-wall-track { display: flex; gap: 10px; width: max-content; animation: marquee 80s linear infinite; }
.feed-wall img { width: clamp(220px, 26vw, 400px); aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(0.75); }
.img-hero .page-hero-shade { background: linear-gradient(90deg, rgba(5, 6, 10, 0.95) 0%, rgba(5, 6, 10, 0.72) 45%, rgba(5, 6, 10, 0.35) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0) 45%), linear-gradient(180deg, rgba(5, 6, 10, 0.85) 0%, rgba(5, 6, 10, 0) 30%); }

.feeds-sec { padding: clamp(40px, 5vw, 70px) 0 clamp(90px, 11vw, 150px); }
.feeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.feed { display: block; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.feed-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); padding: 7px 10px; border: 1px solid var(--line); border-bottom: 0; background: var(--panel); transition: color 0.25s, border-color 0.25s; }
.feed-head span:last-child { color: var(--blood); }
.feed-img { position: relative; display: block; overflow: hidden; background: #000; border: 1px solid var(--line); transition: border-color 0.25s; }
.feed-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.45s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.feed-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 4px); opacity: 0.6; transition: opacity 0.3s; }
.feed-img .rec { position: absolute; left: 12px; top: 12px; z-index: 1; }
.feed:hover .feed-img img, .feed:focus-visible .feed-img img { filter: none; transform: scale(1.05); }
.feed:hover .feed-img::after { opacity: 0; }
.feed:hover .feed-img, .feed:hover .feed-head { border-color: var(--blood); }
.feed:hover .feed-head { color: #fff; }

.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 8px; padding: 64px 12px 24px; background: rgba(0, 0, 0, 0.95); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; }
.lightbox.open { opacity: 1; visibility: visible; }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); width: auto; height: auto; border: 2px solid var(--blood); box-shadow: 0 0 60px rgba(255, 0, 64, 0.3); }
.lb-fig figcaption { margin-top: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--cyan); }
.lb-nav { width: 56px; height: 56px; justify-self: center; background: transparent; border: 1px solid var(--line); color: var(--blood); font-size: 18px; cursor: pointer; }
.lb-nav:hover { background: var(--blood); color: #fff; }
.lb-close { position: absolute; top: 14px; right: 16px; min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--line); color: #fff; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; cursor: pointer; }
.lb-close:hover { background: var(--blood); border-color: var(--blood); }

@media (pointer: coarse) { .feed-img img { filter: none; } .feed-img::after { opacity: 0.25; } }
@media (max-width: 760px) {
    .feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .feed-head { font-size: 9px; letter-spacing: 0.08em; padding: 6px; }
    .lightbox { grid-template-columns: 1fr; padding: 64px 10px 84px; }
    .lb-nav { position: absolute; bottom: 16px; }
    .lb-prev { left: calc(50% - 66px); } .lb-next { left: calc(50% + 10px); }
}

/* =====================================================================
   TRANSMISSIONS PAGE
   ===================================================================== */
#page-scope { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.trx-hero { padding-bottom: 64px; }
.trx-hero h1 { font-size: clamp(52px, min(11.6vw, 24vh), 190px); }
.trx-hero .page-hero-shade { background: linear-gradient(90deg, rgba(5, 6, 10, 0.8) 0%, rgba(5, 6, 10, 0.2) 70%), linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0) 40%); }

.trx { padding: clamp(40px, 5vw, 70px) 0 clamp(90px, 11vw, 150px); min-height: 50vh; }
.feed-status { padding: clamp(30px, 5vw, 70px) 20px; border: 1px dashed rgba(0, 240, 255, 0.45); text-align: center; font-family: var(--mono); font-size: 16px; letter-spacing: 0.12em; color: var(--cyan); }
.feed-status p + p { margin-top: 12px; color: var(--muted); letter-spacing: 0.04em; }
.feed-status a { color: var(--blood); }
.feed-status[hidden], .trx-nav[hidden] { display: none; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.post { display: flex; flex-direction: column; text-decoration: none; color: var(--bone); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--blood); transition: border-color 0.25s, transform 0.25s; }
.post:hover { border-color: var(--blood); transform: translateY(-4px); }
.post-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.post-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.4s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.post:hover .post-img img { filter: none; transform: scale(1.05); }
.post-body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 1.8vw, 26px); }
.post-meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 10px; }
.post-meta span:first-child { color: var(--cyan); }
.post-title { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.02; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 12px; }
.post-excerpt { font-size: 16px; line-height: 1.5; color: #b9b5b0; margin-bottom: 18px; }
.post-go { margin-top: auto; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--blood); }
.post:hover .post-go { color: #fff; }
/* the newest post runs full width */
.post.lead { grid-column: 1 / -1; border-top-color: var(--cyan); }
.post.lead.has-img { flex-direction: row; }
.post.lead.has-img .post-img { flex: 0 0 46%; aspect-ratio: auto; min-height: 320px; }
.post.lead .post-title { font-size: clamp(34px, 4.4vw, 70px); }
.post.lead .post-excerpt { font-size: 18px; max-width: 900px; }
.trx-nav { margin-top: 30px; }

@media (pointer: coarse), (max-width: 1100px) {
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-img img { filter: none; }
}
@media (max-width: 760px) {
    .trx-hero h1 { font-size: clamp(40px, 12.4vw, 90px); }
    .post-grid { grid-template-columns: 1fr; }
    .post.lead.has-img { flex-direction: column; }
    .post.lead.has-img .post-img { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
    .post.lead .post-excerpt { font-size: 16px; }
    .post:hover { transform: none; }
}

.trx-hero .hero-copy { max-width: none; }
.trx-hero .lede { max-width: 560px; }

/* =====================================================================
   ABOUT PAGE
   ===================================================================== */
.about-hero { padding-bottom: 70px; }
.about-hero .page-hero-shade { background: radial-gradient(55% 70% at 78% 45%, rgba(255, 0, 64, 0.18), transparent 70%), radial-gradient(40% 50% at 10% 80%, rgba(122, 60, 255, 0.14), transparent 70%); }
/* The name is sized from the width of its own column (cqw), not the window, because the
   window-based size let HOULIHAN run out of the column and get cut off on wide screens.
   HOULIHAN is about 3.65 times the font size wide, so 25cqw keeps it inside with room to spare.
   The first font-size line is only a fallback for very old browsers. */
.about-hero .hero-copy { container-type: inline-size; }
.about-hero h1 { font-size: clamp(48px, min(7vw, 22vh), 150px); font-size: clamp(48px, min(25cqw, 22vh), 190px); }
.about-hero h1 .line:nth-child(2) > span { color: transparent; -webkit-text-stroke: 2px var(--blood); }
.lede.big { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; color: #fff; max-width: 620px; }
/* The About portrait is the photograph Google shows for the About page (Aeris, 13 Nov 2026).
   It is nearly square, so the frame is nearly square too: a tall frame would cut her hair off. */
.portrait { justify-self: center; width: min(100%, 540px); }
.portrait-frame { position: relative; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 0 80px rgba(255, 0, 64, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.02); }
.portrait-frame { transition: border-color 0.25s; }
.portrait-frame img { width: 100%; height: auto; aspect-ratio: 2000 / 1916; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.45s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.portrait-frame .scan { opacity: 0.6; transition: opacity 0.3s; }
.portrait-frame .scan::after { display: none; }
.portrait-frame:hover { border-color: var(--blood); }
.portrait-frame:hover img { filter: none; transform: scale(1.05); }
.portrait-frame:hover .scan { opacity: 0; }
@media (pointer: coarse) { .portrait-frame img { filter: none; } .portrait-frame .scan { opacity: 0.25; } }
.portrait-frame .monitor-top { left: 44px; right: 20px; font-size: 11px; }

.profile { padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.dossier { position: sticky; top: 96px; border: 1px solid var(--line); border-top: 3px solid var(--cyan); background: var(--panel); padding: clamp(18px, 2vw, 28px); }
.dossier dl { margin: 16px 0 0; }
.dossier dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--blood); margin-top: 14px; }
.dossier dd { margin: 3px 0 0; font-weight: 600; font-size: 17px; line-height: 1.3; }
.bio { max-width: 760px; }
.bio p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: #d4d0ca; margin-bottom: 20px; }
.bio p strong { color: #fff; }
.bio p:first-child { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.35; color: #fff; font-weight: 600; }
.bio .bio-loud { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4.2vw, 64px); line-height: 0.98; color: var(--blood); text-transform: uppercase; margin: 34px 0; }

.published { padding: clamp(60px, 8vw, 100px) 0; z-index: 2; }
.pub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: #000; padding: 6px; margin-top: clamp(26px, 3.4vw, 46px); text-align: left; }
.pub { background: var(--panel); color: #d4d0ca; padding: clamp(20px, 2.6vw, 36px); }
.pub b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 5.4vw, 84px); line-height: 0.9; color: var(--cyan); margin-bottom: 14px; }
.pub em { color: #fff; }
.published .track-btn { margin-top: 30px; }

.booking { padding: clamp(90px, 11vw, 150px) 0 clamp(80px, 10vw, 130px); background: radial-gradient(50% 60% at 85% 40%, rgba(0, 240, 255, 0.07), transparent 70%); }
.booking-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.booking-copy h2 { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 6vw, 96px); line-height: 0.9; margin: 10px 0 18px; }
.booking-copy p { color: #cfcbc5; margin-bottom: 14px; }
.booking-copy a { color: var(--cyan); display: inline-flex; align-items: center; min-height: 44px; }
.booking-form { border: 1px solid rgba(255, 0, 64, 0.55); background: rgba(8, 9, 14, 0.92); padding: clamp(18px, 2.4vw, 34px); box-shadow: 0 0 34px rgba(255, 0, 64, 0.1); }
.booking-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.booking-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.booking-field { margin-bottom: 16px; }
.booking-field label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--blood); margin-bottom: 6px; }
.booking-field input, .booking-field select, .booking-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 240, 255, 0.45); border-radius: 0; color: var(--cyan); font-family: var(--mono); font-size: 16px; }
.booking-field textarea { resize: vertical; line-height: 1.5; }
.booking-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.booking-field select option { background: #0b0d14; color: var(--bone); }
.booking-field input:focus, .booking-field select:focus, .booking-field textarea:focus { outline: none; border-color: var(--cyan); background: rgba(0, 240, 255, 0.06); box-shadow: 0 0 0 1px var(--cyan); }
.booking-message { min-height: 24px; margin-top: 16px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; color: var(--cyan); }
.booking-message.error { color: var(--blood); }

@media (pointer: coarse), (max-width: 1100px) {
    .about-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); align-items: center; }
    .profile-grid { grid-template-columns: 1fr; }
    .dossier { position: static; }
    .booking-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .about-hero .page-hero-grid { grid-template-columns: 1fr; }
    .about-hero h1 { font-size: clamp(48px, 19vw, 120px); font-size: clamp(48px, 25cqw, 150px); }
    .portrait { width: min(88%, 380px); }
    .pub-grid { grid-template-columns: 1fr; }
    .booking-row { grid-template-columns: 1fr; gap: 0; }
    .booking-form .btn { width: 100%; }
}

/* =====================================================================
   SHOP PAGE
   ===================================================================== */
.shop-hero .feed-wall img { aspect-ratio: 4 / 5; }
.catalog { position: relative; padding: clamp(56px, 7vw, 100px) 0 clamp(60px, 8vw, 110px); }
.items { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.item { grid-column: span 2; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); transition: border-color 0.25s ease, transform 0.25s ease; }
/* the two books sit side by side on the last row, as on the old page */
.item:nth-child(4), .item:nth-child(5) { grid-column: span 3; }
.item:hover { border-color: var(--blood); transform: translateY(-4px); }
.item-head { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); padding: 9px 14px; border-bottom: 1px solid var(--line); }
.item-head span:last-child { color: var(--blood); }
.item-img { position: relative; height: clamp(260px, 26vw, 380px); overflow: hidden; background: #000; }
.item-img img { width: 100%; height: 100%; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.item-img.photo img { object-fit: cover; }
.item-img.cover { background: radial-gradient(circle at 50% 40%, #1a1d29, #05060a 75%); padding: 22px; }
.item-img.cover img { object-fit: contain; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.8)); }
.item:hover .item-img img { transform: scale(1.04); }
.item-body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 1.8vw, 26px); }
.item-body h2 { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.3vw, 36px); line-height: 1; letter-spacing: 0.01em; }
.item-price { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 3vw, 44px); line-height: 1; color: var(--cyan); margin: 10px 0 14px; }
.item-price small { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.item-body p { font-size: 16px; line-height: 1.5; color: #b9b5b0; margin-bottom: 12px; }
.item-body p.item-price { color: var(--cyan); margin: 10px 0 14px; font-size: clamp(32px, 3vw, 44px); line-height: 1; }
.item-body p.item-quote { color: #fff; font-weight: 600; border-left: 3px solid var(--blood); padding-left: 12px; }
.item-body p.item-alt { font-size: 14px; color: var(--muted); }
.item-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.item-actions .btn, .guide-form .btn, .guide-success .btn { min-height: 48px; font-size: 16px; padding: 0 24px; }
.guide-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.guide-form[hidden] { display: none; }
.guide-email { flex: 1 1 180px; min-width: 0; height: 48px; padding: 0 12px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 240, 255, 0.45); border-radius: 0; color: var(--cyan); font-family: var(--mono); font-size: 16px; }
.guide-email:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.guide-message { flex: 1 1 100%; min-height: 20px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--blood); }
.guide-success { margin-top: auto; padding-top: 8px; }
.guide-success-title { font-family: var(--mono); letter-spacing: 0.14em; color: var(--cyan) !important; }

.canvas { padding: clamp(50px, 6vw, 90px) 0 clamp(90px, 11vw, 150px); background: radial-gradient(60% 60% at 25% 45%, rgba(255, 255, 255, 0.04), transparent 70%); }
.canvas-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 70px); align-items: center; }
/* true colour, natural shape: nothing here may crop or filter the painting */
.canvas-view > img { display: block; width: 100%; height: auto; filter: none; border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85); background: #000; }
.canvas-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); margin: 12px 0; }
.canvas-thumbs { display: flex; gap: 10px; }
.canvas-thumb { width: 88px; height: 66px; padding: 0; background: #000; border: 2px solid rgba(255, 0, 64, 0.4); cursor: pointer; opacity: 0.65; transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s; }
.canvas-thumb img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.canvas-thumb:hover, .canvas-thumb.active { opacity: 1; border-color: var(--blood); box-shadow: 0 0 10px rgba(255, 0, 64, 0.45); }
.item-headline { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--cyan); }
.canvas-info h2 { font-family: var(--display); font-weight: 900; font-size: clamp(52px, 6.4vw, 104px); line-height: 0.9; margin: 8px 0 12px; }
.canvas-info blockquote { margin: 0 0 18px; padding-left: 18px; border-left: 3px solid var(--blood); font-size: clamp(20px, 1.8vw, 25px); font-weight: 600; line-height: 1.35; color: #fff; }
.canvas-info > p { color: #cfcbc5; margin-bottom: 12px; }
.canvas-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 26px; }

@media (pointer: coarse), (max-width: 1100px) {
    .item, .item:nth-child(4), .item:nth-child(5) { grid-column: span 3; }
    .canvas-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .items { grid-template-columns: 1fr; }
    .item, .item:nth-child(4), .item:nth-child(5) { grid-column: auto; }
    .item-img { height: 300px; }
    .item-actions .btn, .guide-form .btn, .canvas-buy .btn { flex: 1 1 100%; }
    .item:hover { transform: none; }
    .canvas-thumb { width: 76px; height: 57px; }
}

/* =====================================================================
   PROJECT JUPITER PAGE
   ===================================================================== */
.pj-hero { min-height: 0; padding-bottom: 80px; }
.pj-hero .film-bg img { filter: grayscale(1) contrast(1.05) brightness(0.45); object-position: 50% 30%; }
.pj-hero .page-hero-shade { background: linear-gradient(90deg, rgba(5, 6, 10, 0.94) 0%, rgba(5, 6, 10, 0.72) 50%, rgba(5, 6, 10, 0.55) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 10, 0) 40%), linear-gradient(180deg, rgba(5, 6, 10, 0.85) 0%, rgba(5, 6, 10, 0) 24%); }
.pj-hero h1 { font-size: clamp(60px, min(10vw, 20vh), 170px); }
.pj-hero h1 .line:nth-child(2) > span { color: var(--blood); }
.crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--cyan); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: #fff; }
.pj-by { font-family: var(--mono); font-size: 13px; letter-spacing: 0.3em; color: var(--muted); margin: 14px 0 6px; }
.lede.big span { color: var(--blood); }
.pj-poster { justify-self: center; width: min(100%, 400px); }

.pj-facts-sec { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #000; padding: clamp(28px, 3.6vw, 48px) 0; }
.pj-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 30px; }
.pj-facts li { padding-left: 14px; border-left: 2px solid var(--blood); }
.pj-facts span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--blood); }
.pj-facts b { display: block; margin-top: 4px; font-weight: 600; font-size: 18px; line-height: 1.3; }

.pj-titles-sec { padding: clamp(80px, 11vw, 160px) 0; background: #000; }
.pj-titles { margin-top: 28px; max-width: 1100px; }
.pj-titles p { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.2vw, 64px); line-height: 1.08; color: #fff; margin-bottom: 0.5em; }
.pj-titles p.hot { color: var(--blood); font-size: clamp(40px, 6.4vw, 100px); margin-top: 0.4em; }
.js .pj-titles .reveal { transform: translateX(-30px); transition-duration: 1.1s; }
.js .pj-titles .reveal.in { transform: none; }

.pj-text-sec { padding: clamp(70px, 9vw, 120px) 0 0; }
.pj-cols { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 90px); align-items: start; }
.pj-side h2, .pj-two h2 { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 4.6vw, 72px); line-height: 0.95; margin-top: 8px; }
.pj-text { max-width: 780px; }
.pj-text p, .pj-two p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #d4d0ca; margin-bottom: 18px; }
.pj-text blockquote { margin: 30px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(32px, 4vw, 60px); line-height: 1; color: var(--blood); }
.pj-text .cta-row { margin-top: 26px; }

.pj-exp { padding: clamp(60px, 8vw, 100px) 0; margin-top: clamp(80px, 10vw, 130px); z-index: 2; }
.pj-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pj-note { max-width: 820px; margin: 22px auto 0; text-align: center; font-size: 15px; line-height: 1.5; font-weight: 600; }
.pj-note a { color: inherit; }
.pj-note.dark { margin: 10px 0 0; text-align: left; color: var(--muted) !important; font-weight: 500; }
.pj-note.dark a { color: var(--cyan); }
.pj-method { padding-top: clamp(90px, 11vw, 150px); }
.pj-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 80px); }
.pj-two h2 { margin-bottom: 18px; }
.pj-comments { border-left: 3px solid var(--blood); padding-left: 18px; margin: 22px 0 8px; }
.pj-comments li { font-family: var(--mono); font-size: 16px; line-height: 1.5; color: #fff; padding: 6px 0; }

.pj-stills { padding-top: clamp(80px, 10vw, 130px); padding-bottom: 0; }
.pj-quotes-sec { padding: clamp(80px, 10vw, 130px) 0 0; }
.pj-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.pj-quotes li { padding: clamp(20px, 2.4vw, 34px); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--blood); font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; line-height: 1.35; color: #fff; }
.pj-quotes cite { display: block; margin-top: 16px; font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: 0.16em; color: var(--cyan); }

.pj-credits-row { margin-top: clamp(70px, 9vw, 120px); }
.pj-credits li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pj-credits span { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.pj-credits b { font-weight: 600; font-size: 18px; }
.pj-press .callout-inner { align-items: flex-start; }
.pj-press p { max-width: 760px; margin-bottom: 10px; color: #cfcbc5; }
.pj-press-btns { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

@media (pointer: coarse), (max-width: 1100px) {
    .pj-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); align-items: center; }
    .pj-cols { grid-template-columns: 1fr; }
    .pj-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .pj-hero { min-height: 0; align-items: stretch; padding: 96px 0 44px; }
    .pj-hero .page-hero-grid { grid-template-columns: 1fr; }
    .pj-hero h1 { font-size: clamp(52px, 19vw, 110px); }
    .pj-hero .finder { display: none; }
    .pj-poster { width: min(78%, 320px); }
    .pj-facts { grid-template-columns: 1fr 1fr; }
    .pj-two, .pj-quotes { grid-template-columns: 1fr; }
    .pj-credits li { grid-template-columns: 1fr; gap: 4px; }
    .pj-press-btns { width: 100%; }
}

@media (pointer: coarse) { .pj-note a { display: inline-block; padding: 13px 0; } }

/* =====================================================================
   BOOK SAMPLE PAGES
   The sheet is deliberately NOT in the site's style: aged cream paper and a
   typewriter face, so the reading feels like a manuscript on a dark desk.
   ===================================================================== */
.sample-hero { padding-bottom: 60px; }
.sample-hero h1 { font-size: clamp(54px, min(10.5vw, 22vh), 180px); }
.sample-hero .hero-copy { max-width: none; }
.sample-hero .lede { max-width: 620px; }
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 150; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--cyan)); transform: scaleX(0); transform-origin: left; }

.page-stage { padding: clamp(30px, 5vw, 70px) var(--gut) clamp(80px, 10vw, 130px); background: radial-gradient(70% 40% at 50% 0%, rgba(255, 0, 64, 0.08), transparent 70%); }
.type-sheet {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    background-color: #ece2cc;
    background-image:
        radial-gradient(circle at 16% 20%, rgba(130, 96, 42, 0.05) 0%, transparent 42%),
        radial-gradient(circle at 84% 80%, rgba(96, 64, 26, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.018) 0%, transparent 70%),
        linear-gradient(180deg, #eee4ce 0%, #e7ddc6 100%);
    color: #2a221c;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-weight: 400;
    padding: 74px 66px 66px;
    border-radius: 3px;
    line-height: 1.88;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 70px rgba(120, 90, 40, 0.10), 0 42px 95px rgba(0, 0, 0, 0.66), 0 14px 34px rgba(0, 0, 0, 0.45);
}
.type-kicker { text-align: center; font-size: 0.78rem; letter-spacing: 3px; color: rgba(42, 34, 28, 0.6); margin-bottom: 26px; }
.type-title { font-family: 'Special Elite', 'Courier New', monospace; font-size: 2.1rem; font-weight: normal; line-height: 1.25; text-align: center; letter-spacing: 5px; margin: 0 0 4px; color: #241c16; }
.type-sub { text-align: center; letter-spacing: 3px; font-size: 0.95rem; margin: 0 0 4px; }
.type-author { text-align: center; letter-spacing: 3px; font-size: 0.85rem; color: rgba(42, 34, 28, 0.75); margin-top: 8px; }
.type-rule { text-align: center; letter-spacing: 6px; color: rgba(42, 34, 28, 0.45); margin: 26px 0; }
.chapter-head { text-align: center; margin: 0 0 30px; }
.chapter-head .ch-label { display: inline-block; font-size: 0.95rem; letter-spacing: 3px; color: #241c16; border-bottom: 1px solid rgba(42, 34, 28, 0.4); padding: 0 6px 5px; }
.prose-para { margin: 0 0 1.15em; font-size: 1.06rem; line-height: 1.85; color: #2c241d; text-shadow: 0.4px 0 0 rgba(0, 0, 0, 0.12); }
.scene-break { text-align: center; margin: 1.6em 0; color: rgba(42, 34, 28, 0.4); letter-spacing: 7px; font-size: 0.85rem; }
.poem { margin: 0; }
.poem-title { font-family: 'Special Elite', 'Courier New', monospace; font-size: 1.2rem; font-weight: normal; letter-spacing: 2px; margin: 0 0 16px; display: inline-block; border-bottom: 1px solid rgba(42, 34, 28, 0.4); padding: 0 2px 4px; color: #241c16; }
.poem-body { white-space: pre-wrap; font-size: 1.06rem; color: #2c241d; text-shadow: 0.4px 0 0 rgba(0, 0, 0, 0.12); }
.type-cursor { display: inline-block; width: 11px; height: 1.05em; background: #2a221c; vertical-align: text-bottom; margin-left: 3px; animation: blink 1.05s steps(2, start) infinite; }
.type-foot { text-align: center; margin-top: 46px; padding-top: 30px; border-top: 1px dashed rgba(42, 34, 28, 0.35); }
.type-foot .cont { letter-spacing: 3px; font-size: 0.85rem; margin-bottom: 20px; }
.type-foot .star { margin-left: 10px; color: rgba(42, 34, 28, 0.5); }
.page-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: #2a221c; color: #ece2cc; text-decoration: none; letter-spacing: 2px; font-size: 0.95rem; transition: background-color 0.2s; }
.page-buy:hover { background: #b0002c; }
.page-amz { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; color: #2a221c; letter-spacing: 2px; font-size: 0.85rem; }
.type-pageref { text-align: center; margin-top: 34px; color: rgba(42, 34, 28, 0.5); letter-spacing: 3px; font-size: 0.85rem; }
.stage-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 46px; }

@media (max-width: 760px) {
    .sample-hero h1 { font-size: clamp(40px, 14vw, 96px); }
    .page-stage { padding-left: 10px; padding-right: 10px; }
    .type-sheet { padding: 44px 22px 40px; }
    .type-title { font-size: 1.55rem; letter-spacing: 3px; }
    .prose-para, .poem-body { font-size: 1rem; }
}

/* poems: one block per line, wrapped lines hang-indent */
.poem-body { white-space: normal; }
.poem-body .pl { display: block; white-space: pre-wrap; padding-left: 1.6em; text-indent: -1.6em; }
.poem-body .pl.gap { height: 1.5em; }

/* =====================================================================
   LYRICS PAGE
   The terminal is deliberately a GREEN phosphor CRT, unlike the rest of the
   site. Do not recolour it to match.
   ===================================================================== */
.lyr-hero { padding-bottom: 50px; }
.lyr-stage { padding: clamp(20px, 3vw, 40px) var(--gut) clamp(80px, 10vw, 130px); }
/* The lyrics terminal sits in the screen of a rendered laptop (its screen throws a cyan glow on the keys, to match the screen below).
   The picture (assets/images/lyrics-laptop.webp) is made by tools/render_laptop.py (Blender)
   then tools/cut_laptop.py, from the Fab model "Post-apocalyptic Laptop" by Igor Piotrowski.
   It is drawn as a border-image: the four numbers in border-image-slice say where the glass
   is inside the picture, and the border widths are the same numbers as a share of the
   laptop's width (--lw). cut_laptop.py prints all of them; if the render changes, copy them here.
   Because it is a border, the screen can be TALLER than in the picture (phones): only the thin
   side strips of the lid stretch, the top of the lid and the keyboard never do. */
.monitor-unit { max-width: 1400px; margin: 0 auto; container-type: inline-size; overflow-x: hidden; overflow-x: clip; }
.laptop {
    --lw: 100cqw;
    width: var(--lw);
    margin-left: calc((100cqw - var(--lw)) / 2);
    border-style: solid;
    border-color: transparent;
    border-width: calc(var(--lw) * 0.09) calc(var(--lw) * 0.17) calc(var(--lw) * 0.4472);
    border-image: url('assets/images/lyrics-laptop.webp?v=2') 162 306 805 306 stretch;
}
/* The screen itself. Aeris, 13 November 2026: not an all-green terminal. It follows the
   rest of the site instead: near-black glass, bone-white titles, blood-red numbers and
   highlight bar, cyan for labels and controls, one yellow tag for albums. */
.crt-screen { --lr: #ff2a4f; --lc: var(--cyan); --ly: #f8e600; position: relative; overflow: hidden; height: calc(var(--lw) * 0.3972); border-radius: 5px; padding: clamp(10px, 1.4cqw, 20px) clamp(10px, 1.5cqw, 22px); display: flex; flex-direction: column; background: radial-gradient(90% 70% at 0% 0%, rgba(255, 0, 64, 0.16), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(0, 240, 255, 0.07), transparent 60%), linear-gradient(180deg, #0c060a, #050308); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 0, 64, 0.28), 0 0 46px rgba(0, 240, 255, 0.08); color: #f1ece6; font-family: 'Rajdhani', 'Arial Narrow', sans-serif; font-weight: 600; }
.crt-screen::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px); }
.crt-screen::after { content: ''; position: absolute; left: 0; right: 0; top: -120px; height: 110px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.035) 50%, transparent); animation: crt-refresh 9s linear infinite; }
@keyframes crt-refresh { from { transform: translateY(0); } to { transform: translateY(900px); } }
.screen-content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lyric-status { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; padding-bottom: 8px; border-bottom: 1px solid var(--lr); color: var(--lr); }
.lyric-status .clk { color: var(--lc); }
.archive-search { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; }
.search-prompt { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: 0.12em; white-space: nowrap; color: var(--lc); }
#archive-filter { flex: 1; min-width: 0; height: 44px; padding: 0 14px; background: rgba(0, 240, 255, 0.05); border: 1px solid rgba(0, 240, 255, 0.45); border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); color: #fff; font-family: inherit; font-weight: 600; font-size: 17px; letter-spacing: 0.08em; }
#archive-filter::placeholder { color: rgba(0, 240, 255, 0.45); }
#archive-filter:focus { outline: none; border-color: var(--lc); background: rgba(0, 240, 255, 0.1); }
.lyric-prompt { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 10px; }
.lyric-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lr) transparent; padding-right: 6px; }
.archive-release[hidden], .archive-track[hidden], .no-match[hidden] { display: none; }
.release-header, .track-header { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 10px; background: none; border: 0; border-bottom: 1px solid rgba(255, 0, 64, 0.2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; }
.lyric-num { color: var(--lr); width: 30px; flex-shrink: 0; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; }
.lyric-toggle { width: 14px; flex-shrink: 0; color: var(--lc); }
.release-title, .track-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.badge, .lyric-hint { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; color: var(--lc); }
.badge-album { color: var(--ly); }
.track-num { color: var(--lr); flex-shrink: 0; font-family: var(--mono); font-weight: 400; font-size: 13px; }
.track-title { font-size: 16px; font-weight: 600; color: #d9d5cf; }
/* The highlight bar: solid red with black text, on hover and on the open release. */
.release-header:hover, .track-header:hover, .archive-release.open > .release-header, .archive-track.open > .track-header { background: var(--lr); color: #08040a; }
.release-header:hover *, .track-header:hover *, .archive-release.open > .release-header *, .archive-track.open > .track-header * { color: #08040a; }
.release-header:focus-visible, .track-header:focus-visible { outline: 2px solid var(--lc); outline-offset: -2px; }
.release-body, .release-tracks, .track-body { display: none; }
.archive-release.open > .release-body, .archive-release.open > .release-tracks, .archive-track.open > .track-body { display: block; }
.release-tracks { border-left: 2px solid var(--lr); margin-left: 14px; }
.track-header { padding-left: 22px; }
.lyric-body-inner { white-space: pre-wrap; margin: 14px 8px 22px 52px; padding-left: 18px; border-left: 2px solid var(--lc); font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: 0.02em; color: #e4dfd8; overflow-wrap: anywhere; }
.archive-track .lyric-body-inner { margin-left: 44px; }
.no-match { white-space: pre-wrap; padding: 24px 8px; font-family: var(--mono); font-weight: 400; color: var(--ly); }

@media (pointer: coarse), (max-width: 760px) {
    /* no screen-inside-a-screen scrolling on phones: the tube grows and the page scrolls */
    .crt-screen { height: auto; min-height: max(420px, calc(var(--lw) * 0.3972)); }
    .lyric-list { overflow: visible; }
}
@media (max-width: 760px) {
    .lyr-stage { padding-left: 8px; padding-right: 8px; }
    /* On a phone the laptop is drawn wider than the screen and its sides run off the edges,
       so the glass (and the lyrics) fills nearly the whole width. */
    .laptop { --lw: 142cqw; }
    .crt-screen { padding: 14px 10px 14px; }
    .lyric-status span:first-child { font-size: 10px; }
    .archive-search { flex-direction: column; align-items: stretch; gap: 6px; }
    .release-title { font-size: 16px; }
    .track-title { font-size: 15px; }
    .badge { font-size: 9px; }
    .lyric-body-inner { margin: 12px 4px 20px 10px; padding-left: 12px; font-size: 17px; }
    .archive-track .lyric-body-inner { margin-left: 12px; }
    .release-tracks { margin-left: 6px; }
    .track-header { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) { .crt-screen::after { animation: none; } }

@media (max-width: 760px) { #archive-filter { flex: none; width: 100%; } }

/* =====================================================================
   PRIVACY + TERMS: plain, calm and readable. No effects on the text.
   ===================================================================== */
.legal-hero { padding-bottom: 46px; }
.legal-hero .page-hero-shade { background: radial-gradient(50% 80% at 85% 30%, rgba(122, 60, 255, 0.14), transparent 70%); }
.legal-hero h1 { font-size: clamp(54px, min(9vw, 18vh), 150px); }
.legal-hero h1 .line:nth-child(2) > span { color: var(--blood); }
.legal-date { margin-top: 16px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--cyan); }
.legal { padding: clamp(30px, 4vw, 60px) 0 clamp(90px, 11vw, 150px); border-top: 1px solid var(--line); }
.legal-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.legal-toc { position: sticky; top: 90px; padding: 20px; border: 1px solid var(--line); border-top: 3px solid var(--cyan); background: var(--panel); max-height: calc(100vh - 110px); overflow-y: auto; }
.legal-toc ol { list-style: none; margin: 12px 0 0; padding: 0; }
.legal-toc li a { display: block; padding: 7px 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.legal-toc li a:hover { color: #fff; }
.legal-other { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--blood); text-decoration: none; }
.legal-other:hover { color: #fff; }
.legal-text { max-width: 800px; font-size: 18px; line-height: 1.7; color: #d4d0ca; }
.legal-text h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; color: #fff; margin: 46px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.legal-text h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-text h3 { font-weight: 700; font-size: 20px; letter-spacing: 0.04em; color: var(--cyan); margin: 26px 0 8px; }
.legal-text p { margin: 0 0 16px; }
.legal-text ul { list-style: none; margin: 0 0 18px; padding: 0; }
.legal-text li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.legal-text li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 2px; background: var(--blood); }
.legal-text strong { color: #fff; }
.legal-text a { color: var(--cyan); overflow-wrap: anywhere; }
.legal-text a:hover { color: #fff; }
@media (pointer: coarse), (max-width: 1100px) {
    .legal-grid { grid-template-columns: 1fr; }
    .legal-toc { position: static; max-height: none; }
    .legal-toc li a { padding: 12px 0; }
}
@media (max-width: 760px) {
    .legal-text { font-size: 17px; }
    .legal-hero h1 { font-size: clamp(48px, 16vw, 96px); }
}

/* privacy page: analytics switch */
.analytics-control { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; border: 1px solid rgba(0, 240, 255, 0.4); background: rgba(0, 240, 255, 0.05); }
.analytics-control span { font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; color: var(--cyan); }
.analytics-control button { min-height: 44px; padding: 0 18px; background: transparent; border: 2px solid var(--blood); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; cursor: pointer; }
.analytics-control button:hover { background: var(--blood); }
.analytics-control button[hidden] { display: none; }

/* =====================================================================
   FRAGMENT PAGES (earned in chat, never linked or listed)
   ===================================================================== */
.frag-hero { padding-bottom: 60px; }
.frag-hero h1 { font-size: clamp(52px, min(11vw, 22vh), 190px); }
.frag-hero .hero-copy { max-width: none; }
.frag-symbol { font-size: clamp(40px, 5vw, 70px); line-height: 1; color: var(--blood); text-shadow: 0 0 24px rgba(255, 0, 64, 0.7); margin: 6px 0 10px; }
.frag-date { margin-top: 16px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.frag { padding: clamp(40px, 5vw, 70px) 0 clamp(90px, 11vw, 150px); }
.frag-text { max-width: 780px; margin: 0 auto; }
.frag-text p { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.85; color: #d4d0ca; margin: 0 0 20px; }
.frag-text > p:first-child { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; color: #fff; font-weight: 600; }
.frag-text em { color: #fff; }
.frag-text strong { color: #fff; }
.frag-text .fragment-intro { font-family: var(--mono); font-size: 14px; line-height: 1.7; letter-spacing: 0.06em; color: var(--cyan); border-left: 3px solid var(--blood); padding-left: 16px; margin-bottom: 30px; }
.frag-text .fragment-intro p { font-size: inherit; line-height: inherit; color: inherit; font-weight: 400; margin-bottom: 8px; }
.fragment-divider { height: 1px; margin: 44px auto; width: 100%; background: linear-gradient(90deg, transparent, var(--blood), transparent); }
.fragment-signature { text-align: center; margin-top: 44px; padding: 26px 18px; border: 1px solid var(--line); background: var(--panel); font-family: var(--mono); font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; color: var(--cyan); }
.frag-text .call-to-action { margin: 34px 0; padding: 22px; border: 1px solid rgba(255, 0, 64, 0.5); background: rgba(255, 0, 64, 0.06); text-align: center; }
.frag-text .call-to-action a { color: var(--cyan); }

/* not-found page */
.lost { min-height: 70vh; display: flex; align-items: center; }
.lost h1 { font-size: clamp(110px, min(28vw, 40vh), 380px); }
.lost h1 .line > span { color: transparent; -webkit-text-stroke: 3px var(--blood); }