/* Feel the Ohr — TYH Boys, Chanukah
   Black room, eight neon lights. Tall condensed type, slow afterglow motion. */

@font-face {
  font-family: "Big Shoulders";
  src: url("assets/fonts/big-shoulders-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("assets/fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --black: #000;
  --room: #0a0b0a;          /* a wall you can just make out */
  --line: #23261f;
  --dim: #8b9184;           /* text you read second */
  --paper: #eef2e6;         /* text you read first */
  --glow: #c8ff3e;          /* phosphor: the page's one accent */

  /* the eight lights, in letter order */
  --l1: #c8ff3e; --l2: #2ee6ff; --l3: #ff3df2; --l4: #ffb21f;
  --l5: #39ff88; --l6: #ff4d5e; --l7: #7a8bff; --l8: #ffe94d;

  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 4.5vw, 72px);
  --decay: 1400ms;          /* how long anything takes to fade */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--glow); color: #000; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 50;
  background: var(--glow); color: #000; padding: 10px 14px; font: 500 14px var(--mono); text-decoration: none;
}
.skip:focus { top: 12px; }

#light {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 30; mix-blend-mode: screen;
}

/* ---------- top bar ---------- */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.bar-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bar-mark img { width: 34px; height: 34px; }
.bar-nav { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.bar-nav a { text-decoration: none; color: var(--dim); padding: 8px 0; transition: color 200ms; }
.bar-nav a:hover { color: var(--glow); }

/* ---------- hero: real footage fills the whole screen, the type sits low over the dark ground ---------- */
:root { --vpos: 10% 40%; --fade: 62%; }
.hero {
  position: relative; min-height: 100svh; isolation: isolate; background: #000;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left;
  padding: 96px var(--gutter) clamp(40px, 7svh, 92px);
}
.hero-bg { /* the still shows until the footage plays, and if it cannot */
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: #000 url("assets/hero-poster.jpg") var(--vpos) / cover no-repeat;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--vpos); }
.hero-bg::after { /* a little darkness at the top behind the bar, more rising from the bottom behind the type; never a box */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 20%),
    linear-gradient(to top, #000 0, rgba(0, 0, 0, .9) calc(var(--fade) * .36), rgba(0, 0, 0, .55) calc(var(--fade) * .66), transparent var(--fade));
}
/* which part of the frame survives the crop: the word and the boy on landscape, the boy and the end of the word on portrait */
@media (max-aspect-ratio: 3/2) { :root { --vpos: 35% 40%; } }
@media (max-aspect-ratio: 13/10) { :root { --vpos: 55% 40%; } }
@media (max-aspect-ratio: 11/10) { :root { --vpos: 68% 40%; --fade: 70%; } }
@media (max-aspect-ratio: 9/10) { :root { --vpos: 78% 40%; --fade: 78%; } }
.hero-copy { position: relative; display: grid; justify-items: start; gap: clamp(12px, 2.2svh, 26px); }
.hero h1 {
  font: 800 min(11vw, 20svh)/.9 var(--display);
  letter-spacing: -.015em; text-transform: uppercase; color: var(--paper); margin-left: -.03em; --c: var(--l4);
}
.hero h1 .brk { display: none; }
/* one line on wide screens, two on squarer ones, three stacked on portrait; always kept in the lower part, below the handwritten word */
@media (max-aspect-ratio: 31/20) { .hero h1 { font-size: min(14vw, 15svh); } .hero h1 .brk { display: inline; } }
@media (max-aspect-ratio: 11/10) { .hero h1 { font-size: min(28vw, 14svh); } .hero h1 .brk { display: none; } .hero h1 .w { display: block; } }
.hero-line { font: 400 clamp(13px, 1.1vw, 15px)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--l4); }
.hero-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; width: max-content; max-width: 100%; }
@media (max-width: 520px) { .hero-actions { grid-auto-flow: row; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px;
  border: 1px solid var(--paper); border-radius: 0; background: transparent; color: var(--paper);
  font: 400 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms, box-shadow var(--decay) var(--ease);
}
.btn:hover { border-color: var(--glow); color: var(--glow); box-shadow: 0 0 26px rgba(200, 255, 62, .3); transition-duration: 200ms, 200ms, 200ms, 120ms; }
.btn-solid { background: var(--glow); border-color: var(--glow); color: #000; }
.btn-solid:hover { background: #fff; border-color: #fff; color: #000; box-shadow: 0 0 34px rgba(200, 255, 62, .55); }
.btn[disabled] { opacity: .5; cursor: progress; }

/* ======================================================================
   Below the hero: one line of light, drawn by hand, eight loops, hero to footer.
   It leaves from the hero title and ends on the logo. Type sits above the line.
   ====================================================================== */
:root { --pl: var(--gutter); --pr: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.trace { position: relative; }
.wire { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
/* photographed trail: a fixed, viewport-sized canvas above the page background and below the type; the SVG is the fallback */
.trail { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; }
.photo .wire g, .photo #spark { display: none; }
.r { stroke: none; fill: url(#wireGrad); opacity: 0; }
.r5 { fill: #fff; }
/* a long exposure: wide faint halation, tight halo, the colour, a hot white core */
.wire.on .r1 { opacity: .05; }
.wire.on .r2 { opacity: .1; }
.wire.on .r3 { opacity: .3; }
.wire.on .r4 { opacity: 1; }
.wire.on .r5 { opacity: .96; }
#spark { opacity: 0; }
.wire.on #spark { opacity: 1; }
#spark circle { fill: currentColor; }
#spark .s1 { opacity: .16; }
#spark .s2 { opacity: .4; }
#spark .s3 { fill: #fff; }
.wire.end #spark { animation: close 2.4s ease-in-out infinite; }
@keyframes close { 50% { opacity: .35; } }

section { position: relative; }

/* ---------- songs: the loudest thing on the page ---------- */
.listen { padding: clamp(80px, 13vh, 150px) 0 0; }
.song { --c: var(--glow); position: relative; }
/* wire.on sits behind type */
.song h3 {
  position: relative; z-index: 7;
  font: 800 var(--fs, 15vw)/.8 var(--display); text-transform: uppercase; letter-spacing: -.012em;
  white-space: nowrap; color: var(--paper);
}
.song { display: grid; grid-template-columns: minmax(0, 1fr) 40%; column-gap: clamp(150px, 14vw, 200px); align-items: end; padding: 0 calc(var(--gutter) * 1.1); }
.song:nth-child(even) { grid-template-columns: 40% minmax(0, 1fr); margin-top: clamp(130px, 15vh, 170px); }
.song:nth-child(even) .song-vid { order: -1; }
.song { --fs: 8.6vw; }
.song.long { --fs: 7.4vw; }
.song h3 { white-space: normal; line-height: .84; }
.song-text { min-width: 0; }
.song:nth-child(odd) .song-meta { margin: clamp(22px, 4vh, 34px) 0 0; }
.song:nth-child(even) .song-text { text-align: right; }
.song:nth-child(even) .song-meta { margin: clamp(22px, 4vh, 34px) 0 0 auto; justify-items: end; text-align: right; }
.song-vid { min-width: 0; position: relative; z-index: 7; }
.song-vid .vbox { border-color: var(--c); box-shadow: 0 0 6px var(--c), 0 0 26px color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 22%, transparent); }
.song-vid .vbox img { filter: brightness(.85) saturate(.9); }
.vbox.ph { background: color-mix(in srgb, var(--c) 9%, #050505); }
.ph-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; }
.ph-play { width: 0; height: 0; border-left: 34px solid var(--c); border-top: 21px solid transparent; border-bottom: 21px solid transparent; filter: drop-shadow(0 0 8px var(--c)); }
.ph-soon { font: 400 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c); }

/* a song's cover: a pop-up beside the pointer on hover and focus, opened in place under the title on touch */
.song-t { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; text-shadow: inherit; white-space: inherit; cursor: pointer; }
.can-hover .song-t { cursor: default; }
.cover { margin: 0; width: clamp(280px, 24vw, 340px); aspect-ratio: 1; }
.cover-in { width: 100%; height: 100%; position: relative; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 12%, #050505); box-shadow: 0 0 6px var(--c), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 26px color-mix(in srgb, var(--c) 22%, transparent); overflow: hidden; }
.cover-in img { width: 100%; height: 100%; object-fit: cover; }
.cover-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.cover-soon { font: 400 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.cover-name { font: 800 clamp(40px, 4vw, 56px)/.85 var(--display); text-transform: uppercase; color: var(--paper); text-wrap: balance; }
.can-hover .cover { display: none; position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; transform: translate3d(var(--x, 0px), var(--y, 0px), 0); }
.can-hover .cover.pre { display: block; }
.can-hover .cover-in { opacity: 0; transform: scale(.55) rotate(-9deg); transform-origin: 20% 60%; transition: transform 180ms cubic-bezier(.2, 1.6, .3, 1), opacity 120ms ease-out; }
.can-hover .cover.show .cover-in { opacity: 1; transform: scale(1) rotate(-3deg); }
html:not(.can-hover) .cover { display: none; }
html:not(.can-hover) .cover.inline { display: block; position: relative; z-index: 7; width: min(60vw, 340px); margin-top: 22px; }
.song:nth-child(even) .cover.inline { margin-left: 0; }

.song-meta { position: relative; z-index: 7; max-width: 30ch; display: grid; gap: 8px; }
.song-soon { font: 600 18px/1.3 var(--body); color: var(--c); }
.song-sub { color: #c9c9c4; font-size: 18px; }
.song-links { display: flex; flex-wrap: wrap; gap: 10px; }
.song:nth-child(even) .song-links { justify-content: flex-end; }
.song-links a {
  min-height: 50px; display: inline-flex; align-items: center; padding: 0 22px;
  font: 600 15px/1 var(--body); text-decoration: none; letter-spacing: .02em;
  border: 1.5px solid var(--c); color: var(--paper); transition: background 200ms, color 200ms, box-shadow 200ms;
}
.song-links a:hover, .song-links a:focus-visible { background: var(--c); color: #000; box-shadow: 0 0 22px color-mix(in srgb, var(--c) 50%, transparent); }

/* ---------- idea: a quiet sentence ---------- */
.idea { padding: clamp(90px, 15vh, 170px) var(--pr) 0 var(--pl); }
.idea h2 {
  position: relative; z-index: 7; max-width: 13em; text-wrap: balance;
  font: 500 clamp(28px, 3.7vw, 60px)/1.16 var(--body); letter-spacing: -.012em; color: var(--paper);
}
.idea-body { position: relative; z-index: 7; max-width: 34ch; margin-top: 30px; display: grid; gap: 16px; color: #d2d2cd; font-size: clamp(17px, 1.3vw, 20px); }

/* ---------- miracle: headline and intro on the left, one form column on the right ---------- */
.miracle {
  padding: clamp(100px, 16vh, 180px) calc(var(--pr) + 56px) 0 var(--pl);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 600px); column-gap: clamp(60px, 8vw, 115px); grid-template-rows: auto 1fr; align-items: start;
}
.miracle h2 {
  position: relative; z-index: 7; grid-column: 1; grid-row: 1;
  font: 800 clamp(44px, 7.4vw, 130px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.008em;
  color: var(--paper); margin-bottom: 28px;
}
.m-intro { position: relative; z-index: 7; grid-column: 1; grid-row: 2; color: #dcdcd7; font-size: clamp(18px, 1.5vw, 22px); max-width: 24ch; }
.form { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: stretch; gap: 26px; }

.field { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.field label { font: 400 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #d8d8d3; }
.opt { font: 400 14px/1.3 var(--body); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.box textarea { display: block; }
.field input, .field textarea {
  width: 100%; background: #0f0f10; color: #fff;
  border: 1.5px solid #7e7e7c; border-radius: 0; padding: 16px;
  font: 400 19px/1.45 var(--body);
  transition: background 200ms, box-shadow 400ms, border-color 400ms;
}
.field textarea { resize: vertical; min-height: 190px; }
.field input:focus, .field textarea:focus { outline: none; background: #1a1a1c; box-shadow: 0 0 0 1px var(--c, var(--glow)); transition-duration: 160ms; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.field .bad { border-color: #ff4d5e; box-shadow: 0 0 0 1px #ff4d5e; }

/* the eight lights: each its own colour, glowing as the story gets written */
.lights { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 4px; }
.lights i { position: relative; height: 36px; }
.lights i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -7px 0 0 -9px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px var(--c); opacity: .6; transition: opacity 700ms, background 700ms, box-shadow 700ms; }
.lights i.on::before { opacity: 1; background: radial-gradient(circle at 62% 62%, #fff 0 16%, var(--c) 58%); box-shadow: 0 0 10px var(--c), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent); transition-duration: 160ms; animation: flame 1.7s ease-in-out infinite; }
@keyframes flame { 0%, 100% { transform: rotate(45deg) scale(1); } 40% { transform: rotate(42deg) scale(1.05, 1.12); } 70% { transform: rotate(48deg) scale(.96, 1.03); } }
@media (prefers-reduced-motion: reduce) { .lights i.on::before { animation: none; } }
.hint { font: 400 14px/1 var(--body); color: #b9b9b4; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 4px; }
.status { font-size: 16px; color: var(--paper); min-height: 1.5em; flex: 1 1 200px; }
.status.err { color: #ff8a95; }
.status.ok { color: var(--glow); }
.fine { color: #b9b9b4; font-size: 14px; max-width: 54ch; }

/* ---------- wall (hidden until there are approved stories) ---------- */
.wall { padding: clamp(110px, 14vh, 150px) calc(var(--pr) + 220px) 0 var(--pl); }
.wall-title { position: relative; z-index: 7; font: 800 clamp(40px, 5vw, 84px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin-bottom: 44px; }
.wall-grid { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 36px; height: clamp(440px, 64vh, 640px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 11%, #000 89%, transparent); mask-image: linear-gradient(transparent, #000 11%, #000 89%, transparent); }
.roll { min-width: 0; }
.roll-track { animation: roll var(--dur, 40s) linear infinite; will-change: transform; }
.roll-track, .roll-set { display: flex; flex-direction: column; }
@keyframes roll { to { transform: translateY(-50%); } }
/* stop the wall while someone is reading or tabbing through it */
.wall-grid:hover .roll-track, .wall-grid:focus-within .roll-track { animation-play-state: paused; }
/* the empty wall does not roll */
.wall-grid.still { display: block; columns: 3 250px; column-gap: 36px; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* a note: thin neon edge in one of the eight lights, text in the page's type */
.note { position: relative; z-index: 7; break-inside: avoid; margin: 0 0 36px; padding: 20px 22px 22px; border: 1.5px solid var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 10%, transparent); --c: var(--glow); }
.note p { font: 600 clamp(19px, 1.7vw, 26px)/1.28 var(--body); overflow-wrap: anywhere; }
.note footer { margin-top: 14px; font: 600 15px/1.3 var(--body); color: var(--c); }
/* the empty wall: dim outlines at varied heights and one lit note that invites the first story */
.note.ghost { opacity: .32; box-shadow: none; }
.note.invite { display: grid; gap: 18px; justify-items: start; padding: 24px 24px 26px; background: color-mix(in srgb, var(--c) 7%, #000); }
.note.invite p { font-size: clamp(22px, 2vw, 30px); }
#wallMore { margin-top: 10px; }

/* ---------- videos: two frame sizes, alternating sides ---------- */
.more { padding: clamp(140px, 13vh, 150px) var(--pr) 0 var(--pl); }
.more-title { position: relative; z-index: 7; font: 800 clamp(40px, 5vw, 90px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin-bottom: 30px; max-width: 80%; }
.videos { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 96px; }
.video { position: relative; --c: var(--glow); min-width: 0; }
.video:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
.video:nth-child(2) { grid-column: 9 / 13; grid-row: 1; align-self: end; }
.video:nth-child(3) { grid-column: 1 / 5; grid-row: 2; align-self: end; }
.video:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }
.video:nth-child(5) { grid-column: 1 / 7; grid-row: 3; }
.video:nth-child(6) { grid-column: 9 / 13; grid-row: 3; align-self: end; }
.vbox { position: relative; aspect-ratio: 16 / 9; border: 1.5px solid #2f332b; transition: border-color 700ms, box-shadow 700ms; }
.vbox a { position: relative; display: block; width: 100%; height: 100%; background: var(--room); overflow: hidden; }
.vbox img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) saturate(.22); transition: filter 900ms var(--ease); }
.video.lit .vbox { border-color: color-mix(in srgb, var(--c) 78%, #fff); box-shadow: 0 0 5px var(--c), 0 0 22px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.video.lit .vbox img { filter: none; }
.vbox a:hover img, .vbox a:focus-visible img { filter: none; transition-duration: 200ms; }
.vbox a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); }
.vbox a::after { content: ""; position: absolute; right: 18px; bottom: 16px; border-left: 22px solid var(--c); border-top: 13px solid transparent; border-bottom: 13px solid transparent; opacity: .45; transition: opacity 600ms, filter 600ms; }
.video.lit .vbox a::after { opacity: 1; filter: drop-shadow(0 0 7px var(--c)); }
.video h3 { position: static; margin-top: 12px; max-width: 100%; font: 800 clamp(26px, 2.6vw, 44px)/.92 var(--display); text-transform: uppercase; letter-spacing: -.004em; color: var(--paper); }
.video:nth-child(even) h3 { text-align: right; }


/* ---------- footer: the line lands on the logo ---------- */
.foot { position: relative; display: flex; align-items: flex-start; gap: 22px; padding: clamp(190px, 21vh, 230px) var(--pr) 80px var(--pl); }
.foot-logo { flex: none; margin: 6px 0 0 0; width: 56px; height: 56px; display: block; }
.foot-logo img { width: 100%; height: 100%; border-radius: 50%; opacity: .5; filter: grayscale(1) brightness(.85); transition: opacity 700ms, filter 700ms; }
.foot-logo.lit img { opacity: 1; filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 14px color-mix(in srgb, var(--c) 60%, transparent)); }
.foot-text { position: relative; z-index: 7; }
.foot-line { font: 400 18px/1.45 var(--body); color: var(--paper); max-width: 30ch; padding-top: 4px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; font: 600 15px/1 var(--body); }
.foot a { text-decoration: none; padding: 10px 0; color: #b9b9b4; transition: color 200ms; }
.foot a:hover { color: var(--glow); }

/* ======================================================================
   Everything is solid and readable from the start. When the line reaches
   something, that thing takes the line's colour at that point and glows like
   the hero's neon tubes, and stays that way. --c is set per element by script.js.
   ====================================================================== */
.hero h1, .song h3, .miracle h2, .more-title, .wall-title, .video h3 { transition: color 700ms var(--ease), text-shadow 700ms var(--ease); }
.hero h1.lit, .song.lit h3, .miracle h2.lit, .more-title.lit, .wall-title.lit, .video.lit h3 {
  color: color-mix(in srgb, var(--c) 90%, #fff);
  text-shadow: 0 0 .016em var(--c), 0 0 .06em var(--c), 0 0 .18em color-mix(in srgb, var(--c) 55%, transparent);
}
.video.lit h3 { text-shadow: 0 0 .03em var(--c), 0 0 .14em var(--c), 0 0 .4em color-mix(in srgb, var(--c) 55%, transparent); }

.form input, .form textarea, .form .field label { transition: border-color 600ms, box-shadow 600ms, color 600ms, background 200ms; }
.form.lit input, .form.lit textarea { border-color: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.form.lit .field label { color: var(--c); text-shadow: 0 0 8px color-mix(in srgb, var(--c) 50%, transparent); }
.js .song-links a { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.js .song.lit .song-links a { border-color: var(--c); }

/* ---------- 900 to 1100 ---------- */
@media (max-width: 1100px) and (min-width: 900px) {
  .miracle { padding-right: calc(var(--pr) + 30px); grid-template-columns: minmax(0, 1fr) minmax(300px, 480px); column-gap: 110px; }
  .miracle h2 { font-size: 8vw; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 899px) {
  :root { --pl: 48px; --pr: 48px; }
  .listen { padding: 96px var(--pr) 0 var(--pl); }
  .song, .song:nth-child(even) { display: block; padding: 0; }
  .song-vid { margin-top: 34px; }
  .song h3 { white-space: normal; }
  .song { --fs: 26vw; }
  .song.long { --fs: 18vw; }
  .song:nth-child(odd) h3 { margin-left: 0; }
  .song:nth-child(odd) .song-meta { margin: 46px 0 0 0; }
  .song:nth-child(even) .song-text { text-align: left; }
  .song:nth-child(even) { margin-top: 130px; }
  .song:nth-child(even) h3 { margin-right: 0; }
  .song:nth-child(even) .song-meta { margin: 46px 0 0 0; justify-items: start; text-align: left; }
  .song:nth-child(even) .song-links { justify-content: flex-start; }

  .idea { padding: 96px var(--pr) 0 var(--pl); }
  .idea h2 { font-size: 8.2vw; max-width: 82%; }
  .idea-body { max-width: 82%; }

  .miracle { display: block; padding: 96px var(--pr) 0 var(--pl); }
  .miracle h2 { font-size: 15vw; margin-bottom: 20px; }
  .m-intro { max-width: 82%; margin-bottom: 40px; }
  .form { gap: 24px; }
  .field textarea { min-height: 170px; }
  .fine { max-width: 86%; }

  .wall { padding-right: var(--pr); }
  .wall-grid.still { columns: 2 220px; }
  .more { padding: 80px var(--pr) 0 var(--pl); }
  .more-title { font-size: 12vw; max-width: 82%; }
  .videos { display: block; }
  .video { margin-top: 92px; }
  .video:nth-child(n) { grid-column: auto; }
  .video:nth-child(odd) { width: 86%; margin-left: 0; }
  .video:nth-child(even) { width: 62%; margin-left: auto; }
  .video:nth-child(1) { margin-top: 0; }
  .video h3 { font-size: 8vw; }
  .vbox a::after { right: 12px; bottom: 12px; border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }

  .foot { flex-direction: column; gap: 18px; padding: 90px var(--pr) 60px var(--pl); }
  .foot-logo { margin: 0; }
}

/* one column of frames at 70%, alternating: the free 30% beside each frame is where the line and its loops travel */
@media (min-width: 540px) and (max-width: 899px) {
  .video:nth-child(odd), .video:nth-child(even) { width: 70%; }
}
@media (min-width: 768px) and (max-width: 899px) {
  :root { --pl: 80px; --pr: 80px; }
}

@media (min-width: 900px) and (max-width: 1100px) { .wall-grid.still { columns: 2 220px; } .wall { padding-right: calc(var(--pr) + 140px); } }

@media (max-width: 860px) {
  .bar-nav a:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #light { display: none; }
  .wire.end #spark { animation: none; }
  .vbox img { transition: none; }
  .hero h1, .song h3, .miracle h2, .more-title, .video h3, .form input, .form textarea, .form .field label, .vbox, .foot-logo img { transition: none; }
}

.field label, .btn, .opt { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
[hidden] { display: none !important; }


/* ---------- the prize line, and the sharing tick-box ---------- */
.hero-win { margin: clamp(10px, 1.6vh, 18px) 0 clamp(14px, 2vh, 22px); max-width: 30ch; font: 500 clamp(19px, 1.9vw, 28px)/1.25 var(--body); color: #fff; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.m-win { display: block; margin-top: 14px; font-weight: 600; color: var(--glow); }
.form .field label.check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font: 400 16px/1.45 var(--body); letter-spacing: 0; text-transform: none; color: #e9e9e4; text-shadow: none; cursor: pointer; }
.form.lit .field label.check { color: #e9e9e4; text-shadow: none; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; padding: 0; accent-color: var(--glow); cursor: pointer; }
.check input.bad { outline: 2px solid #ff4d5e; outline-offset: 3px; }

@media (max-width: 899px) { .m-intro { margin-bottom: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .roll-track { animation: none; }
  .roll-set[aria-hidden="true"] { display: none; }
  .wall-grid { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

.field-consent + .field-consent { margin-top: -8px; }

/* ---------- song player ---------- */
.player { display: grid; grid-template-columns: 58px minmax(120px, 1fr) auto; align-items: center; gap: 16px; width: min(100%, 420px); }
.song:nth-child(even) .player { margin-left: auto; }
.play { position: relative; width: 58px; height: 58px; padding: 0; border: 2px solid var(--c); border-radius: 50%; background: transparent; color: var(--c); cursor: pointer;
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 25%, transparent); transition: background 160ms, color 160ms; }
.play:hover, .player.on .play { background: var(--c); color: #000; }
.play i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -11px 0 0 -7px; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.player.on .play i { width: 16px; height: 20px; margin: -10px 0 0 -8px; border: 0; border-left: 6px solid currentColor; border-right: 6px solid currentColor; }
.seek { position: relative; height: 26px; cursor: pointer; }
.seek::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: color-mix(in srgb, var(--c) 28%, #111); }
.seek i { position: absolute; left: 0; top: 11px; height: 4px; width: 0; background: var(--c); box-shadow: 0 0 10px var(--c); }
.time { font: 500 15px/1 var(--body); color: #d8d8d3; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 899px) { .song:nth-child(even) .player { margin-left: 0; } }

/* a video playing in place of its thumbnail */
.vbox.playing { position: relative; }
.vbox iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.vbox.playing::after, .vbox.playing::before { display: none; }