/* cheap.css — the Vermont register.
   Bread & Puppet, hand-painted signs, the Warren parade: kraft paper, carved
   letterforms, one bad print run. Loaded AFTER pledge.css and overrides it.

   The conceit: Wasicu didn't build this poster — the town did. Wasicu just
   bought the banner space at the top. A weapons manufacturer sponsoring the
   community parade is more honest, and more sinister, than a corporate site.
   So everything handmade is warm, and the one cold teal bar is the intruder. */

:root {
  --kraft:      #cbab7d;
  --kraft-lt:   #dcc094;
  --kraft-dk:   #a98a5e;
  --barn:       #b7352c;
  --barn-dk:    #8d251e;
  --mustard:    #e0a92e;
  --pine-flat:  #2c4a34;
  --ink-cut:    #1c1710;

  --carved: 'Fredericka the Great', 'IM Fell English', serif;  /* woodcut */
  --wood:   'Alfa Slab One', Georgia, serif;                   /* wood type */
  --brush:  'Rock Salt', 'Comic Sans MS', cursive;             /* sign paint */
}

/* ── the sheet of kraft paper everything is printed on ───────────────── */
[data-view="home"],
[data-view="accuracy"],
[data-view="status"],
[data-view="join"],
[data-view="donate"],
[data-view="volunteer"] {
  font-family: var(--body);
  background-color: var(--kraft);
  color: var(--ink-cut);
  position: relative;
  min-height: 100vh;
}
/* paper tooth — inline SVG so there is still exactly one third-party request */
[data-view="home"]::before,
[data-view="accuracy"]::before,
[data-view="status"]::before,
[data-view="join"]::before,
[data-view="donate"]::before,
[data-view="volunteer"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='5'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
}
[data-view] > * { position: relative; z-index: 1; }

/* ── the sponsor's banner: the one machine-made thing on the page ────── */
.wasicu-bar {
  font-family: var(--wood);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}

/* ── masthead ────────────────────────────────────────────────────────── */
.pleasant-nav {
  background: transparent;
  border-bottom: 5px solid var(--ink-cut);
  border-image: repeating-linear-gradient(90deg, var(--ink-cut) 0 14px, transparent 14px 20px) 5;
  box-shadow: none;
  padding: 1.1rem 1.25rem 0.9rem;
}
.pleasant-wordmark {
  font-family: var(--carved);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-cut);
  text-shadow: 2px 2.5px 0 var(--barn);   /* off-register second pass */
}
.pnav-link {
  font-family: var(--wood);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-cut);
  opacity: 0.78;
}
.pnav-link:hover,
.pnav-link.is-active { opacity: 1; color: var(--barn-dk); }

/* ── hero: the poster ────────────────────────────────────────────────── */
.pleasant-hero { margin-top: 0; padding: 1.7rem 1.25rem 1.2rem; }

.pleasant-eyebrow {
  font-family: var(--wood);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-cut);
  opacity: 0.8;
}
.pleasant-h1 {
  font-family: var(--carved);
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 5.4rem);
  line-height: 0.96;
  color: var(--ink-cut);
  letter-spacing: 0.005em;
  text-shadow: 3px 3.5px 0 var(--barn);
  margin: 0.35rem 0 0.15rem;
  text-wrap: balance;
}
.pleasant-lede {
  font-family: var(--brush);
  font-size: clamp(0.86rem, 2.1vw, 1.02rem);
  line-height: 1.95;
  color: var(--barn-dk);
  max-width: 46ch;
  margin: 1.1rem auto 0;
  transform: rotate(-0.5deg);
}
.pleasant-date {
  display: inline-block;
  font-family: var(--wood);
  font-size: clamp(0.72rem, 2vw, 0.92rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--ink-cut);
  color: var(--kraft-lt);
  padding: 0.55rem 1.15rem;
  transform: rotate(-1deg);
  margin: 1.5rem 0 0;
}
.pleasant-countlabel {
  font-family: var(--brush);
  font-size: 0.8rem;
  color: var(--ink-cut);
  opacity: 0.75;
  margin-top: 1.8rem;
}

/* ── countdown: a hand-painted scoreboard ────────────────────────────── */
.cd-clock { gap: 0.55rem; }
.cd-unit {
  background: var(--ink-cut);
  padding: 0.6rem 0.55rem 0.45rem;
  min-width: 4.4rem;
}
.cd-unit:nth-child(odd) { transform: rotate(-1deg); }
.cd-unit:nth-child(even) { transform: rotate(0.8deg); }
.cd-num {
  font-family: var(--wood);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  color: var(--mustard);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.cd-label {
  font-family: var(--wood);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kraft);
  opacity: 0.72;
}

/* the Turn: when the roll tears, the sign is repainted by hand */
.cd-glitch { background: var(--ink-cut); }
.cd-glitch-kicker { font-family: var(--wood); color: var(--barn); letter-spacing: 0.14em; }
.br-n { font-family: var(--wood); color: var(--mustard); }
.br-t { font-family: var(--brush); color: var(--kraft-lt); line-height: 1.9; }
.cd-glitch-credit { font-family: var(--brush); color: var(--kraft-dk); }

/* ── the coin slot ───────────────────────────────────────────────────── */
.pleasant-ctas { padding-top: 0.5rem; gap: 1.25rem; }
.btn-pleasant {
  font-family: var(--wood);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0.8rem 1.6rem;
  transition: transform 0.12s ease, background 0.12s, color 0.12s;
}
.btn-pleasant-solid {
  background: var(--barn);
  border: 4px solid var(--barn);
  color: var(--kraft-lt);
  transform: rotate(-1.6deg);
}
.btn-pleasant-solid:hover { background: var(--barn-dk); border-color: var(--barn-dk); transform: rotate(-1.6deg) scale(1.03); }
.btn-pleasant-outline {
  background: transparent;
  border: 4px solid var(--ink-cut);
  color: var(--ink-cut);
  transform: rotate(1.1deg);
}
.btn-pleasant-outline:hover { background: var(--ink-cut); color: var(--kraft-lt); transform: rotate(1.1deg) scale(1.03); }

/* ── the sponsor's clipart Vermont ───────────────────────────────────── */
.icon-label {
  font-family: var(--wood);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-cut);
  opacity: 0.72;
}

/* ── programme ───────────────────────────────────────────────────────── */
.pleasant-program {
  background: var(--kraft-lt);
  border: 4px solid var(--ink-cut);
  border-radius: 0;
  box-shadow: none;
}
.pleasant-program-h3 {
  font-family: var(--carved);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-cut);
}
.program-table td {
  font-family: var(--body);
  border-bottom: 2px solid rgba(28, 23, 16, 0.28);
  color: var(--ink-cut);
}
.program-table td:first-child {
  font-family: var(--wood);
  font-size: 0.82rem;
  color: var(--barn-dk);
  font-variant-numeric: tabular-nums;
}

/* ── the roll call ───────────────────────────────────────────────────── */
.pleasant-counter {
  font-family: var(--brush);
  font-size: 0.92rem;
  color: var(--ink-cut);
  transform: rotate(-0.6deg);
}
#member-count { font-family: var(--wood); color: var(--barn-dk); }

/* ── footer: the sponsor's lawyers, in the smallest type on the sheet ── */
.pleasant-footer {
  background: transparent;
  border-top: 5px solid var(--ink-cut);
  border-image: repeating-linear-gradient(90deg, var(--ink-cut) 0 14px, transparent 14px 20px) 5;
}
.pleasant-disclaimer { color: var(--ink-cut); opacity: 0.6; }
.pleasant-footer-org { color: var(--ink-cut); opacity: 0.8; }
.pleasant-footer-links a { font-family: var(--wood); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--barn-dk); }

/* ── documents & join ────────────────────────────────────────────────── */
.page-title {
  font-family: var(--carved);
  font-weight: 400;
  color: var(--ink-cut);
  text-shadow: 2px 2.5px 0 var(--barn);
}
.pleasant-h3 { font-family: var(--carved); font-weight: 400; color: var(--ink-cut); }
.eyebrow { font-family: var(--wood); letter-spacing: 0.18em; text-transform: uppercase; color: var(--barn-dk); }
.pleasant-field-label {
  font-family: var(--wood);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-cut);
}
.pleasant-field {
  background: var(--kraft-lt);
  border: 3px solid var(--ink-cut);
  border-radius: 0;
  font-family: var(--body);
  color: var(--ink-cut);
}
.pleasant-field:focus-visible { outline: 3px solid var(--barn); outline-offset: 2px; }
.pleasant-checkbox { font-family: var(--body); color: var(--ink-cut); }
.pleasant-checkbox input { accent-color: var(--barn); }
.join-divider { font-family: var(--wood); letter-spacing: 0.2em; color: var(--ink-cut); opacity: 0.6; }
.reveal-headline { font-family: var(--carved); font-weight: 400; color: var(--ink-cut); }
.pleasant-doc { color: var(--ink-cut); }

/* the sheet is printed by hand — but nobody has to get seasick */
@media (prefers-reduced-motion: reduce) {
  .pleasant-lede,
  .pleasant-date,
  .pleasant-counter,
  .cd-unit,
  .btn-pleasant-solid,
  .btn-pleasant-outline { transform: none; }
}

/* ── donate + volunteer: same sheet of kraft ─────────────────────────── */
[data-view="donate"] .page-lede,
[data-view="volunteer"] .page-lede { color: var(--ink-cut); font-size: 1.06rem; max-width: 58ch; }
[data-view="donate"] .body-text,
[data-view="volunteer"] .body-text { color: var(--ink-cut); }
[data-view="donate"] .card,
[data-view="volunteer"] .card {
  background: var(--kraft-lt);
  border: 4px solid var(--ink-cut);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink-cut);
}
.seat-grid .card:nth-child(odd) { transform: rotate(-0.4deg); }
.seat-grid .card:nth-child(even) { transform: rotate(0.35deg); }
.crew-grid .card:nth-child(2) { transform: rotate(0.4deg); }

[data-view="donate"] .card h3,
[data-view="volunteer"] .card h3 {
  font-family: var(--carved);
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--ink-cut);
}
.tier-stripe { height: 10px; }
.tier-stripe-rust { background: var(--barn); }
.tier-stripe-gold { background: var(--mustard); }
.tier-stripe-oxblood { background: var(--barn-dk); }
.seat-price {
  font-family: var(--wood);
  font-size: 1.35rem;
  color: var(--ink-cut) !important;   /* poster numbers in ink; tier colour lives on the stripe */
}
.seats-lede {
  font-family: var(--brush);
  font-size: 0.9rem;
  line-height: 2;
  color: var(--barn-dk);
  transform: rotate(-0.4deg);
}
.tier-eyebrow {
  font-family: var(--wood);
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}
.tier-eyebrow-rust { color: var(--barn-dk); }
.tier-eyebrow-gold { color: #8a6512; }
.monthly-title { font-family: var(--carved); font-size: 1.4rem; color: var(--ink-cut); }
.monthly-sub { color: var(--ink-cut); opacity: 0.78; }
.vol-thanks { font-family: var(--brush); font-size: 1.15rem; color: var(--barn-dk); }

[data-view="donate"] .field-label,
[data-view="volunteer"] .field-label,
.vol-fieldset legend, .checkbox-label {
  font-family: var(--wood);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-cut);
}
.checkbox-label { display: inline-flex; align-items: center; gap: 0.45rem; }
[data-view="donate"] .field,
[data-view="volunteer"] .field {
  background: #e9d9b8;
  border: 3px solid var(--ink-cut);
  border-radius: 0;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink-cut);
}
[data-view="donate"] .field:focus-visible,
[data-view="volunteer"] .field:focus-visible { outline: 3px solid var(--barn); outline-offset: 2px; }
.vol-fieldset { border: 3px solid var(--ink-cut); }
.checkbox-label input, .vol-form input[type="checkbox"] { accent-color: var(--barn); width: 15px; height: 15px; }

[data-view="donate"] .btn,
[data-view="volunteer"] .btn {
  font-family: var(--wood);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
}
[data-view="donate"] .btn-solid,
[data-view="volunteer"] .btn-solid {
  background: var(--barn);
  border: 4px solid var(--barn);
  color: var(--kraft-lt);
  transform: rotate(-0.8deg);
}
[data-view="donate"] .btn-solid:hover,
[data-view="volunteer"] .btn-solid:hover { background: var(--barn-dk); border-color: var(--barn-dk); color: var(--kraft-lt); }
[data-view="donate"] .fine-print,
[data-view="volunteer"] .fine-print { color: var(--ink-cut); opacity: 0.65; }
[data-view="donate"] .goals-title { font-family: var(--carved); font-weight: 400; color: var(--ink-cut); text-shadow: 2px 2px 0 var(--barn); }
[data-view="donate"] a, [data-view="volunteer"] a { color: var(--barn-dk); }

/* the global footer, on kraft like everything else */
.site-footer {
  background: transparent;
  border-top: 5px solid var(--ink-cut);
  border-image: repeating-linear-gradient(90deg, var(--ink-cut) 0 14px, transparent 14px 20px) 5;
  color: var(--ink-cut);
}
.site-footer .footer-text { color: var(--ink-cut); opacity: 0.8; }
.site-footer a { color: var(--barn-dk); }

@media (prefers-reduced-motion: reduce) {
  .seat-grid .card, .crew-grid .card, .seats-lede,
  [data-view="donate"] .btn-solid, [data-view="volunteer"] .btn-solid { transform: none; }
}

/* ── the Big Picture, in miniature ───────────────────────────────────────
   White gable-front barn, red marquee band, dark house behind the doors.
   Rickey and AI'Braham appear on screen by Pepper's Ghost — the 1862 trick
   of glass and light. Translucent, additive, breathing. When the glitch
   fires, it fires on this screen: the ghost interrupting his own show.   */

.stage { margin: 1.7rem auto 0; max-width: 720px; }
.stage-gable, .stage-house, .stage-boards,
.stage .pleasant-countlabel, .stage-names { width: min(94%, 660px); margin-left: auto; margin-right: auto; }

/* the gable: ink outline drawn by clip-path layering, clapboard inside */
.stage-gable {
  position: relative;
  height: 76px;
  background: var(--ink-cut);
  clip-path: polygon(0 100%, 0 42%, 50% 0, 100% 42%, 100% 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.stage-gable::before {
  content: "";
  position: absolute;
  inset: 5px 5px 0 5px;
  clip-path: polygon(0 100%, 0 42%, 50% 0, 100% 42%, 100% 100%);
  background: #ece2cb;
  background-image: repeating-linear-gradient(180deg, transparent 0 8px, rgba(28, 23, 16, 0.09) 8px 9px);
}
.stage-gable span {
  position: relative;
  font-family: var(--carved);
  font-size: clamp(0.85rem, 2.6vw, 1.15rem);
  letter-spacing: 0.06em;
  color: var(--ink-cut);
  padding-bottom: 0.45rem;
}

/* the marquee band carries the count label, hand-painted on barn red */
.stage .pleasant-countlabel {
  margin-top: 0;
  margin-bottom: 0;
  background: var(--barn);
  color: var(--kraft-lt);
  opacity: 1;
  font-size: 0.76rem;
  padding: 0.5rem 0.6rem 0.42rem;
  border-left: 5px solid var(--ink-cut);
  border-right: 5px solid var(--ink-cut);
}

/* the house: dark screen behind the barn doors, faint projector scanlines */
.stage-house {
  position: relative;
  overflow: hidden;
  background: #100d09;
  background-image: repeating-linear-gradient(180deg, rgba(220, 192, 148, 0.05) 0 1px, transparent 1px 3px);
  border: 5px solid var(--ink-cut);
  padding: 2rem clamp(2.4rem, 9vw, 3.6rem) 2.2rem;
}
.stage-house .cd-clock { margin: 0; position: relative; z-index: 1; }
.stage-house .cd-unit { box-shadow: 0 0 0 2px rgba(220, 192, 148, 0.16); }

/* painted curtains, fringe on top, tucked over the ghosts' shoulders */
.stage-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 6vw, 42px);
  background: repeating-linear-gradient(90deg, var(--barn) 0 9px, var(--barn-dk) 9px 14px);
  z-index: 2;
}
.stage-curtain-l { left: 0; border-right: 3px solid var(--ink-cut); }
.stage-curtain-r { right: 0; border-left: 3px solid var(--ink-cut); }
.stage-curtain::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--mustard) 0 6px, transparent 6px 10px);
}

/* Pepper's Ghosts: light only, no solids — everything pale, additive */
.ghost {
  position: absolute;
  bottom: 12px;
  width: clamp(54px, 10vw, 82px);
  aspect-ratio: 0.88;
  border-radius: 47% 53% 40% 60% / 54% 46% 58% 42%;
  opacity: 0.58;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(216, 236, 222, 0.45));
  animation: ghost-breathe 4.6s ease-in-out infinite;
  z-index: 1;
}
.ghost-rickey {
  left: clamp(28px, 7vw, 54px);
  background: radial-gradient(circle at 38% 30%, #f2ead8, #b3c4b6 58%, #46584c);
  transform: rotate(-2deg);
}
.ghost-abe {
  right: clamp(28px, 7vw, 54px);
  background: radial-gradient(circle at 38% 30%, #dff0e4, #8fb39b 55%, #33503e);
  transform: rotate(1.5deg);
  animation-delay: -2.3s;
}
.g-ear {
  position: absolute;
  top: -26%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 53% 47% 44% 56% / 46% 54% 42% 58%;
  background: radial-gradient(circle at 40% 34%, #e9e0cb, #90a294);
  z-index: -1;
}
.g-ear-l { left: -14%; transform: rotate(-8deg); }
.g-ear-r { right: -14%; transform: rotate(7deg); }
.g-hat {
  position: absolute;
  top: -34%;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 58%;
  height: 38%;
  background: rgba(226, 240, 231, 0.32);
  border: 2px solid rgba(226, 240, 231, 0.6);
}
.g-hat::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -22%;
  width: 144%;
  height: 6px;
  background: rgba(226, 240, 231, 0.5);
  border-radius: 50%;
}
.g-eye {
  position: absolute;
  top: 34%;
  width: 27%;
  aspect-ratio: 0.95;
  background: rgba(248, 250, 242, 0.92);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(16, 13, 9, 0.55);
}
.g-eye::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: rgba(16, 13, 9, 0.8);
}
.g-eye:nth-of-type(odd) { left: 15%; transform: rotate(-5deg); }
.g-eye:nth-of-type(even) { right: 15%; transform: rotate(4deg) translateY(8%); }
.g-beard {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 74%;
  height: 34%;
  background: rgba(222, 238, 228, 0.26);
  border-radius: 0 0 48% 52% / 0 0 80% 84%;
}
@keyframes ghost-breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.64; }
}

/* the boards and the footlights */
.stage-boards {
  position: relative;
  height: 30px;
  background: #8a6f47;
  background-image: repeating-linear-gradient(90deg, transparent 0 74px, rgba(28, 23, 16, 0.4) 74px 76px);
  border: 5px solid var(--ink-cut);
  border-top-width: 3px;
}
.stage-boards::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: -7px;
  height: 12px;
  background-image: radial-gradient(circle at 6px 6px, var(--mustard) 0 4.5px, rgba(224, 169, 46, 0.28) 5.5px, transparent 7px);
  background-size: 42px 12px;
  background-repeat: repeat-x;
}
.stage-names {
  display: flex;
  justify-content: space-between;
  padding: 6px 5% 0;
  box-sizing: border-box;
  font-family: var(--brush);
  font-size: 0.6rem;
  color: var(--ink-cut);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .ghost { animation: none; opacity: 0.58; }
}

/* ── the solid-ink pass ──────────────────────────────────────────────────
   Real cheap art is wood type pressed hard, not scribble. Sketchy faces
   read as coloring books; misregistration only convinces on SOLID forms.
   So: every title becomes slab ink with one honest off-register strike,
   the scribble face is retired, and the emoji get stamped in ink.       */

.pleasant-h1 {
  font-family: var(--wood);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 6.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-shadow: 4px 4px 0 var(--barn);
}
.pleasant-wordmark {
  font-family: var(--wood);
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 var(--barn);
}
.page-title {
  font-family: var(--wood);
  text-transform: uppercase;
  font-size: clamp(1.55rem, 4.6vw, 2.7rem);
  line-height: 1.05;
  text-shadow: 3px 3px 0 var(--barn);
}
.pleasant-h3, .reveal-headline {
  font-family: var(--wood);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 2px 2px 0 var(--barn);
}
.pleasant-program-h3,
.monthly-title,
[data-view="donate"] .goals-title {
  font-family: var(--wood);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-shadow: none;
}
[data-view="donate"] .card h3,
[data-view="volunteer"] .card h3 {
  font-family: var(--wood);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stage-gable span {
  font-family: var(--wood);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-bottom: 0.55rem;
}

/* the woodcut sunrise: ink pulled straight on the kraft */
.hero-cut {
  display: block;
  width: min(88%, 540px);
  height: auto;
  margin: 1rem auto 0.2rem;
}

/* emoji were clipart; stamped in ink they become rubber stamps */
.icon-emoji {
  filter: grayscale(1) sepia(0.5) brightness(0.45) contrast(1.9);
  opacity: 0.88;
}

/* the honest failure notice — visible, not alarming */
.join-guard-msg {
  font-family: var(--body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-cut);
  background: var(--kraft-lt);
  border-left: 4px solid var(--barn);
  padding: 0.7rem 0.9rem;
  margin: 0.8rem 0 0;
}
.btn-pleasant:disabled { opacity: 0.55; cursor: default; transform: none; }