/* ==========================================================================
   MAG Holiday Market 2026 - site styles
   Mobile first. All values come from tokens.css.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
strong { font-weight: var(--fw-bold); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--c-green); color: var(--c-snow); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); font-weight: var(--fw-bold);
}
.skip-link:focus { top: var(--space-4); }

/* Placeholder marker - anything wrapped in .tbd still needs a real value.
   Search the codebase for class="tbd" before launch. */
.tbd {
  background: var(--c-pink);
  color: var(--c-chocolate);
  border-radius: 4px;
  padding: 0 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--w-page)); margin-inline: auto; }
.wrap--text { width: min(100% - 2 * var(--gutter), var(--w-text)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.stack > * + * { margin-top: var(--space-4); }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.98;
  color: var(--heading);
  letter-spacing: 0.005em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--heading);
}
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.eyebrow {
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.lead { font-size: var(--fs-lead); line-height: 1.5; }
.muted { color: var(--text-muted); }
.fine { font-size: var(--fs-fine); line-height: 1.5; color: var(--text-muted); }
.section-head { margin-bottom: var(--space-6); }
.section-head > * + * { margin-top: var(--space-3); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--c-green); --btn-fg: var(--c-snow); --btn-bd: var(--c-green);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0.75rem 1.25rem;
  border: 2px solid var(--btn-bd); border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: var(--fw-bold); font-size: 1rem; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--wheat   { --btn-bg: var(--c-wheat); --btn-fg: var(--c-green-deep); --btn-bd: var(--c-wheat); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--c-wheat); --btn-bd: rgba(231, 212, 172, 0.55); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--c-green); --btn-bd: var(--c-green); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn img { width: 22px; height: 22px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.text-link {
  font-weight: var(--fw-bold); color: var(--c-green);
  text-decoration: underline; text-decoration-color: rgba(40, 79, 23, 0.35);
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Add to calendar (details-based menu, works without JS) ---------- */
.cal { position: relative; }
.cal > summary { list-style: none; }
.cal > summary::-webkit-details-marker { display: none; }
.cal__menu {
  position: absolute; z-index: 20; left: 0; top: calc(100% + var(--space-2));
  min-width: 15rem; padding: var(--space-2); text-align: left;
  background: var(--c-white); color: var(--text);
  border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(28, 21, 8, 0.22);
}
.cal__menu a {
  display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  text-decoration: none; font-weight: var(--fw-bold);
}
.cal__menu a:hover, .cal__menu a:focus-visible { background: var(--bg-soft); }
.cal__menu small { display: block; font-weight: var(--fw-regular); color: var(--text-muted); }
.cal--up .cal__menu { top: auto; bottom: calc(100% + var(--space-2)); }

/* ---------- Snow speckle (matches the flecks on the print pieces) ---------- */
.snow { position: relative; isolation: isolate; }
.snow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(249,245,235,.55) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(249,245,235,.45) 0 1px, transparent 1.4px),
    radial-gradient(circle at 45% 85%, rgba(249,245,235,.35) 0 1.6px, transparent 2px),
    radial-gradient(circle at 85% 15%, rgba(249,245,235,.4) 0 0.9px, transparent 1.3px);
  background-size: 140px 140px, 90px 90px, 210px 210px, 60px 60px;
}

/* ==========================================================================
   SITE HEADER - transparent over the hero, solid once you scroll
   ========================================================================== */
:root { --header-h: 64px; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--header-h);
  color: var(--c-snow);
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.site-header.is-solid { background: var(--bg-panel); box-shadow: 0 2px 16px rgba(28,21,8,0.18); }
.site-header__inner {
  height: 100%; width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.site-header__logo { transition: opacity 200ms var(--ease); }
.site-header__logo img { width: 8.5rem; }
.site-header:not(.is-solid) .site-header__logo { opacity: 0; pointer-events: none; }
.btn--sm { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.9375rem; }

/* Mobile: menu button + drop-down panel */
.site-header__toggle {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-green-deep); color: var(--c-snow);
  display: grid; place-items: center;
}
.site-header__bars, .site-header__bars::before, .site-header__bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.site-header__bars { position: relative; }
.site-header__bars::before, .site-header__bars::after { content: ""; position: absolute; left: 0; }
.site-header__bars::before { top: -6px; }
.site-header__bars::after { top: 6px; }
[aria-expanded="true"] .site-header__bars { background: transparent; }
[aria-expanded="true"] .site-header__bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .site-header__bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav ul { display: grid; gap: var(--space-1); }
.site-nav a:not(.btn) { color: inherit; text-decoration: none; font-weight: var(--fw-bold); }
.site-nav a:not(.btn):hover { text-decoration: underline; }
@media (max-width: 959px) {
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--bg-panel); padding: var(--space-3) var(--gutter) var(--space-5);
    border-bottom: 1px solid var(--c-wheat); /* separates the open menu from the page below */
    box-shadow: 0 12px 24px rgba(28,21,8,0.2);
  }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav a:not(.btn) { display: block; padding: var(--space-3) 0; font-size: 1.125rem; border-bottom: 1px solid rgba(231,212,172,0.18); }
  .site-nav__cta { margin-top: var(--space-4); }
  .site-header.menu-open { background: var(--bg-panel); }
  .site-header.menu-open .site-header__logo { opacity: 1; pointer-events: auto; }
}
@media (min-width: 960px) {
  :root { --header-h: 72px; }
  .site-header__toggle { display: none; }
  .site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
}

/* ==========================================================================
   HERO - the postcard front, as a page
   ========================================================================== */
.hero { display: grid; }
.hero__art {
  background: var(--c-snow) url("../img/paper.webp") center / cover;
  display: grid; align-content: end; justify-items: center;
  padding-top: calc(var(--header-h) * 0.5 + 0.25rem);
  overflow: hidden;
}
/* Logo sits in front of the treetops, like the flyer and postcard */
.hero__logo { width: min(90%, 36rem); position: relative; z-index: 1; }
.hero__scene { width: 100%; max-width: 48rem; margin-top: calc(-1 * clamp(1.5rem, 7vw, 4.25rem)); }
.hero__scene img { width: 100%; }

/* Panel rhythm: --hero-gap-lg = space above "Saturday", also used time -> location
   and CMHA -> buttons. --hero-gap-sm = address -> "Fundraising for", also used
   between the buttons, the admission line and the FAQ button. */
.hero__panel {
  --hero-gap-lg: 2rem;
  --hero-gap-sm: 1.5rem;
  background: var(--bg-panel); color: var(--text-on-dark);
  padding: var(--hero-gap-lg) var(--gutter) clamp(2.25rem, 6vw, 3rem);
  display: grid; align-content: center; justify-items: center; text-align: center;
  gap: 0;
}
.hero__panel > .hero__where { margin-top: var(--hero-gap-lg); }
.hero__panel > .hero__where--cause { margin-top: var(--hero-gap-sm); }
.hero__panel > .btn-row { margin-top: var(--hero-gap-lg); }
.hero__panel > .hero__foot { margin-top: var(--hero-gap-sm); }
.hero__when { display: grid; justify-items: center; gap: var(--space-2); }
.hero__day {
  font-weight: var(--fw-bold); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-on-dark); font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
}
.hero__date {
  font-weight: var(--fw-bold); font-size: var(--fs-hero); line-height: 0.95; letter-spacing: -0.01em;
}
.hero__time { font-weight: var(--fw-bold); font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1; }
.hero__where { display: flex; gap: var(--space-3); align-items: flex-start; text-align: left; max-width: 22rem; }
.hero__where img { width: 40px; flex: none; margin-top: 2px; }
.hero__where strong { display: block; font-size: 1.125rem; line-height: 1.25; color: var(--accent-on-dark); }
.hero__where span { font-size: var(--fs-small); opacity: 0.9; }
.hero__where--cause span { display: block; font-size: var(--fs-small); opacity: 0.9; margin-bottom: var(--space-2); }
.hero__cmha { display: block; width: min(13.75rem, 100%); }
.hero__cmha img { width: 100%; }
.hero__foot { display: grid; gap: var(--hero-gap-sm); justify-items: center; }
.btn--xs { min-height: 34px; padding: 0.35rem 0.9rem; font-size: 0.875rem; gap: 0.35rem; }
.hero__note { font-size: var(--fs-small); opacity: 0.85; }

.hero .btn-row { justify-content: center; }

@media (min-width: 960px) {
  .hero { grid-template-columns: 1.3fr 1fr; }
  .hero__art { padding-top: calc(var(--header-h) * 0.5 + 1rem); }
  .hero__panel { justify-items: start; text-align: left; padding-inline: clamp(2.5rem, 5vw, 5rem); }
  .hero__when, .hero__foot { justify-items: start; }
  .hero__panel { --hero-gap-lg: 1.25rem; --hero-gap-sm: 0.875rem; padding-top: calc(var(--header-h) + var(--hero-gap-lg)); padding-bottom: 1.75rem; }
  .hero__date { font-size: clamp(3rem, 1.5rem + 3vw, 4.5rem); }
  .hero__logo { width: min(92%, 47rem); }
  .hero__scene { max-width: none; margin-top: calc(-1 * clamp(2.5rem, 5vw, 5rem)); }
  .hero__cmha { width: 13rem; }
  .hero .btn-row { justify-content: flex-start; }
}

/* ---------- Highlights band (the red strip from the pole poster) ---------- */
.highlights { background: var(--c-red); color: var(--c-snow); padding: var(--space-5) var(--gutter) var(--space-6); }
.highlights__title {
  text-align: center; font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-wheat);
  margin-bottom: var(--space-4);
}
.highlights a { color: inherit; }
.highlights ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  width: min(100%, var(--w-page)); margin-inline: auto;
}
/* Same treatment as the prize boxes in the giveaway */
.highlights li {
  padding: var(--space-5) var(--space-3); text-align: center;
  display: grid; align-content: center; gap: 2px;
  font-weight: var(--fw-bold); font-size: 1.0625rem; line-height: 1.2;
  background: rgba(249,245,235,0.08); border: 1px solid rgba(249,245,235,0.22);
  border-radius: var(--radius-md);
}
.highlights small { font-weight: var(--fw-regular); font-size: var(--fs-small); opacity: 0.92; }
@media (min-width: 760px) {
  .highlights ul { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .highlights li { padding-block: var(--space-6); }
}

/* ---------- Presented by ---------- */
.presented { padding-block: var(--space-7); border-bottom: 1px solid var(--line); }
.presented__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-5); }
.presented__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6) clamp(2.5rem, 8vw, 6rem); margin-block: var(--space-2); }
.presented__logos img { height: 44px; width: auto; max-width: 9rem; transition: transform var(--dur) var(--ease); }
.presented__logos a:hover img, .presented__logos a:focus-visible img { transform: scale(1.06); }
/* One line (wider screens): Ryan, MAG, Stop, so MAG sits in the centre.
   Two lines (narrow screens): MAG top left, Ryan top right, Stop centred below. */
@media (max-width: 559px) {
  .presented__logos { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; }
  .presented__mag { order: -1; }
  .presented__stop { grid-column: 1 / -1; justify-self: center; }
}
.presented__pledge {
  max-width: 40rem; font-size: var(--fs-lead); line-height: 1.4;
}
.presented__pledge strong { color: var(--c-green); }

/* ---------- Story ---------- */
.story { display: grid; gap: var(--space-6); }
.story__head > * + * { margin-top: var(--space-3); }
.story__body > * + * { margin-top: var(--space-4); }
.story__body p:not(.lead):not([class^="raised"]) { color: var(--text-muted); }
@media (min-width: 860px) {
  .story { grid-template-columns: 1fr 2fr; gap: var(--space-8); align-items: start; }
}
.raised {
  margin-top: var(--space-6) !important; width: fit-content; max-width: 100%;
  background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);
  display: grid; grid-template-columns: auto auto; gap: var(--space-4); align-items: center;
}
.raised__icon { width: 56px; }
.raised__num { font-weight: var(--fw-bold); font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--c-green); }
.raised__label { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-1); }
@media (min-width: 640px) { .raised__icon { width: 64px; } }
/* Narrow phones: bigger tagline, raised box centred */
@media (max-width: 639px) {
  .story .display { font-size: clamp(2.5rem, 15.5vw, 4rem); }
  .raised { margin-inline: auto; }
}

/* ---------- Visit details ---------- */
.details { display: grid; gap: var(--space-4); }
.detail {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: rgba(249,245,235,0.6); border: 1px solid rgba(28,21,8,0.06);
}
.detail img { width: 52px; }
.detail h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.25; }
.detail p { color: var(--text-muted); }
.detail p + p, .detail .text-link, .detail .cal { margin-top: var(--space-2); }
.detail .cal > summary { cursor: pointer; display: inline-block; }
@media (min-width: 760px) { .details { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .detail { padding: var(--space-6); } }

/* ---------- Giveaway ---------- */
.giveaway {
  background: var(--bg-panel); color: var(--text-on-dark);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 5vw, 3.5rem);
  display: grid; gap: var(--space-6);
}
.giveaway .h2 { color: var(--c-wheat); }
.giveaway .eyebrow { color: var(--c-pink); }
.prizes { display: grid; gap: var(--space-3); }
.prize {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); align-items: baseline;
  background: rgba(249,245,235,0.07); border: 1px solid rgba(231,212,172,0.25);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.prize__tier {
  grid-column: 1 / -1; font-size: var(--fs-fine); font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-pink);
}
.prize__name { font-weight: var(--fw-bold); font-size: 1.125rem; color: var(--c-wheat); }
.prize__value { font-weight: var(--fw-bold); white-space: nowrap; }
.prize__desc { grid-column: 1 / -1; font-size: var(--fs-small); opacity: 0.88; }
.prizes__total { font-size: var(--fs-small); opacity: 0.88; }
.steps { counter-reset: step; display: grid; gap: var(--space-3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); align-items: baseline; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-wheat); color: var(--c-green-deep); font-weight: var(--fw-bold); font-size: 0.95rem;
}
.ways { display: grid; gap: var(--space-2); }
.ways li {
  display: grid; grid-template-columns: 6.25rem 1fr; gap: var(--space-3); align-items: baseline;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: rgba(249,245,235,0.07); border: 1px solid rgba(231,212,172,0.25);
}
.ways__n { font-weight: var(--fw-bold); color: var(--c-wheat); white-space: nowrap; }
.ways a { color: var(--c-wheat); font-weight: var(--fw-bold); }
.ways__note { font-size: var(--fs-small); opacity: 0.88; }
.mini-rules { font-size: var(--fs-fine); line-height: 1.55; opacity: 0.85; border-top: 1px solid rgba(231,212,172,0.25); padding-top: var(--space-4); }
.mini-rules a { color: var(--c-wheat); font-weight: var(--fw-bold); }
.giveaway .tbd { color: var(--c-chocolate); }
@media (min-width: 900px) {
  .giveaway { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .giveaway__head { grid-column: 1 / -1; }
  .ways { display: grid; gap: var(--space-2); }
.ways li {
  display: grid; grid-template-columns: 6.25rem 1fr; gap: var(--space-3); align-items: baseline;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: rgba(249,245,235,0.07); border: 1px solid rgba(231,212,172,0.25);
}
.ways__n { font-weight: var(--fw-bold); color: var(--c-wheat); white-space: nowrap; }
.ways a { color: var(--c-wheat); font-weight: var(--fw-bold); }
.ways__note { font-size: var(--fs-small); opacity: 0.88; }
.mini-rules { grid-column: 1 / -1; }
}

/* ---------- Vendors ---------- */
.vendor-grid {
  display: grid; gap: var(--space-4); grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
@media (min-width: 640px) { .vendor-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1100px) { .vendor-grid--wide { grid-template-columns: repeat(4, 1fr); } }
.vendor {
  background: var(--c-white); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card); display: grid; grid-template-rows: auto 1fr;
}
.vendor { cursor: zoom-in; }
.vendor__media {
  aspect-ratio: 1; background: var(--c-sage); display: grid; place-items: center; overflow: hidden;
  width: 100%; border: 0; padding: 0; font: inherit; cursor: inherit;
}
/* Tapped card: full width of the grid; tap again to put it back */
.vendor.is-expanded { grid-column: 1 / -1; cursor: zoom-out; }
.vendor.is-expanded .vendor__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.vendor.is-expanded .vendor__name { font-size: var(--fs-h3); }
.vendor.is-expanded .vendor__sells { font-size: var(--fs-body); }
.vendor.is-expanded .vendor__mono { font-size: clamp(4rem, 20vw, 7rem); }
@media (min-width: 640px) {
  .vendor.is-expanded { grid-template-columns: minmax(0, 22rem) 1fr; grid-template-rows: auto; }
  .vendor.is-expanded .vendor__body { align-content: center; padding: var(--space-6); }
}
.vendor__media img { width: 100%; height: 100%; object-fit: cover; }
.vendor__mono { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 3.5rem); color: var(--c-green); line-height: 1; }
.vendor__body { padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: 2px; align-content: start; }
.vendor__name { font-weight: var(--fw-bold); line-height: 1.25; }
.vendor__sells { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.35; }
.vendor__link { margin-top: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-green); word-break: break-word; }
.vendor-more { margin-top: var(--space-6); display: flex; justify-content: center; }

.callout {
  margin-top: var(--space-7); border: 2px dashed rgba(40, 79, 23, 0.35); border-radius: var(--radius-lg);
  padding: var(--space-6); display: grid; gap: var(--space-4);
}
.callout .h3 { color: var(--c-green); }
@media (min-width: 760px) { .callout { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- Sponsors ---------- */
.sponsors { display: grid; gap: var(--space-4); }
.sponsors > li { display: grid; }
@media (min-width: 860px) { .sponsors { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.sponsor {
  background: var(--c-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-4); align-content: start;
  text-decoration: none;
}
.sponsor__logo { height: 64px; display: flex; align-items: center; }
.sponsor__logo img { max-height: 56px; width: auto; max-width: 13rem; transition: transform var(--dur) var(--ease); transform-origin: left center; }
.sponsor:hover .sponsor__logo img, .sponsor:focus-visible .sponsor__logo img { transform: scale(1.06); }
/* Brokerage (RECA): small, below the copy, above the URL */
.sponsor__brokerage { height: 22px; width: auto; }
.sponsor__name { font-weight: var(--fw-bold); }
.sponsor p { font-size: var(--fs-small); color: var(--text-muted); }
.sponsor__url { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-green); }
.beneficiary {
  margin-top: var(--space-6); display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: center;
  padding: var(--space-5); border-radius: var(--radius-md); background: var(--bg-soft);
}
.beneficiary__icon { width: 48px; }
.beneficiary__logo { width: 12rem; grid-column: 1 / -1; justify-self: center; }
@media (min-width: 760px) {
  .beneficiary { grid-template-columns: 56px 1fr 12rem; gap: var(--space-5); padding-inline: var(--space-6); }
  .beneficiary__icon { width: 56px; }
  .beneficiary__logo { grid-column: auto; justify-self: end; }
}
.beneficiary p { font-size: var(--fs-small); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--space-5) var(--space-6) var(--space-5) 0; position: relative;
  font-weight: var(--fw-bold); font-size: 1.0625rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--c-green); border-bottom: 2.5px solid var(--c-green);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq__a { padding: 0 0 var(--space-5); color: var(--text-muted); max-width: 40rem; }
.faq .faq__a > * + * { margin-top: var(--space-3); }

/* ---------- Contact form ---------- */
.contact { margin-top: var(--space-7); padding: var(--space-6); background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.contact > * + * { margin-top: var(--space-3); }
.form { display: grid; gap: var(--space-4); margin-top: var(--space-5) !important; }
.field { display: grid; gap: var(--space-1); }
.field label { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--text); background: var(--c-snow);
  border: 1.5px solid rgba(28,21,8,0.22); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem; min-height: 48px; width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.form .btn { justify-self: start; }
.form__status { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-green); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--section-y); }
.site-footer__scene { display: block; width: 100%; height: auto; margin-bottom: -2px; }
.site-footer__band { background: var(--bg-panel); color: var(--text-on-dark); padding-block: var(--space-7) var(--space-6); }
.site-footer__grid { display: grid; gap: var(--space-6); }
.site-footer__logo { width: 13rem; }
.site-footer__grid > .stack > * + * { margin-top: var(--space-6); }
.site-footer h2 { font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-wheat); margin-bottom: var(--space-3); }
.site-footer ul { display: grid; gap: var(--space-2); }
.site-footer a { color: var(--c-snow); }
.site-footer__help {
  border-top: 1px solid rgba(231,212,172,0.25); margin-top: var(--space-6); padding-top: var(--space-5);
  display: grid; gap: var(--space-2); font-size: var(--fs-small);
}
.site-footer__help strong { color: var(--c-wheat); }
.site-footer__legal { font-size: var(--fs-fine); opacity: 0.7; }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

/* ---------- Inner page header (rules, vendors) ---------- */
.page-header { background: var(--c-snow) url("../img/paper.webp") center / cover; border-bottom: 1px solid var(--line); }
.page-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.page-header__logo img { width: 9.5rem; }
.page-header__back { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-green); }
.page-title { padding-block: var(--space-7) var(--space-5); }
.page-inner main { padding-top: var(--header-h); }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.page-title > * + * { margin-top: var(--space-3); }

/* ---------- Rules page ---------- */
/* Same look as "Plan your visit" on the homepage: soft panel with light tiles */
.summary {
  background: var(--bg-soft); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2rem); margin-bottom: var(--space-7);
  display: grid; gap: var(--space-4);
}
.summary dl { display: grid; gap: var(--space-3); }
.summary dl > div {
  display: grid; gap: var(--space-1); align-content: start;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: rgba(249,245,235,0.6); border: 1px solid rgba(28,21,8,0.06);
}
.summary dt { font-size: var(--fs-fine); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.summary dd { font-weight: var(--fw-bold); }
@media (min-width: 640px) { .summary dl { grid-template-columns: 1fr 1fr; } }
.rules { counter-reset: rule; }
.rules section { counter-increment: rule; padding-block: var(--space-5); border-top: 1px solid var(--line); }
.rules h2 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-green); margin-bottom: var(--space-3); }
.rules h2::before { content: counter(rule) ". "; }
.rules p, .rules li { color: var(--text); }
.rules > section > * + * { margin-top: var(--space-3); }
.rules ul { padding-left: 1.2rem; }
.rules li + li { margin-top: var(--space-2); }
.rules li::marker { color: var(--accent); }

/* ---------- Sticky mobile action bar ---------- */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(38, 61, 34, 0.97); backdrop-filter: blur(6px);
  transform: translateY(110%); visibility: hidden;
  transition: transform 220ms var(--ease), visibility 0s linear 220ms;
}
.action-bar.is-visible { transform: translateY(0); visibility: visible; transition: transform 220ms var(--ease); }
.action-bar .btn { width: 100%; min-height: 46px; padding-inline: var(--space-3); font-size: 0.95rem; }
.action-bar .cal > summary { display: flex; width: 100%; justify-content: center; text-align: center; }
@media (min-width: 960px) { .action-bar { display: none; } }
/* Room for the action bar goes inside the green footer band (not on the body),
   so no strip of page background shows between the footer and the bar. */
@media (max-width: 959px) {
  .has-action-bar .site-footer__band {
    padding-bottom: calc(var(--space-6) + 80px + env(safe-area-inset-bottom));
  }
}

/* ---------- Giveaway entry pages (giveaway/, giveaway/market/) ---------- */
.entry-card { padding: clamp(1.25rem, 4vw, 2rem); background: var(--c-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.entry-card > .h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.entry-card__count {
  font-size: var(--fs-fine); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.entry-form__notice a { color: var(--c-green); font-weight: var(--fw-bold); }
.entry-form__notice {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--bg-soft); font-weight: var(--fw-bold);
}
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field__hint { font-size: var(--fs-fine); line-height: 1.5; color: var(--text-muted); }
.field__hint a { color: var(--c-green); font-weight: var(--fw-bold); }
.req { color: var(--accent); font-weight: var(--fw-bold); }
.form__req { font-size: var(--fs-fine); color: var(--text-muted); }
.check { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--space-3); align-items: start; font-size: var(--fs-small); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--c-green); cursor: pointer; }
.check a { color: var(--c-green); font-weight: var(--fw-bold); }
.check--optin { padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-soft); }
.check--optin span { color: var(--text-muted); font-size: var(--fs-fine); line-height: 1.55; }
.check--optin strong { display: block; color: var(--text); font-size: var(--fs-small); margin-bottom: var(--space-1); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.entry-form__submit { display: grid; gap: var(--space-3); justify-items: start; }
.entry-form__submit [data-turnstile] { width: 100%; }
.entry-form .form__status:empty { display: none; }
.entry-form .form__status.is-error { color: var(--accent); }
.entry-done > * + * { margin-top: var(--space-3); }
.entry-done:focus { outline: none; }
.entry-rules { margin-top: var(--space-6); padding: clamp(1.25rem, 4vw, 2rem); background: var(--bg-soft); border-radius: var(--radius-lg); }
.entry-rules > * + * { margin-top: var(--space-3); }
.entry-rules ul { padding-left: 1.2rem; display: grid; gap: var(--space-2); font-size: var(--fs-small); }
.entry-rules li::marker { color: var(--accent); }