/* Burn Line
   Late-90s / early-2000s alt: burned CD-R, liner notes, Sharpie.
   Palette stays black / maroon / red / bone. The only color that breaks
   that rule is the disc sheen, and it earns it. */

@font-face {
  font-family: 'Anton';
  src: url('fonts/Anton-Regular.ttf') format('truetype');
  font-display: swap;
}

/* Rock Salt, not Permanent Marker: a marker face has to read as a person
   writing on a disc, and Permanent Marker reads cartoon. */
@font-face {
  font-family: 'Rock Salt';
  src: url('fonts/RockSalt.ttf') format('truetype');
  font-display: swap;
}

/* Courier Prime rather than the Courier New the OS happens to ship: this is
   the set list / flyer / press release voice and it should be the same on
   every machine. */
@font-face {
  font-family: 'Courier Prime';
  src: url('fonts/CourierPrime.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('fonts/CourierPrimeBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* the fourteen-segment LCD a camcorder burned into the corner of the frame */
@font-face {
  font-family: 'DSEG14';
  src: url('fonts/DSEG14Classic-Regular.woff2') format('woff2');
  font-display: swap;
}

:root {
  --ink: #0c0a0a;
  --panel: #120e0e;
  --bone: #f5f2ec;
  --dim: rgba(245, 242, 236, 0.62);
  --hair: rgba(245, 242, 236, 0.16);
  --maroon: #8a1e1e;
  --red: #d92b20;
  --ember: #f2600f;

  --display: 'Anton', Impact, 'Haettenschweiler', sans-serif;
  --body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --data: 'Courier Prime', 'Courier New', Courier, monospace;
  --marker: 'Rock Salt', 'Permanent Marker', cursive;
  --lcd: 'DSEG14', 'Courier Prime', monospace;
  --amber: #ffa22e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.65;
  letter-spacing: -0.005em;
  background-image: radial-gradient(rgba(245, 242, 236, 0.028) 1px, transparent 1px);
  background-size: 5px 5px;
}

/* Grain over everything. The point of this look is that the degradation is the
   production method, not a sticker on top of one element, so the whole page
   sits under the same bad print. Baked once into a data URI and never
   animated: feTurbulence is expensive to recompute, free to reuse. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 40;
  opacity: 0.19;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--red); }
a:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* ---------------- hero ---------------- */

.hero {
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem 2rem;
}

.wordmark { width: min(860px, 94vw); height: auto; }

.burnline {
  position: relative;
  width: min(680px, 84vw);
  height: 4px;
  margin: 2.2rem 0 1.8rem;
  background: rgba(245, 242, 236, 0.12);
}

.wick {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--maroon), var(--red) 70%, var(--ember));
  animation: burn 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}

.flame-tip {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 10px;
  height: 18px;
  opacity: 0;
  background: var(--ember);
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  filter: drop-shadow(0 0 6px var(--red));
  animation:
    ride 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards,
    flicker 0.18s linear 0.4s 14 alternate;
}

@keyframes burn { to { width: 100%; } }
@keyframes ride {
  0%   { left: 0; opacity: 1; }
  99%  { opacity: 1; }
  100% { left: calc(100% - 10px); opacity: 0; }
}
@keyframes flicker {
  from { transform: scaleY(1) rotate(-4deg); }
  to   { transform: scaleY(1.35) rotate(5deg); }
}

/* The band, as a 2003 point-and-shoot photo: printed, taped into a booklet.
   The era treatment lives here rather than in the image file, so whatever
   photo gets dropped in comes out looking like it was shot on a digicam
   with the flash on. */
.band-photo {
  width: min(470px, 86vw);
  background: var(--bone);
  padding: 12px 12px 0;
  transform: rotate(-1.4deg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

.frame {
  position: relative;
  overflow: hidden;
  background: #1a1615;
}

.band-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* CCD sensors of that era ran warm and contrasty and clipped the highlights */
  filter: contrast(1.12) saturate(0.86) sepia(0.16) brightness(1.04);
}

/* direct flash: hot in the middle, everything at the edges falling to black */
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 246, 226, 0.22), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 45%, rgba(8, 6, 6, 0.55) 100%);
}

/* the date the camera burned into the corner, in fourteen-segment LCD */
.stamp {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-family: var(--lcd);
  font-size: clamp(0.5rem, 1.7vw, 0.68rem);
  letter-spacing: 0.06em;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 162, 46, 0.65);
  pointer-events: none;
}

.band-photo figcaption {
  font-family: var(--marker);
  font-size: 0.85rem;
  line-height: 1.4;
  color: #2a2320;
  padding: 0.75rem 0.2rem 0.85rem;
  transform: rotate(0.8deg);
}

.jump {
  margin-top: 2.8rem;
  display: flex;
  gap: 1.7rem;
  flex-wrap: wrap;
  justify-content: center;
}

.jump a {
  color: var(--bone);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  border-bottom: 2px solid var(--maroon);
  padding-bottom: 3px;
}

.jump a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ---------------- shared section furniture ---------------- */

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

section { margin-top: 6rem; }

h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: 0.05em;
  margin-bottom: 1.8rem;
}

/* Off-register: the second colour plate landing a hair off the black, the way
   a cheap two-colour show poster actually came back from the press. */
.tape {
  display: inline-block;
  background: var(--bone);
  color: var(--ink);
  padding: 0.05em 0.45em 0.1em;
  transform: rotate(-1.2deg);
  box-shadow: 4px 4px 0 var(--maroon);
  text-shadow: 2px -1px 0 rgba(217, 43, 32, 0.42);
}

.tape-b { transform: rotate(1deg); box-shadow: -4px 4px 0 var(--maroon); }

.flyer {
  border: 2px dashed var(--hair);
  padding: 2rem 1.6rem;
}

.empty-slot {
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: 0.05em;
  color: var(--red);
}

.empty-sub { margin-top: 0.7rem; color: var(--dim); }

/* ---------------- the disc ---------------- */

.disc-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 2.75rem;
  align-items: start;
}

.disc-wrap { text-align: center; }

/* A CD-R writes from the hub outward and fills by AREA, not by radius, so
   four songs (about 19 minutes of a 74 minute disc) stop at 53% of the
   radius, not two thirds of the way out. The three faint rings inside that
   are the track boundaries, one per song, so the set is countable. Same
   numbers as the disc in tools/gen-logo.js, so the shirt and the page agree. */
.disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* closest-side, so every stop below is a true % of the disc radius.
     The default (farthest-corner) would scale them all by ~1.41. */
  background: radial-gradient(circle closest-side at 50% 50%,
    /* centre hole, then the clear plastic hub and clamping ring */
    #080706 0 12.5%,
    #2b2523 12.5% 15%,
    #14100f 15% 19%,
    #322b29 19% 20.5%,
    #171312 20.5% 24%,
    /* burned data, one band per song, split by a faint boundary ring */
    #1c1615 24% 32.4%,
    #4d3f34 32.4% 33%,
    #1a1413 33% 40.3%,
    #4d3f34 40.3% 40.9%,
    #1c1615 40.9% 45.4%,
    #4d3f34 45.4% 46%,
    #201917 46% 52.3%,
    /* THE BURN LINE */
    #ffd9a0 52.3% 52.9%,
    #f2600f 52.9% 53.7%,
    /* unburned dye: untouched, lighter, that CD-R gold-green */
    #6b6244 53.7% 60%,
    #7a7150 60% 88%,
    #6e654a 88% 95.5%,
    /* clear outer rim */
    #2a2422 95.5% 98%,
    #0d0a0a 98% 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75);
}

/* iridescence, sweeping slowly like light moving across a disc */
.disc-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.17;
  mix-blend-mode: screen;
  background: conic-gradient(from 0deg,
    #1e3a8a, #0e7490, #15803d, #a16207, #b91c1c, #6d28d9,
    #1e3a8a, #0e7490, #15803d, #a16207, #b91c1c, #6d28d9, #1e3a8a);
  /* keep the sheen off the hub and off the outer rim */
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 19%, #000 21% 94%, transparent 96%);
  mask: radial-gradient(circle closest-side, transparent 0 19%, #000 21% 94%, transparent 96%);
  animation: spin 18s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Sharpie, written across the blank part of the disc the way you actually
   label one: dark ink on the pale unburned dye, above the burn line. */
.disc-label {
  /* positioned rather than margin-nudged: top is a % of the disc's height, so
     16% is exactly 68% of the radius above centre, out on the blank ring.
     A negative margin here would get half-swallowed by the grid centring. */
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--marker);
  font-size: clamp(0.95rem, 3.6vw, 1.35rem);
  line-height: 1.0;
  color: rgba(28, 22, 18, 0.88);
  white-space: nowrap;
}

.disc-caption {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-top: 1.2rem;
  line-height: 1.5;
}

/* ---------------- tracklist ---------------- */

.tracklist { list-style: none; }

.tracklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair);
}

.tracklist li:first-child { padding-top: 0; }

.num {
  font-family: var(--data);
  font-size: 0.95rem;
  color: var(--maroon);
  grid-row: span 2;
}

.song {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.6vw, 1.7rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.orig {
  grid-column: 2;
  font-family: var(--data);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}

.flag {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.4rem;
  font-family: var(--data);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid var(--ember);
  padding: 0.1rem 0.5rem;
}

.setlist-note {
  margin-top: 1.8rem;
  color: var(--dim);
  border-left: 4px solid var(--maroon);
  padding-left: 1.1rem;
}

/* Left cold and unexplained on purpose. Anyone who burned discs for someone
   gets it without being told, and being told is what kills it. */
.liner {
  font-family: var(--marker);
  font-size: clamp(0.92rem, 2.6vw, 1.12rem);
  line-height: 2;
  color: rgba(245, 242, 236, 0.5);
  text-align: center;
  margin: 5rem auto 1rem;
  max-width: 30rem;
  transform: rotate(-0.8deg);
}

/* ---------------- merch ---------------- */

.merch-intro { color: var(--dim); margin-bottom: 1.6rem; }

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.merch-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
}

.shot {
  display: grid;
  place-items: center;
  padding: 1.8rem 1.4rem;
  height: 210px;
  border-bottom: 1px solid var(--hair);
}

.shot img {
  max-width: 230px;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.merch-card figcaption { padding: 1.3rem 1.4rem 1.6rem; }

.drop {
  display: block;
  font-family: var(--data);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}

.merch-card h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  font-weight: normal;
  margin-bottom: 0.5rem;
}

.merch-card p { font-size: 0.94rem; color: var(--dim); }

.merch-note { margin-top: 1.4rem; color: var(--dim); }

/* ---------------- listen ---------------- */

.platforms {
  list-style: none;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

/* live links read as ink on the page; the greyed-out chips read as not-yet */
.platforms-live a {
  display: inline-block;
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--maroon);
  color: var(--bone);
  text-decoration: none;
}

.platforms-live a:hover {
  background: var(--maroon);
  color: var(--bone);
}

.empty-sub.small {
  font-size: 0.82rem;
  margin-top: 1.1rem;
}

.platforms span {
  display: inline-block;
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--hair);
  color: rgba(245, 242, 236, 0.4);
}

/* ---------------- the contact sheet ---------------- */

/* Wider than anything else on the page, and the only place the layout is
   allowed to breathe out to the edges. Five prints at 470px would be five
   thumbnails; at full width you can actually see who is playing what. */
/* Deliberately breaks out of the column the rest of the page is set in. The
   section is centred in the viewport, so shifting to its 50% and pulling back
   half the figure's own width lands it centred on the page, not the column. */
.contact-sheet {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 94vw);
  margin: 0;
}

/* No frame or border here: the ground is baked to the page colour so the
   prints read as loose on the page, and an outline would put them back in a
   box. */
.contact-sheet img,
.contact-sheet picture {
  display: block;
  width: 100%;
  height: auto;
}

.contact-sheet figcaption {
  font-family: var(--marker);
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: rgba(245, 242, 236, 0.55);
  margin-top: 1.1rem;
  text-align: center;
  transform: rotate(-0.6deg);
}

/* The credit is a separate line and a separate voice: her name is a fact about
   the photographs, not part of the band's handwriting. */
.contact-sheet .credit {
  display: block;
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.32);
  margin-top: 0.7rem;
  transform: rotate(0.6deg);
}

.contact-sheet .credit a {
  color: inherit;
  text-decoration-color: var(--maroon);
}

.contact-sheet .credit a:hover { color: var(--bone); }

.mail {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

/* ---------------- footer ---------------- */

footer {
  border-top: 2px solid var(--maroon);
  margin-top: 2rem;
  padding: 2.5rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--data);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* ---------------- responsive ---------------- */

@media (max-width: 720px) {
  .disc-layout { grid-template-columns: 1fr; gap: 2rem; }
  .disc-wrap { max-width: 300px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wick { animation: none; width: 100%; }
  .flame-tip { display: none; }
  .disc-sheen { animation: none; }
}