/* =========================================================
   SETTINGS: the knobs you'll most likely want to turn.
   ========================================================= */
:root {
  /* Film grain strength. 0 = off. Try 0.1 (fainter) up to 1 (strongest). */
  --grain-strength: 0.25;

  /* Seconds for one full turn of the tape reels. Bigger = slower. */
  --reel-speed: 10s;

  /* How wide the text column can get. */
  --column-width: 34rem;

  /* Strictly black and white. */
  --paper: #fff;
  --ink: #000;

  /* Always light, even if the visitor's device is in dark mode. */
  color-scheme: light;
}


/* =========================================================
   FONT: Special Elite, stored in our own /fonts folder
   (no outside requests). Apache 2.0 licensed, see fonts/.
   ========================================================= */
@font-face {
  font-family: "Special Elite";
  src: url("fonts/SpecialElite-Regular.ttf") format("truetype");
  font-display: swap; /* show Courier until the font loads, then swap */
}


/* =========================================================
   PAGE BASICS
   ========================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px;              /* side gutter on phones */
  background: var(--paper);
  color: var(--ink);
  font-family: "Special Elite", "Courier New", Courier, monospace;
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* Special Elite has only one weight, so stop browsers faking bold. */
h1, h2, h3, b { font-weight: normal; }

h2 {
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 2rem;
}

h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 3rem 0 0.5rem;
}

a { color: var(--ink); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

main {
  max-width: var(--column-width);
  margin: 0 auto;
  padding-bottom: 8rem;
}

/* Big gaps between sections = lots of white space. */
section { margin: 0 0 8rem; }


/* =========================================================
   FILM GRAIN
   A see-through layer of noise laid over the whole page.
   The noise is drawn by a tiny SVG written right here (the
   "data:" part), so nothing is downloaded. It's made of black
   specks only. The xmlns address inside is just a label SVG
   requires; the browser never visits it.
   ========================================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;          /* clicks pass straight through */
  opacity: var(--grain-strength);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 0 0 0 -2.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* =========================================================
   TOP: IMAGE + TYPED TITLE
   ========================================================= */
.top {
  text-align: center;
  padding: 3rem 0 6rem;
}

/* The box holding the picture and the two spinning reels. */
.recorder {
  position: relative;            /* reels are placed relative to this box */
  max-width: 46rem;
  margin: 0 auto;
}

.recorder img {
  display: block;
  width: 100%;
  height: auto;
}

.typewriter {
  font-size: clamp(2rem, 8vw, 3.25rem);
  margin: 2rem 0 0;
  min-height: 1.5em;             /* keeps the space reserved while typing */
}

/* Hidden until script.js is ready to type (only when JavaScript is on). */
.js .typewriter { visibility: hidden; }
.js .typewriter.ready { visibility: visible; }



/* =========================================================
   SPINNING REELS
   Each .reel is a round window placed exactly over one reel
   in the picture. It shows the same picture, cropped to that
   reel, and spins. Everything is in percentages, so it stays
   lined up at any screen size.

   The numbers are measured from the 1600 x 1200 picture:
     --cx, --cy = center of the reel (pixels)
     --r        = radius of the round window (pixels). 240 sits on the
                  middle of the thick black ring, so the edge is hidden.
   If you ever swap the picture for a different size, change 1600/1200 below.
   ========================================================= */
.reel-left  { --cx: 448.4; --cy: 464.5; --r: 240; }
.reel-right { --cx: 1184.5; --cy: 458.4; --r: 240; }

.reel {
  position: absolute;
  left:  calc((var(--cx) - var(--r)) / 1600 * 100%);
  top:   calc((var(--cy) - var(--r)) / 1200 * 100%);
  width: calc(var(--r) * 2 / 1600 * 100%);
  aspect-ratio: 1;                       /* a perfect square... */
  clip-path: circle(50%);                /* ...cut into a circle */

  /* The same picture, scaled and shifted so this reel lines up. */
  background-image: url("images/Reel%20to%20Reel%20With%20Steelie.png");
  background-size: calc(1600 / (var(--r) * 2) * 100%) auto;
  background-position:
    calc((var(--cx) - var(--r)) / (1600 - var(--r) * 2) * 100%)
    calc((var(--cy) - var(--r)) / (1200 - var(--r) * 2) * 100%);

  animation: spin var(--reel-speed) linear infinite;
}

/* Positive degrees = clockwise. */
@keyframes spin { to { transform: rotate(360deg); } }


/* =========================================================
   1. TITLE + STAGE QUOTE
   ========================================================= */
.stage-quote { margin: 0; text-align: center; }
.stage-quote blockquote { margin: 0; font-size: 1.15rem; }
.stage-quote figcaption { margin-top: 0.75rem; }

.divider {
  text-align: center;
  letter-spacing: 0.6em;
  margin: 5rem 0 0;
}


/* =========================================================
   2. LYRICS
   ========================================================= */
.credits {
  text-align: center;
  margin: -1rem 0 4rem;
}

.stanza { margin: 0 0 2.5rem; }

/* One lyric line. If it has to wrap, the wrapped part is indented
   ("hanging indent") so it doesn't look like a new line. */
.line {
  display: block;
  padding-left: 1.5em;
  text-indent: -1.5em;
}

/* Fade-in on scroll. script.js adds "is-visible" when a stanza scrolls into view. */
.js .reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.notes { margin: 0; }


/* =========================================================
   3. SHOW LISTS
   Each show: the date on the left, venue and recording on the
   right, so all the dates line up in a neat column.
   ========================================================= */
.shows h2 { margin-top: 5rem; }
.shows h2:first-child { margin-top: 0; }

.show-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.show-list li {
  display: grid;
  grid-template-columns: 6.5em 1fr;   /* date column | everything else */
  column-gap: 1em;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.show-list .venue  { grid-column: 2; }
.show-list .source { grid-column: 2; font-size: 0.85em; }


/* =========================================================
   4. LISTEN LINK
   ========================================================= */
.listen {
  text-align: center;
  font-size: 1.2rem;
}


/* =========================================================
   5. INTERVIEW
   ========================================================= */
.interview figure,
.interview blockquote { margin: 0; }

.interview p { margin: 0 0 1.5rem; }

/* Speaker names in small capitals. */
.speaker {
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.12em;
}

.interview figcaption { text-align: right; }

/* Typewriter tradition: book titles are underlined, not italic. */
cite {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* =========================================================
   REDUCED MOTION
   If the visitor's device asks for less motion: no typing,
   no fading, no spinning. Everything just shows.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .js .typewriter { visibility: visible; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .reel { animation: none; }
}