/* Seventh Mile — one design system, three moods */
:root {
  --ink: #08090b;
  --ink-2: #111318;
  --paper: #ece6da;
  --paper-2: #cfc7b8;
  --muted: #9a948a;
  --line: rgba(236, 230, 218, .14);
  --divider: rgba(236, 230, 218, .22);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* the typewriter tags */ /* the lines between the homepage's sections and songs */
  --dusk: #1d2c4a;
  --gold: #d9a845;
  --red: #a8322a;          /* barn red: the single accent */
  --mile: #1f6b45;         /* mile-marker green (logo) */
  --mile-text: #6db68a;    /* the same green, lightened to read as text on the dark */
  --accent: var(--red);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  color-scheme: dark; /* deliberately single-theme: the film's dark world */
}
.mood-keepscore { --accent: #b9503f; }
.mood-redtears  { --accent: #c4b293; }
.mood-blueprint { --accent: #86a6cc; } /* the blueprint's ink, lifted for dark backgrounds */
.mood-chase { --accent: #e9b25a; } /* the sun on the album cover */
.mood-lucky     { --accent: #d9a845; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* indie texture: a little film grain */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.4s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }

a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 40px; } }

.label { font: 600 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; display: flex; align-items: center; gap: 10px; }
.label::before { content: ''; width: 18px; height: 1px; background: var(--accent); }
body:not([data-song]) .label::before { background: var(--mile-text); height: 2px; } /* the Seventh Mile green on the homepage's section labels */

/* ---------- header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: calc(64px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter); background: linear-gradient(rgba(8, 9, 11, .75), rgba(8, 9, 11, 0)); transition: background .4s;
}
.site-header.solid { background: rgba(8, 9, 11, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }.brand span, .footer-brand span { font: 600 12px/1 var(--sans); letter-spacing: .32em; }
.marker { width: 22px; height: 30px; flex: none; }
.marker.sm { width: 18px; height: 24px; }
.site-header nav { display: flex; gap: 18px; }
.site-header nav a { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-2); text-decoration: none; padding: 10px 0; }
.site-header nav a:hover { color: var(--paper); }
/* the name alone, no mile sign; the signs stay down on the road with the songs */
@media (max-width: 420px) { .brand span { font-size: 10px; letter-spacing: .22em; } }
/* homepage, first screen: a quiet menu of words; the mic and pencil arrive once you scroll and the bar turns solid */
body.home .site-header:not(.solid) .nav-mic svg { display: none; }
body.home .site-header:not(.solid) .nav-mic span { display: inline; border-color: transparent; padding-bottom: 0; color: var(--paper-2); }
@media (max-width: 760px) { body.home .site-header:not(.solid) .nav-mic { display: none; } }
/* Take the Mic in the menu: the hero's vintage mic, the same height as the Seventh Mile marker */
/* Take the Mic in the menu: the hero's mic, underlined to match "Take the mic" in the hero */
.site-header nav { align-items: center; }
.site-header nav a { white-space: nowrap; }
.site-header nav .nav-mic { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: var(--paper); }
.nav-mic span { border-bottom: 1px solid rgba(236, 230, 218, .45); padding-bottom: 4px; transition: border-color .3s; }
.nav-mic:hover span { border-color: var(--paper); }
.nav-mic svg { width: 18px; height: 30px; flex: none; transform: rotate(-8deg); transition: filter .3s, transform .3s; }
.nav-mic:hover svg { transform: rotate(0deg); filter: drop-shadow(0 0 6px rgba(240, 196, 110, .7)); }
@media (max-width: 420px) { .nav-mic span { display: none; } } /* phones: the mic alone */
@media (max-width: 360px) { .site-header nav { gap: 12px; } .site-header nav a { letter-spacing: .12em; } } /* four menu words on the smallest phones */
@media (min-width: 768px) { .site-header nav { gap: 32px; } }

/* ---------- plates (stand-in film frames) */
.plate { position: absolute; inset: 0; overflow: hidden; }
.plate-svg { width: 100%; height: 100%; }
.media { width: 100%; height: 100%; object-fit: cover; display: block; }
.push .plate-svg, .hero .plate-svg, .push .media, .hero .media { animation: push 45s ease-out forwards; transform-origin: 70% 64%; }
.hero .media { object-position: 50% 40%; }
/* no slow push-in on the hero videos: rescaling video every frame made the small barns shimmer, and the clips carry their own motion */
.hero video.media { animation: none; transform: none; }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.09); } }
.lamp { animation: flicker 8s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 46% { opacity: .9; } 50% { opacity: .82; } 54% { opacity: .94; } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 11, .95) 0%, rgba(8, 9, 11, .5) 38%, rgba(8, 9, 11, 0) 72%); }
/* the limewashed wall is bright: deepen the shade behind the text */
/* Blueprint's parchment is bright: a deeper shade so the title stays readable, on phones most of all */
.mood-blueprint .hero-shade { background: linear-gradient(to top, rgba(8, 9, 11, .97) 0%, rgba(8, 9, 11, .8) 45%, rgba(8, 9, 11, .4) 80%, rgba(8, 9, 11, .2) 100%), linear-gradient(90deg, rgba(8, 9, 11, .6), rgba(8, 9, 11, 0) 75%); }
.mood-keepscore .hero-shade { background: linear-gradient(to top, rgba(8, 9, 11, .96) 0%, rgba(8, 9, 11, .62) 45%, rgba(8, 9, 11, .2) 80%), linear-gradient(90deg, rgba(8, 9, 11, .55), rgba(8, 9, 11, 0) 70%); }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 1px solid rgba(236, 230, 218, .45); color: var(--paper); background: transparent; text-decoration: none;
  font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, background .3s, color .3s;
}
.btn:hover { border-color: var(--paper); }
.btn-solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-solid:hover { background: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- home hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-copy { position: relative; width: 100%; padding-bottom: clamp(56px, 11vh, 120px); }
/* the horse runs the field first, then dissolves to the barn light */
.hero-horse { position: absolute; inset: 0; transition: opacity 1.8s ease; }
.hero .hero-horse { object-position: 8% 40%; } /* keep the farm barn (far left) in frame on narrow screens */
.hero.to-barn .hero-horse { opacity: 0; }
/* the barn under the horse: the doors-open intro sits on top of the playing loop until it ends */
.hero-barn { position: absolute; inset: 0; }
.hero-barn-intro { transition: opacity .3s linear; }
.hero.at-loop .hero-barn-intro { opacity: 0; }
/* Hear her play: a quiet tag in the stop sign's corner; it fades in as the doors open */
.hero-hear {
  position: absolute; right: 20px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 9px 16px 9px 13px; border: 1px solid rgba(236, 230, 218, .35); border-radius: 999px; background: rgba(8, 9, 11, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--paper); cursor: pointer;
  font: 500 11px/1 var(--mono, 'IBM Plex Mono', monospace); letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity 1.6s ease, border-color .3s;
}
.hero-hear.show { opacity: 1; }
.hero-hear:hover, .hero-hear:focus-visible { border-color: var(--paper); }
.hero-hear:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.hero-hear svg { width: 16px; height: 16px; flex: none; }
.hear-bars { display: none; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.hear-bars i { display: block; width: 3px; height: 100%; background: var(--mile-text); transform-origin: bottom; animation: hear-bar 1.1s ease-in-out infinite; }
.hear-bars i:nth-child(2) { animation-delay: -.35s; } .hear-bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes hear-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.hero-hear.on .hear-note { display: none; }
.hero-hear.on .hear-bars { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .hear-bars i { animation: none; transform: scaleY(.7); } }
.wordmark { margin: 0; font: 500 clamp(30px, 8.4vw, 96px)/1 var(--sans); letter-spacing: .2em; margin-right: -.2em; animation: rise 2.6s ease-out .4s both; }
.wordmark-sub {
  display: block; margin: .55em 0 0 .1em; font-size: max(.24em, 12px); font-weight: 600; letter-spacing: .42em;
  text-transform: uppercase; color: var(--mile-text); animation: rise 2.4s ease-out 1s both;
}
/* status tag above the name, with a small green light */
.hero-status { margin: 0 0 22px; background: rgba(8, 9, 11, .35); color: var(--paper); animation: rise 2s ease-out .2s both; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 0 0 rgba(95, 208, 138, .6); animation: beacon 2.4s ease-out infinite; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(95, 208, 138, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(95, 208, 138, 0); } }
/* the credo in the songwriter's own handwriting (white ink, thickened from a marker photo) */
.creed-hand { line-height: 0; }
.creed-hand img { display: block; width: auto; height: clamp(42px, 6vw, 74px); max-width: 100%; object-fit: contain; object-position: left; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
/* the credo: the brand line, set like a film title card's last line */
.creed {
  margin: 22px 0 36px; font: italic 400 clamp(26px, 4.2vw, 46px)/1.15 var(--serif); color: #efe5d2;
  word-spacing: .12em; animation: rise 2.6s ease-out 1.4s both;
}
/* Believe. Love. Build. now titles the About section (moved off the hero, Oct 21) */
.about-creed { margin: 18px 0 30px; animation: none; }
.about-creed img { height: clamp(48px, 6.4vw, 88px); }
/* with the three words gone, the hero buttons sit a little below the name */
.hero-actions { margin-top: 34px; }
/* editorial moments between sections: one line, discovered on scroll */
.moment { padding: clamp(56px, 10vw, 120px) 0; text-align: center; }
.moment p { margin: 0 auto; font: italic 400 clamp(28px, 4.6vw, 52px)/1.2 var(--serif); color: var(--paper); text-wrap: balance; max-width: 22ch; }
.moment p::after { content: ''; display: block; width: 36px; height: 2px; margin: 28px auto 0; background: var(--mile-text); opacity: .7; }
/* the making */
.making { padding-top: clamp(56px, 8vw, 100px); }
.making-grid { display: grid; gap: 28px; border-top: 1px solid var(--divider); padding-top: clamp(40px, 6vw, 64px); }
@media (min-width: 860px) { .making-grid { grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; } }
.making-title { margin: 0; font: 400 clamp(30px, 4.2vw, 48px)/1.1 var(--serif); text-wrap: balance; max-width: 16ch; }
.making-lede { margin: 0 0 18px; font: 400 clamp(19px, 2vw, 22px)/1.55 var(--serif); color: #e3dbcc; max-width: 46ch; }
.making-note { margin: 0 0 18px; color: var(--paper-2); font-size: 17px; max-width: 52ch; }
.making-soon { margin: 0; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }
/* what it's about */
.about-grid { display: grid; gap: 36px; border-top: 1px solid var(--divider); padding-top: clamp(40px, 6vw, 64px); }
#join > .wrap { border-top: 1px solid var(--divider); padding-top: clamp(40px, 6vw, 64px); }
@media (min-width: 860px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.ideas { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.ideas li { font: 400 clamp(24px, 3vw, 34px)/1.2 var(--serif); color: var(--paper); padding-left: 22px; position: relative; }
.ideas li::before { content: ''; position: absolute; left: 0; top: .58em; width: 10px; height: 10px; border-radius: 2px; background: var(--mile); box-shadow: inset 0 0 0 1.5px #e9efea; }
.about-note { margin: 0; color: var(--paper-2); font-size: 17px; max-width: 52ch; }
/* each song's line, under its title */
/* home: each song is "The song" then "The film", in the same order and format (Oct 27) */
.song-block { padding-bottom: clamp(56px, 8vw, 104px); }
.song-block + .song-block { border-top: 1px solid var(--divider); padding-top: clamp(56px, 8vw, 104px); }
.song-block .chapter { margin-bottom: clamp(40px, 5vw, 64px); }
.song-film .label { margin-bottom: 18px; }
.film-soon .film-frame .plate { opacity: .55; }
.film-soon-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; background: rgba(8, 9, 11, .55); color: var(--paper); }
/* the two closing lines sit closer together */
.moment + .moment { padding-top: 0; }
.chapter-motto { margin: -6px 0 16px; font: italic 400 clamp(21px, 2.6vw, 27px)/1.3 var(--serif); color: var(--mile-text); }
.about-note + .about-note { margin-top: 16px; }
.song-motto { margin: -4px 0 10px; font: italic 400 clamp(18px, 2.2vw, 22px)/1.3 var(--serif); color: var(--mile-text); animation: rise 1.3s ease-out .15s both; }
.footer-sub { display: block; flex-basis: 100%; margin-top: 4px; font: 600 10px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--mile-text); }
.tagline { margin: 18px 0 34px; font: italic 400 clamp(21px, 3.2vw, 32px)/1.3 var(--serif); color: #e7dcc8; animation: rise 2.6s ease-out 1.3s both; }
.hero .actions { animation: rise 2s ease-out 2.1s both; }
/* Take the mic: a small vintage stage mic beside the buttons; it catches a warm spotlight on hover */
.hero-actions, .join-actions { align-items: center; }
.join-actions { margin-top: 8px; } /* the mic now lives here, beside "More ways to join in" (moved off the first screen) */
.hero-mic {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 8px; margin-left: 6px;
  color: var(--paper); text-decoration: none; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
}
.hero-mic svg { width: 44px; height: 74px; margin: -13px 0; flex: none; transform: rotate(-8deg); transition: filter .4s, transform .4s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.hero-mic span { border-bottom: 1px solid rgba(236, 230, 218, .45); padding-bottom: 4px; transition: border-color .3s; }
.hero-mic:hover svg, .hero-mic:focus-visible svg { transform: rotate(0deg) translateY(-2px); filter: drop-shadow(0 0 10px rgba(240, 196, 110, .75)) drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.hero-mic:hover span, .hero-mic:focus-visible span { border-color: var(--paper); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- sections */
.section { padding: clamp(80px, 12vw, 150px) 0; }
.section-title { font: 400 clamp(34px, 5vw, 56px)/1.05 var(--serif); margin: 0 0 clamp(40px, 7vw, 80px); max-width: 18ch; }

/* songs as chapters */
.chapter { display: grid; gap: 28px; margin-bottom: clamp(52px, 7vw, 96px); align-items: center; }
/* a line across the page between songs: each song its own chapter, its own mile */
.chapter + .chapter { border-top: 1px solid var(--divider); padding-top: clamp(52px, 7vw, 96px); }
@media (min-width: 860px) {
  .chapter { grid-template-columns: 1.05fr 1fr; gap: 64px; } /* every cover on the left, so the songs read like a list */
}
.cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #000; text-decoration: none; }
.cover .plate-svg { transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.cover:hover .plate-svg { transform: scale(1.035); }
.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .25)); }
.cover-titled::after { display: none; } /* art with its own title: no shade, no overlay text */
.cover-top { position: absolute; z-index: 1; top: 18px; left: 20px; font: 600 10px/1 var(--sans); letter-spacing: .3em; color: rgba(236, 230, 218, .85); }
.cover-title { position: absolute; z-index: 1; bottom: 18px; left: 20px; right: 20px; font: italic 400 clamp(22px, 3vw, 30px)/1.1 var(--serif); }
.mile { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--paper-2); }
/* typewriter tags: small mono caps in a thin rounded outline */
.mile > span, .tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 5px; border: 1px solid rgba(236, 230, 218, .38); border-radius: 999px;
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-2);
}
.chapter h3 { font: 400 clamp(44px, 7vw, 80px)/1 var(--serif); letter-spacing: -.01em; margin: 10px 0 18px; }
.chapter-text > p:not(.mile) { color: var(--paper-2); font-size: 19px; max-width: 32ch; margin: 0 0 28px; }

.road-ahead { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; border-top: 1px solid var(--divider); padding-top: 32px; }
.road-ahead p { margin: 0; color: var(--paper-2); font: italic 400 24px/1.3 var(--serif); }
/* the "New songs coming soon" typewriter tag beside the waiting 7 (moved here from the hero, Oct 21) */
.road-ahead p.road-status { font: 500 10.5px/1.2 var(--mono); color: var(--paper); }
/* the road: unnumbered markers per song, then 7 waiting. Signs line up along the top so names can wrap on phones. */
.road { --mk-h: 60px; display: flex; align-items: flex-start; gap: 28px; flex: 1 1 420px; min-width: 0; }
.road .marker { width: calc(var(--mk-h) * .737); height: var(--mk-h); display: block; }
.mk { display: block; flex: none; transition: transform .3s; }
.mk.on:hover { transform: translateY(-3px); }
.road-line { flex: 1; align-self: flex-start; min-width: 40px; height: 0; border-top: 2px dashed rgba(214, 183, 90, .45); margin-top: calc(var(--mk-h) - 10px); } /* meets the sign posts */
.mk.seven { opacity: .5; }
/* each song's name under its marker, like the name on a road sign */
.mk { text-decoration: none; text-align: center; }
.mk .marker { margin: 0 auto; }
.mk-name { display: block; margin-top: 10px; font: 600 14px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); white-space: nowrap; }
.mk.on:hover .mk-name { color: #fff; }
@media (max-width: 1000px) { .road { flex-wrap: wrap; row-gap: 22px; } .road-line { display: none; } } /* five songs and the 7 wrap onto two rows below desktop width */
@media (max-width: 560px) {
  .road { --mk-h: 48px; gap: 20px 14px; }
  .mk-name { font-size: 12px; letter-spacing: .06em; white-space: normal; max-width: 76px; margin-inline: auto; }
  .road-ahead p { font-size: 21px; }
}
@media (max-width: 360px) { .road { --mk-h: 42px; gap: 9px; } .mk-name { font-size: 11px; max-width: 62px; } } /* smallest phones: keep the 7 on screen */

/* film */
.film-section { background: linear-gradient(#08090b, #070a12 30%, #070a12 70%, #08090b); }
.film-tabs[hidden] { display: none; } /* one film per song: no tab */
.film-tabs { display: inline-flex; border: 1px solid var(--line); margin-bottom: 14px; }
.seg { background: none; border: 0; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 13px 16px; cursor: pointer; }
.seg[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.seg:disabled { cursor: default; color: rgba(236, 230, 218, .35); }
.seg em { font: italic 400 14px/1 var(--serif); letter-spacing: 0; text-transform: none; margin-left: 4px; }
.film-title { margin: 0 0 14px; font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); color: var(--paper); } /* the chosen film's full title, e.g. Keep Score — Her Story */
.film-label { margin: 0 0 14px 14px; vertical-align: top; } /* a typewriter tag, like a stamp: Private preview */
.still .media { position: absolute; inset: 0; }
.film-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.film-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45)); }
.mc-b { opacity: 0; }
.film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid rgba(236, 230, 218, .7); background: rgba(8, 9, 11, .35); color: var(--paper); cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .3s, transform .3s;
}
.film-play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 4px; }
.film-play:hover { background: rgba(8, 9, 11, .6); transform: translate(-50%, -50%) scale(1.04); }
.film-note { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0; font-size: 13px; color: var(--paper-2); text-align: center; }
.film-note code { font-size: 12px; color: var(--paper); }
.film-caption { margin: 14px 0 0; font-size: 13px; color: var(--muted); max-width: 60ch; }
.film-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: 28px; }
.film-head h2 { margin: 0; font: 400 clamp(40px, 6vw, 72px)/1 var(--serif); }
.film-head p { margin: 0; color: var(--paper-2); max-width: 40ch; }

/* about */
.about p.big { font: 400 clamp(24px, 3.6vw, 40px)/1.35 var(--serif); max-width: 30ch; margin: 0; }

/* join */
.duet { margin: 0 0 40px; font: italic 400 clamp(30px, 5.4vw, 64px)/1.15 var(--serif); }
.duet span { display: block; }
.duet span + span { text-align: right; color: var(--gold); }
.join-grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .join-grid { grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; } }
.join-grid > div > p { color: var(--paper-2); font-size: 18px; max-width: 42ch; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.signup label { flex-basis: 100%; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.signup input {
  flex: 1 1 220px; min-height: 48px; padding: 0 16px; background: transparent; color: var(--paper);
  border: 1px solid rgba(236, 230, 218, .35); font: 400 16px var(--sans);
}
.signup input::placeholder { color: #6e6a63; }
.signup input:focus { outline: none; border-color: var(--paper); }
.signup-note { flex-basis: 100%; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.thanks { font: italic 400 22px/1.4 var(--serif); margin: 0; }

/* ---------- footer */
.site-footer { border-top: 1px solid var(--divider); padding: 56px 0 64px; font-size: 14px; color: var(--muted); }
.footer-grid { display: grid; gap: 24px; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1fr 1.4fr 1fr; align-items: start; } .footer-copy { grid-column: 1 / -1; } }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--paper); }
.footer-note { margin: 0; max-width: 46ch; }
.footer-brand { flex-wrap: wrap; }
.footer-line { flex-basis: 100%; margin-top: 6px; font: italic 400 19px/1.3 var(--serif); color: var(--paper-2); }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer nav a { text-decoration: none; color: var(--paper-2); }
.site-footer nav a:hover { color: var(--paper); }
.footer-copy { margin: 0; font-size: 12px; }

/* ---------- song page */
.song-hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.song-hero-copy { position: relative; width: 100%; padding-bottom: clamp(40px, 8vh, 90px); padding-top: 120px; }
.song-title { margin: 8px 0 14px; font: 400 clamp(54px, 12vw, 156px)/.95 var(--serif); letter-spacing: -.015em; animation: rise 1.2s ease-out both; }
.song-sentence { margin: 0 0 30px; font: italic 400 clamp(20px, 2.8vw, 28px)/1.35 var(--serif); color: #e7dcc8; max-width: 34ch; animation: rise 1.4s ease-out .3s both; }
.player {
  display: flex; align-items: center; gap: 16px; max-width: 540px; padding: 14px 18px 14px 14px;
  background: rgba(8, 9, 11, .55); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.play { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.play svg { width: 22px; height: 22px; fill: currentColor; }
.play .i-pause, .player.playing .i-play { display: none; }
.player.playing .i-pause { display: block; }
.play:disabled { opacity: .45; cursor: default; }
.player-body { flex: 1; min-width: 0; }
/* "Listen" arrived here: point at what to tap (the play button, or the version choice) */
.player.nudge .play, .versions.nudge { animation: nudge 1.6s ease-in-out 3; box-shadow: 0 0 0 2px var(--mile-text); }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 2px var(--mile-text); } 50% { box-shadow: 0 0 0 8px rgba(143, 195, 162, 0); } }
.player-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 14px; }
.player-title { font-weight: 600; white-space: nowrap; }
@media (max-width: 480px) { .player-row { flex-direction: column; gap: 2px; } .player-time { font-size: 13px; } }
.player-time { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 2px; background: var(--line); }
.bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.streams { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 230, 218, .4); }
.streams em { font: italic 400 15px/1 var(--serif); letter-spacing: 0; text-transform: none; }

.block { padding-top: clamp(64px, 9vw, 120px); }
.notes { display: grid; gap: 8px; }
@media (min-width: 860px) { .notes { grid-template-columns: 1fr 2.2fr; gap: 40px; } }
.notes p:not(.label) { font: 400 clamp(19px, 2vw, 23px)/1.6 var(--serif); margin: 0 0 1em; max-width: 38em; color: #e3dbcc; }

.lines blockquote { margin: 0 0 24px; font: italic 400 clamp(36px, 6.4vw, 76px)/1.1 var(--serif); color: var(--paper); }
.lines blockquote::before { content: ''; display: block; width: 40px; height: 2px; background: var(--accent); margin-bottom: 26px; }
.lines details { border-top: 1px solid var(--line); padding-top: 14px; max-width: 520px; }
.lines summary { cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-2); padding: 8px 0; }
.lines details[open] { max-width: 640px; }
.lyric { padding: 10px 0 8px; }
.lyric-block { margin-bottom: 22px; }
.lyric-block p { margin: 0; font: 400 19px/1.55 var(--serif); color: #e3dbcc; }
.lyric-block .lyric-label { font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lyric-note { color: var(--muted); font: italic 400 17px/1.5 var(--serif); }

/* stills share one height; wide frames are 16:9, portraits are 3:4, so nothing is padded or cropped oddly at any size */
.strip {
  --still-h: clamp(170px, 46vw, 260px);
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) 12px; scroll-padding: 0 var(--gutter); scrollbar-width: thin; scrollbar-color: #333 transparent;
}
@media (min-width: 860px) { .strip { --still-h: clamp(190px, 17vw, 300px); } }
@media (min-width: 1260px) { .strip { padding-left: calc((100vw - 1180px) / 2 + var(--gutter)); scroll-padding-left: calc((100vw - 1180px) / 2 + var(--gutter)); } }
.strip figure { margin: 0; scroll-snap-align: start; flex: 0 0 auto; width: calc(var(--still-h) * 16 / 9); max-width: 88vw; }
.strip figure.portrait { width: calc(var(--still-h) * 3 / 4); }
.strip .still { aspect-ratio: auto; height: var(--still-h); }
.strip figure:not(.portrait) .still { height: auto; aspect-ratio: 16 / 9; }
.strip figure.portrait .still img { object-position: 50% 0; }
.still { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.still .plate-svg { position: absolute; inset: 0; }
.strip figcaption { display: flex; gap: 12px; padding-top: 12px; font: italic 400 17px/1.3 var(--serif); color: var(--paper-2); }
.strip figcaption span { font: 600 11px/1.9 var(--sans); letter-spacing: .14em; color: var(--muted); font-style: normal; }

/* film-order sequence (The Lucky One) */
.sequence { display: grid; gap: clamp(28px, 5vw, 56px); }
.sequence > .wrap { width: 100%; }
.seq-item { position: relative; margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 var(--gutter); }
.seq-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; max-width: 100%; }
@media (min-width: 900px) { .seq-media { aspect-ratio: 21 / 9; } }
.seq-cap { position: absolute; left: calc(var(--gutter) + clamp(16px, 3vw, 40px)); right: calc(var(--gutter) + 16px); bottom: clamp(14px, 3vw, 36px); pointer-events: none; }
.seq-item::after { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 60%; background: linear-gradient(to top, rgba(8, 9, 11, .85), rgba(8, 9, 11, 0)); pointer-events: none; }
.seq-cap { z-index: 1; }
.seq-n { display: block; margin-bottom: 8px; font: 600 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.seq-cap blockquote { margin: 0; font: italic 400 clamp(20px, 3.4vw, 40px)/1.15 var(--serif); color: var(--paper); text-wrap: balance; }
@media (max-width: 560px) { .seq-cap blockquote { font-size: 18px; } }

/* the people in the film (portraits shot on white, warmed and set into the dark page) */
.cast-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 860px) { .cast-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.cast-card { margin: 0; }
.cast-img { aspect-ratio: 3 / 4; overflow: hidden; background: #ece6da; max-width: 100%; }
.cast-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; filter: sepia(.12) saturate(.92) contrast(1.02); }
.cast-card figcaption { padding-top: 12px; display: grid; gap: 4px; }
.cast-card strong { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--paper); }
.cast-card span { font: italic 400 17px/1.35 var(--serif); color: var(--paper-2); }
.prompts-row { display: grid; gap: 40px; }
@media (min-width: 860px) { .prompts-row { grid-template-columns: 1fr 1fr; gap: 56px; } }
.prompt-more { margin: 28px 0 0; }
.footer-quiet { color: inherit; opacity: .6; margin-left: 10px; }
.footer-quiet:hover { opacity: 1; }
.prompt-card { border-left: 2px solid var(--accent); padding: 8px 0 8px clamp(20px, 3vw, 36px); max-width: 760px; }
.prompt-card h2 { font: 400 clamp(30px, 4.4vw, 50px)/1.12 var(--serif); margin: 0 0 16px; }
.prompt-card p:not(.label) { color: var(--paper-2); font-size: 18px; max-width: 46ch; margin: 0 0 26px; }

.credits p:not(.label) { color: var(--muted); font-size: 14px; margin: 0 0 6px; max-width: 60ch; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: clamp(72px, 10vw, 130px); margin-bottom: 0; padding-top: 0; }
.pager > * { display: block; padding: 28px 0 40px; border-top: 1px solid var(--line); text-decoration: none; }
.pager .next { text-align: right; }
.pager span { display: block; font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.pager strong { font: 400 clamp(24px, 4vw, 44px)/1.1 var(--serif); }
.pager a:hover strong { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.pager .ahead strong { color: rgba(236, 230, 218, .35); font-style: italic; }

/* ---------- join page */
.page-hero { position: relative; min-height: 70vh; min-height: 70svh; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero h1 { margin: 0 0 12px; font: 400 clamp(52px, 10vw, 120px)/1 var(--serif); }
.page-hero p { margin: 0; font: italic 400 clamp(20px, 2.8vw, 28px)/1.35 var(--serif); color: #e7dcc8; max-width: 34ch; }
.page-hero .wrap { position: relative; width: 100%; padding-bottom: clamp(40px, 8vh, 90px); }
.prompts { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 760px) { .prompts { grid-template-columns: 1fr 1fr; } }
.prompt { background: var(--ink); padding: clamp(28px, 4vw, 48px) clamp(0px, 3vw, 40px) clamp(28px, 4vw, 48px) 0; }
@media (min-width: 760px) { .prompt:nth-child(even) { padding-left: clamp(24px, 3vw, 40px); } .prompt-wide { grid-column: 1 / -1; padding-left: 0 !important; } .prompt-wide p { max-width: 64ch; } }
.prompt .tag { font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.prompt .tag a { color: var(--paper-2); }
.prompt h2 { font: 400 clamp(26px, 3.4vw, 38px)/1.15 var(--serif); margin: 0 0 14px; }
.prompt p { color: var(--paper-2); margin: 0; max-width: 40ch; }
.prompt .soon { margin-top: 14px; font: italic 400 16px/1.3 var(--serif); color: var(--muted); }

/* ---------- versions (Keep Score: two equal interpretations) */
.choose-label { margin: 0 0 10px; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--paper-2); }
.versions { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 540px; margin-bottom: 14px; border: 1px solid rgba(236, 230, 218, .4); }
.ver {
  min-height: 52px; padding: 0 14px; background: rgba(8, 9, 11, .45); color: var(--paper); border: 0; cursor: pointer;
  font: italic 400 20px/1 var(--serif); transition: background .3s, color .3s;
}
.ver + .ver { border-left: 1px solid rgba(236, 230, 218, .4); }
.ver:hover { background: rgba(236, 230, 218, .1); }
.ver[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.versions.small { max-width: 420px; margin: 0 0 22px; }
.versions.small .ver { background: transparent; min-height: 46px; font-size: 18px; }
.versions.small .ver[aria-pressed="true"] { background: var(--paper); }

/* ---------- TAKE THE MIC: section */
.ttm-title { margin: 0 0 14px; font: 400 clamp(40px, 6vw, 72px)/1 var(--serif); }
.ttm-lede { color: var(--paper-2); font-size: 18px; max-width: 46ch; margin: 0 0 26px; }
.ttm-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ttm-start:disabled { opacity: .4; cursor: default; }
.ttm-status { margin: 0; flex: 1 1 260px; max-width: 46ch; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }
.ttm-status:empty { display: none; }

/* ---------- TAKE THE MIC: singing mode (full screen, intimate, no scoring) */
html.ttm-open, html.ttm-open body { overflow: hidden; }
.ttm { position: fixed; inset: 0; z-index: 100; background: #050608; display: flex; flex-direction: column; }
.ttm[hidden] { display: none; }
.ttm-plate { opacity: .28; }
.ttm-plate .plate-svg { filter: blur(3px) saturate(.8); transform: scale(1.05); }
.ttm-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5, 6, 8, .55), rgba(5, 6, 8, .95) 75%); }
.ttm-top { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px var(--gutter); }
.ttm-brand { font: 600 11px/1 var(--sans); letter-spacing: .3em; color: var(--accent); }
.ttm-song { flex: 1; font: italic 400 17px/1.2 var(--serif); color: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttm-close { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--paper); cursor: pointer; }
.ttm-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.ttm-lyrics { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); max-width: 1000px; width: 100%; margin: 0 auto; }
.ttm-lyrics .l { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.2; }
.ttm-lyrics .prev { font-size: clamp(18px, 2.4vw, 26px); color: rgba(236, 230, 218, .28); margin-bottom: 22px; }
.ttm-lyrics .cur { font-size: clamp(32px, 6vw, 64px); color: var(--paper); margin-bottom: 26px; }
.ttm-lyrics .cur.in { animation: lyric .6s ease-out; }
/* karaoke: each word fills with the song's accent as it's sung; unsung words wait in soft paper */
.ttm-lyrics .cur.karaoke .w {
  background-image: linear-gradient(90deg, var(--sing, var(--gold)) 0, var(--sing, var(--gold)) var(--p, 0%), rgba(236, 230, 218, .5) var(--p, 0%), rgba(236, 230, 218, .5) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ttm.mood-lucky { --sing: #e8bd5a; }
.ttm.mood-keepscore { --sing: #e07a63; }
.ttm.mood-redtears { --sing: #e4d3b2; }
.ttm.mood-blueprint { --sing: #a9c3e2; }
.ttm.mood-chase { --sing: #f2c77e; }
.ttm-lyrics .next { font-size: clamp(20px, 3vw, 32px); color: rgba(236, 230, 218, .55); margin-bottom: 10px; }
.ttm-lyrics .next2 { font-size: clamp(18px, 2.4vw, 26px); color: rgba(236, 230, 218, .3); }
@keyframes lyric { from { opacity: .35; } to { opacity: 1; } }
.ttm-sync { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 0 var(--gutter) 12px; max-width: 1000px; width: 100%; margin: 0 auto; }
.ttm-sync[hidden], .ttm-sync [hidden] { display: none; }
.ttm-sync .btn:disabled { opacity: .4; cursor: default; }
.ttm-sync-help { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--paper-2); }
.ttm.is-sync .ttm-lyrics .next { color: var(--paper); }
.ttm.is-sync .ttm-lyrics .next::before { content: 'Next ›  '; font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--accent); vertical-align: middle; }
.ttm-flag { position: relative; margin: 0 auto 10px; padding: 0 var(--gutter); max-width: 1000px; width: 100%; font-size: 13px; color: var(--muted); }
.ttm-controls { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px var(--gutter) max(22px, env(safe-area-inset-bottom)); max-width: 1000px; width: 100%; margin: 0 auto; }
.ttm-restart { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--paper); cursor: pointer; flex: none; }
.ttm-restart svg { width: 16px; height: 16px; fill: currentColor; }
.ttm.playing .ttm-play .i-play { display: none; }
.ttm.playing .ttm-play .i-pause { display: block; }
.ttm-play .i-pause { display: none; }
.ttm-progress { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ttm-progress .bar { flex: 1; }
.ttm-time { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ---------- reveal (motion reveals story) */
.js .reveal { opacity: .55; transform: translateY(14px); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Learn with us: the three guides, each a road map */
.guides { display: grid; gap: clamp(48px, 6vw, 64px); }
@media (min-width: 900px) { .guides { grid-template-columns: repeat(2, 1fr); gap: 56px 48px; } } /* four guides: two by two */
.guide { display: flex; flex-direction: column; }
.guide-cover { display: block; margin-bottom: 22px; border: 1px solid var(--line); overflow: hidden; }
.guide-cover img { width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.guide-cover:hover img { transform: scale(1.02); }
.guide .tag { align-self: flex-start; margin: 0 0 14px; }
.guide h2 { margin: 0 0 10px; font: 400 clamp(28px, 3vw, 34px)/1.1 var(--serif); }
.guide > p:not(.tag) { margin: 0 0 22px; color: var(--paper-2); font-size: 17px; }
.guide .actions { margin-top: auto; }
@media (max-width: 760px) { .nav-mic span { display: none; } } /* five menu items: the mic and the pencil stand alone below tablet width */

/* The making: a quiet way into Learn (the pencil lives in the menu, not the hero) */
.making-link { margin: 22px 0 0; }

/* Under "Build something worth passing on": a small link to Learn, in the section-label style */
.moment .moment-link { margin-top: 30px; max-width: none; font: 600 11px/1.9 var(--sans); letter-spacing: .22em; text-transform: uppercase; font-style: normal; }
.moment .moment-link::after { display: none; }
.moment .moment-link a { color: var(--mile-text); text-decoration: none; border-bottom: 1px solid rgba(109, 182, 138, .45); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.moment .moment-link a:hover, .moment .moment-link a:focus-visible { color: var(--paper); border-color: var(--paper); }

/* Hover on the handwritten credo: each word takes its color from the PMA guide.
   The handwriting itself is the stencil, so the color lands only on the letters. Believe blue, Love barn red, Build mile green. */
.creed-hand a { position: relative; display: inline-block; }
.creed-hand a::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path 3s cubic-bezier(.45, .05, .35, 1); /* the color writes itself in, left to right */
  background: linear-gradient(90deg, #a3c0e6 0 38%, #e2806c 38% 71%, #86cfa1 71% 100%);
  -webkit-mask-image: url("media/home/creed-handwriting.png"); mask-image: url("media/home/creed-handwriting.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.creed-hand a:hover::after, .creed-hand a:focus-visible::after { clip-path: inset(0 0 0 0); }
@media (hover: none) { .creed-hand a::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .creed-hand a::after { transition: none; } }

/* No email list at launch: follow on the platforms, and one contact address */
.follow .label { margin-bottom: 4px; }
.follow .streams { margin-top: 8px; }
.follow .contact { margin: 18px 0 0; font-size: 15px; color: var(--paper-2); }
.follow .contact a { color: var(--mile-text); text-decoration: none; border-bottom: 1px solid rgba(109, 182, 138, .45); }
.follow .contact a:hover { color: var(--paper); border-color: var(--paper); }

/* Keep Score heroes: the child at the window sits right of the title on wide screens, centered on phones */
.media.ks-hero { object-position: 100% 50%; }
@media (max-width: 700px) { .media.ks-hero { object-position: 80% 50%; } }
/* the Oct 29 boy: his window sits nearer the middle of the frame, so frame it right of the title */
.media.ks-hero-boy12 { object-position: 58% 50%; }
@media (max-width: 700px) { .media.ks-hero-boy12 { object-position: 68% 50%; } }

/* Songs list in the hero (Oct 27): a quiet "Songs" tag beside "Hear her play"; the list opens above them */
.hero-audio { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.hero-audio .hero-hear { position: static; }
.hero-songs-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 9px 16px 9px 13px; max-width: 46vw;
  border: 1px solid rgba(236, 230, 218, .35); border-radius: 999px; background: rgba(8, 9, 11, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--paper); cursor: pointer;
  font: 500 11px/1 var(--mono, 'IBM Plex Mono', monospace); letter-spacing: .14em; text-transform: uppercase; transition: border-color .3s;
}
.hero-songs-btn svg { width: 16px; height: 16px; flex: none; }
.hero-songs-btn .hs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-songs-btn:hover, .hero-songs-btn:focus-visible, .hero-songs-btn[aria-expanded="true"] { border-color: var(--paper); }
.hero-songs-btn.on { border-color: var(--mile-text); }
.hero-songs-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.hero-songs {
  position: absolute; right: 20px; bottom: 72px; z-index: 4; width: min(360px, calc(100vw - 40px));
  background: rgba(10, 11, 14, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(236, 230, 218, .18); border-radius: 12px; padding: 12px 12px 8px;
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.hero-songs.show { opacity: 1; transform: none; }
.hs-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; }
.hs-title { margin: 0; font: 500 10.5px/1 var(--mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-2); }
.hs-close { border: 0; background: none; color: var(--paper-2); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.hs-close:hover { color: var(--paper); }
.hs-list { list-style: none; margin: 0; padding: 0; }
.hs-item { position: relative; display: flex; align-items: center; border-radius: 8px; }
.hs-item + .hs-item { margin-top: 2px; }
.hs-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 7px 6px; border: 0; background: none; color: var(--paper); text-align: left; cursor: pointer; border-radius: 8px; }
.hs-row:hover, .hs-row:focus-visible, .hs-item.on .hs-row { background: rgba(236, 230, 218, .07); }
.hs-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex: none; }
.hs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hs-name { font: 400 18px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-note { font: 500 9.5px/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #9a948a); }
.hs-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid rgba(236, 230, 218, .3); border-radius: 50%; }
.hs-ic svg { width: 14px; height: 14px; fill: currentColor; }
.hs-ic .i-pause, .hs-item.playing .hs-ic .i-play { display: none; }
.hs-item.playing .hs-ic .i-pause { display: inline; }
.hs-item.playing .hs-ic { border-color: var(--mile-text); color: var(--mile-text); }
.hs-open { flex: none; width: 28px; text-align: center; color: var(--paper-2); text-decoration: none; font-size: 22px; line-height: 1; }
.hs-open:hover { color: var(--paper); }
.hs-bar { position: absolute; left: 62px; right: 70px; bottom: 3px; height: 2px; background: transparent; pointer-events: none; }
.hs-item.on .hs-bar { background: rgba(236, 230, 218, .12); }
.hs-bar i { display: block; height: 100%; width: 0; background: var(--mile-text); }
/* phones: the list is a drawer from the bottom, so it doesn't cover her at the piano */
@media (max-width: 600px) {
  .hero-audio { right: 12px; bottom: 14px; gap: 8px; }
  .hero-songs { position: fixed; left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 72vh; overflow: auto; z-index: 60; }
}
@media (prefers-reduced-motion: reduce) { .hero-songs { transition: none; } }
/* Easter egg: her at the piano is clickable once the doors are open; "Off" appears under her while it plays */
.hero-her { position: absolute; z-index: 2; display: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.hero.at-loop .hero-her { display: block; }
.hero-her:hover, .hero-her:focus-visible { background: radial-gradient(ellipse at center, rgba(255, 196, 110, .14), rgba(255, 196, 110, 0) 70%); }
.hero-her:focus-visible { outline: 1px solid rgba(236, 230, 218, .5); outline-offset: 2px; }
.hero-her-off {
  position: absolute; z-index: 3; transform: translateX(-50%); padding: 7px 14px; border: 1px solid rgba(236, 230, 218, .35); border-radius: 999px;
  background: rgba(8, 9, 11, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--paper); cursor: pointer;
  font: 500 10.5px/1 var(--mono, 'IBM Plex Mono', monospace); letter-spacing: .16em; text-transform: uppercase;
}
.hero-her-off:hover, .hero-her-off:focus-visible { border-color: var(--paper); }