/* ==========================================================================
   Liang Yuan - Promotions page
   Paste into: Elementor > Custom Code  (Location: <head>)
   or into a Custom CSS field / child-theme stylesheet.

   IMG placeholder: replace every occurrence of  IMG/  with your real
   Media Library path, e.g.
     /wp-content/uploads/2026/08/
   A single find-and-replace does the whole file.
   ========================================================================== */

/* Hides a stale Elementor Theme Builder widget (the old "whatsapp-button-
   footer" call button, id 762) that has no positioning CSS of its own and
   renders in-flow wherever it isn't explicitly excluded. It's superseded by
   the newer WhatsApp / Get Early Access / Request Quote buttons used
   elsewhere on the site (see homepage), those aren't affected since this
   rule only loads on this page. The real fix is excluding this page from
   that widget's Display Conditions in Elementor > Theme Builder, this is
   just a scoped stopgap until that's done. */
.elementor-762 {
  display: none !important;
}


:root{
  --maroon:#6E1824;
  --maroon-deep:#3E0D14;
  --gold:#C49C4A;
  --gold-light:#E4C88C;
  --cream:#FAF6EE;
  --cream-2:#F2EADA;
  --ink:#2B211D;
  --grey:#8A7B70;
  --bar-h:42px;
  --clover-url:url("../images/promo/deco-clover.webp");
  --bloom1-url:url("../images/promo/deco-blossom-1.webp");
  --bloom2-url:url("../images/promo/deco-blossom-2.webp");
  --garden-url:url("../images/promo/deco-ink-landscape.webp");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--maroon);color:var(--gold-light)}
.serif{font-family:'Cormorant Garamond',serif}
.cjk{font-family:'Noto Serif SC',serif}

/* ---------- grain ---------- */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
nav{
  /* absolute while the ticker is still on screen, fixed once it scrolls away */
  position:absolute;top:var(--bar-h);left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 48px;
  mix-blend-mode:normal;
  transition:background .4s ease, padding .4s ease, box-shadow .4s;
}
nav.scrolled{position:fixed;top:0;background:rgba(250,246,238,.92);backdrop-filter:blur(12px);padding:14px 48px;box-shadow:0 1px 0 rgba(110,24,36,.08)}
.nav-logo{display:flex;align-items:center;text-decoration:none;position:relative}
.nav-logo img{height:56px;width:auto;display:block;transition:opacity .4s,height .4s}
/* hybrid light logo: cream-white silhouette + original red seal on top */
.logo-hybrid{position:relative;display:block;transition:opacity .4s}
.logo-hybrid .lg-white{filter:brightness(0) invert(0.97) sepia(0.12)}
.logo-hybrid .lg-seal{
  position:absolute;inset:0;height:100%;width:auto;
  clip-path:inset(11% 3% 52% 86%);
}
.nav-logo .logo-dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;mix-blend-mode:multiply}
nav.scrolled .nav-logo .logo-hybrid{opacity:0}
nav.scrolled .nav-logo .logo-dark{opacity:1;height:48px}
.nav-links{display:flex;gap:36px;list-style:none;align-items:center}
.nav-links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:rgba(250,246,238,.85);transition:color .4s;position:relative}
nav.scrolled .nav-links a{color:var(--ink)}
.nav-links a.active{color:var(--gold-light)}
nav.scrolled .nav-links a.active{color:var(--maroon)}
.nav-links a.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-8px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.nav-cta{border:1px solid var(--gold);padding:10px 22px;border-radius:100px;color:var(--gold-light)!important}
nav.scrolled .nav-cta{color:var(--maroon)!important;border-color:var(--maroon)}

/* ---------- hero ---------- */
.hero{position:relative;height:calc(100vh - var(--bar-h));min-height:700px;display:flex;align-items:flex-end;overflow:hidden;background:var(--maroon-deep)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,8,10,.55) 0%,rgba(30,8,10,.18) 38%,rgba(30,8,10,.82) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 48px 0}
.hero-kicker{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.hero-kicker .line{width:56px;height:1px;background:var(--gold)}
.hero-kicker span{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-light)}
.hero h1{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(64px,10.5vw,168px);
  line-height:.94;color:var(--cream);letter-spacing:-.01em;
}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row span{display:block}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:36px;padding-bottom:110px;flex-wrap:wrap}
.hero-sub{max-width:380px;font-size:15px;line-height:1.75;color:rgba(250,246,238,.75);font-weight:300}
.hero-scroll{display:flex;align-items:center;gap:14px;color:rgba(250,246,238,.6);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.hero-scroll .dot{width:8px;height:12px;border:1px solid rgba(250,246,238,.5);border-radius:8px;position:relative}
.hero-scroll .dot::after{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);width:2px;height:3px;background:var(--gold-light);border-radius:2px;animation:scrollDot 1.6s ease infinite}
@keyframes scrollDot{0%{top:2px;opacity:1}100%{top:7px;opacity:0}}

/* ---------- marquee ---------- */
.marquee{background:var(--maroon);padding:0;overflow:hidden;position:relative;z-index:3;height:var(--bar-h);display:flex;align-items:center}
.marquee-track{display:flex;gap:0;white-space:nowrap;width:max-content}
.marquee-track span{font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;color:var(--gold-light);letter-spacing:.05em;padding:0 22px;position:relative}
.marquee-track span{display:inline-flex;align-items:center;gap:17px}
.marquee-track span::after{
  content:"";width:9px;height:9px;flex-shrink:0;opacity:.7;
  background-image:var(--clover-url);background-size:contain;background-repeat:no-repeat;
}


/* ---------- decorative elements ---------- */
/* clipping wrapper: keeps deco inside the section WITHOUT putting
   overflow:hidden on an ancestor of the sticky promo panels */
.sec-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deco{position:absolute;pointer-events:none;user-select:none;z-index:0}
.deco img{display:block;width:100%;height:auto}

/* --- deco: animated by GSAP. --op holds each element's target opacity so
   media queries can still tune it; GSAP reads it at runtime. --- */
.deco{will-change:transform,opacity}
.js-anim .deco{opacity:0}


/* brand clover motif */
.clover{width:22px;height:22px;flex-shrink:0;opacity:1}
.clover-row{display:inline-flex;align-items:center;gap:12px}
.clover-row img{width:17px;height:17px;opacity:1}
.clover-row img:nth-child(2){width:25px;height:25px}
/* the motif is a thin gold outline: a touch of contrast makes it read on cream */
.clover,.clover-row img{filter:saturate(1.25) contrast(1.15)}
.marquee-track span::after{opacity:.95}

/* ---------- section shell ---------- */
.section{padding:140px 48px;position:relative}
.sec-head{max-width:1400px;margin:0 auto 90px;position:relative;z-index:2}
.sec-head .eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.sec-head .eyebrow .cjk{font-size:15px;color:var(--maroon);letter-spacing:.5em}
.sec-head .eyebrow .line{width:48px;height:1px;background:var(--gold)}
.sec-head h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(44px,6vw,92px);line-height:1.02;letter-spacing:-.01em}
.sec-head h2 em{font-style:italic;color:var(--maroon)}
.sec-head p{margin-top:24px;max-width:440px;color:var(--grey);font-size:15px;line-height:1.8;font-weight:300}

/* ---------- empty state: nothing running, nothing queued ----------
   A seal, a heading, and a short "what to look out for" row. Deliberately
   photo-free: it sits between the hero and the booking banner, both of which
   are dark photographs, so an ornamental cream interlude keeps the page from
   reading as three food photos in a row. No quote button of its own either,
   the banner directly below already carries that call to action. */
.empty-state{padding:150px 48px 110px;position:relative;text-align:center}
.empty-peony-l{left:-120px;top:120px;width:min(440px,32vw);--op:.16}
.empty-peony-r{right:-120px;bottom:60px;width:min(400px,30vw);--op:.14}
.empty-inner{max-width:980px;margin:0 auto;position:relative;z-index:2}
.empty-seal{
  width:128px;height:128px;border-radius:50%;margin:0 auto 38px;position:relative;
  background:radial-gradient(circle at 35% 30%,#86202e 0%,var(--maroon) 55%,var(--maroon-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 44px rgba(62,13,20,.24);
}
.empty-seal::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(228,200,140,.55)}
.empty-seal span{font-family:'Noto Serif SC',serif;font-size:50px;color:var(--gold-light);line-height:1;transform:translateY(-2px)}
.empty-kicker{
  display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600;
}
.empty-kicker::before,.empty-kicker::after{content:"";width:48px;height:1px;background:rgba(196,156,74,.6)}
.empty-state h2{
  font-family:'Cormorant Garamond',serif;font-weight:500;text-wrap:balance;
  font-size:clamp(46px,5.6vw,88px);line-height:1.02;letter-spacing:-.01em;
}
.empty-state h2 em{font-style:italic;color:var(--maroon)}
.empty-desc{margin:26px auto 0;max-width:520px;color:var(--grey);font-size:15px;line-height:1.8;font-weight:300}
.empty-label{margin:76px 0 26px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--maroon);font-weight:600}
/* auto columns so 1, 2 or 3 entries always share the full width evenly */
.empty-cols{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border-top:1px solid rgba(196,156,74,.35);border-bottom:1px solid rgba(196,156,74,.35);
}
.empty-col{padding:38px 26px 34px}
.empty-col + .empty-col{border-left:1px solid rgba(196,156,74,.35)}
.empty-col .cjk{display:block;font-size:44px;line-height:1;margin-bottom:16px;color:var(--maroon);opacity:.85}
.empty-col h4{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;line-height:1.15;margin-bottom:8px}
.empty-col p{font-size:13px;line-height:1.7;color:var(--grey);font-weight:300;max-width:230px;margin:0 auto}
.empty-cta{margin-top:50px;display:flex;justify-content:center}

/* deco placements: offers section */
.offers-wash{top:-120px;left:-140px;width:min(760px,58vw);--op:.85}
/* More Offers extra ornaments */
.more-wash{top:-90px;right:-120px;width:min(620px,48vw);--op:.5;z-index:0}
.more-peony{left:-140px;bottom:10%;width:min(500px,38vw);--op:.22;z-index:1}
.more-peony-2{right:-110px;top:40%;width:min(380px,30vw);--op:.17;z-index:1}

/* falling blossom field */
/* --petal-scale / --petal-op let the media query shrink and soften the
   blossoms; on small screens they also move in FRONT of the cards, because
   behind a single stacked column there is simply nowhere for them to be seen. */
.petal-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
  --petal-scale:1;--petal-op:.72}
.petal{
  position:absolute;top:0;left:0;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  will-change:transform,opacity;opacity:0;
}
.petal.b1{background-image:var(--bloom1-url)}
.petal.b2{background-image:var(--bloom2-url)}

/* ---------- promo stack panels ---------- */
.promos{max-width:1500px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.promo{
  position:sticky;top:calc(96px + var(--i)*26px);
  height:min(78vh,720px);min-height:540px;
  border-radius:8px;overflow:hidden;
  box-shadow:0 -20px 60px rgba(62,13,20,.18);
  background:var(--maroon-deep);
}
.p-bg{position:absolute;inset:0}
.p-bg img{width:100%;height:100%;object-fit:cover}
.p-bg::after{
  content:"";position:absolute;inset:0;
  /* A band across the whole left edge still dimmed dishes top to bottom. This
     is a feathered radial anchored on the copy corner instead: it darkens only
     the pocket the text actually occupies and reaches zero well before the
     centre, so the upper-left and the entire right of the frame stay clean. */
  background:radial-gradient(118% 76% at 1% 97%,
    rgba(20,5,7,.78) 0%,
    rgba(20,5,7,.56) 24%,
    rgba(20,5,7,.28) 44%,
    rgba(20,5,7,.09) 61%,
    rgba(20,5,7,0)   75%);
}
.p-frame{position:absolute;inset:14px;border:1px solid rgba(228,200,140,.28);border-radius:4px;z-index:2;pointer-events:none}
/* carries the copy where the scrim has already faded */
.p-tag,.p-content h3,.promo .p-cta{text-shadow:0 1px 3px rgba(18,4,6,.55),0 2px 22px rgba(18,4,6,.8)}
.p-index{text-shadow:0 1px 2px rgba(18,4,6,.7),0 2px 16px rgba(18,4,6,.9)}
.p-content{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:56px 64px;max-width:680px;
}
.p-index{
  position:absolute;top:44px;left:64px;
  font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--gold-light);
  letter-spacing:.3em;display:flex;align-items:center;gap:14px;
}
.p-index::after{content:"";width:44px;height:1px;background:rgba(228,200,140,.5)}
.p-badge{
  position:absolute;z-index:4;top:40px;right:48px;
  width:112px;height:112px;border-radius:50%;
  background:rgba(62,13,20,.78);backdrop-filter:blur(8px);
  border:1px solid rgba(228,200,140,.4);color:var(--gold-light);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
}
.p-badge{padding:0 8px;text-align:center}
.p-badge .big{font-size:32px;font-weight:700;line-height:1;white-space:nowrap}
.p-badge .small{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-family:'Inter',sans-serif;margin-top:5px;white-space:nowrap}
/* the word badge needs its own scale: "GIFT" is far wider than "25%" */
.p-badge.is-gift .big{font-size:22px;letter-spacing:.05em}
.p-badge.is-gift .small{font-size:9.5px;letter-spacing:.14em}
/* gold peony ornament inside each panel: sits above the photo but under the
   frame and copy. No parallax here (the panels are sticky, so a scrubbed
   translate would fight the pinning) - just a slow breathe. */
.p-peony{right:-80px;bottom:-110px;width:min(470px,34vw);z-index:1;--op:.4}
.promo:nth-child(2) .p-peony{right:auto;left:-90px;top:-130px;bottom:auto;--op:.34}
.promo:nth-child(3) .p-peony{right:-100px;bottom:-90px;width:min(420px,31vw);--op:.36}
.p-tag{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:16px}
.p-content h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(36px,4vw,64px);line-height:1.04;margin-bottom:34px;color:var(--cream)}
.p-content h3 em{font-style:italic;color:var(--gold-light)}
.p-cta{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);font-weight:600;
  padding-bottom:8px;border-bottom:1px solid var(--gold);width:max-content;
  transition:color .3s;
}
.p-cta .arr{transition:transform .4s cubic-bezier(.19,1,.22,1)}
.p-cta:hover{color:var(--maroon)}
.p-cta:hover .arr{transform:translateX(8px)}
.promo .p-cta{color:var(--cream);border-bottom-color:var(--gold-light)}
.promo .p-cta:hover{color:var(--gold-light)}

/* ---------- more offers grid ---------- */
.more{background:var(--cream-2);padding:120px 48px clamp(180px,24vw,380px);position:relative;overflow:hidden}
.more .sec-head{margin-bottom:70px}
.more-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;z-index:2}
/* ink landscape watermark closing the section */
/* ink landscape as the section's own backdrop */
.more-ink{
  position:absolute;left:-4%;right:-4%;bottom:-9%;width:108%;
  z-index:0;line-height:0;pointer-events:none;
}
/* single ink landscape, brought to life with water glint + flying birds */
.more-ink{aspect-ratio:1700/795;--op:.62}
.ink-layer{
  position:absolute;inset:0;opacity:0;
  background-image:var(--garden-url);
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  mix-blend-mode:multiply;will-change:transform,opacity;
}
/* glint drifting across the water in the lower third of the painting */
.ink-water{
  position:absolute;left:-50%;right:-50%;bottom:7%;height:20%;width:200%;
  opacity:0;pointer-events:none;
  background:repeating-linear-gradient(96deg,
    rgba(255,255,255,0) 0 90px,
    rgba(255,255,255,.55) 130px 190px,
    rgba(255,255,255,0) 240px 400px);
  filter:blur(3px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 62%,transparent),
                     linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 40%,#000 62%,transparent),
             linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-composite:intersect;
  will-change:transform,opacity;
}
/* Mist banks. Painted in the section's own cream so wherever the fog thickens
   the ink recedes toward the background, exactly the way haze behaves.
   This sits last in the DOM, so it drifts IN FRONT of the birds. */
.ink-mist{
  position:absolute;left:0;right:0;bottom:0;height:64%;
  pointer-events:none;opacity:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 100%);
}
.mist-band{
  position:absolute;top:0;left:-60%;width:220%;height:100%;
  will-change:transform,opacity;
  filter:blur(16px);
}
.mist-band.m1{
  background:
    radial-gradient(ellipse 22% 46% at 14% 62%,rgba(242,234,218,.95),rgba(242,234,218,0) 70%),
    radial-gradient(ellipse 18% 38% at 42% 52%,rgba(242,234,218,.80),rgba(242,234,218,0) 72%),
    radial-gradient(ellipse 26% 44% at 74% 66%,rgba(242,234,218,.92),rgba(242,234,218,0) 68%);
}
.mist-band.m2{
  background:
    radial-gradient(ellipse 30% 34% at 28% 78%,rgba(242,234,218,.85),rgba(242,234,218,0) 74%),
    radial-gradient(ellipse 22% 30% at 62% 70%,rgba(242,234,218,.75),rgba(242,234,218,0) 76%),
    radial-gradient(ellipse 28% 36% at 92% 80%,rgba(242,234,218,.8),rgba(242,234,218,0) 70%);
  filter:blur(24px);
}

/* a skein of birds echoing the one already painted near the blossom branch.
   They fly low over the lake: the sky at the top of the painting sits behind
   the offer cards, so anything up there would never be seen. */
/* Colour and blending sampled from Garden.png itself: #9D9481 is the raw tone
   of its darkest ink strokes, and multiply is the same blend the painting uses,
   so the birds sit in the artwork instead of on top of it. */
.ink-birds{position:absolute;left:0;top:0;pointer-events:none;color:#9D9481;
  mix-blend-mode:multiply;opacity:0;will-change:transform,opacity}
.bird{position:absolute;left:0;top:0;overflow:visible;will-change:transform}
.m-card{
  background:rgba(252,249,243,.82);backdrop-filter:blur(3px);border:1px solid rgba(110,24,36,.1);border-radius:2px;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s;
}
.m-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(62,13,20,.12)}
.m-card .m-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.m-card .m-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.m-card:hover .m-img img{transform:scale(1.06)}
/* .m-card sets its own display:flex, which otherwise outranks the browser's
   default [hidden]{display:none} rule at equal specificity, so cards queued
   up behind "Load More" need this explicit override to actually stay hidden. */
.m-card[hidden]{display:none}
.more-load-wrap{display:flex;justify-content:center;margin-top:56px;position:relative;z-index:2}
.more-load-btn{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-family:'Inter',sans-serif;background:transparent;color:var(--maroon);
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  padding:19px 44px;border:1px solid rgba(110,24,36,.3);border-radius:100px;
  transition:border-color .3s,background .3s;
}
.more-load-btn:hover{border-color:var(--maroon);background:rgba(110,24,36,.06)}
.more-load-btn[hidden]{display:none}
.m-chip{
  position:absolute;top:16px;left:16px;z-index:2;
  background:rgba(62,13,20,.85);backdrop-filter:blur(6px);color:var(--gold-light);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:8px 16px;border-radius:100px;
}
.m-body{padding:30px 30px 34px;display:flex;flex-direction:column;flex:1}
.m-cat{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--maroon);font-weight:600;margin-bottom:12px}
.m-body h4{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;line-height:1.15;margin-bottom:12px}
.m-body p{font-size:13.5px;line-height:1.75;color:#6B5B51;font-weight:300;margin-bottom:22px;flex:1}
.m-link{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);font-weight:600;width:max-content;
}
.m-link .arr{transition:transform .4s cubic-bezier(.19,1,.22,1);color:var(--gold)}
.m-link:hover{color:var(--maroon)}
.m-link:hover .arr{transform:translateX(6px)}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(43,18,13,.62);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:32px;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
  background:var(--cream);border-radius:4px;max-width:960px;width:100%;
  max-height:88vh;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;
  transform:translateY(48px) scale(.97);transition:transform .5s cubic-bezier(.19,1,.22,1);
  box-shadow:0 50px 120px rgba(30,8,10,.45);position:relative;
}
.modal-overlay.open .modal{transform:none}
.modal-media{position:relative;min-height:340px}
.modal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(30,8,10,0) 55%,rgba(30,8,10,.45))}
.modal-media .m-chip{top:20px;left:20px}
.modal-body{padding:52px 48px 44px;overflow-y:auto;position:relative;display:flex;flex-direction:column}
.modal-peony{position:absolute;right:-135px;bottom:-105px;width:425px;opacity:.26;z-index:0;pointer-events:none}
.modal-peony img{display:block;width:100%;height:auto;transform:rotate(6deg)}
/* `margin:auto 0` centres the block vertically without the top-clipping that
   justify-content:center causes once the content is taller than the column.
   Note the :not() - a bare `.modal-body>*` rule was overriding the peony's
   position:absolute, dropping it into the flow and pushing everything down. */
.modal-inner{margin:auto 0;width:100%;position:relative;z-index:2}
.modal-body>*:not(.modal-peony){position:relative;z-index:2}
.modal-close{
  position:absolute;top:18px;right:18px;z-index:5;width:42px;height:42px;border-radius:50%;
  background:rgba(250,246,238,.92);border:1px solid rgba(110,24,36,.15);color:var(--maroon);
  font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .3s,background .3s;line-height:1;
}
.modal-close:hover{transform:rotate(90deg);background:var(--gold-light)}
.modal-cat{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--maroon);font-weight:600;margin-bottom:14px}
.modal-body h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(30px,3vw,42px);line-height:1.08;margin-bottom:8px}
.modal-body h3 em{font-style:italic;color:var(--maroon)}
.modal-validity{
  display:inline-flex;align-items:center;gap:10px;margin:14px 0 26px;
  background:rgba(196,156,74,.14);border:1px solid rgba(196,156,74,.4);
  color:#8A6A28;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:9px 18px;border-radius:100px;
}
.modal-validity::before{content:"◷";font-size:14px}
.modal-sec{margin-bottom:28px}
.modal-sec h5{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:12px;
}
.modal-sec h5::after{content:"";flex:1;height:1px;background:rgba(196,156,74,.3)}
.modal-sec p{font-size:14px;line-height:1.85;color:#5A4C43;font-weight:300}
.modal-sec ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.modal-sec ul li{font-size:13px;line-height:1.7;color:var(--grey);font-weight:300;display:flex;gap:10px}
.modal-sec ul li::before{content:"—";color:var(--gold);flex-shrink:0}
.modal-actions{display:flex;gap:16px;align-items:center;margin-top:6px}
.btn-maroon{
  display:inline-block;text-decoration:none;background:var(--maroon);color:var(--gold-light);
  white-space:nowrap;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  padding:16px 36px;border-radius:100px;transition:background .3s,transform .3s;
}
.btn-maroon:hover{background:var(--maroon-deep);transform:translateY(-2px)}
body.modal-open{overflow:hidden}

/* ---------- banner cta ---------- */
.banner{
  margin:40px 48px 0;border-radius:4px;overflow:hidden;position:relative;
  background:var(--maroon-deep);
}
.banner-bg{position:absolute;inset:0;z-index:0}
.banner-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.01);transition:transform 6s ease}
.banner:hover .banner-bg img{transform:scale(1.05)}
.banner-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(46,10,15,.87) 0%,
    rgba(46,10,15,.74) 22%,
    rgba(46,10,15,.42) 39%,
    rgba(46,10,15,.12) 52%,
    rgba(46,10,15,0)   62%);
}
.banner-frame{
  position:absolute;inset:16px;border:1px solid rgba(196,156,74,.35);
  border-radius:2px;z-index:2;pointer-events:none;
}
.banner-peony{left:-115px;bottom:-140px;width:min(600px,50vw);z-index:2;--op:.42}
.banner-inner{
  max-width:1400px;margin:0 auto;padding:120px 88px;position:relative;z-index:3;
}
.banner-content{max-width:620px}
.banner-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.banner-eyebrow .cjk{font-size:14px;color:var(--gold-light);letter-spacing:.5em}
.banner-eyebrow .line{width:48px;height:1px;background:rgba(196,156,74,.7)}
.banner-eyebrow em{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:rgba(250,246,238,.6)}
.banner .cjk-bg{
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  font-family:'Noto Serif SC',serif;font-size:clamp(160px,22vw,320px);
  color:transparent;-webkit-text-stroke:1px rgba(228,200,140,.22);
  z-index:2;user-select:none;line-height:1;
}
.banner h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(38px,5vw,76px);color:var(--cream);line-height:1.05;margin-bottom:20px}
.banner-content{text-shadow:0 2px 22px rgba(24,5,9,.7)}
.banner h2 em{font-style:italic;color:var(--gold-light)}
.banner p{color:rgba(250,246,238,.7);font-weight:300;font-size:15px;line-height:1.8;margin-bottom:44px;max-width:460px}
.banner-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn-gold{
  display:inline-block;text-decoration:none;background:var(--gold);color:var(--maroon-deep);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  padding:20px 52px;border-radius:100px;transition:background .3s,transform .3s;
}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--gold-light);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  padding:19px 40px;border:1px solid rgba(196,156,74,.55);border-radius:100px;
  transition:border-color .3s,background .3s;
}
.btn-ghost:hover{border-color:var(--gold-light);background:rgba(196,156,74,.12)}

/* ---------- footer ---------- */
footer{margin-top:140px;background:var(--maroon-deep);color:var(--cream);padding:90px 48px 40px;position:relative;overflow:hidden}
.foot-peony{right:-95px;top:-80px;width:min(520px,42vw);z-index:0;--op:.3}
.foot-grid,.foot-base{position:relative;z-index:2}
.foot-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;padding-bottom:70px;border-bottom:1px solid rgba(228,200,140,.15)}
.foot-brand .logo{margin-bottom:20px}
.foot-brand .logo .logo-hybrid{width:max-content}
.foot-brand .logo img{height:82px;width:auto;display:block}
.foot-brand p{color:rgba(250,246,238,.55);font-weight:300;font-size:14px;line-height:1.8;max-width:320px}
.foot-col h4{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-bottom:22px}
.foot-col a{display:block;color:rgba(250,246,238,.7);text-decoration:none;font-size:14px;font-weight:300;margin-bottom:12px;transition:color .3s}
.foot-col a:hover{color:var(--gold-light)}
.foot-base{max-width:1400px;margin:0 auto;padding-top:32px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:rgba(250,246,238,.4);font-size:12px;letter-spacing:.06em}
/* Legal links (Terms & Conditions / Privacy Policy) render as real <a> tags
   now that they come from the footer_legal_links field, previously this was
   plain text with no links at all, so there was never a style for it and
   browsers fall back to default blue/underlined link colors. */
.foot-base a{color:inherit;text-decoration:none;transition:color .3s}
.foot-base a:hover{color:var(--gold-light)}

/* ---------- reveal ---------- */
.js-anim .reveal{opacity:0}

/* ---------- responsive ---------- */
@media(max-width:960px){
  :root{--bar-h:36px}
  .marquee-track span{font-size:12px;gap:13px;padding:0 15px}
  .marquee-track span::after{width:8px;height:8px}
  nav{padding:20px 24px}
  nav.scrolled{padding:12px 24px}
  .nav-links{display:none}
  .section{padding:90px 24px}
  .hero-inner{padding:0 24px}
  .hero-bottom{padding-bottom:80px}
  .promos{gap:24px}
  .promo{position:relative;top:auto;height:auto;min-height:0}
  .p-content{padding:200px 26px 40px;max-width:none}
  .p-index{top:28px;left:26px}
  .p-badge{top:24px;right:22px;width:86px;height:86px;padding:0 6px}
  .p-badge .big{font-size:23px}
  .p-badge .small{font-size:8.5px;letter-spacing:.14em;margin-top:3px}
  .p-badge.is-gift .big{font-size:16px;letter-spacing:.03em}
  .p-badge.is-gift .small{font-size:8px;letter-spacing:.1em}
  .p-bg::after{background:linear-gradient(180deg,rgba(20,5,7,0) 0%,rgba(20,5,7,0) 36%,rgba(20,5,7,.34) 55%,rgba(20,5,7,.78) 76%,rgba(20,5,7,.88) 100%)}
  .more{padding:80px 24px clamp(215px,62vw,330px)}
  .more-grid{grid-template-columns:1fr;gap:24px}
  .petal-field{z-index:3;--petal-scale:.6;--petal-op:.34}
  .modal-peony,.more-peony-2{display:none}
  /* Desktop pushes these blooms far off-edge; at phone widths that offset is
     larger than the bloom itself, so they were being clipped away entirely.
     Re-sized and re-anchored so a good part of each one stays on screen. */
  .banner-peony{left:-64px;bottom:-58px;width:250px;--op:.34}
  .p-peony{right:-58px;bottom:-42px;width:235px;--op:.32}
  .promo:nth-child(2) .p-peony{left:-64px;top:-46px;right:auto;bottom:auto;width:215px;--op:.28}
  .promo:nth-child(3) .p-peony{right:-70px;bottom:-38px;width:225px;--op:.3}
  .more-wash{width:88vw;right:-150px;--op:.34}
  .more-peony{width:300px;left:-105px;--op:.17}
  .offers-wash{top:-60px;left:-120px;width:90vw;--op:.6}
  /* wider + taller so the painting lands in the open band under the cards
     instead of hiding behind them, and a touch denser to stay readable */
  .more-ink{left:-6%;right:auto;width:160%;bottom:0;--op:.66}
  .ink-water{display:none}
  .ink-birds{display:none}
  .ink-mist{height:52%}
  .foot-peony{width:290px;right:-78px;top:-34px;--op:.3}
  .modal{grid-template-columns:1fr;max-height:92vh;overflow-y:auto}
  .modal-media{min-height:220px;height:220px}
  .modal-body{padding:36px 26px 32px}
  /* side by side these two squeeze each other into wrapped lines; stacked,
     the primary action gets the full width and the secondary sits under it */
  /* the validity tag: 12px at .14em tracking needs 328px but only 274px are
     available, so it wrapped with the clock icon stranded mid-block. Tighter
     type brings it back to one line, and if a longer real date does wrap the
     icon now rides the first line instead of floating. */
  .modal-validity{
    font-size:10.5px;letter-spacing:.07em;gap:8px;padding:9px 15px;
    align-items:flex-start;line-height:1.55;text-align:left;border-radius:16px;
  }
  .modal-validity::before{font-size:12px;line-height:1.55}
  .modal-actions{flex-direction:column;align-items:stretch;gap:16px}
  .modal-actions .btn-maroon{text-align:center;padding:17px 24px}
  .modal-actions .p-cta{width:max-content;margin:2px auto 0}
  .banner{margin:20px 24px 0}
  .banner-inner{padding:80px 28px}
  .banner .cjk-bg{display:none}
  .banner-bg::after{background:linear-gradient(180deg,rgba(62,13,20,.95) 0%,rgba(62,13,20,.85) 100%)}
  .foot-grid{grid-template-columns:1fr;gap:44px}
  /* empty state: columns stack, so the dividers turn horizontal */
  .empty-state{padding:90px 24px 100px}
  .empty-seal{width:104px;height:104px;margin-bottom:30px}
  .empty-seal span{font-size:40px}
  .empty-label{margin-top:52px}
  .empty-cols{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
  .empty-col{padding:28px 22px 26px}
  .empty-col + .empty-col{border-left:0;border-top:1px solid rgba(196,156,74,.35)}
  .empty-peony-l,.empty-peony-r{display:none}
}