/* The 108 Guardians Gathering — e-card v3 · the client's mockup (28 Sep), refined.
   Wine · gold · cream, Cormorant Garamond (+ Cormorant Infant digits) + Jost. Centred, generous, quiet.
   Breakpoints: desktop > 1024 · tablet 641–1024 · mobile ≤ 640. */

:root {
  --wine: #3B1120; --wine-line: rgba(196, 160, 100, .32);
  --gold: #C4A064; --gold-soft: #E0C99E; --gold-deep: #8E6A3A;
  --cream: #F5EDE1; --sand: #EEE2CF; --claret: #7A2638;
  --terra: #B75F3D;                              /* v4: the Kit's terracotta (arrow tree, swallow), used for small accents */
  --timber: #E2C79C;                             /* v4: timber from v1, behind the session drawings */
  --ivory: #FAF5EB;                              /* v4: hero and nav ground (client comment 29 Sep) */
  --ink: #3B1120; --muted: #7A625C;
  --serif: "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;   /* Infant is loaded with digits only */
  --sans: "Jost", "Helvetica Neue", sans-serif;
  --g: max(64px, calc(50% - 540px));
  --nav-h: 72px;
  --measure: 760px;
}
@media (max-width: 1024px) { :root { --g: 40px; --nav-h: 64px; } }
@media (max-width: 640px) { :root { --g: 22px; --nav-h: 58px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--cream); padding: 10px 14px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.label { font: 500 15.5px/1.4 var(--sans); letter-spacing: .34em; text-transform: uppercase; }
.label--gold { color: var(--gold); }
.label--wine { color: var(--claret); }
.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: 0; transition: background .25s, color .25s, border-color .25s; }
.btn--gold { background: var(--gold); color: var(--wine); border: 1px solid var(--gold); padding: 14px 22px; }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--ghost { background: transparent; color: var(--gold-soft); border: 1px solid rgba(196, 160, 100, .7); padding: 14px 22px; }
.btn--ghost:hover { background: rgba(196, 160, 100, .12); color: var(--cream); }
.btn--lg { font-size: 17px; padding: 22px 38px; }
.btn--xl { font-size: 18px; padding: 24px 52px; }

/* ---------------- Nav ---------------- */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--g); background: #fff; color: var(--wine); border-bottom: 1px solid rgba(59, 17, 32, .12); }
.nav__id { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.nav__id img { height: 38px; width: auto; }
.nav__id span { font: 500 19px/1 var(--serif); letter-spacing: .02em; white-space: nowrap; }
.nav__cta { padding: 12px 18px; font-size: 11px; flex: none; }
@media (max-width: 640px) {
  .nav__id { gap: 10px; } .nav__id img { height: 30px; } .nav__id span { font-size: 16px; }
  .nav__full { display: none; }
  .nav__cta { padding: 10px 12px; font-size: 10px; letter-spacing: .16em; }
}

/* ---------------- Hero ---------------- */
.hero { position: relative; overflow: hidden; background: var(--ivory); color: var(--wine);
  min-height: max(calc(100svh - var(--nav-h)), 680px); display: grid; place-items: center; padding: 72px var(--g) 88px;
  border-bottom: 1px solid var(--gold); }
.hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__logo { height: 150px; width: auto; }   /* client: big GMC logo above the event name */
.hero__title { font: 400 clamp(56px, 7.2vw, 104px)/1 var(--serif); margin-top: 30px; letter-spacing: .005em; }
.hero__title em { display: block; font-style: italic; color: var(--gold-deep); margin-top: .04em; }
.hero__sub { font: 500 18px/1.9 var(--sans); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--claret); margin-top: 30px; }
.rule { display: flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--gold); }
.rule::before, .rule::after { content: ""; width: 64px; height: 1px; background: currentColor; opacity: .7; }
.rule i { width: 6px; height: 6px; background: var(--terra); rotate: 45deg; }
.hero__date { font: 400 clamp(39px, 3.6vw, 52px)/1.1 var(--serif); margin-top: 26px; }
.hero__venue { font: 500 16px/1.5 var(--sans); letter-spacing: .14em; color: var(--muted); margin-top: 12px; }
.hero__venue i { font-style: normal; margin: 0 .6em; color: var(--gold-deep); }
.hero__cta { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.hero .btn--ghost { color: var(--wine); border-color: rgba(59, 17, 32, .55); }
.hero .btn--ghost:hover { background: rgba(59, 17, 32, .06); color: var(--wine); }
@media (max-width: 640px) {
  .hero { padding: 56px var(--g) 64px; min-height: calc(100svh - var(--nav-h)); }
  .hero__logo { height: 110px; }
  .hero__title { font-size: 50px; margin-top: 24px; }
  .hero__sub { font-size: 15.5px; margin-top: 24px; }
  .hero__date { font-size: 39px; }
  .hero__venue { font-size: 14px; }
  .hero__cta { gap: 10px; flex-direction: column; align-self: stretch; margin-top: 32px; }   /* larger text no longer fits side by side */
  .hero__cta .btn--lg { font-size: 14.5px; letter-spacing: .16em; padding: 19px 16px; }
}

/* ---------------- The Invitation ---------------- */
.invite { background: var(--cream); padding: 140px var(--g) 150px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.invite__text { display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: var(--measure); }
.invite__from { font: 400 22px/1.7 var(--sans); color: var(--muted); max-width: 680px; }
.invite__hook { font: 400 clamp(40px, 4.6vw, 62px)/1.12 var(--serif); color: var(--wine); text-wrap: balance; margin-top: 6px; }
.invite__hook em { color: var(--claret); font-style: italic; }
.invite__body { font: 400 23.5px/1.75 var(--sans); color: var(--muted); max-width: 760px; }
.invite__art { width: min(400px, 78vw); margin-top: 72px; color: var(--gold); }
.invite__art img { width: 100%; }
@media (max-width: 640px) { .invite { padding: 88px var(--g) 96px; } .invite__hook { font-size: 36px; } .invite__body, .invite__from { font-size: 21px; } .invite__art { margin-top: 52px; } }

/* v4: in place of the mandala, the Kit band from the v2 top banner — the Four Friends walk in along the river,
   mountains rise, the sun comes up. Full-bleed at the foot of the invitation; plays once when it scrolls into view. */
.invite:has(.kit) { padding-bottom: 0; }
.invite:has(.kit) { overflow-x: clip; }
.kit { position: relative; align-self: center; width: 100vw; margin-top: 88px; padding-top: calc(40 * var(--k, 1px)); container-type: inline-size; overflow-x: clip; }
.kit .a { position: absolute; }
.kit__d { position: relative; --u: calc(100cqw / 1280); --k: var(--u); height: calc(330 * var(--u)); width: calc(1280 * var(--u)); left: 50%; translate: -50% 0; }
.kit__d .sun      { left: calc(1010 * var(--u)); bottom: calc(168 * var(--u)); width: calc(176 * var(--u)); }
.kit__d .cloud    { left: calc(60 * var(--u));   bottom: calc(232 * var(--u)); width: calc(280 * var(--u)); }
.kit__d .mtn-r    { left: calc(720 * var(--u));  bottom: calc(109 * var(--u)); width: calc(620 * var(--u)); }
.kit__d .mtn-l    { left: calc(-120 * var(--u)); bottom: calc(107 * var(--u)); width: calc(420 * var(--u)); transform: scaleX(-1); }
.kit__d .tree-t   { left: calc(668 * var(--u));  bottom: calc(124 * var(--u)); width: calc(30 * var(--u)); }
.kit__d .tree-a   { left: calc(700 * var(--u));  bottom: calc(124 * var(--u)); width: calc(24 * var(--u)); }
.kit__d .swallow  { left: calc(930 * var(--u));  bottom: calc(262 * var(--u)); width: calc(58 * var(--u)); }
.kit__d .elephant { left: calc(250 * var(--u));  bottom: calc(124 * var(--u)); width: calc(180 * var(--u)); }
.kit__d .monkey   { left: calc(452 * var(--u));  bottom: calc(124 * var(--u)); width: calc(84 * var(--u)); transform: scaleX(-1); }
.kit__d .rabbit   { left: calc(556 * var(--u));  bottom: calc(130 * var(--u)); width: calc(78 * var(--u)); }
.kit .river { position: absolute; bottom: calc(14 * var(--u)); height: calc(120 * var(--u)); left: calc(50% - 50cqw); width: 100cqw;
  background: url("../assets/art/comp-river-flat-ci.svg") center / auto 100% repeat-x; }
.kit__m { display: none; position: relative; --m: calc(100cqw / 390); --k: var(--m); height: calc(192 * var(--m)); }
.kit__m .sun      { left: calc(300 * var(--m)); bottom: calc(120 * var(--m)); width: calc(72 * var(--m)); }
.kit__m .mtn      { left: calc(222 * var(--m)); bottom: calc(86 * var(--m));  width: calc(220 * var(--m)); }
.kit__m .swallow  { left: calc(236 * var(--m)); bottom: calc(160 * var(--m)); width: calc(30 * var(--m)); }
.kit__m .elephant { left: calc(18 * var(--m));  bottom: calc(82 * var(--m));  width: calc(94 * var(--m)); }
.kit__m .monkey   { left: calc(118 * var(--m)); bottom: calc(82 * var(--m));  width: calc(46 * var(--m)); transform: scaleX(-1); }
.kit__m .rabbit   { left: calc(170 * var(--m)); bottom: calc(86 * var(--m));  width: calc(42 * var(--m)); }
.kit__m .river-m  { left: 0; bottom: calc(12 * var(--m)); width: 100%; }
@media (max-width: 640px) { .kit { margin-top: 56px; } .kit__d { display: none; } .kit__m { display: block; } }

.kit__d { --walk: calc(-620 * var(--u)); --fly-x: calc(280 * var(--u)); --fly-y: calc(-90 * var(--u)); }
.kit__m { --walk: calc(-240 * var(--m)); --fly-x: calc(120 * var(--m)); --fly-y: calc(-40 * var(--m)); }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .kit:not(.is-in) .a, .js-motion .kit:not(.is-in) .river { opacity: 0; }
  .kit.is-in .river, .kit.is-in .river-m { animation: k-weave 2.4s cubic-bezier(.6, .05, .25, 1) both; }
  .kit.is-in .mtn-l { animation: k-land 1.8s cubic-bezier(.3, .7, .2, 1) .9s both; }
  .kit.is-in .mtn-r, .kit.is-in .mtn { animation: k-land 1.8s cubic-bezier(.3, .7, .2, 1) 1.15s both; }
  .kit.is-in .sun { animation: k-sunrise 2.2s cubic-bezier(.25, .6, .25, 1) 1.6s both; }
  .kit.is-in .cloud { animation: k-drift 1.8s ease-out 2.1s both; }
  .kit.is-in .tree-t, .kit.is-in .tree-a { transform-origin: 50% 100%; animation: k-grow .9s cubic-bezier(.3, .7, .2, 1) 2.4s both; }
  .kit.is-in .tree-a { animation-delay: 2.6s; }
  .kit.is-in .elephant { animation: k-walk 3.2s cubic-bezier(.25, .6, .3, 1) 2.2s both; }
  .kit.is-in .monkey   { animation: k-walk 3s cubic-bezier(.25, .6, .3, 1) 2.5s both; }
  .kit.is-in .rabbit   { animation: k-walk 2.8s cubic-bezier(.25, .6, .3, 1) 2.8s both, k-hop .35s ease-in-out 2.8s 8 alternate; }
  .kit.is-in .swallow  { animation: k-fly 1.9s cubic-bezier(.3, .7, .2, 1) 3.4s both; }
  /* as it scrolls away (as the v2 hero): the sun sinks, the friends walk on, the swallow flies off */
  .kit .sun { transform: translateY(calc(var(--p, 0) * 150 * var(--k))); }
  .kit .cloud { transform: translateX(calc(var(--p, 0) * 180 * var(--k))); }
  .kit .mtn-r, .kit .mtn { transform: translateY(calc(var(--p, 0) * 36 * var(--k))); }
  .kit .mtn-l { transform: translateY(calc(var(--p, 0) * 36 * var(--k))) scaleX(-1); }
  .kit .elephant { transform: translateX(calc(var(--p, 0) * 160 * var(--k))); }
  .kit .rabbit { transform: translateX(calc(var(--p, 0) * 260 * var(--k))); }
  .kit .monkey { transform: translateX(calc(var(--p, 0) * 210 * var(--k))) scaleX(-1); }
  .kit .swallow { transform: translate(calc(var(--p, 0) * 260 * var(--k)), calc(var(--p, 0) * -160 * var(--k))); }
}
@keyframes k-weave   { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes k-land    { from { opacity: 0; translate: 0 45%; } to { opacity: 1; translate: 0 0; } }
@keyframes k-sunrise { from { opacity: 0; translate: 0 calc(110 * var(--k, 1px)); } 30% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes k-drift   { from { opacity: 0; translate: -35% 0; } to { opacity: 1; translate: 0 0; } }
@keyframes k-grow    { from { opacity: 0; scale: 1 0; } to { opacity: 1; scale: 1 1; } }
@keyframes k-walk    { from { opacity: 0; translate: var(--walk) 0; } 25% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes k-hop     { from { margin-bottom: 0; } to { margin-bottom: 6px; } }
@keyframes k-fly     { from { opacity: 0; translate: var(--fly-x) var(--fly-y); } to { opacity: 1; translate: 0 0; } }

/* ---------------- The Agenda ---------------- */
.agenda { background: var(--wine); color: var(--cream); padding: 130px var(--g) 140px; }
.agenda__inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.agenda__title { font: 400 clamp(42px, 4.6vw, 60px)/1.08 var(--serif); margin-top: 18px; }
.agenda__sessions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; margin-top: 52px; }
.agenda__sessions li { border: 1px solid var(--wine-line); padding: 30px 12px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.agenda__sessions .label { color: var(--gold); font-size: 13.5px; }
.agenda__sessions b { font: 400 clamp(28px, 2.6vw, 34px)/1 var(--serif); }
.agenda__programme { width: 100%; margin-top: 48px; text-align: left; }
.agenda__programme li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: baseline; padding: 22px 4px; border-top: 1px solid var(--wine-line); }
.agenda__programme li:last-child { border-bottom: 1px solid var(--wine-line); }
.agenda__programme span { font: 500 11.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.agenda__programme b { font: 400 clamp(22px, 2vw, 27px)/1.3 var(--serif); }
.agenda__attire { margin-top: 44px; font: 400 15px/1.6 var(--sans); color: var(--gold-soft); letter-spacing: .08em; }
.agenda__attire b { font-weight: 600; color: var(--cream); margin-right: 6px; }
.agenda__attire i { font-style: normal; color: var(--terra); margin: 0 .9em; }
/* v4: each programme line carries a v1 "The Day" drawing on a timber tile, as v1's moments did */
.agenda__programme li { grid-template-columns: 120px 1fr 150px; align-items: center; padding: 18px 4px; }
.prog-art { height: 84px; background: var(--timber); display: flex; align-items: center; justify-content: center; }
.prog-art img { height: 62px; max-width: 76%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .prog-art img { transition: scale .8s cubic-bezier(.3, 1.4, .4, 1), rotate .8s cubic-bezier(.3, 1.4, .4, 1); }
  .agenda__programme li:hover .prog-art img { scale: 1.08; rotate: -3deg; }
}

/* v4: the striped panel under v1's "The Day" closes the agenda (arrows on phones) */
.band--panel { height: 46px; background-image: url("../assets/art/band-striped-panel.svg"); background-color: var(--cream); }
.band--arrows { display: none; height: 30px; background-color: var(--timber); background-image: url("../assets/art/band-arrows-cross.svg"); }
@media (max-width: 640px) { .band--panel { display: none; } .band--arrows { display: block; } }

/* ---------------- Gallery: photos only, sliding one to the next ---------------- */
.gal { background: var(--wine); padding: 110px var(--g) 90px; }
.gal__stage { position: relative; max-width: 1180px; margin: 0 auto; aspect-ratio: 16 / 8.2; overflow: hidden; background: #4A1729; }
.gal__stage::after { content: ""; position: absolute; inset: 14px; z-index: 3; border: 1px solid rgba(224, 201, 158, .55); pointer-events: none; }
.gal__track { display: flex; height: 100%; transition: translate .9s cubic-bezier(.65, 0, .25, 1); }
.gal__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.gal__btn { position: absolute; top: 50%; z-index: 4; translate: 0 -50%; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; background: rgba(59, 17, 32, .8); color: var(--cream); cursor: pointer; transition: background .25s, color .25s; }
.gal__btn svg { width: 26px; height: 26px; }
.gal__btn:hover { background: var(--gold); color: var(--wine); }
.gal__btn--prev { left: 28px; }
.gal__btn--next { right: 28px; }
.gal__dots { display: flex; justify-content: center; gap: 4px; margin-top: 22px; }
.gal__dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.gal__dot::before { content: ""; width: 10px; height: 10px; rotate: 45deg; border: 1px solid var(--gold-soft); transition: background .3s, border-color .3s; }
.gal__dot[aria-current="true"]::before { background: var(--gold); border-color: var(--gold); }
@media (max-width: 640px) {
  .gal { padding: 72px var(--g) 60px; }
  .gal__stage { aspect-ratio: 4 / 3.4; }
  .gal__stage::after { inset: 10px; }
  .gal__btn { width: 52px; height: 52px; }
  .gal__btn--prev { left: 18px; }
  .gal__btn--next { right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gal__track { transition: none; } }
@media (max-width: 640px) {
  .agenda { padding: 88px var(--g) 96px; }
  .agenda__title { font-size: 38px; }
  .agenda__sessions { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .agenda__sessions li { flex-direction: row; justify-content: space-between; padding: 20px 20px; }
  .agenda__sessions b { font-size: 26px; }
  .agenda__programme li { grid-template-columns: 1fr 72px; grid-template-areas: "time art" "title art"; gap: 6px 16px; padding: 16px 2px; }
  .agenda__programme span { grid-area: time; } .agenda__programme b { grid-area: title; }
  .prog-art { grid-area: art; height: 64px; } .prog-art img { height: 44px; }
  .agenda__programme b { font-size: 22px; }
  .agenda__attire { font-size: 14px; }
}

/* ---------------- Join the Journey ---------------- */
.join { background: var(--sand); padding: 140px var(--g) 150px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.join__intro { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.join__hook { font: 400 clamp(24px, 2.2vw, 30px)/1.4 var(--serif); color: var(--wine); }
.join__hook em { font-style: italic; color: var(--claret); }
.join__title { font: 400 clamp(60px, 6.6vw, 92px)/1 var(--serif); color: var(--wine); margin-top: 8px; }
.join__title em { font-style: italic; color: var(--claret); }
.join__panel { width: 100%; max-width: 640px; margin-top: 56px; text-align: left; }
/* Two forms behind tabs: November 2 (invited) / November 3–4 (additional guest sessions) */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 52px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.tab { min-height: 76px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; cursor: pointer;
  border: 1px solid rgba(59, 17, 32, .3); background: rgba(245, 237, 225, .6); color: var(--wine); transition: background .2s, color .2s, border-color .2s; }
.tab b { font: 500 25px/1.1 var(--serif); }
.tab span { font: 500 14.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.tab:hover { border-color: var(--wine); }
.tab[aria-selected="true"] { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.panel__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.panel__title { margin: 0; font: 400 clamp(36px, 3.6vw, 46px)/1.1 var(--serif); color: var(--wine); }
.panel__title em { font-style: italic; color: var(--claret); }
.panel__lead { font: 400 19.5px/1.5 var(--sans); color: var(--muted); }
.notice { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 16px 20px; border: 1px solid rgba(59, 17, 32, .25); background: rgba(245, 237, 225, .6); font: 400 19.5px/1.45 var(--sans); color: var(--wine); }
.notice i { flex: none; width: 7px; height: 7px; background: var(--terra); rotate: 45deg; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.crosslink { margin-top: 64px; padding-top: 44px; border-top: 1px solid rgba(59, 17, 32, .2); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.crosslink__title { font: 400 32px/1.2 var(--serif); color: var(--wine); }
.crosslink__text { font: 400 19.5px/1.5 var(--sans); color: var(--muted); }
.crosslink .btn { margin-top: 14px; }
.btn--line { background: transparent; color: var(--wine); border: 1px solid var(--wine); }
.btn--line:hover { background: var(--wine); color: var(--cream); }
.form { display: flex; flex-direction: column; gap: 26px; }
.form[hidden] { display: none; }
.form__field { display: flex; flex-direction: column; gap: 6px; font: 600 14.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--claret); }
.form__field input { padding: 14px 2px; border: 0; border-bottom: 1px solid rgba(59, 17, 32, .35); background: transparent; font: 400 25px/1.3 var(--serif);
  letter-spacing: 0; text-transform: none; color: var(--ink); border-radius: 0; }
.form__field input::placeholder { color: #A8938C; }
.form__field input:focus { outline: none; border-bottom: 1px solid var(--claret); }
.form__field[data-invalid] input { border-bottom-color: #9B2C2C; }
.req { color: #9B2C2C; text-decoration: none; border: 0; }
.form__req { margin: 0 0 -8px; font: 400 17px/1.4 var(--sans); color: var(--muted); }
.form__err { font: 400 17.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: #9B2C2C; }
.sessions { border: 0; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sessions legend { font: 600 14.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--claret); padding: 0; margin-bottom: 14px; }
.session { position: relative; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; border: 1px solid rgba(59, 17, 32, .3); background: rgba(245, 237, 225, .6); color: var(--wine); transition: background .2s, color .2s, border-color .2s; }
.session input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.session__time { font: 500 23.5px/1 var(--serif); }
.session__state { font: 500 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.session:has(input:checked) { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.session:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.session:has(input:disabled) { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.session[data-few]:not(:has(input:checked)) .session__state { opacity: 1; font-weight: 600; color: var(--claret); }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font: 400 19.5px/1.45 var(--sans); color: var(--wine); }
.check input { flex: none; width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--wine); cursor: pointer; }
.check a { color: var(--claret); }
.check:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.consent { display: flex; flex-direction: column; gap: 14px; }
.guests { display: flex; flex-direction: column; gap: 12px; padding-left: 32px; }
.guests[hidden] { display: none; }
.guests__intro { font: 400 19.5px/1.5 var(--sans); color: var(--muted); }
.sessions.days, .sessions--guest { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.session[hidden] { display: none; }
.guest { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-bottom: 14px; }
.guest__head { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font: 600 14.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--claret); }
.guest input { flex: 1 1 0; min-width: 0; padding: 12px 2px; border: 0; border-bottom: 1px solid rgba(59, 17, 32, .35); background: transparent; font: 400 22px/1.3 var(--serif); color: var(--ink); border-radius: 0; }
.guest input::placeholder { color: #A8938C; }
.guest input:focus { outline: none; border-bottom-color: var(--claret); }
.guest__x { min-width: 44px; min-height: 44px; border: 0; background: none; font: 400 26px/1 var(--sans); color: var(--claret); cursor: pointer; padding: 0; }
@media (max-width: 760px) { .guest { gap: 0 10px; } .guest input { flex: 1 1 100%; } }
.guests__add { align-self: flex-start; border: 0; background: none; padding: 0; font: 600 14.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--claret); cursor: pointer; }
.form__submit { align-self: center; margin-top: 18px; }
.form__submit:disabled { opacity: .6; cursor: progress; }
.form__status { font-size: 18px; color: #9B2C2C; text-align: center; }
.form__status.is-info { color: var(--muted); }
.thanks { text-align: center; padding: 30px 0; }
.thanks__title { font: 400 56px/1 var(--serif); color: var(--wine); }
.thanks__text { font: 400 23.5px/1.6 var(--sans); margin-top: 16px; color: var(--muted); }
@media (max-width: 640px) {
  .join { padding: 88px var(--g) 96px; }
  .join__hook { font-size: 22px; }
  .join__title { font-size: 56px; }
  .join__panel { margin-top: 44px; }
  .sessions, .sessions.days, .sessions--guest, .form__row { grid-template-columns: 1fr; }
  .tabs { margin-bottom: 40px; }
  .tab { padding: 14px 8px; }
  .tab b { font-size: 23px; }
  .tab span { letter-spacing: .08em; }
  .crosslink__title { font-size: 28px; }
  .guests { padding-left: 0; }
  .session { flex-direction: row; justify-content: space-between; padding: 15px 16px; }
  .form__submit { align-self: stretch; }
  .btn--xl { padding: 22px 20px; font-size: 17px; letter-spacing: .2em; }
}

/* ---------------- Footer ---------------- */
.footer { background: var(--wine); color: var(--cream); }
/* v4: the v2 diamond-mountain band crowns the footer and drifts with the scroll */
.band { background-repeat: repeat-x; background-size: auto 100%; }
.band--mountains { height: 64px; background-color: var(--sand); background-image: url("../assets/art/band-diamond-mountains-ci.svg"); background-position: 0 100%; margin-bottom: -1px; }
@media (prefers-reduced-motion: no-preference) { .band { background-position-x: calc(var(--x, 0) * 1px); } }
@media (max-width: 640px) { .band--mountains { height: 44px; } }
.footer__inner { padding: 60px var(--g) 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer__contact { font: 400 16px/1.6 var(--sans); color: var(--gold-soft); }
.footer__contact a { color: var(--cream); }
.footer__meta { font: 500 10.5px/1.6 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(245, 237, 225, .55); }
.footer__meta i { font-style: normal; margin: 0 .7em; color: var(--terra); font-size: .8em; }
.footer__logos { display: flex; align-items: center; justify-content: center; gap: clamp(32px, 6vw, 96px); flex-wrap: wrap; background: var(--cream); padding: 32px var(--g); }
.logo--gmc { height: 72px; width: auto; } .logo--mqdc { height: 42px; width: auto; } .logo--som { height: 32px; width: auto; } .logo--bensley { height: 28px; width: auto; }
@media (max-width: 640px) {
  .footer__contact { font-size: 15px; } .footer__meta { font-size: 9.5px; letter-spacing: .16em; }
  .footer__logos { gap: 22px 30px; padding: 26px var(--g); }
  .logo--gmc { height: 58px; } .logo--mqdc { height: 32px; } .logo--som { height: 25px; } .logo--bensley { height: 22px; }
}

/* ---------------- Motion (quiet) ---------------- */
.rv-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.rv-word-inner { display: inline-block; translate: 0 105%; transition: translate .9s cubic-bezier(.2, .7, .1, 1) var(--d, 0s); }
.is-in .rv-word-inner { translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: rise 1s cubic-bezier(.3, .7, .2, 1) both; }
  .hero__text > :nth-child(2) { animation-delay: .12s; } .hero__text > :nth-child(3) { animation-delay: .3s; }
  .hero__text > :nth-child(4) { animation-delay: .42s; } .hero__text > :nth-child(5) { animation-delay: .5s; }
  .hero__text > :nth-child(6) { animation-delay: .58s; } .hero__text > :nth-child(7) { animation-delay: .7s; }
}
@keyframes rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes spin { to { rotate: 360deg; } }