/* ==========================================================================
   TEMPO TEMPO — design floor
   Six colour roles, two families, one accent. Everything a section builds
   derives from here. Sections never redefine a token globally.
   ========================================================================== */

:root {
  /* --- the six roles ------------------------------------------------- */
  --sc-canvas:     #100C09;   /* record-shop dark, warm, never pure black  */
  --sc-surface:    #1C1511;
  --sc-ink:        #F3EADC;
  --sc-ink-soft:   #A28E77;   /* tinted from the canvas hue, not grey      */
  --sc-accent:     #E8452F;   /* sleeve orange                             */
  --sc-accent-ink: #140C08;

  /* --- the page's own extensions -------------------------------------- */
  --tt-paper:      #EDE2CE;   /* card stock: the only light ground         */
  --tt-paper-ink:  #191108;
  --tt-paper-soft: #6A5B44;
  --tt-gold:       #E8B33C;   /* used for one role only: the correct year  */
  --tt-accent-deep:#A82C19;   /* the same hue, second stop, for the paper ground */
  --tt-groove:     #2A211A;
  --tt-line:       color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --tt-line-strong:color-mix(in oklab, var(--sc-ink) 26%, transparent);

  --sc-font-display: "Archivo", "Archivo Variable", system-ui, sans-serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;

  /* the engine's elevation tokens read this as an HSL triple. Warm, not neutral. */
  --sc-shadow-color: 24 55% 3%;

  /* rail / disc geometry shared across sections */
  --tt-disc: clamp(9rem, 15vw, 15rem);
}

/* Wide-and-heavy is the display voice. One place, so every section agrees. */
.tt-display {
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 800, "wdth" 112;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
.tt-display--xl { font-size: clamp(2.9rem, 8.4vw, 7.4rem); }
.tt-display--lg { font-size: clamp(2.3rem, 5.6vw, 4.6rem); }
.tt-display--md { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }

.tt-num {
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 800, "wdth" 78;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tt-label {
  font-family: var(--sc-font-text);
  font-size: clamp(0.68rem, 0.82vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  font-weight: 600;
}

.tt-body {
  font-family: var(--sc-font-text);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
  letter-spacing: 0.005em;
  max-width: 58ch;
  color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-canvas));
  text-wrap: pretty;
  margin: 0;
}
.tt-lede {
  font-family: var(--sc-font-text);
  font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  line-height: 1.5;
  max-width: 46ch;
  color: color-mix(in oklab, var(--sc-ink) 88%, var(--sc-canvas));
  margin: 0;
}

/* --- page ground ------------------------------------------------------- */
html { background: var(--sc-canvas); }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  overflow-x: clip;
}

/* Paper grain over the whole document. 4%: the difference between a dark
   page and a lit room. */
.tt-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- shared shell ------------------------------------------------------ */
.tt-wrap {
  width: min(100% - 2 * var(--sc-gutter, 1.4rem), 82rem);
  margin-inline: auto;
}
.tt-sec { position: relative; }

/* --- the one button -------------------------------------------------- */
.tt-cta {
  --_bg: var(--sc-accent);
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.95em 1.5em;
  background: var(--_bg);
  color: var(--sc-accent-ink);
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 750, "wdth" 100;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  letter-spacing: 0.01em;
  border: 0; border-radius: 2px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 34%, transparent) inset,
              0 10px 26px -14px hsl(var(--sc-shadow-color) / 0.9);
  transition: transform 140ms var(--sc-ease-out, cubic-bezier(.23,1,.32,1)),
              background-color 140ms linear;
}
@media (hover: hover) and (pointer: fine) {
  .tt-cta:hover { --_bg: color-mix(in oklab, var(--sc-accent) 88%, #fff); transform: translateY(-1px); }
}
.tt-cta:active { transform: translateY(1px) scale(0.985); }
.tt-cta--ghost {
  background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--tt-line-strong);
}
@media (hover: hover) and (pointer: fine) {
  .tt-cta--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- site bar ---------------------------------------------------------- */
.tt-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.85rem, 1.5vw, 1.35rem) clamp(1rem, 3vw, 2.4rem);
  pointer-events: none;
  transition: background-color 260ms linear, backdrop-filter 260ms linear;
}
.tt-bar > * { pointer-events: auto; }
/* Opaque, not translucent. The close act cuts to a cream ground, and a
   near-black at 78% over #EDE2CE is literally cream mixed with soot, which
   reads as muddy olive. Committing to one bar identity for the whole page
   keeps the wordmark and the CTA on the colours they were designed against
   and leaves no scroll state to synchronise. On this ground the wordmark
   measures 16.66:1, the accent 5.03:1, the CTA label on the accent 4.90:1. */
.tt-bar.is-stuck {
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--tt-line);
}
.tt-mark {
  font-family: var(--sc-font-display);
  font-variation-settings: "wght" 850, "wdth" 118;
  font-size: clamp(0.94rem, 1.35vw, 1.14rem);
  letter-spacing: -0.015em;
  color: var(--sc-ink);
  text-decoration: none;
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 0.42em;
}
.tt-mark b { color: var(--sc-accent); font-weight: inherit; }
.tt-bar .tt-cta { padding: 0.7em 1.15em; font-size: 0.86rem; }

/* --- section head pattern (used sparingly) ----------------------------- */
.tt-head { display: grid; gap: clamp(0.9rem, 1.6vw, 1.4rem); }

/* --- card stock, the page's one physical object ------------------------ */
.tt-card {
  position: relative;
  background:
    linear-gradient(150deg,
      color-mix(in oklab, var(--tt-paper) 100%, #fff 6%) 0%,
      var(--tt-paper) 46%,
      color-mix(in oklab, var(--tt-paper) 92%, #000) 100%);
  color: var(--tt-paper-ink);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.5) inset,
    0 1px 2px hsl(var(--sc-shadow-color) / 0.5),
    0 18px 40px -22px hsl(var(--sc-shadow-color) / 0.95);
}
.tt-card::after {
  /* raking light across the stock */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(112deg, rgb(255 255 255 / 0.34) 0%, transparent 32%,
                                       transparent 68%, rgb(0 0 0 / 0.08) 100%);
  pointer-events: none;
}

/* --- utility ----------------------------------------------------------- */
.tt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tt-rule { height: 1px; background: var(--tt-line); border: 0; margin: 0; }

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .tt-grain { opacity: 0.04; }
}

/* ==========================================================================
   The corner disc. The page's signature move: the platter turns with your
   scroll, wears the cover of the song nearest the middle of the screen, and
   can be dragged to scrub the whole document.
   ========================================================================== */
.tt-disc {
  /* One fixed label colour. It used to be set per song from the deck, which
     made the disc a readout of whatever record was nearest; it is an ordinary
     record now, so the label is the house paper stock and never changes. */
  --tt-disc-c: #E4D7BE;
  --tt-disc-mx: 0.5;
  --tt-disc-my: 0.5;
  position: fixed;
  right: clamp(0.9rem, 2.2vw, 2rem);
  bottom: clamp(0.9rem, 2.2vw, 2rem);
  width: var(--tt-disc);
  aspect-ratio: 1;
  z-index: 45;
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px hsl(var(--sc-shadow-color) / 0.85));
  animation: tt-disc-in 700ms 900ms var(--sc-ease-out, cubic-bezier(.23,1,.32,1)) both;
}
@keyframes tt-disc-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.tt-disc.is-grabbable { pointer-events: auto; cursor: grab; }
.tt-disc.is-dragging  { cursor: grabbing; }

.tt-disc__spin {
  position: absolute; inset: 0;
  border-radius: 50%;
  will-change: transform;
}
.tt-disc__vinyl {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #0B0806 0 1px,
      var(--tt-groove) 1px 2px,
      #0B0806 2px 3.4px),
    radial-gradient(circle at 50% 50%, #14100C 0 34%, #0A0806 34% 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    inset 0 0 30px rgb(0 0 0 / 0.7);
}
/* A plain paper label: the stock, one printed ring, and the darkening the
   press leaves at the edge. Nothing on it, because at 4.2rem on a phone any
   type would be a smudge. */
.tt-disc__label {
  position: absolute; inset: 31%;
  width: 38%; height: 38%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55), inset 0 0 12px rgb(0 0 0 / 0.4);
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 54%,
      color-mix(in oklab, var(--tt-accent-deep, #A82C19) 70%, transparent) 54% 57%,
      transparent 57% 100%),
    radial-gradient(circle at 38% 32%,
      color-mix(in oklab, var(--tt-disc-c) 60%, #fff) 0%,
      var(--tt-disc-c) 58%,
      color-mix(in oklab, var(--tt-disc-c) 76%, #000) 100%);
}
.tt-disc__spindle {
  position: absolute; left: 50%; top: 50%;
  width: 5.2%; height: 5.2%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sc-canvas);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}
/* one specular sweep, following the pointer, so the disc reads as lacquer */
.tt-disc__sheen {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    58% 58% at calc(var(--tt-disc-mx) * 100%) calc(var(--tt-disc-my) * 100%),
    color-mix(in oklab, var(--tt-disc-c) 40%, #fff) 0%,
    transparent 62%);
  opacity: 0.16;
  mix-blend-mode: screen;
  transition: opacity 200ms linear;
}
@media (hover: hover) and (pointer: fine) {
  .tt-disc:hover .tt-disc__sheen { opacity: 0.3; }
}

/* Phones: it stays, small and out of the way, and never eats a tap. It is
   also ornament here and nothing else, because the drag is a pointer gesture
   and touch never gets it, so it steps back to a watermark rather than sitting
   on top of the game act's cards at full strength. */
@media (max-width: 620px) {
  .tt-disc {
    --tt-disc: 4.2rem;
    right: 0.7rem;
    bottom: 0.7rem;
    pointer-events: none !important;
    opacity: 0.55;
    filter: drop-shadow(0 8px 14px hsl(var(--sc-shadow-color) / 0.7));
  }
  .tt-disc.is-grabbable { cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-disc { animation: none; }
}
@media print { .tt-disc, .tt-grain { display: none; } }

/* skip link: invisible until focused, then a real, readable control */
.tt-skip:focus-visible,
.tt-skip:focus {
  position: fixed; top: 0.6rem; left: 0.6rem;
  width: auto; height: auto; margin: 0; padding: 0.7em 1.1em;
  clip: auto; overflow: visible; white-space: normal;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-weight: 700;
  border-radius: 2px; z-index: 100; text-decoration: none;
}

/* Short windows: the disc rises into the content. Shrink it rather than let it
   clip an act's lower-right object. Found on the rules act at 1440x720. */
@media (max-height: 820px) and (min-width: 621px) {
  .tt-disc { --tt-disc: clamp(6.5rem, 10vw, 9.5rem); }
}
@media (max-height: 620px) {
  .tt-disc { --tt-disc: 5.2rem; opacity: 0.9; }
}