@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root { --orange:#ff6900; --deep-orange:#fe5000; --red:#ef3340; --purple:#5f259f; --black:#000; --royal-blue:#4169e1; --white:#fff; --paper:#fff; --ink:#18131f; --accent:var(--purple); --line:#20122e26; --muted:#625a68; --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; color:inherit; }
button:focus-visible,a:focus-visible { outline:3px solid var(--royal-blue); outline-offset:5px; }
[hidden] { display:none !important; }
.site-header { height:86px; margin:0 5%; display:flex; align-items:center; justify-content:center; }
.wordmark { font-size:13px; letter-spacing:2px; font-weight:700; display:flex; align-items:center; gap:12px; }
.wordmark-star { color:var(--deep-orange); font-size:26px; }
.hero { position:relative; overflow:hidden; padding:0 0 64px; }
.hero-copy { text-align:center; position:relative; z-index:1; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:2px; line-height:1.8; }
.header-eyebrow { display:flex; align-items:center; justify-content:center; width:100%; gap:24px; font-size:16px; text-align:center; margin-inline:auto; }
.header-eyebrow span { flex:1 0 12px; height:1px; background:var(--deep-orange); }
h1 { font:400 clamp(36px,4vw,58px)/1.12 var(--serif); letter-spacing:-2px; margin:16px 0; }
h1 br { display:none; }
h1 em { color:var(--accent); font-weight:400; }
.intro { font-size:13px; line-height:1.8; color:var(--muted); margin:0; }
.intro br { display:none; }
.landscape { position:absolute; bottom:0; left:0; right:0; height:280px; opacity:.4; pointer-events:none; }
.landscape svg { width:100%; height:100%; }
@media(min-width:901px) { .landscape { height:680px; } }
.weekend { position:relative; z-index:2; max-width:1480px; margin:44px auto 0; padding:0 40px; }
.carousel-layout { display:grid; grid-template-columns:minmax(0,760.32px) minmax(0,1fr); align-items:center; gap:48px; }
.deck-column { min-width:0; }
.event-cards { position:relative; width:calc((100% - 88px - 2 * var(--arrow-gap) - 16px) / 1.08772); max-width:var(--flyer-width); aspect-ratio:2 / 3; margin:0 0 0 calc(44px + var(--arrow-gap)); isolation:isolate; touch-action:pan-y; }
.event-card { position:absolute; inset:0; display:flex; flex-direction:column; padding:30px; border:1px solid var(--deep-orange); border-radius:10px; background:var(--orange); box-shadow:0 20px 40px #20122e26; transform-origin:50% 85%; overflow:hidden; }
.event-card[data-event="brunch"] { transform:translate(16px,6px) rotate(4deg); z-index:1; }
.event-card[data-event="casino"] { transform:translate(8px,3px) rotate(2deg); z-index:2; }
.event-card.is-selected { transform:none; z-index:3; }
.event-card::after { content:''; position:absolute; inset:10px; border:1px solid currentColor; opacity:.18; border-radius:4px; pointer-events:none; }
.brunch { background:var(--royal-blue); color:var(--white); border-color:var(--royal-blue); }
.event-card.flyer-card { padding:0; border:0; background:#071b38; }
.flyer-card::after { display:none; }
.flyer-image { display:block; width:100%; height:100%; object-fit:contain; }
.card-top,.card-bottom { display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:1.7px; font-weight:600; }
.card-date { font-size:16px; letter-spacing:3px; margin-top:30px; }
.card-art { display:block; flex:1; min-height:60px; max-height:230px; width:85%; align-self:center; }
.card-art svg { height:100%; width:100%; }
.card-title { font:400 clamp(26px,3vw,40px)/1.15 var(--serif); letter-spacing:-1px; }
.card-subtitle { font-size:13px; line-height:1.6; margin-top:12px; margin-bottom:26px; }
.card-bottom { margin-top:auto; padding-top:18px; border-top:1px solid #00000030; }
.card-bottom>span:last-child { font-size:26px; }
.brunch .card-bottom { border-color:#ffffff66; }
.deck-caption { text-align:center; font-size:8px; letter-spacing:1.6px; color:var(--muted); margin:28px 0 0; }
.event-panel { min-width:0; align-self:start; padding:0; }
.event-details { min-height:365px; }
.detail-heading { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:24px; }
.detail-heading h2 { margin:0; padding-left:24px; border-left:1px solid var(--line); min-height:48px; display:flex; align-items:center; }
.detail-date { display:flex; gap:9px; align-items:baseline; white-space:nowrap; }
.detail-date>span:first-child { font-size:16px; letter-spacing:2px; }
.detail-date strong { font:400 42px/1 var(--serif); color:var(--accent); }
h2 { font:400 clamp(22.5px,2.25vw,31.5px)/1.12 var(--serif); letter-spacing:-1px; margin:0 0 18px; }
.detail-copy>p:last-child { font-size:13px; line-height:1.85; color:var(--muted); margin:0; white-space:pre-line; }
.detail-copy a { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
.detail-logistics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; align-items:start; }
.detail-logistics>div { display:flex; gap:13px; min-width:0; }
.detail-logistics p { display:flex; flex-direction:column; margin:0; gap:5px; min-width:0; overflow-wrap:break-word; }
.detail-logistics p>span { font-size:8px; letter-spacing:1.6px; color:var(--muted); }
.detail-logistics strong { font-size:12px; font-weight:500; }
.detail-logistics small { font-size:11px; color:var(--muted); line-height:1.5; }
.logistics-icon { font-size:21px; line-height:1.2; color:var(--royal-blue); }
.location-icon { flex-shrink:0; }
/* Keep navigation beside the deck, including on narrow screens. */
/* The rear card extends 16px + 8.772% of the flyer width to the right:
   a 4deg rotation around 50% 85% of a 2:3 card, plus its translation.
   Reserve that overhang before adding the same arrow gap on both sides. */
.deck-stage { --flyer-width:585px; --arrow-gap:10px; position:relative; max-width:calc(var(--flyer-width) * 1.08772 + 88px + 2 * var(--arrow-gap) + 16px); margin:0 auto; }
.carousel-controls button { position:absolute; top:50%; transform:translateY(-50%); z-index:4; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--white); font-size:23px; }
#previous-event { left:0; }
#next-event { right:0; }
.carousel-controls button:hover { background:var(--purple); color:var(--white); border-color:var(--purple); }
#carousel-position { text-align:center; margin:28px 0 0; font-size:10px; letter-spacing:2px; color:var(--muted); }
.closing { text-align:center; padding:38px 20px 48px; }
.closing>span { font-size:27px; color:var(--red); }
.closing p { font:400 25px/1.5 var(--serif); margin:14px 0; }
.closing p em { color:var(--accent); }
.closing small { font-size:10px; color:var(--muted); }
footer { border-top:1px solid var(--line); margin:0 5%; min-height:85px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
footer .wordmark { font-size:9px; letter-spacing:1.4px; gap:8px; }
footer .wordmark-star { font-size:21px; }
footer>span { font-size:8px; letter-spacing:1.5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(min-width:901px) and (max-width:1200px) { .carousel-layout { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); } }
@media(max-width:900px) and (min-width:701px) { .carousel-layout { grid-template-columns:minmax(0,1fr); gap:36px; } .event-panel { max-width:585px; width:100%; margin:auto; } .event-card { padding:22px; } .card-top,.card-bottom { font-size:8px; letter-spacing:1px; } .card-date { margin-top:20px; } .card-subtitle { font-size:11px; margin-bottom:16px; } }
@media(max-width:700px) {
  .site-header { height:72px; }
  .wordmark { font-size:10px; gap:7px; letter-spacing:1px; }
  .hero { padding-bottom:36px; }
  .hero-copy { padding:0 20px; }
  .header-eyebrow { font-size:11px; letter-spacing:1px; gap:12px; }
  h1 { font-size:42px; }
  h1 br { display:block; }
  .intro { font-size:12px; }
  .intro br { display:block; }
  .weekend { margin-top:30px; padding:0 24px; }
  .carousel-layout { grid-template-columns:minmax(0,1fr); gap:30px; }
  .deck-column { padding:0; margin:0 -12px; }
  .deck-stage { --flyer-width:465px; --arrow-gap:6px; }
  .event-card { padding:24px; }
  .card-title { font-size:32px; }
  .card-subtitle { font-size:12px; margin-bottom:20px; }
  .card-top,.card-bottom { font-size:9px; letter-spacing:1px; }
  .card-date { margin-top:20px; }
  .deck-caption { font-size:7px; letter-spacing:1px; }
  .event-panel { max-width:440px; width:100%; margin:auto; padding:0; display:flex; flex-direction:column; }
  .event-details { min-height:0; }
  h2 { font-size:25.5px; }
  .detail-heading { gap:16px; }
  .detail-heading h2 { padding-left:16px; font-size:21px; }
  .closing { padding:28px 20px 35px; }
  footer { flex-wrap:wrap; justify-content:center; padding:23px 0; gap:15px; }
  footer>span { font-size:7px; }
  footer>span:nth-child(2) { display:none; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Scale the illustrated flyers to the space left between the arrows. */
.event-cards { container-type:inline-size; }
.event-card { padding:7cqw; }
.card-top,.card-bottom { font-size:2.6cqw; letter-spacing:.35cqw; }
.card-date { font-size:4.2cqw; margin-top:6cqw; }
.card-art { min-height:0; }
.card-title { font-size:10cqw; }
.card-subtitle { font-size:3.4cqw; margin-top:3cqw; margin-bottom:6cqw; }
.card-bottom { padding-top:4cqw; }
.card-bottom>span:last-child { font-size:7cqw; }

@media(max-width:400px) { .header-eyebrow { font-size:10px; letter-spacing:.6px; gap:8px; } }

.flyer-open { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.flyer-open:focus-visible { outline-offset:-5px; }
html.flyer-modal-open { overflow:hidden; }
.flyer-modal { position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#101019; color:var(--white); }
.flyer-modal[open] { display:flex; flex-direction:column; }
.flyer-modal::backdrop { background:#101019; }
.flyer-modal-toolbar { flex:none; padding:16px 24px; padding-top:max(16px,env(safe-area-inset-top)); }
#flyer-back { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px; border:1px solid #ffffff66; border-radius:6px; background:transparent; color:inherit; }
#flyer-back:hover { background:#ffffff1a; }
.flyer-modal-artwork { flex:1; min-height:0; padding:0 16px max(16px,env(safe-area-inset-bottom)); }
#flyer-modal-image { display:block; width:100%; height:100%; object-fit:contain; }

.rsvp-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; align-self:flex-start; margin-top:24px; padding:14px 22px; min-height:48px; border-radius:6px; background:var(--purple); color:var(--white); font-size:14px; font-weight:600; }
.rsvp-button:hover { background:var(--royal-blue); }
.rsvp-section { max-width:1000px; margin:48px auto 0; padding:32px 24px; }
.rsvp-intro { text-align:center; margin-bottom:28px; }
.rsvp-intro .eyebrow { color:var(--accent); }
.rsvp-intro>p:last-child { color:var(--muted); font-size:14px; line-height:1.7; }
.rsvp-embed { min-width:0; }
.rsvp-embed iframe { width:100%; max-width:100%; border:0; }
.rsvp-fallback { text-align:center; font-size:12px; line-height:1.7; color:var(--muted); margin:24px 0 0; }
.rsvp-fallback a { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:700px) { .rsvp-section { margin-top:24px; padding:24px 16px; } }

.charity-logo { display:block; width:240px; max-width:100%; margin-top:16px; }
.charity-logo img { display:block; width:100%; height:auto; }