/* Charlotte Wolf for D211 School Board — shared styles
   Palette (brand only): navy #1F2C59 · teal #004777 · orange #FF8C42 · peach #F2B880 · cream #FDF5EA · white
   Type (from the walk poster): Barlow Semi Condensed (headlines) · Lexend (spaced caps, labels, buttons) · Public Sans (body) */

:root {
  --navy: #1f2c59;
  --teal: #004777;
  --orange: #ff8c42;
  --peach: #f2b880;
  --cream: #fdf5ea;
  --white: #ffffff;

  --ink: var(--navy);                     /* body text */
  --muted: rgba(31, 44, 89, .78);         /* secondary text: 6.4:1 on white */
  --line: rgba(242, 184, 128, .35);       /* hairlines on navy (poster checklist) */

  --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-caps: "Lexend", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;

  --max: 1120px;
  --radius: 16px;     /* cards, photos */
  --radius-sm: 10px;  /* buttons, inputs, tags */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); }
a:hover { color: var(--navy); }

.container { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.text-center { text-align: center; }
.container-narrow { max-width: 760px; }
.container-mid { max-width: 860px; }
.section-cta { text-align: center; margin: 40px 0 0; }
.cta-row { margin-top: 28px; }
.cta-center { justify-content: center; }
.flush-top { padding-top: 0 !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.8rem, 7vw, 5rem); text-transform: uppercase; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); text-transform: uppercase; }
h3 { font-size: 1.7rem; }

/* Poster heading accent: an orange bar over a shorter peach bar */
.bars::after {
  content: "";
  display: block;
  width: 96px;
  height: 18px;
  margin-top: 20px;
  background:
    linear-gradient(var(--orange) 0 0) 0 0 / 100% 7px no-repeat,
    linear-gradient(var(--peach) 0 0) 0 100% / 66% 4px no-repeat;
}
.section-head .bars::after,
.page-hero .bars::after,
.text-center .bars::after {
  margin-inline: auto;
  background-position: 0 0, 50% 100%; /* center the short peach bar under the orange one */
}

/* Spaced-caps label (Lexend) */
.eyebrow {
  font-family: var(--font-caps);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  color: var(--teal);
  margin: 0 0 1rem;
}
.tagline {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--peach);
}

/* Placeholder copy — highlighted so it's easy to spot and replace */
.todo {
  color: var(--navy);
  background: #fff3a8;
  outline: 1px dashed #c9a800;
  border-radius: 3px;
  padding: 0 .2em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-caps);
  font-weight: 700;           /* heavier strokes read better on orange */
  text-transform: uppercase;
  letter-spacing: .08em;      /* tighter tracking: wide-spaced caps read as lighter */
  font-size: .92rem;
  text-decoration: none;
  text-align: center;
  padding: 1.05em 1.8em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background .15s, color .15s, transform .15s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: var(--navy); }          /* 5.8:1 */
.btn-orange:hover { background: var(--peach); color: var(--navy); }
.btn-blue, .btn-teal { background: var(--teal); color: var(--white); }  /* 9.7:1 */
.btn-blue:hover, .btn-teal:hover { background: var(--navy); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--teal); color: var(--white); }
.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--cream); color: var(--navy); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline-light { border-color: var(--peach); color: var(--white); background: transparent; }
.btn-outline-light:hover { background: var(--peach); color: var(--navy); }
.btn-outline-orange { border-color: var(--orange); color: var(--white); background: transparent; }
.btn-outline-orange:hover { background: var(--orange); color: var(--navy); }
.btn-block { display: block; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.hero :focus-visible,
.section-navy :focus-visible,
.form-card :focus-visible,
.card-ink :focus-visible,
.page-hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--peach); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 4px solid var(--orange);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}
.logo { display: block; line-height: 0; }
.logo img { height: 38px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal); }
.nav a[aria-current="page"] { box-shadow: 0 3px 0 var(--orange); }
.nav .btn { color: var(--navy); padding: .8em 1.4em; box-shadow: none; }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 4px solid var(--orange);
    padding: 8px 16px 20px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid #eee; }
  .nav a[aria-current="page"] { box-shadow: none; }
  .nav .btn { margin-top: 14px; text-align: center; border-bottom: 0; }
  .logo img { height: 32px; }
}

/* ---------- Ribbons (from the walk poster) ----------
   Angled stripes built from the poster's own shapes. Each ribbon keeps the
   poster's proportions, so the angle scales with the page width. */
.ribbon {
  position: relative;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.ribbon img {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
}
/* Orange stripe over a peach base (bottom of poster back) */
.ribbon-peach { aspect-ratio: 1200 / 88; }
.ribbon-peach .r-stripe { top: 0;      height: 84.09%; }
.ribbon-peach .r-base   { top: 31.82%; height: 329.5%; }
.on-navy  { background: var(--navy); }
.on-cream { background: var(--cream); }
.on-white { background: var(--white); }

/* ---------- Hero ----------
   Full-width photo with the copy over its left side. A navy wash fades in from
   the left behind the text (solid enough for white type to pass contrast) and
   clears before reaching Charlotte on the right. On phones the photo stacks on
   top and the copy sits on solid navy below it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  min-height: clamp(520px, 50vw, 760px);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 30%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(31, 44, 89, .97) 0%,
    rgba(31, 44, 89, .94) 38%,
    rgba(31, 44, 89, .55) 55%,
    rgba(31, 44, 89, 0) 72%);
}
.hero-inner { padding: clamp(56px, 7vw, 96px) 0 calc(clamp(56px, 7vw, 96px) + 88 / 1200 * 100vw); }
/* The striped divider overlaps the bottom of the photo, so the photo runs right down to the stripes */
.hero + .ribbon-peach { margin-top: calc(-88 / 1200 * 100vw); z-index: 1; }
.hero-copy { max-width: 540px; }
.hero h1 { color: var(--white); margin-bottom: .12em; }
.hero .for-line {
  font-family: var(--font-caps);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--white);
  font-size: clamp(1rem, 2vw, 1.3rem);
  margin: 0 0 18px;
}
.hero .tagline {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.45;
  max-width: 32ch;
  margin: 0 0 30px;
}
@media (max-width: 860px) {
  .hero { display: block; min-height: 0; }
  .hero-bg { position: static; display: block; height: auto; aspect-ratio: 4 / 3; object-position: 76% 30%; }
  .hero::before { display: none; }
  .hero-inner { padding: 36px 0 56px; }
  .hero-copy { max-width: none; text-align: center; }
  .hero .tagline { margin-inline: auto; }
  .hero .btn-row { justify-content: center; }
}
@media (max-width: 480px) {
  .hero .for-line { letter-spacing: .1em; }
  .hero .btn-row { flex-direction: column; }
  .hero .btn { width: 100%; }
}

/* ---------- Inner page heading ---------- */
.page-hero {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: clamp(48px, 7vw, 88px) 0 clamp(44px, 6vw, 72px);
}
.page-hero h1 { color: var(--white); }
.page-hero .eyebrow { color: var(--peach); }
.page-hero p { max-width: 640px; margin-inline: auto; color: var(--peach); }
.page-hero .tagline { font-size: 1.2rem; }

/* ---------- Vote banner (bottom of poster back) ---------- */
.vote-banner {
  background: var(--peach);
  color: var(--navy);
  text-align: center;
  padding: clamp(28px, 4vw, 48px) 0 clamp(44px, 6vw, 72px);
}
.vote-banner p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.05;
}
.vote-banner small {
  display: block;
  font-size: 1.05rem;
  margin-top: 8px;
}
.vote-banner .btn { margin-top: 22px; }
/* Diagonal bottom edge, parallel to the stripe above (poster slope: 60 / 1200 = 5% of width).
   The next section tucks underneath so the angled gap shows its own color. */
.vote-banner {
  --slant: 5vw;
  position: relative;
  z-index: 1;
  padding-bottom: calc(clamp(44px, 6vw, 72px) + var(--slant));
  margin-bottom: calc(var(--slant) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
/* Overlap the stripe by 2px so browsers that round sizes differently (Firefox) don't show a hairline seam */
.ribbon-peach + .vote-banner { margin-top: -2px; }
/* Orange stripe under the banner's angled bottom: same shape, thickness and gap as the stripe above
   (stripe asset: 74/1200 tall, band starts 60/1200 down on the left, 14/1200 thick). */
.ribbon-under { position: relative; z-index: 2; height: 0; pointer-events: none; }
.ribbon-under img {
  position: absolute;
  left: 0;
  top: calc(14 / 1200 * 100vw);
  width: 100%;
  max-width: none;
  height: calc(74 / 1200 * 100vw);
}
.ribbon-under + .section { padding-top: calc(88px + 5vw + 28 / 1200 * 100vw); }

/* Angled bottom edge: the next element tucks underneath; pair with .ribbon-under after it */
.angled-bottom {
  --slant: 5vw;
  position: relative;
  z-index: 1;
  margin-bottom: calc(var(--slant) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.page-hero.angled-bottom { padding-bottom: calc(clamp(44px, 6vw, 72px) + var(--slant)); }
.section.angled-bottom { padding-bottom: calc(88px + var(--slant)); }

/* Angled band: a section slanted top and bottom at the poster's slope, framed by orange stripes
   (.ribbon-over before it, .ribbon-under after it). */
.ribbon-over { position: relative; z-index: 2; height: 0; pointer-events: none; }
.ribbon-over img {
  position: absolute;
  left: 0;
  top: calc(-28 / 1200 * 100vw);
  width: 100%;
  max-width: none;
  height: calc(74 / 1200 * 100vw);
}
.section.angled-band {
  --slant: 5vw;
  position: relative;
  z-index: 1;
  padding-top: calc(88px + var(--slant));
  padding-bottom: calc(88px + var(--slant));
  margin-bottom: calc(var(--slant) * -1);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
/* When the section above isn't white, the band tucks up under it so the angled corner shows that section's color */
.angled-band.tuck-top { margin-top: calc(var(--slant) * -1); }
.ribbon-over.tuck img { top: calc(-28 / 1200 * 100vw - 5vw); }
.section.before-band { padding-bottom: calc(88px + 5vw + 28 / 1200 * 100vw); }
main:has(> .ribbon-under:last-child) + .site-footer { padding-top: calc(56px + 5vw + 28 / 1200 * 100vw); }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-cream { background: var(--cream); }
.section-white { background: var(--white); }
.section-navy, .section-blue { background: var(--navy); color: var(--white); }
.section-navy h2, .section-navy h3,
.section-blue h2, .section-blue h3 { color: var(--white); }
.section-navy .eyebrow, .section-blue .eyebrow { color: var(--peach); }
.section-navy p, .section-blue p { color: var(--cream); }
.section-teal { background: var(--teal); color: var(--white); }
.section-teal h2, .section-teal h3 { color: var(--white); }
.section-teal .eyebrow { color: var(--peach); }      /* 5.5:1 */
.section-teal p { color: var(--cream); }             /* 8.9:1 */
.section-teal :focus-visible { outline-color: var(--peach); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-head p { color: var(--muted); }

.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.split-top { align-items: start; grid-template-columns: 1fr 1.8fr; gap: 48px; } /* Get Involved: wider form column */
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } }

.photo-frame {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 480px;
  box-shadow: -14px 14px 0 var(--orange);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 860px) { .photo-frame { margin-inline: auto; width: 100%; } }

/* ---------- Experience checklist (poster back) ---------- */
.section-navy.watermark { position: relative; overflow: hidden; isolation: isolate; }
.section-navy.watermark::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -6%;
  width: min(900px, 90%);
  aspect-ratio: 1100 / 1025;
  background: url("assets/wolf-watermark.svg") center / contain no-repeat;
}
.checklist { list-style: none; padding: 0; margin: 0; max-width: 900px; }
.checklist li {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 2px solid var(--line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  color: var(--white);
}
.checklist li:last-child { border-bottom: 0; }
.checklist img { width: 40px; height: 40px; flex: none; }
/* ---------- Cards ---------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center an incomplete last row */
  gap: 24px;
}
.cards > * { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 1000px) { .cards > * { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px)  { .cards > * { flex-basis: 100%; } }
.card {
  border-radius: var(--radius);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card p { margin: 0; }
.card .btn { margin-top: auto; }
.card p + .btn { margin-top: 28px; }
/* Teal card: white text, orange button */
.card-ink { background: var(--teal); color: var(--white); }
.card-ink h3 { color: var(--white); }
.card-ink p { color: var(--cream); }
/* Outline card: white with a bold teal border */
.card-outline { background: var(--white); color: var(--navy); border: 4px solid var(--teal); }
.card-outline h3 { color: var(--teal); }
.card-outline p { color: var(--navy); }

/* White tiles — centered line icon + title, soft shadow, lift on hover; icon fills in on hover */
.tile {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(31, 44, 89, .05), 0 14px 34px rgba(31, 44, 89, .09);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(31, 44, 89, .06), 0 24px 48px rgba(31, 44, 89, .15);
}
.tile-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  color: var(--orange);
  fill: transparent;
  transition: fill .3s ease, transform .35s ease;
}
.tile-icon .ic-detail { transition: stroke .3s ease; }
.tile:hover .tile-icon { fill: currentColor; transform: scale(1.08); }
.tile:hover .tile-icon .ic-detail { stroke: var(--white); fill: none; }
.tile h3 { color: var(--navy); font-size: 1.6rem; margin-bottom: .3em; }
.tile p { margin: 0; color: var(--muted); }
.tile ul { color: var(--muted); padding-left: 1.2em; margin: .75em 0 0; text-align: left; }
.tile .btn { margin-top: 22px; padding: .85em 1.4em; font-size: .78rem; }
.tile-list { display: grid; gap: 24px; }
@media (max-width: 600px) { .tile { padding: 32px 24px; } }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile-icon, .tile-icon .ic-detail { transition: none; }
  .tile:hover { transform: none; }
  .tile:hover .tile-icon { transform: none; }
}

/* Quick facts — short orange bar as the bullet */
.facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.facts li { padding-left: 34px; position: relative; }
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 20px;
  height: 5px;
  border-radius: 3px;
  background: var(--orange);
}

.schools-label { text-align: center; margin: 40px 0 0; color: var(--muted); }
.schools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.schools li {
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: .7em 1.2em;
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form label,
.form legend {
  display: grid;
  gap: 8px;
  font-family: var(--font-caps);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  padding: 16px 18px;
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--cream);
}
/* Fields fill their column and are allowed to shrink (inputs have a built-in minimum width) */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea { width: 100%; min-width: 0; }
.form-row > *, .form label, .split > *, .join-grid > * { min-width: 0; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--orange); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { margin-bottom: 12px; }
/* Two columns when there's room, one when labels would get cramped */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 16px; }
.checks label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.4;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
/* Fixed size so a wrapping label can't squeeze the box; nudged to sit on the first line */
.checks input { flex: none; width: 20px; height: 20px; margin: .1em 0 0; accent-color: var(--orange); }
.form-note { font-size: .85rem; opacity: .85; margin: 0; }
.donate-lede { max-width: 34rem; margin: 0 auto; font-size: 1.15rem; }
.donate-soon {
  max-width: 520px;
  margin: 36px auto 0;
  padding: 32px 32px 36px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(242, 184, 128, .4);
}
.donate-soon p { margin: 0 auto; max-width: 30rem; line-height: 1.55; }
.donate-soon .donate-soon-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--peach) !important;
  margin-bottom: 10px;
}
.donate-soon strong { color: var(--white); }
.donate-soon .btn { margin-top: 24px; }
@media (max-width: 600px) { .donate-soon { padding: 26px 20px 28px; } }
.form-status {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.4;
}
.form-status[data-kind="success"] { background: var(--cream); color: var(--navy); border-left: 6px solid var(--orange); }
.form-status[data-kind="error"]   { background: var(--peach); color: var(--navy); }

/* Sign-up card — navy block with a big bold headline */
.form-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 64px 56px;
}
/* Faint howling wolf (poster watermark, white at 6%) */
.form-card::before,
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1100 / 1025;
  background: url("assets/wolf-watermark.svg") center / contain no-repeat;
  pointer-events: none;
}
.form-card::before { width: 52%; right: -6%; bottom: -4%; }
.form-card h2 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 28px;
}
.form-card .btn { margin-top: 8px; font-size: .95rem; }
@media (max-width: 600px) { .form-card { padding: 40px 20px; } }

.join-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}
.join-grid .stack { display: grid; gap: 20px; }
@media (max-width: 860px) { .join-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--cream); padding: 56px 0 28px; font-size: .95rem; }
.site-footer::before { width: min(300px, 40%); right: 2%; bottom: -2%; }
.site-footer a { color: var(--white); }
.site-footer .logo img { height: 44px; }
.site-footer .tagline { color: var(--peach); margin: 18px 0 0; max-width: 34ch; line-height: 1.45; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--font-caps);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--orange);
  margin: 0 0 12px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { text-decoration: underline; }
.paid-for {
  border: 1px solid rgba(242, 184, 128, .5);
  display: inline-block;
  padding: 8px 14px;
  font-size: .85rem;
  margin: 0;
}
.footer-bottom p { margin: 0; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}