/* ==========================================================================
   Founders’ Day 2026 — Threads of Our Legacy
   Shared design system for every page under public/.
   Sections: 1 Fonts · 2 Tokens · 3 Themes · 4 Base · 5 Typography · 6 Layout
             7 Header/Nav · 8 Buttons · 9 Editorial components · 10 Forms
             11 Dialogs/Sheets · 12 States/Badges/Toast · 13 Dock/Footer
             14 Motion · 15 Utilities
   ========================================================================== */

/* 1. Fonts — self-hosted, variable weight (400–800), latin + greek subsets.
   Greek covers the ΑΦΑ mark so it never falls back to a different serif. */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/EBGaramond-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/EBGaramond-greek.woff2") format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url("/assets/fonts/EBGaramond-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;src:url("/assets/fonts/EBGaramond-italic-greek.woff2") format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* Great Vibes carries the key art's gold script. Display sizes only — never body copy. */
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/GreatVibes-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Caveat: handwritten photo captions on the projector album. Bebas Neue: the stitched album title. Display only. */
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/Caveat-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+FEFF,U+FFFD}
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/BebasNeue-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+FEFF,U+FFFD}

/* 2. Tokens ---------------------------------------------------------------- */
:root{
  /* palette */
  --c-ink:#0b0a08;            /* rich black */
  --c-ink-2:#14110d;          /* primary dark surface */
  --c-ink-3:#1e1913;          /* elevated dark surface */
  --c-ink-4:#2b241c;          /* hairline-adjacent dark */
  --c-gold:#c9973a;           /* Alpha gold — accent only */
  --c-gold-bright:#e8c877;    /* gold for text on dark (7.9:1 on ink) */
  --c-gold-deep:#8a5f17;      /* gold for text on ivory (4.9:1) */
  --c-gold-soft:rgba(201,151,58,.14);
  --c-ivory:#f5efe6;          /* parchment */
  --c-ivory-2:#ede4d6;        /* warm neutral */
  --c-paper:#fbf8f2;          /* light surface */
  --c-parchment:#f4ecdf;      /* the key art's warm middle band */
  --c-sand:#dccfba;
  --c-text:#1b1712;
  --c-text-2:#5a5148;         /* muted on light (6.3:1) */
  --c-text-3:#6b6257;         /* metadata on light (5.3:1) */
  --c-text-on-dark:#f4eee4;
  --c-text-on-dark-2:#c9beaf; /* muted on dark (10:1) */
  --c-text-on-dark-3:#a1968a; /* metadata on dark (6.2:1) */
  --c-line-dark:rgba(232,200,119,.2);
  --c-line-light:rgba(86,60,20,.16);
  --c-success:#2f6b43; --c-success-on-dark:#8fd1a3;
  --c-warning:#9a6a12; --c-warning-on-dark:#e8c877;
  --c-error:#a83a2e;   --c-error-on-dark:#f0917f;
  --c-info:#2f5a7a;    --c-info-on-dark:#9cc4e4;
  --c-focus:#e8c877;
  /* type */
  --f-serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --f-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-script:"Great Vibes","Snell Roundhand","Apple Chancery",cursive;
  --t-display:clamp(2.9rem,1.9rem + 5vw,5.6rem);
  --t-page:clamp(2.35rem,1.6rem + 3.6vw,4.4rem);
  --t-section:clamp(1.9rem,1.45rem + 2vw,3rem);
  --t-card:clamp(1.35rem,1.2rem + .6vw,1.7rem);
  --t-lede:clamp(1.18rem,1.08rem + .45vw,1.42rem);
  --t-body:1.125rem; --t-support:1.0312rem; --t-caption:.9375rem; --t-label:.8125rem; --t-meta:.8125rem;
  /* space */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;
  --section-y:clamp(3rem,2rem + 5vw,6rem);
  --gutter:clamp(1rem,.4rem + 3vw,2rem); --rail:clamp(74px,20vw,108px);
  --wrap:1180px; --wrap-narrow:760px;
  /* shape */
  --r-1:4px; --r-2:8px; --r-3:14px; --r-4:22px; --r-pill:999px;
  /* elevation */
  --sh-1:0 1px 2px rgba(0,0,0,.18);
  --sh-2:0 10px 30px rgba(0,0,0,.24);
  --sh-3:0 24px 64px rgba(0,0,0,.38);
  /* layers */
  --z-dock:60; --z-header:70; --z-sheet:100; --z-toast:110; --z-ceremony:120;
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-1:160ms; --d-2:320ms; --d-3:700ms; --d-4:1100ms;
  /* chrome */
  --header-h:64px; --dock-h:64px;
}
@media (min-width:1024px){:root{--header-h:72px}}

/* 3. Themes — contextual tokens so components work on ink and on ivory ---- */
body,.theme-dark{
  --fg:var(--c-text-on-dark); --fg-2:var(--c-text-on-dark-2); --fg-3:var(--c-text-on-dark-3);
  --bg:var(--c-ink); --surface:var(--c-ink-2); --surface-2:var(--c-ink-3);
  --line:var(--c-line-dark); --line-strong:rgba(232,200,119,.42);
  --accent-text:var(--c-gold-bright); --input-bg:rgba(255,255,255,.045);
  --ok:var(--c-success-on-dark); --warn:var(--c-warning-on-dark); --err:var(--c-error-on-dark); --info:var(--c-info-on-dark);
  color:var(--fg); background:var(--bg); color-scheme:dark;
}
.theme-light{
  --fg:var(--c-text); --fg-2:var(--c-text-2); --fg-3:var(--c-text-3);
  --bg:var(--c-ivory); --surface:var(--c-paper); --surface-2:#fff;
  --line:var(--c-line-light); --line-strong:rgba(86,60,20,.34);
  --accent-text:var(--c-gold-deep); --input-bg:#fff;
  --ok:var(--c-success); --warn:var(--c-warning); --err:var(--c-error); --info:var(--c-info);
  color:var(--fg); background:var(--bg); color-scheme:light;
}

/* 4. Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--c-ink);scroll-padding-top:calc(var(--header-h) + 1rem)}
html.has-dialog{overflow:hidden}
body{margin:0;font:var(--t-body)/1.68 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100svh}
body.has-dock{padding-bottom:calc(var(--dock-h) + 1.25rem + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){body.has-dock{padding-bottom:0}}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
h1,h2,h3,h4{margin:0;font-weight:500}
p{margin:0 0 var(--s-4)}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:var(--r-1)}
::selection{background:rgba(201,151,58,.35)}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:calc(var(--z-toast) + 1);padding:.75rem 1rem;background:var(--c-gold-bright);color:var(--c-ink);border-radius:var(--r-2);font-weight:600;text-decoration:none;transition:top var(--d-1)}
.skip-link:focus{top:1rem}

/* 5. Typography ------------------------------------------------------------ */
.eyebrow{display:block;font:600 var(--t-label)/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.eyebrow--quiet{color:var(--fg-3)}
.display{font:500 var(--t-display)/.96 var(--f-serif);letter-spacing:-.015em;text-wrap:balance}
.h-page{font:500 var(--t-page)/1.02 var(--f-serif);letter-spacing:-.01em;text-wrap:balance}
.h-section{font:500 var(--t-section)/1.06 var(--f-serif);text-wrap:balance}
.h-card{font:500 var(--t-card)/1.15 var(--f-serif)}
.h-small{font:600 1.05rem/1.3 var(--f-sans)}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--fg-2);max-width:62ch}
.lede--serif{font-family:var(--f-serif);font-size:calc(var(--t-lede) * 1.12)}
.support{font-size:var(--t-support);line-height:1.6;color:var(--fg-2)}
.caption{font-size:var(--t-caption);line-height:1.5;color:var(--fg-2)}
.meta{font-size:var(--t-meta);line-height:1.5;color:var(--fg-3);letter-spacing:.03em}
.accent{font-style:italic;font-weight:500;color:var(--accent-text)}
.serif{font-family:var(--f-serif)}
.quote{font:italic 500 clamp(1.15rem,1rem + .8vw,1.5rem)/1.4 var(--f-serif);color:var(--fg);max-width:44ch}
.quote cite{display:block;margin-top:.6rem;font:500 var(--t-caption)/1.4 var(--f-sans);font-style:normal;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase}
.prose{max-width:66ch}
.prose p{margin-bottom:1em}
.prose h3{margin:1.6em 0 .5em}

/* 6. Layout ---------------------------------------------------------------- */
.wrap{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto}
.wrap--narrow{width:min(var(--wrap-narrow),100% - 2 * var(--gutter))}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--flush-top{padding-top:0}
.section--light{--fg:var(--c-text);--fg-2:var(--c-text-2);--fg-3:var(--c-text-3);--bg:var(--c-ivory);--surface:var(--c-paper);--surface-2:#fff;--line:var(--c-line-light);--line-strong:rgba(86,60,20,.34);--accent-text:var(--c-gold-deep);--input-bg:#fff;--ok:var(--c-success);--warn:var(--c-warning);--err:var(--c-error);--info:var(--c-info);color:var(--fg);background:var(--bg);color-scheme:light}
.section--paper{background:linear-gradient(180deg,var(--c-paper),var(--c-ivory))}
.section--dark{--fg:var(--c-text-on-dark);--fg-2:var(--c-text-on-dark-2);--fg-3:var(--c-text-on-dark-3);--bg:var(--c-ink);--surface:var(--c-ink-2);--surface-2:var(--c-ink-3);--line:var(--c-line-dark);--line-strong:rgba(232,200,119,.42);--accent-text:var(--c-gold-bright);--input-bg:rgba(255,255,255,.045);--ok:var(--c-success-on-dark);--warn:var(--c-warning-on-dark);--err:var(--c-error-on-dark);--info:var(--c-info-on-dark);color:var(--fg);background:var(--bg);color-scheme:dark}
.section--ink2{background:var(--c-ink-2)}
.section-head{display:grid;gap:var(--s-3);margin-bottom:clamp(1.5rem,1rem + 2vw,2.75rem);max-width:70ch}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}
.section-head .lede{margin-top:var(--s-1)}
.grid{display:grid;gap:var(--s-5)}
@media (min-width:768px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stack{display:grid;gap:var(--s-4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.hairline{border:0;border-top:1px solid var(--line);margin:0}
/* running-stitch separator — used only where the thread motif carries meaning */
.stitch{height:2px;width:min(220px,50%);margin:var(--s-6) auto;background-image:repeating-linear-gradient(90deg,var(--c-gold) 0 9px,transparent 9px 16px);opacity:.6;border-radius:1px}
.stitch--left{margin-inline:0}
.stitch--tight{margin-block:var(--s-4)}
/* paper grain overlay — a whisper of texture, never over photography */
.texture{position:relative;isolation:isolate}
.texture::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/img/grain.png") 0 0/256px 256px repeat;opacity:.09;mix-blend-mode:screen;pointer-events:none}
.section--light.texture::before,.theme-light.texture::before{opacity:.16;mix-blend-mode:multiply}
/* photographic continuation between sections */
.fade-into-dark{position:relative}
.fade-into-dark::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(64px,10vw,140px);background:linear-gradient(180deg,rgba(11,10,8,0),var(--c-ink));pointer-events:none}

/* 7. Header / navigation --------------------------------------------------- */
.fd-header{position:sticky;top:0;z-index:var(--z-header);background:linear-gradient(180deg,rgba(24,20,15,.92),rgba(11,10,8,.88));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(232,200,119,.16);box-shadow:inset 0 1px 0 rgba(255,236,190,.07),0 6px 18px rgba(0,0,0,.28);color:var(--c-text-on-dark);transition:box-shadow var(--d-2),background var(--d-2)}
/* A running stitch just inside the header's lower edge, sewn like the patches below it. */
.fd-header::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:repeating-linear-gradient(90deg,rgba(201,151,58,.55) 0 6px,transparent 6px 14px);filter:drop-shadow(.6px 1px 0 rgba(0,0,0,.7));pointer-events:none}
.fd-header__row{height:var(--header-h);display:flex;align-items:center;gap:var(--s-4)}
.fd-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;min-width:0;color:inherit;min-height:44px}
.fd-brand__greek{font:600 1.85rem/1 var(--f-serif);letter-spacing:-.02em;color:var(--c-gold-bright);flex:none;padding-bottom:.1em;background:linear-gradient(180deg,#fff1c8 0%,#e8c877 40%,#a87a2a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.fd-brand__text{display:grid;gap:.2rem;min-width:0;overflow:hidden}
.fd-brand__l1{font:600 .68rem/1.15 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.fd-brand__l2{font:500 .62rem/1.15 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-on-dark-3);white-space:nowrap}
/* On the narrowest phones the city is the token to lose, not the hosting chapter. */
@media (max-width:399px){.fd-brand__city{display:none}}
.fd-nav{display:none;margin-left:auto;align-items:center;gap:clamp(.85rem,.2rem + 1vw,1.6rem)}
.fd-nav a{position:relative;white-space:nowrap;font:500 clamp(.95rem,.8rem + .2vw,1.0625rem)/1 var(--f-sans);color:var(--c-text-on-dark);text-decoration:none;padding:.6rem 0;border-bottom:1px solid transparent;transition:color var(--d-1),border-color var(--d-1)}
/* Hover draws a short gold thread under the link. */
.fd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:2px;border-radius:2px;background:linear-gradient(90deg,#a87a2a,#e8c877,#a87a2a);transform:scaleX(0);transform-origin:left;transition:transform var(--d-2) var(--ease-out)}
.fd-nav a:hover::after,.fd-nav a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.fd-nav a::after{transition:none}}
.fd-nav a:hover,.fd-nav a:focus-visible{color:var(--c-gold-bright)}
.fd-nav a[aria-current="page"]{color:var(--c-text-on-dark);border-bottom-color:var(--c-gold)}
.fd-nav .btn{margin-left:.25rem}
.fd-event-lockup{display:none;margin-left:auto;text-align:right;font:600 .64rem/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-on-dark)}
.fd-event-lockup small{display:block;font-size:.58rem;color:var(--c-gold-bright);letter-spacing:.18em}
.fd-share-btn{margin-left:auto;display:none;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 .9rem;border:1px solid var(--c-line-dark);border-radius:var(--r-pill);background:transparent;color:var(--c-text-on-dark);font:600 .95rem/1 var(--f-sans);cursor:pointer;transition:border-color var(--d-1),color var(--d-1)}
.fd-share-btn:hover,.fd-share-btn:focus-visible{border-color:var(--c-gold);color:var(--c-gold-bright)}
.fd-share-btn .icon{width:18px;height:18px;flex:none}
@media (min-width:700px){.fd-share-btn{display:inline-flex}}
.fd-share-btn + .fd-menu-btn{margin-left:.4rem}
.fd-menu-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:44px;min-height:44px;padding:0 .6rem;border:1px solid var(--c-line-dark);border-radius:var(--r-pill);background:transparent;color:var(--c-text-on-dark);font:500 .8rem var(--f-sans)}
.fd-menu-btn .icon{width:20px;height:20px}
.fd-menu-btn:hover{border-color:var(--c-gold)}
@media (min-width:1024px){
  .fd-nav{display:flex}
  .fd-menu-btn{margin-left:.25rem}
  .fd-brand__greek{font-size:2.1rem}
}
/* Between a small laptop and a desktop the full nav and the two-line brand do not both fit:
   the hosting line steps out (it is in the footer and the menu) and the links close up. */
@media (min-width:1024px) and (max-width:1279px){
  .fd-brand__l2{display:none}
  .fd-nav{gap:.8rem}
  .fd-nav a{font-size:.94rem}
}
@media (min-width:1024px) and (max-width:1199px){.fd-brand__text{display:none}}
.fd-header.is-scrolled{background:linear-gradient(180deg,rgba(20,17,13,.97),rgba(11,10,8,.95));box-shadow:inset 0 1px 0 rgba(255,236,190,.07),0 10px 30px rgba(0,0,0,.5)}
/* menu sheet nav list */
.menu-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.menu-list li + li{border-top:1px solid var(--line)}
.menu-list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.7rem .25rem;text-decoration:none;font:500 1.2rem/1.2 var(--f-serif)}
.menu-list a small{font:500 .72rem var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.menu-list a .icon{color:var(--accent-text);width:18px;height:18px}
.menu-list a[aria-current="page"]{color:var(--accent-text)}

/* 8. Buttons --------------------------------------------------------------- */
.btn{--btn-h:52px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--btn-h);padding:0 1.35rem;border:1px solid transparent;border-radius:var(--r-pill);font:600 1.0625rem/1.2 var(--f-sans);letter-spacing:.01em;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;transition:transform var(--d-1) var(--ease),box-shadow var(--d-2) var(--ease),background-color var(--d-1),border-color var(--d-1),color var(--d-1),opacity var(--d-1);-webkit-tap-highlight-color:transparent}
.btn .icon{width:18px;height:18px}
.btn--primary{background:linear-gradient(135deg,#b6822f 0%,#e8c877 58%,#d3aa53 100%);color:#1a1307;font-weight:600;box-shadow:0 8px 22px rgba(201,151,58,.22)}
.btn--primary:hover,.btn--primary:focus-visible{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 12px 28px rgba(201,151,58,.3)}
.btn--ghost{border-color:var(--line-strong);color:var(--fg);background:transparent}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--c-gold);background:var(--c-gold-soft)}
.btn--dark{background:var(--c-ink-2);color:var(--c-text-on-dark);border-color:var(--c-line-dark)}
.btn--dark:hover{border-color:var(--c-gold)}
.btn--quiet{padding:0 .1rem;min-height:44px;border-radius:var(--r-1);color:var(--accent-text);background:transparent;font-weight:600;white-space:normal;text-align:left;justify-content:flex-start}
.btn--quiet:hover .icon,.btn--quiet:focus-visible .icon{transform:translateX(3px)}
.btn--quiet .icon{transition:transform var(--d-1)}
.btn--sm{--btn-h:40px;padding:0 1rem;font-size:.875rem}
.btn--lg{--btn-h:60px;padding:0 2rem;font-size:1.15rem}
.btn--block{width:100%}
@media (max-width:480px){.btn{white-space:normal;padding-block:.55rem;line-height:1.25;min-width:0}}
.btn--icon{padding:0;width:var(--btn-h)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none;box-shadow:none;filter:none;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn-row--stack{display:grid;gap:.6rem}
@media (min-width:600px){.btn-row--stack{grid-auto-flow:column;grid-auto-columns:1fr}}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg)}
.icon-btn:hover{border-color:var(--c-gold);color:var(--accent-text)}
.icon-btn .icon{width:20px;height:20px}
.icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 9. Editorial components -------------------------------------------------- */
/* essentials: date / time / venue / tickets — hairline grid, no cards */
.essentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.5rem,.3rem + .6vw,.85rem);background:transparent;border:0;border-radius:0;overflow:visible}
.essentials__item{padding:1.05rem 1.1rem;display:grid;align-content:start;gap:.3rem;min-width:0;border-radius:var(--r-3);background:linear-gradient(140deg,rgba(255,255,255,.76),rgba(255,255,255,.44));-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 34px rgba(46,32,12,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.theme-dark .essentials__item,.section:not(.section--light) .essentials__item{background:linear-gradient(140deg,rgba(255,255,255,.11),rgba(255,255,255,.035));border-color:rgba(232,200,119,.26);box-shadow:0 14px 36px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.14)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.essentials__item{background:rgba(255,255,255,.9)}}
.essentials__item .eyebrow{display:flex;align-items:center;gap:.45rem}
.essentials__item .eyebrow .icon{width:15px;height:15px;color:var(--c-gold)}
.essentials__value{font:500 clamp(1.2rem,1.05rem + .6vw,1.5rem)/1.2 var(--f-serif);color:var(--fg)}
.essentials__note{font-size:var(--t-caption);color:var(--fg-2);line-height:1.45}
.essentials__note a{color:var(--accent-text)}
.essentials__logo{height:26px;width:auto;margin-top:.15rem;opacity:.95}
@media (min-width:820px){.essentials--4{grid-template-columns:repeat(4,minmax(0,1fr))}.essentials__item{padding:1.2rem 1.35rem}}
.essentials-actions{display:grid;gap:.6rem;margin-top:var(--s-4);min-width:0}
.essentials-actions .btn{min-width:0}
.essentials-actions .btn--primary{grid-column:1/-1}
@media (min-width:600px){.essentials-actions{grid-template-columns:repeat(2,1fr)}.essentials-actions--2{grid-template-columns:repeat(2,1fr)}}
/* Calendar, both map apps and share: one row of four once there is room for it. */
@media (min-width:900px){.essentials-actions{grid-template-columns:repeat(4,1fr)}.essentials-actions--2{grid-template-columns:repeat(2,1fr)}}
.motto{margin-top:var(--s-4);text-align:center;font:600 var(--t-label)/1.4 var(--f-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)}

/* story rows: photograph + copy, alternating, separated by hairlines */
.story{display:grid;gap:var(--s-5);align-items:center;padding-block:clamp(1.5rem,1rem + 2vw,2.5rem)}
.story + .story{border-top:1px solid var(--line)}
.story__media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-2);background:var(--surface-2)}
.story__media img,.story__media video{width:100%;height:100%;object-fit:cover}
.story__media--portrait{aspect-ratio:4/5}
.story__media--logo{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#1c2a20,#0f120f 72%)}
.story__media--logo picture{display:contents}
.story__media--logo img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(68%,360px);height:auto;max-height:none}
.story__copy{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;align-content:center}
.story__copy > *{min-width:0;overflow-wrap:break-word}
/* A button in a narrow editorial column wraps rather than pushing the page sideways. */
.story__copy .btn,.story__copy .btn-row .btn{white-space:normal;height:auto;min-height:var(--btn-h);padding-block:.6rem;text-align:center}
.story__copy .h-section{margin-bottom:.25rem}
@media (min-width:768px){
  .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem)}
  .story--reverse .story__media{order:2}
  .story__copy{padding-inline:.5rem}
}
/* the three thread cards on the home schedule */
.thread-list{display:grid;gap:var(--s-4)}
.thread-card{position:relative;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);border:1px solid rgba(232,200,119,.34);border-radius:var(--r-4);box-shadow:0 18px 40px rgba(31,22,10,.22);overflow:hidden;background:var(--c-ink-2);color:var(--c-text-on-dark);text-decoration:none;min-height:212px;isolation:isolate;transition:border-color var(--d-2),transform var(--d-2) var(--ease),box-shadow var(--d-2)}
.thread-card:hover,.thread-card:focus-within{border-color:rgba(232,200,119,.55);transform:translateY(-2px);box-shadow:var(--sh-2)}
.thread-card__photo{position:absolute;inset:0;z-index:0}
.thread-card__photo img{width:100%;height:100%;object-fit:cover;object-position:right center;opacity:.95}
.thread-card__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,9,.98) 0%,rgba(14,12,9,.95) 38%,rgba(14,12,9,.34) 62%,rgba(14,12,9,0) 88%),linear-gradient(0deg,rgba(14,12,9,.45),transparent 40%)}
@media (max-width:700px){.thread-card__photo::after{background:linear-gradient(90deg,rgba(14,12,9,.98) 0%,rgba(14,12,9,.95) 52%,rgba(14,12,9,.6) 80%,rgba(14,12,9,.2) 100%),linear-gradient(0deg,rgba(14,12,9,.55),transparent 44%)}}
.thread-card__num{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:.35rem;padding:1.1rem .5rem;text-align:center}
.thread-card__num .eyebrow{font-size:clamp(.56rem,.5rem + .25vw,.66rem);letter-spacing:.14em;color:var(--c-text-on-dark-2)}
@media (max-width:430px){.thread-card__num small{display:none}}
.thread-card__num strong{font:500 clamp(2rem,1.4rem + 2vw,2.6rem)/1 var(--f-serif)}
.thread-card__num .stitch{width:30px;height:1px;margin:.45rem 0 .4rem;opacity:.75;background-image:none;background:linear-gradient(90deg,transparent,var(--c-gold-bright),transparent)}
.thread-card__num small{font:500 clamp(.56rem,.5rem + .2vw,.64rem)/1.45 var(--f-sans);overflow-wrap:break-word;letter-spacing:.13em;text-transform:uppercase;color:var(--c-text-on-dark-3)}
.thread-card__body{position:relative;z-index:1;padding:1.1rem 1.1rem 1.1rem 1rem;display:grid;gap:.35rem;align-content:start;max-width:34rem}
/* the chevron sits at the right edge, so the copy column stops short of it */
.thread-card__body{padding-right:60px}
@media (max-width:520px){.thread-card__body{padding-right:52px}}
.thread-card__body .eyebrow{font-size:.68rem}
.thread-card__title{font:500 clamp(1.35rem,1.05rem + 1.3vw,2rem)/1.08 var(--f-serif);letter-spacing:.015em;text-transform:uppercase}
.thread-card__title a{color:inherit;text-decoration:none}
.thread-card__title a::after{content:"";position:absolute;inset:0;z-index:2}
.thread-card__title a:focus-visible{outline:none}
.thread-card:focus-within{outline:2px solid var(--c-focus);outline-offset:3px}
.thread-card__sub{font:500 .84rem/1.35 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:#f2e7d5}
.thread-card__facts{display:grid;gap:.3rem;margin-top:.45rem;font:600 clamp(.9rem,.82rem + .3vw,1.03rem)/1.35 var(--f-sans);color:var(--c-text-on-dark)}
.thread-card__facts span{display:flex;align-items:center;gap:.45rem}
.thread-card__facts .icon,.thread-card__facts svg{color:var(--c-gold-bright);flex:none}
.thread-card__facts span{display:flex;align-items:center;gap:.45rem}
.thread-card__facts .icon{width:14px;height:14px;color:var(--c-gold)}
.thread-card__cta{position:absolute;right:1rem;top:50%;transform:translateY(-50%);bottom:auto;z-index:1;display:grid;justify-items:center;gap:.4rem;width:44px;height:auto;border:0;border-radius:0;color:var(--c-gold-bright);transition:background var(--d-1)}
.thread-card__cta .icon{width:20px;height:20px;box-sizing:content-box;padding:11px;border:1px solid var(--c-gold-bright);border-radius:50%;transition:background var(--d-1)}
.thread-card__cta small{font:600 .56rem/1.35 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--c-text-on-dark-2);text-align:center}
.thread-card:hover .thread-card__cta .icon{background:var(--c-gold-soft)}
@media (max-width:520px){.thread-card__cta{width:38px;right:.6rem}.thread-card__cta small{font-size:.5rem;letter-spacing:.1em}.thread-card__cta .icon{width:17px;height:17px;padding:9px}}
@media (min-width:900px){
  :root{--rail:116px}
  .thread-card{grid-template-columns:var(--rail) minmax(0,1fr) 40%;min-height:232px}
  .thread-card__photo{position:relative;grid-column:3;grid-row:1;inset:auto}
  .thread-card__num{grid-column:1;grid-row:1}
  .thread-card__body{grid-column:2;grid-row:1}
  .thread-card__photo::after{background:linear-gradient(90deg,var(--c-ink-2) 0%,rgba(20,17,13,.35) 28%,transparent 60%)}
  .thread-card__body{padding:1.5rem 1.5rem 1.5rem 1.35rem}
  .thread-card__cta{right:1.25rem;bottom:1.25rem}
}
/* program list */
.program{display:grid;border-top:1px solid var(--line)}
.program__row{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.75rem 1.25rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.program__time{font:600 var(--t-label)/1.5 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);padding-top:.35rem}
.program__row h3{font:500 1.25rem/1.25 var(--f-serif)}
.program__row p{color:var(--fg-2);font-size:var(--t-support);margin:.15rem 0 0}
@media (min-width:768px){.program__row{grid-template-columns:8rem minmax(0,1fr)}}
/* info tiles (arrival, included) — hairline list, not cards */
.tile-list{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile{background:var(--bg);padding:1rem 0;display:grid;gap:.25rem}
.tile b{font:500 1.1rem/1.3 var(--f-serif)}
.tile span{font-size:var(--t-support);color:var(--fg-2)}
@media (min-width:640px){.tile-list{grid-template-columns:repeat(2,1fr)}.tile{padding:1.1rem 1.25rem}.tile:nth-child(odd){padding-left:0}}
@media (min-width:1024px){.tile-list--3{grid-template-columns:repeat(3,1fr)}.tile-list--3 .tile:nth-child(odd){padding-left:1.25rem}.tile-list--3 .tile:nth-child(3n+1){padding-left:0}}
.include-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.6rem}
.include{min-width:0}
.include span,.include{overflow-wrap:anywhere}
.include{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;font:500 1rem/1.3 var(--f-sans);color:var(--fg);border-radius:var(--r-2);background:linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,.38));-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.65);box-shadow:0 8px 20px rgba(46,32,12,.08)}
.theme-dark .include{background:linear-gradient(140deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(232,200,119,.24)}
.include .icon{width:20px;height:20px;color:var(--c-gold)}
@media (min-width:640px){.include-row{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.include-row{grid-template-columns:repeat(6,1fr)}.include{flex-direction:column;align-items:flex-start;gap:.5rem}}
/* faq */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;font:500 1.15rem/1.3 var(--f-serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{width:18px;height:18px;color:var(--accent-text);transition:transform var(--d-2) var(--ease);flex:none}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{color:var(--fg-2);font-size:var(--t-support);padding-bottom:1.05rem;max-width:64ch}
/* callout band — one flat panel, photograph optional */
.callout{position:relative;display:grid;gap:var(--s-4);padding:clamp(1.5rem,1rem + 3vw,3rem);border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);overflow:hidden}
.callout--photo{color:var(--c-text-on-dark);border-color:var(--c-line-dark);min-height:280px;align-content:end}
.callout--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.callout--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,8,.15),rgba(11,10,8,.85) 70%);z-index:0}
.callout > *{position:relative;z-index:1}
/* legacy band with archival photographs on both sides */
.legacy-band{position:relative;overflow:hidden;color:var(--c-text-on-dark);background:var(--c-ink)}
.legacy-band__photos{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.legacy-band__photos img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.55;filter:sepia(.25) contrast(1.05)}
.legacy-band__photos::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,8,.25),rgba(11,10,8,.92) 30%,rgba(11,10,8,.92) 70%,rgba(11,10,8,.25)),linear-gradient(0deg,var(--c-ink),transparent 30%,transparent 70%,var(--c-ink))}
.legacy-band__copy{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:.9rem;padding-block:clamp(3.5rem,2rem + 7vw,6.5rem)}
@media (min-width:1024px){.legacy-band__photos{grid-template-columns:1fr 2fr 1fr}.legacy-band__photos img:first-child{grid-column:1}.legacy-band__photos img:last-child{grid-column:3}.legacy-band__photos img{opacity:.7}.legacy-band__photos::after{background:linear-gradient(90deg,rgba(11,10,8,.1),rgba(11,10,8,.9) 26%,rgba(11,10,8,.9) 74%,rgba(11,10,8,.1)),linear-gradient(0deg,var(--c-ink),transparent 25%,transparent 75%,var(--c-ink))}}

/* quilt swatch — stitched patches that stand in for the quilt before photographs exist */
.quilt-swatch{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--c-ink-3)}
.quilt-swatch .patch{position:absolute;border:1px solid rgba(232,200,119,.22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.quilt-swatch .patch::after{content:"";position:absolute;inset:4px;border:1px dashed rgba(232,200,119,.38);border-radius:2px}
.quilt-swatch .patch--fabric{background:url("/assets/img/fabric-a.jpg") 30% 40%/cover;filter:saturate(.7) brightness(.75)}
.quilt-swatch .patch--fabric:nth-of-type(2n){background-image:url("/assets/img/fabric-b.jpg");background-position:70% 60%}
.quilt-swatch .patch--fabric:nth-of-type(3n){background-image:url("/assets/img/fabric-c.jpg");background-position:50% 30%}
.quilt-swatch .patch--gold{background:linear-gradient(135deg,#8a5f17,#c9973a)}
.quilt-swatch .patch--ink{background:#2b241c}
.quilt-swatch .patch--ivory{background:#3a3128}
.quilt-swatch--light{background:var(--c-ivory-2);border-color:var(--c-line-light)}
.quilt-swatch--light .patch--ink{background:#d9ccb6}.quilt-swatch--light .patch--ivory{background:#efe6d6}.quilt-swatch--light .patch--gold{background:linear-gradient(135deg,#c9973a,#e8c877)}.quilt-swatch--light .patch--fabric{filter:saturate(.8) brightness(1)}

/* 10. Forms ---------------------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field__label{font:600 .9rem/1.3 var(--f-sans);color:var(--fg);display:flex;justify-content:space-between;gap:1rem}
.field__label small{font-weight:500;color:var(--fg-3)}
.field__hint{font-size:var(--t-caption);color:var(--fg-2);line-height:1.45}
.field__input{width:100%;min-height:52px;padding:.7rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--input-bg);color:var(--fg);font:inherit;line-height:1.4;transition:border-color var(--d-1),box-shadow var(--d-1)}
.field__input::placeholder{color:var(--fg-3)}
.field__input:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px;border-color:var(--c-gold)}
textarea.field__input{min-height:96px;resize:vertical}
select.field__input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9973a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.4rem}
.field--error .field__input{border-color:var(--err)}
.field__error{display:flex;align-items:center;gap:.4rem;font-size:var(--t-caption);color:var(--err);font-weight:500}
.field__error .icon{width:15px;height:15px}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;font-size:var(--t-support);line-height:1.5;color:var(--fg)}
.check input{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--c-gold)}
.check--error{color:var(--err)}
.fieldset{border:1px solid var(--line);border-radius:var(--r-3);padding:1rem 1.1rem;display:grid;gap:1rem;margin:0}
.fieldset legend{padding:0 .4rem;font:600 .75rem var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.progress{height:6px;border-radius:var(--r-pill);background:rgba(127,127,127,.25);overflow:hidden}
.progress > span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#b6822f,#e8c877);transition:width var(--d-2) var(--ease)}
.dropzone{display:grid;justify-items:center;text-align:center;gap:.6rem;padding:2rem 1.25rem;border:1.5px dashed var(--line-strong);border-radius:var(--r-3);background:var(--input-bg);cursor:pointer;transition:border-color var(--d-1),background var(--d-1)}
.dropzone:hover,.dropzone.is-over,.dropzone:focus-within{border-color:var(--c-gold);background:var(--c-gold-soft)}
.dropzone .icon{width:34px;height:34px;color:var(--c-gold)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0}

/* 11. Dialogs / sheets ----------------------------------------------------- */
dialog.sheet{position:fixed;inset:0;margin:auto 0 0;width:100%;max-width:100%;max-height:min(88vh,88dvh);padding:0;border:1px solid var(--line);border-bottom:0;border-radius:var(--r-4) var(--r-4) 0 0;background:var(--surface);color:var(--fg);box-shadow:var(--sh-3);overflow:hidden;display:none;flex-direction:column}
dialog.sheet[open]{display:flex}
dialog.sheet::backdrop{background:rgba(5,4,3,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.15rem .35rem 1.35rem;flex:none}
.sheet__head .eyebrow{margin-bottom:.35rem}
.sheet__title{font:500 1.55rem/1.15 var(--f-serif)}
.sheet__body{padding:.35rem 1.35rem 1.4rem;overflow:auto;-webkit-overflow-scrolling:touch;display:grid;gap:1rem;align-content:start}
.sheet__body > p{color:var(--fg-2)}
.sheet__actions{display:grid;gap:.55rem}
.sheet__aside{margin-top:1.1rem;font-size:var(--t-support)}
.sheet__aside a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;color:var(--accent-text);font-weight:600;text-decoration:none}
.sheet__aside a:hover{text-decoration:underline;text-underline-offset:3px}
.sheet__aside .icon{width:18px;height:18px}
[data-checkout][aria-busy="true"]{opacity:.75;cursor:progress}
[data-checkout][data-checkout-sold-out]{opacity:.6;cursor:not-allowed;box-shadow:none}
.sheet__foot{padding:0 1.35rem calc(1rem + env(safe-area-inset-bottom,0px));flex:none}
.sheet--wide{--sheet-w:760px}
@media (min-width:768px){
  dialog.sheet{margin:auto;width:min(var(--sheet-w,560px),100% - 2rem);border-bottom:1px solid var(--line);border-radius:var(--r-4);max-height:min(86vh,86dvh)}
  .sheet__head{padding:1.4rem 1.4rem .5rem 1.75rem}
  .sheet__body{padding:.5rem 1.75rem 1.6rem}
  .sheet__foot{padding:0 1.75rem 1.5rem}
}
/* viewer dialog (photo viewer) is full-bleed dark */
dialog.viewer{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:100%;max-height:100%;padding:0;border:0;background:#070604;color:var(--c-text-on-dark);display:none}
dialog.viewer[open]{display:grid}
dialog.viewer::backdrop{background:rgba(4,3,2,.6)}

/* 12. States, badges, toast ------------------------------------------------ */
.state{display:grid;justify-items:center;text-align:center;gap:.7rem;padding:clamp(2rem,1.5rem + 3vw,3.5rem) 1.5rem;border:1px dashed var(--line-strong);border-radius:var(--r-3);max-width:560px;margin-inline:auto;background:var(--surface)}
.state--inline{padding:1.25rem;border-style:solid;max-width:none;text-align:left;justify-items:start;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem;align-items:center}
.state--inline .state__icon{grid-row:1/3}
.state--inline .state__title{font-size:1.15rem}
.state__icon{width:40px;height:40px;color:var(--c-gold)}
.state--error .state__icon{color:var(--err)}
.state__title{font:500 1.45rem/1.15 var(--f-serif)}
.state__copy{color:var(--fg-2);max-width:44ch;font-size:var(--t-support);margin:0}
.state .btn{margin-top:.4rem}
.spinner{width:28px;height:28px;border:2px solid var(--line-strong);border-top-color:var(--c-gold);border-radius:50%;animation:fd-spin 900ms linear infinite}
.spinner--sm{width:18px;height:18px;border-width:2px}
@keyframes fd-spin{to{transform:rotate(360deg)}}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .65rem;border-radius:var(--r-pill);font:600 .72rem/1.2 var(--f-sans);letter-spacing:.03em;border:1px solid var(--line-strong);color:var(--fg-2);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.badge--progress{color:var(--accent-text);border-color:rgba(201,151,58,.5)}
.badge--success{color:var(--ok);border-color:currentColor}
.badge--warning{color:var(--warn);border-color:currentColor}
.badge--error{color:var(--err);border-color:currentColor}
.badge--muted{color:var(--fg-3)}
.badge--plain::before{display:none}
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;padding:.9rem 1rem;border-left:3px solid var(--c-gold);border-radius:0 var(--r-2) var(--r-2) 0;background:var(--c-gold-soft);font-size:var(--t-support);line-height:1.5;color:var(--fg)}
.notice .icon{width:18px;height:18px;color:var(--accent-text);margin-top:.1rem}
.notice--error{border-left-color:var(--err);background:rgba(168,58,46,.12)}
.notice--error .icon{color:var(--err)}
.notice--success{border-left-color:var(--ok);background:rgba(47,107,67,.14)}
.notice--success .icon{color:var(--ok)}
.notice--muted{border-left-color:var(--fg-3);background:rgba(127,127,127,.1);color:var(--fg-2)}
.notice--muted .icon{color:var(--fg-3)}
.toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 1.5rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);z-index:var(--z-toast);max-width:min(92vw,420px);padding:.8rem 1.1rem;border:1px solid var(--c-line-dark);border-radius:var(--r-3);background:rgba(20,17,13,.96);color:var(--c-text-on-dark);box-shadow:var(--sh-2);font-size:var(--t-support);opacity:0;pointer-events:none;transition:opacity var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.toast--error{border-color:rgba(240,145,127,.5)}
@media (min-width:1024px){.toast{bottom:1.5rem}}
.preview-banner{display:flex;gap:.6rem;align-items:center;padding:.6rem .9rem;border:1px solid rgba(240,145,127,.45);border-radius:var(--r-2);background:rgba(168,58,46,.14);color:var(--c-text-on-dark);font-size:var(--t-caption);margin-bottom:.75rem}
.preview-banner .icon{width:16px;height:16px;color:var(--err)}
/* skeleton */
.skeleton{position:relative;overflow:hidden;background:rgba(127,127,127,.14);border-radius:var(--r-2)}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);animation:fd-shimmer 1.6s infinite}
@keyframes fd-shimmer{to{transform:translateX(100%)}}

/* 13. Dock / footer -------------------------------------------------------- */
.dock{position:fixed;left:50%;bottom:max(.6rem,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-dock);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);width:min(100% - 1.25rem,440px);background:rgba(20,17,13,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--c-line-dark);border-radius:var(--r-3);box-shadow:var(--sh-2);overflow:hidden}
.dock a,.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:var(--dock-h);padding:.45rem .25rem;border:0;background:transparent;color:var(--c-text-on-dark-2);text-decoration:none;font:500 .6rem/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase}
.dock a + a,.dock a + button,.dock button + a{border-left:1px solid var(--c-line-dark)}
.dock .icon{width:20px;height:20px;color:var(--c-gold-bright)}
.dock a:hover,.dock a:focus-visible,.dock button:hover{color:var(--c-text-on-dark)}
.dock a[aria-current="page"]{color:var(--c-gold-bright)}
@media (min-width:1024px){.dock{display:none}}
html.has-dialog .dock{visibility:hidden}
/* The footer: the last panel of the quilt, and the binding that finishes it. A strip of
   real fabric, hats, roses and the brothers who came before runs along the top, bound by a
   gold running stitch and fading down into the page's own black. */
.fd-footer{position:relative;isolation:isolate;overflow:hidden;color:var(--c-text-on-dark-2);background:radial-gradient(90% 120% at 85% 120%,rgba(201,151,58,.14),transparent 60%),linear-gradient(180deg,#0e0c09,#070605);padding-block:clamp(2.6rem,2rem + 2.5vw,4rem) 1.25rem}
.fd-footer::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:clamp(180px,26vw,300px);background:url("/assets/img/footer-binding.jpg") center top/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 46%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 46%,transparent 100%);opacity:.9}
.fd-footer__seam{position:absolute;left:0;right:0;top:9px;height:3px;background:repeating-linear-gradient(90deg,#d8b25a 0 7px,transparent 7px 15px);filter:drop-shadow(.8px 1.4px 0 rgba(0,0,0,.85))}
.fd-footer__seam::after{content:"";position:absolute;left:0;right:0;top:-9px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,200,119,.5),transparent)}
.fd-footer__grid{position:relative;display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.fd-footer__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}.fd-footer__call{grid-column:1/-1}}
@media (min-width:1100px){.fd-footer__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}.fd-footer__call{grid-column:auto}}
.fd-footer__brand{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem;align-items:center;align-content:start}
.fd-footer__mark{font:600 2.6rem/1 var(--f-serif);letter-spacing:-.02em;background:linear-gradient(180deg,#fff1c8 0%,#e8c877 38%,#a87a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.fd-footer__brand b{display:block;font:500 1.15rem/1.2 var(--f-serif);color:var(--c-text-on-dark);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.fd-footer__brand div span{font-size:var(--t-caption);color:var(--c-text-on-dark-3)}
.fd-footer__motto{grid-column:1/-1;margin:.6rem 0 0;max-width:34ch;font:italic 400 1.15rem/1.45 var(--f-serif);color:var(--c-text-on-dark);text-shadow:0 1px 10px rgba(0,0,0,.85)}
.fd-footer__stars{grid-column:1/-1;letter-spacing:.5em;color:var(--c-gold-bright);font-size:.85rem}
.fd-footer__col{display:grid;align-content:start;gap:.1rem}
.fd-footer__h{margin:0 0 .5rem;font:700 .72rem/1.3 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold-bright);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.fd-footer__col a{display:flex;align-items:baseline;gap:.6rem;min-height:40px;align-items:center;color:var(--c-text-on-dark-2);text-decoration:none;font:400 var(--t-support)/1.3 var(--f-sans);transition:color var(--d-1)}
.fd-footer__col a b{min-width:3.2em;font:600 .75rem/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-on-dark-3)}
.fd-footer__col a:hover,.fd-footer__col a:focus-visible{color:var(--c-gold-bright)}
.fd-footer__call{display:grid;justify-items:start;align-content:start;gap:.6rem;padding:1.1rem 1.2rem;border:1px solid rgba(232,200,119,.26);border-radius:var(--r-3);background:linear-gradient(160deg,rgba(28,22,15,.9),rgba(10,9,7,.86));box-shadow:0 10px 30px rgba(0,0,0,.45)}
.fd-footer__years{font:500 3.4rem/.9 var(--f-serif);color:var(--c-gold-bright);letter-spacing:-.03em}
.fd-footer__line{margin:0;font:italic 500 1.2rem/1.3 var(--f-serif);color:var(--c-text-on-dark)}
.fd-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;align-items:center;margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(232,200,119,.12)}
.fd-footer__legal{margin:0;font-size:var(--t-meta);color:var(--c-text-on-dark-3)}
.fd-footer__social{display:flex;flex-wrap:wrap;gap:0 1.1rem}
.fd-footer__social a{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;font-size:var(--t-meta);color:var(--c-text-on-dark-2);text-decoration:none}
.fd-footer__social a:hover,.fd-footer__social a:focus-visible{color:var(--c-gold-bright)}
.fd-footer__social .icon{width:13px;height:13px;opacity:.7}

/* Glass tiles — light panels that let the parchment and the quilt read through them, so the
   page gains surfaces without gaining weight. Falls back to a solid tint where blur is absent. */
.glass{position:relative;border-radius:var(--r-3);background:linear-gradient(140deg,rgba(255,255,255,.76),rgba(255,255,255,.44));-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 34px rgba(46,32,12,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.glass--tint{background:linear-gradient(140deg,rgba(255,252,246,.8),rgba(244,236,223,.5))}
.theme-dark .glass,.glass--dark{background:linear-gradient(140deg,rgba(255,255,255,.11),rgba(255,255,255,.035));border-color:rgba(232,200,119,.26);box-shadow:0 14px 36px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.14)}
/* the light that catches a glass edge */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(140deg,rgba(255,255,255,.5),transparent 42%);opacity:.6}
.theme-dark .glass::after,.glass--dark::after{background:linear-gradient(140deg,rgba(255,255,255,.16),transparent 38%);opacity:.5}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:rgba(255,255,255,.9)}
  .theme-dark .glass,.glass--dark{background:rgba(24,20,15,.92)}
}
@media (prefers-reduced-transparency:reduce){
  .glass{background:rgba(255,255,255,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .theme-dark .glass,.glass--dark{background:rgba(24,20,15,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* The cord.

   One continuous twisted thread from the hero down to the quilt in the footer, drawn to
   the scroll and knotting wherever the page changes subject. It is the only vertical line
   in the design and it is on every page, so the name of the event is something a visitor
   sees rather than something they are told.

   It is built in JavaScript against the real height of the page and the real position of
   each section, because a cord that stretches with the viewport is a decoration and a
   cord that ties itself to the content is a structure. The markup carries a plain
   serpentine so that the cord is still there with no script. It does not print. */
.cord{position:absolute;inset-block:0;left:max((100% - var(--wrap)) / 2, var(--gutter));width:var(--lane);z-index:4;pointer-events:none;overflow:visible}
/* The lane. On a wide screen the cord has the margin to itself, outside the wrap, and
   nothing has to move. Below that the wrap keeps a lane clear on its left for it -- the
   page becomes a left-spine layout, type to the right of the thread -- and on a phone the
   lane is a thin strip at the edge. The header and footer are outside main and keep their
   own measure. */
:root{--lane:0px}
.has-cord{--lane:calc(var(--rail) * 1.4)}
.has-cord main .wrap{padding-left:var(--lane)}
/* Full-bleed blocks that set their own measure start where the wrap's content starts. */
/* 100vw, not 100%: a block that is one cell of a grid has to measure from the viewport, not from its cell. */
:root,.has-cord{--lane-edge:calc(max((100vw - var(--wrap)) / 2, var(--gutter)) + var(--lane))}
.has-cord main .moment{padding-left:var(--lane-edge)}
.has-cord main .motto-band{padding-inline:var(--lane-edge) var(--gutter)}
@media (min-width:1512px){.has-cord{--lane:0px}.cord{left:calc((100% - var(--wrap)) / 2 - var(--rail) * 1.5);width:calc(var(--rail) * 1.4)}}
@media (max-width:699px){.has-cord{--lane:30px}.cord{left:2px;width:30px}}
.cord svg{display:block;width:100%;height:100%;overflow:visible}
.cord use{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Rope weight. A shadow thrown down and to the right, a dark core, then two plies in
   counterphase -- which is what makes it read as twisted rather than striped -- and a lit
   edge and a shaded edge a couple of pixels either side of centre. */
.cord__shadow{stroke:rgba(24,14,4,.5);stroke-width:13;transform:translate(3px,4px)}
.cord__core{stroke:#7d5618;stroke-width:7.4}
/* The plies sit a hair either side of centre, so their alternation runs diagonally across the
   cord rather than straight across it -- which is the difference between beads and twist. */
.cord__ply-a{stroke:#c9973a;stroke-width:6.4;stroke-dasharray:8 8;transform:translateX(-.9px)}
.cord__ply-b{stroke:#9c6f22;stroke-width:6.4;stroke-dasharray:8 8;stroke-dashoffset:8;transform:translateX(.9px)}
.cord__shade{stroke:rgba(38,21,4,.6);stroke-width:2.6;stroke-dasharray:5 11;transform:translateX(2.3px)}
.cord__sheen{stroke:rgba(255,239,203,.72);stroke-width:2.1;stroke-dasharray:5 11;stroke-dashoffset:3;transform:translateX(-2.3px)}
.cord__fray{stroke:rgba(214,170,86,.5);stroke-width:.8;stroke-dasharray:1 17 2 26;transform:translateX(-5px)}
/* On a phone the column is narrower and the cord thinner, and the day cards sit over it
   rather than under it: there is no rail wide enough there for it to cross cleanly. */
@media (max-width:700px){
  .cord__shadow{stroke-width:8}
  .cord__core{stroke-width:5.2}
  .cord__ply-a,.cord__ply-b{stroke-width:4.8;stroke-dasharray:6 6}
  .cord__ply-b{stroke-dashoffset:6}
  .cord__shade,.cord__sheen{stroke-width:1.7;stroke-dasharray:4 8}
  .cord__shade{transform:translateX(1.6px)}
  .cord__sheen{transform:translateX(-1.6px)}
}
/* The lane keeps the cord out of the type geometrically; scripts/demo/thread-clearance
   proves that on every page at fifteen widths. A few blocks are lifted above it as well,
   where the cord's knot reaches in beside them. */
#main{position:relative}
.section-head,.thread-card__body,.thread-card__num,.legacy-band__copy,.quilt-teaser__grid{position:relative;z-index:5}
.home-intro .section-head{margin-bottom:clamp(1.8rem,1.2rem + 2vw,3.2rem)}
@media (prefers-reduced-motion:reduce){.cord [data-cord-mask]{fill:#fff}}
@media print{.cord{display:none}}

/* The rail. Pinned under the header on the day pages: which thread this is, the sections of
   the page, and the one thing this page asks you to do -- so nobody scrolls ten screens to
   find the button. On a phone it keeps the marker and the action; the dock has the rest. */
:root{--rail-h:52px}
.page-rail{position:sticky;top:var(--header-h);z-index:calc(var(--z-header) - 1);color:var(--c-text-on-dark)}
/* The paint starts where the lane ends, so the cord is never hidden behind the rail. */
.page-rail::before{content:"";position:absolute;inset:0 0 0 var(--lane-edge);z-index:-1;background:rgba(11,10,8,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--c-line-dark)}
.page-rail{isolation:isolate}
.page-rail__row{display:flex;align-items:center;gap:1rem;min-height:var(--rail-h)}
.page-rail__mark{display:inline-flex;align-items:baseline;gap:.5rem;white-space:nowrap;font:600 .66rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c-text-on-dark-2)}
.page-rail__mark b{font:500 1.05rem/1 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--c-gold-bright)}
.page-rail__links{display:none;flex:1 1 auto;min-width:0;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.page-rail__links::-webkit-scrollbar{display:none}
.page-rail__links a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;border-radius:var(--r-pill);font:500 .9rem/1 var(--f-sans);color:var(--c-text-on-dark-2);text-decoration:none;transition:color var(--d-1),background var(--d-1)}
.page-rail__links a:hover,.page-rail__links a:focus-visible{color:#fff;background:rgba(255,255,255,.06)}
.page-rail__links a.is-current{color:var(--c-gold-bright);box-shadow:inset 0 -2px 0 var(--c-gold-bright);border-radius:0}
.page-rail__action{margin-left:auto;flex:none}
.page-rail__action .btn{--btn-h:44px;padding-inline:1rem;font-size:.92rem}
@media (min-width:768px){.page-rail__links{display:flex}}
/* On the narrowest screens the lane leaves room for the thread number and the action, no more. */
@media (max-width:420px){.page-rail__mark span{display:none}.page-rail__row{gap:.6rem}.page-rail__action .btn{padding-inline:.8rem;font-size:.86rem}}
body.has-rail{scroll-padding-top:calc(var(--header-h) + var(--rail-h) + 1rem)}
html:has(body.has-rail){scroll-padding-top:calc(var(--header-h) + var(--rail-h) + 1rem)}

/* The quilt itself, as a seam across the page. The key art ends on a band of patchwork;
   this is that band, pieced from the same three fabrics with a stitch line running through. */
.quilt-strip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:clamp(30px,1.4rem + 2.2vw,52px);overflow:hidden;background:var(--c-ink-2);border-block:1px solid rgba(232,200,119,.28)}
.quilt-strip i{position:relative;display:block;background-size:cover;background-position:center;border-right:1px solid rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(232,200,119,.14)}
.quilt-strip i:last-child{border-right:0}
.quilt-strip i:nth-child(4n+1){background-image:url("/assets/img/fabric-a.jpg")}
.quilt-strip i:nth-child(4n+2){background-image:url("/assets/img/fabric-b.jpg");background-position:70% 40%}
.quilt-strip i:nth-child(4n+3){background-image:linear-gradient(135deg,#8a5f17,#c9973a)}
.quilt-strip i:nth-child(4n+4){background-image:url("/assets/img/fabric-c.jpg");background-position:35% 60%}
.quilt-strip i:nth-child(8n+6){background-image:linear-gradient(135deg,#1e1913,#2b241c)}
/* the running stitch, drawn over every patch */
.quilt-strip::after{content:"";grid-area:1/1/2/-1;align-self:center;height:2px;background:repeating-linear-gradient(90deg,rgba(245,239,230,.75) 0 9px,transparent 9px 18px);opacity:.5;pointer-events:none}
.quilt-strip--light{background:var(--c-ivory-2);border-color:var(--c-line-light)}
.quilt-strip--tall{height:clamp(44px,2rem + 3vw,78px)}
@media (max-width:520px){.quilt-strip i:nth-child(n+9){display:none}}

/* A stitched edge for surfaces that should read as pieced rather than printed. */
.stitched{position:relative}
.stitched::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(232,200,119,.34);border-radius:calc(var(--r-3) - 4px);pointer-events:none}
.section--light .stitched::after,.theme-light .stitched::after{border-color:rgba(138,95,23,.28)}

/* 13b. Key-art vocabulary — the gold script, the ornament rule, the thread spine ---- */
/* The script is the flagship art's signature. Accent only: a phrase, never a sentence. */
.script{display:block;font:400 clamp(2.6rem,1.8rem + 4vw,4.6rem)/.92 var(--f-script);color:var(--accent-text);letter-spacing:.01em;padding-block:.08em}
.script--sm{font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem)}
/* Whose Founders’ Day it is, and who is hosting it — said before the date, so no one
   has to infer the relationship from a crest and a chapter name. */
.home-intro__host{margin:0 0 .25rem;font:600 clamp(.66rem,.6rem + .2vw,var(--t-label))/1.6 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c-gold-deep);text-wrap:balance}
.home-intro__host-sep{margin-inline:.5em;opacity:.45;font-weight:400}
/* Narrow enough and the two halves stack, rather than breaking at the separator. */
@media (max-width:760px){.home-intro__host{display:grid;justify-items:center;gap:.1rem}.home-intro__host-sep{display:none}}
.datestamp{display:grid;justify-items:center;gap:.35rem;margin:0}
.datestamp__line{font:600 clamp(.72rem,.6rem + .55vw,1.15rem)/1.5 var(--f-sans);letter-spacing:clamp(.1em,.02em + .4vw,.2em);text-transform:uppercase;color:var(--c-gold-deep);text-wrap:balance}
.theme-dark .datestamp__line{color:var(--c-gold-bright)}
.datestamp__sep{margin-inline:.6em;opacity:.5;font-weight:400}
/* Below the width that holds date and city on one line, stack them rather than
   letting the line break at the separator. */
@media (max-width:760px){.datestamp__line{display:grid;justify-items:center;gap:.25rem}.datestamp__sep{display:none}}
.datestamp__days{font:500 clamp(2.1rem,1.5rem + 3vw,3.6rem)/1.05 var(--f-serif);letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.datestamp__place{display:inline-flex;align-items:center;gap:.5rem;font:600 clamp(1rem,.92rem + .4vw,1.25rem)/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.datestamp--left{justify-items:start;text-align:left}
/* the diamond between fine rules, as the art draws it */
.ornament--diamond span{font-size:.62rem;letter-spacing:0;padding:0}
.ornament--diamond::before,.ornament--diamond::after{max-width:110px;background:linear-gradient(90deg,transparent,rgba(138,95,23,.55))}
.ornament--diamond::after{background:linear-gradient(270deg,transparent,rgba(138,95,23,.55))}
.theme-dark .ornament--diamond::before{background:linear-gradient(90deg,transparent,currentColor)}
.theme-dark .ornament--diamond::after{background:linear-gradient(270deg,transparent,currentColor)}
h1 .script,h2 .script,h3 .script{color:var(--accent-text)}

/* The laurel-and-stars rule under FOUNDERS' DAY WEEK in the art, reduced to its bones. */
.ornament{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-block:var(--s-5);color:var(--accent-text)}
.ornament::before,.ornament::after{content:"";flex:1 1 auto;max-width:150px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ornament::after{background:linear-gradient(270deg,transparent,currentColor)}
.ornament span{font-size:.7rem;letter-spacing:.5em;padding-left:.5em;opacity:.9}
.ornament--left{justify-content:flex-start}
.ornament--left::before{display:none}

/* The gold thread that runs down the left of the art's schedule, drawn as the page scrolls. */
.spine{position:relative}
.spine__thread{position:absolute;left:0;top:0;width:44px;height:100%;pointer-events:none;display:none}
.spine__thread path{fill:none;stroke:var(--c-gold);stroke-width:2;stroke-linecap:round;opacity:.65;stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 3s var(--ease) .2s}
.spine.is-visible .spine__thread path,.reveal.is-visible .spine__thread path{stroke-dashoffset:0}
.spine__knot{fill:var(--c-gold);opacity:.8}
@media (min-width:820px){.spine__thread{display:block}.spine{padding-left:76px}}
@media (prefers-reduced-motion:reduce){.spine__thread path{stroke-dashoffset:0;transition:none}}

/* 14. Motion --------------------------------------------------------------- */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--d-3) var(--ease),transform var(--d-3) var(--ease)}
html.js .reveal.is-visible{opacity:1;transform:none}
html.js .reveal--late{transition-delay:120ms}
@keyframes fd-sheet-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fd-fade-in{from{opacity:0}to{opacity:1}}
dialog.sheet[open]{animation:fd-sheet-in var(--d-2) var(--ease-out)}
dialog.sheet[open]::backdrop{animation:fd-fade-in var(--d-2) var(--ease)}
dialog.viewer[open]{animation:fd-fade-in var(--d-2) var(--ease)}
.hero-enter{animation:fd-hero-in var(--d-4) var(--ease-out) both}
.hero-enter--2{animation-delay:120ms}
.hero-enter--3{animation-delay:240ms}
@keyframes fd-hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media print{html.js .reveal{opacity:1;transform:none}html.js .page-thread__shade,html.js .page-thread__cord{stroke-dashoffset:0}html.js .page-thread use,html.js .page-thread__wisp{opacity:1}.dock,.fd-menu-btn,.skip-link{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  dialog.sheet[open],dialog.sheet[open]::backdrop,dialog.viewer[open],.hero-enter{animation:none}
  .btn,.thread-card,.icon-btn{transition:none}
  .skeleton::after{animation:none}
  .spinner{animation-duration:2s}
}

/* 15. Utilities ------------------------------------------------------------ */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.u-center{text-align:center}
.u-mt-0{margin-top:0}.u-mt-2{margin-top:var(--s-2)}.u-mt-4{margin-top:var(--s-4)}.u-mt-6{margin-top:var(--s-6)}.u-mt-8{margin-top:var(--s-8)}
.u-mb-4{margin-bottom:var(--s-4)}.u-mb-6{margin-bottom:var(--s-6)}
.u-muted{color:var(--fg-2)}
.u-nowrap{white-space:nowrap}
.u-hide-mobile{display:none!important}
@media (min-width:768px){.u-hide-mobile{display:revert!important}.u-hide-desktop{display:none!important}}
.u-max-prose{max-width:66ch}
.u-gap-2{gap:var(--s-2)}
[hidden]{display:none!important}

/* 16. Friday RSVP — Friday is not ticketed, so this form is the only headcount there is. */
.rsvp-form{display:grid;gap:1rem;padding:clamp(1.1rem,.8rem + 1.4vw,1.8rem);border-radius:var(--r-3);background:linear-gradient(160deg,rgba(32,26,18,.88),rgba(14,11,8,.92));border:1px solid rgba(232,200,119,.3);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.section--light .rsvp-form,.theme-light .rsvp-form{background:linear-gradient(140deg,rgba(255,255,255,.74),rgba(255,255,255,.42));border-color:rgba(255,255,255,.7);box-shadow:0 12px 34px rgba(46,32,12,.1)}
.rsvp-form .field__optional{color:var(--fg-3);font-weight:400}
.rsvp-form .check{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-support);line-height:1.5;cursor:pointer}
.rsvp-form .check input{margin-top:.25rem;width:22px;height:22px;flex:none;accent-color:var(--c-gold)}
.rsvp-form button[type=submit]{justify-self:start}
.rsvp-done{margin-top:var(--s-5);padding:clamp(1.1rem,.8rem + 1.4vw,1.8rem);border:1px solid var(--line-strong);border-radius:var(--r-3);background:var(--surface-2)}
.rsvp-done h3{margin:0 0 .35rem;font:500 1.5rem/1.2 var(--f-serif)}
.rsvp-done p{margin:0 0 .5rem;color:var(--fg-2)}
.rsvp-done__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}


/* Audit follow-ups: controls that a thumb has to find, and cards that should be tappable whole. */
.rsvp-form input[type=text],.rsvp-form input[type=email],.rsvp-form input[type=tel],.rsvp-form input[type=number]{
  width:100%;min-height:52px;padding:.7rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r-2);
  background:var(--input-bg,rgba(255,255,255,.7));color:var(--fg);font:inherit;line-height:1.4}
.rsvp-form input:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px;border-color:var(--c-gold)}
.rsvp-form .check{min-height:44px;align-items:center}
.rsvp-form .check input{width:26px;height:26px}
/* the whole day card is the link, not just its title */
.thread-card__title a::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit}
.thread-card:focus-within{outline:2px solid var(--c-focus);outline-offset:3px}
.thread-card__title a:focus-visible{outline:none}

/* A venue in the directions sheet: the place, and both map apps side by side. */
.menu-list--venues .venue-row{display:grid;gap:.5rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.menu-list--venues .venue-row:last-child{border-bottom:0}
.menu-list--venues .venue-row>span:first-child{font:500 1.05rem/1.35 var(--f-serif);color:var(--fg)}
.menu-list--venues .venue-row small{display:block;font:400 var(--t-caption)/1.45 var(--f-sans);color:var(--fg-2)}
.venue-row__maps{display:flex;gap:.5rem}
.venue-row__maps a{display:inline-flex;align-items:center;min-height:40px;padding:0 .9rem;border:1px solid var(--line-strong);border-radius:var(--r-pill);font:600 .84rem/1 var(--f-sans);color:var(--fg);text-decoration:none}
.venue-row__maps a:hover{border-color:var(--c-gold);background:var(--c-gold-soft)}

/* The rest of the week as a compact row of links, at the foot of each day page (<!--weekrow:NN-->). */
.week-row{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:clamp(.8rem,.5rem + 1vw,1.2rem)}
@media (min-width:900px){.week-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.week-row__card{display:grid;grid-template-columns:clamp(104px,34%,150px) minmax(0,1fr) auto;align-items:center;gap:1rem;height:100%;padding:.7rem 1rem .7rem .7rem;border:1px solid rgba(232,200,119,.3);border-radius:var(--r-3);background:linear-gradient(160deg,rgba(32,26,18,.8),rgba(14,11,8,.9));color:#fff;text-decoration:none;transition:border-color var(--d-1),transform var(--d-1)}
.week-row__card:hover{border-color:var(--c-gold-bright);transform:translateY(-2px)}
.week-row__img{display:block;border-radius:var(--r-2);overflow:hidden;aspect-ratio:4/3}
.week-row__img img{width:100%;height:100%;object-fit:cover}
.week-row__body{display:grid;gap:.2rem;min-width:0}
.week-row__title{font:500 1.3rem/1.15 var(--f-serif);color:#f4ead7}
.week-row__day{font:600 .66rem/1.4 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--c-gold-bright)}
.week-row__tags{font:italic 400 .95rem/1.35 var(--f-serif);color:#d8ccb8}
.week-row__card > .icon{width:22px;height:22px;color:var(--c-gold-bright)}

/* Arrive informed (arrival.js): the forecast for a night, and the ways to get there that
   need the destination in the link. Both stay hidden until they have something to show. */
.wx{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;padding:.5rem .75rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--c-gold-soft)}
.wx__sky{font-size:1.15rem;line-height:1;color:var(--accent-text)}
.wx__now{font:500 1.25rem/1 var(--f-serif);color:var(--fg);font-variant-numeric:tabular-nums}
.wx__lo{margin-left:.25rem;font:400 .95rem/1 var(--f-serif);color:var(--fg-3)}
.wx__text{font:500 .95rem/1.4 var(--f-sans);color:var(--fg)}
.wx__note{flex-basis:100%;font:400 var(--t-meta)/1.4 var(--f-sans);color:var(--fg-3)}
.venue-row__go{display:flex;flex-wrap:wrap;gap:.45rem}
.venue-row__go .btn{min-height:40px}
.venue-row__wx{margin-top:.1rem}