:root {
  color-scheme: dark;
  --ink: #100d0b;
  --stone: #d7c9b3;
  --muted: #b7a88f;
  --ember: #b96831;
  --line: rgba(205, 167, 117, .3);
  --serif: "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --display: "IM Fell English SC", "Palatino Linotype", Georgia, serif;
  font-family: var(--serif);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--ink); }
body { color: var(--stone); }
::selection { color: #120d08; background: #d39256; }
button { font: inherit; }
:focus-visible { outline: 2px solid #e0a565; outline-offset: 5px; }
.sanctuary { position: relative; display: grid; grid-template-columns: minmax(450px, 1fr) minmax(420px, .9fr); min-height: 100svh; overflow: hidden; isolation: isolate; background: #100d0b; }
.countdown-panel { position: relative; z-index: 1; display: grid; place-items: center; padding: clamp(2.2rem, 5vw, 5rem); background: radial-gradient(ellipse at 50% 46%, rgba(71, 43, 27, .19), transparent 65%), #100d0b; }
.panel-inner { width: min(100%, 590px); text-align: center; position: relative; z-index: 2; }
.sigil { width: 31px; height: 38px; margin: 0 auto 1.1rem; fill: none; stroke: var(--ember); stroke-width: 1.3; opacity: .94; }
h1 { margin: 0; color: #e0d2bc; font-family: var(--display); font-weight: 400; font-size: clamp(3.3rem, 6.2vw, 6rem); line-height: .83; letter-spacing: -.025em; text-shadow: 0 3px 18px rgba(0,0,0,.6); }
h1 span { color: #c8b79c; }
.intro { margin: 1.25rem 0 0; color: #b9a487; font-size: clamp(1.12rem, 1.55vw, 1.4rem); font-style: italic; letter-spacing: .035em; }
.rule { height: 1px; width: min(100%, 330px); margin: 2.05rem auto 1.15rem; background: linear-gradient(90deg, transparent, var(--line), transparent); position: relative; }
.rule span { position: absolute; top: -2px; left: calc(50% - 2px); width: 5px; height: 5px; background: var(--ember); transform: rotate(45deg); }
.countdown-heading { margin: 0 0 .7rem; color: #d2bea0; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; }
.countdown { display: flex; justify-content: center; align-items: start; gap: clamp(.35rem, 1vw, .85rem); font-variant-numeric: tabular-nums lining-nums; }
.unit { min-width: 4rem; display: grid; gap: .14rem; }
.number { display: block; color: #eadfcf; font-size: clamp(2.65rem, 4.9vw, 4.45rem); font-weight: 500; line-height: 1; text-shadow: 0 2px 12px rgba(210,153,92,.12); }
.label { color: #b2a188; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.separator { padding-top: .22rem; color: #a65f36; font-size: clamp(2rem, 3.7vw, 3.3rem); line-height: 1; }
.date-line { margin: 1.5rem 0 0; color: #c6b59a; font-size: 1rem; letter-spacing: .07em; }
.date-line span { padding: 0 .4em; color: var(--ember); }
.actions { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: 1.8rem; }
.share-button, .fullscreen-button { min-height: 44px; border: 1px solid rgba(206,164,111,.45); color: #e1cfb3; background: rgba(26,20,16,.74); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.share-button { display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1rem; font-size: .93rem; letter-spacing: .035em; }
.share-button:hover, .fullscreen-button:hover { border-color: #d59860; background: rgba(117,64,33,.35); color: #fff0d7; }
.share-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.fullscreen-button { display: grid; place-items: center; width: 44px; padding: .55rem; }
.fullscreen-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.artist-profiles { display: flex; justify-content: center; align-items: center; gap: .65rem; margin: .35rem auto 0; }
.profile-link { display: grid; place-items: center; width: 48px; height: 48px; color: #c3b59f; text-decoration: none; cursor: default; }
.profile-link[href] { cursor: pointer; }
.profile-link[href]:hover { color: var(--ember); }
.soundcloud-profile { color: #bf7849; }
.profile-link svg { display: block; width: 37.5px; height: 37.5px; }
.feedback { min-height: 1.25em; margin: .6rem 0 0; color: #d5a06d; font-size: .88rem; }
.edge-light { position: absolute; right: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(transparent, rgba(191,131,73,.22), transparent); }
.poster { position: relative; z-index: 0; min-height: 100svh; margin: 0; overflow: hidden; background: #090808; }
.poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16,13,11,.16), transparent 23%), linear-gradient(0deg, rgba(16,13,11,.19), transparent 30%); }
.poster img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.embers { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .5; background-image: radial-gradient(circle, rgba(239,153,82,.8) 0 1px, transparent 1.8px), radial-gradient(circle, rgba(215,115,54,.6) 0 1px, transparent 2px); background-size: 193px 257px, 311px 383px; background-position: 41px 23px, 126px 80px; animation: ember-drift 22s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes ember-drift { to { background-position: 41px -13px, 126px 50px; opacity: .28; } }
@media (max-width: 850px) {
 .sanctuary { display: flex; flex-direction: column; min-height: 100svh; overflow: clip; }
 .poster { order: 0; min-height: 0; height: min(34svh, 340px); flex: 0 0 min(34svh, 340px); }
 .poster img { min-height: 0; height: 100%; object-fit: cover; object-position: 50% 100%; }
 .poster::after { background: linear-gradient(0deg, #100d0b 0%, rgba(16,13,11,.08) 30%, transparent 75%); }
 .countdown-panel { order: 1; flex: 1; min-height: 66svh; padding: .4rem 1.15rem 1.15rem; margin-top: -2.3rem; background: linear-gradient(180deg, transparent 0, #100d0b 2.2rem, #100d0b 100%); }
 .panel-inner { width: min(100%, 500px); }
 .sigil { width: 25px; height: 31px; margin-bottom: .55rem; }
 h1 { font-size: clamp(2.8rem, 11vw, 4.6rem); }
 .intro { margin-top: .7rem; font-size: 1.08rem; }
 .rule { margin: 1.15rem auto .8rem; }
 .countdown-heading { font-size: .78rem; margin-bottom: .6rem; }
 .unit { min-width: clamp(3.1rem, 14vw, 4.3rem); }
 .number { font-size: clamp(2.15rem, 10.6vw, 3.75rem); }
 .label { font-size: max(11px, .78rem); letter-spacing: .075em; }
 .separator { font-size: clamp(1.65rem, 7vw, 2.5rem); }
 .date-line { margin-top: 1.1rem; font-size: .92rem; }
 .actions { margin-top: 1rem; }
 .feedback { font-size: .8rem; }
 .edge-light { display: none; }
}
@media (max-width: 380px) {
 .poster { height: 32svh; flex-basis: 32svh; }
 .countdown-panel { min-height: 68svh; margin-top: -1.7rem; }
 .unit { min-width: 2.8rem; }
 .number { font-size: 2.05rem; }
 .label { font-size: max(11px, .76rem); }
 .separator { font-size: 1.55rem; }
 .date-line { font-size: .84rem; letter-spacing: .035em; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-width: 851px) and (max-height: 800px) {
 .countdown-panel { padding: .8rem 3vw; }
 .sigil { width: 25px; height: 31px; margin-bottom: .2rem; }
 h1 { font-size: clamp(3rem, 4.9vw, 4.1rem); }
 .intro { margin-top: .5rem; font-size: 1.08rem; }
 .rule { margin: .8rem auto .6rem; }
 .countdown-heading { margin-bottom: .35rem; font-size: .88rem; }
 .number { font-size: clamp(2.6rem, 4vw, 3.5rem); }
 .date-line { margin-top: .7rem; }
 .actions { margin-top: .55rem; }
 .feedback { min-height: 1em; margin-top: .2rem; }
}