/* otriqen.com at Christmas (6 November 2026): the homepage's architecture, dressed for The Magic of Christmas.
   The theme is ice (her note): a deep blue night behind everything, white snow, silver for the foil, white cards. */

:root {
  --night: #030a1c;
  --deep: #081838;
  --midnight: #10295a;
  --ice: #bfe3ff;
  --ice-2: #8cc4ff;
  --blue: #2f6bc0;
  --blue-deep: #173d7a;
  --silver: #c9d3df;
  --silver-pale: #eef3f8;
  --text: #eef5ff;
  --text-dim: rgba(238, 245, 255, .72);
  --card: #f5f9fd;
  --card-ink: #13233f;
  --card-dim: rgba(19, 35, 63, .68);
  --line: rgba(201, 211, 223, .34);
  --display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --deco: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --script: "Pinyon Script", "Cormorant Garamond", cursive;
  --body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --foil: #c9d3df url(/christmas/silver.webp?v=1) center / 140px 140px repeat;   /* her foil swatch, made silver */
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
img, svg { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; }
html, body { margin: 0; min-height: 100%; position: relative; background: var(--deep); color: var(--text); font: 500 19px/1.6 var(--body); }
body { padding-right: 18px; --rail-half: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Behind everything: a deep blue night with a little frost in it, darker at the edges. */
.frost {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .92 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 55% at 50% 0%, #22488a 0%, #10295a 42%, #081838 80%, #040c22 100%);
}
.frost::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 85% at 50% 45%, transparent 55%, rgba(0, 4, 16, .5) 100%); }
#snowfall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* The scrollbar on the right: the silver foil, on blue. */
#scrollbar-track {
  position: fixed; top: 0; right: 0; width: 18px; height: 100dvh; z-index: 20;
  background: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .45)), #10295a;
  border-left: 1px solid rgba(238, 243, 248, .22);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#scrollbar-label {
  position: relative; z-index: 1; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font: 400 11px/1 var(--display); letter-spacing: .9em; color: rgba(238, 243, 248, .7);
}
#scrollbar-thumb { position: absolute; right: 2px; width: 14px; z-index: 2; border-radius: 7px; background: #c9d3df url(/christmas/silver.webp?v=1) center / 90px 90px repeat; box-shadow: 0 0 10px rgba(191, 227, 255, .4); }

/* header */
#app-header { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; padding: 18px 20px calc(10px + env(safe-area-inset-top, 0px)); }
#app-header a { display: block; }
#app-header .logo-mark { width: 46px; height: 46px; animation: spin 11s linear infinite; }
#app-header .logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(1) brightness(1.35) contrast(1.05); }   /* the gold mark in silver */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#app-header .tagline { margin-top: 14px; font: 400 14px/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--text-dim); }

/* type */
#feed { position: relative; z-index: 1; }
.home-col { max-width: 760px; margin: 0 auto; }
.eyebrow { margin: 0 0 10px; font: 600 13px/1.25 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
h2 { margin: 0 0 10px; font: 400 clamp(28px, 4.6vw, 40px)/1.15 var(--deco); letter-spacing: .01em; color: inherit; }
p.sub { margin: 0 0 22px; font-size: 20px; line-height: 1.55; color: var(--text-dim); }
a { color: var(--ice); }
/* a silver line with a snowflake in the middle */
.orn { height: 22px; width: 220px; max-width: 100%; margin: 4px 0 18px; background: left center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M4 11 C 40 -6 70 28 96 11 M124 11 C 150 -6 180 28 216 11' fill='none' stroke='%238a9ab0' stroke-width='1.3'/%3E%3Cg stroke='%232f6bc0' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M110 2 V20 M102.2 6.5 L117.8 15.5 M102.2 15.5 L117.8 6.5'/%3E%3C/g%3E%3C/svg%3E"); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 13px 26px; border-radius: 999px;
  border: 1px solid rgba(238, 243, 248, .85); background: linear-gradient(#4a86d4, #1f4f99); color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px rgba(0, 8, 30, .35);
  font: 600 14px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; }
button, [role="button"] { cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ice); outline-offset: 4px; }

/* A scene is a drawing at its own shape with things laid on it. */
.scene { position: relative; overflow: hidden; }

/* The hero: her ice-cave picture, the night over it as a tint, the star, the lights, the trees, the title. */
.hero { height: clamp(440px, 48vw, 88vh); background: var(--night); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero-title { position: absolute; left: 0; right: 0; top: 37%; z-index: 3; padding: 0 20px; text-align: center; }
.wordmark { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.wm-the { font: 600 clamp(13px, 1.4vw, 20px)/1 var(--display); letter-spacing: .6em; margin-right: -.6em; }
/* Only About Time is in the script (her words, 7 Nov: "only about time in the cursive -- the rest should not be", "it's too much
   cursive"): Magic is in the wordmark's Cinzel Decorative now. */
.wm-magic { font: 400 clamp(60px, 8.2vw, 138px)/1 var(--deco); letter-spacing: .02em; margin: .06em 0 .02em; }
.wm-of { font: 700 clamp(22px, 3.3vw, 54px)/1.1 var(--deco); letter-spacing: .05em; }
.wm-hero > span { filter: drop-shadow(0 0 20px rgba(191, 227, 255, .4)) drop-shadow(0 2px 2px rgba(0, 6, 24, .7)); }
.hero .star-halo { animation: halo 5.5s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.hero .tw { animation: tw 3.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes tw { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
.lights .glow { animation: glow 2.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes glow { 0%, 100% { opacity: .55; } 40% { opacity: 1; } 70% { opacity: .72; } }

/* The player: the snow globe on a blue night with lights out of focus, then the controls under it. */
.player-scene { position: relative; z-index: 2; }
.player-pic { position: relative; width: 100%; aspect-ratio: 1925 / 817; overflow: hidden; background: radial-gradient(ellipse 70% 95% at 50% 42%, #1f4782 0%, #0d2552 55%, #040c22 100%); }
.bokeh { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The globe and the box office on one background (her note, 7 Nov: "can the globe and the purchase buttons share the same
   background?"): the night and its bokeh run from the globe down past the tickets and the share row, then fade into the page */
.stage { position: relative; background: radial-gradient(ellipse 85% 55% at 50% 22%, #1f4782 0%, #0d2552 50%, #081838 100%); }
.stage > * { position: relative; z-index: 1; }
.stage > .stage-bokeh { position: absolute; z-index: 0; }
.stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 0; pointer-events: none; background: linear-gradient(rgba(8, 24, 56, 0), var(--deep)); }
.stage .player-pic { background: none; }
.transport-rest { padding-top: 4px; }
.conv-wrap { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 4px 20px 30px; }
.conv-wrap .interview { margin-top: 8px; }
.globe-box { position: absolute; left: 50%; bottom: 1.5%; height: 95%; aspect-ratio: 600 / 640; transform: translateX(-50%); transform-origin: 50% 92%; cursor: pointer; }
.globe-box.wobble { animation: wobble .6s ease-out; }
@keyframes wobble { 0% { transform: translateX(-50%) rotate(0); } 20% { transform: translateX(-50%) rotate(-2.4deg); } 45% { transform: translateX(-50%) rotate(1.8deg); } 70% { transform: translateX(-50%) rotate(-.9deg); } 100% { transform: translateX(-50%) rotate(0); } }
.globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-front { pointer-events: none; }
#globe-snow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.globe-word { font: 600 15px var(--display); letter-spacing: 7px; fill: #ffffff; }
/* engraved in the silver base: the cut, and the light catching its lower lip; big enough to read on a small globe (her words, 7 Nov: "i cant see that engraving"), in her script ("needs to be cursive") */
.globe-word.globe-etch { font: 400 54px var(--script); letter-spacing: 0; fill: #121822; fill-opacity: .92; }
.globe-word.globe-etch-lip { font: 400 54px var(--script); letter-spacing: 0; fill: #ffffff; fill-opacity: .9; }
/* the play button in the silver foil, like the tickets (her note, 7 Nov: "i think i want the play button to be silver too"); bigger,
   with a bigger triangle (her words, 8 Nov: "make the play button a little bit more obvious. My mother's vision is extremely poor") */
.play {
  flex: none; width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 58%), var(--foil); color: #10295a; display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3), 0 4px 10px rgba(0, 6, 24, .45); animation: beckon 2.6s ease-out infinite;
}
.play:hover, .play:focus-visible { filter: brightness(1.08); }
.play svg { width: 32px; height: 32px; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)); }
.play .pause { display: none; }
.is-playing .play { animation: none; }
.is-playing .play .pause { display: block; }
.is-playing .play .go { display: none; }
@keyframes beckon { 0% { box-shadow: inset 0 0 0 3px rgba(238, 243, 248, .25), 0 0 0 0 rgba(191, 227, 255, .6); } 70% { box-shadow: inset 0 0 0 3px rgba(238, 243, 248, .25), 0 0 0 18px rgba(191, 227, 255, 0); } 100% { box-shadow: inset 0 0 0 3px rgba(238, 243, 248, .25), 0 0 0 0 rgba(191, 227, 255, 0); } }
.transport { max-width: 760px; margin: 0 auto; padding: 38px 20px 46px; }
.track-row { display: flex; align-items: center; gap: 16px; margin: 0 0 4px; }
/* the credit under the title, lined up with it: the names plain, "featuring" in italic ice blue */
.track-credit { margin: 0 0 22px; padding-left: 92px; font: 500 21px/1.35 var(--body); color: var(--text); }
.track-credit i { font-weight: 400; color: var(--ice); padding: 0 .1em; }
.track-line { display: flex; align-items: baseline; gap: 16px; margin: 0; font: inherit; flex-wrap: wrap; }
.track-line .eyebrow { margin: 0; }
.track-name { font: 400 40px/1 var(--script); color: var(--silver-pale); padding: 0 .08em; }
.bar { position: relative; height: 16px; border-radius: 8px; background: rgba(238, 245, 255, .14); cursor: pointer; touch-action: none; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: #c9d3df url(/christmas/silver.webp?v=1) left center / 180px 180px repeat; }
.times { display: flex; justify-content: space-between; margin-top: 8px; font: 400 13px/1 var(--display); letter-spacing: .12em; color: var(--text-dim); }
.player-status { margin: 6px 0 0; min-height: 1.2em; font-size: 16px; color: var(--text-dim); }
.player-status:empty { display: none; }
.transport .from-ep { margin: 22px 0 0; font-size: 20px; color: var(--text); }
.transport .from-ep i { font-style: italic; }
/* Buy, near the top (her note, 7 Nov: "the CTA to buy or purchase is too far in"): the song's line, as on the link picture,
   and two buttons to the box office, the first in the silver foil */
.cta-band { position: relative; z-index: 2; padding: 26px 20px 10px; text-align: center; }
.cta-line { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 16px; }
.cta-title { font: 400 clamp(42px, 5vw, 58px)/1.2 var(--script); padding: 0 .14em; }
.cta-out { font: 600 15px/1 var(--display); letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase; }
.cta-title, .cta-out { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(191, 227, 255, .3)); }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.cta-btns .btn { margin-top: 0; }
/* the silver pills in real bold, dark ink on a calmer foil (her words, 7 Nov: "I think the silver pills are really hard to read",
   "it's hard to tell that it says 48 or 'pre-order the vinyl'") */
.btn.silver { background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%), var(--foil);
  color: #071a3d; border-color: rgba(255, 255, 255, .9); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.btn.line { background: none; box-shadow: none; }
/* The box office (her notes, 7 Nov: "theres tons of different things to click on for buying", "the different tickets should be
   uniform in size", then "i like the fan of tickets and the album spread but it seems like no version includes all options"):
   the album spread with the fan of tickets in front of its record, all three the same size; the one you press moves to the
   middle of the fan, lifted, and its choices open underneath. Tickets keep their notches (her pick, 7 Nov: "ooh i love the ticket design"): the notches are cut
   with a mask, so each ticket's shadow sits on its slot, where the mask can't cut it off. */
.box-office { margin: 30px 0 0; }
/* the album above the tickets, Pick a ticket centred under them (her note, 7 Nov: "album sits above the tickets with pick a ticket centered
   under the ticket"; before that: "next to the record looks crowded") */
.bo-top { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
/* the album bigger, over the tickets (her words, 7 Nov: "Bigger album artwork sitting over the tickets") */
.bo-spread { display: block; width: min(900px, 100%); max-width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(0, 6, 24, .55)); }   /* bigger again (her words: "make the magric of christmas album over the tickets bigger") */
/* the record stays in its sleeve until About Time plays; then the sleeve moves aside, the record comes part of the way out and turns,
   a little slower than 33 1/3 (her words, 7 Nov: "a tiny slower it's really fast and realistic but dizzying"), the shine staying put; it
   stops where it is and slides back when the song stops (her words: "only put the album out of the sleeve all the way when the music is
   actually playing", "also make the roecrd turn inside the holder") */
.bo-spread .sleeve, .bo-spread .rec-slide { transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); }
.is-playing .bo-spread .sleeve { transform: translateX(-18px); }
.is-playing .bo-spread .rec-slide { transform: translateX(42px); }   /* part of the way out, its label showing (her words, 7 Nov: "can the recording only go part of the way out when it starts playing the song?", "a tiny bit less") */
.bo-spread .rec { transform-box: view-box; transform-origin: 300px 104px; animation: rec-turn 2.8s linear infinite paused; }
.is-playing .bo-spread .rec { animation-play-state: running; }
@keyframes rec-turn { to { transform: rotate(360deg); } }
/* the three albums' names under their covers, one column each, lined up with the covers above */
.bo-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(900px, 100%); margin-top: -4px; text-align: center; }
.bo-albums p { margin: 0; display: grid; gap: 4px; align-content: start; padding: 0 2%; }
.bo-albums b { font: 700 13px/1.25 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.bo-albums span { font: italic 500 16px/1.3 var(--body); color: var(--text-dim); }
@media (max-width: 699px) { .bo-albums b { font-size: 10px; letter-spacing: .06em; } .bo-albums span { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .bo-spread .rec { animation: none; } .bo-spread .sleeve, .bo-spread .rec-slide { transition: none; } }
.bo-choose { position: relative; z-index: 1; width: 100%; margin-top: 0; }
/* The tickets on a strip, joined at their perforations, each one the ticket it was: landscape, the stub on the right with the price, a notch
   top and bottom where the stub tears off (her words, 7 Nov: "can you put them on a strip and make them pop up when clicked? like a ticket
   strip?", then "I wanna see it look like a ticket like it did"). The one pressed pops up out of the strip and its choices open underneath.
   The notches are cut with masks that all have to agree (intersect); where two tickets meet, their corner notches make one round notch.
   The shadow is on the strip, where no mask cuts it. When the strip is wider than the column it reaches out past it; when it is wider
   than the screen it scrolls sideways. */
.bo-strip { position: relative; left: 50%; display: flex; width: min(1240px, calc(100vw - 56px)); transform: translateX(-50%); overflow-x: auto;
  padding: 32px 4px 10px; scrollbar-width: none; filter: drop-shadow(0 12px 18px rgba(0, 6, 24, .5)); }
.bo-strip::-webkit-scrollbar { display: none; }
.strip-t { --stub: 80px; position: relative; flex: 0 0 calc((min(1240px, 100vw - 56px) - 8px) / 4); display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); min-height: 146px; margin: 0; padding: 0; border: 0;
  text-align: left; cursor: pointer; font: inherit; color: var(--card-ink); background: linear-gradient(135deg, #f7fafd, #dfe7f0);
  --n: radial-gradient(circle 9px at calc(100% - var(--stub)) 0, #0000 97%, #000), radial-gradient(circle 9px at calc(100% - var(--stub)) 100%, #0000 97%, #000),
       radial-gradient(circle 8px at 0 0, #0000 97%, #000), radial-gradient(circle 8px at 100% 0, #0000 97%, #000),
       radial-gradient(circle 8px at 0 100%, #0000 97%, #000), radial-gradient(circle 8px at 100% 100%, #0000 97%, #000);
  -webkit-mask: var(--n); -webkit-mask-composite: source-in; mask: var(--n); mask-composite: intersect;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.strip-t:first-child { margin-left: auto; }
.strip-t:last-child { margin-right: auto; }
.strip-t + .strip-t::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; border-left: 2px dotted rgba(19, 35, 63, .35); }   /* the perforation */
.strip-t:not([aria-selected="true"]):hover { transform: translateY(-5px); }
.strip-t[aria-selected="true"] { z-index: 2; transform: translateY(-24px) rotate(-2deg) scale(1.04); }
.strip-t:focus-visible { outline: 3px solid var(--ice); outline-offset: 4px; }
.strip-t .t-main { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 12px 12px 13px 18px; border-right: 2px dashed rgba(19, 35, 63, .32); }
.strip-t .t-admit { font: 700 15px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.strip-t .t-name { font: 400 40px/1 var(--script); white-space: nowrap; }
.strip-t .t-name.t-album { font: 700 19px/1.15 var(--display); letter-spacing: .01em; white-space: normal; }
.strip-t .t-name.t-film { font: 700 27px/1.1 var(--display); letter-spacing: .01em; }
.strip-t .t-line { font: 700 14px/1.3 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--card-dim); }
.strip-t .t-stub { display: grid; place-content: center; justify-items: center; gap: 6px; }
.strip-t .t-price { font: 700 28px/1 var(--display); }
.strip-t .t-buy { font: 700 13px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
/* the single's ticket in silver, the film's in the diamond's colours (her note, 7 Nov: "make the first ticket silver, and then you
   could make the third ticket blue metallic, and then you could make the fourth ticket that sort of color you used for the diamond
   ticket"); before that the film's was silver */
.strip-t.silver { background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 52%), var(--foil); }
.strip-t.silver .t-admit, .strip-t.silver .t-buy { color: #1f4f99; }
.strip-t.silver .t-line { color: rgba(19, 35, 63, .78); }
.strip-t.diamond { background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 50%),
  radial-gradient(circle at 78% 70%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 18%),
  linear-gradient(115deg, #f8fbff 0%, #dff1ff 16%, #fbe3f1 30%, #fff4d6 44%, #e0f8e8 58%, #e5e1ff 72%, #f4fbff 86%, #fde8f4 100%); }
.strip-t.diamond .t-admit, .strip-t.diamond .t-buy { color: #4b3c94; }
.strip-t.diamond .t-line { color: rgba(19, 35, 63, .92); }
/* the bundle's ticket in gold, BUNDLE on it (her note, 7 Nov: "make the bunclde ticket say BUNDLE on it and make it gold") */
.strip-t.gold { color: #2c1f06; background: radial-gradient(circle at 24% 16%, rgba(255, 248, 220, .65), rgba(255, 248, 220, 0) 52%), #c9a24a url(/home/foil.webp?v=1) center / 160px 160px repeat; }
.strip-t.gold .t-main, .strip-t.gold::before { border-color: rgba(60, 40, 6, .35); }
.strip-t.gold .t-admit, .strip-t.gold .t-buy { color: #5e3f07; }
.strip-t.gold .t-line { color: rgba(44, 31, 6, .78); }
/* her words, 7 Nov: "its really hard to read the tickets": a soft wash over the printed part of the silver and gold tickets calms the
   crumpled foil behind the letters; the foil still shows round the edges and on the stub */
.strip-t.silver .t-main { background: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)); }
.strip-t.gold .t-main { background: linear-gradient(rgba(255, 246, 222, .56), rgba(255, 246, 222, .56)); }
.strip-t.silver .t-stub { background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)); }   /* and on the stub, 8 Nov */
.strip-t.gold .t-stub { background: linear-gradient(rgba(255, 246, 222, .4), rgba(255, 246, 222, .4)); }
.strip-t.silver .t-line, .strip-t.gold .t-line { color: inherit; }
/* the vinyl in blue metallic (her mock, 19) */
.strip-t.blue { color: #ffffff; text-shadow: 0 1px 1px rgba(0, 10, 40, .35); background: radial-gradient(circle at 26% 18%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, #3f77c9 0%, #24569f 46%, #163a78 100%); }
.strip-t.blue .t-main, .strip-t.blue::before { border-color: rgba(255, 255, 255, .45); }
.strip-t.blue .t-admit, .strip-t.blue .t-buy { color: var(--ice); }
.strip-t.blue .t-line { color: rgba(255, 255, 255, .96); }
/* where the four don't fit at this size, the strip scrolls sideways, as on a phone, rather than shrinking the words (8 Nov) */
@media (max-width: 1119px) {
  .bo-strip { scroll-snap-type: x mandatory; }
  .strip-t { flex-basis: 272px; scroll-snap-align: center; }
}
/* the guide under the strip: an arrow either side of "Pick a ticket"; the other tickets bob once when the box office comes into view */
.bo-pick { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 0; }
.bo-guide { margin: 0; font: 700 14px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.bo-arrow { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0 0 4px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(238, 243, 248, .55); background: rgba(6, 20, 50, .45); color: #ffffff; font: 400 30px/1 var(--body); }
.bo-arrow:hover { background: rgba(191, 227, 255, .18); border-color: rgba(238, 243, 248, .9); }
@keyframes bo-nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -12px; } 80% { translate: 0 -5px; } }
.bo-strip.nudge .strip-t:not([aria-selected="true"]) { animation: bo-nudge 1s ease 2; }
.bo-strip.nudge .strip-t:nth-child(3) { animation-delay: .12s; }
.bo-strip.nudge .strip-t:nth-child(4) { animation-delay: .24s; }
/* the open ticket's choices */
.bo-panel { margin: 14px 0 0; padding: 22px 24px; border-radius: 10px; background: rgba(6, 20, 50, .5); border: 1px solid rgba(191, 227, 255, .2); }
.bo-panel[hidden] { display: none; }
/* what's on the card, centred (her note, 7 Nov: "also center what is on the options card") */
.bo-panel { text-align: center; }
.bo-panel .pick, .bo-pair { justify-content: center; }
.bo-panel .pick legend { width: 100%; text-align: center; }
.bo-line { margin: 0 0 14px; font-size: 19px; line-height: 1.5; color: var(--text); }
.bo-buy { margin-top: 0; }
.bo-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.bo-pair .btn { margin-top: 0; }
.bo-note { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-dim); }
.bo-note[hidden] { display: none; }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tiers form { margin: 0; }
/* the sponsor tiers as tickets in their own metals (her note, 7 Nov: "I think the tickets need to represent film sponsor metals
   also"), all the same size; the whole ticket is the button. The shadow sits on the wrapper, where the notches' mask can't cut it. */
.tier-wrap { height: 100%; filter: drop-shadow(0 10px 16px rgba(0, 6, 24, .5)); }
.tier-t { display: grid; grid-template-columns: minmax(0, 1fr) 112px; width: 100%; height: 100%; min-height: 138px; margin: 0; padding: 0; border: 0;
  border-radius: 8px; text-align: left; cursor: pointer; font: inherit; color: #172238; transition: transform .15s ease;
  -webkit-mask: radial-gradient(circle 9px at calc(100% - 112px) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 9px at calc(100% - 112px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at calc(100% - 112px) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 9px at calc(100% - 112px) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.tier-t:hover { transform: translateY(-2px); }
.tier-t:focus-visible { outline: 3px solid var(--ice); outline-offset: 4px; }
.tier-t .t-main { display: grid; align-content: center; gap: 6px; min-width: 0; padding: 14px 12px 15px 16px; border-right: 2px dashed rgba(23, 34, 56, .3); }
.tier-t .t-admit { font: 700 16px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.tier-t .t-gets { font: 600 19px/1.32 var(--body); }
.tier-t .t-stub { display: grid; place-content: center; justify-items: center; gap: 6px; }
.tier-t .t-price { font: 700 27px/1 var(--display); }
.tier-t .t-buy { font: 700 13px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
/* the metals: her silver foil, her gold foil, platinum paler and cooler, and diamond clear with a little rainbow in it */
.tier-t.silver { background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 52%), var(--foil); }
.tier-t.silver .t-admit, .tier-t.silver .t-buy { color: #1f4f99; }
.tier-t.gold { color: #2c1f06; background: radial-gradient(circle at 24% 16%, rgba(255, 248, 220, .65), rgba(255, 248, 220, 0) 52%), #c9a24a url(/home/foil.webp?v=1) center / 160px 160px repeat; }
.tier-t.gold .t-main { border-right-color: rgba(60, 40, 6, .35); }
.tier-t.gold .t-admit, .tier-t.gold .t-buy { color: #5e3f07; }
.tier-t.platinum { background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 55%),
  linear-gradient(135deg, rgba(252, 253, 255, .9), rgba(226, 230, 242, .82) 40%, rgba(248, 249, 253, .9) 64%, rgba(208, 214, 230, .85)), var(--foil); }   /* smoother and paler than silver */
.tier-t.platinum .t-admit, .tier-t.platinum .t-buy { color: #3b4458; }
.tier-t.diamond { background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 50%),
  radial-gradient(circle at 78% 70%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 18%),
  linear-gradient(115deg, #f8fbff 0%, #dff1ff 16%, #fbe3f1 30%, #fff4d6 44%, #e0f8e8 58%, #e5e1ff 72%, #f4fbff 86%, #fde8f4 100%); }
.tier-t.diamond .t-admit, .tier-t.diamond .t-buy { color: #4b3c94; }
/* the three above Diamond (8 Nov), the same ticket in their own colours: Star in the night blue, Scene in rose gold, Presenting in
   black and gold; and any amount on plain white, with a box for the dollars */
.tier-t.star { color: #ffffff; background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, #2c529f 0%, #183670 50%, #0d214f 100%); }
.tier-t.star .t-main { border-right-color: rgba(255, 255, 255, .4); }
.tier-t.star .t-admit, .tier-t.star .t-buy { color: var(--ice); }
.tier-t.scene { color: #3a1d12; background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, #f6dccf 0%, #e6b39f 50%, #cf9480 100%); }
.tier-t.scene .t-main { border-right-color: rgba(58, 29, 18, .32); }
.tier-t.scene .t-admit, .tier-t.scene .t-buy { color: #6b2f1c; }
.tier-t.presenting { color: #f6e9c4; background: radial-gradient(circle at 24% 16%, rgba(255, 236, 190, .16), rgba(255, 236, 190, 0) 50%), linear-gradient(135deg, #2b251a 0%, #15120c 100%); }
.tier-t.presenting .t-main { border-right-color: rgba(224, 184, 90, .5); }
.tier-t.presenting .t-admit, .tier-t.presenting .t-buy { color: #e6bd5f; }
.tiers .tier-any, .tiers .tier-wide { grid-column: 1 / -1; }   /* Presenting and any amount across the card (8 Nov) */
/* the same soft wash as the strip's tickets behind the words on the crumpled silver and gold (her words, 8 Nov: "It's really hard to see what these tickets say") */
.tier-t.silver .t-main { background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)); }
.tier-t.gold .t-main { background: linear-gradient(rgba(255, 246, 222, .5), rgba(255, 246, 222, .5)); }
.tier-t.any { cursor: default; background: linear-gradient(135deg, #ffffff, #e8eef6); }
.tier-t.any:hover { transform: none; }
.tier-t.any .t-admit { color: #1f4f99; }
.tier-t.any .t-price { font-size: 19px; line-height: 1.1; text-align: center; }
.any-field { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 700 24px/1 var(--display); color: #172238; }
.any-field input { box-sizing: border-box; width: 100%; max-width: 200px; min-height: 48px; margin: 0; padding: 0 12px; border: 2px solid #1f4f99; border-radius: 10px; background: #ffffff;
  color: #172238; font: 700 22px/1 var(--display); }
.any-field input:focus-visible, .any-go:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }
.any-go { min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: #1f4f99; color: #ffffff; cursor: pointer;
  font: 700 13px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; }
/* the four metals in small on the film's ticket in the fan */
.t-metals { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: -1px; }
.t-metals .m { display: block; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(19, 35, 63, .25); }
.t-metals .m.silver { background: var(--foil); }
.t-metals .m.gold { background: #c9a24a url(/home/foil.webp?v=1) center / 40px 40px; }
.t-metals .m.platinum { background: linear-gradient(135deg, #fbfcff, #cfd5e2); }
.t-metals .m.diamond { background: conic-gradient(#ffd6ec, #fff2c9, #d6f7e2, #d9e4ff, #ead6ff, #ffd6ec); }
/* two choices as pills: for me or as a gift, and where the vinyl ships */
.pick { margin: 0 0 16px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pick legend { margin: 0 0 8px; padding: 0; font: 600 12px/1.2 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
.pick label { position: relative; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(238, 243, 248, .45);
  font: 700 15px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); cursor: pointer; }
.pick input:checked + span { background: linear-gradient(#4a86d4, #1f4f99); border-color: rgba(238, 243, 248, .85); color: #ffffff; }
.pick input:focus-visible + span { outline: 3px solid var(--ice); outline-offset: 3px; }
@media (max-width: 699px) {
  .bo-top { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bo-spread { width: 100%; }
  .bo-strip { width: 100vw; scroll-snap-type: x mandatory; padding: 32px 16px 10px; }
  .strip-t { flex-basis: 272px; scroll-snap-align: center; }
  .bo-panel { padding: 18px 16px; }
  .tiers { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tier-t { min-height: 120px; }
}
/* how the song was made, in her words, under the player; then the interview */
.made, .interview { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.made .eyebrow, .interview .eyebrow { margin-bottom: 8px; }
.made p:not(.eyebrow), .interview-line { margin: 0 0 14px; font-size: 20px; line-height: 1.6; color: var(--text); }
.made p:last-child { margin-bottom: 0; }
.made a { color: var(--ice); text-underline-offset: 3px; }
/* Sierra's words in her own voice, set in from the story (7 Nov) */
.made blockquote { margin: 4px 0 18px; padding: 2px 0 2px 18px; border-left: 2px solid var(--silver); }
.made blockquote p:not(.eyebrow) { margin: 0; font-style: italic; color: var(--text); }
/* The long reading on the white card (her note, 7 Nov: "it looks pretty but the visibility is poor reading that"): dark
   ink on paper, bigger type, and the snow stays behind it */
.made.read { position: relative; z-index: 2; margin-top: 30px; padding: 26px 30px 30px; border-top: 0; border-radius: 6px; background: var(--card);
  color: var(--card-ink); box-shadow: 0 18px 40px rgba(0, 6, 24, .45); }
.made.read::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(130, 150, 178, .45); border-radius: 3px; pointer-events: none; }
.made.read .eyebrow { background: none; color: var(--blue); -webkit-text-fill-color: var(--blue); }
.made.read p:not(.eyebrow) { font-size: 21px; line-height: 1.65; color: var(--card-ink); }
.made.read b { font-weight: 600; }
.made.read a { color: var(--blue); }
.made.read blockquote { border-left-color: var(--blue); }
.made.read blockquote p:not(.eyebrow) { color: var(--card-ink); }
/* Dylan and the original inside the story's card (her note, 7 Nov: "the image of dylan and the original version should be
   tucked into the text section"): the snapshot beside the words, the original's player at the end */
.made.read .snapshot.in-story { float: right; width: 230px; margin: 6px 0 16px 26px; }
.made.read .etching { float: left; width: 210px; margin: 4px 26px 12px -6px; }
.made.read .etching img { display: block; width: 100%; height: auto; }
.made.read .original.in-story { clear: both; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid rgba(19, 35, 63, .15); }
.made.read p.original-line:not(.eyebrow) { margin: 0 0 14px; font-size: 19px; }
.made.read p.sierra-credit:not(.eyebrow) { margin: 10px 0 0; font: italic 400 16px/1.4 var(--body); color: var(--card-dim); }
@media (max-width: 600px) {
  .made.read .snapshot.in-story { float: none; width: min(280px, 100%); margin: 8px auto 22px; }
  .made.read .etching { float: none; width: min(220px, 70%); margin: 8px auto 18px; }
}
/* Recommend an artist: the card, and Get in touch opening its form (the guestbook's fields) */
.rec-wrap { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 10px 20px 46px; }
.recommend summary { list-style: none; display: inline-flex; margin-top: 4px; }
.recommend summary::-webkit-details-marker { display: none; }
.recommend details[open] summary { display: none; }
.recommend .gb-form { margin-top: 0; }
.made.read p.rec-note:not(.eyebrow) { margin: 14px 0 16px; font-size: 16px; line-height: 1.5; color: var(--card-dim); }
.made.read p.gb-status:not(.eyebrow) { margin: 14px 0 0; font-size: 17px; }
.made.read p.gb-status.err:not(.eyebrow) { color: #a3261f; }
@media (max-width: 520px) {
  .made.read { padding: 22px 20px 24px; }
  .made.read p:not(.eyebrow) { font-size: 19px; }
}
.interview-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #040c22; border: 1px solid var(--line); border-radius: 6px; }
/* Dylan's photo as a Polaroid (her note, 6 Nov: "polaroid crop on it"): a square crop, thin borders and the deep bottom
   strip with the caption, a little tilted */
.snapshot { margin: 24px auto 4px; width: min(352px, 100%); padding: 18px 18px 0; background: #f7f9fc; border-radius: 2px; box-shadow: 0 16px 34px rgba(0, 0, 0, .4); transform: rotate(-1.5deg); }
.snapshot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 85%; }
.snapshot figcaption { min-height: 84px; display: flex; align-items: center; justify-content: center; padding: 6px 10px 10px; font: 600 11px/1.35 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #10295a; text-align: center; text-wrap: balance; }   /* the caption in the page's capitals (her note: "the previous text was better") */
.interview-still { overflow: hidden; }   /* the Stay tuned still, until her cut is in */
.interview-still svg { height: 100%; }

/* The cards: white on the blue. */
.cards { padding: clamp(30px, 5vw, 70px) 20px clamp(50px, 7vw, 100px); }
.paper-col { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cover { display: block; width: 100%; margin: 0; box-shadow: 0 26px 50px rgba(0, 6, 24, .55), 0 4px 10px rgba(0, 6, 24, .35); }
.cover-art { display: block; width: 100%; height: auto; }
.cover-art .numeral { font: 600 36px var(--display); fill: #1a2b4a; text-anchor: middle; }
.cover-art .cover-title { font: 400 150px var(--script); fill: url(#foil); }
.cover-art .still-title { font: 400 104px var(--deco); letter-spacing: 4px; fill: url(#foil); }   /* Stay tuned, in the capitals (only About Time in the script) */
.cover-art .cover-by { font: 600 30px var(--display); letter-spacing: 10px; fill: #e6f0fa; }
.paper {
  position: relative; background: var(--card); color: var(--card-ink); padding: 30px 30px 32px; border-radius: 6px;
  box-shadow: 0 22px 44px rgba(0, 6, 24, .45), 0 2px 0 rgba(255, 255, 255, .7) inset;
}
.paper::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(130, 150, 178, .45); border-radius: 3px; pointer-events: none; }
.paper + .paper { margin-top: 26px; }
.guestbook::before {   /* a snowflake in the corner */
  content: ''; position: absolute; right: 24px; top: 18px; width: 46px; height: 46px; pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 48 48'%3E%3Cg stroke='%232f6bc0' stroke-width='2.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M0 -22 V22 M-19 -11 L19 11 M-19 11 L19 -11'/%3E%3Cpath d='M-5 -17 L0 -12 L5 -17 M-5 17 L0 12 L5 17 M-17.2 -4.2 L-10.4 -6 L-12.2 -12.8 M17.2 4.2 L10.4 6 L12.2 12.8 M-17.2 4.2 L-10.4 6 L-12.2 12.8 M17.2 -4.2 L10.4 -6 L12.2 -12.8'/%3E%3C/g%3E%3C/svg%3E");
}
/* The tabs under the cover (her note, 6 Nov): Social, Sponsor, Give, Merch, on one blue satin ribbon with silver edges;
   each opens its own drawer under the ribbon, one at a time. */
.tabs { display: flex; margin: 0; background: linear-gradient(#4a86d4, #1f4f99); border-top: 2px solid #c9d3df; border-bottom: 2px solid #c9d3df; }
.tab {
  flex: 1 1 0; margin: 0; padding: 15px 8px 14px; cursor: pointer; text-align: center;
  font: 600 14px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #ffffff;
  background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
}
.tab:first-child { border-left: 0; }
.tab:hover { background: rgba(255, 255, 255, .08); }
.tab[aria-expanded="true"] { background: rgba(4, 12, 34, .3); box-shadow: inset 0 -3px 0 #eef3f8; }
.tab:focus-visible { outline: 2px solid var(--ice); outline-offset: -5px; }
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.drawer.open { grid-template-rows: 1fr; }
.drawer-inner { overflow: hidden; }
.drawer .paper { margin: 0; border-radius: 0; box-shadow: none; border-top: 1px solid rgba(19, 35, 63, .12); }
.drawer + .paper { margin-top: 26px; }
.paper .eyebrow { color: var(--blue); }
.paper p.sub { color: var(--card-dim); }
.paper a { color: var(--blue); }
.paper a.btn, .paper .btn { color: #ffffff; }
.paper h2 { color: #10295a; padding-right: 64px; }
.gb-list { list-style: none; margin: 18px 0 0; padding: 0; }
.gb-list li { padding: 14px 0; border-bottom: 1px solid rgba(19, 35, 63, .12); }
.gb-msg { margin: 0 0 6px; font-size: 19px; line-height: 1.55; color: var(--card-ink); white-space: pre-line; overflow-wrap: anywhere; }
.gb-who { margin: 0; font: 400 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.gb-empty { margin: 14px 0 0; font-size: 16px; color: var(--card-dim); }
.gb-form { margin-top: 22px; }
.gb-form label { display: block; font: 400 12px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--card-dim); margin: 16px 0 8px; }
.gb-form input, .gb-form textarea, .mail-form input[type="email"] {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 18px; color: var(--card-ink);
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(19, 35, 63, .22); border-radius: 12px;
}
.gb-form textarea { min-height: 110px; resize: vertical; }
.gb-hp { position: absolute; left: -9999px; }
.gb-status { margin: 14px 0 0; font-size: 16px; color: var(--card-ink); }
.gb-status.err { color: #a3261f; }
.paper button:focus-visible, .paper input:focus-visible, .paper textarea:focus-visible { outline-color: var(--blue); }
.mail-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.mail-form input[type="email"] { flex: 1 1 240px; width: auto; min-height: 46px; padding: 10px 14px; }
.mail-form .btn { margin-top: 0; }
.mail-note { flex-basis: 100%; margin: 0; min-height: 1.2em; font-size: 16px; color: var(--card-dim); }

/* the sponsor card: the words left, the code right */
.sponsor { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.sponsor-text { flex: 1 1 280px; }
.sponsor-text .sub { margin-bottom: 4px; }
.qr { position: relative; z-index: 1; flex: 0 0 auto; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px #c9d3df, 0 6px 18px rgba(0, 10, 40, .3); }
.qr img { display: block; width: 200px; height: 200px; filter: grayscale(1) brightness(1.15) contrast(1.05); }   /* her code in silver on this page; it still scans */
/* Sierra's card: her album's own Bandcamp player, then the way to buy it */
.sierra .sub { margin-bottom: 14px; }
.sierra .bandcamp { position: relative; z-index: 1; display: block; width: 100%; height: 120px; border: 0; border-radius: 6px; background: #ffffff; }
.sierra .btn { position: relative; z-index: 1; }

/* the EP: the line on the left, the bauble on the right, on the blue itself */
.ep { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; margin-top: 56px; width: min(900px, calc(100vw - 60px)); margin-left: calc(50% - min(450px, 50vw - 30px)); }
.ep-text { flex: 1 1 380px; }
.ep-pic { flex: 1 1 100%; margin: 0; }
.cover .cover-pic { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ep-pic img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 50px rgba(0, 6, 24, .55); }
/* The Star full width, edge to edge (her words, 7 Nov: "and the star image shouls be ful wqidth") */
.ep-pic { flex: 0 0 100vw; width: 100vw; max-width: none; margin-left: calc(50% - 50vw + var(--rail-half, 9px)); margin-right: calc(50% - 50vw - var(--rail-half, 9px)); }   /* the page keeps room on the right for the OTRIQEN rail, so its middle sits half that left of the screen's */
.ep-pic img { border-radius: 0; box-shadow: none; }
/* straight on from the Christmas baubles, no gap (her words, 7 Nov: "no padding above the star") */
.scene.trim + .ep { margin-top: 0; }
.ep-line { margin: 0; font-size: 28px; line-height: 1.45; color: var(--text); }
.ep-art { flex: 0 0 280px; width: 280px; height: auto; transform-origin: 50% 0; animation: sway 6.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* The ornaments: they come down on their ribbons as you scroll, then sway. */
.trim { height: clamp(560px, 62vw, 980px); background: radial-gradient(ellipse 80% 70% at 50% 45%, #1d4480 0%, #0d2552 55%, #040c22 100%); }
.garland-top {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; z-index: 3; pointer-events: none;
  background: 0 0 / 240px 46px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 46'%3E%3Cpath d='M0 4 Q 120 52 240 4' fill='none' stroke='%23d5dde8' stroke-width='6' stroke-dasharray='0.1 11' stroke-linecap='round'/%3E%3Cpath d='M0 4 Q 120 52 240 4' fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='.6'/%3E%3Ccircle cx='0' cy='4' r='7' fill='%234f8fd6'/%3E%3Ccircle cx='240' cy='4' r='7' fill='%234f8fd6'/%3E%3C/svg%3E");
}
.ornaments { position: absolute; inset: 0; z-index: 2; }
.hang { position: absolute; top: 0; margin: 0; translate: -50% 0; transform-origin: 50% 0; will-change: transform, opacity; }
.swing { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.swing::before { content: ''; width: 2px; height: var(--len, 120px); background: linear-gradient(#ffffff, #9fb0c6); box-shadow: 0 0 3px rgba(0, 6, 24, .5); }
.orn-art { display: block; height: auto; filter: drop-shadow(0 18px 18px rgba(0, 6, 24, .45)); overflow: visible; }
.hang.settled .swing { animation: swing 5.6s ease-in-out infinite; animation-delay: var(--sd, 0s); }
@keyframes swing { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.o1 { left: 8%; --len: 110px; --sd: -1.2s; }
.o2 { left: 24%; --len: 300px; --sd: -3.1s; }
.o3 { left: 42%; --len: 54px; --sd: -.4s; }
.o4 { left: 59%; --len: 230px; --sd: -2.2s; }
.o5 { left: 77%; --len: 96px; --sd: -4s; }
.o6 { left: 92%; --len: 320px; --sd: -1.7s; }
.o7 { left: 40%; --len: 360px; --sd: -2.8s; }
.trim-cap { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; margin: 0; z-index: 3; white-space: nowrap; }
.trim-cap .eyebrow { margin: 0; font-size: 18px; filter: brightness(1.2); }

/* The very bottom: the tree, its lights coming on as you reach it; the title; the countdown; the game. */
.home-footer { position: relative; z-index: 1; padding: 0; }
.home-tree { position: relative; z-index: 1; padding: 0 0 26px; }   /* the tree and the countdown, now under the song (8 Nov) */
.game { margin: 0; aspect-ratio: 1916 / 821; background: radial-gradient(ellipse 42% 70% at 50% 62%, rgba(191, 227, 255, .1), rgba(0, 0, 0, 0) 70%); }
.tree-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.tree-art .tb .glow { opacity: 0; transition: opacity .7s ease var(--d); }
.tree-art .tb .core { opacity: .32; transition: opacity .5s ease var(--d); }
.tree-art .tree-glow, .tree-art .top-glow { opacity: 0; transition: opacity 1.6s ease .2s; }
.game.lit .tb .glow { opacity: 1; animation: glow 3.2s ease-in-out infinite; animation-delay: calc(var(--d) + .8s); }
.game.lit .tb .core { opacity: 1; }
.game.lit .tree-glow { opacity: .3; }
.game.lit .top-glow { opacity: .95; }
.mark-wrap { padding: 34px 20px 4px; text-align: center; }
.wm-small .wm-the { font-size: 12px; }
.wm-small .wm-magic { font-size: clamp(40px, 4.9vw, 68px); }
.wm-small .wm-of { font-size: clamp(17px, 2vw, 28px); }
.countdown-wrap { padding: 30px 20px 10px; text-align: center; background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(4, 12, 34, .8), rgba(4, 12, 34, 0)); }
.countdown-wrap > .eyebrow { font-size: clamp(22px, 3vw, 34px); letter-spacing: .26em; margin-bottom: 16px; }
.count-line { margin: 16px 0 0; font-size: 20px; color: var(--text); }
.countdown { display: flex; justify-content: center; gap: clamp(8px, 3vw, 22px); }
.countdown[hidden] { display: none; }
.countdown div { min-width: 64px; }
.countdown b { display: block; font: 400 clamp(34px, 7vw, 56px)/1 var(--display); color: var(--silver-pale); font-variant-numeric: tabular-nums; }
.countdown span { display: block; margin-top: 6px; font: 400 11px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--text-dim); }
.game-line { margin: 34px auto 0; padding-top: 26px; max-width: 520px; border-top: 1px solid var(--line); }
.game-line .game-name { font-size: clamp(15px, 1.7vw, 20px); letter-spacing: .22em; }
.game-line .sub { margin: 0; }
.footer-copyright { max-width: 720px; margin: 0 auto; padding: 30px 20px 48px; text-align: center; background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(4, 12, 34, .8), rgba(4, 12, 34, 0)); }
.fc-brand { margin: 0 0 6px; font: 400 12px/1.3 var(--display); letter-spacing: .2em; color: var(--text-dim); }
.fc-line { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(238, 245, 255, .45); }
.fc-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Give: the promise first, then the mantel, its stockings swaying; one stocking per organisation once her list is in */
.give-promise { margin: 0 0 22px; font-size: 21px; line-height: 1.5; color: var(--card-ink); }
.mantel { position: relative; display: flex; justify-content: space-around; align-items: flex-start; gap: 8px; margin: 4px 0 14px; padding-top: 4px; }
.mantel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 3px; background: #c9d3df url(/christmas/silver.webp?v=1) center / 120px 120px; box-shadow: 0 3px 6px rgba(0, 10, 40, .25); }
.mantel figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.stocking { width: 92px; height: auto; transform-origin: 62% 3%; animation: swing 5.8s ease-in-out infinite; filter: drop-shadow(0 8px 8px rgba(0, 10, 40, .25)); }
.mantel figure:nth-child(2) .stocking { animation-delay: -1.9s; }
.mantel figure:nth-child(3) .stocking { animation-delay: -3.4s; }
.mantel figure:nth-child(4) .stocking { animation-delay: -4.6s; }
.mantel figure:nth-child(5) .stocking { animation-delay: -2.7s; }
/* a stocking that's live: the organisation's own donation page, nothing in between */
.mantel .live a { display: block; border-radius: 8px; }
.mantel .live a:hover .stocking { filter: drop-shadow(0 8px 8px rgba(0, 10, 40, .25)) brightness(1.12); }
.mantel figcaption span { display: block; margin-top: 4px; font: italic 400 14px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--card-dim); }
.mantel figcaption { margin-top: 8px; font: 600 11px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); text-align: center; }

/* The fireplace the stockings hang from (her note, 6 Nov): a white marble face under a shelf with a silver edge, the
   firebox arched and dark, birch logs, the fire in the ice colours with a little gold at its root; then the hearth. */
.fireplace { position: relative; margin: 14px 4px 16px; padding: 22px 12px 0; min-height: 376px; border-radius: 3px 3px 0 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, 0) 60%), linear-gradient(#f2f6fb, #dde6f0);
  box-shadow: inset 0 0 0 1px rgba(130, 150, 178, .4), inset 0 -60px 70px rgba(0, 10, 40, .06); }
.fireplace .shelf { position: absolute; left: -14px; right: -14px; top: 0; height: 18px; border-radius: 3px; background: linear-gradient(#ffffff, #e3eaf3); box-shadow: 0 3px 0 #b9c6d6, 0 7px 12px rgba(0, 10, 40, .2); z-index: 3; }
.fireplace .mantel { z-index: 2; margin: 0; padding-top: 0; }
.fireplace .mantel::before { display: none; }
.firebox { position: absolute; left: 50%; bottom: 20px; width: 48%; height: 118px; transform: translateX(-50%); z-index: 1; overflow: hidden;
  border-radius: 60px 60px 0 0 / 46px 46px 0 0; background: radial-gradient(ellipse 75% 85% at 50% 100%, #1d3f78 0%, #0a1530 55%, #02060f 100%);
  box-shadow: inset 0 0 0 6px #d5dde8, inset 0 0 0 8px #aebbcc, inset 0 -12px 30px rgba(191, 227, 255, .3); }
.fire { position: absolute; left: 6%; right: 6%; bottom: 0; width: 88%; height: 92%; overflow: visible;
  transform-origin: 50% 100%; transform: scale(calc(1 + var(--heat, 0) * .14), calc(1 + var(--heat, 0) * .5)); filter: brightness(calc(1 + var(--heat, 0) * .4)); }   /* --heat: the music, set by christmas.js while it plays */
.fire .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.9s ease-in-out infinite; }
.fire .fl1 { animation-duration: 1.6s; animation-delay: -.4s; }
.fire .fl2 { animation-duration: 1.7s; animation-delay: -.9s; }
.fire .fl3 { animation-duration: 2.1s; }
.fire .fl4 { animation-duration: 1.3s; animation-delay: -.2s; }
@keyframes flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(1.04, 1.09) skewX(-2.5deg); } 50% { transform: scale(.96, .93) skewX(1.8deg); } 75% { transform: scale(1.03, 1.12) skewX(-1.2deg); } }
.fire .fire-glow { animation: halo 2.4s ease-in-out infinite; }
.fire .sp { transform-box: fill-box; animation: spark 2.6s ease-out infinite; opacity: 0; }
.fire .sp2 { animation-delay: -.7s; } .fire .sp3 { animation-delay: -1.4s; } .fire .sp4 { animation-delay: -2s; }
@keyframes spark { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }
.hearth { position: absolute; left: -14px; right: -14px; bottom: 0; height: 20px; border-radius: 2px; background: linear-gradient(#dfe6ef, #b9c6d6); box-shadow: 0 4px 8px rgba(0, 10, 40, .18); z-index: 2; }

/* The stockings are buttons, one per guide (her notes, 6 Nov: "all of them need to be christmas stockings", "Yes, on the
   Give tab"); the chosen one's organisations open under the fireplace, one guide at a time. */
.fireplace { min-height: 312px; }
.fireplace .mantel { justify-content: space-between; gap: 2px; }
.stocking-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0 0 6px; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.stocking-btn .stocking { width: 52px; }
.stocking-btn:nth-child(3n+2) .stocking { animation-delay: -1.9s; }
.stocking-btn:nth-child(3n) .stocking { animation-delay: -3.4s; }
.stocking-btn .cap { font: 600 9.5px/1.25 var(--display); letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--blue); }
.stocking-btn:hover .stocking { filter: drop-shadow(0 8px 8px rgba(0, 10, 40, .25)) brightness(1.1); }
.stocking-btn[aria-expanded="true"] .cap { color: #10295a; text-decoration: underline; text-underline-offset: 3px; }
.stocking-btn[aria-expanded="true"] .stocking { animation-duration: 1.8s; }
.stocking-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Bigger stockings (her note, 6 Nov: "i think the stockings need to be bigger"): two rows on a computer, five on the shelf
   and four on a silver garland across the marble; on a phone, one row of bigger stockings to swipe. */
.fireplace { min-height: 566px; }
.fireplace .mantel { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 4px; row-gap: 0; }
/* five and five since FND Hope's stocking (7 Nov); the second row no longer steps in */
.fireplace .garland2 + .stocking-btn { grid-column: 1 / span 2; }
.fireplace .stocking-btn { grid-column: span 2; }
.fireplace .stocking-btn .stocking { width: 86px; }
.fireplace .stocking-btn .cap { font-size: 11px; letter-spacing: .12em; }
.garland2 { grid-column: 1 / -1; height: 22px; margin: 6px -4px 0;
  background: 0 0 / 120px 22px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M0 4 Q 60 26 120 4' fill='none' stroke='%23aebbcc' stroke-width='5' stroke-dasharray='0.1 9' stroke-linecap='round'/%3E%3Cpath d='M0 4 Q 60 26 120 4' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.7'/%3E%3Ccircle cx='0' cy='4' r='4.5' fill='%234f8fd6'/%3E%3Ccircle cx='120' cy='4' r='4.5' fill='%234f8fd6'/%3E%3C/svg%3E"); }
.give-hint { margin: 4px 0 0; }
.give-hint[hidden] { display: none; }
/* a guide's organisations: each its name, its line, where it is, its own giving page and the QR code to it */
.give-list { margin: 20px 0 0; }
.give-list[hidden] { display: none; }
.give-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.give-head h3 { margin: 0; font: 400 26px/1.2 var(--deco); color: #10295a; }
.give-head p { margin: 0; font-size: 16px; color: var(--card-dim); }
.give-line { margin: 0 0 12px; font-size: 18px; line-height: 1.5; color: var(--card-ink); }
.orgs { display: grid; gap: 12px; }
.org { display: grid; grid-template-columns: 1fr 88px; column-gap: 14px; align-items: start; padding: 14px 14px 16px 16px; border-radius: 8px; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(130, 150, 178, .35); }
.org > * { grid-column: 1; }
.org-name { margin: 0; font: 600 15px/1.3 var(--display); letter-spacing: .04em; color: #10295a; }
.org-desc { margin: 4px 0 0; font-size: 17px; line-height: 1.45; color: var(--card-ink); }
.org-hq { margin: 4px 0 0; font-size: 14px; color: var(--card-dim); }
.org-give { justify-self: start; display: inline-flex; margin-top: 10px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(#4a86d4, #1f4f99); color: #ffffff !important; font: 600 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.org-give:hover { filter: brightness(1.1); }
.org .org-qr { grid-column: 2; grid-row: 1 / span 4; width: 88px; height: 88px; }
.org-qr svg { display: block; width: 100%; height: 100%; }
.help-lines { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.help-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 8px; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(130, 150, 178, .35); }
.help-lines span { font: 600 13px/1.3 var(--display); letter-spacing: .06em; color: #10295a; }
.help-lines a { font-size: 17px; color: var(--blue); }

/* the site menu's button (site-menu/menu.js) in silver on this page */
.otq-menu-btn { background: linear-gradient(#081838, #081838) padding-box, url(/christmas/silver.webp?v=1) center / 120px 120px border-box !important; }
.otq-menu-btn span { background: #c9d3df url(/christmas/silver.webp?v=1) center / 80px 80px !important; }

/* Tablets */
@media (max-width: 1100px) {
  .ep { justify-content: center; }
  .sponsor { justify-content: center; }
}
/* Below 917px (where 48vw would drop under 440px) the hero takes the picture's own shape, so the whole picture shows
   with the star, lights, trees and title where they are on a computer (her note, 6 Nov: "adjust the responsiveness so
   the whole image shows on the mobile") */
@media (max-width: 916px) {
  .hero { height: auto; aspect-ratio: 1600 / 720; }
}

/* Phones */
@media (max-width: 699px) {
  html, body { font-size: 18px; }
  p.sub { font-size: 18px; }
  body { padding-right: 14px; --rail-half: 7px; }
  #scrollbar-track { width: 14px; }
  #scrollbar-thumb { width: 10px; }
  #scrollbar-label { display: none; }
  #app-header { padding: 14px 16px 8px; }
  .hero-title { top: 35%; }
  .wm-hero .wm-magic { font-size: 8.2vw; }
  .wm-hero .wm-of { font-size: 3.3vw; }
  .wm-hero .wm-the { font-size: 2.4vw; }
  .wm-magic { font-size: 16.4vw; }
  .wm-of { font-size: 6.6vw; }
  .wm-the { font-size: 3.2vw; }
  .player-pic { aspect-ratio: auto; height: 100vw; }
  .globe-box { height: 92%; }
  .transport { padding: 18px 16px 34px; }
  .track-line { gap: 6px 12px; }
  .track-name { font-size: 36px; }
  .track-credit { font-size: 19px; }
  .tab { font-size: 12px; letter-spacing: .1em; padding: 14px 2px 13px; }
  .stocking { width: 50px; }
  .mantel { gap: 2px; }
  .mantel figure { flex: 1 1 0; min-width: 0; }
  .mantel figcaption { font-size: 8.5px; letter-spacing: .06em; }
  .mantel figcaption span { font-size: 11px; }
  .give-promise { font-size: 19px; }
  .fireplace { min-height: 318px; }
  .fireplace .mantel { display: flex; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
  .garland2 { display: none; }
  .fireplace .mantel::-webkit-scrollbar { display: none; }
  .fireplace .stocking-btn { flex: 0 0 84px; scroll-snap-align: start; }
  .fireplace .stocking-btn .stocking { width: 72px; }
  .fireplace .stocking-btn .cap { font-size: 10px; letter-spacing: .08em; }
  .org { grid-template-columns: 1fr 64px; padding: 12px 12px 14px 14px; }
  .org .org-qr { width: 64px; height: 64px; }
  .give-head h3 { font-size: 22px; }
  .fireplace { min-height: 352px; padding: 20px 4px 0; margin: 12px 6px 14px; }
  .firebox { width: 62%; height: 92px; }
  .cards { padding: 26px 16px 50px; }
  .paper { padding: 24px 20px 26px; }
  .guestbook::before { width: 36px; height: 36px; right: 18px; top: 16px; }
  .paper h2 { padding-right: 46px; }
  .sponsor { text-align: center; }
  .sponsor-text .btn { margin-top: 18px; }
  .ep { justify-content: center; width: auto; margin-left: 0; gap: 18px; text-align: center; }
  .ep-line { font-size: 23px; }
  .ep-art { flex-basis: auto; width: 190px; }
  .trim { height: 165vw; }
  .hang { scale: .56; }
  .o1 { left: 13%; --len: 90px; }
  .o2 { left: 38%; --len: 360px; }
  .o3 { left: 62%; --len: 40px; }
  .o4 { left: 86%; --len: 260px; }
  .o5 { left: 18%; --len: 640px; }
  .o6 { left: 68%; --len: 700px; }
  .o7 { left: 52%; --len: 700px; }
  .trim-cap { left: 50%; translate: -50% 0; bottom: 3%; }
  .trim-cap .eyebrow { font-size: 14px; letter-spacing: .24em; }
  .game { aspect-ratio: auto; height: 96vw; }
  .tree-art { width: 255%; left: 50%; translate: -50% 0; }
  .mark-wrap { padding: 26px 16px 4px; }
  .wm-small .wm-magic { font-size: 12.5vw; }
  .wm-small .wm-of { font-size: 5vw; }
  .countdown-wrap { padding: 24px 16px 10px; }
  .countdown div { min-width: 54px; }
  .countdown-wrap > .eyebrow { font-size: 21px; letter-spacing: .22em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* the silver foil on the silver words; on the white cards the words stay blue */
.eyebrow, .countdown b, .track-name, #scrollbar-label, .wordmark > span {
  background: var(--foil);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.paper .eyebrow { background: none; color: var(--blue); -webkit-text-fill-color: var(--blue); }

/* The Holiday Shop: Chris Jordan's collection, two pieces to a row; a swatch shows the piece in that colour */
.shop h2 { margin-bottom: 6px; }
.shop .shop-note { position: relative; z-index: 1; margin: 12px 0 0; font: 600 12px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
/* the picture turns over to show the back (her note, 6 Nov: "have the image flip over to see the back of it there") */
.shop .shop-links { position: relative; z-index: 1; margin: 12px 0 0; }
.shop .shop-link { font: 600 12px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); text-underline-offset: 4px; }
/* one tee, picture beside its details (her note: "just one tee and the link to the portal/shop") */
.shop .shop-links { margin-top: 22px; }
/* the button to hear him, made obvious: filled blue, a speaker, the words in full */
/* Chris Jordan's sponsor card: his Patreon */
.chris .sub { margin-bottom: 14px; }
.chris .btn { position: relative; z-index: 1; }
.chris .prints { position: relative; z-index: 1; margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--card-dim); }
/* the small words made bigger and darker (her notes, 6 Nov: "its hard to see the caption", "too small") */
.shop .shop-note, .shop .shop-link { font-size: 13px; }
.chris .prints { font-size: 20px; color: #33496f; }
/* long lines in the reading face, in sentence case; capitals stay for the short labels (her note, 6 Nov: "the font is not
   the best") */
.shop .shop-link { font: 600 20px/1.45 var(--body); letter-spacing: 0; text-transform: none; }
.shop .shop-note { font: italic 400 19px/1.4 var(--body); letter-spacing: 0; text-transform: none; color: #33496f; }
@media (max-width: 699px) {
  .shop .shop-link { font-size: 18px; }
}
/* Sierra's card as one section, like Ashley Elizabeth's: words and buttons beside the code, the album player across */
.sierra .sierra-btns { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.sierra .bandcamp { flex: 1 1 100%; }
@media (max-width: 699px) {
  .sierra .sierra-btns { justify-content: center; }
  .sierra .sierra-btns .btn { margin-top: 10px; }
}
/* Sierra's photo as the artwork beside her song, her album's player beside it */
.sierra .sierra-player { position: relative; z-index: 1; flex: 1 1 100%; display: flex; align-items: stretch; overflow: hidden; border-radius: 6px; background: #ffffff; box-shadow: 0 0 0 1px rgba(130, 150, 178, .35); }
.sierra .sierra-art { flex: none; display: block; width: 120px; height: 120px; object-fit: cover; }
.sierra .sierra-player .bandcamp { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.sierra .sierra-credit { position: relative; z-index: 1; flex: 1 1 100%; margin: -14px 0 0; font: italic 400 15px/1.4 var(--body); color: var(--card-dim); }
/* the 2011 video under her player */
.sierra .sierra-video { position: relative; z-index: 1; flex: 1 1 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000000; }
.sierra .sierra-video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* the Support tab: one heading, then the four artists in matching cards (her notes, 6 Nov) */
.support-title { margin: 34px 0 22px; text-align: center; font: 400 clamp(26px, 3.4vw, 34px)/1.2 var(--display); letter-spacing: .08em; color: var(--silver-pale); }
.paper .artist-btns { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.chris .sub a { position: relative; z-index: 1; }
@media (max-width: 699px) {
  .paper .artist-btns { justify-content: center; }
  .paper .artist-btns .btn { margin-top: 10px; }
  .artist-music { text-align: center; }
}
/* Sierra's original under her story, moved up from her Support card (her "ok", 6 Nov) */
.original { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.original .eyebrow { margin-bottom: 8px; }
.original-line { margin: 0 0 14px; font-size: 20px; line-height: 1.6; color: var(--text); }
.original .sierra-player { display: flex; align-items: stretch; overflow: hidden; border-radius: 6px; border: 1px solid var(--line); background: #0a1d42; }
.original .sierra-art { flex: none; display: block; width: 120px; height: 120px; object-fit: cover; }
.original .bandcamp { flex: 1 1 auto; min-width: 0; display: block; height: 120px; border: 0; }
.original .sierra-video { margin-top: 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; border: 1px solid var(--line); background: #000000; }
.original .sierra-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.original .sierra-credit { margin: 10px 0 0; font: italic 400 16px/1.4 var(--body); color: var(--text-dim); }
@media (max-width: 699px) {
  .original-line { font-size: 18px; }
  .original .sierra-art { width: 96px; height: 120px; }
}
/* Chris Jordan's card: his print whole across the top, the wings hoodie beside his words (her note, 6 Nov) */
.chris .chris-print { position: relative; z-index: 1; flex: 1 1 100%; margin: 0; }
.chris .chris-print img { display: block; width: 100%; height: auto; }
.chris .chris-print figcaption { margin: 10px 0 0; font: italic 400 17px/1.4 var(--body); color: var(--card-dim); text-align: center; }

/* the Support cards' actions as words with an arrow, in the reading face (her pick, 6 Nov: "i dont like the buttons", then
   "1" on dev/christmas-buttons.html) */
.paper .link-arrow { position: relative; z-index: 1; color: var(--blue); text-decoration: none; font: 600 20px/1.3 var(--body); border-bottom: 1px solid rgba(47, 107, 192, .45); padding-bottom: 1px; }
.paper .link-arrow:hover { border-bottom-color: var(--blue); }
.paper .artist-btns { gap: 10px 24px; margin-top: 6px; }
@media (max-width: 699px) { .paper .artist-btns .link-arrow { margin-top: 6px; } }
/* a portrait beside each artist's name, the two at the top of each card (her notes, 6 Nov: "i need a portrait next to each
   artist", "format should be artist name and photo at top. make them a big bigger") */
.paper .artist-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin: 0 0 14px; }
.sponsor .artist-head { flex: 1 1 100%; margin: 0 0 -8px; }
.paper .artist-head .eyebrow { margin: 0; font-size: 16px; letter-spacing: .26em; }
/* a tall frame, so each photo shows as wide as it goes, nothing added past its edges ("zoom out more") */
/* the portraits in a silver foil frame, like the tab ribbon, at the bigger size (her picks, 6 Nov: "4", "or 8?", from
   dev/portrait-crops.html; 9 is 8 at the size of 4): 136 x 170 px inside 6 px of foil */
.paper .artist-portrait { flex: none; width: 148px; height: 182px; padding: 6px; background: var(--foil); object-fit: cover; box-shadow: 0 0 0 1px rgba(16, 41, 90, .18), 0 6px 12px rgba(8, 24, 56, .2); }
@media (max-width: 699px) { .paper .artist-head { flex-direction: column; gap: 10px; text-align: center; } }

/* the Holiday Shop as strips of cards, two at a time with arrows at the sides (her pick, 6 Nov: "1"); one and a bit on a phone,
   to swipe. Hear Chris is a round button on the picture that keeps its size while he speaks. */
.shop .strip { position: relative; z-index: 1; margin-top: 26px; }
.shop .strip-kind, .chris .strip-kind { margin: 0; font: 600 11px/1.2 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
.shop .strip-title, .chris .strip-title { margin: 2px 0 14px; font: 600 24px/1.2 var(--body); color: #10295a; }
.shop .strip-row { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 6px; }
.shop .strip-row::-webkit-scrollbar { display: none; }
.shop .card { flex: 0 0 calc((100% - 14px) / 2); min-width: 0; scroll-snap-align: start; }
.shop .pic { position: relative; aspect-ratio: 1 / 1; perspective: 1200px; }
.shop .card3d { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.shop .pic.over .card3d { transform: rotateY(180deg); }
.shop .card3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; background: #eef2f7; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.shop .card3d img.b { transform: rotateY(180deg); }
.shop .turn { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 5px 11px; border: 0; border-radius: 999px; background: rgba(8, 24, 56, .76); color: #ffffff; font: 600 14px/1.2 var(--body); cursor: pointer; }
.shop .hearo { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(#4a86d4, #1f4f99); color: #ffffff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(16, 41, 90, .35); }
.shop .hearo svg { width: 22px; height: 22px; }
.shop .hearo .stop, .shop .hearo[aria-pressed="true"] .spk { display: none; }
.shop .hearo[aria-pressed="true"] .stop { display: block; }
.shop .hearo[aria-pressed="true"]::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(74, 134, 212, .7); animation: hearo-ring 1.2s ease-out infinite; }
@keyframes hearo-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.shop .turn:focus-visible, .shop .hearo:focus-visible, .shop .dot:focus-visible, .shop .strip-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.shop .meta { padding: 10px 2px 0; }
.shop .kind { margin: 0; font: 600 10.5px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.shop .name { margin: 2px 0 8px; font: 600 18px/1.25 var(--body); color: #10295a; }
.shop .dots { display: flex; flex-wrap: wrap; gap: 6px; }
.shop .dot { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid rgba(16, 41, 90, .35); background: var(--c); cursor: pointer; }
.shop .dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #f7f9fc, 0 0 0 3.5px var(--blue); }
.shop .strip-arrow { position: absolute; z-index: 3; top: 40%; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(47, 107, 192, .5); background: #ffffff; color: var(--blue); font: 600 19px/1 var(--body); cursor: pointer; box-shadow: 0 4px 12px rgba(16, 41, 90, .2); }
.shop .strip-prev { left: -16px; }
.shop .strip-next { right: -16px; }
.shop .strip-arrow:disabled { opacity: 0; pointer-events: none; }
.shop .strip-count { margin: 10px 0 0; text-align: center; font: 500 16px/1.2 var(--body); color: var(--card-dim); }
@media (max-width: 699px) {
  .shop .card { flex-basis: 78%; }
  .shop .strip-arrow { display: none; }
  .shop .strip-title, .chris .strip-title { font-size: 21px; }
  .shop .name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .shop .card3d { transition: none; } .shop .hearo[aria-pressed="true"]::after { animation: none; } }

/* a short bio under each artist's name (her note, 6 Nov: "i think thre needs to be a short bio under his name same with all of us") */
.paper .artist-id { min-width: 0; }
.paper .artist-bio { margin: 6px 0 0; font: 400 16px/1.4 var(--body); color: var(--card-dim); }
.paper .artist-bio a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 699px) { .paper .artist-bio { text-align: center; } }

/* the apparel as a collage of Polaroids on Chris Jordan's card (her notes, 6 Nov: "need a cool colllage of polaroids under his
   image", "i mean of the apparel"), tilted and overlapping a little, like the snapshot of Dylan */
.chris .collection { position: relative; z-index: 1; flex: 1 1 100%; margin-top: 18px; text-align: center; }
.chris .strip-title { margin-bottom: 6px; }
.chris .polaroids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 0; padding: 8px 8px 0; }
.chris .polaroid { position: relative; margin: 0 -4px; padding: 6px 6px 0; background: #ffffff; box-shadow: 0 8px 18px rgba(8, 24, 56, .28); transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); transition: transform .3s ease; }
.chris .polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; outline: 1px solid rgba(16, 41, 90, .1); outline-offset: -1px; }   /* the line keeps a white backdrop apart from the frame */
.chris .polaroid figcaption { padding: 6px 2px 8px; font: 600 9.5px/1.25 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #10295a; text-align: center; }
.chris .polaroid:nth-child(1) { --r: -5deg; --y: 6px; }
.chris .polaroid:nth-child(2) { --r: 3deg; --y: -4px; z-index: 1; }
.chris .polaroid:nth-child(3) { --r: -2deg; --y: 8px; }
.chris .polaroid:nth-child(4) { --r: 4deg; --y: -2px; }
.chris .polaroid:nth-child(5) { --r: -3deg; --y: 6px; z-index: 1; }
.chris .polaroid:nth-child(6) { --r: 5deg; --y: -3px; }
.chris .polaroid:nth-child(7) { --r: 2deg; --y: 5px; }
.chris .polaroid:nth-child(8) { --r: -4deg; --y: -3px; z-index: 1; }
.chris .polaroid:nth-child(9) { --r: 3deg; --y: 7px; }
.chris .polaroid:nth-child(10) { --r: -2deg; --y: -2px; }
.chris .polaroid:nth-child(11) { --r: 4deg; --y: 5px; z-index: 1; }
.chris .polaroid:nth-child(12) { --r: -3deg; --y: -4px; }
.chris .polaroid:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
.chris .polaroids-shop { position: relative; z-index: 1; flex: 1 1 100%; margin: 4px 0 0; text-align: center; }
@media (max-width: 699px) {
  .chris .polaroids { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 0; padding: 6px 4px 0; }
  .chris .polaroid { margin: 0 -3px; padding: 5px 5px 0; }
  .chris .polaroid figcaption { padding: 5px 1px 6px; font-size: 8px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .chris .polaroid { transition: none; } }

/* Share links under the ticket (her words, 7 Nov: "we also need share links") */
.transport .share { margin: 18px 0 0; }
.share-label { margin: 0 0 8px; font: 600 12px/1.2 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(238, 243, 248, .45); background: none;
  color: var(--text); font: 600 11.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.share-pill[hidden] { display: none; }
.share-pill:hover { border-color: var(--ice); }
.share-pill.main { background: linear-gradient(#4a86d4, #1f4f99); border-color: rgba(238, 243, 248, .85); color: #ffffff; }
.share-status { min-height: 1.3em; margin: 8px 0 0; font-size: 17px; color: var(--ice); }

/* Listen with the snow globe (her words, 8 Nov: "when they click the listen button ... they'll be able to like watch the snow globe turn on the screen while they listen to just the song"): like the Theatre's Listen, a full-screen player; the snow globe moves in from
   the player picture, keeping its own place inside .lv-art (the wobble keeps its centring), and goes back when it closes */
.listen-full { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 2px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(238, 243, 248, .85);
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%), var(--foil);
  color: #071a3d; font: 700 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); cursor: pointer; }
.listen-full svg { width: 16px; height: 16px; }
.listen-full:focus-visible, .lv-close:focus-visible, .lv-play:focus-visible, .lv-seek:focus-visible, .lv-bar:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }
html.listening { overflow: hidden; }
.listen-view { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom)); color: var(--text);
  background: radial-gradient(ellipse 80% 70% at 50% 38%, #1f4782 0%, #0d2552 55%, #040c22 100%); }
.listen-view[hidden] { display: none; }
.lv-close { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(3, 10, 28, .35); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.lv-art { position: relative; flex: none; width: 100%; max-width: 900px; height: min(70svh, 110vw, 900px); }   /* bigger (her words, 8 Nov: "too small") */
.lv-title { margin: 6px 0 0; font: 600 clamp(24px, 5.5vw, 34px)/1.15 var(--display); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.lv-artist { margin: 0 0 8px; font: 500 clamp(17px, 4vw, 20px)/1.3 var(--body); color: var(--text-dim); text-align: center; }
.lv-bar { width: min(100%, 420px); margin: 6px 0 0; accent-color: var(--silver-pale); cursor: pointer; }
.lv-times { display: flex; justify-content: space-between; width: min(100%, 420px); font: 500 15px/1 var(--body); color: var(--text-dim); }
.lv-controls { display: flex; align-items: center; gap: clamp(22px, 7vw, 40px); margin-top: 6px; }
.lv-seek { position: relative; width: 52px; height: 52px; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.lv-seek svg { width: 40px; height: 40px; }
.lv-seek span { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); font: 700 10px/1 var(--display); }
.lv-play { width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9); color: #10295a; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 58%), var(--foil); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3), 0 4px 12px rgba(0, 6, 24, .5); }
.lv-play svg { width: 30px; height: 30px; fill: currentColor; }
.lv-play .pause, .listen-view.is-playing .lv-play .go { display: none; }
.listen-view.is-playing .lv-play .pause { display: block; }

/* Sierra's own page, easy to find from the homepage (her note, 8 Nov 2026: "the homepage also needs a remarkable link to Sierra's page"):
   her ice-cave photo full width with a silver edge, then her name and one button; the whole card is the link */
.meet-artist { display: block; margin: 34px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; text-align: center; }
.meet-artist img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 848; object-fit: cover; border-radius: 10px; margin-bottom: 18px;
  box-shadow: 0 0 0 1px rgba(201, 211, 223, .6), 0 18px 40px rgba(0, 4, 18, .55); transition: filter .2s; }
.meet-artist .eyebrow { display: block; }
.meet-artist .meet-name { display: block; font: 600 clamp(30px, 5vw, 44px)/1.1 var(--display); letter-spacing: .04em; }
.meet-artist .meet-line { display: block; margin: 8px auto 0; max-width: 560px; font-size: 19px; line-height: 1.5; color: var(--text-dim); }
.meet-artist .btn { margin-top: 16px; }
.meet-artist:hover img { filter: brightness(1.06); }