/* BROKEN RECORD RADIO, the station's papers. Her ask (2026-10-21 late): looking through a collage, papers and things about the
   band, newspaper clippings, an imaginary album insert, nostalgicore. Everything here is paper on a corkboard: clippings,
   polaroids under tape, ticket stubs, index cards, liner notes, cassette cards, sticky notes, rubber stamps. Her reading type
   (Crimson Pro, Lora italic for asides); the typewriter is the computer's own Courier, a stand in. One colour scheme, no dark mode. */
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 200 900; font-display: swap; size-adjust: 112%; src: url(/fonts/crimson.woff2) format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 200 900; font-display: swap; size-adjust: 112%; src: url(/fonts/crimson-italic.woff2) format("woff2"); }
@font-face { font-family: Lora; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/lora.woff2) format("woff2"); }
@font-face { font-family: Lora; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/lora-italic.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --cork: #a87c4f;
  --cork-dark: #8a6239;
  --news: #ece4d2;
  --news-ink: #23201b;
  --cream: #f8f1e1;
  --manila: #e9d29a;
  --pink: #f2c6cf;
  --mint: #cfe3cf;
  --sticky: #f7e27a;
  --red: #b3322b;
  --blue: #2f4f86;
  --plum: #1f1224;
  --gold: #c9a24b;
  --type: "Courier New", Courier, ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--cork);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.10) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 60%, rgba(0,0,0,.07) 0 1px, transparent 1.5px);
  background-size: 9px 11px, 13px 7px, 5px 9px;
  color: var(--news-ink);
  font: 18px/1.45 "Crimson Pro", Georgia, serif;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* the station's own strip across the top: a label maker tape */
.masthead { background: var(--plum); color: var(--cream); padding: 10px 16px 12px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
.masthead .name { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 1.05rem; }
.masthead .line { font: italic 15px Lora, serif; opacity: .8; }
.masthead nav { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.masthead nav a {
  font: 700 13px/1 var(--type); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  background: #111; color: #f4f4f4; padding: 5px 8px 4px; border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(255,255,255,.12);
}
.masthead nav a[aria-current] { background: var(--red); }

/* the board: pieces fall into columns, each a little crooked */
.board { column-width: 310px; column-gap: 22px; padding: 26px 16px 70px; max-width: 1400px; margin: 0 auto; }
.board > *, #papers > *, #ballots > * { break-inside: avoid; margin: 0 0 24px; transform: rotate(var(--r, 0deg)); display: block; }
#papers { display: contents; }
.wide { column-span: all; }
h1, h2, h3 { margin: 0; }

/* NEWSPAPER CLIPPING: newsprint, a ragged cut on both ends */
.clip {
  background: var(--news); padding: 16px 16px 18px; box-shadow: 2px 3px 8px rgba(0,0,0,.35);
  clip-path: polygon(0 2%, 4% 0, 9% 1.5%, 15% 0, 22% 1%, 30% 0, 38% 1.8%, 46% 0, 55% 1%, 63% 0, 71% 1.6%, 80% 0, 88% 1.2%, 95% 0, 100% 1.5%,
                     100% 98%, 96% 100%, 90% 98.5%, 83% 100%, 75% 98.8%, 67% 100%, 58% 98.4%, 50% 100%, 41% 98.7%, 33% 100%, 25% 98.5%, 17% 100%, 9% 98.6%, 3% 100%, 0 98%);
  background-image: linear-gradient(rgba(120,100,60,.06), rgba(120,100,60,.12));
}
.clip .paper { font: 700 11px/1 var(--type); letter-spacing: .2em; text-transform: uppercase; border-bottom: 3px double var(--news-ink); padding-bottom: 6px; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.clip h2, .clip h1 { font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; font-size: 1.9rem; }
.clip h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.clip .deck { font-style: italic; margin: 6px 0 8px; border-bottom: 1px solid rgba(0,0,0,.3); padding-bottom: 6px; }
.clip p { margin: 0 0 8px; text-align: justify; hyphens: auto; }
.clip p:first-of-type::first-letter { float: left; font-size: 3.1em; line-height: .8; font-weight: 900; padding: 4px 6px 0 0; }
.clip.small h2 { font-size: 1.35rem; }
.clip.cols p { columns: 2 150px; column-gap: 16px; column-rule: 1px solid rgba(0,0,0,.25); }
.credit { font: 12px/1.3 var(--type); opacity: .75; margin-top: 8px; }
.credit a { opacity: 1; }

/* POLAROID under tape */
.polaroid { background: #fbfbf7; padding: 12px 12px 14px; box-shadow: 2px 4px 10px rgba(0,0,0,.4); position: relative; max-width: 330px; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.35) saturate(.85) contrast(1.05); background: #333; }
.polaroid .cap { font: italic 17px/1.25 Lora, serif; margin-top: 10px; text-align: center; }
.tape { position: relative; }
.tape::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(240,228,180,.75); box-shadow: 0 1px 2px rgba(0,0,0,.15); z-index: 2;
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}
.tape.pink::before { background: rgba(242,170,190,.7); }
.tape.mint::before { background: rgba(170,215,180,.7); }

/* TICKET STUB */
.ticket {
  background: var(--pink); padding: 14px 18px 14px 26px; position: relative; box-shadow: 2px 3px 7px rgba(0,0,0,.35);
  border-left: 2px dashed rgba(0,0,0,.35); font-family: var(--type);
  -webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 98%, #000) , radial-gradient(circle 8px at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ticket .admit { font-weight: 700; letter-spacing: .3em; font-size: 12px; border: 2px solid var(--news-ink); display: inline-block; padding: 2px 6px; margin-bottom: 8px; }
.ticket .big { font: 900 1.5rem/1 "Crimson Pro", serif; text-transform: uppercase; }
.ticket dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; font-size: 14px; }
.ticket dt { opacity: .7; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; padding-top: 3px; }
.ticket dd { margin: 0; }

/* INDEX CARD, typed */
.card {
  background: #fdfdf8; padding: 34px 16px 14px 46px; position: relative; font: 15px/24px var(--type); box-shadow: 2px 3px 7px rgba(0,0,0,.3);
  background-image: linear-gradient(transparent 33px, #e88 33px, #e88 35px, transparent 35px),
                    repeating-linear-gradient(transparent 0 23px, #a9c3e6 23px 24px);
  background-position: 0 0, 0 35px; background-repeat: no-repeat, repeat; background-size: 100% 100%, 100% 24px;
}
.card::after { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 1.5px; background: #e88; }
.card h3 { position: absolute; top: 8px; left: 46px; right: 12px; font: 700 14px var(--type); text-transform: uppercase; letter-spacing: .12em; }
.card b { text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.card p { margin: 0; }

/* STICKY NOTE */
.sticky { background: var(--sticky); padding: 18px 16px; font: italic 17px/1.35 Lora, serif; box-shadow: 3px 5px 8px rgba(0,0,0,.3); max-width: 300px; }
.sticky h3 { font: 700 15px Lora, serif; font-style: normal; margin-bottom: 6px; }
.sticky ul { margin: 0; padding-left: 18px; }

/* LINER NOTES: the imaginary album insert, a folded card with a colour band */
.insert { background: var(--cream); box-shadow: 2px 4px 10px rgba(0,0,0,.35); position: relative; }
.insert .band { background: var(--blue); color: var(--cream); padding: 12px 16px; }
.insert .band h2 { font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: 1.25rem; }
.insert .band .sub { font: italic 14px Lora, serif; opacity: .85; }
.insert ol { list-style: none; margin: 0; padding: 10px 14px 14px; counter-reset: side; }
.insert li { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dotted rgba(0,0,0,.3); }
.insert li:last-child { border-bottom: 0; }
.insert .cover { width: 54px; height: 54px; background: repeating-linear-gradient(45deg, #ddd 0 4px, #ccc 4px 8px); box-shadow: 1px 1px 3px rgba(0,0,0,.3); overflow: hidden; }
.insert .cover img { width: 54px; height: 54px; object-fit: cover; }
.insert .t { font-weight: 700; line-height: 1.15; }
.insert .y { font: 13px var(--type); opacity: .7; }
.insert .fold { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.02)); pointer-events: none; }

/* RUBBER STAMP */
.stamp {
  display: inline-block; font: 900 12px/1 var(--type); letter-spacing: .14em; text-transform: uppercase; color: var(--red);
  border: 2.5px solid var(--red); border-radius: 4px; padding: 4px 6px 3px; transform: rotate(-6deg); opacity: .85;
  mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.6) 100%);
}
.stamp.blue { color: var(--blue); border-color: var(--blue); }
.stamp.gold { color: #8a6a1f; border-color: #8a6a1f; }
.stamps { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 6px 0; }

/* CASSETTE J-CARD: songs on the air */
.jcard { background: var(--mint); box-shadow: 2px 3px 8px rgba(0,0,0,.35); display: grid; grid-template-columns: 34px 1fr; }
.jcard .spine { background: var(--news-ink); color: var(--mint); writing-mode: vertical-rl; transform: rotate(180deg); font: 700 12px var(--type); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; text-align: center; }
.jcard .side { padding: 12px 14px; }
.jcard h3 { font: 700 13px var(--type); letter-spacing: .15em; text-transform: uppercase; border-bottom: 2px solid var(--news-ink); padding-bottom: 4px; margin-bottom: 6px; }
.jcard ol { margin: 0; padding-left: 22px; font: 15px/1.5 var(--type); }
.jcard a { text-decoration: underline dotted; }

/* LIBRARY CARD of places to read more */
.library { background: var(--manila); padding: 14px 16px; box-shadow: 2px 3px 7px rgba(0,0,0,.3); font: 14px/1.5 var(--type); }
.library h3 { font: 700 13px var(--type); letter-spacing: .2em; text-transform: uppercase; text-align: center; border-bottom: 1px solid rgba(0,0,0,.4); padding-bottom: 6px; margin-bottom: 6px; }
.library ul { list-style: none; margin: 0; padding: 0; }
.library li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(0,0,0,.15); padding: 3px 0; }

/* TYPED LETTER (Discogs and other notes) */
.letter { background: #fffdf5; padding: 20px 20px 22px; font: 15px/1.55 var(--type); box-shadow: 2px 3px 8px rgba(0,0,0,.3); white-space: pre-line; border-top: 6px solid var(--gold); }

/* RECORD SLEEVE for what is playing now */
.sleeve { background: #fbfbf7; padding: 12px; box-shadow: 3px 5px 12px rgba(0,0,0,.45); }
.sleeve img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sleeve .what { font-weight: 900; font-size: 1.6rem; line-height: 1.05; margin-top: 10px; text-transform: uppercase; }
.sleeve .who { font: italic 1.15rem Lora, serif; }
.sleeve button, .button {
  font: 700 14px var(--type); letter-spacing: .12em; text-transform: uppercase; background: var(--red); color: #fff; border: 0;
  padding: 10px 14px; margin-top: 10px; cursor: pointer; border-radius: 2px; box-shadow: 0 3px 0 #6d1d18; text-decoration: none; display: inline-block;
}
.sleeve button:active { transform: translateY(2px); box-shadow: 0 1px 0 #6d1d18; }
.setlist { background: #fffdf5; padding: 14px 16px; font: 15px/1.6 var(--type); box-shadow: 2px 3px 7px rgba(0,0,0,.3);
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(0,0,0,.08) 23px 24px); }
.setlist h3 { font: 700 13px var(--type); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; }
.setlist ol { margin: 0; padding-left: 20px; }

/* THE WALL: every artist as a small card */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; padding: 22px 16px 60px; max-width: 1400px; margin: 0 auto; }
.wall a { text-decoration: none; transform: rotate(var(--r, 0deg)); display: block; background: #fdfdf8; padding: 10px 12px; box-shadow: 2px 3px 6px rgba(0,0,0,.3); font: 14px/1.3 var(--type); }
.wall a:nth-child(5n+2) { background: var(--pink); } .wall a:nth-child(5n+3) { background: var(--mint); }
.wall a:nth-child(5n+4) { background: var(--manila); } .wall a:nth-child(7n) { background: var(--sticky); }
.wall a b { display: block; font: 800 1.05rem/1.1 "Crimson Pro", serif; text-transform: uppercase; margin-bottom: 4px; }
.wall a:hover, .wall a:focus { transform: rotate(0deg) scale(1.04); z-index: 2; position: relative; }
.letters { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 16px 0; max-width: 1400px; margin: 0 auto; }
.letters a { font: 700 14px var(--type); background: var(--news-ink); color: var(--cream); padding: 4px 8px; text-decoration: none; }
.wall h2 { grid-column: 1 / -1; font: 900 2rem "Crimson Pro", serif; color: var(--cream); text-shadow: 1px 2px 0 rgba(0,0,0,.4); margin-top: 10px; }

/* the calendar page pinned to the board (the plan) */
.calendar { background: #fffdf5; box-shadow: 2px 4px 10px rgba(0,0,0,.35); }
.calendar .top { background: var(--red); color: #fff; padding: 10px 14px; font: 900 1.3rem "Crimson Pro", serif; text-transform: uppercase; letter-spacing: .06em; }
.calendar table { width: 100%; border-collapse: collapse; font: 14px/1.35 var(--type); }
.calendar td, .calendar th { border-bottom: 1px solid rgba(0,0,0,.15); padding: 6px 10px; text-align: left; vertical-align: top; }
.calendar th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.calendar tr.now td { background: var(--sticky); }

.pin { position: relative; }
.pin::before { content: ""; position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #ff8a8a, var(--red) 60%, #6d1d18); box-shadow: 1px 2px 3px rgba(0,0,0,.4); z-index: 3; }
/* THE BALLOT BOX: ballots are clippings with boxes to mark; results are tally marks */
.ballot .mark { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dotted rgba(0,0,0,.3); cursor: pointer; font-size: 1.05rem; }
.ballot input[type=radio] { appearance: none; width: 20px; height: 20px; border: 2px solid var(--news-ink); background: #fff; flex: none; margin: 0; }
.ballot input[type=radio]:checked { background: linear-gradient(45deg, transparent 44%, var(--red) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--red) 44% 56%, transparent 56%), #fff; }
.ballot input[type=radio]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ballot .button { margin-top: 12px; }
.tally { list-style: none; padding: 0; margin: 6px 0 0; font: 15px/1.4 var(--type); }
.tally li { display: grid; grid-template-columns: 1fr auto 2.5em; gap: 8px; padding: 5px 0; border-bottom: 1px dotted rgba(0,0,0,.3); align-items: center; }
.tally li.yours span:first-child::after { content: " \2190 yours"; color: var(--red); font-size: 12px; }
.tally .marks { color: var(--red); letter-spacing: 1px; font-weight: 700; white-space: nowrap; overflow: hidden; max-width: 9em; }
.tally b { text-align: right; }
.ballot-box { background: var(--plum); color: var(--cream); padding: 18px; box-shadow: 3px 5px 12px rgba(0,0,0,.45); text-align: center; font: italic 17px Lora, serif; }
.ballot-box .slot { width: 60%; height: 10px; background: #000; margin: 0 auto 12px; border-radius: 5px; box-shadow: inset 0 2px 4px rgba(255,255,255,.15); }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
footer { color: var(--cream); font: italic 15px Lora, serif; text-align: center; padding: 0 16px 40px; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
footer a { color: var(--cream); }
@media (max-width: 520px) { body { font-size: 17px; } .board { padding: 18px 16px 50px; } .clip.cols p { columns: 1; } }

/* THE PAGES THAT SUPPORT THE BOOM BOX (2026-10-23): the shows banner, the slips people fill in (a tape, a dedication), the wall of
   tapes, the guest book's ledger pages, the television wall. The same papers and the same type as the rest of the board. */
.banner { display: block; position: relative; text-decoration: none; box-shadow: 3px 5px 12px rgba(0,0,0,.45); transform: rotate(-.4deg); }
.banner img { width: 100%; height: auto; }
.banner span { position: absolute; right: 12px; bottom: 10px; background: var(--red); color: #fff; font: 700 13px var(--type); letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 10px; box-shadow: 0 2px 0 #6d1d18; }
.setlist li.now { background: var(--sticky); }
.slip label { display: block; margin: 0 0 10px; font: 700 12px var(--type); letter-spacing: .1em; text-transform: uppercase; }
.slip input, .slip textarea { display: block; width: 100%; margin-top: 4px; font: 17px/1.35 "Crimson Pro", Georgia, serif; color: var(--news-ink);
  background: #fffdf5; border: 0; border-bottom: 2px solid var(--news-ink); padding: 6px 4px; border-radius: 0; text-transform: none; letter-spacing: 0; }
.slip textarea { border: 2px solid var(--news-ink); resize: vertical; }
.slip input:focus, .slip textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
.slip fieldset { border: 1px dashed rgba(0,0,0,.45); margin: 4px 0 12px; padding: 8px 10px 12px; }
.slip legend { font: 700 12px var(--type); letter-spacing: .1em; text-transform: uppercase; padding: 0 6px; }
.slip ol { margin: 0; padding-left: 26px; }
.slip ol li { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; margin-bottom: 6px; }
.slip ol li input { margin: 0; }
.slip fieldset > input { margin-bottom: 6px; }
.slip audio { display: block; width: 100%; margin-top: 10px; }
.slip p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; font-weight: inherit; }
.button.small { font-size: 12px; padding: 8px 10px; }
.button.blue { background: var(--blue); box-shadow: 0 3px 0 #1b2f52; }
.button[disabled] { opacity: .55; cursor: default; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jcard .sideb { margin-top: 8px; }
.jcard.pink { background: var(--pink); } .jcard.manila { background: var(--manila); } .jcard.sticky { background: var(--sticky); }
.jcard.blue { background: #c9d6ee; }
.jcard .dedication { font: italic 16px/1.4 Lora, serif; border-top: 2px solid var(--news-ink); margin: 10px 0 0; padding-top: 8px; }
.jcard ol i { opacity: .7; font-style: normal; font-size: 13px; }
.ledger { background: #fffdf5; padding: 14px 16px; box-shadow: 2px 3px 7px rgba(0,0,0,.3);
  background-image: repeating-linear-gradient(transparent 0 25px, rgba(47,79,134,.18) 25px 26px); }
.ledger h3 { font: 700 1.2rem "Crimson Pro", serif; text-transform: uppercase; letter-spacing: .06em; color: var(--red); margin-bottom: 6px; }
.ledger ol { list-style: none; margin: 0; padding: 0; font: italic 16px/26px Lora, serif; }
.ledger span { font: 12px var(--type); font-style: normal; opacity: .65; display: inline-block; min-width: 5.5em; }
.tvcontrols { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 16px 12px; }
.tvwall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 8px 16px 50px; max-width: 1100px; margin: 0 auto; }
.tvset { background: linear-gradient(#6b4a2e, #4a3020); border-radius: 14px; padding: 12px 12px 8px; box-shadow: 3px 6px 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.15); }
.tvset.s1 { background: linear-gradient(#cfc6b4, #9d927e); } .tvset.s2 { background: linear-gradient(#3a3a3a, #1f1f1f); }
.tvset .glass { background: #0a060e; border-radius: 22px / 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: inset 0 0 18px rgba(0,0,0,.9); }
.tvset canvas { width: 100%; height: 100%; display: block; }
.tvset .under { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.tvset .ch { font: 700 12px var(--type); color: var(--cream); background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 3px; margin-right: auto; }
.tvset .knob { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eee, #888 60%, #333); }
@media (max-width: 700px) { .tvwall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 520px) { .slip ol li { grid-template-columns: 1fr; gap: 2px; margin-bottom: 10px; } }