/* CommunityTheater.net
   Plum brand, wide Archivo headlines. Borrowed from backstage: spike tape, the colored tape
   stage managers lay on the floor. Tape color means something here too: who is being cast. */

:root {
  --floor: #eef1f4;          /* page: cool rehearsal-hall grey */
  --card: #ffffff;
  --ink: #1e1a2e;            /* deep aubergine-black */
  --muted: #5d6370;
  --rule: #d5dbe3;
  --plum: #35205a;           /* the brand: masthead, buttons, link underlines */
  --yellow: #f2c230;         /* spike tape: youth & adults */
  --teal: #12857f;           /* spike tape: youth */
  --blue: #4a63d8;           /* spike tape: adults */
  --wash: #e3e8ee;           /* quiet fills: chips, tags */
  --focus: #0b8a8a;
  --warn: #b3261e;           /* "not for kids" advisories */
  --display: "Archivo", "Arial Black", sans-serif;
  --text: "Public Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --floor: #16141f; --card: #211e2d; --ink: #eceaf3; --muted: #a4a3b3; --rule: #353247;
    --plum: #b69cf0; --yellow: #f2c230; --teal: #2bb8b3; --blue: #8196ff; --wash: #2c2940; --focus: #2bb8b3; --warn: #ff8a7a;
  }
}
:root[data-theme="dark"] {
  --floor: #16141f; --card: #211e2d; --ink: #eceaf3; --muted: #a4a3b3; --rule: #353247;
  --plum: #b69cf0; --yellow: #f2c230; --teal: #2bb8b3; --blue: #8196ff; --wash: #2c2940; --focus: #2bb8b3; --warn: #ff8a7a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--floor); color: var(--ink); font: 17px/1.55 var(--text); }
a { color: var(--ink); text-decoration-color: var(--plum); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--plum); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { margin: 0; }
h2 { font: 900 26px/1.05 var(--display); font-stretch: 125%; letter-spacing: .01em; }
.sub { color: var(--muted); margin: 6px 0 14px; }
.fine { color: var(--muted); font-size: 14px; }

/* Top bar */
/* The bar stays dark in both color schemes (--ink turns pale in dark mode). */
.topnav { background: #1e1a2e; color: #fff; }
.topnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 56px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.brand { display: flex; gap: 10px; flex-wrap: wrap; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
/* Wordmark: comedy and tragedy masks + the name */
.brand { align-items: center; }
.brand-mark { width: 38px; height: 38px; flex: none; margin: -4px 0; }
.brand-name { font: 800 20px/1 var(--text); letter-spacing: -.005em; }
.brand-tld { color: #c9c6d6; font-weight: 600; }
.brand-sub { font-size: 13px; color: #c9c6d6; }
.navlinks { display: flex; gap: 18px; font-size: 15px; }
.navlinks a { color: #fff; text-decoration: none; }
.navlinks a[aria-current="page"], .navlinks a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }

/* Masthead: a lobby window card, one solid color field with big condensed type */
.masthead { background: #35205a; color: #fff; padding: 36px 0 30px; }
.masthead h1 {
  font: 900 clamp(30px, 5.4vw, 48px)/1.05 var(--display); font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .01em;
}
/* If the headline wraps, break it between its two phrases, never inside one. */
@media (min-width: 700px) { .masthead h1 .nw { white-space: nowrap; } }
.region { margin: 14px 0 0; font-weight: 700; }
.lede { margin: 4px 0 0; max-width: 34em; }

.where { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 22px; }
.where label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.where input, .where select, .where button { font: 700 17px var(--text); border-radius: 4px; border: 0; padding: 10px 12px; min-height: 46px; }
.where input { width: 7em; }
/* These sit on the plum header and stay white in both schemes, so their text stays dark too (--ink turns pale in dark mode). */
.where input, .where select { color: #1e1a2e; background: #fff; color-scheme: light; }
.where input::placeholder { color: #6b6878; opacity: 1; }
.where button { background: var(--yellow); color: #1e1a2e; cursor: pointer; padding: 10px 22px; }
.where button:hover { background: #ffd54d; }
.where-msg { min-height: 1.4em; margin: 8px 0 0; font-weight: 700; }

/* Listing-page masthead: one column in reading order, every row as wide as the page below it.
   The search fields share the row equally, all at one height, with the button at the end. */
.masthead .lede { max-width: none; }
.masthead .where label { flex: 1 1 10em; min-width: 0; }
.masthead .where input, .masthead .where select { width: 100%; height: 48px; min-height: 0; box-sizing: border-box; }
.masthead .where button { flex: 0 0 auto; height: 48px; min-height: 0; padding: 0 32px; }
.masthead .where input:focus-visible, .masthead .where select:focus-visible { outline-offset: -3px; }
/* The theater count keeps its own size, centered in the masthead. */
.masthead .count-badge { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.masthead .hero-alerts { display: flex; justify-content: center; text-align: center; border-radius: 14px; margin-top: 4px; font-size: 17px; padding-top: 12px; padding-bottom: 12px; }
.masthead .hero-alerts span { text-wrap: balance; }
@media (max-width: 559px) { .masthead .where button { flex: 1 1 100%; } }

/* Filters */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 6px; }
.controls input[type=search], .controls select {
  font: 16px var(--text); color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; max-width: 100%; min-width: 0;
}
.controls input[type=search] { flex: 1 1 100%; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 700 14px var(--text); color: var(--ink); background: var(--wash); border: 0; border-radius: 4px; padding: 7px 12px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--floor); }
.count { color: var(--muted); margin: 14px 0 4px; }

/* Tape color key, so the colors read as information */
.tape-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.tape-key span { display: inline-flex; align-items: center; gap: 6px; }
.tape-key i { width: 22px; height: 10px; display: inline-block; transform: rotate(-3deg); }

/* Audition cards. The one loud element on the page is the date, laid down as a strip of tape. */
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.card { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 44px 20px 18px; }
.tape {
  position: absolute; top: -12px; left: 14px;
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 16px 6px; color: #fff; transform: rotate(-1.5deg);
  font-family: var(--display); font-stretch: 125%; text-transform: uppercase;
  /* torn ends */
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 99% 55%, 100% 100%, 96% 94%, 2% 100%, 0 92%, 1.5% 50%);
}
.tape-all { background: var(--yellow); color: #1e1a2e; }
.tape-youth { background: var(--teal); }
.tape-adult { background: var(--blue); }
.t-dow { font-weight: 700; font-size: 13px; opacity: .85; }
.t-date { font-weight: 900; font-size: 19px; line-height: 1.1; }
.t-more { font: 700 13px var(--text); text-transform: none; letter-spacing: 0; opacity: .9; }
.card h3 { font: 800 24px/1.1 var(--display); font-stretch: 125%; letter-spacing: .01em; }
.card .by { color: var(--muted); font-size: 15px; margin: 4px 0 0; }
.card .theatre { font-weight: 700; margin: 8px 0 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag { font-size: 13px; font-weight: 700; background: var(--wash); border-radius: 3px; padding: 2px 8px; }
.tag.soon { background: var(--ink); color: var(--floor); }
.tag.paid { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.tag.age-youth { color: var(--teal); background: transparent; box-shadow: inset 0 0 0 2px var(--teal); }
.tag.age-adult { color: var(--blue); background: transparent; box-shadow: inset 0 0 0 2px var(--blue); }
.tag.age-all { color: #1e1a2e; background: var(--yellow); }
.tag.mature { color: var(--warn); background: transparent; box-shadow: inset 0 0 0 2px var(--warn); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; margin: 0; font-size: 15px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; max-width: 62ch; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-weight: 700; }
.actions button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--plum); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.verified { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.caveat { font-size: 14px; border-left: 4px solid var(--plum); padding: 4px 10px; margin: 12px 0 0; }
.empty { color: var(--muted); }

/* Theatres in range with nothing posted: plain rows, deliberately quieter than the cards */
.quiet { margin-top: 44px; }
.quiet-list { list-style: none; padding: 0; margin: 0; border-top: 3px solid var(--ink); }
.quiet-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid var(--rule); }
.quiet-list .name { font-weight: 700; }
.quiet-list .meta { color: var(--muted); font-size: 14px; }
.quiet-list .kind { text-transform: capitalize; }
.quiet-list .kind::before { content: "("; } .quiet-list .kind::after { content: ")"; }
.quiet-list .q-status { font-size: 15px; margin-top: 2px; }
.quiet-list .checked { color: var(--muted); font-size: 13px; margin-left: 8px; }
.quiet-list .links { display: flex; gap: 14px; align-items: center; flex-shrink: 0; font-size: 14px; font-weight: 700; }

.follow { font: 700 13px var(--text); background: none; border: 2px solid var(--ink); color: var(--ink); border-radius: 3px; padding: 2px 10px; cursor: pointer; }
.follow[aria-pressed="true"] { background: var(--ink); color: var(--floor); }

.alert-cta { margin-top: 48px; padding: 24px; background: #35205a; color: #fff; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; border-radius: 3px; }
.alert-cta h2 { color: #fff; }
.alert-cta p { margin: 6px 0 0; color: #d4d1e0; max-width: 40em; }
.alert-cta .button { background: var(--yellow); color: #1e1a2e; }

.foot { color: var(--muted); font-size: 14px; padding-top: 32px; padding-bottom: 48px; }
/* The closing note: a dashed "cut here" rule, like the stub of a ticket */
.foot p { margin: 0; padding-top: 16px; border-top: 2px dashed var(--rule); }
.foot a { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Buttons and forms shared by account, submit, and admin */
.button {
  display: inline-block; font: 700 17px var(--text); background: var(--ink); color: var(--floor);
  border: 0; border-radius: 4px; padding: 12px 22px; cursor: pointer; text-decoration: none; min-height: 46px;
}
.button:hover { color: var(--floor); background: var(--plum); }
.button.small { font-size: 15px; padding: 8px 14px; min-height: 38px; }
.linkish { font: inherit; font-weight: 700; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: var(--plum); text-decoration-thickness: 2px; text-underline-offset: 3px; justify-self: start; }

.narrow { max-width: 640px; padding-top: 36px; padding-bottom: 56px; }
.page-h { font: 900 clamp(32px, 6.5vw, 50px)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 14px; }
.lede-dark { font-size: 19px; margin: 0 0 16px; }
.perks { padding-left: 20px; margin: 0 0 22px; }
.flash { border-left: 5px solid var(--plum); background: var(--card); padding: 10px 14px; font-weight: 700; }
.stack { display: grid; gap: 14px; }
.stack label { display: grid; gap: 4px; font-size: 15px; font-weight: 700; }
.stack input, .stack select, .stack textarea {
  font: 16px var(--text); color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; width: 100%; min-width: 0;
}
.stack fieldset { border: 0; border-top: 3px solid var(--ink); padding: 12px 0 4px; display: grid; gap: 12px; margin: 8px 0 0; }
.stack legend { font: 900 17px/1 var(--display); font-stretch: 125%; text-transform: uppercase; padding: 0 10px 0 0; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.row > label { min-width: 0; }
.row .wide { grid-column: 1 / -1; }
.stack label.toggle { display: flex; gap: 10px; align-items: center; font-size: 17px; }
.stack label.toggle input { width: auto; }
.acct-actions { display: flex; gap: 20px; margin-top: 24px; }
.hp { position: absolute; left: -10000px; }

/* Alert theatre picker */
.mode-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.mode-choice label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; border: 2px solid var(--rule); border-radius: 4px; padding: 10px 12px; background: var(--card); cursor: pointer; }
.mode-choice label:has(input:checked) { border-color: var(--ink); }
.mode-choice input { width: auto; margin-top: 4px; }
.pick-tools { display: flex; gap: 16px; font-size: 15px; }
.range-list { list-style: none; padding: 0; margin: 0; display: grid; }
.range-list label { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; font-weight: 400; padding: 8px 2px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.range-list input { width: auto; grid-row: span 2; }
.range-list .rname { font-weight: 700; }
.range-list .fine { grid-column: 2; }
.range-list.locked label { cursor: default; }

.admin-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.admin-list li { background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 12px 14px; }
.admin-list pre { font-size: 12px; overflow-x: auto; white-space: pre-wrap; }
.admin-list .actions button { border: 2px solid var(--ink); border-radius: 3px; padding: 3px 12px; text-decoration: none; }
.find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 0; border-top: 1px solid var(--rule); }
.find-row:first-of-type { margin-top: 6px; }
.find-row .actions { margin: 0 0 0 auto; gap: 10px; font-size: 14px; }
.find-row .fine { white-space: nowrap; }
.admin-list .find-row .actions button { padding: 1px 10px; }

@media (max-width: 560px) {
  .card { padding: 40px 16px 16px; }
  .card h3 { font-size: 21px; }
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dt { margin-top: 6px; font-size: 13px; }
  .quiet-list li { flex-direction: column; align-items: flex-start; }
  .quiet-list .checked { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Crew calls: dates go on black gaffer tape, the tape crews actually carry */
.tape-crew { background: #26232f; color: #fff; }
.empty-block { background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 16px 18px; }
.empty-block p { margin: 0 0 12px; }
.stack fieldset.group { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.needs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; }
.needs-grid label { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.needs-grid input { width: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tape-crew { background: #e9e6f2; color: #1e1a2e; }
}
:root[data-theme="dark"] .tape-crew { background: #e9e6f2; color: #1e1a2e; }
.indent { margin-left: 30px; }
.count + .list, .tape-key + .list { margin-top: 26px; }

/* Ad slots: clearly marked, quieter than listings, never styled like an audition card */
.ad-slot { list-style: none; }
.ad-slot:empty { margin: 0; }
.ad {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center;
  padding: 12px 16px; background: var(--wash); border-radius: 3px; text-decoration: none; color: var(--ink);
}
.ad:hover { color: var(--ink); background: var(--rule); }
.ad-label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted); }
.ad img { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; }
.ad-text { display: grid; gap: 2px; font-size: 15px; grid-column: auto / -1; }
.ad-text strong { font-size: 16px; }
.ad-by { color: var(--muted); font-size: 13px; }
.ad-cta { margin-left: 10px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--plum); text-underline-offset: 3px; }
.ad-house { border: 2px dashed var(--rule); background: transparent; }
.ad-banner { margin-top: 40px; }
/* Before a search the home page's ad sits under the welcome's four boxes. The other listing pages show
   ads only with results: AdSense doesn't allow ads on a screen that's only a search box. */
.ad-welcome { margin-top: 30px; }
.ad:not(:has(img)) { grid-template-columns: 1fr; }
.ad-network { display: block; min-height: 90px; }
.ad-network .ad-label { display: block; margin-bottom: 4px; }
/* A sponsor's pop-up after a zip search: big, low and centered so it lands over the results and can't
   be missed (each ad gets one showing a day). It stops short of dimming or covering the whole page. */
.ad-popup {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 28px; margin: 0 auto; width: min(660px, calc(100vw - 32px));
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--card); border: 2px solid var(--plum); border-top-width: 10px; border-radius: 10px;
  --ring: color-mix(in srgb, var(--plum) 22%, transparent);
  box-shadow: 0 30px 70px -18px rgba(30, 26, 46, .7), 0 0 0 6px var(--ring);
  animation: ad-pop .55s cubic-bezier(.2, .9, .3, 1.25), ad-glow 1.4s ease-in-out .55s 2;
}
.ad-popup .ad { background: transparent; padding: 22px 64px 24px 24px; gap: 12px 22px; align-items: start; }
.ad-popup .ad:hover { background: transparent; }
.ad-popup .ad-label {
  justify-self: start; padding: 3px 10px; border-radius: 2px; background: var(--yellow); color: #1e1a2e;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.ad-popup .ad img { grid-row: span 2; width: 150px; height: 150px; border-radius: 6px; }
.ad-popup .ad-text { gap: 8px; font-size: 18px; }
.ad-popup .ad-text strong { font: 900 32px/1.04 var(--display); font-stretch: 125%; }
.ad-popup .ad-by { font-size: 15px; }
.ad-popup .button { justify-self: start; font-size: 18px; padding: 12px 26px; min-height: 48px; }
.ad-popup .ad:hover .button { background: var(--plum); }
.ad-popup-close {
  position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--wash); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer;
}
.ad-popup-close:hover { background: var(--rule); }
@keyframes ad-pop { from { opacity: 0; transform: translateY(70px) scale(.88); } }
@keyframes ad-glow { 50% { box-shadow: 0 30px 70px -18px rgba(30, 26, 46, .7), 0 0 0 18px var(--ring); } }
@media (max-width: 560px) {
  .ad-popup { bottom: 10px; width: calc(100vw - 20px); }
  .ad-popup .ad { padding: 16px 56px 18px 16px; gap: 10px 14px; }
  .ad-popup .ad img { width: 84px; height: 84px; }
  .ad-popup .ad-text { font-size: 16px; }
  .ad-popup .ad-text strong { font-size: 23px; }
  .ad-popup .button { justify-self: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ad-popup { animation: none; } }
/* Admin ad form: the image as the pop-up will crop it, and a thumbnail in the ad list */
.ad-image-preview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ad-image-preview img { width: 104px; height: 104px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); }
.ad-image-preview .fine { flex: 1 1 200px; }
.ad-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 10px; }

/* The theater-websites house ad: a small theater site in a browser window does the selling */
.ad.ad-web {
  grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "label mock" "text mock";
  gap: 6px 28px; padding: 18px 20px 20px; align-items: start;
}
.ad-web .ad-label { grid-area: label; }
.ad-web .ad-text { grid-area: text; gap: 8px; }
.ad-web .ad-text strong { max-width: 19ch; font: 900 23px/1.08 var(--display); font-stretch: 125%; }
.ad-web .ad-text .button { justify-self: start; margin-top: 6px; }
.ad-web:hover .button { background: var(--plum); }
.ad-web .site-mock { grid-area: mock; align-self: center; }
@media (max-width: 600px) {
  .ad.ad-web { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "mock" "text"; gap: 10px; }
  .ad-web .site-mock { font-size: 9.5px; margin-bottom: 4px; }
}
.site-mock {
  display: block; font-size: 10px; line-height: 1.2; background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(30, 26, 46, .5);
}
.sm-bar { display: flex; align-items: center; gap: .45em; padding: .6em .8em; background: var(--wash); border-bottom: 1px solid var(--rule); }
.sm-bar i { flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--rule); }
.sm-url { flex: 1; margin-left: .5em; padding: .25em .9em; border-radius: 1em; background: var(--card); color: var(--muted); font-size: .9em; }
.sm-page { display: block; padding: .9em 1em 1.1em; }
.sm-nav { display: flex; align-items: baseline; gap: .9em; margin-bottom: 1em; font-size: .9em; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sm-nav b { margin-right: auto; color: var(--ink); font: 800 1.05em/1 var(--display); font-stretch: 125%; }
.sm-show { display: grid; grid-template-columns: 7em 1fr; gap: 1.1em; align-items: start; }
/* the poster: one spotlight on an empty stage */
.sm-poster { position: relative; aspect-ratio: 3 / 4; border-radius: 2px; background: #35205a; overflow: hidden; }
.sm-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 232, 150, .95), rgba(255, 232, 150, .08)); clip-path: polygon(42% 0, 58% 0, 92% 84%, 8% 84%); }
.sm-poster::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: 9%; height: 15%; border-radius: 50%; background: radial-gradient(rgba(255, 232, 150, .9), rgba(255, 232, 150, .25) 70%); }
.sm-info { display: grid; gap: .55em; justify-items: start; padding-top: .2em; }
.sm-tape {
  padding: .4em .9em .45em; background: var(--yellow); color: #1e1a2e; transform: rotate(-1.5deg);
  font: 800 .85em/1 var(--display); font-stretch: 125%; text-transform: uppercase;
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 99% 55%, 100% 100%, 96% 94%, 2% 100%, 0 92%, 1.5% 50%);
}
.sm-title { font: 900 1.6em/1 var(--display); font-stretch: 125%; }
.sm-line { justify-self: stretch; height: .5em; border-radius: .25em; background: var(--wash); }
.sm-line.short { justify-self: start; width: 70%; }
.sm-btn { margin-top: .35em; padding: .5em 1em; border-radius: .3em; background: #35205a; color: #fff; font-weight: 700; font-size: .9em; }
.site-mock-big .site-mock { font-size: 16px; margin: 8px 0 34px; }
@media (max-width: 600px) { .site-mock-big .site-mock { font-size: 11px; } }
.site-foot { border-top: 1px solid var(--rule); padding: 18px 0 28px; font-size: 14px; }
.site-foot .wrap { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot a { color: var(--muted); }
.prose h2 { margin: 28px 0 8px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }

/* Now playing: dates on plum tape, the brand color, so shows read differently from auditions */
.tape-show { background: #35205a; color: #fff; }
/* Last chance: fluorescent orange spike tape, the color crews use for marks nobody can miss; dark ink for contrast */
.tape-show.tape-last { background: #ff6b1a; color: #1e1a2e; }
.card .blurb { margin: 0 0 12px; max-width: 62ch; }
.actions .button.small { text-decoration: none; }
/* Keep each nav label on one line; below the width where every section fits in a row, fold them behind a menu button */
.navlinks { white-space: nowrap; }
.navlinks a { flex-shrink: 0; }
.navtoggle { display: none; background: none; border: 2px solid rgba(255, 255, 255, .35); border-radius: 4px; color: #fff; padding: 5px 7px; cursor: pointer; line-height: 0; }
.navtoggle:hover { border-color: var(--yellow); }
.topnav.open .navtoggle { border-color: var(--yellow); }
@media (max-width: 840px) {
  .topnav .wrap { flex-wrap: nowrap; }
  .brand { flex: 1 1 0; min-width: 0; }
  .brand-sub { flex-basis: 100%; }
  .navtoggle { display: block; flex: none; }
  .navlinks { display: none; }
  .topnav.open .wrap { flex-wrap: wrap; }
  .topnav.open .navlinks { display: flex; flex-direction: column; gap: 0; flex-basis: 100%; padding: 4px 0 8px; border-top: 1px solid rgba(255, 255, 255, .15); }
  .topnav.open .navlinks a { padding: 11px 0; font-size: 16px; }
}
@media (max-width: 380px) { .brand { gap: 8px; } .brand-mark { width: 30px; height: 30px; } .brand-name { font-size: 16px; } }

/* Bold labels and names get a hair of extra tracking so they stay open at small sizes. */
strong, b, .quiet-list .name, .card .theatre, .range-list .rname, .admin-list strong,
.stack label, .tag, .chip, .actions, .where label, .region, .flash { letter-spacing: .01em; }
.more-dates summary { cursor: pointer; font-weight: 700; margin-top: 2px; text-decoration: underline; text-decoration-color: var(--plum); text-underline-offset: 3px; }

/* Out-of-area notice: the site is national, listings arrive one region at a time */
.coverage { background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--yellow); border-radius: 3px; padding: 18px 20px; margin: 18px 0 8px; }
.coverage p { margin: 8px 0 0; max-width: 60ch; }
.coverage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.button.ghost:hover { background: var(--ink); color: var(--floor); }
.admin-sub { font: 800 16px var(--text); margin: 22px 0 4px; }

/* Type-to-search theater picker on the post page */
.picker { position: relative; }
.picker-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0; list-style: none;
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 6px 18px rgba(30, 26, 46, .14); max-height: 320px; overflow-y: auto; }
.picker-list li { padding: 8px 12px; cursor: pointer; font-weight: 400; }
.picker-list li[aria-selected="true"], .picker-list li:hover { background: var(--wash); }
.picker-list .picker-new { border-top: 1px solid var(--rule); font-weight: 700; }

/* Request a correction: quiet link on every card, and its dialog */
.actions .fix-link { margin-left: auto; font: 400 13px var(--text); color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); }
.actions .fix-link:hover { color: var(--ink); }
.fix-dialog { border: 0; border-radius: 6px; padding: 22px; width: min(520px, calc(100vw - 32px)); background: var(--floor); color: var(--ink); }
.fix-dialog::backdrop { background: rgba(30, 26, 46, .55); }
.fix-dialog h2 { margin: 0; }
.fix-dialog .stack label.toggle { font-size: 16px; }

/* Before a zip is entered, a listing page shows only its search bar and this prompt. */
.zip-prompt { display: none; }
body.awaiting-zip .zip-prompt { display: block; margin: 28px 0 8px; padding: 18px 20px; background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--yellow); border-radius: 3px; }
.zip-prompt p { margin: 0; }
body.awaiting-zip main > :not(.zip-prompt):not(.alert-cta):not(.welcome):not(.cov-preview):not(.home-states) { display: none !important; }

/* Home page welcome: replaces the plain zip prompt on a first arrival. */
.welcome { display: none; }
body.home.awaiting-zip .welcome { display: block; margin: 30px 0 8px; }
body.home .zip-prompt { display: none !important; }
body.home.awaiting-zip .alert-cta { display: none !important; } /* the welcome already mentions alerts */
.welcome h2 { font-size: 28px; }
.welcome-lede { font-size: 19px; margin: 10px 0 20px; max-width: 42em; }
.welcome-grid { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 14px; }
.welcome-grid a { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 36px 18px 12px;
  background: color-mix(in srgb, var(--w) 13%, var(--card)); border: 1px solid color-mix(in srgb, var(--w) 45%, var(--rule));
  border-radius: 12px; text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.welcome-grid a:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--w) 70%, transparent); }
/* A small "go" arrow at the foot of each box */
.welcome-grid a::after { content: "\2192"; margin-top: auto; align-self: flex-end; font: 900 20px/1 var(--display); color: var(--w); transition: transform .15s ease; }
.welcome-grid a:hover::after { transform: translateX(3px); }
/* Each box's heading is a strip of tape, matching the social card */
.welcome-grid strong { position: absolute; top: -12px; left: -4px; right: -4px; text-align: center; padding: 6px 12px 7px; color: #fff; background: var(--w);
  font: 900 17px/1.1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
  transform: rotate(var(--r, -1deg));
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 99% 55%, 100% 100%, 96% 94%, 2% 100%, 0 92%, 1.5% 50%); }
.welcome-grid span { font-size: 15.5px; line-height: 1.45; font-weight: 500; color: var(--ink); }
.w-shows { --w: var(--yellow); --r: -1.2deg; } .w-auditions { --w: var(--teal); --r: 1deg; }
.w-crew { --w: var(--blue); --r: -0.8deg; } .w-classes { --w: #1e1a2e; --r: 1.2deg; }
.w-shows strong { color: #1e1a2e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .w-classes { --w: #e9e6f2; }
  :root:not([data-theme="light"]) .w-classes strong { color: #1e1a2e; }
}
:root[data-theme="dark"] .w-classes { --w: #e9e6f2; }
:root[data-theme="dark"] .w-classes strong { color: #1e1a2e; }
.welcome-foot { margin-top: 26px; padding: 16px 18px 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  background: #35205a; color: #d4d1e0; border-radius: 12px; }
.welcome-foot p { margin: 0; font-size: 15.5px; max-width: 36em; }
.welcome-foot strong { color: #fff; }
.welcome-foot .button { background: var(--yellow); color: #1e1a2e; text-decoration: none; white-space: nowrap; }
.welcome-foot .button:hover { background: #ffd54d; color: #1e1a2e; }
@media (max-width: 560px) {
  .welcome h2 { font-size: 22px; }
  .welcome-lede { font-size: 17px; }
  .welcome-grid { grid-template-columns: 1fr 1fr; gap: 22px 10px; }
  .welcome-grid a { padding: 28px 12px 10px; border-radius: 10px; }
  .welcome-grid strong { font-size: 13px; padding: 5px 8px 6px; }
  .welcome-grid span { font-size: 14px; }
}

/* About page: laid out like a show program. The cover stays dark in both color schemes, like the top bar. */
.program { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.program-cover { background: #1e1a2e; color: #fff; text-align: center; padding: 30px 18px 26px; border-top: 12px solid var(--yellow); }
.program-kicker { font: 800 13px var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .18em; color: var(--yellow); margin: 0 0 12px; }
.program-title { font: 900 clamp(24px, 6.4vw, 42px)/1.05 var(--display); font-stretch: 125%; text-transform: uppercase; margin: 0 0 12px; overflow-wrap: anywhere; }
.program-title span { color: #c9c6d6; font-weight: 700; }
.program-sub { font: italic 400 19px var(--text); margin: 0 0 4px; }
.program-run { font-size: 14px; color: #c9c6d6; margin: 0; }
.program-sec { padding: 22px clamp(16px, 5vw, 36px); border-top: 2px dashed var(--rule); }
.program-cover + .program-sec { border-top: 0; }
.program-h { font: 800 18px/1.2 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.program-h span { display: block; font: italic 400 15px var(--text); text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 4px; }
.cast { margin: 0; display: grid; gap: 8px; }
.cast div { display: flex; align-items: baseline; gap: 8px; }
.cast dt { font-weight: 700; white-space: nowrap; }
.cast div::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--rule); min-width: 16px; }
.cast dd { order: 2; margin: 0; text-align: right; font-style: italic; }
.stage-dir { font-style: italic; color: var(--muted); }
.line .who { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.intermission { background: var(--wash); text-align: center; }
.encore-count { font-size: 20px; margin: 0 0 12px; }
.encore-count strong { font: 900 clamp(34px, 9vw, 48px)/1 var(--display); font-stretch: 125%; display: block; margin-bottom: 4px; }
.casting { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 28px; margin: 16px 0; }
.casting h3 { font: 800 13px/1.2 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.casting ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.casting li { position: relative; padding-left: 26px; }
.casting li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; font-weight: 700; }
.casting-in li::before { content: "\2713"; color: var(--teal); }
.casting-out li::before { content: "\2715"; color: var(--muted); }
.casting-out li { color: var(--muted); }
.program-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.program-fine { text-align: center; font-size: 13px; font-style: italic; color: var(--muted); padding: 0 16px 22px; margin: 0; }
@media (max-width: 480px) {
  .cast div { flex-wrap: wrap; }
  .cast div::after { display: none; }
  .cast dd { flex-basis: 100%; text-align: left; }
}

/* Alerts call-to-action in the hero, under the zip search on every listing page. */
.hero-alerts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; padding: 10px 16px 10px 12px;
  background: rgba(255, 255, 255, .1); border: 2px solid var(--yellow); border-radius: 999px; color: #fff; text-decoration: none; font-size: 15px; }
.hero-alerts:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.hero-alerts .bell { color: var(--yellow); flex: none; }
.hero-alerts strong { font-weight: 800; }
.hero-alerts span { color: #e2def0; }
@media (max-width: 480px) { .hero-alerts { border-radius: 14px; } }

/* Theater count badge in the home masthead: a strip of spike tape that links to the map. */
.count-badge { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 16px; padding: 6px 14px 7px;
  background: var(--yellow); color: #1e1a2e; text-decoration: none; font-size: 15px; transform: rotate(-1deg);
  clip-path: polygon(0 8%, 2% 0, 98% 4%, 100% 0, 99% 55%, 100% 100%, 97% 94%, 1% 100%, 0 92%, 1% 50%); }
.count-badge:hover { color: #1e1a2e; background: #ffd54d; }
.count-badge strong { font: 900 19px/1.1 var(--display); font-stretch: 125%; text-transform: uppercase; }
.count-badge em { font-style: normal; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.count-badge em::after { content: " \2192"; }

/* Coverage map (coverage.html and the home-page preview): a dark stage in the masthead plum, with
   each covered area lit like a spotlight in spike-tape yellow. Stays plum in both color schemes. */
.cov-map { position: relative; }
.cov-svg { display: block; width: 100%; height: auto; }
.cov-states path { fill: #4a3474; stroke: none; }
.cov-borders { fill: none; stroke: #35205a; stroke-width: 1.2; stroke-linejoin: round; }
.cov-area { fill: #ffd54d; opacity: .5; mix-blend-mode: screen; }
.cov-dots circle { fill: #ffe38a; stroke: #35205a; stroke-width: .8; }
.cov-ring { fill: none; stroke: #fff; stroke-width: 2; pointer-events: none; }
.cov-loading { color: #d4d1e0; aspect-ratio: 975 / 610; display: grid; place-items: center; margin: 0; }
.cov-figure { margin: 28px 0 0; background: #35205a; border-radius: 3px; padding: 16px 16px 14px; border-top: 8px solid var(--yellow); }
.cov-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: #d4d1e0; }
.cov-key > span { display: inline-flex; align-items: center; gap: 6px; }
.cov-key i { display: inline-block; flex: none; }
.cov-key .k-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffe38a; }
.cov-key .k-area { width: 18px; height: 12px; border-radius: 6px; background: #a88a7c; filter: blur(1px); }
.cov-key .cov-hint { flex-basis: 100%; }
@media (hover: none) { .cov-key .cov-hint { display: none; } }
.cov-tip { position: absolute; z-index: 2; max-width: 260px; padding: 10px 12px; background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  border-left: 4px solid var(--yellow); border-radius: 3px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); font-size: 14px; pointer-events: none; }
.cov-tip ul { margin: 4px 0 6px; padding-left: 18px; }
.cov-tip .more { list-style: none; margin-left: -18px; color: var(--muted); }
.cov-tip .go { color: var(--muted); font-size: 13px; }
.cov-states-list { margin-top: 36px; }
.cov-states-list ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; }
.cov-states-list li { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--rule); }

.cov-preview { margin-top: 44px; }
.cov-preview a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px 24px; align-items: center; padding: 22px 20px;
  background: #35205a; color: #fff; border-radius: 3px; border-top: 8px solid var(--yellow); text-decoration: none; }
.cov-preview a:hover { color: #fff; }
.cov-preview h2 { color: #fff; }
.cov-preview p { margin: 8px 0 12px; color: #d4d1e0; }
.cov-preview-go { font-weight: 700; color: #fff; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.cov-preview a:hover .cov-preview-go { color: var(--yellow); }
.cov-preview-go::after { content: " \2192"; }
.cov-preview .cov-map { aspect-ratio: 975 / 610; }
@media (max-width: 620px) { .cov-preview a { grid-template-columns: 1fr; } }

/* Home page: the states, linking to the town-by-town directory (filled in by the server). */
.home-states { margin-top: 44px; }
.home-states > p { margin: 6px 0 14px; color: var(--muted); }
.home-states .town-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 20px; }

/* Town and state pages (built on the server by server/pages.js). */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: #c9c6d6; }
.crumbs a { color: #fff; text-decoration-color: var(--yellow); }
.crumbs a:hover { color: var(--yellow); }
.crumbs .sep { color: #8f8aa6; }
.dir-section { margin-top: 40px; }
.dir-section > h2 { margin-bottom: 18px; }
.theater-block { margin-top: 26px; background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--yellow); border-radius: 3px; padding: 16px 18px; scroll-margin-top: 16px; }
.dir-section .theater-block { margin-top: 14px; }
.theater-block > h2, .theater-block > h3 { font: 800 21px/1.15 var(--display); font-stretch: 125%; margin: 0 0 4px; }
.theater-block .t-kind { margin: 0 0 6px; color: var(--muted); font-size: 14px; text-transform: capitalize; }
.theater-block .q-status { margin: 0 0 10px; font-size: 15px; }
.theater-block dl.facts { margin-top: 8px; }
.theater-block .flash { margin: 12px 0 0; }
.theater-block .actions { margin-top: 14px; }
.theater-block:target { box-shadow: 0 0 0 3px var(--yellow); }
.empty-block { margin-top: 24px; }
.town-h { font: 800 19px/1.2 var(--display); font-stretch: 125%; margin: 26px 0 6px; }
.town-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; }
.town-grid li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--rule); }
.town-grid a { font-weight: 700; }
.town-grid span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.dir-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-weight: 700; }
.theater-block .t-about { margin: 6px 0 10px; max-width: 62ch; }