/* Street Hood Media. One stylesheet for the public site. */
/* Layout: a wall of CCFF00 with black ink on it. Sections are cut by hazard tape and
   thick black rules. One huge thing per section, everything else small.
   Single committed look by choice: the color is the brand, so there is no dark theme. */
:root {
  --wall: #CCFF00;        /* the lead color: backgrounds, plates */
  --wall-deep: #B7E600;   /* halftone dots and quiet fills on the wall */
  --ink: #0A0A0A;         /* all type on the wall, rules, dark boards */
  --ink-soft: #2B3400;    /* secondary type on the wall */
  --paper: #FFFFFF;       /* body type and marks on black */
  --rule-on-ink: #4E6100; /* quiet rules on black */
  --display: 'Big Shoulders Display', 'Big Shoulders', 'Arial Narrow', Impact, sans-serif;
  --sign: 'Overpass', 'Helvetica Neue', Arial, sans-serif;   /* Highway Gothic family: the street sign face */
  --data: 'Overpass Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter: 20px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--wall);
  background-image: radial-gradient(var(--wall-deep) 1.3px, transparent 1.5px);
  background-size: 14px 14px;
  color: var(--ink);
  font-family: var(--sign);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
}
a { color: inherit; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--data); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- live bar ---------- */
.livebar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--ink); color: var(--wall);
}
.livebar .wrap { display: flex; align-items: center; gap: 14px; padding-block: 9px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--wall); flex: none; animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }
.livebar strong { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.06em; white-space: nowrap; }
.livebar .say { color: var(--paper); font-size: 0.92rem; min-width: 0; flex: 1; }
.livebar a.join {
  margin-left: auto; flex: none; text-decoration: none;
  background: var(--wall); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 14px;
}
.livebar a.join:hover { background: var(--paper); }

/* ---------- header and sign plate ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; flex-wrap: wrap; }
.plate { display: inline-flex; align-items: stretch; text-decoration: none; font-family: var(--sign); font-weight: 900; text-transform: uppercase; line-height: 1; }
.plate .name { background: var(--wall); color: var(--ink); border: 4px solid var(--ink); border-radius: 9px 0 0 9px; padding: 9px 14px 6px; font-size: 1.45rem; letter-spacing: 0.05em; }
.plate .tab { background: var(--ink); color: var(--wall); border: 4px solid var(--ink); border-radius: 0 9px 9px 0; padding: 9px 12px 6px; font-size: 1.45rem; letter-spacing: 0.05em; }
.nav { display: flex; gap: 26px; flex-wrap: wrap; }
.nav a { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--display); font-weight: 900; font-size: 1.45rem; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  padding: 17px 24px 15px; border: 4px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--wall);
  transition: transform 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--wall); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--wall); box-shadow: none; }
.on-ink .btn { border-color: var(--wall); background: var(--wall); color: var(--ink); }
.on-ink .btn:hover { background: var(--ink); color: var(--wall); box-shadow: 6px 6px 0 var(--wall); }
.door .btn { border-color: var(--ink); background: var(--ink); color: var(--wall); }
.door .btn:hover { background: var(--wall); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-within { outline: 4px solid var(--paper); outline-offset: 3px; box-shadow: 0 0 0 4px var(--ink); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(20px, 4vw, 48px) clamp(48px, 7vw, 88px); }
.hero h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(4.2rem, 13vw, 11rem); line-height: 0.9; letter-spacing: -0.01em; margin: 14px 0 26px; text-wrap: balance; }
.hero h1 .cut { display: inline-block; background: var(--ink); color: var(--wall); padding: 0.03em 0.12em 0; margin-block: 0.05em 0.03em; line-height: 0.86; }
.hero p.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 34em; margin: 0 0 30px; font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta .mono { color: var(--ink-soft); flex-basis: 100%; margin-top: 4px; }
.dial { width: 100%; max-width: 440px; justify-self: center; }
.dial svg { display: block; width: 100%; height: auto; }
.dial figcaption { text-align: center; margin-top: 10px; color: var(--ink-soft); }

/* ---------- tape ---------- */
.hazard { height: 18px; background: repeating-linear-gradient(-45deg, var(--ink) 0 14px, var(--wall) 14px 28px); }
.tape { overflow: hidden; background: var(--ink); color: var(--wall); border-block: 4px solid var(--ink); }
.tape .run { display: flex; width: max-content; animation: run 38s linear infinite; }
.tape span { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 0 8px; white-space: nowrap; }
.tape i { font-style: normal; color: var(--paper); padding-inline: 18px; }
@keyframes run { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section { padding-block: clamp(56px, 8vw, 112px); }
.on-ink { background: var(--ink); color: var(--paper); }
h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 8vw, 6.2rem); line-height: 0.86; margin: 0 0 18px; text-wrap: balance; }
.on-ink h2 { color: var(--wall); }
.sub { max-width: 38em; font-weight: 600; font-size: 1.1rem; margin: 0 0 36px; }
.on-ink .sub { font-weight: 400; }

/* beats */
.beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.beat { border-top: 10px solid var(--ink); padding-top: 10px; min-width: 0; }
.beat h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(4.4rem, 10vw, 8.5rem); line-height: 0.84; margin: 0 0 14px; }
.beat p { margin: 0 0 16px; font-weight: 600; }
.beat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.beat li { font-family: var(--data); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; border-top: 2px solid var(--ink); padding-top: 6px; }

/* the wire */
.wire { border-top: 4px solid var(--wall); }
.story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto; gap: 8px 28px; align-items: baseline; padding: 18px 0 14px; border-bottom: 2px solid var(--rule-on-ink); }
.story h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 0.95; margin: 0; color: var(--wall); }
.story p { margin: 0; }
.story .mono { color: var(--wall); white-space: nowrap; }

/* schedule */
.grid-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.block { border: 4px solid var(--ink); padding: 16px 16px 18px; background: var(--wall); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.block h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 2.1rem; line-height: 0.95; margin: 0; }
.block p { margin: 0; font-size: 0.95rem; }
.block .tag { display: none; align-self: flex-start; background: var(--wall); color: var(--ink); padding: 2px 8px 0; font-family: var(--data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.block.now { background: var(--ink); color: var(--paper); }
.block.now h3 { color: var(--wall); }
.block.now .tag { display: inline-block; }

/* the floor board */
.board { position: relative; border: 4px solid var(--wall); margin-top: 48px; }
.board .scroll { overflow-x: auto; }
.board table { width: 100%; border-collapse: collapse; font-family: var(--data); font-variant-numeric: tabular-nums; min-width: 560px; }
.board th { text-align: left; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--wall); padding: 10px 16px 8px; }
.board td { padding: 15px 16px 13px; border-top: 2px solid var(--rule-on-ink); font-size: 1.05rem; white-space: nowrap; }
.board td:first-child { font-family: var(--display); font-weight: 800; font-size: 1.55rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--wall); }
.board .num { text-align: right; }
.board th.num { text-align: right; }
.up { color: var(--wall); }
.stamp {
  position: absolute; right: 4%; top: 0; transform: translateY(-62%) rotate(-5deg); pointer-events: none;
  font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 3.2rem); letter-spacing: 0.1em; line-height: 1; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 5px solid var(--paper); padding: 8px 18px 3px;
}
.boardnote { margin-top: 14px; color: var(--paper); }

/* shows */
.shows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.show { border-top: 8px solid var(--ink); padding-top: 14px; min-width: 0; }
.show h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 2.5rem; line-height: 0.92; margin: 8px 0 8px; }
.show p { margin: 0; }
.show .mono { color: var(--ink-soft); }

/* calls */
.calls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ticket { background: var(--paper); color: var(--ink); border: 4px solid var(--ink); transform: rotate(2deg); position: relative; max-width: 420px; justify-self: center; width: 100%; }
.ticket header { background: var(--ink); color: var(--wall); display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px 8px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ticket dl { margin: 0; padding: 6px 16px 14px; }
.ticket .row { padding: 10px 0 8px; border-bottom: 2px dashed var(--ink); }
.ticket .row:last-child { border-bottom: 0; }
.ticket dt { font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ticket dd { margin: 2px 0 0; font-weight: 800; font-size: 1.05rem; }
.ticket .seal { position: absolute; right: -14px; bottom: -18px; transform: rotate(-9deg); background: var(--wall); border: 4px solid var(--ink); font-family: var(--display); font-weight: 900; font-size: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px 3px; }
.rules { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; max-width: 34em; }
.rules li { padding-left: 30px; position: relative; font-weight: 600; }
.rules li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 16px; height: 10px; background: var(--ink); }

/* doors */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.door { background: var(--wall); color: var(--ink); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.door h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 0.88; margin: 0; }
.door p { margin: 0 0 10px; font-weight: 600; flex: 1; }
.door .btn { align-self: flex-start; font-size: 1.25rem; padding: 13px 18px 11px; }
.fine { margin-top: 26px; color: var(--paper); max-width: 46em; }

/* get in */
.getin { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
form { display: grid; gap: 16px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
legend { padding: 0; margin-bottom: 10px; }
.pick { display: flex; gap: 12px; align-items: flex-start; border: 4px solid var(--ink); padding: 12px 14px 10px; cursor: pointer; background: var(--wall); }
.pick input { accent-color: var(--ink); width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.pick b { display: block; font-family: var(--display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; line-height: 1; letter-spacing: 0.03em; }
.pick span { font-size: 0.95rem; }
.pick:has(input:checked) { background: var(--ink); color: var(--paper); }
.pick:has(input:checked) b { color: var(--wall); }
.pick:has(input:checked) input { accent-color: var(--wall); }
.field { display: grid; gap: 6px; }
.field input { font: inherit; font-weight: 600; padding: 14px 14px 12px; border: 4px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); width: 100%; }
.send { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
#formnote { font-weight: 800; background: var(--ink); color: var(--wall); padding: 12px 14px 10px; margin: 0; }

/* footer */
footer { background: var(--ink); color: var(--paper); padding-block: 44px 56px; }
footer .wrap { display: grid; gap: 22px; }
footer .plate .name { border-color: var(--wall); }
footer .plate .tab { background: var(--ink); color: var(--wall); border-color: var(--wall); }
footer p { margin: 0; max-width: 52em; }
footer .mono { color: var(--wall); }

@media (max-width: 860px) {
  .hero, .calls, .getin { grid-template-columns: minmax(0, 1fr); }
  .shows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors, .beats { grid-template-columns: minmax(0, 1fr); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .ticket { transform: rotate(1deg); }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .livebar .say { display: none; }
  .shows { grid-template-columns: minmax(0, 1fr); }
  .plate .name, .plate .tab { font-size: 1.2rem; }
  .btn { font-size: 1.25rem; padding: 15px 18px 13px; }
  .ticket .seal { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tape .run, .dot { animation: none; }
  .btn { transition: none; }
}

/* =====================================================================
   Inner pages: The Wire, Markets, Partner
   ===================================================================== */
.pagehead { padding-block: clamp(16px, 3vw, 32px) clamp(28px, 5vw, 56px); }
.pagehead h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3.6rem, 11vw, 8.5rem); line-height: 0.88; margin: 10px 0 16px; text-wrap: balance; }
.pagehead p { max-width: 38em; font-weight: 600; font-size: 1.15rem; margin: 0; }
.nav a.here { border-bottom-color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.chip { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; border: 4px solid var(--ink); border-radius: 0; background: var(--wall); color: var(--ink); padding: 6px 14px 4px; cursor: pointer; text-decoration: none; line-height: 1.2; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--wall); }

.headlines { border-top: 8px solid var(--ink); }
.headline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 18px 0 16px; border-bottom: 3px solid var(--ink); text-decoration: none; }
.headline h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 0.95; margin: 0; }
.headline p { margin: 6px 0 0; font-weight: 600; max-width: 46em; grid-column: 1; }
.headline .mono { white-space: nowrap; }
.headline:hover h3 { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 5px; }
.on-ink .headlines { border-top-color: var(--wall); }
.on-ink .headline { border-bottom: 2px solid var(--rule-on-ink); }
.on-ink .headline h3, .on-ink .headline .mono { color: var(--wall); }

.article { background: var(--paper); border: 4px solid var(--ink); padding: clamp(20px, 4vw, 48px); max-width: 800px; }
.article h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 0.92; margin: 12px 0 14px; text-wrap: balance; }
.article .dek { font-size: 1.25rem; font-weight: 600; margin: 0 0 18px; }
.article .byline { border-block: 3px solid var(--ink); padding: 8px 0 6px; margin-bottom: 22px; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.article .body { font-size: 1.1rem; line-height: 1.65; overflow-wrap: anywhere; }
.article .body p { margin: 0 0 1.1em; }
.article .body h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 2rem; line-height: 1; margin: 1.5em 0 0.4em; }
.article .body ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.article .body blockquote { border-left: 8px solid var(--ink); margin: 0 0 1.1em; padding: 4px 0 4px 18px; font-weight: 600; }
.article .body a, .sources a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.sources { margin-top: 28px; border-top: 3px solid var(--ink); padding-top: 12px; }
.sources ol { margin: 8px 0 0; padding-left: 22px; }
.sources a { overflow-wrap: anywhere; }
.paidtag { display: inline-block; background: var(--ink); color: var(--wall); font-family: var(--data); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px 2px; }
.back { display: inline-block; margin-bottom: 18px; font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; }

.empty { border: 4px dashed var(--ink); padding: 28px 24px; font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.4rem); text-transform: uppercase; line-height: 1; }
.empty small { display: block; font-family: var(--sign); font-weight: 600; font-size: 1rem; text-transform: none; line-height: 1.5; margin-top: 10px; max-width: 40em; }
.on-ink .empty { border-color: var(--wall); color: var(--wall); }
.on-ink .empty small { color: var(--paper); }

.board td a, .ledger td a { color: inherit; }
.board td.note { font-family: var(--data); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); white-space: normal; }
.readline { margin: 14px 0 0; color: var(--paper); }
.readline a { color: var(--wall); }
.board .tag-paid { display: inline-block; margin-left: 10px; vertical-align: middle; font-family: var(--data); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; background: var(--wall); color: var(--ink); padding: 3px 7px 1px; }

.ledger { border: 4px solid var(--ink); background: var(--paper); }
.ledger .scroll { overflow-x: auto; }
.ledger table { width: 100%; border-collapse: collapse; min-width: 760px; }
.ledger th { text-align: left; background: var(--ink); color: var(--wall); font-family: var(--data); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px 8px; }
.ledger td { padding: 12px 14px 10px; border-top: 2px solid var(--ink); vertical-align: top; }
.ledger .n { font-family: var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ledger .who { font-family: var(--display); font-weight: 900; font-size: 1.4rem; text-transform: uppercase; white-space: nowrap; line-height: 1.1; }
.ledger .small { font-family: var(--data); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 3px; }
.ledger.slim table { min-width: 420px; }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; }
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.field textarea { font: inherit; font-weight: 600; padding: 14px 14px 12px; border: 4px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); width: 100%; min-height: 110px; resize: vertical; }
.livebar .say b { color: var(--wall); font-weight: 800; }

@media (max-width: 860px) {
  .two, .packs { grid-template-columns: minmax(0, 1fr); }
  .headline { grid-template-columns: minmax(0, 1fr); }
}

/* the site has pages, so the menu stays on phones too, just smaller */
@media (max-width: 860px) {
  .top { padding-block: 16px; gap: 12px; }
  .top .nav { display: flex; gap: 8px 18px; }
  .top .nav a { font-size: 1.05rem; }
}