/* ============================================================
   SUAY Butterflies — page styles
   Type pairing: Cormorant Garamond (display) + Manrope (body)
   Palette: warm paper #faf7f2, ink #43494d, blush oklch accent
   ============================================================ */

:root {
  --ink: #43494d;
  --ink-soft: #6b6f73;
  --paper: #faf7f2;
  --paper-pure: #ffffff;
  --line: #e7e2d9;
  --blush: oklch(0.78 0.04 25);
  --blush-deep: oklch(0.62 0.06 25);
  --serif: "Cormorant Garamond", serif;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; }
/* Make body its own stacking context so negative-z-index children
   (vines, orchids) paint ABOVE body's background but BELOW siblings. */
body {
  position: relative;
  isolation: isolate;
  /* Aged parchment texture multiplied with the warm paper colour. */
  background-image: url("assets/Artistic%20materials/Wrinckled%20Background.webp");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background-color: var(--paper);
}
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; font-family: var(--serif); }
button { font: inherit; cursor: pointer; }

/* ============================== TYPE SYSTEM ============================== */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.lede {
  font-family: var(--serif);
  font-size: clamp(22px, 1.75vw, 28px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
  margin-top: 28px;
  font-weight: 500;
  text-wrap: pretty;
}
/* ============================== NAV ============================== */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
  z-index: 50;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.topnav > * { pointer-events: auto; }
.topnav ul {
  display: flex;
  gap: 38px;
  list-style: none;
  /* Bumped from 13px → clamp(14, 1vw, 17) so the nav reads as
     proper navigation rather than fine print, especially on
     bigger displays (lands at ~16-17px on 4K). */
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.topnav ul a { position: relative; padding: 6px 0; color: var(--ink); }
.topnav ul a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.topnav ul a:hover::after { transform: scaleX(1); }

/* Reserve item sits at the far right of the nav as a CTA — auto
   margin absorbs the free space, pushing it away from the other
   nav links. The link itself stays styled like a normal nav item. */
.topnav ul .nav-reserve {
  margin-left: auto;
}

/* Address inside the Visit section is a link to Google Maps. Keep the
   typography identical to the .story-title h2 (inherit colour, no
   default underline) and add a soft blush colour shift on hover so
   the affordance is felt without dressing the heading down. */
.story-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.story-title-link:hover {
  color: var(--blush-deep);
}

/* Hamburger button — present in markup on all viewports but only
   displayed on mobile via the @media block below. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 36px;
  height: 30px;
  position: relative;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--ink);
  margin: 6px auto;
  transition: transform 0.3s ease, opacity 0.25s ease;
  transform-origin: center;
}
/* When open, morph the three bars into an X */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.mark:hover { opacity: 0.7; }
.mark .dot { color: var(--blush-deep); margin: 0 2px; }

/* ============================== HERO ============================== */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: transparent;
  position: relative;
  overflow: hidden;
}
/* Staggered fade-in for the hero's pieces. Each child starts hidden
   and rises gently into place; delays cascade so the eye can read it. */
.hero .topnav,
.hero .logo-frame,
.hero .kicker {
  opacity: 0;
  animation: heroIn 1.6s cubic-bezier(.22,.61,.36,1) both;
}
.hero .topnav     { animation-delay: 0.35s; }
.hero .logo-frame { animation-delay: 0.70s; animation-duration: 2.0s; }
.hero .kicker     { animation-delay: 1.35s; }
/* scroll-hint keeps its translateX(-50%) for centering, so its
   keyframe composes Y movement with the X offset. */
.hero .scroll-hint {
  opacity: 0;
  animation: heroInHint 1.6s 1.95s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroInHint {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .topnav,
  .hero .logo-frame,
  .hero .kicker,
  .hero .scroll-hint { animation: none; opacity: 1; }
}
.hero-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Optical centering: bias content upward so it reads as centered
     against the topnav weight + the scroll hint anchored at the bottom. */
  padding-bottom: 10vh;
}
.logo-frame {
  width: min(560px, 72vw);
  position: relative;
  z-index: 2;
  /* the base logo gently fades as scroll progresses */
  transition: opacity 0.05s linear;
}
.logo-img { width: 100%; }
.kicker {
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}

.scroll-hint {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity 0.35s ease;
}
.scroll-hint .rel { font-size: 10px; opacity: 0.7; }
.scroll-hint svg { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ============================== BANDS / SECTIONS ============================== */
.band { padding: 10vh 12vw; position: relative; }
/* Pull Philosophy closer to the end of the About section so the page
   reads as a continuous story rather than two padded blocks. */
#philosophy { padding-top: 3vh; }
/* Paper-toned sections sit transparent so the body's parchment texture
   shows through, making the whole page read as one continuous sheet. */
.band--paper { background: transparent; }
/* Was a dark band; now sits on parchment with default ink text colour. */
.band--ink { background: transparent; color: var(--ink); }
/* Text sections live in their own paper panel so vines + orchids pass
   cleanly behind the block, never crossing the typography. The card
   paints its own background, hairline border, and soft elevation. */
.band-inner {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.band--paper .band-inner {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4vh 8vw 6vh;
  text-align: center;
}
/* Center the long-form prose inside framed sections */
.band--paper .band-inner .lede {
  margin-left: auto;
  margin-right: auto;
}
.band--paper .band-inner .display {
  margin-left: auto;
  margin-right: auto;
}
/* ============================== SCRAPBOOK ============================== */
/* Small framed photos placed asymmetrically on parchment — polaroid-style
   chrome (8px paper margin, hairline border, soft drop-shadow). Each
   .frame is positioned by its parent layout (.scrapbook). Sections that
   want a scrapbook layout become absolutely-positioned canvases with
   min-height; pieces are placed via inline top/left/width + rotation. */
.scrapbook {
  position: relative;
  width: 100%;
  max-width: 1500px;
  /* Capped + centred so the scrapbook reads at the same visual scale
     from ~1100px viewports up to 4K. Horizontal padding stays constant
     in px-ish range so it doesn't eat into the section on wide screens. */
  margin: 0 auto;
  padding: 4vh clamp(20px, 4vw, 80px);
}
.scrapbook--tall { min-height: 78vh; }

.frame {
  display: block;
  background: var(--paper-pure);
  padding: 10px 10px 14px;
  border: 1px solid var(--line);
  box-shadow:
    0 18px 36px -20px rgba(38,32,24,0.28),
    0 1px 0 rgba(38,32,24,0.04);
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  transform: rotate(var(--frame-rot, 0deg));
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
}
.frame:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow:
    0 30px 60px -24px rgba(38,32,24,0.38),
    0 1px 0 rgba(38,32,24,0.05);
  z-index: 20;
}

/* Story blocks — small editorial captions next to photos. */
.story {
  font-family: var(--serif);
  color: var(--ink);
  max-width: 36ch;
}
.story-eyebrow {
  font-family: var(--sans);
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
  display: block;
}
.story-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.story-text {
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 20px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* Chef + Scene + Visit get a 15% bump on their story typography so
   they read more visually striking than the supporting sections. */
#chef .story-title,
#scene .story-title,
#visit .story-title { font-size: clamp(32px, 3vw, 48px); }
#chef .story-text,
#scene .story-text,
#visit .story-text { font-size: clamp(20px, 1.55vw, 24px); }
.story-caption {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: clamp(11px, 0.75vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Absolute placement helpers — each piece in the scrapbook uses inline
   styles for top/left/width/--frame-rot so layout is artisanal. The
   .place class just turns on positioning. */
.place {
  position: absolute;
  z-index: 2;
}

/* ============================== DECOR ============================== */
/* Scrapbook decorations — pencil sketches, botanical studies, watercolour
   splatters scattered behind/around the page content. Inspired by the
   Fat Duck's chef-notebook aesthetic. Each .decor is absolutely placed
   inside a section's positioning context; multiply blend integrates the
   cream-bg sketches into the parchment so they read as printed-on. */
.decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.78;
}
.decor img { width: 100%; height: 100%; display: block; }
/* Splatters paint in colour — multiply still works because they have
   white-ish backgrounds; the colour comes through and the white drops out. */
.decor--splatter { opacity: 0.55; }
/* Reveal-on-scroll for decor: fades + slight scale in. Sits on top of
   the standard .reveal but with longer duration + no movement. */
.decor.reveal {
  transform: scale(0.96) rotate(var(--decor-rot, 0deg));
  transition:
    opacity 1.8s cubic-bezier(.22,.61,.36,1),
    transform 1.8s cubic-bezier(.22,.61,.36,1);
}
.decor.reveal.is-visible {
  opacity: 0.78;
  transform: scale(1) rotate(var(--decor-rot, 0deg));
}
.decor--splatter.reveal.is-visible {
  opacity: 0.55;
}

/* ============================== REVEAL ============================== */
/* Elements marked .reveal / .reveal--photo start hidden and fade into
   place when JS toggles .is-visible (via IntersectionObserver). Makes
   the page feel like it unfolds as the user scrolls. */
.reveal,
.reveal--photo {
  opacity: 0;
  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1),
    transform 1.2s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal           { transform: translateY(40px); }
.reveal--photo    { transform: scale(1.05); transition-duration: 1.5s; }
.reveal.is-visible,
.reveal--photo.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: 0.15s; }
.reveal--delay-2 { transition-delay: 0.30s; }
/* Directional reveals — element flies in from a specific side and meets
   at its final position. Bigger translation + a slight overshoot ease so
   the arrival feels like a satisfying click into place. */
.reveal--from-left   { transform: translateX(-140px); }
.reveal--from-right  { transform: translateX(140px); }
.reveal--from-top    { transform: translateY(-140px); }
.reveal--from-bottom { transform: translateY(140px); }
.reveal--from-left,
.reveal--from-right,
.reveal--from-top,
.reveal--from-bottom {
  transition:
    opacity 1.4s cubic-bezier(.22,.61,.36,1),
    transform 1.4s cubic-bezier(.34, 1.18, .64, 1);
}
.reveal--from-left.is-visible,
.reveal--from-right.is-visible,
.reveal--from-top.is-visible,
.reveal--from-bottom.is-visible { transform: none; }
/* exit-down: section has scrolled OUT the top of the viewport (user
   scrolled past going down). Letters sit at the OPPOSITE off-screen
   position from their entry — so on the next entry (user scrolling
   back up) they fly in from the opposite side. Translate is large
   enough to fully clear the viewport even for tall letter blocks. */
.reveal--from-left.exit-down  { transform: translateX(260px); }
.reveal--from-right.exit-down { transform: translateX(-260px); }
.reveal--from-top.exit-down   { transform: translateY(260px); }
.reveal--from-bottom.exit-down { transform: translateY(-260px); }
/* Without this, the letter visibly slides DOWNWARD into the new
   viewport area as it transitions away (the "bumping" bug). Fast
   opacity drop hides it almost instantly while the transform keeps
   moving silently behind the curtain. Entry (.is-visible) still uses
   the slow 1.4s default for its dramatic feel. */
.reveal--repeat:not(.is-visible) {
  transition:
    opacity 0.28s cubic-bezier(.22,.61,.36,1),
    transform 0.65s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--photo { opacity: 1; transform: none; transition: none; }
}

/* Documentary "proof row" — Michelin years 2019–2026.
   Sits below the lede as evidence, not promotion. A hairline divider
   above keeps the badges from competing with the prose; the row is
   capped narrow, slightly desaturated, and topped with a serif caption
   so the red registers as a stamp rather than a sticker. */
.proof {
  margin: 24px auto 0;
  max-width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proof::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--line);
  margin-bottom: 10px;
}
.proof-img {
  width: 100%;
  height: auto;
  display: block;
  /* PNG ships on a light background — multiply lets it drop into the
     paper tone so the red badges read as printed-on, not pasted-on. */
  mix-blend-mode: multiply;
}
.proof-cap {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.band-inner--wide { max-width: 1240px; }
/* (band--ink was dark — text colour overrides removed; now inherits ink) */

/* MENU — full-width editorial. Each dish row is its own 50/50 split:
   photo flush to one edge of the viewport, text breathing on the other.
   Sides alternate per row; reveal animations make each dish unfold as
   the user scrolls past it. */
.menu {
  width: 100%;
  padding: 0;
  background: transparent;
}
.menu-head {
  max-width: 980px;
  margin: 0 auto;
  /* Tighter top padding so the menu starts immediately after the Scene
     and the page reads as a continuous story rather than discrete pages. */
  padding: 2vh 8vw 6vh;
  text-align: center;
  position: relative;
  z-index: 1;
}
/* Menu collage — six framed dish photos scattered in two rows. Compact
   canvas (~110vh) so the section reads as a quick tease, not a long
   read. No tasting notes, just the dish name as a small caption. */
.menu-collage {
  position: relative;
  /* Responsive canvas — all inner positions/sizes are percentages
     of this box, so the collage scales gracefully from ~880px viewports
     up to 4K displays. Aspect ratio locks the height to the width.
     Trimmed from 80vw / 1400px to 64vw / 1100px so the dishes don't
     dominate the page — they should tease the menu, not headline it. */
  width: min(64vw, 1100px);
  aspect-ratio: 940 / 620;
  margin: 0 auto;
}
.menu-foot {
  text-align: center;
  padding: 0 8vw 14vh;
}
/* Faster reveal for the menu collage — the six photos felt sluggish at
   the global 1.5s duration. Keeps the soft scale-in but at ~0.7s. */
.menu-collage .reveal,
.menu-collage .reveal--photo {
  transition-duration: 0.7s;
  transition-delay: 0s;
}
.menu-sub {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.5;
}
.btn--menu {
  margin-top: 36px;
  font-size: 16px;
  letter-spacing: 0.24em;
  padding: 22px 52px;
  font-weight: 600;
}
/* SUAY meaning grid — the whole ink band reads as one centered piece. */
.band--ink .band-inner { text-align: center; }
.band--ink .eyebrow { display: block; }
.suay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  margin-top: 56px;
  text-align: center;
  justify-items: center;
}
.suay-letter { max-width: 24ch; }
.suay-letter p { margin-left: auto; margin-right: auto; }
.suay-letter .big {
  font-family: var(--serif);
  font-size: clamp(120px, 11vw, 200px);
  line-height: 0.85;
  font-weight: 500;
  margin-bottom: 18px;
  color: var(--ink);
}
.suay-letter h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ink);
}
.suay-letter p {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 500;
  text-wrap: pretty;
}

.btn {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 32px;
  background: var(--ink);
  color: var(--paper-pure);
  border-radius: 999px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.btn:hover { background: var(--blush-deep); transform: translateY(-2px); }

/* Ghost variant — same shape and metrics as .btn but transparent
   background with an ink outline, so it reads as the partner action
   without competing with the primary call. */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper-pure);
  transform: translateY(-2px);
}

/* Row of action buttons inside a story block (used by #events for the
   "Catering & Events" + "Contact the team" pair). Flex wrap so the two
   buttons sit side-by-side on roomy widths and stack cleanly when the
   container narrows. */
.event-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.event-actions .btn { margin-top: 0; }

/* Stage CTAs — buttons positioned independently inside .events-stage
   to sit as "footers" beneath each event photo. The inline
   `translateX(-50%)` centres each button on the photo's x-axis; this
   override keeps that centring intact when the .btn:hover lift kicks
   in (otherwise the hover transform would replace it). */
.btn--stage:hover {
  transform: translateX(-50%) translateY(-2px);
}

/* ============================== FOOTER ============================== */
.foot { background: transparent; padding: 10vh 8vw 8vh; border-top: 1px solid var(--line); }
.foot-inner {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* Parent-group affiliation — humble colophon, the only footer content.
   Logo sits inline with the italic serif text, centered on the page. */
.foot-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-style: italic;
  font-size: 42px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.foot-group-logo {
  height: 119px;
  width: auto;
  display: block;
}
.foot-group-link {
  display: inline-block;
  transition: opacity 0.2s ease;
}
.foot-group-link:hover { opacity: 0.75; }
.foot-fine {
  margin-top: 40px;
  font-size: clamp(12px, 0.85vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================== VINES & ORCHIDS ============================== */
/* Vines and orchids live BEHIND in-flow page content.
   Body's paper background paints first, then the vine SVG (z-index: -1),
   then sections paint over the top — but sections with transparent
   backgrounds reveal the ink beneath. Sections with their own bg
   (hero, .band--ink, dish photos, visit card) naturally cover them. */
.vines {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;          /* JS sets explicit height = document height */
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}
.vine-halo {
  fill: none;
  stroke: #8b8d8e;
  stroke-opacity: 0.18;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vine-path {
  fill: none;
  stroke: url(#vineInk);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vine-leaf {
  opacity: 0;
  transition: opacity 0.18s linear;
}
.vine-leaf path { stroke: #8b8d8e; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.orchid-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.orchid {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
  transform-origin: 50% 65%;
  will-change: transform, opacity;
  /* Pull the orchids toward grey so they don't visually shout against the
     muted parchment palette. Saturation cut hard; light drop-shadow kept. */
  filter:
    saturate(0.32)
    drop-shadow(0 4px 8px rgba(67,73,77,0.10));
}

/* Make most sections transparent so vines+orchids show beneath, but
   keep .band--ink and the cards opaque so they cover content surfaces. */
.band--paper { background: transparent; }
.menu        { background: transparent; }
.foot        { background: transparent; }
/* ============================== BUTTERFLIES ============================== */
/* The butterfly + vine + orchid overlays are positioned by JS using the
   logo image's bounding box (which only resolves after the image has
   loaded). Until then the JS placement can be slightly off, so we keep
   the whole overlay invisible until window's `load` event has fired
   (JS adds .loaded to the body). Soft fade-in so they materialise
   rather than pop in. */
.bf-layer,
.vines,
.orchid-layer {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(.22,.61,.36,1);
}
body.loaded .bf-layer,
body.loaded .vines,
body.loaded .orchid-layer { opacity: 1; }

.bf-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}
.bf {
  position: fixed;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
  opacity: 0; /* invisible until first scroll triggers the reveal */
  /* JS sets left / top / width / height */
}
.bf-wings {
  width: 100%;
  height: 100%;
  display: block;
  /* Wing flap: squeeze X to fake flapping. JS varies the rate. */
  transform-origin: 50% 50%;
  will-change: transform;
}
.bf-wings img {
  width: 100%;
  height: 100%;
  display: block;
  /* slight drop shadow makes them feel above the page */
  filter: drop-shadow(0 6px 10px rgba(67, 73, 77, 0.12));
}

/* ============================== RESPONSIVE ============================== */
/* MOBILE PHILOSOPHY: keep the desktop layout. Same absolute % positions,
   same scrapbook compositions, same chapters — just *compressed* to fit
   a narrow viewport. Inspired by thefatduck.co.uk's mobile treatment:
   nothing is collapsed to a vertical column, everything stays in place,
   the whole canvas just renders smaller. Fonts and frame padding are
   scaled down here so the miniaturized boxes remain readable + clean. */

/* ============================== EVENING ============================== */
/* A walk through the night at SUAY, told in five scrapbook chapters.
   Each chapter is a positioned canvas with a fixed aspect ratio so the
   composition stays intentional from narrow mobile viewports all the
   way up to 4K. Below 880px the chapters keep their absolute layout
   (Fat-Duck-style miniaturisation) — font/padding tweaks for that case
   live in the responsive @media block above. */
.evening {
  position: relative;
  width: 100%;
  /* Bottom padding trimmed from 8vh → 2vh so the gap to the Events
     section below is just visual separation, not a chasm. */
  padding: 4vh 0 2vh;
}
.evening-head {
  max-width: 980px;
  margin: 0 auto;
  padding: 6vh 8vw 8vh;
  text-align: center;
  position: relative;
  z-index: 1;
}
.evening-sub {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ============================== EVENTS ============================== */
/* In-house events + catering invitation. Mirrors the Evening section's
   shape (centred head with big display title + lede, then a single
   aspect-ratio'd stage below) so it reads as a distinct section
   rather than another Evening chapter. Generous bottom padding gives
   Visit room to land as its own moment. */
.events {
  position: relative;
  width: 100%;
  /* Top padding trimmed from 4vh → 1vh — pairs with the Evening
     section's reduced bottom padding to bring the two sections closer
     together. Bottom padding kept at 12vh because Visit below should
     still feel like a distinct moment. */
  padding: 1vh 0 1vh;
}
.events-head {
  max-width: 1100px;
  margin: 0 auto;
  /* Top padding 6vh → 2vh: tightens the gap from the cellar section
     above so Events reads as the next beat rather than a fresh start. */
  padding: 2vh 8vw 5vh;
  text-align: center;
  position: relative;
  z-index: 1;
}
.events-sub {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.events-stage {
  position: relative;
  width: min(86vw, 1500px);
  margin: 0 auto;
  /* Holds the two-photo + buttons composition at a designed scale
     from medium viewports up through 4K. */
  aspect-ratio: 1500 / 780;
}

/* ============================== PRIVATE ============================== */
/* Section between Evening and Events. Same head-then-stages structure
   as Evening's chapters, but only two plates: in-house events and the
   cellar. Each plate is its own aspect-ratio'd canvas so absolute
   coords don't shift with viewport height. */
.private {
  position: relative;
  width: 100%;
  padding: 1vh 0 0;
}
.private-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 6vh 8vw 4vh;
  text-align: center;
  position: relative;
  z-index: 1;
}
.private-sub {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.private-plate {
  position: relative;
  width: min(86vw, 1500px);
  /* Bottom margin trimmed from 4vh → 0 so the cellar plate sits closer
     to the Events head below, making the cellar→events transition feel
     like a continuation rather than two separated blocks. */
  margin: 4vh auto 0;
  aspect-ratio: 1500 / 680;
}

/* Bypass the reveal fade-in for the closing sections of the page —
   Private, Events ("Host with us"), Join, and Visit ("Find us").
   Per user preference these should feel "already there waiting" when
   the user scrolls in, with no scroll-triggered animation. The
   .reveal / .reveal--photo classes are kept on the elements so the
   layout system still recognises them, but their opacity/transform
   start at the final state and any transition is killed. */
.private .reveal,
.private .reveal--photo,
.events .reveal,
.events .reveal--photo,
.join .reveal,
.join .reveal--photo,
#visit .reveal,
#visit .reveal--photo {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================== JOIN ============================== */
/* Newsletter + membership cards, between Events and Visit. Cards sit
   on a centred grid (2 cols on desktop, 1 col on mobile) with the
   same parchment-polaroid chrome as .frame so they read as part of
   the scrapbook family rather than generic web forms. */
.join {
  position: relative;
  width: 100%;
  padding: 0 0 10vh;
}
.join-head {
  max-width: 1100px;
  margin: 0 auto;
  /* Top padding 4vh → 1vh: tightens the gap from Events above. */
  padding: 1vh 8vw 4vh;
  text-align: center;
  position: relative;
  z-index: 1;
}
.join-sub {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.join-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8vw;
  position: relative;
  z-index: 1;
}
.join-card {
  /* No solid fill, no border — cards read as pure editorial blocks
     set into the parchment, same family as the .story prose
     elsewhere on the page. The grid gap + padding give them their
     own space without a boxy outline. */
  background: transparent;
  padding: 36px 32px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.join-card-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.join-card-actions .btn { margin-top: 0; }
.join-card .story-eyebrow {
  display: block;
  margin-bottom: 12px;
}
.join-card .story-title {
  font-size: clamp(26px, 2.2vw, 36px);
  margin-bottom: 14px;
}
.join-card .story-text {
  font-size: clamp(16px, 1.2vw, 19px);
  flex: 1;
}
.join-form {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.join-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 14px;
  background: transparent;
  /* Heavier border so the field reads as a clear input slot against
     the parchment, not as decorative ruling. */
  border: 2px solid var(--ink-soft);
  color: var(--ink);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease;
}
.join-form input[type="email"]:focus {
  border-color: var(--ink);
}
.join-form input[type="email"]::placeholder {
  color: var(--ink-soft);
  opacity: 0.6;
}
.join-form .btn {
  margin-top: 0;
}
.join-form button[disabled] {
  opacity: 0.55;
  cursor: default;
}
/* Inline subscribe status — sits below the input+button row on its own
   line thanks to flex-basis:100%. Empty until JS populates it during
   submit ("Subscribing…" / success / error). */
.join-form-status {
  flex-basis: 100%;
  min-height: 1.4em;
  margin: 4px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.join-form-status--success {
  color: var(--ink);
  font-style: normal;
}
.join-form-status--error {
  color: #a03838;
  font-style: normal;
}

/* A chapter is one scrapbook plate. Width capped so wide displays read
   at the intended scale; aspect-ratio locks the height so absolute
   positions don't fight the viewport's tall/short variance. */
.chapter {
  position: relative;
  width: min(86vw, 1500px);
  margin: 0 auto;
  /* Each chapter gets generous breathing room top + bottom so the
     story reads as a sequence of plates, not a wall of pictures. */
  padding: 6vh 0;
}
.chapter--arrival { aspect-ratio: 1500 / 900; }
.chapter--heat    { aspect-ratio: 1500 / 1000; }
.chapter--bar     { aspect-ratio: 1500 / 880; }
.chapter--service { aspect-ratio: 1500 / 1040; }
.chapter--finale  { aspect-ratio: 1500 / 880; }

/* The .chapter-photos wrapper holds every absolute-positioned photo /
   video / sketch inside a chapter. On desktop it sits absolutely over
   the chapter (inset: 0) so its children's % positions resolve against
   the full aspect-ratio'd chapter — identical behaviour to before the
   wrapper existed. On mobile (in the @media block below) it becomes a
   regular flow block with its own aspect-ratio, so the chapter-text
   can spill naturally underneath the photo zone instead of competing
   for the same tiny absolute coordinates. */
.chapter-photos {
  position: absolute;
  inset: 0;
}

/* Video frames borrow the polaroid look from .frame but the inner
   <video> element needs explicit sizing so it lays out before metadata
   loads. 9:16 vertical matches the source clips. */
.frame--video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--ink);
}

/* Chapter text blocks — slightly looser than .story so the chapter
   captions feel like editorial inserts between photos rather than
   anchored side-notes. */
.chapter-text {
  font-family: var(--serif);
  color: var(--ink);
  max-width: 38ch;
}
.chapter-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 12px 0 14px;
  text-wrap: balance;
  color: var(--ink);
}
.chapter-title em {
  font-style: italic;
  color: var(--blush);
}
.chapter-text-body {
  font-family: var(--serif);
  /* Sized in line with #chef/#scene/#visit .story-text — chapter bodies
     are the same kind of editorial content and deserve the same
     reading weight. Weight stays at 400 here (vs 500 elsewhere) because
     chapter bodies are the longest narrative prose on the page — the
     literary voice of the Evening section — and the lighter italic
     preserves the fragile, scrapbook-diary quality the site lives on. */
  font-size: clamp(20px, 1.55vw, 24px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* Finale block sits in the bottom-left and reads as the closing line —
   slightly larger title for emphasis. */
.chapter-text--finale .chapter-title { font-size: clamp(32px, 3vw, 48px); }

/* Chapter labels ("— Chapter one", etc.) — bumped from the global
   story-eyebrow style (weight 500, ink-soft) to weight 700 in the main
   ink so they read crisply against the parchment. Same font, same
   letter-spacing, same caps — just more contrast. Scoped to .chapter
   so the other sections' eyebrows stay untouched. */
.chapter .story-eyebrow {
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(13px, 0.95vw, 16px);
  letter-spacing: 0.22em;
}

/* No fade-in for the Evening section. Everything inside .evening
   (photos, videos, sketches, text) is rendered at its final state
   immediately — no opacity ramp, no scale-in, no translate-in. The
   IntersectionObserver still fires and adds .is-visible, but the rules
   below force the same opacity/transform regardless, so the toggle is
   visually a no-op. */
.evening .reveal,
.evening .reveal--photo {
  opacity: 1;
  transform: none;
  transition: none;
}
/* Sketches snap straight to their target opacity (varies per type)
   and rotation — no scale-in. */
.evening .decor.reveal {
  opacity: 0.78;
  transform: rotate(var(--decor-rot, 0deg));
  transition: none;
}
.evening .decor--splatter.reveal { opacity: 0.55; }
.evening .decor--flame.reveal,
.evening .decor--chef.reveal { opacity: 0.85; }
.evening .decor--garland.reveal { opacity: 0.75; }

/* Decor variants new to this section. .decor--flame leans warm so the
   Botanical Flame watercolour pops a touch more; .decor--garland and
   .decor--chef stay at the standard ink-pencil blend. */
.decor--flame { opacity: 0.85; }
.decor--flame.reveal.is-visible { opacity: 0.85; }
.decor--garland { opacity: 0.75; }
.decor--garland.reveal.is-visible { opacity: 0.75; }
.decor--chef { opacity: 0.85; }
.decor--chef.reveal.is-visible { opacity: 0.85; }


/* Mobile breakpoint dropped from 880px → 700px so tablets (iPads in
   any orientation, 768px+) get the desktop layout. Phones (≤430px on
   iOS, ≤414px on most Android) stay below the threshold with plenty
   of room to spare. */
@media (max-width: 700px) {
  /* Two pieces stay hidden on mobile: the page-spanning vines (whose
     pixel-coords are tuned for a wider viewport and would crowd the
     narrow canvas) and their attached orchid sprites. Everything else
     — including the per-section .decor sketches — stays in place. */
  .vines, .orchid-layer { display: none; }

  /* A few decor sketches sit at negative offsets (left: -3%, etc.) so
     they peek just past the section's left/right edges. On desktop the
     page has enough horizontal slack to absorb that; on mobile it would
     trigger horizontal scroll across the whole page. Clip it here. */
  html, body { overflow-x: hidden; }

  /* Mobile parchment background fix. On desktop we use
     `background-attachment: fixed` + `background-size: cover` so the
     parchment paints once per viewport at a sharp scale. iOS Safari
     either silently disables `fixed` (so `cover` ends up scaling the
     image across the entire ~5000px body — wrinkles get blown up ~6x
     and look zoomed) or renders the fixed layer at low quality.
     Mobile uses a SCROLL-attached background, sized at the viewport
     width and tiled down the body. The image is also swapped for a
     vignette-cropped variant so the seams between tiles are invisible
     (the original has darker bands top + bottom that produced visible
     horizontal lines where each tile met the next). */
  body {
    background-image: url("assets/Artistic%20materials/Wrinckled%20Background%20tileable.webp");
    background-attachment: scroll;
    background-size: 100vw auto;
    background-repeat: repeat-y;
    background-position: center top;
  }

  /* Topnav becomes a hamburger overlay. */
  .topnav { padding: 20px 24px; }
  .nav-toggle { display: block; }
  body.nav-open { overflow: hidden; }
  body.nav-open .topnav {
    mix-blend-mode: normal;
    pointer-events: auto;
  }

  /* MOBILE NAV OVERLAY — always rendered (so opacity transitions work),
     hidden via visibility + opacity when closed. Parchment background
     with a subtle layered tint matches the rest of the site instead of
     reading as a generic white modal. Decorative sketches in the two
     diagonal corners (via ::before / ::after) give it the same hand-
     placed feel as the page sections. */
  .topnav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.04em;
    z-index: 55;

    /* Parchment background — same texture as the body, with the warm
       paper colour multiplied in. */
    background-color: var(--paper);
    background-image: url("assets/Artistic%20materials/Wrinckled%20Background%20tileable.webp");
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;

    /* Closed state: faded out + slightly lifted. visibility delayed so
       it doesn't intercept taps mid-fade. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px);
    transition:
      opacity 0.32s cubic-bezier(.22,.61,.36,1),
      transform 0.42s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0.32s;
  }
  /* Top-left decorative sketch — orchid drift. */
  .topnav ul::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -8%;
    width: 70%;
    aspect-ratio: 1 / 1.3;
    background-image: url("assets/Artistic%20materials/Botanical%20sketch.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    opacity: 0.42;
    transform: rotate(-12deg);
    pointer-events: none;
  }
  /* Bottom-right decorative sketch — butterfly. */
  .topnav ul::after {
    content: '';
    position: absolute;
    bottom: -2%;
    right: -10%;
    width: 65%;
    aspect-ratio: 1 / 1;
    background-image: url("assets/Artistic%20materials/Butterlfy%20Sketch%202.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.5;
    transform: rotate(14deg);
    pointer-events: none;
  }

  /* Open state — fade in, settle down. */
  body.nav-open .topnav ul {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 0.35s cubic-bezier(.22,.61,.36,1),
      transform 0.5s cubic-bezier(.34,1.18,.64,1),
      visibility 0s linear 0s;
  }

  /* Each link fades in with a small staggered upward translate so the
     overlay feels assembled, not slammed into place. */
  body.nav-open .topnav ul li {
    animation: navLink 0.55s cubic-bezier(.22,.61,.36,1) backwards;
  }
  body.nav-open .topnav ul li:nth-child(1) { animation-delay: 0.10s; }
  body.nav-open .topnav ul li:nth-child(2) { animation-delay: 0.16s; }
  body.nav-open .topnav ul li:nth-child(3) { animation-delay: 0.22s; }
  body.nav-open .topnav ul li:nth-child(4) { animation-delay: 0.28s; }
  body.nav-open .topnav ul li:nth-child(5) { animation-delay: 0.34s; }

  @keyframes navLink {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  body.nav-open .topnav ul a { padding: 8px 16px; }
  /* In the mobile overlay all items are centred — the desktop's
     "push Reserve to the right margin" auto-margin doesn't apply. */
  body.nav-open .topnav ul .nav-reserve { margin-left: 0; }
  body.nav-open .topnav ul a::after { display: none; }
  body.nav-open .nav-toggle {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 60;
  }

  /* Section paddings — tighter so the miniaturised canvases have room. */
  .menu-head { padding: 4vh 6vw 2vh; }
  .menu-foot { padding: 0 6vw 6vh; }
  .suay-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .band, .menu { padding-left: 4vw; padding-right: 4vw; }
  .band { padding-top: 6vh; padding-bottom: 6vh; }
  .band--paper .band-inner { padding: 36px 20px 40px; }
  .foot-inner { padding: 24px 16px; }

  /* Footer mobile sizing — the desktop type is 42px serif italic and a
     119px-tall logo, which fills the whole screen on a phone. Scale
     everything down so it reads as a small humble colophon, not a
     billboard. */
  .foot { padding: 5vh 6vw 6vh; }
  .foot-group {
    font-size: 19px;
    gap: 10px;
    letter-spacing: 0.02em;
    font-weight: 500;
  }
  .foot-group-logo {
    height: 46px;
  }
  .foot-fine {
    margin-top: 18px;
    font-size: 10px;
    letter-spacing: 0.16em;
    line-height: 1.7;
    font-weight: 500;
  }
  /* Menu sub-headline — bumped slightly so it carries the same
     editorial weight as the chef/scene copy. */
  .menu-sub { font-size: clamp(19px, 4vw, 23px); font-weight: 500; }

  /* Scrapbook + chapter canvases — keep their aspect-ratio and absolute
     children, just shrink padding + the tall min-height so the canvas
     reads as a compact miniature of the desktop layout. The absolute
     children need a real container height (they don't contribute to
     parent flow), so .scrapbook--tall keeps an explicit min-height. */
  .scrapbook,
  .scrapbook--tall {
    padding: 2vh 4vw;
  }
  .scrapbook--tall {
    min-height: 56vh; /* down from 78vh — more compact on small screens */
  }
  .menu-collage {
    /* On mobile the dishes collage is the full visible width minus the
       4vw side padding. Aspect ratio + % positions are preserved. */
    width: 92vw;
  }
  /* MOBILE chapter strategy — single column stack. Don't try to
     preserve the desktop scrapbook composition on a narrow screen;
     just let every element take a full row and let the chapter grow
     as long as it needs to. Order on the stack:
       text  →  all photos / videos  →  all sketches
     The chapter-text was moved INSIDE chapter-photos (HTML edit) so
     it's a sibling of the photos/sketches and the order property
     can sequence everything cleanly. */
  .chapter {
    aspect-ratio: auto;
    min-height: 0;
    padding: 3vh 6vw;
  }
  .chapter-photos {
    position: relative;
    inset: auto;
    aspect-ratio: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  /* Nuke every desktop absolute coordinate on every child so the flex
     column flow can take over. The inline `style="top:%; left:%;
     width:%; ..."` that drives the desktop scrapbook is harmless here
     because it gets overridden. */
  .chapter-photos > * {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100%;
    transform: none !important;
    margin: 0;
    z-index: auto !important;
  }
  /* Stack order: text first, then figures (photos + videos), then
     decor sketches. Order is independent of HTML source order. */
  .chapter-photos > .chapter-text {
    order: 0;
    text-align: center;
    padding: 4px 0 8px;
    max-width: 42ch;
  }
  .chapter-photos > figure {
    order: 1;
    max-width: 56vw;
    /* !important because the wildcard rule above sets position:static
       !important; need to win against it for z-index to apply. */
    position: relative !important;
    z-index: 2 !important;
  }

  /* Sketches: lifted out of the flex flow and pinned into the chapter's
     side margins as background decoration. The chapter is
     position:relative (from desktop CSS) so absolute sketches anchor
     to its full box. Photos with z-index 2 always sit above; sketches
     with z-index 0 stay behind. */
  .chapter-photos > img.decor {
    position: absolute !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto;
    z-index: 0 !important;
    pointer-events: none;
    opacity: 0.5;
  }
  /* Scatter — left margin, right margin, alternating down the chapter.
     Negative left/right pushes the sketch into the body margin between
     the chapter edge and the viewport edge, so the parchment around
     the photos actually feels drawn-on. EVERY position uses !important
     because the base .chapter-photos > img.decor rule above has
     `top:auto !important` etc. (to override the wildcard reset), and
     without !important here those autos would win and collapse every
     sketch to the default top-left corner. */
  .chapter-photos > img.decor:nth-of-type(1) {
    top: 4% !important; left: -8% !important; max-width: 32vw !important;
    transform: rotate(-10deg) !important;
  }
  .chapter-photos > img.decor:nth-of-type(2) {
    top: 20% !important; right: -8% !important; max-width: 30vw !important;
    transform: rotate(12deg) !important;
  }
  .chapter-photos > img.decor:nth-of-type(3) {
    top: 44% !important; left: -7% !important; max-width: 34vw !important;
    transform: rotate(-6deg) !important;
  }
  .chapter-photos > img.decor:nth-of-type(4) {
    top: 64% !important; right: -7% !important; max-width: 30vw !important;
    transform: rotate(14deg) !important;
  }
  .chapter-photos > img.decor:nth-of-type(5) {
    bottom: 4% !important; left: -6% !important; max-width: 32vw !important;
    transform: rotate(-12deg) !important;
  }
  .chapter-photos > img.decor:nth-of-type(6) {
    bottom: 12% !important; right: -5% !important; max-width: 26vw !important;
    transform: rotate(8deg) !important;
  }

  /* Splatter / flame / chef get slightly more presence; everything else
     stays gentle. */
  .chapter-photos > img.decor--splatter { opacity: 0.4; }
  .chapter-photos > img.decor--flame,
  .chapter-photos > img.decor--chef    { opacity: 0.6; }

  /* The light-bulbs garland in Ch1 is the one sketch that wants to be
     INLINE — placed in the flex flow right after the chapter title so
     it reads as a banner welcoming the reader into the section. */
  .chapter--arrival .chapter-photos > img.decor--garland {
    position: static !important;
    order: 1 !important;
    max-width: 80vw !important;
    width: 80vw !important;
    margin: 6px auto 10px !important;
    transform: none !important;
    opacity: 0.8;
    z-index: 1 !important;
  }
  .chapter--arrival .chapter-photos > .chapter-text { order: 0 !important; }
  .chapter--arrival .chapter-photos > figure { order: 2; }

  /* Ch2 Chef Sketch — given a unique slot (mid-right, drifting down)
     so it doesn't sit at the bottom-right scatter position. Overrides
     the nth-of-type(4) default. */
  .chapter--heat .chapter-photos > img.decor--chef {
    top: 35% !important;
    right: -6% !important;
    bottom: auto !important;
    left: auto !important;
    max-width: 38vw !important;
    transform: rotate(10deg) !important;
  }

  /* Mobile polaroid frames — tight inner padding so the polaroid
     border doesn't eat too much of the photo area. */
  .chapter .frame { padding: 3px 3px 6px; }
  /* Video frames stay at their natural 9:16 aspect but capped narrow
     so a vertical clip doesn't dominate the column. */
  .chapter .frame--video {
    max-width: 38vw !important;
  }
  .chapter .frame--video video { aspect-ratio: 9 / 16; width: 100%; display: block; }

  .evening { padding: 2vh 0 4vh; }
  .evening-head { padding: 4vh 6vw 2vh; }
  .evening-sub { margin-top: 14px; font-size: 13px; }

  /* Polaroid frames — much tighter inner padding so tiny mobile photos
     aren't mostly white border. */
  .frame {
    padding: 3px 3px 5px;
    box-shadow:
      0 6px 12px -8px rgba(38,32,24,0.30),
      0 1px 0 rgba(38,32,24,0.04);
  }
  /* :hover doesn't really apply on touch, but if it does fire on first
     tap we want it to stay close to the natural polaroid look. */
  .frame:hover {
    transform: rotate(var(--frame-rot, 0deg));
    box-shadow:
      0 6px 12px -8px rgba(38,32,24,0.30),
      0 1px 0 rgba(38,32,24,0.04);
  }

  /* Story blocks (chef, scene, visit). All sizes bumped ~12% over the
     previous mobile values + body italic moved to weight 500 (newly
     loaded in the Google Fonts import) so the copy reads as solid
     editorial type instead of thin italic captions. */
  .story-eyebrow { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 8px; font-weight: 600; }
  .story-title  { font-size: clamp(16px, 4.8vw, 26px); margin-bottom: 8px; }
  .story-text   { font-size: clamp(11px, 3vw, 16px); line-height: 1.45; font-weight: 500; }
  .story-caption { font-size: 9px; letter-spacing: 0.2em; margin-top: 12px; font-weight: 600; }
  /* Visit — bumped up so the address + reservation copy reads as a
     proper closing CTA on mobile rather than a tiny footer caption. */
  #visit .story-title { font-size: clamp(24px, 6.8vw, 40px); }
  #visit .story-text  { font-size: clamp(14px, 3.6vw, 21px); font-weight: 500; }
  #visit .story-eyebrow  { font-size: 11px; letter-spacing: 0.22em; }
  #visit .story-caption  { font-size: 11px; letter-spacing: 0.22em; }
  #visit .story .btn { font-size: 13px; padding: 14px 30px; letter-spacing: 0.18em; }
  /* Chef + Scene get a further bump — editorial backbone of the page.
     Titles ("Tammasak Chootong.", "A garden in Cherngtalay.") given an
     additional ~30% size bump on top so they read as proper headlines
     at mobile widths instead of section captions. */
  #chef  .story-title, #scene .story-title { font-size: clamp(28px, 7.8vw, 46px); }
  #chef  .story-text,  #scene .story-text  { font-size: clamp(14px, 3.6vw, 21px); font-weight: 500; }

  /* Chef + Scene + Visit structural promotion. These are the headline
     editorial sections of the page (chef portrait, restaurant
     philosophy, venue shot, address + reservation) — they should
     command a real chunk of the screen. Switch to a vertical stack:
     text → big photo → caption. Decoration sketches stay scattered as
     absolute background, matching the Evening chapter treatment. */
  #chef.scrapbook,
  #scene.scrapbook,
  #visit.scrapbook {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 5vh 4vw 6vh;
  }
  /* Pull text + photo + caption out of their absolute positioning.
     `#visit .btn` covers the Upcoming events CTA (visit-06) so it
     drops into the flex column instead of hovering on top of the photo. */
  #chef .story,
  #scene .story,
  #visit .story,
  #chef .frame,
  #scene .frame,
  #visit .frame,
  #chef .story-caption,
  #scene .story-caption,
  #visit .btn {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto;
  }
  /* Give the stage CTA some breathing room and let it size to its own
     content instead of stretching to the flex column's width. Explicit
     order:2 places it AFTER the story (order:0) and photo (order:1) —
     otherwise it defaults to order:0 and, since it precedes .story in
     DOM order, renders at the very top of the mobile stack. */
  #visit .btn--stage {
    align-self: center;
    margin: 14px auto 4vh !important;
    order: 2;
  }
  /* Photo (visit-05) sits between the Find-us story and the Upcoming
     CTA on mobile: Find Us → indoor photo → Upcoming events → footer. */
  #visit .frame {
    order: 1;
  }
  #visit .story {
    order: 0;
  }
  /* Text block: full readable column, centred. */
  #chef .story,
  #scene .story,
  #visit .story {
    width: 100% !important;
    max-width: 38ch;
    text-align: center;
    order: 0;
  }
  #chef .story-text,
  #scene .story-text,
  #visit .story-text {
    margin: 0 auto;
  }
  /* Photo: 72vw — a proper feature portrait, not a postage stamp. */
  #chef .frame,
  #scene .frame,
  #visit .frame {
    width: 72vw !important;
    max-width: 72vw !important;
    order: 1;
    z-index: 1;
  }
  /* Caption beneath the photo (chef + scene only — visit's caption
     lives inside .story since it's the phone/email line). */
  #chef .story-caption,
  #scene .story-caption {
    width: auto !important;
    max-width: 80vw;
    text-align: center;
    order: 2;
    margin-top: 4px;
  }
  /* Visit's Reserve button is inside the .story block — keep it
     centred and give it a touch more bottom breathing room. */
  #visit .story .btn {
    margin-top: 18px;
  }
  /* Sketches scattered as absolute background — z-index 0, no taps. */
  #chef .decor,
  #scene .decor,
  #visit .decor {
    position: absolute !important;
    pointer-events: none;
    z-index: 0 !important;
    max-width: 90px;
    opacity: 0.55;
  }

  /* Events section mobile: tighten the head and collapse the stage to
     a vertical stack — Event1 + Event2 photos one above the other,
     buttons stacked underneath, sketches scattered as absolute
     background. Keeps the dedicated-section feel from the big head
     while making the canvas a one-scroll readable unit. */
  .events { padding: 2vh 0 6vh; }
  .events-head { padding: 4vh 6vw 2vh; }
  .events-sub {
    margin-top: 14px;
    font-size: clamp(15px, 3.6vw, 19px);
    max-width: 38ch;
  }
  .events-stage {
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 2vh 4vw 4vh;
  }
  .events-stage > * {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0;
  }
  .events-stage > figure {
    width: 72vw !important;
    max-width: 72vw !important;
    z-index: 1;
  }

  /* PRIVATE — head shrinks, each plate becomes a stacked flex column. */
  .private { padding: 2vh 0 4vh; }
  .private-head { padding: 2vh 6vw 1vh; }
  .private-sub {
    margin-top: 14px;
    font-size: clamp(15px, 3.6vw, 19px);
    max-width: 38ch;
  }
  .private-plate {
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    margin: 2vh 0;
    padding: 2vh 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .private-plate > * {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0;
    z-index: auto !important;
  }
  .private-plate > figure {
    width: 72vw !important;
    max-width: 72vw !important;
    z-index: 1;
  }
  .private-plate > .story {
    text-align: center;
    max-width: 38ch;
    padding: 0 4vw;
  }
  /* Mobile mutes the scattered decor on private plates so the flex
     column stays clean. */
  .private-plate > img.decor { display: none; }

  /* JOIN — single-column cards, head shrinks like events-head. */
  .join { padding: 2vh 0 6vh; }
  .join-head { padding: 2vh 6vw 1vh; }
  .join-sub {
    margin-top: 14px;
    font-size: clamp(15px, 3.6vw, 19px);
    max-width: 38ch;
  }
  .join-cards {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 6vw;
  }
  .join-card { padding: 28px 24px; }
  .join-card .story-title { font-size: clamp(22px, 5.5vw, 28px); }
  .join-card .story-text { font-size: clamp(15px, 3.8vw, 17px); }
  /* Newsletter form on mobile: input and button stacked, but neither
     should feel like a heavy UI slab. Thinner border (1px vs desktop
     2px), lower padding, and the button sizes to its content instead
     of stretching to 100% column width. */
  .join-form { flex-direction: column; gap: 14px; align-items: stretch; }
  .join-form input[type="email"] {
    /* Base rule uses `flex: 1 1 200px` which, in a COLUMN flex, tells
       the input to grow vertically → the giant tall rectangle. Reset
       to auto so the input takes only its intrinsic height. */
    flex: 0 0 auto;
    width: 100%;
    border-width: 1px;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 3px;
  }
  .join-form .btn { align-self: flex-start; }
  .join-card-actions .btn { align-self: flex-start; }
  /* Section-level decor sketches stay VISIBLE on mobile — same scatter
     as desktop but capped smaller so they don't crowd narrow screens.
     The absolute positions from positions.json (top-left, top-right,
     mid-left, bottom-right) keep them out of the reading column. */
  .join > img.decor {
    max-width: 70px !important;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
  }
  .events-stage > .btn {
    /* On mobile the two stage buttons become regular flex children of
       the stage column — centred under the photos. */
    align-self: center;
    text-align: center;
  }
  /* Interleave buttons with their photos so each CTA stays paired with
     the photo it belongs to (the "footer" relationship from desktop):
     Event1 → SUAY button → Event2 → Contact button. */
  .events-stage > figure:nth-of-type(1) { order: 1; }
  .events-stage > a.btn:nth-of-type(1)  { order: 2; }
  .events-stage > figure:nth-of-type(2) { order: 3; }
  .events-stage > a.btn:nth-of-type(2)  { order: 4; }
  .events-stage > img.decor {
    position: absolute !important;
    z-index: 0 !important;
    max-width: 90px !important;
    opacity: 0.55;
    pointer-events: none;
  }

  /* Chapter typography (Evening). chapter-text now owns a full row in
     the single-column stack, so fonts can be comfortable reading size.
     Bumped ~12% + body weight 500 to match the rest of the page. */
  .chapter-title { font-size: clamp(25px, 7.2vw, 36px); margin: 4px 0 10px; line-height: 1.05; }
  .chapter-text-body { font-size: clamp(15px, 3.8vw, 20px); line-height: 1.5; font-weight: 500; }
  .chapter .story-eyebrow { font-size: 11px; letter-spacing: 0.24em; margin-bottom: 10px; }
  .chapter-text--finale .chapter-title { font-size: clamp(27px, 7.8vw, 40px); }

  /* Buttons need to be tappable AND not blow up the section padding. */
  .btn       { font-size: 11px; padding: 12px 24px; margin-top: 18px; }
  .btn--menu { font-size: 12px; padding: 14px 30px; letter-spacing: 0.16em; margin-top: 20px; }

  /* SUAY letter grid — keep readable on small screens. */
  .suay-letter .big { font-size: clamp(72px, 16vw, 120px); }
  .suay-letter h4   { font-size: 14px; }
  .suay-letter p    { font-size: 14px; line-height: 1.45; }

  /* Universal cap on decor sketches everywhere on mobile — the inline
     px-based widths in About / Chef / Scene / Visit (150–340px) would
     dominate a 375px screen, and even some of the %-based widths in
     the menu collage round to ~90–100px on mobile, which is plenty.
     This single rule supersedes the previous per-section per-value
     hacks. Chapter-grid decor is exempted (see grid block above) so
     it can still take a full grid cell. */
  .decor { max-width: 96px; }
  .chapter-photos > img.decor { max-width: 100% !important; }

  /* Hero scroll-hint runs out of room on a small viewport — hide the
     "to release the magic" rider. */
  .scroll-hint .rel { display: none; }
}

/* ============================== PAGE TRANSITIONS ==========================
 * Horizontal slide between /  ↔  /events. The two pages read as one
 * continuous surface with /events living to the right of home:
 *   - Click "Events" on home     → home slides left, then /events arrives from the right.
 *   - Click "SUAY" mark on events → events slides right, then home arrives from the left.
 * Any other same-origin navigation is untouched. See page-transition.js. */

/* DEPARTURE — page eases out under the cursor. Match duration to the
   setTimeout in page-transition.js (320ms). */
html.page-leave-left  body {
  animation: page-leave-left  0.32s cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}
html.page-leave-right body {
  animation: page-leave-right 0.32s cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}
@keyframes page-leave-left {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-40vw); opacity: 0; }
}
@keyframes page-leave-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(40vw); opacity: 0; }
}

/* ARRIVAL — new page slides in from the correct side. */
html.page-arrive-right body {
  animation: page-arrive-right 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
html.page-arrive-left  body {
  animation: page-arrive-left  0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes page-arrive-right {
  from { transform: translateX(60vw); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes page-arrive-left {
  from { transform: translateX(-60vw); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Prevent the horizontal transform from triggering a horizontal
   scrollbar during the animation. */
html.page-leave-left,
html.page-leave-right,
html.page-arrive-left,
html.page-arrive-right { overflow-x: hidden; }
html.page-leave-left  body,
html.page-leave-right body,
html.page-arrive-left  body,
html.page-arrive-right body { overflow-x: hidden; }

/* ============================== EVENTS PAGE ==============================
 * /events — dedicated page for upcoming pop-ups, guest chef nights,
 * residencies. Cards are edited via Sveltia CMS at /admin/ and served
 * by the /api/events serverless function (data/events/*.json). */
.events-page {
  position: relative;
  width: 100%;
  padding: 10vh 0 8vh;
  overflow: hidden;  /* keep decor sketches from producing horizontal scroll */
}
.events-page-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4vh 8vw 4vh;
  text-align: center;
  position: relative;
  z-index: 2;
}
.events-page-sub {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
/* "← Back" link at the top-left of the events header — subtle,
   editorial. Complements the SUAY mark in the nav; gives visitors an
   explicit home escape without competing with the display title. */
.events-back {
  position: absolute;
  top: 3vh;
  left: 5vw;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 12px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.events-back:hover {
  color: var(--ink);
  transform: translateX(-4px);
}
@media (max-width: 700px) {
  .events-back { top: 2vh; left: 4vw; font-size: 11px; }
}

/* Handwritten-feel splash — sits above the display title, feels like a
   note pinned to the page. Slight rotation gives it the hand-placed
   character used elsewhere. */
.events-splash {
  margin-top: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--blush-deep);
  transform: rotate(-1.4deg);
  display: inline-block;
}

/* Scattered decor sketches on the events page. Same visual language as
   the homepage sections — pointer-events: none so they never block a
   click on the event cards below. */
.events-page-decor {
  position: absolute;
  width: min(180px, 14vw);
  height: auto;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  opacity: 0.55;
  z-index: 0;
}
.events-page-decor--tl { top:  2vh;  left:  1%;  transform: rotate(-10deg); }
.events-page-decor--tr { top:  1vh;  right: 2%;  transform: rotate( 12deg); width: min(160px, 12vw); }
.events-page-decor--ml { top: 42%;   left: -2%;  transform: rotate(  6deg); width: min(150px, 11vw); }
.events-page-decor--mr { top: 46%;   right: -2%; transform: rotate( -6deg); width: min(170px, 13vw); }
.events-page-decor--bl { bottom: 4vh; left:  2%; transform: rotate( -8deg); width: min(160px, 12vw); }
.events-page-decor--br { bottom: 3vh; right: 2%; transform: rotate( 14deg); width: min(150px, 11vw); }
/* Mobile: mute the decor so it doesn't crowd narrow viewports. */
@media (max-width: 700px) {
  .events-page-decor { display: none; }
}

.events-grid {
  max-width: 1200px;
  margin: 4vh auto 0;
  padding: 0 8vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 48px 40px;
}
.events-loading,
.events-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink-soft);
  padding: 6vh 0;
}
.events-empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Individual event card — reuses the site's polaroid + serif language:
   framed photo on top, editorial date block, eyebrow, headline, body,
   optional CTA button. Text-on-parchment (no boxy card outline). */
.event-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.event-card-frame {
  display: block;
  background: var(--paper-pure);
  padding: 10px 10px 14px;
  border: 1px solid var(--line);
  box-shadow:
    0 18px 36px -20px rgba(38,32,24,0.28),
    0 1px 0 rgba(38,32,24,0.04);
  transform: rotate(-1.5deg);
  align-self: flex-start;
  max-width: 100%;
}
.event-card:nth-child(even) .event-card-frame { transform: rotate(1.5deg); }
.event-card-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.event-card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-card-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  color: var(--ink);
  margin-bottom: 4px;
}
.event-card-day {
  font-size: clamp(38px, 3.5vw, 52px);
  line-height: 1;
  font-weight: 400;
}
.event-card-month {
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.event-card-range {
  font-family: var(--serif);
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--ink);
  font-weight: 400;
}
.event-card-eyebrow {
  font-family: var(--sans);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.event-card-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.1;
  color: var(--ink);
  margin: 4px 0 0;
}
.event-card-body {
  font-family: var(--serif);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.event-card-btn {
  align-self: flex-start;
  margin-top: 14px;
}

/* Mobile: single column, tighter frames. */
@media (max-width: 700px) {
  .events-page { padding: 6vh 0 6vh; }
  .events-page-head { padding: 3vh 6vw 2vh; }
  .events-page-sub {
    margin-top: 14px;
    font-size: clamp(15px, 3.6vw, 19px);
    max-width: 38ch;
  }
  .events-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 6vw;
  }
  .event-card-frame { transform: none; }
  .event-card:nth-child(even) .event-card-frame { transform: none; }
}