/* Hallmark · route: custom (bespoke) — see tokens.css for the full stamp · v2 "alive" pass 10-21 */
@import url("tokens.css");

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 350;
  line-height: 1.6;
  background-image:
    radial-gradient(640px 640px at 82% -6%, oklch(30% 0.09 345 / 0.55), transparent 70%),
    radial-gradient(760px 760px at -12% 58%, oklch(26% 0.08 320 / 0.5), transparent 70%);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 44px); }

/* ---------- nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-lg) var(--space-md);
}
.nav__mark {
  font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0.04em;
  text-decoration: none; line-height: 1; display: inline-flex; align-items: baseline; gap: 0.18em;
}
.nav__mark .moon {
  width: 0.42em; height: 0.42em; border-radius: 50%;
  background: radial-gradient(circle at 36% 36%, var(--color-accent) 58%, oklch(40% 0.14 345) 100%);
  box-shadow: inset -0.1em -0.08em 0 oklch(22% 0.05 330);
  transform: translateY(-0.04em);
}
.nav__links { display: flex; gap: var(--space-lg); list-style: none; }
.nav__links a {
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); border-color: var(--color-accent); }

/* ---------- hero: the poster, alive ---------- */
.hero { padding-block: var(--space-lg) var(--space-2xl); }
.hero__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
.hero__stack { min-width: 0; padding-top: var(--space-xl); }
.hero__name {
  font-family: var(--font-display);
  font-size: var(--text-poster);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere; min-width: 0;
}
.hero__name .row { display: block; }
.hero__name .row--accent { color: var(--color-accent); }
.hero__tag {
  margin-top: var(--space-lg);
  font-size: var(--text-md); font-weight: 350; color: var(--color-ink-2);
  max-width: 34ch;
}
.hero__tag strong { font-weight: 650; color: var(--color-ink); }
.hero__media { min-width: 0; justify-self: end; width: min(100%, 460px); }
.hero__video {
  width: 100%; height: auto; max-height: 86vh;
  object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius-md);
  border: var(--rule-hairline);
  box-shadow: 0 30px 70px oklch(8% 0.02 320 / 0.6);
}
.hero__media figcaption {
  margin-top: var(--space-sm);
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-muted); text-align: right;
}
.heroplayer { margin-top: var(--space-xl); max-width: 640px; }

/* ---------- the ticker ---------- */
.ticker {
  margin-top: var(--space-xl);
  border-block: var(--rule-hairline);
  overflow: hidden;
  padding-block: var(--space-sm);
}
.ticker__track { display: flex; width: max-content; animation: ticker 36s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__seg {
  font-family: var(--font-display); font-size: var(--text-lg);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-ink-2);
}
.ticker__seg i { font-style: normal; color: var(--color-accent); padding-inline: 0.5em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- section heads ---------- */
.section { padding-block: var(--space-3xl) var(--space-2xl); }
.section--tight { padding-block: var(--space-2xl) var(--space-2xl); }
.section__head { margin-bottom: var(--space-xl); }
.section__title {
  font-family: var(--font-display); font-size: var(--text-display-s);
  line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase;
}
.section__sub { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 52ch; }

/* ---------- música: the track wall ---------- */
.tracks {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
}
.track {
  background: var(--color-paper-2);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.track--live {
  grid-column: span 12;
  display: grid; grid-template-columns: 0.42fr 0.58fr; align-items: center;
}
.track--sealed { grid-column: span 6; }
.track__cover { position: relative; min-width: 0; }
.track__cover img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 28%; }
.track--live .track__cover img { aspect-ratio: 1 / 1; }
.track--sealed .track__cover img { filter: saturate(0.45) brightness(0.65); }
.track__body { padding: var(--space-xl); min-width: 0; }
.track--sealed .track__body { padding: var(--space-lg); }
.track__name {
  font-family: var(--font-display); font-size: var(--text-xl);
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1;
}
.track--live .track__name { font-size: var(--text-2xl); }
.track__meta { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

.seal {
  position: absolute; top: var(--space-md); right: var(--space-md);
  background: var(--color-paper);
  border: 2px solid var(--color-accent);
  color: var(--color-ink);
  font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 999px;
  transform: rotate(-4deg);
}

/* ---------- the player ---------- */
.player {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-md);
  background: var(--color-paper-3);
  border: var(--rule-hairline);
  border-radius: 999px;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
}
.player__btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--color-accent); color: var(--color-accent-ink);
  display: grid; place-items: center;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.player__btn:hover { transform: translateY(-1px); }
.player__btn:active { transform: translateY(0); }
.player__btn:disabled { background: var(--color-neutral); cursor: default; }
.player__btn svg { width: 20px; height: 20px; fill: currentColor; }
.player__btn .ico-pause { display: none; }
.player.is-playing .ico-play { display: none; }
.player.is-playing .ico-pause { display: block; }
.player__rail { min-width: 0; }
.player__title { font-size: var(--text-sm); font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.player__bar {
  margin-top: var(--space-xs);
  height: 6px; border-radius: 3px; background: var(--color-rule-2);
  position: relative; cursor: pointer;
}
.player__fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  border-radius: 3px; background: var(--color-accent);
}
.player__time {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap;
}

/* ---------- fotos: the paste-up wall ---------- */
.wall {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg); align-items: start;
}
.wall figure { border-radius: var(--radius-sm); overflow: hidden; }
.wall img, .wall video {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  transition: transform var(--dur-short) var(--ease-out);
  display: block;
}
.wall figure:hover img, .wall figure:hover video { transform: scale(1.025); }
.wall .w1 { grid-column: span 5; transform: rotate(-1deg); }
.wall .w2 { grid-column: span 4; transform: rotate(0.8deg); margin-top: var(--space-xl); }
.wall .w3 { grid-column: span 3; transform: rotate(-0.6deg); }
.wall .w4 { grid-column: span 3; transform: rotate(0.7deg); }
.wall .w4 video { object-position: 50% 35%; }
.wall .w5 { grid-column: span 5; transform: rotate(-0.8deg); margin-top: var(--space-lg); }
.wall .w6 { grid-column: span 4; transform: rotate(0.6deg); }
.wall .w7 { grid-column: span 4; transform: rotate(-0.7deg); margin-top: calc(-1 * var(--space-lg)); }
.wall .w8 { grid-column: span 4; transform: rotate(0.9deg); }
.wall .w9 { grid-column: span 4; transform: rotate(-0.5deg); }

/* ---------- a lista ---------- */
.lista {
  background: var(--color-paper-2);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}
.lista__title {
  font-family: var(--font-display); font-size: var(--text-2xl);
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.02;
}
.lista__sub { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 44ch; }
.lista form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
.lista input[type="email"] {
  min-width: 0;
  background: var(--color-paper);
  border: var(--rule-hairline);
  border-radius: 999px;
  color: var(--color-ink);
  font: inherit;
  padding: var(--space-sm) var(--space-lg);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.lista input[type="email"]::placeholder { color: var(--color-muted); }
.lista input[type="email"]:hover { border-color: var(--color-neutral); }
.lista input[type="email"]:user-invalid { border-color: oklch(62% 0.19 25); }
.lista button {
  border: none; cursor: pointer;
  background: var(--color-accent); color: var(--color-accent-ink);
  font: inherit; font-weight: 650; letter-spacing: 0.04em; white-space: nowrap;
  padding: var(--space-sm) var(--space-xl);
  border-radius: 999px;
  transition: transform var(--dur-micro) var(--ease-out), filter var(--dur-micro) var(--ease-out);
}
.lista button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.lista button:active { transform: translateY(0); }
.lista__fine { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.lista__ok { margin-top: var(--space-sm); font-weight: 650; color: var(--color-accent); display: none; }
.lista.is-done form { display: none; }
.lista.is-done .lista__ok { display: block; }

/* ---------- footer ---------- */
.footer { padding-block: var(--space-3xl) var(--space-2xl); }
.footer__statement {
  font-family: var(--font-display); font-size: var(--text-display-s);
  line-height: 1.04; letter-spacing: 0.02em; text-transform: uppercase;
  max-width: 18ch;
}
.footer__statement .accent { color: var(--color-accent); }
.footer__row {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hairline);
  display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl);
  align-items: baseline; justify-content: space-between;
  font-size: var(--text-sm); color: var(--color-muted);
}
.footer__row a { color: var(--color-ink-2); text-decoration-color: var(--color-accent); white-space: nowrap; }
.footer__row a:hover { color: var(--color-ink); }

/* ---------- load orchestration ---------- */
.reveal { opacity: 0; transform: translateY(10px); animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  .ticker__track { animation: none; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stack { padding-top: var(--space-md); }
  .hero__media { justify-self: start; width: min(100%, 420px); }
  .hero__video { max-height: 70vh; }
  .track--live { grid-template-columns: 1fr; }
  .track--sealed { grid-column: span 6; }
  .lista { grid-template-columns: 1fr; gap: var(--space-lg); }
  .wall .w1 { grid-column: span 7; }
  .wall .w2 { grid-column: span 5; margin-top: var(--space-lg); }
  .wall .w3 { grid-column: span 6; }
  .wall .w4 { grid-column: span 6; }
  .wall .w5 { grid-column: span 7; margin-top: 0; }
  .wall .w6 { grid-column: span 5; }
  .wall .w7 { grid-column: span 6; margin-top: 0; }
  .wall .w8 { grid-column: span 6; }
  .wall .w9 { grid-column: span 12; }
}
@media (max-width: 560px) {
  .nav__links { gap: var(--space-sm); }
  .nav__links a { font-size: var(--text-xs); letter-spacing: 0.08em; }
  .nav__mark { font-size: var(--text-lg); }
  .section { padding-block: var(--space-2xl) var(--space-xl); }
  .ticker__seg { font-size: var(--text-md); }
  .track--sealed { grid-column: span 12; }
  .lista form { grid-template-columns: 1fr; }
  .lista button { justify-self: start; }
  .player { grid-template-columns: auto 1fr; }
  .player__time { display: none; }
  .wall .w1, .wall .w2, .wall .w3, .wall .w4, .wall .w5, .wall .w6, .wall .w7, .wall .w8 { grid-column: span 6; margin-top: 0; }
  .wall .w9 { grid-column: span 12; }
}