/* sofak.ing - site-owned stylesheet (Marbl doctrine 19 Aug 2026: every site owns its CSS).
   Brand constants copied from INTERNAL/Marbl-Codes/DESIGN.md: charcoal, ember, the --gap-* scale,
   square corners, Geist. Expression is this site's own: one song, big type, grain, nothing else. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour - DESIGN.md */
  --charcoal: #171415;
  --charcoal-deep: #0d0b0c;
  --charcoal-light: #1d1a1b;
  --charcoal-lighter: #232021;
  --ember: #F35226;
  --on-ember: #131112;
  --text: #F3E2C8;
  --text-muted: rgba(243, 226, 200, 0.64);
  --line-interactive: rgba(255, 255, 255, 0.15);
  --veil: rgba(13, 11, 12, 0.84);

  /* Spacing - the Marbl scale */
  --gap-3xs: 4px;
  --gap-2xs: 8px;
  --gap-xs: 10px;
  --gap-sm: 20px;
  --gap-md: 40px;
  --gap-lg: 60px;
  --gap-xl: 80px;

  /* Type */
  --text-xs: 11px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: clamp(16px, 0.9rem + 0.3vw, 18px);
  --text-2xl: clamp(24px, 1.2rem + 1vw, 32px);
  --text-5xl: clamp(56px, min(2.5rem + 5vw, 12vh), 120px);

  /* Sizes */
  --control: 48px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --logo: 48px;
  --badge: clamp(40px, 1.5rem + 2vw, 60px);
  --width-sm: 600px;
  --width-md: 800px;
  --width-2xl: 1400px;

  /* Motion */
  --ease-fast: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-marbl: cubic-bezier(0.32, 0.72, 0, 1);
  --transition-fast: 0.15s ease;
  --rise: var(--gap-sm);

  --font: "Geist", system-ui, sans-serif;
  /* Film grain: SVG turbulence, inline so it costs no request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr); /* stop min-content widening the page on phones */
  background: var(--charcoal);
  color: var(--text);
  font: 400 var(--text-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
/* Marble grain over the whole page - texture, not decoration. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.05;
}
body > * { position: relative; z-index: 1; }
a { color: inherit; }
p, li, dd { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: var(--gap-3xs); }

/* ── Shell: header, stage and footer share one width ────────── */
.shell {
  width: 100%;
  max-width: var(--width-2xl);
  margin: 0 auto;
  padding-inline: var(--gap-md);
}

/* ── Bar: symbol left, actions right ───────────────────────── */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--gap-md);
}
.logo { display: block; width: var(--logo); }
.logo img { display: block; width: 100%; height: auto; }
.actions { display: flex; gap: var(--gap-2xs); }

/* ── Buttons: square, fill-up ember, arrow rotates to face right ── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  height: var(--control);
  padding: 0 var(--gap-sm);
  border: 1px solid var(--line-interactive);
  background: transparent;
  color: var(--text);
  font: 700 var(--text-sm)/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ember);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease-fast);
}
.btn:hover, .btn:focus-visible { color: var(--on-ember); border-color: var(--ember); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn .arrow {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.4s var(--ease-fast);
}
.btn:hover .arrow, .btn:focus-visible .arrow { transform: rotate(45deg); }
.btn--icon { width: var(--control); padding: 0; font-size: var(--text-lg); }

/* ── Stage: the song ───────────────────────────────────────── */
.stage { align-self: center; padding-block: var(--gap-md) var(--gap-xl); }
.stage__inner { max-width: var(--width-md); margin: 0 auto; }
.heading { display: flex; align-items: center; gap: var(--gap-sm); }
h1 {
  margin: 0;
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* The explicit badge: the streaming-service "E", square and big. */
.explicit {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--badge);
  aspect-ratio: 1;
  background: var(--text);
  color: var(--charcoal);
  font-weight: 800;
  font-size: calc(var(--badge) * 0.6);
  line-height: 1;
}
.byline {
  margin: var(--gap-sm) 0 var(--gap-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.byline cite { font-style: normal; color: var(--text); }

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--charcoal-deep);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Share: label on the rail, bare icons, ember lift on hover ── */
.share {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}
.share__label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.share ul { display: flex; gap: var(--gap-3xs); margin: 0; padding: 0; list-style: none; }
.share a, .share button {
  display: grid;
  place-items: center;
  width: var(--control);
  height: var(--control);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.share svg { width: var(--icon-lg); height: var(--icon-lg); fill: currentColor; }
.share a:hover, .share button:hover,
.share a:focus-visible, .share button:focus-visible { color: var(--ember); transform: translateY(-2px); }
.toast { margin: 0; color: var(--ember); font-size: var(--text-sm); }

/* ── Footer: quiet, on the same shell ──────────────────────── */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-xs) var(--gap-md);
  padding-block: var(--gap-md);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.foot p { margin: 0; }
.foot a { color: var(--text); text-underline-offset: var(--gap-3xs); }
.foot a:hover { color: var(--ember); }

/* ── About modal: a surface shift, no border ───────────────── */
.about {
  width: min(var(--width-sm), calc(100vw - 2 * var(--gap-sm)));
  max-height: calc(100dvh - 2 * var(--gap-sm));
  padding: 0;
  border: 0;
  background: var(--charcoal-lighter);
  color: var(--text);
}
.about::backdrop { background: var(--veil); backdrop-filter: blur(var(--gap-2xs)); }
.about[open] { animation: rise 0.5s var(--ease-marbl); }
.about__inner { position: relative; padding: var(--gap-lg) var(--gap-md) var(--gap-md); }
.about__close {
  position: absolute;
  top: var(--gap-xs);
  right: var(--gap-xs);
  display: grid;
  place-items: center;
  width: var(--control);
  height: var(--control);
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.about__close svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: 2; }
.about__close:hover { color: var(--ember); }
.label {
  margin: 0 0 var(--gap-xs);
  color: var(--ember);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}
.about h2 {
  margin: 0 0 var(--gap-sm);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.about p { margin: 0 0 var(--gap-sm); }
.about p:last-of-type { margin-bottom: 0; }
.about cite { font-style: italic; }
.about a { color: var(--ember); text-underline-offset: var(--gap-3xs); }

.stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin: var(--gap-md) calc(-1 * var(--gap-md)) 0;
  padding: var(--gap-sm) var(--gap-md);
  background: var(--charcoal-light);
}
.stats[hidden] { display: none; }
.stats dt { color: var(--text-muted); font-size: var(--text-sm); }
.stats dd { margin: 0; font-size: var(--text-2xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.sale { margin-top: var(--gap-md); }
.price { margin: 0 0 var(--gap-2xs); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.price span { color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; }

/* ── Entrance: a short stagger, then still ─────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } }
.reveal { animation: rise 0.8s var(--ease-marbl) both; }
.reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal:nth-child(4) { animation-delay: 0.24s; }

/* ── Small screens ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .shell { padding-inline: var(--gap-sm); }
  .bar { padding-block: var(--gap-sm); }
  .stage { padding-block: var(--gap-sm) var(--gap-md); }
  .about__inner { padding: var(--gap-lg) var(--gap-sm) var(--gap-sm); }
  .stats { margin-inline: calc(-1 * var(--gap-sm)); padding-inline: var(--gap-sm); }
  .share { flex-wrap: wrap; gap: var(--gap-xs); }
  .share__label { flex-basis: 100%; }
  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; transition-duration: 0.01s !important; }
}