/* ==========================================================================
   LOKUST — v3 shared sections
   The agreed building blocks from round 2 feedback:
   · Cover: H's composition on F's black ground
   · Release: F's record layout + deck (drop the needle) + swap pressing
   · Listen: D layout, A's wide grotesk heading
   · About: F's layout on H's moss halftone band, interactive vinyl marks
   · Join: J's tear-off notice (exactly)
   · Footer: rewind to the top
   site.css adds the final design's own tweaks on top.
   ========================================================================== */

:root {
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --poster: "Anton", Impact, "Arial Narrow", sans-serif;
  --rule: 1px solid var(--slate);
  --dim: rgba(222, 228, 140, 0.6);
  --hard: 6px 6px 0 var(--ink);
  --tape: rgba(241, 203, 78, 0.72);
  --halftone:
    radial-gradient(circle, rgba(18, 17, 19, 0.2) 18%, transparent 20%) 0 0 / 8px 8px,
    var(--moss);
}

html { overflow-x: clip; }
main { overflow-x: clip; }
body { font-family: var(--sans); line-height: 1.5; }
button { cursor: pointer; }

.band { padding: clamp(5rem, 11vw, 10rem) var(--gutter); position: relative; }

.kicker {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding-top: 0.75rem;
  border-top: var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate);
}
.kicker span { color: var(--gold); }

.wide-title {
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---- Masthead ---------------------------------------------------------- */

.masthead {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  border-bottom: var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.masthead nav { display: flex; gap: 1.5rem; }
.masthead a { text-decoration: none; }
.masthead a:hover { color: var(--gold); }

/* ---- Cover: H composition on ink --------------------------------------- */

.cover {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  min-height: calc(100svh - 7rem);
  padding: clamp(1rem, 3vw, 2.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.cover__title { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; font-weight: 400; }
.cover__word {
  display: flex;
  font-family: var(--serif);
  font-size: clamp(6rem, 25vw, 30rem);
  line-height: 0.78;
  letter-spacing: -0.035em;
  margin-left: -0.04em;
  text-shadow: 0.03em 0.03em 0 var(--moss);
}
.cover__records {
  display: block;
  margin-top: 1.2rem;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--gold);
}
.cover__logo {
  grid-column: 7 / -1;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: end;
  position: relative;
  z-index: 2;
  width: min(42vw, 44rem);
  margin-top: clamp(3rem, 10vw, 12rem);
  margin-right: -5vw;
  rotate: 7deg;
  filter: drop-shadow(8px 8px 0 var(--moss));
}
.cutouts {
  grid-column: 1 / 7;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.6rem);
  text-transform: uppercase;
}
.cutouts li { padding: 0.1em 0.5em; box-shadow: 3px 3px 0 var(--moss); translate: var(--px, 0) var(--py, 0); }
.cutouts li:nth-child(1) { background: var(--lime); color: var(--ink); rotate: -1.5deg; }
.cutouts li:nth-child(2) { background: var(--gold); color: var(--ink); rotate: 1deg; margin-left: 1.2rem; }
.cutouts li:nth-child(3) { background: var(--moss); color: var(--lime); rotate: -0.5deg; margin-left: 0.4rem; box-shadow: 3px 3px 0 var(--lime); }

.ticker { --tk-bg: var(--moss); --tk-ink: var(--gold); --tk-edge: var(--ink); }
.ticker b { font-weight: 400; color: var(--lime); }

/* ---- Release: F format + deck ------------------------------------------ */

.release {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.release__title {
  margin-top: 1.5rem;
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(3.5rem, 7.5vw, 7.5rem);
  line-height: 0.88;
  text-transform: uppercase;
}
.release__title span { display: block; color: var(--gold); }

.redacted { margin-top: 2rem; border-top: 2px solid var(--lime); font-family: var(--mono); }
.redacted li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--slate);
  font-weight: 700;
}
.redacted i {
  display: block;
  width: var(--w, 90%);
  height: 1.1em;
  overflow: hidden;
  background: var(--lime);
  color: var(--ink);
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0.85;
}
.release__note { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--dim); }

.deck-controls { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border: 3px solid var(--lime);
  border-radius: 0;
  background: transparent;
  color: var(--lime);
  font-family: var(--poster);
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--moss);
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.2s, color 0.2s;
}
.chip:hover { background: var(--lime); color: var(--ink); }
.chip:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--moss); }
.chip--play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.75rem solid currentColor;
  border-block: 0.48rem solid transparent;
}
.chip--play[aria-pressed="true"]::before { width: 0.75rem; height: 0.95rem; border: 0; border-inline: 0.26rem solid currentColor; }
.deck-note { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.7rem; color: var(--slate); }

.record__disc[data-scratch] { cursor: grab; touch-action: none; }
.record__disc[data-scratch].is-grabbed { cursor: grabbing; }

/* ---- Listen: D layout -------------------------------------------------- */

.listen {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;
  align-items: start;
}
.listen__title { grid-column: 1 / 6; font-size: clamp(3rem, 8vw, 8rem); position: sticky; top: 2.5rem; }
.links { grid-column: 6 / -1; }
.links a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  width: fit-content;
  text-decoration: none;
  color: var(--slate);
  transition: color 0.25s;
}
.links__name {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 8rem);
  line-height: 0.92;
  text-transform: uppercase;
}
.links__note {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 0.25s, transform 0.25s;
}
.links a:hover,
.links a:focus-visible { color: var(--lime); }
.links a:hover .links__note,
.links a:focus-visible .links__note { opacity: 1; transform: none; }

/* ---- About: F layout on the moss halftone band ------------------------- */

.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;
  background: var(--halftone);
  border-block: 3px solid var(--ink);
}
.about .kicker { grid-column: 1 / -1; border-color: rgba(222, 228, 140, 0.45); color: var(--lime); }
.about__title { grid-column: 1 / 5; margin-top: 1.5rem; font-size: clamp(2rem, 5vw, 4.5rem); text-shadow: 0.04em 0.04em 0 var(--ink); }
.about__pull {
  grid-column: 5 / -1;
  margin: 1.5rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.2rem, 5.2vw, 5rem);
  line-height: 1;
  text-shadow: 0.03em 0.03em 0 var(--ink);
}
.about__text { grid-column: 8 / -1; margin-top: 2.5rem; max-width: var(--measure); }

.marks {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: clamp(4rem, 8vw, 7rem);
}
.marks li { width: clamp(9rem, 24vw, 20rem); text-align: center; }
.marks li + li { margin-left: -4%; }
.marks li:nth-child(2) { translate: 0 12%; }
.marks p {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.marks__hint { grid-column: 1 / -1; margin-top: 3rem; text-align: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }

/* Interactive vinyl (lokust.js drives --spin) */
.spin-vinyl {
  display: grid;
  width: 100%;
  padding: 0;
  box-shadow: var(--hard);
  touch-action: none;
  cursor: grab;
  transform: rotate(var(--spin, 0deg));
}
.spin-vinyl.is-grabbed { cursor: grabbing; }
.spin-vinyl .vinyl__label { width: 44%; pointer-events: none; }
.spin-vinyl:focus-visible { outline-offset: 6px; }
.rpm {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.1em 0.5em;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-width: 6.5em;
}
.rpm[hidden] { display: none;
}

/* ---- Join: J's notice (unchanged) -------------------------------------- */

.join { padding: clamp(4rem, 10vw, 9rem) var(--gutter) clamp(5rem, 10vw, 8rem); font-family: var(--mono); }

.flyer-sheet {
  max-width: 72rem;
  margin: 0 auto;
  rotate: 0.8deg;
  filter: drop-shadow(8px 8px 0 var(--moss));
}
.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--gold);
  color: var(--ink);
  border-bottom: 2px dashed var(--ink);
}
.notice__title {
  grid-row: 1 / 3;
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.82;
}
.notice__title .b { display: inline-block; }
.notice__title .b.is-bouncing { animation: boing 0.4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes boing { 40% { transform: translateY(-0.18em) rotate(-8deg) scale(1.1); } }
.notice__lede { align-self: end; max-width: 26rem; font-weight: 700; }

.signup { align-self: start; margin-top: 1.5rem; }
.signup label { display: block; margin-bottom: 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.signup__row { display: flex; }
.signup input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--lime);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
}
.signup input:focus { outline: none; background: #fff8; }
.signup input::placeholder { color: var(--moss); }
.signup input.is-wrong { animation: nope 0.4s; }
@keyframes nope { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.signup button {
  padding: 0.9rem 1.4rem;
  border: 3px solid var(--ink);
  border-left: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--poster);
  font-size: 1.3rem;
  text-transform: uppercase;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate 0.2s, background-color 0.2s, color 0.2s;
}
.signup button:hover { background: var(--moss); color: var(--lime); }
.signup .signup-status { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 700; }
.notice .signup-status[data-state="error"] { color: var(--ink); text-decoration: underline wavy var(--moss); }

.tabs { display: flex; font-family: var(--mono); }
.tabs li {
  flex: 1;
  padding: 0.8rem 0;
  background: var(--gold);
  color: var(--ink);
  border-left: 2px dashed var(--ink);
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  transform-origin: 50% 0;
  transition: transform 0.15s;
  cursor: grab;
}
.tabs li:first-child { border-left: 0; }
.tabs li:hover { transform: rotate(6deg); }
.tabs li.is-torn { visibility: hidden; }
.tabs li.is-tearing { animation: tear 0.7s cubic-bezier(.4, 0, .9, .6) forwards; pointer-events: none; }
@keyframes tear {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(12deg) translateY(4px); }
  100% { transform: rotate(38deg) translate(20px, 260px); opacity: 0; }
}

/* Swarm (sign-up success) + hoppers */
.swarmling, .hopper {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  width: var(--s, 3.2rem);
  filter: drop-shadow(3px 3px 0 var(--ink));
}

/* ---- Footer: rewind ---------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.5rem var(--gutter) 4.5rem;
  border-top: 3px solid var(--lime);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rewind {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--lime);
  border-radius: 0;
  background: transparent;
  color: var(--lime);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rewind:hover { background: var(--lime); color: var(--ink); }
.rewind__icon { display: inline-block; }
.rewind.is-rewinding .rewind__icon { animation: rewind-spin 0.5s linear infinite; }
@keyframes rewind-spin { to { transform: rotate(-360deg); } }

/* ---- Level 2+: reveal, stamp slam -------------------------------------- */

.js [data-level]:not([data-level="1"]) .reveal { opacity: 0; transform: translateY(50px) rotate(-2deg); transition: opacity 0.7s, transform 0.9s cubic-bezier(.2, .9, .3, 1.15); }
.js [data-level]:not([data-level="1"]) .reveal.is-in { opacity: 1; transform: none; }
.js [data-level]:not([data-level="1"]) .record:not(.is-playing) .stamp:not(.is-stamped) { opacity: 0; transform: rotate(-12deg) scale(3); }
.stamp.is-stamped { animation: slam 0.45s cubic-bezier(.5, 0, .7, 1.4); }
@keyframes slam {
  0%   { opacity: 0; transform: rotate(-30deg) scale(3); }
  70%  { opacity: 1; transform: rotate(-10deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
.is-shaking { animation: shake 0.45s; }
@keyframes shake {
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 60em) {
  .cover { min-height: auto; }
  .cover__logo { grid-column: 6 / -1; width: 56vw; margin-top: 16vw; margin-right: -10vw; }
  .cutouts { grid-column: 1 / 9; padding-top: 3rem; }

  .release { grid-template-columns: 1fr; }

  /* single column: record controls sit right under the record, details follow */
  .release { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .release__text { display: contents; }
  .release .record-wrap { order: 0; }
  .release .deck-controls { order: 1; margin-top: 0.25rem; }
  .release .deck-note { order: 2; margin-top: -0.6rem; }
  .release .kicker { order: 3; margin-top: 1.5rem; }
  .release .release__title { order: 4; margin-top: 0; }
  .release .redacted { order: 5; margin-top: 0; }
  .release .release__note { order: 6; margin-top: 0; }


  .listen__title { grid-column: 1 / -1; position: static; margin-bottom: 2rem; }
  .links { grid-column: 2 / -1; }

  .about__title, .about__pull { grid-column: 1 / -1; }
  .about__text { grid-column: 5 / -1; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 36em) {
  .masthead nav a:not(:first-child) { display: none; }

  .cover { display: flex; flex-direction: column; padding-top: 1.5rem; }
  .cover__logo { order: 1; align-self: flex-end; width: 88vw; margin: 0 -14vw 0 0; z-index: 0; }
  .cover__title { order: 2; margin-top: -16vw; }
  .cover__word { font-size: 31vw; }
  .cutouts { order: 3; align-self: flex-start; padding-top: 2.5rem; }

  .links { grid-column: 1 / -1; }
  .links__name { font-size: 17vw; }
  .links__note { display: none; }

  .about__text { grid-column: 1 / -1; }
  .marks li { width: 40vw; }
  .marks li + li { margin-left: -12vw; }

  .notice { grid-template-columns: 1fr; }
  .flyer-sheet { rotate: none; }
  .notice__title { grid-row: auto; font-size: 25vw; }
  .notice__lede { margin-top: 1.5rem; }
  .signup__row { flex-direction: column; }
  .signup button { border-left: 3px solid var(--ink); border-top: 0; }
  .tabs li:nth-child(n + 6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-level] .reveal { opacity: 1 !important; transform: none !important; }
  .js [data-level] .stamp { opacity: 1 !important; transform: rotate(-12deg) !important; }
}