/* ============================================================
   Iqbal Sandhu-Griffen — Mayor, R.M. of West St. Paul
   Time for Change. Vote for Change.

   Palette is the MP025 set Edel picked, which already matches
   the trifold and door hangers.
   ============================================================ */

:root {
  --noir:      #172B36;   /* Oceanic Noir — deepest ground   */
  --teal:      #114C5A;   /* Nocturnal Expedition — primary  */
  --teal-hi:   #1B6B7C;   /* lifted teal for gradients       */
  --gold:      #FFC801;   /* Forsythia — primary accent      */
  --saffron:   #FF9932;   /* Deep Saffron — gradient partner */
  --powder:    #F1F6F4;   /* Arctic Powder — cool ground     */
  --mint:      #D9E8E2;   /* Mystic Mint — soft band         */
  --cream:     #FDF6E8;   /* warm cream, from the print work */
  --ink:       #0E2029;

  --shell: min(1200px, 100% - 2.5rem);
  --dock-w: 3.25rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: Archivo, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: var(--shell); margin-inline: auto; }

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

/* ---------- type scale ---------- */

.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.section-head {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -.015em;
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(23, 43, 54, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.nav__inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: .85rem;
}

.wordmark {
  display: flex; flex-direction: column;
  min-width: 0;
  text-decoration: none; color: var(--cream);
  line-height: 1; margin-right: auto;
}
.wordmark b {
  font-size: 1.0625rem; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase;
}
.wordmark span {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-top: .28rem;
}

.nav__links { display: flex; gap: 1.6rem; }

.nav__links a {
  color: rgba(241, 246, 244, .82);
  text-decoration: none;
  font-size: .875rem; font-weight: 600;
  letter-spacing: .02em;
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__links a:hover { color: var(--cream); border-bottom-color: var(--gold); }
.nav__links a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.btn {
  flex: none;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.35rem;
  border-radius: 999px;
  font-weight: 800; font-size: .875rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease);
}
.btn--gold { background: var(--gold); color: var(--noir); }
.btn--gold:hover { background: var(--saffron); transform: translateY(-2px); }

.btn--ghost { border-color: rgba(241, 246, 244, .4); color: var(--cream); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--ink { background: var(--teal); color: var(--cream); }
.btn--ink:hover { background: var(--noir); transform: translateY(-2px); }

.btn--lg { padding: .95rem 1.8rem; font-size: 1rem; }

/* ============================================================
   HERO
   The wedge motif is lifted from his own door hangers, so the
   site and the thing in someone's hand read as one campaign.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 15%, #1B6B7C 0%, transparent 58%),
    linear-gradient(155deg, var(--teal) 0%, var(--noir) 72%);
  color: var(--cream);
  isolation: isolate;
}

/* gold wedge, top-right */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--gold), var(--saffron));
  clip-path: polygon(100% 0, 100% 34%, 62% 0);
  z-index: -1;
}

/* cream wedge, bottom-left */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cream);
  clip-path: polygon(0 100%, 17% 100%, 0 78%);
  z-index: -1;
}

.hero__inner {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 1.5rem;
  align-items: end;
  min-height: min(92vh, 860px);
  padding-block: 4.5rem 0;
}

.hero__copy { padding-bottom: 4.5rem; }

.hero .eyebrow { color: var(--gold); margin-bottom: 1.4rem; }

.hero__slogan {
  font-size: clamp(2.3rem, 6.4vw, 5.1rem);
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .92;
}
.hero__slogan .l2 { display: block; color: var(--gold); }

.hero__sub {
  max-width: 34ch;
  margin: 1.6rem 0 0;
  color: rgba(241, 246, 244, .84);
  font-size: 1.0625rem;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: 2.2rem;
}

/* date lockup — same device as the print collateral */
.datechip {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 2.6rem;
  padding: .6rem 1.1rem .6rem .6rem;
  border: 1px solid rgba(255, 200, 1, .38);
  border-radius: .6rem;
  background: var(--noir);
  box-shadow: 0 8px 24px rgba(10, 26, 33, .3);
}
.datechip b {
  display: grid; place-items: center;
  min-width: 3.1rem; padding: .3rem .5rem;
  background: var(--gold); color: var(--noir);
  border-radius: .35rem;
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  letter-spacing: -.02em;
}
.datechip span {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); line-height: 1.45;
}

/* candidate photo — cut-out sits flush to the baseline */
.hero__figure {
  position: relative;
  align-self: end;
  min-height: 34rem;
  margin: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
.hero__figure img {
  width: auto; height: auto;
  max-height: min(88vh, 830px);
  max-width: 128%;
  margin-right: -6%;
  filter: drop-shadow(-16px 10px 40px rgba(0, 0, 0, .48));
}

.photo-slot {
  width: 100%; max-width: 26rem; aspect-ratio: 3 / 4;
  border: 2px dashed rgba(255, 200, 1, .45);
  border-bottom: none;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(180deg, rgba(23,43,54,.18), rgba(23,43,54,.42));
  display: grid; place-content: center; gap: .5rem;
  text-align: center; padding: 2rem;
}
.photo-slot b {
  font-size: .8rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.photo-slot span {
  font-size: .8rem; color: rgba(241, 246, 244, .7);
  max-width: 22ch; line-height: 1.5;
}

/* ============================================================
   THE HONEST BOARD — signature element.

   Iqbal's own device (FV02 / GP1): every issue sorted by what
   the office can actually do about it. It is the most
   distinctive thing in the campaign, so it gets the boldness
   and the rest of the page stays quiet.
   ============================================================ */

.board {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--powder);
}

.board__head {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end; margin-bottom: 3rem;
}
.board__head .eyebrow { color: var(--saffron); }
.board__head h2 { color: var(--noir); margin-top: .7rem; }
.board__head p { margin: 0; color: rgba(14, 32, 41, .74); }

.board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.tier {
  position: relative;
  padding: 1.9rem 1.5rem 1.7rem;
  border-radius: .9rem;
  background: #fff;
  border: 1px solid rgba(17, 76, 90, .14);
  border-top: 5px solid var(--teal);
}
.tier--own     { border-top-color: var(--teal); }
.tier--process { border-top-color: var(--saffron); }
.tier--push    { border-top-color: var(--gold); }

.tier__label {
  margin: 0 0 .5rem;
  font-size: 1.0625rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--noir);
}
.tier__note {
  margin: 0 0 1.3rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(17, 76, 90, .13);
  font-size: .875rem; color: rgba(14, 32, 41, .64);
}

.tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.tier__list li {
  position: relative; padding-left: 1.35rem;
  font-size: .9375rem; line-height: 1.45;
}
.tier__list li::before {
  content: ""; position: absolute;
  left: 0; top: .52em;
  width: .5rem; aspect-ratio: 1;
  background: currentColor; opacity: .38;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tier__list em {
  display: block; font-style: normal;
  font-size: .8125rem; color: rgba(14, 32, 41, .58);
  margin-top: .15rem;
}

.board__foot {
  margin: 2.5rem 0 0; max-width: 46ch;
  font-size: 1.0625rem; color: rgba(14, 32, 41, .8);
}
.board__foot b { color: var(--noir); }

/* ============================================================
   PLANKS
   Four positions, not a sequence — so no 01/02/03 numbering.
   ============================================================ */

.planks { padding-block: clamp(4rem, 8vw, 7rem); background: var(--cream); }

.planks__head {
  display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 1.5rem;
  margin-bottom: 3rem;
}
.planks__head .eyebrow { color: var(--teal); }
.planks__head h2 { color: var(--noir); margin-top: .7rem; }
.planks__head p {
  max-width: 40ch; margin: 0;
  color: rgba(14, 32, 41, .72); font-size: 1rem;
}

.plank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.1rem;
}

.plank {
  position: relative; overflow: hidden;
  padding: 2rem 1.6rem 1.8rem;
  background: #fff;
  border: 1px solid rgba(17, 76, 90, .13);
  border-radius: .9rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.plank::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 3.4rem; aspect-ratio: 1;
  background: linear-gradient(145deg, var(--gold), var(--saffron));
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  transition: width .22s var(--ease);
}
.plank:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17, 76, 90, .13); }
.plank:hover::after { width: 4.4rem; }

.plank h3 {
  font-size: 1.0625rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--teal);
  max-width: 12ch; margin-bottom: .85rem;
}
.plank p { margin: 0; font-size: .9375rem; color: rgba(14, 32, 41, .78); }

/* ============================================================
   IN HIS WORDS
   Serif is reserved for Iqbal speaking — everywhere else is
   campaign voice in Archivo. The face change marks the speaker.
   ============================================================ */

.words {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--teal); color: var(--cream);
}
.words::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--gold), var(--saffron));
  clip-path: polygon(0 100%, 13% 100%, 0 66%);
  opacity: .95;
}

.words__inner { position: relative; }
.words .eyebrow { color: var(--gold); margin-bottom: 2.4rem; }

.quote { margin: 0; max-width: 30ch; }
.quote p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.45rem);
  font-style: italic; line-height: 1.24;
  letter-spacing: -.01em; margin: 0;
  text-wrap: balance;
}
.quote footer {
  margin-top: 1.5rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}

.words__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.clip-list { display: grid; gap: .55rem; }

.clip {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: .65rem;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.clip:hover { background: rgba(255, 200, 1, .13); border-color: var(--gold); }

.clip__play {
  flex: none; display: grid; place-items: center;
  width: 2.3rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); color: var(--noir);
  font-size: .7rem;
}
.clip b { font-size: .9375rem; font-weight: 700; }
.clip span { display: block; font-size: .8125rem; color: rgba(241, 246, 244, .66); margin-top: .1rem; }

/* lived-experience proof — the receipts behind the quote */
.proof { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.proof li {
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.proof li:first-child { border-top: 1px solid rgba(255, 255, 255, .16); }
.proof b {
  display: block; font-size: 1rem; font-weight: 800;
  color: var(--gold); letter-spacing: .01em;
}
.proof span {
  display: block; margin-top: .25rem;
  font-size: .9375rem; color: rgba(241, 246, 244, .78);
}

/* ============================================================
   REACH — the emotional climax. His whole campaign is access.
   ============================================================ */

.reach {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--powder);
}

.reach__card {
  position: relative; overflow: hidden;
  background: var(--noir); color: var(--cream);
  border-radius: 1.25rem;
  padding: clamp(2.4rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
.reach__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--gold), var(--saffron));
  clip-path: polygon(100% 100%, 100% 40%, 68% 100%);
}

.reach__copy { position: relative; z-index: 1; }
.reach .eyebrow { color: var(--gold); margin-bottom: 1.1rem; }
.reach h2 { margin-bottom: 1.1rem; }
.reach p { margin: 0; color: rgba(241, 246, 244, .82); max-width: 42ch; }

.reach__lines { position: relative; z-index: 1; display: grid; gap: .8rem; }

.line {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.25rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .75rem;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.line:hover { background: rgba(255, 200, 1, .14); border-color: var(--gold); transform: translateX(3px); }
.line b { display: block; font-size: 1.0625rem; font-weight: 800; }
.line span {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .18rem;
}

/* ============================================================
   SIGNATURE — the reach dock.
   "Leadership within reach", made literal: he is one tap away
   from every scroll position, on every page.
   ============================================================ */

.dock {
  position: fixed; top: 50%; right: 0; z-index: 70;
  transform: translateY(-50%);
  display: flex; align-items: stretch;
}

.dock__tab {
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: .6rem;
  padding: 1.35rem .55rem;
  width: var(--dock-w);
  background: var(--gold); color: var(--noir);
  border: none; border-radius: .7rem 0 0 .7rem;
  font-family: inherit; font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: -6px 0 22px rgba(23, 43, 54, .26);
  transition: background .18s var(--ease);
}
.dock__tab:hover { background: var(--saffron); }

.dock__panel {
  width: 0; overflow: hidden;
  background: var(--noir);
  border-radius: .7rem 0 0 .7rem;
  transition: width .3s var(--ease);
}
.dock[data-open="true"] .dock__panel { width: 15.5rem; }
.dock[data-open="true"] .dock__tab { border-radius: 0; }

.dock__body { padding: 1.3rem 1.2rem; width: 15.5rem; }
.dock__body .eyebrow { color: var(--gold); margin-bottom: .9rem; }
.dock__body .line { padding: .75rem .85rem; margin-bottom: .5rem; }
.dock__body .line b { font-size: .9375rem; }

.dock-bar { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  background: var(--noir); color: rgba(241, 246, 244, .66);
  padding-block: 3rem 2.2rem;
  font-size: .875rem;
}
.foot__top {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: center;
  padding-bottom: 1.8rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.foot__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot__links a { text-decoration: none; font-weight: 600; }
.foot__links a:hover { color: var(--gold); }
.foot__legal { display: grid; gap: .4rem; font-size: .8125rem; }
.foot__legal .auth { color: rgba(241, 246, 244, .5); }

/* ============================================================
   RESPONSIVE
   Most of this traffic arrives by QR off a door hanger, so the
   phone layout is the real layout.
   ============================================================ */

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__copy { padding-bottom: 2.5rem; }
  .hero__figure { min-height: 0; order: 2; justify-content: center; }
  /* the desktop hero deliberately lets him overhang the column; on one column
     that overhang crops his left side instead, so rein it in here */
  .hero__figure img { max-width: 100%; max-height: none; margin-right: 0; }
  .photo-slot { max-width: 20rem; margin-inline: auto; }
  .words__grid, .reach__card { grid-template-columns: 1fr; }
  .reach__card::after { display: none; }
  .board__head, .planks__head { grid-template-columns: 1fr; display: grid; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__inner { gap: 1rem; }

  .hero::before { clip-path: polygon(100% 0, 100% 17%, 80% 0); }
  .hero .eyebrow { max-width: 20ch; }
  .hero::after { display: none; }

  /* dock becomes a bottom bar — thumb reach, not edge reach */
  .dock { display: none; }
  .dock-bar {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: rgba(255, 255, 255, .16);
    box-shadow: 0 -8px 24px rgba(23, 43, 54, .22);
  }
  .dock-bar a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .95rem .6rem;
    background: var(--gold); color: var(--noir);
    text-decoration: none;
    font-size: .875rem; font-weight: 800;
    letter-spacing: .03em;
  }
  .dock-bar a + a { background: var(--noir); color: var(--gold); }

  body { padding-bottom: 3.4rem; }

  .wordmark b { font-size: .9375rem; }
  .wordmark span { font-size: .5625rem; letter-spacing: .14em; }
  .nav .btn { padding: .6rem 1rem; font-size: .8125rem; }

  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .datechip { width: 100%; }
  .board__foot, .hero__sub { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   INNER PAGES
   ============================================================ */

.phead {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--teal) 0%, var(--noir) 78%);
  color: var(--cream);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.phead::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--gold), var(--saffron));
  clip-path: polygon(100% 0, 100% 30%, 74% 0);
}
.phead__inner { position: relative; max-width: 44ch; }
.phead .eyebrow { color: var(--gold); margin-bottom: 1rem; }
.phead h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  text-transform: uppercase;
}
.phead p { margin: 1.2rem 0 0; color: rgba(241, 246, 244, .85); }

/* ---------- prose ---------- */

.prose { padding-block: clamp(3rem, 7vw, 5.5rem); }
.prose--cream  { background: var(--cream); }
.prose--powder { background: var(--powder); }

.prose__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.prose__body { max-width: 62ch; }
.prose__body h2 { color: var(--noir); margin-bottom: 1.2rem; }
.prose__body h3 {
  color: var(--teal); font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 2rem 0 .6rem;
}
.prose__body p { margin: 0 0 1.05rem; }
.prose__body p:last-child { margin-bottom: 0; }

.lead { font-size: 1.1875rem; line-height: 1.55; color: var(--noir); }

.pullquote {
  margin: 2rem 0; padding: 1.4rem 0 1.4rem 1.5rem;
  border-left: 4px solid var(--gold);
}
.pullquote p {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic; font-size: 1.3rem; line-height: 1.35;
  color: var(--noir); margin: 0;
}

/* photo placeholder for b-roll we don't have yet */
.slot {
  border: 2px dashed rgba(17, 76, 90, .3);
  border-radius: .8rem;
  background: var(--mint);
  aspect-ratio: 4 / 3;
  display: grid; place-content: center; gap: .4rem;
  text-align: center; padding: 1.5rem;
}
.slot b {
  font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.slot span { font-size: .8125rem; color: rgba(14, 32, 41, .6); max-width: 26ch; }
.slot + .slot { margin-top: 1rem; }

/* ---------- issues ---------- */

.issues { display: grid; gap: 1rem; }

.issue {
  background: #fff;
  border: 1px solid rgba(17, 76, 90, .14);
  border-radius: .9rem;
  padding: 1.8rem 1.6rem;
}
.issue__top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .8rem; margin-bottom: .9rem;
}
.issue h3 {
  font-size: 1.25rem; color: var(--noir);
  text-transform: none; letter-spacing: -.01em; margin: 0;
}
.tag {
  flex: none;
  font-size: .625rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.tag--own     { color: var(--teal); }
.tag--process { color: #B4641A; }
.tag--push    { color: #8A6A00; }

.issue p { margin: 0 0 .8rem; font-size: .9375rem; color: rgba(14, 32, 41, .8); }
.issue p:last-child { margin-bottom: 0; }
.issue .said {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic; font-size: 1.0625rem;
  color: var(--teal); line-height: 1.4;
}

/* ---------- video list ---------- */

.vids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.vid {
  background: #fff;
  border: 1px solid rgba(17, 76, 90, .14);
  border-radius: .9rem;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.vid__frame {
  aspect-ratio: 9 / 16;
  background: linear-gradient(160deg, var(--teal), var(--noir));
  display: grid; place-content: center; gap: .5rem;
  text-align: center; padding: 1.5rem; color: var(--cream);
}
.vid__frame b {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.vid__frame span { font-size: .8125rem; color: rgba(241, 246, 244, .68); }
.vid__body { padding: 1.2rem 1.2rem 1.4rem; }
.vid__body h3 { font-size: 1.0625rem; color: var(--noir); margin: 0 0 .5rem; letter-spacing: -.01em; }
.vid__body p {
  margin: 0; font-size: .9375rem; color: rgba(14, 32, 41, .76);
  font-family: "Source Serif 4", Georgia, serif; font-style: italic;
}

/* ---------- form ---------- */

.formwrap { padding-block: clamp(3rem, 7vw, 5.5rem); background: var(--powder); }

.formcard {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  background: #fff;
  border: 1px solid rgba(17, 76, 90, .14);
  border-radius: 1.25rem;
  padding: clamp(2rem, 4.5vw, 3.2rem);
}
.formcard h2 { color: var(--noir); margin-bottom: 1rem; }
.formcard .eyebrow { color: var(--teal); margin-bottom: .9rem; }
.formcard > div > p { color: rgba(14, 32, 41, .78); margin: 0 0 1.4rem; }

.field { display: grid; gap: .4rem; margin-bottom: 1.05rem; }
.field label { font-size: .8125rem; font-weight: 700; color: var(--noir); }
.field input, .field textarea, .field select {
  font: inherit; font-size: .9375rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(17, 76, 90, .28);
  border-radius: .5rem;
  background: var(--powder);
  color: var(--ink);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 3px solid var(--gold); outline-offset: 1px;
  border-color: var(--teal); background: #fff;
}
.field small { font-size: .75rem; color: rgba(14, 32, 41, .58); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.formnote { margin: 1rem 0 0; font-size: .8125rem; color: rgba(14, 32, 41, .6); }

/* ---------- vote band ---------- */

.vote {
  background: var(--mint);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.vote__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem;
}
.vote h2 { color: var(--noir); font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.vote p { margin: .6rem 0 0; color: rgba(14, 32, 41, .76); max-width: 46ch; }

@media (max-width: 960px) {
  .prose__grid, .formcard { grid-template-columns: 1fr; }
}

/* ---------- warm portrait in the personal section ---------- */

.portrait {
  margin: 0 0 2rem;
  max-width: 24rem;
  border-radius: .9rem;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 18px 44px rgba(10, 26, 33, .34);
}
.portrait img { width: 100%; height: auto; display: block; }

.portrait__slot {
  aspect-ratio: 4 / 5;
  background: rgba(255, 255, 255, .07);
  display: grid; place-content: center; gap: .45rem;
  text-align: center; padding: 1.5rem;
}
.portrait__slot b {
  font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.portrait__slot span {
  font-size: .8125rem; color: rgba(241, 246, 244, .7);
  max-width: 24ch; line-height: 1.5;
}

.words__grid .quote { max-width: 32ch; }

/* ============================================================
   PHONE OVERRIDES FOR INNER PAGES
   Must live at the end of the file — the inner-page base rules
   are declared after the main media queries, so anything earlier
   loses on source order.
   ============================================================ */

@media (max-width: 760px) {
  /* 16 full-height cards is 16 screens of scrolling — go 2-up */
  .vids { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .vid__frame { padding: .7rem; }
  .vid__frame span { display: none; }
  .vid__frame b { font-size: .625rem; }
  .vid__body { padding: .8rem .8rem 1rem; }
  .vid__body h3 { font-size: .8125rem; margin-bottom: .35rem; }
  .vid__body p { font-size: .75rem; }

  .portrait { max-width: none; }
  .issue { padding: 1.4rem 1.2rem; }
  .issue h3 { font-size: 1.0625rem; }
}

/* ---------- portrait on the reach page ---------- */

.reachshot {
  margin: 1.6rem 0 0;
  border-radius: .8rem;
  overflow: hidden;
  max-width: 20rem;
  box-shadow: 0 14px 32px rgba(17, 76, 90, .18);
  border-bottom: 5px solid var(--gold);
}
.reachshot img { width: 100%; height: auto; display: block; }

@media (max-width: 960px) {
  .reachshot { max-width: none; }
}