/* ==========================================================
   topsecret.fm — editorial brand layer
   "Marginalised voices first — the best kept secret."
   Loaded after each page's own <style>, so it restyles the
   shared classes without touching any page's scripts.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,400;1,6..72,600&display=swap');

:root{
  --paper: #F7E9DD;
  --paper-2: #FBF3EC;
  --ink: #1B1330;
  --ink-soft: #4A4160;
  --ink-body: #2D1B4E;
  --accent: #FF4D6D;        /* fills, dots, bars */
  --accent-text: #C81D40;   /* accent used as small text on paper (AA contrast) */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  /* keep old variable names pointing at the new palette */
  --bg: var(--paper);
  --purple: var(--ink);
  --purple-deep: var(--ink);
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
h1,h2,h3,.brand{ font-family: var(--serif); font-weight: 600; }
.wrap{ max-width: 1200px; }
a{ color: inherit; }
::selection{ background: var(--ink); color: var(--paper); }

/* ---------- hand-drawn rules ---------- */
.rule{ display:block; width:100%; height:auto; color: var(--ink); }
.rule path{ fill: currentColor; }
.rule--thick{ height: 14px; }
.rule--thin{ height: 8px; }
.rule-pair{ display:flex; flex-direction:column; gap:4px; }

/* ---------- masthead ---------- */
.masthead{ padding: 28px 0 0; }
.mast-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size: 12px; font-weight:600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-soft);
}
.mast-main{
  display:flex; justify-content:space-between; align-items:center; gap: 24px;
  margin-top: 10px;
}
.wordmark{
  font-family: var(--serif); font-weight:600;
  font-size: clamp(44px, 7.5vw, 96px); line-height: 1;
  letter-spacing: -0.015em; color: var(--ink); text-decoration:none;
}
.masthead--compact .wordmark{ font-size: clamp(36px, 5vw, 56px); }
.strapline{
  margin: 12px 0 18px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 2vw, 22px); color: var(--ink-soft);
}
.strapline strong{ font-style: italic; font-weight:600; color: var(--ink); }

/* nav row (keeps the old .navlinks / .navtoggle hooks) */
.masthead nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0; border-bottom: none; position: relative; max-width:none; margin:0;
}
.masthead .navlinks{ display:flex; gap: 30px; list-style:none; flex-wrap: wrap; }
.masthead .navlinks a{
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink); text-decoration:none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.masthead .navlinks a:hover{ color: var(--accent-text); border-bottom-color: var(--accent-text); }
.masthead .navlinks a.active{ color: var(--ink); border-bottom-color: var(--ink); }

/* listen button: square, ink */
.navlisten{
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  padding: 14px 26px; min-height: 44px;
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap;
}
.navlisten:hover{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.navlisten.playing{ background: var(--paper); color: var(--ink); }
.navlisten .dot{ background: var(--accent); }
.navlisten.playing .dot{ background: var(--accent); }

.masthead .navtoggle{ display:none; }
.navtoggle{ border:1px solid var(--ink); width:44px; height:44px; padding:0; margin:0; }
.navtoggle span{ width:20px; margin:4px auto; background: var(--ink); }

/* ---------- buttons ---------- */
.btn{
  border-radius: 0; border: 1px solid var(--ink);
  padding: 14px 24px; min-height: 44px;
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none; justify-content:center;
}
.btn-fill, .btn.btn-fill{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-fill:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-outline, .btn.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--paper); }
.btn-ink{ background: var(--ink); color: var(--paper); }
.btn-ink:hover{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-on-ink{ border-color: var(--paper); color: var(--paper); background: transparent; }
.btn-on-ink:hover{ background: var(--paper); color: var(--ink); }

/* ---------- labels ---------- */
.kicker{
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent-text); margin: 0;
}
.kicker--soft{ color: var(--ink-soft); }
.fig{ font-size: 11px; font-weight:600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }

/* ---------- inner-page header ---------- */
.pagehero, .pagehero[class], .chat-hero, .pin-hero{
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
  padding: 48px 0 40px;
}
.pagehero .wrap, .chat-hero .wrap, .pin-hero .wrap{ max-width: 1200px; }
.pagehero .eyebrow, .chat-hero .eyebrow, .pin-hero .eyebrow, .pagehero.yellow .eyebrow{
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--accent-text) !important; opacity: 1; margin-bottom: 16px;
}
.pagehero h1, .chat-hero h1, .pin-hero h1{
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.015em;
  color: var(--ink); max-width: 16ch;
}
.pagehero p, .chat-hero p, .pin-hero p, .pagehero.yellow p{
  font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); line-height: 1.45;
  color: var(--ink-body) !important; max-width: 40ch; margin-top: 20px;
}
.page-figure{ margin: 0 0 8px; }
.page-figure img{ width:100%; height: clamp(220px, 34vw, 440px); object-fit: cover; display:block; }

/* ---------- inner-page content ---------- */
.content, .content.wrap{ padding: 32px 32px 64px; }
.content .lead{
  font-family: var(--serif); font-size: 21px; line-height: 1.6;
  color: var(--ink-body); max-width: 60ch; margin-bottom: 48px;
}
.content .lead a{ color: var(--ink) !important; border-bottom: 1px solid var(--ink); text-decoration:none; }
.content h2.sectiontitle, .sectiontitle{
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-soft);
  border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 24px;
}
.tilegrid{ gap: 0 32px; margin-bottom: 56px; }
.tile{
  border: none; border-radius: 0; border-top: 1px solid var(--ink);
  padding: 18px 0 24px; background: transparent;
}
.tile h3{ font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-bottom: 8px; color: var(--ink); }
.tile p{ font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.quoteblock{
  border: none; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: 40px 0; margin: 0 0 56px; max-width: none; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25;
}
.infobox{
  background: transparent; border: 1px solid var(--ink); border-radius: 0;
  padding: 26px 28px; margin-bottom: 20px;
}
.infobox h3{ font-family: var(--serif); font-size: 22px; margin-bottom: 8px; }
.infobox p{ font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.infobox a{ color: var(--ink) !important; border-bottom: 1px solid var(--ink); text-decoration: none; }

/* chatroom / pinboard frames */
.chat-window{ border-radius: 0 !important; border: 1px solid var(--ink) !important; }
.chat-send, .pin-submit{ border-radius: 0 !important; background: var(--ink) !important; color: var(--paper) !important; }

/* ---------- footer ---------- */
footer{
  background: var(--paper); color: var(--ink-soft);
  padding: 0 0 36px; margin-top: 32px;
}
footer .rule{ margin-bottom: 28px; }
.footgrid{ border-bottom: 1px solid var(--ink); padding-bottom: 32px; }
.footgrid .brand{ color: var(--ink); font-size: 30px; margin-bottom: 8px; }
.footgrid p{ font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-soft); max-width: 28ch; }
.footcol h4{ font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--ink-soft); }
.footcol a{ color: var(--ink); font-size: 14px; }
.footcol a:hover{ color: var(--accent-text); }
.footbottom{ color: var(--ink-soft); font-size: 12px; line-height: 1.6; }

/* ==========================================================
   Homepage
   ========================================================== */
.home-lead{
  display:grid; grid-template-columns: 7fr 5fr; gap: 0 40px; padding-top: 36px;
}
.home-lead figure{ margin:0; }
.home-lead img{
  width:100%; height: 100%; min-height: 380px; max-height: 540px;
  object-fit: cover; display:block; filter: grayscale(1) contrast(1.1);
}
.home-lead__text{
  border-left: 1px solid var(--ink); padding-left: 32px;
  display:flex; flex-direction:column; gap: 18px; justify-content:center;
}
.home-lead__text h1{
  font-family: var(--serif); font-size: clamp(40px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -0.01em;
}
.home-lead__text .byline{ font-size: 12px; font-weight:600; letter-spacing: 1px; color: var(--ink-soft); }
.home-lead__text p.deck{ font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink-body); }
.home-lead__ctas{ display:flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }

/* on-air strip with live now-playing */
.onair{ margin-top: 40px; border: 1px solid var(--ink); display:flex; align-items:center; gap: 24px; padding: 18px 24px; }
.onair__label{ display:flex; align-items:center; gap: 10px; white-space:nowrap; }
.onair__label .live-dot{ width:9px; height:9px; border-radius:50%; background: var(--accent); animation: pulse 1.2s infinite; }
.onair .np-card{
  background: transparent; color: var(--ink); border-radius: 0; padding: 0; max-width: none; flex: 1; min-width: 0;
}
.onair .np-art{ border-radius: 0; background: var(--ink); }
.onair .np-art-placeholder{ color: var(--paper); }
.onair .np-label{ color: var(--ink-soft); }
.onair .np-title{ font-family: var(--serif); font-size: 22px; font-weight: 600; }
.onair .np-artist{ color: var(--ink-soft); font-size: 14px; }
.onair .np-progressbar{ background: rgba(27,19,48,0.15); border-radius: 0; height: 2px; }
.onair .np-progress{ background: var(--accent); }
.onair .np-time{ color: var(--ink-soft); }

/* ruled columns */
.home-section{ padding-top: 44px; }
.home-section > .sectiontitle{ margin-bottom: 20px; }
.cols{ display:grid; gap: 0; }
.cols--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.cols > *{ padding: 0 28px; border-right: 1px solid var(--ink); display:flex; flex-direction:column; gap: 10px; }
.cols > *:first-child{ padding-left: 0; }
.cols > *:last-child{ padding-right: 0; border-right: none; }
/* ---------- newsletter signup ---------- */
.signup{ border: 1px solid var(--ink); background: var(--paper-2); padding: 32px 36px; display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:center; }
.signup h3{ font-family: var(--serif); font-size: 30px; line-height: 1.15; color: var(--ink); margin: 6px 0 8px; }
.signup p{ font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.signup-form{ display:flex; gap: 10px; flex-wrap: wrap; }
.signup-form input[type=email]{ flex: 1 1 220px; min-width: 0; font: 500 15px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 13px 14px; }
.signup-form input[type=email]:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.signup-form .btn{ cursor:pointer; }
.signup-form .btn[disabled]{ opacity: .6; cursor: wait; }
.signup-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.signup-msg{ flex-basis: 100%; font-size: 13.5px; min-height: 1.3em; color: var(--ink-soft); }
.signup-msg.is-ok{ color: var(--ink); font-weight: 600; }
.signup-msg.is-err{ color: var(--accent-text); font-weight: 600; }
@media (max-width: 760px){
  .signup{ grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
  .signup h3{ font-size: 26px; }
}

/* multi-row 3-column grids */
.cols--3{ row-gap: 36px; }
.cols--3 > *:nth-child(3n+1){ padding-left: 0; }
.cols--3 > *:nth-child(3n){ padding-right: 0; border-right: none; }
.cols h3{ font-family: var(--serif); font-size: 25px; line-height: 1.2; color: var(--ink); }
.cols p{ font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.cols .when{ font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-text); }
.cols .go{ margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); align-self: flex-start; }
.cols .go:hover{ color: var(--accent-text); border-color: var(--accent-text); }
a.desk-card{ text-decoration:none; color: inherit; }
a.desk-card:hover h3{ color: var(--accent-text); }

/* photo strip */
.field{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.field figure{ margin: 0; }
.field img{ width:100%; aspect-ratio: 4 / 3; object-fit: cover; display:block; }

/* ink band */
.band{ margin-top: 52px; background: var(--ink); color: var(--paper); display:grid; grid-template-columns: 1fr 1fr; }
.band > div{ padding: 36px 40px; display:flex; flex-direction:column; gap: 10px; align-items:flex-start; }
.band > div + div{ border-left: 1px solid rgba(247,233,221,0.3); }
.band .kicker{ color: var(--accent); }
.band h3{ font-family: var(--serif); font-size: 30px; line-height: 1.15; color: var(--paper); }
.band p{ font-size: 15px; line-height: 1.55; color: #D9CFE0; max-width: 46ch; }
.band .btn{ margin-top: 8px; }

/* notice */
.notice-box{ margin-top: 44px; border: 1px solid var(--ink); padding: 24px 28px; display:grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.notice-box .stamp{
  font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--accent-text);
  border: 1.5px solid var(--accent-text); padding: 6px 10px; transform: rotate(-3deg); white-space: nowrap;
}
.notice-box h3{ font-family: var(--serif); font-size: 22px; margin-bottom: 6px; }
.notice-box p{ font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
.notice-box a{ color: var(--ink); }

@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 900px){
  .home-lead{ grid-template-columns: 1fr; gap: 20px; }
  .home-lead img{ min-height: 0; height: 300px; }
  .home-lead__text{ border-left: none; padding-left: 0; }
  .cols--3, .cols--4{ grid-template-columns: 1fr; row-gap: 0; }
  .cols > *{ padding: 16px 0 !important; border-right: none; border-top: 1px solid var(--ink); }
  .cols > *:last-child{ border-bottom: 1px solid var(--ink); }
  .field{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .band{ grid-template-columns: 1fr; }
  .band > div + div{ border-left: none; border-top: 1px solid rgba(247,233,221,0.3); }
  .band > div{ padding: 28px 22px; }
}
@media (max-width: 760px){
  .wrap{ padding: 0 16px; }
  .content, .content.wrap{ padding: 24px 16px 48px; }
  .masthead{ padding-top: 18px; }
  .mast-top .mast-right{ display:none; }
  .mast-main{ gap: 12px; }
  .navlisten{ padding: 12px 14px; font-size: 12px; }
  .masthead nav{ padding: 8px 0; justify-content: flex-end; }
  .masthead .navtoggle{ display:block; }
  .masthead .navlinks{
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; background: var(--paper); border: 1px solid var(--ink);
    padding: 4px 16px 8px; gap: 0; flex-wrap: nowrap;
  }
  .masthead .navlinks.open{ display: flex; }
  .masthead .navlinks a{ display:block; padding: 14px 0; font-size: 14px; border-bottom: none; }
  .masthead .navlinks li{ border-bottom: 1px solid rgba(27,19,48,0.15); }
  .masthead .navlinks li:last-child{ border-bottom: none; }
  .onair{ flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .notice-box{ grid-template-columns: 1fr; }
  .tilegrid{ grid-template-columns: 1fr; }
  .footgrid{ grid-template-columns: 1fr 1fr; }
  .footbottom{ flex-direction: column; }
}

/* chatroom input: let fields shrink so Send never clips on phones */
.chat-inputbar input{ min-width: 0; }
.chat-send{ flex-shrink: 0; }
.chat-wrap{ margin-top: 0 !important; }

/* page swap in progress: the logo becomes the cursor and a wobbling logo loader appears */
.ts-loading, .ts-loading *{ cursor: url("logo-cursor.png") 16 16, progress !important; }
.ts-loading main, .ts-loading .content{ opacity: .6; transition: opacity .15s; }

@keyframes ts-wobble{
  0%,100%{ transform: rotate(-14deg) translateY(0); }
  50%    { transform: rotate(14deg) translateY(-6px); }
}
@keyframes ts-appear{ from{ opacity: 0; } to{ opacity: 1; } }
.ts-loader{
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 72px; height: 72px; pointer-events: none;
  background: url("logo.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
  display: none;
}
/* short delay so a fast page swap doesn't flash the loader */
.ts-loading .ts-loader{
  display: block; opacity: 0;
  animation: ts-appear .2s .15s forwards, ts-wobble .7s ease-in-out infinite;
}

/* Listen button while the stream is connecting: the dot turns into the logo */
.navlisten.buffering .dot{
  width: 22px !important; height: 22px !important; border-radius: 0 !important;
  background: url("logo.png") center / contain no-repeat !important;
  animation: ts-wobble .7s ease-in-out infinite !important;
  vertical-align: middle;
}
.navlisten.buffering, .js-tune-in.buffering{ cursor: url("logo-cursor.png") 16 16, progress; }

@media (prefers-reduced-motion: reduce){
  .ts-loading .ts-loader{ animation: ts-appear .2s .15s forwards; }
  .navlisten.buffering .dot{ animation: none !important; }
}

/* links inside body copy */
.tile p a, .content .infobox p a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.tile p a:hover{ color: var(--accent-text); border-color: var(--accent-text); }

/* ---------- the logo, front and centre ---------- */
.wordmark{ display:inline-flex; align-items:center; gap: .18em; }
.wordmark-logo{
  width: 1.25em; height: 1.25em; flex-shrink:0; margin: -.12em 0 -.12em -.06em;
  transform: rotate(-6deg); transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.wordmark:hover .wordmark-logo{ transform: rotate(8deg) scale(1.06); }

/* big stamp over the lead photo: the one splash of colour on a black-and-white page */
.home-lead figure{ position: relative; }
.home-lead img.lead-stamp{
  position:absolute; right: -18px; bottom: 4px; z-index: 2;
  width: clamp(130px, 18vw, 220px); height:auto; min-height:0; max-height:none;
  object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
  transform: rotate(-10deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.home-lead figure:hover img.lead-stamp{ transform: rotate(4deg) scale(1.05); }

/* now-playing art: the logo stands in until real cover art loads */
.np-art-placeholder img{ width: 82%; height: 82%; object-fit: contain; display:block; margin:auto; }

/* footer */
.foot-brand{ display:flex; align-items:center; gap: 10px; }
.foot-brand img{ width: 44px; height: 44px; flex-shrink:0; }

@media (max-width: 760px){
  /* phones: the logo + name get the full row, Listen live drops beneath */
  .mast-main{ flex-wrap: wrap; row-gap: 10px; }
  .wordmark{ font-size: clamp(30px, 10.4vw, 44px); min-width: 0; }
  .masthead--compact .wordmark{ font-size: clamp(28px, 9vw, 40px); }
  .navlisten{ flex-shrink: 0; }
  .home-lead img.lead-stamp{ right: 8px; bottom: 16px; width: 112px; }
}
@media (prefers-reduced-motion: reduce){
  .wordmark-logo, .home-lead img.lead-stamp{ transition: none; }
}

/* ---------- the secret logo (placed by site.js) ---------- */
.ts-egg{
  position: absolute; z-index: 40; width: 40px; height: 40px;
  background: url("logo-lg.png") center / contain no-repeat;
  transform: rotate(var(--egg-tilt, -12deg)); opacity: .9;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s;
  animation: ts-peek 7s ease-in-out infinite;
}
.ts-egg:hover, .ts-egg:focus-visible{ opacity: 1; transform: rotate(0deg) scale(1.35); animation: none; }
.ts-egg:focus-visible{ outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 50%; }
.ts-egg--found{ animation: ts-found .9s ease-in forwards !important; }
@keyframes ts-peek{
  0%, 88%, 100%{ transform: rotate(var(--egg-tilt, -12deg)); }
  92%{ transform: rotate(calc(var(--egg-tilt, -12deg) + 18deg)) scale(1.1); }
  96%{ transform: rotate(calc(var(--egg-tilt, -12deg) - 12deg)); }
}
@keyframes ts-found{
  30%{ transform: rotate(0) scale(1.6); opacity: 1; }
  100%{ transform: rotate(360deg) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .ts-egg{ animation: none; transition: none; }
  .ts-egg--found{ animation: none !important; opacity: 0; }
}

/* ==========================================================
   Merch & Hot Sauce: guest drops
   ========================================================== */
.drop-tiers{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 32px; margin-bottom: 56px; }
.drop-tier{ border-top: 1px solid var(--ink); padding: 18px 0 8px; }
.drop-tier__no{ font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); }
.drop-tier h3{ font-family: var(--serif); font-size: 30px; line-height: 1.1; margin: 10px 0 6px; color: var(--ink); }
.drop-tier__when{ font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink-body); margin: 0 0 14px; }
.drop-tier ul{ list-style: none; padding: 0; margin: 0; }
.drop-tier li{ font-size: 15px; line-height: 1.5; color: var(--ink-soft); padding: 9px 0 9px 22px; border-top: 1px dotted rgba(27,19,48,.3); position: relative; }
.drop-tier li::before{ content: "+"; position: absolute; left: 2px; top: 8px; font-weight: 700; color: var(--accent-text); }
.drop-tier--top{ border-top: 4px solid var(--accent); padding-top: 15px; }
.drop-tier--top .drop-tier__no{ color: var(--accent-text); }

.drop-how{ display:grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; margin-bottom: 8px; }
.drop-file{
  position: relative; background: var(--paper-2); border: 1px solid var(--ink);
  padding: 30px 28px 26px; transform: rotate(-1.5deg);
  box-shadow: 6px 6px 0 var(--ink);
}
.drop-file__stamp{
  position: absolute; top: 18px; right: 18px; transform: rotate(8deg);
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-text); border: 2px solid var(--accent-text); padding: 5px 10px;
}
.drop-file__row{ display:flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(27,19,48,.18); font-size: 15px; }
.drop-file__row:first-of-type{ padding-top: 0; }
.drop-file__row span{ flex: 0 0 74px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.drop-file__row b{ font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.drop-file__redact{ background: var(--ink); color: var(--ink) !important; padding: 0 6px; user-select: none; transition: color .25s; }
.drop-file:hover .drop-file__redact{ color: var(--paper) !important; }
.drop-file__logo{ display:block; width: 72px; height: 72px; margin: 18px 0 0 auto; transform: rotate(-8deg); }

.drop-steps{ list-style: none; counter-reset: step; padding: 0; margin: 0; }
.drop-steps li{ counter-increment: step; display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; padding: 16px 0; border-top: 1px solid var(--ink); }
.drop-steps li::before{ content: "0" counter(step); grid-row: span 2; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--accent-text); }
.drop-steps h3{ font-family: var(--serif); font-size: 22px; line-height: 1.2; margin: 0 0 4px; color: var(--ink); }
.drop-steps p{ font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.drop-band{ margin: 56px 0 24px; }
#hot-sauce{ padding-top: 8px; }

@media (max-width: 900px){
  .drop-tiers{ grid-template-columns: 1fr; gap: 28px; }
  .drop-how{ grid-template-columns: 1fr; gap: 36px; }
  .drop-file{ transform: none; box-shadow: 4px 4px 0 var(--ink); }
  .drop-band{ grid-template-columns: 1fr; }
  .drop-band > div + div{ border-left: none; border-top: 1px solid rgba(247,233,221,0.3); }
}
@media (max-width: 760px){
  .band > div{ padding: 28px 22px; }
}

/* ==========================================================
   Dossier layer — the Top Secret Records look, site-wide.
   Pure styling: no markup or script hooks are changed.
   ========================================================== */
:root{ --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }

/* --- monospace "file" labels --- */
.kicker, .fig, .sectiontitle, .content h2.sectiontitle,
.pagehero .eyebrow, .chat-hero .eyebrow, .pin-hero .eyebrow, .pagehero.yellow .eyebrow,
.home-lead__text .byline, .footcol h4, .mast-top{
  font-family: var(--mono) !important; font-weight: 600; letter-spacing: .14em;
}
.content h2.sectiontitle::before, .sectiontitle::before{
  content:""; display:inline-block; width: 9px; height: 9px; background: var(--accent);
  margin-right: 10px; vertical-align: 0;
}

/* --- inner-page heroes become the dark dossier --- */
.pagehero, .pagehero[class], .chat-hero, .pin-hero{
  position: relative; overflow: hidden;
  background-color: var(--ink) !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 80% 45%, rgba(255,77,109,.22), transparent 60%),
    repeating-radial-gradient(circle at 88% 50%, rgba(247,233,221,.05) 0 1px, transparent 1px 9px) !important;
  color: var(--paper) !important;
  padding: 72px 0 80px;
}
.pagehero h1, .chat-hero h1, .pin-hero h1{
  color: var(--paper) !important; font-size: clamp(48px, 7.5vw, 104px); line-height: .92; letter-spacing: -.03em;
}
.pagehero .eyebrow, .chat-hero .eyebrow, .pin-hero .eyebrow, .pagehero.yellow .eyebrow{ color: var(--accent) !important; }
.pagehero p, .chat-hero p, .pin-hero p, .pagehero.yellow p{ color: rgba(247,233,221,.86) !important; }
.pagehero a, .chat-hero a, .pin-hero a{ color: var(--paper); }
.pagehero::after, .chat-hero::after, .pin-hero::after{
  content: "DECLASSIFIED"; position: absolute; right: 7%; top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  font-family: var(--mono); font-weight: 600; font-size: 22px; letter-spacing: .2em;
  color: var(--accent); border: 3px solid var(--accent); padding: 8px 16px 6px;
  pointer-events: none;
}
@media (max-width: 960px){
  .pagehero::after, .chat-hero::after, .pin-hero::after{ display:none; }
  .pagehero, .pagehero[class], .chat-hero, .pin-hero{ padding: 48px 0 56px; }
}

/* --- ticker strip under the masthead --- */
.ts-ticker{ background: var(--accent); color: var(--ink); overflow:hidden; white-space:nowrap; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.ts-ticker > div{ display:inline-block; padding: 11px 0; font-family: var(--mono); font-weight:600; font-size: 12.5px; letter-spacing:.14em; text-transform:uppercase; animation: ts-tick 40s linear infinite; }
.ts-ticker span{ padding: 0 20px; }
@keyframes ts-tick{ to{ transform: translateX(-50%); } }

/* --- buttons: hard offset shadow --- */
.btn{ font-family: var(--mono); letter-spacing: .12em; transition: transform .12s, box-shadow .12s, background .15s, color .15s; }
.btn-fill, .btn.btn-fill{ box-shadow: 4px 4px 0 var(--ink); }
.btn-ink, .btn-outline, .btn.btn-outline{ box-shadow: 4px 4px 0 var(--accent); }
.btn-on-ink{ box-shadow: 4px 4px 0 var(--accent); }
.btn:hover{ transform: translate(-2px,-2px); }
.btn-fill:hover{ box-shadow: 6px 6px 0 var(--accent); }
.btn-ink:hover, .btn-outline:hover, .btn-on-ink:hover{ box-shadow: 6px 6px 0 var(--ink); }
.btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--accent); }

/* --- tiles get catalogue numbers --- */
.tilegrid{ counter-reset: tsfile; }
.tilegrid .tile{ counter-increment: tsfile; transition: background .2s; padding-left: 4px; padding-right: 4px; }
.tilegrid .tile::before{
  content: "No. " counter(tsfile, decimal-leading-zero);
  display:block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--accent-text); margin-bottom: 8px;
}
.tilegrid .tile:hover{ background: var(--paper-2); }

/* --- boxes read as memos and slips --- */
.infobox{ border: 1.5px dashed var(--ink); background: var(--paper-2); }
.notice-box{ border-style: dashed !important; border-width: 1.5px !important; background: var(--paper-2); }
.signup{ box-shadow: 8px 8px 0 var(--ink); }
.onair{ box-shadow: 6px 6px 0 var(--accent); background: var(--paper-2); }
.quoteblock{ border-top-width: 2px; border-bottom-width: 2px; }
.quoteblock::first-letter{ color: var(--accent); }

/* --- dark bands and photos --- */
.band{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 85% 30%, rgba(255,77,109,.2), transparent 55%);
}
.home-lead figure, .page-figure{ position: relative; }
.home-lead__text h1{ letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce){
  .ts-ticker > div{ animation: none; }
  .btn, .btn:hover, .btn:active{ transform: none; transition: none; }
}
.pagehero + .wrap .page-figure, .pagehero ~ .content .page-figure:first-child{ margin-top: 40px; }
.chat-window{ margin-top: 40px !important; box-shadow: 8px 8px 0 var(--accent) !important; }