@font-face{font-family:'Archivo Black';src:url('fonts/archivo-black-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('fonts/familjen-grotesk-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('fonts/familjen-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cutive Mono';src:url('fonts/cutive-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* Inks of a photocopied shop zine */
:root {
  --copier: #dcdcd7;   /* grey copier paper */
  --toner: #151515;    /* toner black */
  --riso: #2a45c9;     /* the one spot ink */
  --halftone: #8a8c8e; /* toner grey */
  --stamp: 'Archivo Black', 'Arial Black', sans-serif;
  --text: 'Familjen Grotesk', 'Arial', sans-serif;
  --typed: 'Cutive Mono', 'Courier New', monospace;
  --tight: -0.04em;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--copier);
  /* faint toner speckle, like a third-generation copy */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(21,21,21,.14) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 70% 80%, rgba(21,21,21,.11) 0 1px, transparent 1.6px),
    radial-gradient(circle at 45% 55%, rgba(138,140,142,.22) 0 1.2px, transparent 2px),
    linear-gradient(180deg, rgba(21,21,21,.05), transparent 30%, rgba(21,21,21,.04) 70%, transparent);
  background-size: 5px 5px, 9px 9px, 23px 17px, 100% 340px;
  color: var(--toner);
  font-family: var(--text);
  font-size: 1.075rem;
  line-height: 1.5;
}
a { color: var(--riso); text-underline-offset: .2em; }
a:hover, a:focus-visible { color: var(--toner); }
:focus-visible { outline: 3px solid var(--riso); outline-offset: 3px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

.typed { font-family: var(--typed); font-size: 1rem; }

/* ---------- hero ---------- */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 3px solid var(--toner);
}
.masthead nav a { color: var(--toner); margin-left: 1.25rem; font-weight: 700; text-decoration: none; }
.masthead nav a:hover, .masthead nav a:focus-visible { color: var(--riso); text-decoration: underline; }

#hero {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center;
  padding: 3rem 0 4rem;
}
.stamp-title {
  font-family: var(--stamp);
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 10.5rem);
  line-height: .82;
  letter-spacing: var(--tight);
  margin: 0;
  text-transform: uppercase;
  color: var(--toner);
  text-shadow: 6px 5px 0 var(--riso); /* off-register second pass */
}
.stamp-title .amp { color: var(--copier); -webkit-text-stroke: 3px var(--toner); text-shadow: 6px 5px 0 var(--riso); }
.lede { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; max-width: 26ch; margin: 1.75rem 0 .75rem; line-height: 1.2; }
.hero-note { max-width: 44ch; margin: 0; }

.label-wrap { position: relative; display: grid; justify-items: center; gap: 1rem; }
#white-label { width: min(100%, 440px); height: auto; }
#white-label .spin {
  transform-origin: 200px 200px;
  animation: slow-turn 14s linear infinite;
}
@keyframes slow-turn { to { transform: rotate(360deg); } }

.btn {
  font-family: var(--text); font-weight: 700; font-size: 1rem;
  background: var(--toner); color: var(--copier);
  border: 2px solid var(--toner); border-radius: 0;
  padding: .7rem 1.1rem; cursor: pointer;
  box-shadow: 4px 4px 0 var(--riso);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--riso); }
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--riso); }
.btn.quiet { background: transparent; color: var(--toner); font-family: var(--typed); font-weight: 400; }

/* ---------- section heads ---------- */
.section-head {
  font-family: var(--stamp); font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: var(--tight);
  line-height: .95; margin: 0 0 1.5rem; text-transform: uppercase;
}
.section-head span { background: var(--riso); color: var(--copier); padding: 0 .2em; }
section { padding: 3.5rem 0; }

/* ---------- shelf cards ---------- */
#shelf-cards .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.card {
  background: #f4f4f1; border: 2px solid var(--toner);
  padding: 1.5rem 1.4rem 1.6rem; position: relative;
  transform: rotate(-1.5deg);
  box-shadow: 5px 6px 0 var(--halftone);
}
.card:nth-child(2) { transform: rotate(1.2deg); }
.card:nth-child(3) { transform: rotate(-.6deg); }
.card::before { /* tape strip */
  content: ""; position: absolute; top: -12px; left: 38%; width: 70px; height: 22px;
  background: rgba(42,69,201,.35); transform: rotate(-4deg);
}
.card h3 { font-family: var(--stamp); font-weight: 400; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 .6rem; line-height: 1; }
.card p { margin: 0 0 .6rem; }
.card .typed { color: var(--riso); }

/* ---------- week programme ---------- */
#week-programme .grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 3px solid var(--toner); background: #f4f4f1;
}
.day { padding: 1rem .8rem 1.2rem; border-right: 2px solid var(--toner); min-height: 9.5rem; }
.day:last-child { border-right: 0; }
.day h3 { font-family: var(--stamp); font-weight: 400; font-size: 1.25rem; margin: 0 0 .5rem; letter-spacing: -0.02em; }
.day p { font-family: var(--typed); margin: 0; }
.day.closed { background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(138,140,142,.35) 8px 10px); }
.day.closed h3 { text-decoration: line-through; text-decoration-thickness: 3px; }
.day.session { background: var(--toner); color: var(--copier); }
.day.session .typed-session { color: #9fb0ff; display: block; margin-top: .6rem; }

/* ---------- thursday title card ---------- */
#thursday-card {
  background: var(--toner); color: var(--copier);
  padding: 5rem 1.5rem; text-align: center;
}
#thursday-card .kicker { font-family: var(--typed); margin: 0 0 1.5rem; color: var(--halftone); }
#thursday-card h2 { font-family: var(--text); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin: 0 auto; max-width: 24ch; line-height: 1.25; }
#thursday-card .time { font-family: var(--stamp); font-size: clamp(3.5rem, 10vw, 7rem); letter-spacing: var(--tight); color: var(--copier); text-shadow: 5px 4px 0 var(--riso); display: block; margin-top: 1.5rem; line-height: 1; }

/* ---------- listening corner ---------- */
#corner .split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: center; }
#listening-corner-drawing svg { width: 100%; height: auto; }
#turntable-pair .platter-spin { transform-box: fill-box; transform-origin: center; animation: slow-turn 14s linear infinite; }

/* ---------- counter ---------- */
#counter { border-top: 3px solid var(--toner); }
#counter .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
address { font-style: normal; font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.signup label { display: block; font-weight: 700; margin-bottom: .5rem; }
.signup .row { display: flex; gap: .75rem; flex-wrap: wrap; }
.signup input {
  flex: 1 1 14rem; font: inherit; padding: .7rem .8rem;
  border: 2px solid var(--toner); border-radius: 0; background: #f4f4f1; color: var(--toner);
}
footer { padding: 2rem 0 3rem; font-family: var(--typed); color: #4a4b4d; }

/* ---------- entrance ---------- */
.js .reveal { transform: translateY(14px); transition: transform .9s ease; }
.js .reveal.in { transform: none; }

/* pause control */
[data-motion="paused"] * { animation-play-state: paused !important; }

@media (max-width: 860px) {
  #hero, #corner .split, #counter .split { grid-template-columns: 1fr; }
  #shelf-cards .cards { grid-template-columns: 1fr; }
  #week-programme .grid { grid-template-columns: 1fr; }
  .day { border-right: 0; border-bottom: 2px solid var(--toner); min-height: 0; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
  .day:last-child { border-bottom: 0; }
  .day h3 { min-width: 6.5rem; margin: 0; }
  .day.session .typed-session { margin-top: 0; }
  .masthead { flex-direction: column; gap: .5rem; }
  .masthead nav { font-family: var(--typed); }
  .masthead nav a { margin: 0 1rem 0 0; font-weight: 400; text-decoration: underline; text-transform: lowercase; }
  #thursday-card { padding: 4.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}