/* Through the screen · overlays only; everything else is WebGL */
:root {
  color-scheme: dark;
  --ink: #f3efe7; --ink-2: #b9b2a6; --ink-3: #7a746a; --ember: #ffb45e;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); overscroll-behavior: none; }
body { font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* ---------- start ---------- */
#start { position: fixed; inset: 0; z-index: 40; background: #000; display: grid; place-content: center; justify-items: center; gap: 1.4rem; text-align: center; padding: 0 20px; }
.ember { width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 30px 8px rgba(255, 180, 94, 0.45); animation: breathe 2.6s ease-in-out infinite; margin-bottom: 2.2rem; }
@keyframes breathe { 50% { transform: scale(1.35); box-shadow: 0 0 46px 12px rgba(255, 180, 94, 0.32); } }
#start h1 { margin: 0; font: 300 clamp(2.4rem, 6vw, 4.4rem)/1 var(--serif); letter-spacing: 0.01em; }
#start .dates { margin: 0; font: 600 0.8rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 0 14px #000, 0 0 4px #000; }
#start .since { margin: -0.2rem 0 0; font: italic 400 clamp(1.15rem, 2.4vw, 1.5rem)/1.3 var(--serif); color: var(--ink); text-shadow: 0 0 16px #000, 0 0 5px #000; }
.load { width: 140px; height: 1px; background: rgba(255, 255, 255, 0.12); margin-top: 1.8rem; overflow: hidden; }
.load i { display: block; height: 100%; background: var(--ember); transform-origin: left; transform: scaleX(0); transition: transform 0.4s; }
.go { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-top: 0.4rem; opacity: 0; pointer-events: none; transition: opacity 0.8s; }
#start.ready .go { opacity: 1; pointer-events: auto; }
#start.ready .load { opacity: 0; transition: opacity 0.6s; }
#go-sound { border: 1px solid rgba(255, 180, 94, 0.55); background: rgba(255, 180, 94, 0.08); color: var(--ember); border-radius: 99px; padding: 0.95rem 1.8rem; cursor: pointer; font: 600 0.74rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; transition: background 0.3s, box-shadow 0.3s; }
#go-sound:hover { background: rgba(255, 180, 94, 0.16); box-shadow: 0 0 40px rgba(255, 180, 94, 0.25); }
#go-silent { border: 0; background: none; cursor: pointer; color: var(--ink-3); font: 600 0.64rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; padding: 0.6rem; }
#go-silent:hover { color: var(--ink); }
.phones { margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.08em; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud > * { pointer-events: auto; }
#snd { position: absolute; right: clamp(16px, 3vw, 36px); top: calc(env(safe-area-inset-top, 0px) + 16px); display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 99px; padding: 0.42rem 0.75rem; cursor: pointer; font: 600 0.58rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); backdrop-filter: blur(6px); }
#snd i { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
#snd i b { width: 2px; height: 30%; background: currentColor; }
#snd.on i b { animation: eq 0.9s ease-in-out infinite alternate; }
#snd i b:nth-child(2) { animation-delay: -0.3s; } #snd i b:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { from { height: 25%; } to { height: 100%; } }
#year { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 7vh); margin: 0; text-align: center; font: 300 0.9rem/1 var(--sans); letter-spacing: 0.34em; color: rgba(243, 239, 231, 0.78); text-transform: uppercase; opacity: 0; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
#words { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font: 300 clamp(1.8rem, 4.6vw, 4.2rem)/1.15 var(--serif); color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); }
#words small { display: block; margin-top: 1.2rem; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.36em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
#words b { font-weight: 300; }
#words q { quotes: "“" "”"; font-style: italic; font-size: 0.72em; }
#words .ow { opacity: 0; transition: opacity 1.6s ease; }
#words .ow.on { opacity: 1; }
#cap { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 11vh); transform: translateX(-50%); width: min(88vw, 900px); margin: 0; text-align: center; font: 400 clamp(1.05rem, 1.9vw, 1.6rem)/1.35 var(--sans); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 2px #000; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
#cap.on { opacity: 1; }
#cap span { opacity: 0.25; transition: opacity 0.25s; }
#cap span.lit { opacity: 1; }
#hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 600 0.62rem/1.2 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); opacity: 0; transition: opacity 0.6s; text-shadow: 0 1px 8px #000; white-space: nowrap; pointer-events: none; }
#hint.on { opacity: 1; pointer-events: auto; }
#hint.ask { color: var(--ember); }
#hint svg { width: 14px; height: 14px; animation: nudge 1.8s ease-in-out infinite; }
#hint.ask svg { display: none; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* ---------- slide to light a candle ---------- */
#candle-ctl { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 9vh); transform: translateX(-50%); z-index: 25; width: min(380px, 86vw); height: 66px; border-radius: 16px; padding: 6px; background: linear-gradient(#171615, #0d0c0b); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.6); }
#candle-ctl span { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 72px; pointer-events: none; font: 400 1.14rem/1 var(--sans); background: linear-gradient(90deg, #5c5853 0%, #5c5853 40%, #f6efe2 50%, #5c5853 60%, #5c5853 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.8s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
#candle-ctl button { position: relative; z-index: 2; width: 78px; height: 54px; border: 0; border-radius: 11px; padding: 0; display: grid; place-items: center; cursor: grab; touch-action: none; background: linear-gradient(#fdfdfd, #cfd1d4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 #fff; }
#candle-ctl svg { width: 26px; height: auto; }

@media (prefers-reduced-motion: reduce) { .ember, #hint svg, #candle-ctl span { animation: none; } }
#words .adl { display: block; font: 300 clamp(1.1rem, 2.3vw, 2rem)/1.4 var(--sans); letter-spacing: 0.01em; }
#words .adl + .adl { margin-top: 0.6rem; }

/* ---------- start: his portrait in embers ---------- */
#start { display: block; }
#intro { position: absolute; inset: 0; width: 100%; height: 100%; }
.start-copy { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6vh); display: grid; justify-items: center; gap: 0.9rem; text-align: center; padding: 0 20px; transition: opacity 0.8s; }
.start-copy::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6vh; height: 42vh; z-index: -1; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.88) 55%); pointer-events: none; }
#start h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
#start .go { margin-top: 0.2rem; }
#start .load { margin-top: 0.8rem; }
#start.going .start-copy { opacity: 0; pointer-events: none; }
.start-copy { z-index: 1; }   /* its dark fade sits over the portrait, under the words */

/* ---------- progress ---------- */
#progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, 0.06); pointer-events: none; }
#progress i { display: block; height: 100%; background: var(--ember); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); box-shadow: 0 0 8px var(--ember); }

/* ---------- play his voice ---------- */
#playcard { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 7vh); transform: translateX(-50%); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.4rem 1.1rem; padding: 1rem 1.5rem 1rem 1rem; border-radius: 22px; background: rgba(10, 9, 8, 0.62); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); width: max-content; max-width: min(92vw, 560px); }
#play-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--ember); color: #1b1208; box-shadow: 0 0 0 6px rgba(255, 180, 94, 0.14), 0 0 34px rgba(255, 180, 94, 0.45); animation: ring 2.4s ease-in-out infinite; grid-row: span 2; }
#play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
@keyframes ring { 50% { box-shadow: 0 0 0 12px rgba(255, 180, 94, 0.06), 0 0 50px rgba(255, 180, 94, 0.55); } }
.pc-label { margin: 0; font: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.25 var(--serif); color: #fff; }
.pc-meta { margin: 0; font: 600 0.62rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.pc-or { grid-column: 1 / -1; justify-self: center; margin-top: 0.4rem; border: 0; background: none; cursor: pointer; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); padding: 0.3rem; }
.pc-or:hover { color: var(--ink); }
#skip { position: absolute; right: clamp(16px, 3vw, 36px); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.4); border-radius: 99px; padding: 0.55rem 1rem; cursor: pointer; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); backdrop-filter: blur(6px); }
#skip:hover { color: var(--ink); }

/* ---------- gestures ---------- */
#gate { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 9vh); transform: translateX(-50%); display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.4rem 0.9rem 1rem; border-radius: 99px; background: rgba(10, 9, 8, 0.6); border: 1px solid rgba(255, 180, 94, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; white-space: nowrap; }
.gate-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ember); box-shadow: 0 0 12px var(--ember); animation: ring2 1.4s ease-out infinite; }
@keyframes ring2 { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.gate-text { font: 600 0.8rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.pulse { animation: pulse 0.6s var(--ease); }
@keyframes pulse { 30% { transform: translateX(-50%) scale(1.08); } }
#skip.pulse { animation: nudge 0.7s var(--ease); border-color: var(--ember); color: #fff; }
@keyframes nudge { 30% { transform: scale(1.12); box-shadow: 0 0 22px rgba(255, 180, 94, 0.55); } }
body.aim, body.aim #gl { cursor: crosshair; }
#reticle { position: fixed; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1.5px solid rgba(255, 180, 94, 0.9); box-shadow: 0 0 14px rgba(255, 180, 94, 0.6), inset 0 0 10px rgba(255, 180, 94, 0.3); pointer-events: none; z-index: 30; opacity: 0; transition: opacity 0.3s; }
body.aim #reticle { opacity: 1; }
#reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--ember); }

/* ---------- callouts on the workbench ---------- */
#callout { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s; }
#callout.on { opacity: 1; }
.co-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.co-line line { stroke: rgba(255, 190, 120, 0.7); stroke-width: 1; }
.co-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px rgba(255, 180, 94, 0.18), 0 0 16px var(--ember); }
.co-box { position: absolute; width: min(330px, 76vw); display: grid; gap: 0.5rem; padding: 1rem 1.1rem; border-left: 1px solid rgba(255, 180, 94, 0.6); background: linear-gradient(90deg, rgba(8, 6, 4, 0.72), rgba(8, 6, 4, 0.3)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.co-title { margin: 0; font: 600 0.66rem/1.2 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ember); }
.co-body { margin: 0; font: 400 clamp(1.05rem, 1.45vw, 1.3rem)/1.4 var(--serif); color: #f6efe3; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.co-body .w { opacity: 0; display: inline-block; transform: translateY(4px); transition: opacity 0.5s, transform 0.6s var(--ease); }
#callout.on .co-body .w { opacity: 1; transform: none; }
.co-foot { margin: 0.1rem 0 0; font: 600 0.62rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 239, 227, 0.6); opacity: 0; transition: opacity 0.8s 1.2s; }
.co-foot:empty { display: none; }
#callout.on .co-foot { opacity: 1; }
@media (max-width: 600px) { .co-box { width: calc(100vw - 40px); } }

/* ---------- the iPod's wheel: it can be spun ---------- */
#spin { position: fixed; left: 0; top: 0; width: 100px; height: 100px; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.6s; }
#spin.on { opacity: 1; }
#spin svg { width: 100%; height: 100%; overflow: visible; animation: spin 2.4s cubic-bezier(.45, 0, .25, 1) infinite; }
#spin circle { fill: none; stroke: var(--ember); stroke-width: 2.2; stroke-dasharray: 30 20; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 180, 94, 0.9)); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#spin span { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; padding: 0.55rem 0.9rem; border-radius: 99px; background: rgba(10, 9, 8, 0.62); border: 1px solid rgba(255, 180, 94, 0.45); font: 600 0.68rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- the finale: a few words, and how many have lit a candle ---------- */
#note { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 8vh); transform: translateX(-50%); z-index: 26; width: min(480px, calc(100vw - 32px)); margin: 0; padding: 1rem 1.1rem 0.8rem; border-radius: 16px; background: rgba(10, 8, 6, 0.62); border: 1px solid rgba(255, 180, 94, 0.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
#note label { display: block; margin-bottom: 0.55rem; font: 600 0.66rem/1.2 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); }
.note-row { display: flex; gap: 0.6rem; align-items: center; border-bottom: 1px solid rgba(255, 180, 94, 0.5); }
#note input { flex: 1; min-width: 0; padding: 0.35rem 0 0.5rem; border: 0; outline: 0; background: transparent; color: #f6efe3; font: italic 300 clamp(1.15rem, 2.2vw, 1.4rem)/1.3 var(--serif); }
#note input::placeholder { color: rgba(246, 239, 227, 0.35); }
.note-row button { flex: none; width: 40px; height: 40px; margin-bottom: 0.35rem; border-radius: 50%; border: 1px solid rgba(255, 180, 94, 0.6); background: rgba(255, 180, 94, 0.12); color: #fff; font: 400 1.2rem/1 var(--sans); cursor: pointer; transition: background 0.2s; }
.note-row button:hover, .note-row button:focus-visible { background: rgba(255, 180, 94, 0.3); }
#note.sending .note-row button { opacity: 0.4; pointer-events: none; }
.note-foot { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.55rem; min-height: 1.4rem; font: 400 0.78rem/1.3 var(--sans); color: rgba(246, 239, 227, 0.5); }
#note-err { flex: 1; color: #ffb4a0; }
#note-skip { border: 0; background: none; padding: 0.2rem 0; color: rgba(246, 239, 227, 0.62); font: 600 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
#note-skip:hover { color: #fff; }
#tally { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 3.2vh); z-index: 24; margin: 0; text-align: center; pointer-events: none; font: 600 0.68rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 214, 160, 0.78); opacity: 0; transition: opacity 1.2s; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
#tally.on { opacity: 1; }
#tally b { color: #ffd9a8; font-weight: 600; }
@media (max-width: 600px) { #spin span { display: none; } }   /* on phones the caption below says it; the ring shows it */

/* ---------- sticky notes over the sea of lights ---------- */
#notes { position: fixed; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
#notes-dim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.58); opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#notes-dim.on { opacity: 1; pointer-events: auto; cursor: zoom-out; }
.sticky { position: absolute; left: 0; top: 0; z-index: 2; width: var(--w, 156px); min-height: calc(var(--w, 156px) * 0.9); margin: 0; padding: 16px 14px 20px; border: 0; border-radius: 2px 2px 3px 16px / 2px 2px 16px 3px;
  display: flex; align-items: center; justify-content: center; text-align: center; color: #2a2317; font: 600 var(--fs, 20px)/1.14 Caveat, 'Bradley Hand', 'Segoe Print', cursive; overflow-wrap: anywhere;
  background: linear-gradient(172deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 34%), linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 22%), var(--c);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 16px 28px -10px rgba(0, 0, 0, 0.75); filter: brightness(0.86) saturate(0.9);
  pointer-events: auto; cursor: zoom-in; transform-origin: 50% 50%; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
.sticky::before { content: ""; position: absolute; left: 50%; top: -7px; width: 46px; height: 14px; transform: translateX(-50%) rotate(-2deg); background: rgba(255, 255, 255, 0.28); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 0 0 3px 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.14) 50%, rgba(255, 255, 255, 0.25) 56%, rgba(255, 255, 255, 0) 70%); }
.sticky.mine { filter: brightness(0.96); box-shadow: 0 0 0 1px rgba(255, 200, 130, 0.8), 0 0 34px rgba(255, 170, 80, 0.5), 0 16px 28px -10px rgba(0, 0, 0, 0.75); }
.sticky.focus { z-index: 3; filter: none; cursor: zoom-out; box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.8); }
.sticky.focus, .sticky.back { transition: transform 0.75s cubic-bezier(.16, 1, .3, 1), opacity 0.4s, filter 0.5s; }
.sticky:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
@media (max-width: 700px) { .sticky { padding: 13px 11px 16px; } }

/* ---------- the maker's signature ---------- */
#credits { position: fixed; left: clamp(16px, 3vw, 36px); top: clamp(16px, 3.4vh, 32px); z-index: 23; max-width: 300px; opacity: 0; transform: translateY(-6px); transition: opacity 1.6s, transform 1.6s var(--ease); color: rgba(246, 239, 227, 0.82); }
#credits.on { opacity: 1; transform: none; }
.cr-by { margin: 0 0 0.3rem; font: 600 0.58rem/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ember); opacity: 0.85; }
.cr-name { margin: 0; display: flex; align-items: center; gap: 0.35rem; font: 400 1.18rem/1.2 var(--serif); color: #f6efe3; }
.cr-name a { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: rgba(246, 239, 227, 0.62); transition: color 0.2s, background 0.2s; }
.cr-name a:first-of-type { margin-left: 0.3rem; }
.cr-name a:hover, .cr-name a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); }
.cr-name svg { width: 15px; height: 15px; }
.cr-film { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-radius: 10px; background: rgba(10, 8, 6, 0.45); border: 1px solid rgba(255, 180, 94, 0.22); color: inherit; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s, background 0.2s; }
.cr-film:hover, .cr-film:focus-visible { border-color: rgba(255, 180, 94, 0.6); background: rgba(10, 8, 6, 0.7); }
.cr-film img { position: relative; width: 72px; height: 40px; object-fit: cover; border-radius: 5px; filter: saturate(0.85); }
.cr-film span { display: grid; gap: 0.15rem; font: 400 0.98rem/1.2 var(--serif); color: #f6efe3; }
.cr-film small { font: 600 0.56rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); }
@media (max-width: 600px) { #credits { max-width: calc(100vw - 150px); } .cr-name { font-size: 1.02rem; } .cr-film span { font-size: 0.86rem; } .cr-film img { width: 60px; height: 34px; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }