/* THE TALLY — scoreboard, not brochure.
   Varsity-scoreboard energy: Anton condensed display, Barlow body,
   red/ink/paper, diagonal panel cuts, stadium ticker, halftone grain.
   Mobile-first; desktop is the enhancement. */

:root {
  --red: #e61d25;
  --red-deep: #a5121c;
  --ink: #111111;
  --paper: #ffffff;
  --paper-dim: #e9e9e9;
  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", sans-serif;
  --cut: 4vw; /* diagonal panel angle */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
  /* subtle print-shop grain over everything */
  background-image: radial-gradient(rgba(22,40,63,.06) 1px, transparent 1px);
  background-size: 4px 4px;
}

.skip {
  position: absolute; left: -999px; top: 0; background: var(--ink);
  color: var(--paper); padding: .5rem 1rem; z-index: 99;
}
.skip:focus { left: 0; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem 1rem;
  background: var(--ink); color: var(--paper);
  border-bottom: 4px solid var(--red);
  position: sticky; top: 0; z-index: 20;
}
.wordmark { text-decoration: none; color: var(--paper); line-height: 1.05; }
.wordmark-jamie {
  display: block; font-family: var(--display); font-size: 1.15rem;
  letter-spacing: .04em;
}
.wordmark-sub {
  display: block; font-size: .55rem; letter-spacing: .18em;
  color: var(--paper-dim); font-weight: 600;
}
.topnav { display: flex; gap: .9rem; }
.topnav a {
  color: var(--paper); text-decoration: none; font-weight: 800;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.topnav a:hover, .topnav a:focus { border-bottom-color: var(--red); }

/* ---------- hero ---------- */
.hero {
  padding: clamp(2.5rem, 9vw, 5rem) 1.25rem 3rem;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.hero-kicker {
  font-weight: 800; letter-spacing: .22em; font-size: .7rem;
  color: var(--red); margin-bottom: 1rem;
}
.hero-q {
  font-family: var(--display);
  font-size: clamp(4.2rem, 21vw, 11rem);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-q-sm { font-size: clamp(3rem, 14vw, 7rem); }
.hero-jamie {
  color: var(--red);
  /* offset "stamp" shadow — recruitment-poster punch */
  text-shadow: 4px 4px 0 var(--ink);
}
.hero-alt {
  display: inline-block; margin-top: 1rem; color: var(--ink);
  font-weight: 600; font-size: .95rem;
}
.hero-short { padding-bottom: 1.5rem; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero-q-flip { font-size: clamp(2.7rem, 12.5vw, 6.8rem); }
.hero-sub { max-width: 30rem; font-size: 1.05rem; font-weight: 600; margin-top: 1rem; }
.hero-photo {
  width: min(78vw, 21rem); height: auto; justify-self: center;
  border: 4px solid var(--paper); box-shadow: 10px 10px 0 var(--red);
  outline: 3px solid var(--ink);
  filter: grayscale(20%) contrast(1.05);
  transform: rotate(1.5deg);
}
.scoreboard-onred { box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1deg); margin-top: .25rem; }

/* ---------- scoreboard counter ---------- */
.scoreboard {
  margin: 2rem 0 1.25rem;
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 1rem 1.4rem .9rem;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--red);
  transform: rotate(-1.2deg);
}
.scoreboard-sm { margin-top: 1.25rem; }
.score-num {
  font-family: var(--display);
  font-size: clamp(3.2rem, 15vw, 6.5rem);
  line-height: 1;
  color: var(--paper); /* incandescent scoreboard bulbs */
  font-variant-numeric: tabular-nums;
}
.score-label { font-size: .8rem; letter-spacing: .06em; font-weight: 600; margin-top: .35rem; }

/* ---------- big YES button ---------- */
.btn-yes {
  display: block; margin-top: 1.5rem; max-width: 34rem;
  background: var(--red); color: var(--paper);
  font-family: var(--display); font-size: clamp(1.5rem, 6.5vw, 2.4rem);
  text-align: center; text-decoration: none; text-transform: uppercase;
  padding: 1rem 1.5rem;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  letter-spacing: .03em;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-yes:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- record ticker ---------- */
.ticker {
  background: var(--red); color: var(--paper);
  overflow: hidden; white-space: nowrap;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  padding: .5rem 0;
}
.ticker-track {
  display: inline-block;
  animation: tick 45s linear infinite;
}
.tick {
  font-weight: 800; font-size: .8rem; letter-spacing: .1em;
  margin-right: 3rem;
}
.tick::after { content: " ★"; }
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------- panels (diagonal cuts) ---------- */
.panel {
  padding: 3rem 1.25rem 3.5rem;
}
.panel-red {
  background: var(--ink); color: var(--paper);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-top: calc(3rem + var(--cut));
  padding-bottom: calc(3.5rem + var(--cut));
}
.panel-ink {
  background: var(--ink); color: var(--paper);
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
  padding-top: calc(3rem + var(--cut));
  padding-bottom: calc(3.5rem + var(--cut));
}
.panel-h {
  font-family: var(--display);
  font-size: clamp(2.4rem, 11vw, 5rem);
  line-height: .92; text-transform: uppercase;
  margin-bottom: 1rem;
}
.panel-h-ink { color: var(--ink); }
.panel-h-paper { color: var(--paper); }
.panel-sub { max-width: 34rem; font-size: 1rem; margin-bottom: 1.75rem; }
.panel-sub-ink { color: var(--ink); }

/* ---------- forms ---------- */
.bigform { max-width: 34rem; }
.bigform label {
  display: block; font-weight: 800; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .9rem;
}
.bigform .opt { opacity: .75; font-weight: 600; text-transform: none; letter-spacing: 0; }
.bigform input[type=text], .bigform input[type=email], .bigform input[type=tel],
.bigform input:not([type]) {
  display: block; width: 100%; margin-top: .3rem;
  font-family: var(--body); font-size: 1.05rem; font-weight: 600;
  padding: .8rem .75rem;
  border: 3px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
.bigform input:focus { outline: 3px solid var(--red); outline-offset: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.check { display: flex !important; gap: .5rem; align-items: center;
  font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--ink); }
.hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; opacity: 0; }

.btn-submit {
  display: block; width: 100%; margin-top: .5rem; cursor: pointer;
  background: var(--red); color: var(--paper);
  font-family: var(--display); font-size: 1.6rem; text-transform: uppercase;
  padding: .9rem; border: 3px solid var(--paper);
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
  letter-spacing: .04em;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-submit:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 rgba(0,0,0,.35); }

fieldset.kind { border: none; margin-bottom: 1.1rem; }
fieldset.kind legend {
  font-weight: 800; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: .5rem;
}
.pill {
  display: inline-flex !important; align-items: center; gap: .4rem;
  border: 3px solid var(--ink); padding: .45rem .8rem; margin: 0 .4rem .4rem 0;
  background: var(--paper); color: var(--ink);
  font-weight: 800 !important; text-transform: uppercase !important;
  font-size: .78rem !important;
}
.pill input { accent-color: var(--red); }
.pill:has(input:checked) { background: var(--ink); color: var(--paper); }

/* ---------- roster stubs ---------- */
.stubs { list-style: none; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stub {
  background: #fff; border: 2px solid var(--ink);
  border-left: 8px solid var(--red);
  padding: .55rem .7rem;
  transform: rotate(-.4deg);
}
.stub:nth-child(even) { transform: rotate(.5deg); }
.stub-name { display: block; font-weight: 800; font-size: .95rem; }
.stub-city { display: block; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .65; }
.stubs-wall { margin-bottom: 2rem; }
.link-more { display: inline-block; margin-top: 1.25rem; color: var(--ink); font-weight: 800; }
.empty-roster { font-size: 1.2rem; max-width: 30rem; margin-bottom: 1rem; }

/* ---------- bio ---------- */
.bio-grid { display: grid; gap: 1.5rem; }
.bio-photo {
  width: min(100%, 22rem); height: auto;
  border: 4px solid var(--paper); box-shadow: 10px 10px 0 var(--red);
  filter: grayscale(25%) contrast(1.05);
  transform: rotate(1deg);
}
.bio-facts { list-style: none; display: grid; gap: .7rem; margin: 1rem 0 1.25rem; }
.bio-facts li { padding-left: 1.1rem; position: relative; }
.bio-facts li::before { content: "★"; color: var(--red); position: absolute; left: 0; }
.bio-line { font-family: var(--display); font-size: 1.35rem; text-transform: uppercase;
  color: var(--paper); letter-spacing: .02em; }

/* ---------- plays ---------- */
.plays { display: grid; gap: .9rem; }
.play {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 1rem; align-items: baseline;
  text-decoration: none; color: var(--ink);
  border: 3px solid var(--ink); background: #fff;
  padding: 1rem 1.1rem;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.play:active, .play:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); }
.play-num { grid-row: 1 / span 2; font-family: var(--display);
  font-size: 2.6rem; color: var(--red); }
.play-name { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; }
.play-desc { grid-column: 2; font-size: .9rem; opacity: .8; }

/* ---------- quiz ---------- */
.quiz { padding: 1rem 1.25rem 4rem; max-width: 36rem; margin: 0 auto; }
.quiz-progress { height: 10px; border: 2px solid var(--ink); background: #fff; margin-bottom: 1.5rem; }
.quiz-bar { height: 100%; width: 0; background: var(--red); transition: width .25s ease; }
.quiz-card {
  background: #fff; border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 1.5rem 1.25rem;
}
.quiz-count { font-weight: 800; font-size: .7rem; letter-spacing: .18em; color: var(--red); }
.quiz-statement {
  font-family: var(--display); font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  line-height: 1.08; text-transform: uppercase; margin: .6rem 0 .8rem;
}
.quiz-anchor { font-size: .85rem; opacity: .75; margin-bottom: 1.4rem; }
.quiz-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.btn-quiz {
  cursor: pointer; font-family: var(--display); font-size: 1.3rem;
  text-transform: uppercase; padding: .9rem .5rem;
  border: 3px solid var(--ink); letter-spacing: .03em;
  transition: transform .08s ease;
}
.btn-quiz:active { transform: scale(.96); }
.btn-agree { background: var(--red); color: var(--paper); }
.btn-disagree { background: var(--paper); color: var(--ink); }

.quiz-result { text-align: center; padding-top: 1rem; }
.result-line { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; }
.result-score { font-family: var(--display); font-size: 7rem; line-height: 1; color: var(--red);
  text-shadow: 5px 5px 0 var(--ink); }
.result-of { font-size: 2.5rem; color: var(--ink); text-shadow: none; margin-left: .5rem; }
.result-msg { font-size: 1.05rem; font-weight: 600; margin: 1rem auto 1.5rem; max-width: 26rem; }

/* ---------- flash ---------- */
.flash {
  background: var(--ink); color: var(--paper);
  font-family: var(--display); text-transform: uppercase; font-size: 1.1rem;
  letter-spacing: .04em;
  padding: .9rem 1.25rem; margin: 0 1.25rem 1rem;
  border: 3px solid var(--red);
  transform: rotate(-.5deg);
}

/* ---------- standings ---------- */
.standings { list-style: none; counter-reset: st; max-width: 30rem; }
.standings li {
  counter-increment: st;
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--ink); padding: .55rem 0;
}
.standings li::before {
  content: counter(st, decimal-leading-zero);
  font-family: var(--display); color: var(--red); margin-right: .8rem;
}
.stand-street { flex: 1; font-weight: 800; text-transform: uppercase; font-size: .95rem; }
.stand-count { font-family: var(--display); font-size: 1.5rem; }

/* ---------- admin ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem; margin-bottom: 1.5rem; }
.astat { background: var(--ink); color: var(--paper); padding: .9rem;
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--red);
  font-size: .75rem; font-weight: 600; }
.astat-num { display: block; font-family: var(--display); font-size: 2.2rem; color: var(--paper); }
.btn-export { max-width: 26rem; border-color: var(--ink); }
.admin-h { font-family: var(--display); text-transform: uppercase; font-size: 1.4rem;
  margin: 2.25rem 0 .75rem; }
.table-scroll { overflow-x: auto; }
.admin-table { border-collapse: collapse; width: 100%; font-size: .85rem; background: #fff; }
.admin-table th, .admin-table td { border: 2px solid var(--ink); padding: .45rem .55rem; text-align: left; }
.admin-table th { background: var(--ink); color: var(--paper); text-transform: uppercase;
  font-size: .68rem; letter-spacing: .08em; }

/* ---------- footer ---------- */
.foot {
  background: var(--ink); color: var(--paper);
  padding: 2.5rem 1.25rem 2rem; margin-top: 3rem;
  border-top: 6px solid var(--red);
  text-align: center;
}
.foot-num { font-family: var(--display); font-size: 2.8rem; color: var(--paper); display: block; }
.foot-label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center; margin: 1.5rem 0; }
.foot-links a { color: var(--paper); font-weight: 800; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.disclaimer {
  font-size: .72rem; opacity: .8;
  border: 1px solid rgba(244,241,234,.4); display: inline-block;
  padding: .45rem .9rem;
}

/* ---------- nav donate ---------- */
.nav-donate {
  background: var(--red);
  font-family: var(--display) !important; font-size: .95rem !important;
  letter-spacing: .06em;
  padding: .4rem .9rem !important;
  border: none !important;
  box-shadow: 3px 3px 0 var(--paper);
  transform: rotate(-2deg);
  transition: transform .08s ease, box-shadow .08s ease;
}
.nav-donate:hover, .nav-donate:focus {
  transform: rotate(-2deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--paper);
}

/* ---------- record page ---------- */
.record-stats { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; }
.rstat { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.rstat-num { font-family: var(--display); font-size: 2.4rem; color: var(--red);
  display: block; line-height: 1; }
.bills { list-style: none; max-width: 44rem; display: grid; gap: .6rem; }
.bill {
  display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: baseline;
  background: #fff; color: var(--ink); border: 2px solid var(--ink);
  padding: .7rem .9rem;
}
.bill-law { border-left: 10px solid var(--red); }
.bill-num { font-family: var(--display); font-size: 1.05rem; color: var(--red); white-space: nowrap; }
.bill-title { font-weight: 800; font-size: .92rem; text-transform: uppercase; }
.bill-status { grid-column: 2; font-size: .75rem; opacity: .75; }
.bill-topics { grid-column: 2; }
.bill-topics em { font-style: normal; font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--red-deep);
  margin-right: .6rem; }
.bill-link { grid-column: 2; justify-self: start; font-size: .75rem; font-weight: 800;
  color: var(--ink); }
.bills-dark .bill { background: transparent; color: var(--paper); border-color: var(--paper); }
.bills-dark .bill-link { color: var(--paper); }
.bills-dark .bill-topics em { color: var(--paper); }

/* ---------- bio page ---------- */
.bio-lede { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase;
  color: var(--red); margin-bottom: 1rem; line-height: 1.1; }
.bio-para { max-width: 36rem; margin-bottom: .9rem; }
.bio-para a { color: var(--red-deep); font-weight: 800; }
.bio-more { display: inline-block; margin-top: 1rem; color: var(--paper); font-weight: 800; }
.bio-timeline { max-width: 36rem; margin: 2rem 0; display: grid; gap: 0; }
.tl-item { border-left: 4px solid var(--red); padding: .5rem 0 .5rem 1rem;
  font-size: .95rem; }
.tl-year { font-family: var(--display); color: var(--red); margin-right: .5rem; }

/* ---------- issues page ---------- */
.issue-count { font-family: var(--display); font-size: 1.2rem; color: var(--red);
  margin-bottom: .25rem; }
.issue-count-red { color: var(--paper); }
.issue-lede { font-weight: 800; font-size: 1.1rem; max-width: 34rem; margin-bottom: .75rem; }
.issue-body { max-width: 36rem; margin-bottom: 1rem; }
.issue-bills { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bill-chip { font-family: var(--display); font-size: .9rem; border: 2px solid currentColor;
  padding: .15rem .5rem; }
.issue-record-link { font-weight: 800; font-size: .85rem; color: inherit; }

/* ---------- endorsements ---------- */
.endorsements { display: grid; gap: 1.5rem; max-width: 34rem; }
.endorsement { background: #fff; border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); padding: 1.1rem; }
.endorsement img { display: block; max-width: 100%; height: auto;
  border: 2px solid var(--ink); }
.endorsement-name { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase;
  margin-top: .9rem; }
.endorsement-line { font-size: .95rem; opacity: .8; }
.endorsement-people { max-width: 34rem; margin: 2rem 0 1rem; font-size: 1.1rem; }

/* ---------- events ---------- */
.event-list { display: grid; gap: 1.25rem; max-width: 40rem; }
.event { background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: 1.25rem; }
.event-head { display: flex; justify-content: space-between; align-items: baseline; }
.event-when { font-weight: 800; font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); }
.event-going { font-family: var(--display); font-size: 1rem; }
.event-title { font-family: var(--display); font-size: 1.8rem; text-transform: uppercase;
  line-height: 1; margin: .4rem 0; }
.event-loc { font-weight: 600; font-size: .95rem; }
.event-details { font-size: .9rem; opacity: .8; margin-top: .5rem; }
.event-rsvp { margin-top: 1rem; }
.event-rsvp summary { list-style: none; cursor: pointer; text-align: center; }
.event-rsvp summary::-webkit-details-marker { display: none; }
.btn-rsvp { border-color: var(--ink); box-shadow: 5px 5px 0 var(--red); }
.event-rsvp[open] summary { display: none; }
.event .bigform label { color: var(--ink); }

/* ---------- donate ---------- */
.donate-tiles { display: grid; gap: .9rem; max-width: 36rem; }
.donate-tile { display: block; text-decoration: none; background: var(--paper);
  color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: 1rem 1.1rem; transition: transform .08s ease, box-shadow .08s ease; }
.donate-tile:active, .donate-tile:hover { transform: translate(3px,3px);
  box-shadow: 3px 3px 0 var(--ink); }
.donate-amt { font-family: var(--display); font-size: 2rem; color: var(--red);
  display: block; line-height: 1; }
.donate-what { font-weight: 600; font-size: .9rem; }
.donate-tile-custom { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.donate-tile-custom .donate-amt { color: var(--paper); }
.donate-note { max-width: 34rem; font-size: .78rem; opacity: .85; margin-top: 1.25rem; }

/* ---------- admin extras ---------- */
.admin-event-form { margin-bottom: 1.25rem; }
.admin-event-form label { color: var(--ink); }
.admin-event-form .btn-submit { border-color: var(--ink); }
.btn-toggle { font-family: var(--body); font-weight: 800; font-size: .7rem;
  text-transform: uppercase; cursor: pointer; background: var(--paper);
  border: 2px solid var(--ink); padding: .25rem .5rem; }

/* ---------- desktop enhancements ---------- */
@media (min-width: 760px) {
  .hero { padding-left: 6vw; padding-right: 6vw; }
  .hero-grid { grid-template-columns: 1.25fr 1fr; }
  .panel, .quiz { padding-left: 6vw; padding-right: 6vw; }
  .bio-grid { grid-template-columns: minmax(0, 22rem) 1fr; align-items: center; }
  .plays { grid-template-columns: repeat(3, 1fr); }
  .donate-tiles { grid-template-columns: 1fr 1fr; }
  .event-list, .bills { max-width: 48rem; }
  .foot { text-align: left; display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 2rem; }
  .foot-links { margin: 0; justify-content: flex-start; }
  .disclaimer { grid-column: 1 / -1; justify-self: start; }
}