/* Village Hall — registered. Your seat is an admission ticket (rebuilt 2026-09-29, redrawn 2026-10-24).
   A paper ticket with a navy "Admit one" stub and a perforated tear line, bunting strung across
   the front of it, a "Registered" rubber stamp, and the painting of the hall beside it. Under it,
   the Saturday morning as four steps, so the page says what happens next.
   No sponsor block or community grid here by design. Scoped to body.p-vh-registered. */

.p-vh-registered main { overflow-x: clip; }
.p-vh-registered main > .vr-open { padding-top: clamp(28px, 4.4vw, 60px); padding-bottom: clamp(56px, 7vw, 96px); }
.p-vh-registered .vr-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 980px) { .p-vh-registered .vr-grid { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); } }

/* ---------- the ticket ---------- */
.p-vh-registered .vr-ticket-wrap { position: relative; padding-top: clamp(14px, 2vw, 22px); max-width: 840px; width: 100%; margin: 0 auto; }
.p-vh-registered .vr-ticket { --notch: 16px; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  filter: drop-shadow(0 26px 26px rgba(60, 40, 10, .2)) drop-shadow(0 1px 1px rgba(60, 40, 10, .12)); rotate: -.6deg; }
@media (min-width: 640px) { .p-vh-registered .vr-ticket { grid-template-columns: clamp(170px, 26%, 206px) minmax(0, 1fr); } }

/* the stub: navy card stock, a gold printed border, "Admit one" */
.p-vh-registered .vr-stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 70px 20px 30px; text-align: center; color: var(--cream);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(215, 164, 62, .16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(247, 241, 226, .035) 0 2px, transparent 2px 9px),
    var(--navy);
  border-radius: 18px 18px 0 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; }
.p-vh-registered .vr-stub::before { /* the printed border */ content: ""; position: absolute; inset: 10px; border: 1.5px solid rgba(215, 164, 62, .55); border-radius: 12px; pointer-events: none; }
.p-vh-registered .vr-admit { position: relative; display: inline-block; padding: 5px 12px 4px; border-radius: 999px; background: var(--gold); color: var(--navy-deep);
  font: 800 12.5px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.p-vh-registered .vr-stub-name { margin-top: auto; font-family: var(--f-hand); font-size: clamp(30px, 3vw, 38px); line-height: 1; color: var(--cream); }
.p-vh-registered .vr-stub-star { position: relative; width: 74px; height: 10px; }
.p-vh-registered .vr-stub-star::before { content: ""; position: absolute; left: 0; right: 0; top: 4.5px; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(215, 164, 62, .8) 30%, rgba(215, 164, 62, .8) 70%, transparent); }
.p-vh-registered .vr-stub-star::after { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; background: var(--gold); rotate: 45deg; box-shadow: 0 0 0 4px var(--navy); border-radius: 2px; }
.p-vh-registered .vr-stub-when { margin-top: auto; display: flex; flex-direction: column; gap: 3px; color: #e9dfc6; font: 600 15px/1.3 var(--font-display); }
.p-vh-registered .vr-stub-when span:first-child { color: var(--gold); }

/* the ticket face */
.p-vh-registered .vr-main { position: relative; padding: clamp(64px, 6.4vw, 80px) clamp(22px, 4vw, 46px) clamp(28px, 4vw, 42px); background: var(--paper); border-radius: 0 0 18px 18px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; }
.p-vh-registered .vr-main::before { /* the perforation */ content: ""; position: absolute; left: var(--notch); right: var(--notch); top: 0; height: 3px;
  background: radial-gradient(circle, rgba(122, 91, 19, .45) 1.5px, transparent 2px) 0 50% / 10px 3px repeat-x; }
@media (min-width: 640px) {
  .p-vh-registered .vr-stub { border-radius: 18px 0 0 18px;
    -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .p-vh-registered .vr-main { border-radius: 0 18px 18px 0;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .p-vh-registered .vr-main::before { left: 0; right: auto; top: var(--notch); bottom: var(--notch); width: 3px; height: auto;
    background: radial-gradient(circle, rgba(122, 91, 19, .45) 1.5px, transparent 2px) 50% 0 / 3px 10px repeat-y; }
}
@media (max-width: 639px) { .p-vh-registered .vr-stub { padding-top: 48px; } .p-vh-registered .vr-main { padding-top: 30px; } }

/* the rubber stamp, like "Pay what you can" on the Village Hall page */
.p-vh-registered .vr-stamp { display: inline-block; padding: 8px 14px 7px; border-radius: 10px; background: rgba(255, 252, 245, .6); color: var(--brick-ink, #8f4424);
  border: 3px double var(--brick-ink, #8f4424); box-shadow: inset 0 0 0 1px rgba(143, 68, 36, .22);
  font: 700 15px/1.1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; rotate: 7deg; }
@media (min-width: 640px) { .p-vh-registered .vr-stamp { position: absolute; top: clamp(76px, 7.4vw, 92px); right: clamp(18px, 3vw, 34px); } }
@media (max-width: 639px) { .p-vh-registered .vr-stamp { margin: 0 0 14px; rotate: -4deg; } }

.p-vh-registered .vr-main h1 { margin: 0 0 14px; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -.03em; max-width: 6.2em; }
.p-vh-registered .vr-main .lede { margin: 0 0 16px; color: var(--navy); font-size: clamp(17.5px, 1.5vw, 19.5px); line-height: 1.6; max-width: 30em; }
.p-vh-registered .vr-help { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--text); font-size: 16.5px; line-height: 1.6; overflow-wrap: anywhere; }
.p-vh-registered .vr-gift { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fbf0cf; border-left: 5px solid #d7a43e; color: var(--text); font-size: 16.5px; line-height: 1.6; }
.p-vh-registered .vr-gift[hidden] { display: none; }
.p-vh-registered .vr-gift strong { color: var(--navy); }
.p-vh-registered .vr-help a { font-weight: 800; color: var(--blue-ink); text-decoration: none; }
.p-vh-registered .vr-help a:hover { color: var(--navy); }
.p-vh-registered .vr-main .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.p-vh-registered .vr-main .btn { min-height: 50px; }
@media (max-width: 520px) { .p-vh-registered .vr-main .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- bunting, strung across the front of the ticket ---------- */
.p-vh-registered .vr-bunting { position: absolute; z-index: 2; top: 0; left: -3%; width: 106%; height: auto; aspect-ratio: 1000 / 90; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(60, 40, 10, .2)); }
.p-vh-registered .vr-flag { transform-box: fill-box; transform-origin: 50% 0; }
@media (max-width: 639px) { .p-vh-registered .vr-bunting { left: -4%; width: 108%; } }

/* ---------- the hall ---------- */
.p-vh-registered .vr-art { position: relative; max-width: 420px; width: 100%; margin: 0 auto; }
.p-vh-registered .vr-art { z-index: 0; }
.p-vh-registered .vr-art::before { content: ""; position: absolute; inset: 4% 0 8%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 246, 222, .95), rgba(255, 246, 222, 0)); }
.p-vh-registered .vr-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 64%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 64%, transparent 100%); }
@media (min-width: 980px) { .p-vh-registered .vr-art { max-width: none; width: 150%; margin: 0 -36% 0 -14%; } }

/* ---------- what happens next ---------- */
.p-vh-registered .vr-next { position: relative; padding: clamp(8px, 2vw, 24px) 0 clamp(56px, 7vw, 96px); text-align: center; }
.p-vh-registered .vr-next .eyebrow { display: block; }
.p-vh-registered .vr-next h2 { margin: 2px 0 0; font-size: clamp(30px, 3.4vw, 42px); color: var(--navy); }
.p-vh-registered .vr-steps { counter-reset: vr; list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: minmax(0, 1fr); text-align: left; }
@media (min-width: 640px) { .p-vh-registered .vr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .p-vh-registered .vr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-vh-registered .vr-step { --c: var(--gold); counter-increment: vr; position: relative; padding: 26px 22px 22px; border-radius: 18px; background: var(--paper); color: var(--text);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-card); border-top: 6px solid var(--c); }
.p-vh-registered .vr-step:nth-child(2) { --c: var(--blue); }
.p-vh-registered .vr-step:nth-child(3) { --c: var(--sage); }
.p-vh-registered .vr-step:nth-child(4) { --c: var(--navy); }
.p-vh-registered .vr-step::before { content: counter(vr); position: absolute; top: -20px; right: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c); color: var(--paper); font: 800 16px/1 var(--font-display); box-shadow: 0 0 0 4px var(--paper); }
.p-vh-registered .vr-step:nth-child(1)::before { color: var(--navy-deep); }
.p-vh-registered .vr-step-when { display: block; font-family: var(--f-hand); font-size: 21px; line-height: 1.1; color: var(--gold-dark); }
.p-vh-registered .vr-step h3 { margin: 6px 0 6px; font-size: 20px; line-height: 1.2; color: var(--navy); }
.p-vh-registered .vr-step p { margin: 0; font-size: 16px; line-height: 1.55; }

/* ---------- meaningful movement ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the bunting drops in and flutters; the ticket slides into place and is stamped */
  @keyframes vr-string { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes vr-flutter { 50% { transform: rotate(6deg) skewX(-3deg); } }
  .p-vh-registered .vr-bunting { animation: vr-string .7s .15s var(--ease) both; }
  .p-vh-registered .vr-flag { animation: vr-flutter 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
  @keyframes vr-slide { 0% { opacity: 0; transform: translateY(26px) rotate(1.5deg); } 70% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
  .p-vh-registered .vr-ticket { animation: vr-slide .9s .2s var(--ease) both; }
  @keyframes vr-stamp { from { opacity: 0; scale: 1.7; } to { opacity: 1; scale: 1; } }
  .p-vh-registered .vr-stamp { animation: vr-stamp .5s 1s cubic-bezier(.3, 1.5, .6, 1) both; }
  @keyframes vr-hall { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .p-vh-registered .vr-art img { animation: vr-hall 1s .3s var(--ease) both; }
}
@media print { .p-vh-registered .vr-bunting, .p-vh-registered .vr-stamp { display: none; } .p-vh-registered .vr-ticket { filter: none; } }