/* Silent Scars — brand system (Silent_Scars_Brand_Package_v1)
   Single-theme by design: the brand's world is night black, tactical
   charcoal, ash bone, ember orange, desert sand. */
:root {
  --night: #0A0F12;
  --charcoal: #1B272D;
  --charcoal-2: #22313a;
  --bone: #EEE7D6;
  --bone-dim: #cfc7b2;
  --mist: #8fa0ac;
  --ember: #FF4D00;
  --ember-soft: #ff6a2b;
  --sand: #C2B280;
  --line: #2c3a42;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--ember-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ember); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

h1, h2, h3, .display {
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  text-wrap: balance;
  margin: 0;
}
.eyebrow {
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 .8rem;
}
.gar { font-family: "EB Garamond", Georgia, serif; font-style: italic; }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: 42rem; }
section { padding: 3.6rem 0; }
section + section { border-top: 1px solid var(--line); }

/* logo life: the ember breathes every ~2.5 minutes; the heartbeat pulses
   left-to-right every ~26s. Both respect prefers-reduced-motion. */
#spark { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  #spark { animation: emberSwell 150s ease-in-out infinite; }
  #heartpulse {
    stroke-dasharray: 90 1000;
    stroke-dashoffset: 90;
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(255, 140, 60, .55));
    animation: heartPulse 26s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  #heartpulse { opacity: 0; }
}
@keyframes emberSwell {
  0%, 90%, 100% { filter: drop-shadow(0 0 0 rgba(255, 77, 0, 0)); transform: scale(1); }
  94% { filter: drop-shadow(0 0 26px rgba(255, 77, 0, .95)) drop-shadow(0 0 60px rgba(255, 77, 0, .45)); transform: scale(1.12); }
  96% { filter: drop-shadow(0 0 18px rgba(255, 77, 0, .7)); transform: scale(1.05); }
}
@keyframes heartPulse {
  0%      { stroke-dashoffset: 90;    opacity: 0; }
  0.4%    { opacity: .9; }
  10.6%   { opacity: .9; }
  11%     { stroke-dashoffset: -1010; opacity: 0; }
  100%    { stroke-dashoffset: -1010; opacity: 0; }
}

/* countdown */
.countdown {
  display: flex; gap: 1.1rem; margin: 1rem 0 .4rem;
  font-variant-numeric: tabular-nums;
}
.countdown .unit { text-align: center; min-width: 3.2rem; }
.countdown .num {
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  font-size: 1.9rem; color: var(--bone); line-height: 1;
}
.countdown .lbl {
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist); margin-top: .3rem;
}
.countdown.out .num { color: var(--ember); }
.count-note { color: var(--mist); font-size: .82rem; margin: 0 0 1rem; }

/* header */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; max-width: 62rem; margin: 0 auto;
}
.site-head .mark {
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; font-size: .95rem;
  color: var(--bone); text-decoration: none;
}
.site-head .mark .spark { color: var(--ember); }
.site-head nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.site-head nav a {
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mist); text-decoration: none;
}
.site-head nav a:hover { color: var(--bone); }

/* hero */
.hero { text-align: center; padding: 3.2rem 1.25rem 3.6rem; }
.hero .logo { width: min(340px, 70vw); height: auto; display: block; margin: 0 auto; }
.hero h1 { position: absolute; left: -9999px; } /* logo carries the name; keep h1 for a11y/SEO */
.hero .tagline {
  font-family: "EB Garamond", Georgia, serif; font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.6rem); color: var(--bone-dim); margin: 1.4rem 0 0;
}

/* release card */
.release {
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 2rem;
  align-items: center; background: var(--charcoal); border: 1px solid var(--line);
  padding: 1.6rem;
}
.release img { display: block; border: 1px solid var(--line); }
.release h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); text-transform: uppercase; }
.release .date {
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  color: var(--ember); letter-spacing: .1em; text-transform: uppercase;
  font-size: .95rem; margin: .5rem 0 0;
}
.release p { color: var(--bone-dim); }
.tracks { margin: 1rem 0 1.3rem; padding: 0; list-style: none; color: var(--bone-dim); font-size: .95rem; }
.tracks li { padding: .35rem 0; border-top: 1px solid var(--line); }
.tracks li:first-child { border-top: 0; }
.tracks .n { color: var(--mist); font-variant-numeric: tabular-nums; margin-right: .6rem; }
.btn {
  display: inline-block; background: var(--ember); color: #fff; text-decoration: none;
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; font-size: .9rem;
  padding: .85rem 1.5rem; border: 0;
}
.btn:hover { background: var(--ember-soft); color: #fff; }
.btn.ghost { background: transparent; color: var(--sand); border: 1px solid var(--sand); margin-left: .6rem; }
.btn.ghost:hover { color: var(--bone); border-color: var(--bone); }

/* story */
.pull {
  border-left: 3px solid var(--ember); padding-left: 1.2rem; margin: 1.6rem 0;
  font-family: "EB Garamond", Georgia, serif; font-style: italic;
  font-size: 1.25rem; line-height: 1.55; color: var(--sand); max-width: 40rem;
}
.story p { color: var(--bone-dim); }
.story p strong { color: var(--bone); }

/* made / cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.card {
  display: block; background: var(--charcoal); border: 1px solid var(--line);
  padding: 1.2rem 1.25rem; text-decoration: none; color: var(--bone-dim);
}
.card:hover { border-color: var(--sand); }
.card .k {
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist); margin: 0 0 .4rem;
}
.card h3 { font-size: 1.1rem; color: var(--bone); margin-bottom: .35rem; }
.card p { margin: 0; font-size: .92rem; }

.made p { color: var(--bone-dim); }
.made .vow { color: var(--bone); }

/* lyrics page */
.lyric-sheet { max-width: 38rem; }
.lyric-sheet .sect {
  font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sand); margin: 2rem 0 .6rem;
}
.lyric-sheet p.l {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.18rem; line-height: 1.75; margin: 0; color: var(--bone);
}
.lyric-note { color: var(--mist); font-size: .88rem; border-top: 1px solid var(--line); margin-top: 2.4rem; padding-top: 1.2rem; max-width: 38rem; }

/* footer */
.site-foot {
  border-top: 1px solid var(--line); margin-top: 3rem;
  padding: 2.2rem 1.25rem 3rem; text-align: center; color: var(--mist); font-size: .9rem;
}
.site-foot .phrases { font-family: "EB Garamond", Georgia, serif; font-style: italic; color: var(--sand); }
.site-foot a { color: var(--mist); }
.site-foot a:hover { color: var(--bone); }

@media (max-width: 700px) {
  .release { grid-template-columns: 1fr; }
  .btn.ghost { margin-left: 0; margin-top: .6rem; }
}