/* ==================================================================
   UNITY001 design system
   Mobile-first. One file for public site + admin.
   Palette drawn from the UNITY001 tree logo and prior brand work:
   teal, cream, gold, with navy as a deep accent.
   ================================================================== */

:root {
  --teal:        #2B4E52;
  --teal-dark:   #1E383B;
  --teal-deeper: #142629;
  --cream:       #F9F6F0;
  --cream-dark:  #EDE9E1;
  --gold:        #8B6914;
  --gold-light:  #A07C24;
  --gold-pale:   #F0E9D8;
  --navy:        #252C59;
  --sky:         #6EC1E4;
  --ink:         #1C2325;
  --muted:       #55666A;
  --line:        #D8DDE0;
  --red:         #B03A2E;
  --green:       #2E7D4F;

  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container: 1100px;
  --container-wide: 1400px;   /* the header bar, which carries the whole menu */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(20, 38, 41, .08);
  --shadow-lg: 0 12px 32px rgba(20, 38, 41, .16);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
p { margin: 0 0 1em; }

a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: #fff;
  padding: .6em 1.2em; z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

/* Honeypot field: hidden from humans, present for bots. */
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  padding: .75em 1.6em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-light); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); color: #fff; }
.btn-outline { background: transparent; color: inherit; border-color: currentColor; }
.btn-outline:hover { background: rgba(255, 255, 255, .12); color: inherit; }
.on-light .btn-outline:hover, .btn-outline.on-light:hover { background: rgba(43, 78, 82, .08); }
.btn-large { font-size: 1.1rem; padding: .9em 2em; }
.btn-small { font-size: .85rem; padding: .45em 1em; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */

.site-header {
  background: var(--teal-deeper);
  position: sticky; top: 0; z-index: 50;
  transition: background-color .25s ease;
}
.site-header-overlay {
  position: fixed; left: 0; right: 0;
  background: linear-gradient(rgba(20, 38, 41, .8), rgba(20, 38, 41, 0));
}
.site-header-overlay.scrolled, .site-header-overlay.nav-open { background: var(--teal-deeper); }

/* The header bar is wider than the content column below it. The menu is
   admin-managed and has grown past what 1100px holds; capping the bar at
   the content width is what pushed the nav on top of the wordmark. */
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  width: min(100% - 2.5rem, var(--container-wide));
}

.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
  /* Never squeezed. If the menu outgrows the bar the nav collapses to
     the button instead, rather than being drawn over the wordmark. */
  flex-shrink: 0;
}
.brand img { width: 44px; height: 44px; }
.brand-text {
  font-family: var(--serif); font-weight: 700; font-size: 1.35rem;
  letter-spacing: .02em; color: var(--cream);
}
.brand-num { color: var(--sky); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ''; display: block;
  width: 24px; height: 2px; background: var(--cream);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before { position: absolute; top: -7px; }
.nav-toggle-bars::after { position: absolute; top: 7px; }
.nav-open .nav-toggle-bars { transform: rotate(45deg); }
.nav-open .nav-toggle-bars::before { transform: rotate(-90deg) translateX(-7px); top: 0; }
.nav-open .nav-toggle-bars::after { opacity: 0; }

.site-nav { display: none; }
.nav-open .site-nav {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--teal-deeper);
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
}
.site-nav ul { list-style: none; margin: 0; padding: .5rem 0 1rem; }
.site-nav a {
  display: block;
  padding: .7rem 1.25rem;
  color: var(--cream); text-decoration: none; font-weight: 600;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--sky); }
.nav-donate { padding: .7rem 1.25rem; }
.nav-donate .btn { color: #fff; }

/* The full menu needs roughly 1200px beside the wordmark. Below that,
   and whenever site.js finds it still does not fit, the button takes
   over. .nav-compact is that override and has to win over the query. */
@media (min-width: 1280px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .nav-open .site-nav { position: static; border: 0; box-shadow: none; }
  .site-nav ul { display: flex; align-items: center; gap: 0; padding: 0; }
  .site-nav a { padding: .5rem .55rem; font-size: .94rem; white-space: nowrap; }
  .nav-donate { padding: 0 0 0 .5rem; }
}

@media (min-width: 1280px) {
  .site-header.nav-compact .nav-toggle { display: inline-flex; }
  .site-header.nav-compact .site-nav { display: none; }
  .site-header.nav-compact.nav-open .site-nav {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--teal-deeper);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: var(--shadow-lg);
  }
  .site-header.nav-compact .site-nav ul { display: block; padding: .5rem 0 1rem; }
  .site-header.nav-compact .site-nav a { padding: .7rem 1.25rem; font-size: 1rem; }
  .site-header.nav-compact .nav-donate { padding: .7rem 1.25rem; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
  background: var(--teal-deeper);
}
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 38, 41, .25) 0%, rgba(20, 38, 41, .35) 55%, rgba(20, 38, 41, .88) 100%);
}
.hero-content {
  position: relative; z-index: 1;
  padding: 7rem 0 3rem;
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero-sub { font-size: clamp(1.05rem, 2.5vw, 1.3rem); max-width: 52ch; color: rgba(249, 246, 240, .92); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* On phones, action buttons stack full width so long labels stay on
   one centered line instead of wrapping inside a pill. */
@media (max-width: 600px) {
  .hero-actions, .section-cta { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .section-cta .btn { width: 100%; }
}

.hero-chip {
  display: inline-block;
  background: rgba(249, 246, 240, .12);
  border: 1px solid rgba(249, 246, 240, .3);
  backdrop-filter: blur(4px);
  /* Rounds to a full pill on one line, soft corners if the text wraps. */
  border-radius: 1.2em;
  padding: .45em 1.1em;
  font-size: .9rem; font-weight: 600; line-height: 1.5;
  margin-bottom: 1.25rem;
}
/* Keep dates and times together when the chip wraps on small screens. */
.hero-chip strong { color: var(--sky); white-space: nowrap; }

.hero-short { min-height: 56svh; }

/* ---------- Sections ---------- */

.section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.section-tight { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section-cream-dark { background: var(--cream-dark); }
.section-teal { background: var(--teal-dark); color: var(--cream); }
.section-teal h2, .section-teal h3 { color: #fff; }
.section-teal a:not(.btn) { color: var(--sky); }
.section-navy { background: var(--navy); color: var(--cream); }
.section-navy h2 { color: #fff; }
.section-gold { background: var(--gold-pale); }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .85rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .75em;
}
.section-teal .eyebrow, .section-navy .eyebrow { color: var(--sky); }

.section-head { max-width: 62ch; margin-bottom: 2rem; }
.section-head-center { margin-inline: auto; text-align: center; }
.lead { font-size: clamp(1.1rem, 2.5vw, 1.25rem); color: var(--muted); }
.section-teal .lead, .section-navy .lead { color: rgba(249, 246, 240, .85); }

.split {
  display: grid; gap: 2rem;
  align-items: center;
}
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .split-wide-media { grid-template-columns: 3fr 2fr; }
}
.split-media img, .split-media video { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; }
.split-media img.img-plain { border-radius: 0; box-shadow: none; }

/* ---------- Cards ---------- */

.card-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card-body > :last-child { margin-top: auto; }
.card-body p { color: var(--muted); }
.card img.card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card .btn { align-self: flex-start; }
.section-teal .card, .section-navy .card { color: var(--ink); }
.section-teal .card h3, .section-navy .card h3 { color: var(--ink); }

/* ---------- Countdown ---------- */

.countdown {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(64px, 96px));
  gap: .6rem;
  text-align: center;
}
.countdown-cell {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(249, 246, 240, .25);
  border-radius: var(--radius-sm);
  padding: .7rem .25rem .5rem;
}
.on-light .countdown-cell { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.countdown-num {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--sky);
}
.on-light .countdown-num { color: var(--gold); }
.countdown-label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: .8;
}
.countdown-title {
  margin: 0 0 .15rem;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sky);
}
.countdown-date {
  margin: 0 0 1rem;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  color: #fff;
}
.countdown-note { margin: 0; max-width: 34ch; margin-inline: auto; opacity: .85; }

/* ---------- Info strip (date / time / place rows) ---------- */

.info-strip {
  display: grid; gap: 1rem;
  padding: 0; margin: 2rem 0; list-style: none;
}
@media (min-width: 640px) { .info-strip { grid-template-columns: repeat(3, 1fr); } }
.info-strip li {
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}
.info-strip .info-label {
  display: block;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.info-strip .info-value { font-weight: 700; }
.section-teal .info-strip li { color: var(--ink); }

/* ---------- Forms ---------- */

.form-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 760px;
}
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: span 2; }
}
.field label {
  display: block;
  font-weight: 600; font-size: .95rem;
  margin-bottom: .3rem;
}
.field .hint { font-size: .85rem; color: var(--muted); margin: .25rem 0 0; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  padding: .7em .85em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid rgba(110, 193, 228, .5);
  border-color: var(--teal);
}
.field textarea { min-height: 7em; resize: vertical; }
.field-error { color: var(--red); font-size: .9rem; margin: .3rem 0 0; }
.required::after { content: ' *'; color: var(--red); }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0;
}
legend { font-weight: 700; padding: 0 .4em; }

/* Big tappable radio cards (registration type, amounts) */
.choice-cards { display: grid; gap: .75rem; }
@media (min-width: 560px) { .choice-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.choice-card { position: relative; }
.choice-card input { position: absolute; opacity: 0; }
.choice-card label {
  display: block;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice-card .choice-sub { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
.choice-card .choice-price {
  display: block;
  font-family: var(--serif); font-size: 1.45rem; color: var(--gold);
  line-height: 1.2; margin: .2rem 0 .1rem;
}
.choice-card .choice-price small {
  display: block;
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .07em;
}

/* Repeatable vehicle rows on the registration form */
.vehicle-row { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .9rem; }
.vehicle-row:first-child { border-top: 0; padding-top: 0; margin-top: .5rem; }
.vehicle-row-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.vehicle-num { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.vehicle-remove {
  background: none; border: 0; cursor: pointer; padding: .2em .4em;
  font: inherit; font-size: .85rem; color: var(--red); text-decoration: underline;
}
.vehicle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.1rem; }

/* Registration: form beside this year's poster */
.register-layout { display: grid; gap: 2rem; align-items: start; }
.register-layout .form-card { max-width: none; }
@media (min-width: 1000px) {
  .register-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; }
  .register-flyer { position: sticky; top: 84px; }
}
.register-flyer img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.register-flyer .hint { font-size: .85rem; color: var(--muted); margin: .6rem 0 0; text-align: center; }

/* Order total, shown once just above the submit button */
.reg-summary { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.reg-total {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.35rem; color: var(--teal);
  margin: 0 0 .9rem;
}
/* Four across once there is room, so a long list stays scannable. */
@media (min-width: 860px) {
  .vehicle-row .form-grid { grid-template-columns: repeat(4, 1fr); }
}
.choice-card input:checked + label {
  border-color: var(--teal);
  background: rgba(110, 193, 228, .12);
}
.choice-card input:focus-visible + label { outline: 3px solid rgba(110, 193, 228, .5); }

/* ---------- Donate page ---------- */

.donate-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .donate-layout { grid-template-columns: 1.1fr 1fr; gap: 2rem; } }

.donate-cause .card-img { aspect-ratio: 16 / 9; }
.donate-cause-body h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

.goal-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin: .5rem 0 1rem;
}
.goal-stat { padding: .8rem .5rem; text-align: center; }
.goal-stat + .goal-stat { border-left: 1px solid var(--line); }
.goal-num { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.goal-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.goal-bar { height: 10px; border-radius: 999px; background: var(--cream-dark); overflow: hidden; }
.goal-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--green); min-width: 10px; }

.donate-card { max-width: none; }
.donate-head { display: flex; align-items: center; gap: .6rem; min-height: 2.2rem; }
.donate-back {
  background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--teal);
  padding: .15em .35em; border-radius: var(--radius-sm);
}
.donate-back:hover { background: var(--cream-dark); }
.donate-head-title { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; margin: 0; flex: 1; text-align: center; }
.donate-progress { height: 6px; border-radius: 999px; background: var(--cream-dark); overflow: hidden; margin: .9rem 0 1.4rem; }
.donate-progress-fill { display: block; height: 100%; width: 33.4%; background: var(--green); border-radius: 999px; transition: width .25s ease; }

.donate-step { border: 0; padding: 0; margin: 0; }
.donate-form.steps .donate-step:not(.is-active) { display: none; }
/* Without JS the panels stack into one long form, so hide the
   step-only chrome (header, progress, next buttons). */
.donate-form:not(.steps) .donate-head,
.donate-form:not(.steps) .donate-progress,
.donate-form:not(.steps) .donate-next { display: none; }

.amount-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .amount-grid { grid-template-columns: repeat(3, 1fr); } }

/* One time, monthly, yearly: three across even on the narrowest phone.
   Declared after .choice-cards so it wins at every width. */
.freq-grid { grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: 1.1rem; }
/* Small enough that "One time" stays on one line on a 360px phone. */
.freq-grid .choice-card label { padding: .7rem .25rem; font-size: .85rem; }
@media (min-width: 400px) { .freq-grid .choice-card label { padding: .7rem .5rem; font-size: .95rem; } }

.donate-note { color: var(--muted); font-size: .95rem; }
.donate-summary {
  background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.donate-summary-title { font-size: 1.05rem; margin-bottom: .6rem; }
.donate-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-weight: 600; }
.donate-summary-row + .donate-summary-row { border-top: 1px solid var(--line); }
.donate-summary-total { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; }
.donate-secure { text-align: center; font-size: .9rem; color: var(--muted); margin: .9rem 0 0; }

/* "gave $25 monthly" on the recent gifts list */
.donor-repeat {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}

.donor-list { list-style: none; margin: 0; padding: 0; }
.donor-item { display: flex; gap: .9rem; padding: .9rem 0; }
.donor-item + .donor-item { border-top: 1px solid var(--line); }
.donor-avatar {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--gold-pale); color: var(--gold);
  font-family: var(--serif); font-weight: 700; font-size: 1.15rem;
}
.donor-line { margin: 0; }
.donor-when { margin: 0; font-size: .85rem; color: var(--muted); }
.donor-comment { margin: .4rem 0 0; color: var(--muted); }

/* ---------- Flash messages ---------- */

.flash {
  width: min(100% - 2.5rem, var(--container));
  margin: 1rem auto 0;
  padding: .9rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: var(--shadow);
}
/* On hero pages the header is fixed and floats over the top of <main>,
   which buried flash messages behind it. When a flash is present, clear
   the header's height and solidify its background so both stay legible. */
.site-header-overlay ~ main > .flash:first-child { margin-top: calc(64px + 1.25rem); }
.site-header-overlay:has(~ main > .flash) { background: var(--teal-deeper); }
.flash-success { background: #E5F3EA; color: var(--green); border-color: #BFE3CC; }
.flash-error { background: #FBEAE8; color: var(--red); border-color: #F2C7C1; }
.flash-info { background: #E8F4FB; color: #23617E; border-color: #C4E3F2; }
.flash:focus { outline: 2px solid currentColor; outline-offset: 3px; }

/* A message answering a form renders inside that form's card, where the
   visitor was looking, instead of at the top of the page. It fills the
   card rather than centering itself on the page like the one above. */
.flash-inline {
  width: 100%;
  margin: 0 0 1.25rem;
  box-shadow: none;
}
.footer-subscribe .flash-inline { padding: .7rem 1rem; font-size: .9rem; }

/* Cloudflare Turnstile: hold the widget's height before its iframe
   loads so the submit button does not jump down under the visitor. */
.cf-turnstile { min-height: 65px; }
/* Landing on one of those cards from a redirect: keep it clear of the
   fixed header on hero pages. */
.form-card[id], .footer-subscribe[id], .container[id] { scroll-margin-top: calc(64px + 1.5rem); }

/* ---------- Media galleries ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  padding: 0; margin: 0; list-style: none;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
@media (min-width: 980px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.gallery-grid img, .gallery-grid video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .25s ease;
}
.gallery-grid video { border-radius: var(--radius-sm); background: var(--teal-deeper); }
.gallery-grid a:hover img { transform: scale(1.04); }

/* ---------- Laptop detail page (/laptops/<id>) ---------- */

.laptop-back { margin-bottom: 1.25rem; }
.laptop-back a { text-decoration: none; font-weight: 600; }
.laptop-back a:hover { text-decoration: underline; }

.laptop-page { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 800px) { .laptop-page { grid-template-columns: 3fr 2fr; gap: 3rem; } }

/* Product-style gallery: big cover shot, thumbnail row beneath.
   Clicks open the shared lightbox (site.js). */
.laptop-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.laptop-gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.laptop-gallery img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .25s ease;
}
.laptop-gallery a:hover img { transform: scale(1.04); }
.laptop-gallery .laptop-photo-main { grid-column: 1 / -1; border-radius: var(--radius); box-shadow: var(--shadow); }
.laptop-gallery .laptop-photo-main img { aspect-ratio: 4 / 3; }

.laptop-no-photo {
  background: var(--cream-dark);
  border-radius: var(--radius);
  padding: 4rem 1rem;
  text-align: center;
  color: var(--muted);
}

.laptop-price {
  font-family: var(--serif);
  font-size: 1.6rem; font-weight: 700;
  color: var(--gold);
  margin: .25rem 0 1rem;
}
.laptop-price span { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--muted); margin-left: .35rem; }

.laptop-specs-title { font-size: 1.2rem; margin: 1.5rem 0 .25rem; }
.spec-list { margin: .5rem 0 1.5rem; }
.spec-list > div {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.spec-list > div:first-child { border-top: 1px solid var(--line); }
.spec-list dt { font-weight: 600; }
.spec-list dd { margin: 0; color: var(--muted); }

.card-specs { font-size: .9rem; font-weight: 600; color: var(--teal); }
.card .card-title-link { color: inherit; text-decoration: none; }
.card .card-title-link:hover { text-decoration: underline; }

/* Photo upload progress (give-a-laptop form) */
.upload-progress { margin-bottom: 1rem; }
.upload-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--cream-dark);
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%; width: 0;
  border-radius: 999px;
  background: var(--teal);
  transition: width .2s ease;
}
.upload-progress-text { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.upload-error { margin-bottom: .75rem; }

/* Admin: per-photo controls on the laptop inventory screen */
.laptop-admin-photos { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0; }
.laptop-admin-photo { display: grid; gap: .15rem; justify-items: center; font-size: .8rem; color: var(--muted); }
.laptop-admin-photo img { display: block; width: 72px; height: 54px; border-radius: 6px; object-fit: cover; }
.btn-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .8rem;
  color: var(--teal); text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--teal-dark); }

.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; width: 100vw;
  max-height: 100vh; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(20, 38, 41, .92); }
.lightbox-figure { margin: 0; min-width: 0; }
.lightbox img {
  max-height: 80vh; width: auto; max-width: min(92vw, 1100px);
  margin-inline: auto; border-radius: var(--radius-sm);
}
.lightbox-caption { color: var(--cream); text-align: center; padding: .75rem; font-size: .95rem; }
.lightbox-count {
  position: fixed; bottom: 1rem; left: 0; right: 0;
  text-align: center; color: rgba(249, 246, 240, .75);
  font-size: .85rem; margin: 0;
}
.lightbox-close, .lightbox-nav {
  background: rgba(249, 246, 240, .15); color: #fff;
  border: 1px solid rgba(249, 246, 240, .4);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(249, 246, 240, .3); }
.lightbox-close {
  position: fixed; top: 1rem; right: 1rem;
  width: 44px; height: 44px; font-size: 1.3rem;
}
.lightbox-nav {
  flex-shrink: 0;
  width: 52px; height: 52px;
  font-size: 2rem; line-height: 1;
  padding-bottom: .18em;   /* optically centers the chevron glyph */
}
@media (max-width: 640px) {
  /* Keep the photo as wide as possible; float the arrows over it. */
  .lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox-prev { left: .5rem; }
  .lightbox-next { right: .5rem; }
  .lightbox img { max-width: 100vw; }
}

.video-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .video-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.video-card video {
  width: 100%;
  border-radius: var(--radius);
  background: var(--teal-deeper);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.video-card figcaption { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
.section-teal .video-card figcaption { color: rgba(249, 246, 240, .8); }

/* Featured portrait video (606x1080, framed like a phone screen). The
   aspect-ratio holds the layout steady before metadata arrives. */
.video-feature {
  width: 100%;
  max-width: 390px;
  margin-inline: auto;
  aspect-ratio: 606 / 1080;
  background: var(--teal-deeper);
}

/* Signature block for the President's letter. */
.letter-signoff { margin-top: 1.5rem; line-height: 1.9; }
.letter-name { font-family: var(--serif); font-size: 1.15rem; }
.letter-role { font-size: .9rem; color: var(--muted); }

/* ---------- Winners ---------- */

.winner-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .winner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .winner-grid { grid-template-columns: repeat(3, 1fr); } }
.winner-card { text-align: center; }
.winner-card .card-body { align-items: center; }
.winner-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.winner-photo-empty {
  width: 100%; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-dark);
  font-family: var(--serif); font-size: 3rem; color: var(--gold);
}
.place-badge {
  display: inline-block;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3em 1em;
  margin-bottom: .6rem;
}
.place-1 { background: var(--gold-pale); color: var(--gold); }
.place-2 { background: var(--cream-dark); color: var(--muted); }
.winner-category { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); }
.winner-vehicle { color: var(--muted); }

/* ---------- Scroll reveals ----------
   The hidden state only applies once site.js marks the document ready,
   so content is never stuck invisible when JavaScript does not run. */

.reveal-ready [data-reveal],
.reveal-ready [data-reveal-children] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal-ready [data-reveal].is-visible,
.reveal-ready [data-reveal-children].is-visible > * { opacity: 1; transform: none; }

/* Children arrive one after another rather than all at once. */
.reveal-ready [data-reveal-children].is-visible > :nth-child(2) { transition-delay: .07s; }
.reveal-ready [data-reveal-children].is-visible > :nth-child(3) { transition-delay: .14s; }
.reveal-ready [data-reveal-children].is-visible > :nth-child(4) { transition-delay: .21s; }
.reveal-ready [data-reveal-children].is-visible > :nth-child(5) { transition-delay: .28s; }
.reveal-ready [data-reveal-children].is-visible > :nth-child(6) { transition-delay: .35s; }
.reveal-ready [data-reveal-children].is-visible > :nth-child(n+7) { transition-delay: .42s; }

/* Slow drift on a still hero image. */
.hero-zoom .hero-media { animation: hero-drift 24s ease-out both; }
@keyframes hero-drift {
  from { transform: scale(1.001); }
  to   { transform: scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal-children] > * { opacity: 1; transform: none; }
  .hero-zoom .hero-media { animation: none; }
}

/* ---------- Lift on hover (cards that lead somewhere) ---------- */

.winner-card, .song-card, .next-card, .news-card, .news-lead {
  transition: transform .25s ease, box-shadow .25s ease;
}
.winner-card:hover, .song-card:hover, .next-card:hover, .news-card:hover, .news-lead:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.winner-card .winner-photo, .song-card .song-art { transition: transform .5s ease; }
.winner-card:hover .winner-photo, .song-card:hover .song-art { transform: scale(1.05); }

/* ---------- Winners group photo ---------- */

.winners-photo {
  margin: 0 0 2rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.winners-photo img { width: 100%; display: block; }
.winners-photo figcaption {
  padding: 1rem 1.25rem;
  font-family: var(--serif); font-size: 1.05rem;
  text-align: center;
}

/* ---------- Next year: prices and poster placeholder ---------- */

.next-year-cards { display: grid; gap: .9rem; margin: 1.5rem 0; }
@media (min-width: 560px) { .next-year-cards { grid-template-columns: repeat(3, 1fr); } }
.next-card {
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem;
}
.next-card h3 { font-size: 1.05rem; margin-bottom: .35em; }
.next-card p { font-size: .92rem; color: var(--muted); margin: 0; }
.next-price {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.5rem; color: var(--gold);
  line-height: 1.1; margin-bottom: .35rem;
}
.next-price small { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.flyer-placeholder {
  aspect-ratio: 2 / 3;
  border: 2px dashed rgba(139, 105, 20, .45);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--gold-pale), #fff 60%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: .35rem;
}
.flyer-badge {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.flyer-title { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin: 0; }
.flyer-year { font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 700; color: var(--teal); margin: 0; line-height: 1; }
.flyer-note { font-size: .9rem; color: var(--muted); max-width: 26ch; margin: .75rem 0 0; }

/* ---------- Songs ---------- */

.song-grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .song-grid { grid-template-columns: repeat(2, 1fr); } }
.song-card { overflow: hidden; }
.song-art { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.song-player { width: 100%; margin-bottom: 1rem; }

/* ---------- Quotes ----------
   Editorial pull quotes: an oversized serif quotation mark, italic
   serif text, and a plain-spoken attribution. No box, no accent bar. */

.quote {
  position: relative;
  margin: 1.75rem 0;
  padding-top: 2.4rem;
  font-family: var(--serif);
}
.quote::before {
  content: '\201C';
  position: absolute; top: 0; left: -.05em;
  font-size: 4.75rem; line-height: 1;
  color: var(--gold);
}
.quote p {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
}
.quote footer {
  display: flex; align-items: baseline; column-gap: .6rem; flex-wrap: wrap;
  margin-top: 1.1rem;
  font-family: var(--sans);
}
.quote cite {
  font-style: normal; font-weight: 700;
  font-size: .95rem; letter-spacing: .01em;
}
.quote-role { font-size: .85rem; color: var(--muted); }
.section-teal .quote p { color: var(--cream); }
.section-teal .quote::before { color: var(--sky); }
.section-teal .quote-role { color: rgba(249, 246, 240, .7); }

/* ---------- News ---------- */

.news-grid .card-img { aspect-ratio: 16 / 9; }
.news-card-link {
  display: flex; flex-direction: column; flex: 1;
  color: inherit; text-decoration: none;
}
.news-card h3 { margin-bottom: .4em; }
.news-meta {
  display: flex; align-items: center; column-gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .6rem;
  font-size: .85rem; font-weight: 600; color: var(--muted);
}
.news-flag {
  display: inline-block;
  background: var(--gold-pale); color: var(--gold);
  border-radius: 999px;
  padding: .15em .8em;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.news-more { font-weight: 700; color: var(--teal); }
.news-card-link:hover .news-more, .news-lead:hover .news-more { text-decoration: underline; }

.news-index-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem 2rem; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.news-search { display: flex; gap: .5rem; flex-wrap: wrap; }
.news-search input {
  flex: 1 1 220px;
  font: inherit;
  padding: .65em 1.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.news-search input:focus { outline: 3px solid rgba(110, 193, 228, .5); border-color: var(--teal); }
.news-results { margin: -1rem 0 1.5rem; color: var(--muted); }

/* Featured lead: a full-width teal billboard, unmistakably the top story. */
.news-lead {
  display: grid;
  background: var(--teal-dark);
  color: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 2rem;
}
@media (min-width: 820px) { .news-lead { grid-template-columns: 3fr 2fr; min-height: 340px; } }
.news-lead-img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 820px) { .news-lead-img { aspect-ratio: auto; } }
.news-lead-body {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: flex; flex-direction: column;
}
.news-lead-body h2 {
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: .4em;
}
.news-lead-body p { color: rgba(249, 246, 240, .85); font-size: 1.05rem; }
.news-lead-body > :last-child { margin-top: auto; }
.news-lead .news-meta { color: rgba(249, 246, 240, .75); }
.news-lead .news-more { color: var(--sky); font-size: 1.02rem; }

.news-home-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem 2rem; flex-wrap: wrap;
  max-width: none;
}
.news-home-head > div { max-width: 62ch; }
.news-home-head h2 { margin-bottom: 0; }

/* Tag chips: on articles ("Filed under") and the /news filter row */
.tag-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.tag-chip {
  display: inline-block;
  background: #fff;
  color: var(--teal-dark);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: .3em 1em;
  font-size: .85rem; font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.tag-chip:hover { background: var(--teal); color: #fff; }
.tag-chip.is-active { background: var(--teal); color: #fff; }
.news-tag-row { margin: 0 0 1.5rem; }
.article-tags { margin-top: 2.5rem; display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.article-tags-label { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* ---------- Embedded media (articles and admin pages) ---------- */

.video-embed {
  aspect-ratio: 16 / 9;
  margin: 1.75rem 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--teal-deeper);
  box-shadow: var(--shadow);
}
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

.pdf-embed { margin: 1.75rem 0; }
.pdf-embed iframe {
  display: block; width: 100%;
  height: clamp(560px, 88vh, 900px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.pdf-embed-link { margin: .5rem 0 0; font-size: .95rem; }

/* ---------- About block (closes out every news article) ---------- */

/* The article's own h1 owns the page, so about_block() steps its
   headings down one level. These put the type back at the scale the
   standalone About page used, so the block reads the same. */
.about-block h2 { font-size: clamp(2rem, 6vw, 3.25rem); }
.about-block h3 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
.about-block .card h4 {
  font-family: var(--serif); line-height: 1.15;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  margin: 0 0 .5em;
}

/* ---------- News article page ---------- */

.article-container { max-width: 780px; }
.article-meta { margin-bottom: 1rem; }
.article-back { font-weight: 700; }
.article-title { margin-bottom: .25em; }
.article-byline { color: var(--muted); margin-bottom: 1.75rem; }
.article-cover {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  margin-bottom: 2rem;
}
.article-body h2, .article-body h3 { margin-top: 1.5em; }
.article-body img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin: 1.75rem auto;
}
.article-body video {
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--teal-deeper);
  box-shadow: var(--shadow);
  margin: 1.75rem 0;
}
.article-body blockquote {
  margin: 1.75rem 0;
  padding: 0 1.25rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem;
  color: var(--teal-dark);
}
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.article-body pre {
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: .9rem;
}

/* ---------- Inline icons ---------- */

/* svg_icon() glyphs. Sized in ems so they ride along with the text
   around them; .icon-link keeps an icon glued to its link text. */
.svg-icon { width: 1em; height: 1em; vertical-align: -.125em; }
.icon-link { white-space: nowrap; }
.icon-link .svg-icon { margin-right: .35em; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--teal-deeper);
  color: rgba(249, 246, 240, .85);
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
  margin-top: 0;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1.4fr; gap: 3rem; } }
.footer-brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--cream); margin-bottom: .2em; }
.footer-tag { font-size: .9rem; color: var(--sky); font-weight: 600; }
.footer-motto { font-family: var(--serif); color: var(--gold-light); font-size: 1.1rem; }
.site-footer h2 { font-family: var(--sans); font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cream); }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links a, .footer-contact a { color: rgba(249, 246, 240, .85); text-decoration: none; line-height: 2; }
.footer-links a:hover, .footer-contact a:hover { color: var(--sky); }
.social-links { display: flex; gap: .6rem; list-style: none; margin: .5rem 0 1.25rem; padding: 0; }
/* Selector rides on .social-links so these declarations outrank the
   generic .footer-contact a rules above (equal specificity, later). */
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(249, 246, 240, .3);
  border-radius: 50%;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.social-links a .svg-icon { width: 22px; height: 22px; }
.social-links a:hover { background: var(--sky); border-color: var(--sky); color: var(--teal-deeper); }
.footer-subscribe label { display: block; font-size: .9rem; margin-bottom: .4rem; }
.subscribe-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.subscribe-row input {
  flex: 1 1 200px;
  font: inherit;
  padding: .65em .9em;
  border-radius: 999px;
  border: 1px solid rgba(249, 246, 240, .35);
  background: rgba(255, 255, 255, .08);
  color: var(--cream);
}
.subscribe-row input::placeholder { color: rgba(249, 246, 240, .5); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
  border-top: 1px solid rgba(249, 246, 240, .15);
  margin-top: 2.5rem; padding-top: 1.25rem;
  font-size: .85rem;
}
.footer-bottom a { color: rgba(249, 246, 240, .55); }

/* ---------- Admin ---------- */

.admin-body { background: #F1F3F4; }

/* Two-column shell: sidebar menu on the left, page content on the right. */
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--teal-deeper);
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem .8rem 1.25rem;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.admin-sidebar .brand { padding: 0 .5rem .5rem; }
.admin-tag { font-size: .8rem; color: var(--gold-light); letter-spacing: .1em; text-transform: uppercase; }
.admin-nav { flex: 1; }
.admin-nav-heading {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(249, 246, 240, .55);
  margin: .9rem .6rem .3rem;
}
.admin-nav ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.admin-nav a {
  display: block; padding: .5rem .6rem;
  color: var(--cream); text-decoration: none;
  font-size: .95rem; font-weight: 600;
  border-radius: var(--radius-sm);
}
.admin-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-nav a[aria-current="page"] { background: var(--teal); color: #fff; }
.admin-user {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  color: var(--cream); font-size: .95rem;
  border-top: 1px solid rgba(249, 246, 240, .15);
  padding: .9rem .5rem 0;
}
.admin-content { flex: 1; min-width: 0; }
.admin-main { width: min(100% - 3rem, 1180px); margin-inline: auto; padding: 1.5rem 0 3rem; }
.admin-title { font-size: 1.6rem; margin: .5rem 0 1rem; }
.admin-main .flash { width: 100%; margin: 0 0 1rem; }

@media (max-width: 899px) {
  .admin-shell { display: block; min-height: 0; }
  .admin-sidebar { width: auto; height: auto; position: static; }
  .admin-nav ul { flex-direction: row; flex-wrap: wrap; }
  .admin-nav-heading { margin: .5rem .6rem .2rem; }
  .admin-main { width: min(100% - 2rem, 1180px); }
}

/* Checkbox rows in admin forms */
.check-label { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; }
/* Radios as well as checkboxes: inside a .field the width: 100% rule above
   would otherwise stretch the control and push its label off the row. */
.field .check-label input[type="checkbox"], .check-label input[type="checkbox"],
.field .check-label input[type="radio"], .check-label input[type="radio"] {
  width: auto; flex: none; padding: 0; accent-color: var(--teal);
  inline-size: 1.1rem; block-size: 1.1rem;
}

/* Notification settings: one switch per notice, with its own note */
.notify-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.notify-list .check-label { align-items: flex-start; }
.hint-block { font-size: .85rem; color: var(--muted); margin: .25rem 0 0 1.6rem; max-width: 62ch; }
/* The master switch is off. Said in words rather than by dimming the
   list: dimmed hint text drops under a readable contrast, and the
   switches stay editable through a pause anyway. */
.notify-paused {
  background: var(--gold-pale); color: var(--gold);
  font-size: .9rem; font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .7rem .9rem; margin: 0 0 1.25rem;
}
.stat-value-sm { font-size: 1.05rem; font-family: var(--sans); word-break: break-word; line-height: 1.4; }
.stat-of { font-size: 1rem; font-family: inherit; color: var(--muted); margin-left: .3rem; }

/* Gallery manager grid */
.gallery-admin-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery-admin-card {
  position: relative;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem; display: flex; flex-direction: column; gap: .85rem;
}
.gallery-admin-card > form { display: flex; flex-direction: column; gap: .85rem; flex: 1; }
.gallery-admin-thumb {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
}
.gallery-admin-thumb-link { display: block; }
.gallery-admin-card .field label { font-size: .8rem; margin-bottom: .2rem; }
.gallery-admin-card .field input { padding: .5em .65em; font-size: .9rem; }
.gallery-admin-actions {
  display: flex; justify-content: space-between; gap: .5rem;
  margin-top: auto; padding-top: .85rem; border-top: 1px solid #EDF0F1;
}

/* Ticking files for batch actions */
.pick { position: absolute; top: .65rem; left: .65rem; z-index: 2; cursor: pointer; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick-box {
  display: block; width: 1.5rem; height: 1.5rem;
  background: rgba(255, 255, 255, .92);
  border: 2px solid #9FB0B2; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.pick input:checked + .pick-box { background: var(--teal); border-color: var(--teal); }
.pick input:checked + .pick-box::after {
  content: ''; display: block; width: .4rem; height: .75rem;
  border: solid #fff; border-width: 0 3px 3px 0;
  transform: rotate(45deg); margin: .1rem auto 0;
}
.pick input:focus-visible + .pick-box { outline: 2px solid var(--teal); outline-offset: 2px; }
.gallery-admin-card.is-picked { outline: 3px solid var(--teal); }

/* Batch toolbar: appears above the grid, sticks while scrolling */
.batch-bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .7rem 1.1rem; margin-bottom: 1rem;
  position: sticky; top: .75rem; z-index: 5;
}
.batch-count { align-self: center; }
.batch-select-all { align-self: center; font-size: .9rem; }
.batch-tag-field { min-width: 210px; }
.batch-tag-field label { font-size: .8rem; }
.batch-tag-field input { padding: .5em .65em; font-size: .9rem; }
.batch-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.batch-bar.is-active { box-shadow: 0 8px 24px rgba(31, 61, 63, .28); }
.batch-bar.is-active .batch-hint { display: none; }
.batch-hint { flex: 1 1 15rem; align-self: center; }

/* Count + page-size row above the grid */
.gallery-toolbar {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.gallery-showing { font-size: .95rem; color: var(--muted); }
.per-page-form { display: flex; align-items: center; gap: .5rem; }
.per-page-form label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.per-page-form select {
  font: inherit; font-size: .9rem; padding: .4em .6em;
  border: 1px solid #C9D2D4; border-radius: var(--radius-sm); background: #fff;
}

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.pager-status { font-size: .9rem; font-weight: 600; color: var(--muted); }

/* One-file-at-a-time upload progress */
.upload-progress { margin-top: 1rem; }
.upload-progress-track { height: .6rem; background: #E8ECED; border-radius: 999px; overflow: hidden; }
.upload-progress-bar { height: 100%; width: 0; background: var(--teal); border-radius: 999px; transition: width .3s ease; }
.upload-progress-text { font-size: .9rem; color: var(--muted); margin: .5rem 0 0; }

.admin-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
.table-note { font-size: .85rem; color: var(--muted); }
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.5rem; }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
}
.stat-value { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--teal); }
.stat-label { font-size: .85rem; color: var(--muted); font-weight: 600; }

.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
table.table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.table th, .table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid #EDF0F1; vertical-align: top; }
.table th {
  background: var(--cream-dark);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  position: sticky; top: 0;
}
.table tbody tr:hover { background: #F8FAFA; }

/* Sort-order inputs in the Admin -> Tags and Groups tables. */
.tag-sort-input { width: 5.5rem; padding: .45em .6em; }

/* Group tick lists: campaign audience, contact membership. */
.check-grid {
  display: grid; gap: .5rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: .35rem;
}
.check-grid .check-label { font-weight: 500; }
.check-note { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* Picked rows in the contacts table read like picked gallery cards. */
.table tbody tr.is-picked { background: #EEF6F6; }

/* Date, time, and timezone sit on one row when there is space. */
.schedule-fields { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: .35rem 0 .25rem; }
.schedule-fields .field { min-width: 150px; }
.schedule-fields .field:last-child { min-width: 260px; }

/* The send time on the "this campaign is scheduled" card. */
.schedule-when {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700;
  color: var(--teal); margin: .2rem 0 .4rem;
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: .2em .8em;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge-paid, .badge-completed, .badge-fulfilled, .badge-available { background: #E5F3EA; color: var(--green); }
.badge-pending, .badge-waiting { background: #FBF3DC; color: var(--gold); }
.badge-canceled, .badge-hidden { background: #FBEAE8; color: var(--red); }
.badge-contacted, .badge-info, .badge-given { background: #E8F4FB; color: #23617E; }
/* A badge that links somewhere (the Monthly and Yearly tags in the
   donations table) still reads as a badge, not as body copy. */
a.badge { text-decoration: none; }
a.badge:hover { text-decoration: underline; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: end;
  margin-bottom: 1rem;
}
.filter-bar .field { min-width: 140px; }
.filter-bar label { font-size: .8rem; }

.winner-thumb { object-fit: cover; border-radius: 6px; }

/* Quiet delete-style buttons */
.btn-ghost-danger { background: #fff; color: var(--red); border-color: #F0CCC7; }
.btn-ghost-danger:hover { background: #FBEAE8; border-color: var(--red); color: var(--red); }

/* Avatars */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover; overflow: hidden; flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; font-size: .9rem; }
.avatar-lg { width: 84px; height: 84px; font-size: 2rem; }
.avatar-fallback { background: var(--gold-pale); color: var(--teal-dark); font-weight: 700; }
.admin-ident { display: flex; align-items: center; gap: .6rem; }
.avatar-row { display: flex; align-items: center; gap: 1rem; }
.admin-user-link {
  display: inline-flex; align-items: center; gap: .55rem; min-width: 0;
  color: var(--cream); text-decoration: none; font-weight: 600;
}
.admin-user-link:hover span:last-child { text-decoration: underline; }

/* Two-factor setup and codes */
.totp-input { font-size: 1.3rem; letter-spacing: .3em; text-align: center; }
.totp-setup { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 700px) { .totp-setup { grid-template-columns: auto 1fr; } }
.totp-qr { width: 208px; max-width: 100%; }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-secret { display: inline-block; font-size: 1.05rem; word-break: break-word; }
.totp-manage { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .totp-manage { grid-template-columns: 1fr 1fr; align-items: end; } }
.backup-reveal { background: var(--gold-pale); }
.backup-codes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem;
}
.backup-codes code { font-size: 1.05rem; }

/* Rich text editor (assets/js/editor.js) */
.editor {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.editor:focus-within { border-color: var(--teal); outline: 3px solid rgba(110, 193, 228, .5); }
.editor-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .5rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: sticky; top: 0; z-index: 3;
}
.editor-btn {
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  color: var(--ink);
  padding: .35em .65em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.editor-btn:hover { border-color: var(--teal); }
.editor-btn.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.editor-btn:disabled { opacity: .45; cursor: default; }
.editor-btn:disabled:hover { border-color: var(--line); }
.editor-block {
  font: inherit; font-size: .85rem;
  padding: .3em .45em;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff;
}
.editor-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .2rem; }
.editor-area {
  min-height: 320px;
  padding: 1rem 1.25rem;
  outline: none;
  overflow-wrap: break-word;
}
.editor-area img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.editor-area blockquote {
  margin: 1.25rem 0; padding: 0 1.25rem;
  font-family: var(--serif); font-style: italic;
  color: var(--teal-dark);
}
.editor-area pre { background: var(--cream-dark); border-radius: 6px; padding: .75rem 1rem; overflow-x: auto; }
.editor.is-uploading { cursor: progress; }
.editor.is-uploading .editor-area { opacity: .55; }
.field .editor-source, .editor-source {
  display: block; width: 100%;
  min-height: 320px;
  border: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 1rem 1.25rem;
  font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: .9rem;
  outline: none;
}
/* The HTML view swaps in for the rich view; never show both at once. */
.field .editor-source[hidden], .editor-source[hidden],
.editor-area[hidden] { display: none; }

.news-cover-preview { max-width: 320px; border-radius: var(--radius-sm); margin-bottom: .5rem; }

.login-card {
  max-width: 400px;
  margin: 3rem auto;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 2rem;
}
.login-card .brand-text { color: var(--teal-dark); }
.login-alt-link { color: var(--muted); font-size: .9rem; }

/* ---------- Press room ---------- */

.press-card-sub { color: var(--muted); font-weight: 600; margin-bottom: .5rem; }
.press-grid .card h2 { font-size: 1.3rem; margin-bottom: .4rem; }

.press-contact-strip {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.35rem; margin-bottom: 2rem;
}
.press-contact-strip h2 { font-family: var(--sans); font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }

.press-subtitle { font-size: 1.2rem; color: var(--muted); margin-bottom: 1.75rem; }
.press-dateline { font-weight: 700; }
.press-end { text-align: center; color: var(--muted); letter-spacing: .3em; margin: 2rem 0 0; }

.draft-note {
  background: var(--gold-pale); border-radius: var(--radius-sm);
  padding: .85rem 1.1rem; margin-bottom: 1.5rem;
}

.press-block {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem; margin-top: 2rem;
}
.press-block h2 { font-family: var(--sans); font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }

.press-kit-grid {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.press-kit-item img, .press-kit-item video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--cream-dark);
}
.press-kit-caption { font-size: .9rem; color: var(--muted); margin: .5rem 0 0; }
.press-kit-link { display: block; font-weight: 600; }
.press-more { margin-top: 2.5rem; font-weight: 600; }

/* ---------- Press releases (admin) ---------- */

.press-crumb { font-weight: 600; margin: -.25rem 0 1rem; }
.press-new { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.press-new .hint { margin: 0; }
.press-row-title { font-weight: 700; }
.press-row-sub { display: block; font-size: .85rem; color: var(--muted); }

/* The action strip above a release. */
.press-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .85rem 1.1rem; margin-bottom: 1.25rem;
}
.press-bar-gap { flex: 1 1 auto; }
.press-bar form { margin: 0; }

/* A published release: locked, and saying so. */
.press-lock-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.press-lock-actions form { margin: 0; }
.press-readonly-sub { font-size: 1.15rem; color: var(--muted); }
.press-readonly-cover { border-radius: var(--radius-sm); margin: 1rem 0; }
.press-readonly-meta { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.25rem; }
.press-readonly-meta h2 {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 .35rem;
}
.press-readonly-meta h2:first-child { margin-top: 0; }
.press-readonly-kit { max-height: none; }

/* The panel and the thing being written, side by side only while the
   panel is open. Shut, it is a strip along the top and the release or
   the email gets the whole width back, which is the point of it being
   shut: there is not room for both all the time.

   :has() is what reads the <details> state, so the layout follows the
   disclosure triangle with nothing listening for it. A browser without
   :has() never matches the two-column rule and lays the page out in one
   column, panel above, which is the same thing the phone gets and works
   the same way. */
.press-editor { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) {
  .press-editor:has(.press-chat[open]) {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
  .press-editor:has(.press-chat[open]) .press-editor-side {
    position: sticky; top: 1rem;
  }
}

/* Beside the panel the column is narrow, so the form runs as one column
   inside it. With the panel shut there is room for the usual two.

   The span has to come with it. "grid-column: span 2" in a grid with one
   column does not collapse to one: it conjures an implicit second column
   sized to its content, and every field that does not span gets squeezed
   into the sliver of 1fr left over, labels wrapping a word at a time.
   Which is the layout this rule exists to avoid. */
.press-editor:has(.press-chat[open]) .press-editor-main .form-grid {
  grid-template-columns: minmax(0, 1fr);
}
.press-editor:has(.press-chat[open]) .press-editor-main .form-grid .span-2 {
  grid-column: auto;
}

/* The tab you open it by. Shut, this is the whole panel.

   No display override here on purpose: a summary set to flex or block
   loses its disclosure triangle, and the triangle is the only thing
   saying the strip can be opened at all. Same reason press-key-details
   leaves its own summary alone. */
.press-chat-summary { cursor: pointer; font-weight: 700; color: var(--teal); }
.press-chat[open] .press-chat-summary { margin-bottom: .85rem; }
.press-chat-count {
  margin-left: .5rem; font-weight: 400; font-size: .85rem; color: var(--muted);
}

.press-chat > .hint { margin-bottom: .85rem; }

/* The thread. Who said what is carried by which side the bubble sits on
   and what color it is; the name itself is there for screen readers. */
/* The thread scrolls inside itself, and the height it is allowed is its
   own business.

   It used to be a flex child told to fill a flex-column panel. That
   stopped working the moment the panel became a <details>: everything
   after the <summary> sits in an anonymous content box, so this is no
   longer a flex item of the panel, its flex-grow does nothing, and the
   "max-height: none" that went with it left the thread free to run down
   the page forever with nothing to scroll. One pasted press release and
   the composer was somewhere below the fold.

   So: a real bound, no flex parent needed. It grows with the window
   between a floor that always shows a few messages and a ceiling that
   leaves room for the composer under it. */
.press-chat-log {
  list-style: none; margin: 0 0 .85rem; padding: .25rem 0;
  overflow-y: auto;
  min-height: 8rem;
  max-height: clamp(12rem, calc(100vh - 22rem), 32rem);
  display: flex; flex-direction: column; gap: .5rem;
  overscroll-behavior: contain;
}
.press-chat-turn {
  max-width: 88%; border-radius: 14px; padding: .55rem .8rem;
  font-size: .95rem; line-height: 1.5;
}
.press-chat-turn p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.press-chat-turn.is-you {
  align-self: flex-end; background: var(--teal); color: #fff;
  border-bottom-right-radius: 4px;
}
.press-chat-turn.is-claude {
  align-self: flex-start; background: var(--cream-dark);
  border-bottom-left-radius: 4px;
}
.press-chat-turn.is-error {
  align-self: stretch; max-width: none; background: #FBEAE8; color: var(--red);
  font-weight: 600;
}
.press-chat-empty { color: var(--muted); align-self: stretch; max-width: none; font-size: .9rem; }
/* What the turn actually saved, under the reply. Sentence case: this
   used to be two uppercase words and is now a list of field names, and
   letterspaced capitals are unreadable at that length. */
.press-chat-note {
  display: block; margin-top: .35rem; font-size: .8rem; font-weight: 700;
  color: var(--green);
}

/* Claude is working: three dots where the answer will land. */
.press-chat-dots { display: inline-flex; gap: .3rem; padding: .15rem 0; }
.press-chat-dots span {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--muted); opacity: .35;
  animation: press-dot 1.2s ease-in-out infinite;
}
.press-chat-dots span:nth-child(2) { animation-delay: .2s; }
.press-chat-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes press-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: .9;  transform: translateY(-.18rem); }
}

/* One box that grows with what is typed, with Send on its right. */
.press-chat-composer {
  display: flex; align-items: flex-end; gap: .5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: .35rem .35rem .35rem .75rem;
}
.press-chat-composer:focus-within {
  border-color: var(--teal); outline: 3px solid rgba(110, 193, 228, .5);
}
.press-chat-composer textarea {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; color: var(--ink);
  font: inherit; padding: .45rem 0; margin: 0;
  min-height: 2.4em; max-height: 10em; resize: none; overflow-y: auto;
}
.press-chat-composer textarea:focus { outline: none; }
.press-chat-composer .btn { flex: none; }
.press-chat-tip { margin: .4rem 0 0; font-size: .8rem; color: var(--muted); }

/* Starting the thread over, under the composer. */
.press-chat-clear { margin-top: .85rem; }
.press-chat-clear .hint { margin-top: .4rem; }

/* The request bodies on Admin -> Claude requests. Long, wide, and only
   ever read when somebody is looking for something in particular, so it
   scrolls in both directions rather than reflowing the table. */
.claude-log-body {
  max-height: 24rem; overflow: auto; margin: .5rem 0 0;
  padding: .75rem; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5; white-space: pre;
}

.press-key-details { margin-top: 1rem; }
.press-key-details summary { cursor: pointer; font-weight: 600; color: var(--teal); }
.press-key-form { max-width: 460px; margin-top: .85rem; }

.media-upload-status { margin: .4rem 0 0; font-size: .9rem; font-weight: 600; color: var(--muted); }
.media-upload-status.is-error { color: var(--red); }
.media-upload-status.is-done { color: var(--green); }
.press-save-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* A quiet flash when Claude writes into the draft, so a change made in
   the other column is not missed. */
form.is-updated { animation: press-updated 1.6s ease-out; }
@keyframes press-updated {
  from { background: var(--gold-pale); }
  to   { background: transparent; }
}

/* ---------- Media pickers (press releases, news, campaigns) ---------- */

/* Picking files out of the shared library: a scrolling box of
   thumbnails that filters as you type. Checked files stay put whatever
   is typed, so a filter can never hide the current choice. */
.media-picker {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem; background: var(--cream);
}
.media-picker-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .85rem; }
.media-picker-find { flex: 1 1 12rem; min-width: 0; }
.media-picker-search { width: 100%; padding: .5em .65em; font-size: .9rem; }
.media-picker.is-loading .media-picker-grid { opacity: .5; }

/* Files ticked on a page you have since left. Their inputs are in the
   chips, so they still submit; the chip is how you can tell. */
.media-picker-kept { margin-bottom: .85rem; }
.media-picker-kept .hint { margin-bottom: .35rem; }
.media-picker-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.media-picker-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .2rem .3rem .2rem .5rem; font-size: .8rem; color: var(--muted);
  max-width: 15rem;
}
.media-picker-chip-drop {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .1rem .25rem;
}
.media-picker-chip-drop:hover { color: var(--red); }

/* The pager under a picker. Real links without JavaScript; the script
   swaps them for fetches so the form above is left alone. */
.media-picker-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; margin-top: .85rem;
}
.media-picker-pager { display: flex; align-items: center; gap: .6rem; }
.media-picker-pager .pager-status { white-space: nowrap; }
.media-pick-none { margin: 0; white-space: nowrap; }
.media-picker-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  max-height: 20rem; overflow-y: auto;
}
.media-pick { position: relative; display: block; cursor: pointer; }
.media-pick input { position: absolute; top: .4rem; left: .4rem; width: 1.4rem; height: 1.4rem;
  opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.media-pick-box {
  position: absolute; top: .4rem; left: .4rem; z-index: 1;
  display: block; width: 1.4rem; height: 1.4rem;
  background: rgba(255, 255, 255, .92);
  border: 2px solid #9FB0B2; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.media-pick input:checked ~ .media-pick-box { background: var(--teal); border-color: var(--teal); }
.media-pick input:checked ~ .media-pick-box::after {
  content: ''; display: block; width: .35rem; height: .7rem;
  border: solid #fff; border-width: 0 3px 3px 0;
  transform: rotate(45deg); margin: .05rem auto 0;
}
.media-pick input:focus-visible ~ .media-pick-box { outline: 2px solid var(--teal); outline-offset: 2px; }
.media-pick-thumb {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); display: block; background: var(--cream-dark);
}
.media-pick-video,
.media-pick-audio {
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: #fff; font-size: .85rem; font-weight: 700;
}
.media-pick-audio { background: var(--teal-deeper, #17444C); }
.media-pick input:checked ~ .media-pick-thumb { outline: 3px solid var(--teal); outline-offset: 1px; }
.media-pick-label {
  margin-top: .35rem; font-size: .8rem; line-height: 1.35; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* A row of links and buttons above an editor form: Preview, View live,
   and the note that goes with them. */
.admin-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 0 0 1.25rem;
}
.admin-actions .hint { margin: 0; flex: 1 1 16rem; }
.admin-actions form { margin: 0; }

/* The cover an article uploaded for itself, before covers came from
   the library. Set apart so it reads as the older way of doing it. */
.news-legacy-cover {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem; margin-bottom: .85rem; background: var(--cream);
}
.news-legacy-cover .hint { margin: .25rem 0 .5rem; }
.news-legacy-cover .check-label { margin: 0; }

/* Copying a file's hosted link: the address in a box you can select,
   with a button that does it for you. */
.copy-row { display: flex; gap: .4rem; align-items: center; }
.copy-input {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; padding: .45em .6em;
}
.copy-row .btn { flex: none; }

/* Audio in the gallery: no thumbnail to show, so it gets a player and
   a label saying what it is. */
.gallery-admin-audio {
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  background: var(--cream-dark); padding: .75rem;
}
.gallery-admin-audio audio { width: 100%; }
.gallery-admin-audio-tag {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.gallery-audio {
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  height: 100%; background: var(--cream-dark); border-radius: var(--radius-sm); padding: 1rem;
}
.gallery-audio audio { width: 100%; }
.gallery-audio-label { margin: 0; font-size: .9rem; font-weight: 600; }
.press-kit-audio { width: 100%; }

/* One text message, shown at about the width of a phone. */
.sms-preview {
  max-width: 24rem; background: var(--cream-dark); border-radius: var(--radius);
  padding: 1rem 1.15rem; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Sub-headings inside an admin card: who is coming, then the Zoom box. */
.session-people-head {
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 1.6rem 0 .6rem;
}
.session-people-head:first-of-type { margin-top: .8rem; }
.session-people-head .badge { text-transform: none; letter-spacing: 0; margin-left: .35rem; }

/* A heading that separates two halves of one admin screen. */
.admin-section-head {
  font-family: var(--serif); font-size: 1.35rem; color: var(--teal-dark);
  margin: 2rem 0 .75rem;
}

/* A plain text email, written and read as the monospace it will be. */
.mono-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem; line-height: 1.55;
}
.plain-preview {
  max-width: 46rem; background: #FFFFFF; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.plain-preview-head {
  max-width: 46rem; margin-bottom: .6rem; font-size: .88rem; color: var(--muted);
}
.plain-preview-head strong { color: var(--ink); }

/* Photos and video shown under a news story. */
.article-gallery { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem; }
.article-gallery h2 {
  font-family: var(--sans); font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .75rem;
}

/* ---------- Misc ---------- */

.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }

.section-cta {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: 1.5rem;
}

.notice {
  background: var(--gold-pale);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .site-header, .site-footer, .nav-toggle { display: none; }
  .press-release .article-back, .press-release .press-more,
  .press-release .draft-note { display: none; }
  .press-release { max-width: none; }
  .press-release .article-cover, .press-kit-item img { box-shadow: none; }
  .press-kit-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Icon buttons (admin row actions) ----------

   Row actions used to be text pills, which crowded a table's last
   column and pushed everything else out of view on a laptop. They are
   square icon buttons now: the label lives in title and aria-label, so
   the action still has a name on hover and in a screen reader. */

.ui-icon { display: block; width: 1.05em; height: 1.05em; flex: none; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 2.1rem; height: 2.1rem; padding: 0;
  font-size: 1rem; line-height: 1; vertical-align: middle;
  background: #fff; color: var(--teal);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-icon:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-icon:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.btn-icon:disabled { opacity: .45; cursor: default; }
.btn-icon:disabled:hover { background: #fff; border-color: var(--line); color: var(--teal); }

.btn-icon-danger { color: var(--red); border-color: #F0CCC7; }
.btn-icon-danger:hover { background: var(--red); border-color: var(--red); color: #fff; }

.btn-icon-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-icon-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }

/* Every action in one row cell, tight enough to read as a group. */
.row-actions { display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap; }
.row-actions form { display: inline-flex; margin: 0; }

/* Text buttons in the admin sit next to icon buttons all day, so they
   share the icon button's corner and height instead of the public
   site's pill. */
.admin-body .btn-small { border-radius: var(--radius-sm); min-height: 2.1rem; }

/* ---------- Compact table furniture ---------- */

/* Badges shrink inside a table: at body size they read as buttons. */
.table .badge { font-size: .72rem; padding: .18em .6em; letter-spacing: .04em; }

/* Group names and other soft labels. Quieter than a badge, and they
   wrap into a tidy row rather than stretching the column. */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.chip {
  display: inline-block; max-width: 11rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #EAF1F2; color: var(--teal-dark);
  border-radius: 6px; padding: .18em .5em;
  font-size: .75rem; font-weight: 600; text-decoration: none;
}
a.chip:hover { background: var(--teal); color: #fff; text-decoration: none; }
.chip-more { font-size: .75rem; font-weight: 600; color: var(--muted); }

/* Two or three facts stacked in one cell, so a table needs fewer
   columns to say the same thing. */
.cell-stack { display: grid; gap: .1rem; min-width: 0; }
.cell-name { font-weight: 700; }
.cell-sub { font-size: .82rem; color: var(--muted); overflow-wrap: break-word; }
.cell-sub a { color: inherit; }

/* A card whose heading carries an action, such as the close button on
   the contacts page's add form. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* Filters on the left, page-level actions on the right. */
.admin-toolbar {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 1rem;
}
.admin-toolbar .filter-bar { flex: 1 1 24rem; margin-bottom: 0; }
.admin-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---------- Tables that become cards on a phone ----------

   A table marked .table-stack (wrapper .table-wrap-stack) drops its
   header row on a narrow screen and prints each row as a card, with
   the column name coming from each cell's data-label. */

@media (max-width: 899px) {
  .table-wrap.table-wrap-stack { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  table.table.table-stack { display: block; min-width: 0; width: 100%; font-size: .95rem; }
  .table-stack thead { display: none; }
  .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: auto; }
  .table-stack tr {
    position: relative;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: .9rem 2.6rem .9rem 1rem; margin-bottom: .75rem;
  }
  .table-stack td { border: 0; padding: .25rem 0; }
  .table-stack td:empty { display: none; }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: .15rem;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  }
  /* The tick box rides in the corner the card's padding leaves free. */
  .table-stack .cell-pick { position: absolute; top: .9rem; right: .9rem; padding: 0; }
  .table-stack .cell-actions { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #EDF0F1; }
  /* In a card the address has the full width, so it may break anywhere
     rather than pushing the card wider than the screen. */
  .table-stack .cell-sub { overflow-wrap: anywhere; }
}

/* On a tablet the card is wide enough to put its labelled facts on one
   row, which keeps a page of them from running long. */
@media (min-width: 620px) and (max-width: 899px) {
  .table-stack tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem 1.25rem; }
  .table-stack .cell-main, .table-stack .cell-actions { grid-column: 1 / -1; }
}