@import url("tokens.css");

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  background:var(--surface-page);
  color:var(--text-primary);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

/* ---- Primitives ---- */
.display{font-family:var(--font-display);font-weight:400;line-height:1;letter-spacing:-0.01em;}
.eyebrow{font-size:var(--type-label);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:200;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--page-gutter);}
.nav--dark{background:var(--surface-dark);}
.nav--light{background:var(--surface-page);}
.wordmark{line-height:1;}
.wordmark svg{height:1.6rem;width:auto;display:block;}
.nav--dark .wordmark,.nav--dark .nav__link,.nav--dark .nav__rooms,.nav--dark .nav__menu-btn{color:var(--text-inverse);}
.nav--light .wordmark,.nav--light .nav__link,.nav--light .nav__rooms,.nav--light .nav__menu-btn{color:var(--text-primary);}
.nav__links{display:flex;align-items:center;gap:36px;}
.nav__link,.nav__rooms{font-size:var(--type-body-m);font-weight:500;transition:opacity .2s ease;background:none;border:none;padding:0;cursor:pointer;}
.nav__rooms{display:inline-flex;align-items:center;gap:6px;}
.nav__link:hover,.nav__rooms:hover{opacity:.65;}

/* Rooms dropdown — hover-triggered panel with two mini room cards.
   Dark panel on both nav variants (linen lockups need dark backing to be legible). */
.nav__rooms-wrap{position:relative;}
.nav__rooms .nav__rooms svg,.nav__rooms svg{transition:transform .2s ease;}
.nav__rooms-wrap.is-open .nav__rooms svg{transform:rotate(180deg);}
.nav__dropdown{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;width:min(560px,calc(100vw - 40px));background:var(--surface-dark);border-radius:var(--radius-lg);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px;box-shadow:0 24px 48px color-mix(in srgb,#000 40%,transparent),0 4px 12px color-mix(in srgb,#000 24%,transparent);opacity:0;filter:blur(6px);transform:translateY(-8px);transform-origin:top center;pointer-events:none;transition:opacity .28s cubic-bezier(.2,0,.1,1),filter .28s cubic-bezier(.2,0,.1,1),transform .28s cubic-bezier(.2,0,.1,1);z-index:200;}
.nav__rooms-wrap.is-open .nav__dropdown{opacity:1;filter:blur(0);transform:translateY(0);pointer-events:auto;}
.nav__room{display:flex;flex-direction:column;gap:14px;padding:22px 20px;border-radius:var(--radius-card);background:color-mix(in srgb,var(--colour-linen) 4%,transparent);color:var(--colour-linen);transition:background .2s ease,translate .2s ease;}
.nav__room:hover{background:color-mix(in srgb,var(--colour-linen) 10%,transparent);translate:0 -2px;}
.nav__room--wash:hover{background:color-mix(in srgb,var(--dusk-denim-400) 22%,transparent);}
.nav__room--cafe:hover{background:color-mix(in srgb,var(--colour-prune) 30%,transparent);}
.nav__room-lockup{display:flex;align-items:center;height:44px;}
.nav__room-lockup img{max-height:100%;width:auto;display:block;}
.nav__room-teaser{font-size:var(--type-body-s);line-height:1.45;color:color-mix(in srgb,var(--colour-linen) 78%,transparent);max-width:200px;}
.nav__room-cta{font-weight:500;font-size:var(--type-body-s);color:var(--colour-linen);margin-top:auto;}

/* ---- Hero ---- */
.hero{background:var(--linen-400);padding-block:var(--section-pad-hero);padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:40px;position:relative;overflow:hidden;}
/* On page load: spiral pattern eases in first, then the image, then the headline text.
   Elements start hidden and are drawn in with CSS keyframes on staggered delays. */
.hero__spiral{position:absolute;top:50%;left:50%;width:200%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;pointer-events:none;animation:hero-spiral-in 1.1s cubic-bezier(.2,0,.1,1) 0s forwards;}
.hero__spiral img{width:100%;height:100%;}
.hero__headline{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;flex-wrap:wrap;position:relative;z-index:1;opacity:0;animation:hero-content-in 1s cubic-bezier(.2,0,.1,1) .7s forwards;}
.hero__title{font-size:var(--type-display-statement);color:var(--text-primary);}
.hero__intro{font-weight:500;font-size:1.375rem;line-height:1.45;color:var(--text-secondary);max-width:420px;}
.hero__image{width:100%;aspect-ratio:1200/480;border-radius:var(--radius-lg);overflow:hidden;position:relative;z-index:1;opacity:0;animation:hero-content-in 1s cubic-bezier(.2,0,.1,1) .35s forwards;}
@keyframes hero-spiral-in{from{opacity:0}to{opacity:.03}}
@keyframes hero-content-in{from{opacity:0;transform:translateY(16px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* ---- Image slot placeholder ---- */
.slot{width:100%;height:100%;display:flex;align-items:flex-start;background-size:cover;background-position:center;overflow:hidden;}
.slot--warm{background:color-mix(in srgb,var(--colour-elm-grey) 35%,transparent);}
.slot--dark{background:var(--surface-dark);}
.slot__label{font-size:var(--type-body-s);color:var(--text-muted);padding:24px;}

/* ---- Our Rooms ---- */
.rooms{background:var(--surface-card);padding-block:var(--section-pad) 40px;padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:40px;}
.rooms__heading{font-size:var(--type-display-hero);color:var(--text-primary);}
/* Sticky stack: each card pins below the nav; the later card (cafe) rides up and
   covers the earlier one (wash). padding-bottom buys scroll room so the finished
   stack lingers a moment before the section releases. */
.rooms__cards{display:flex;flex-direction:column;gap:40px;padding-bottom:8vh;}

/* ---- Room card ---- */
.card{position:sticky;top:var(--stack-top,calc(var(--nav-height) + 24px));display:block;width:100%;aspect-ratio:1200/640;border-radius:var(--radius-lg);transform-origin:50% 0;will-change:transform;}
.card--wash{z-index:1;}
.card--cafe{z-index:2;}
.card__frame{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;}
.card__photo{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--surface-dark);z-index:-2;transition:transform .6s cubic-bezier(.2,0,0,1);}
.card:hover .card__photo{transform:scale(1.03);}
.card__overlay{position:absolute;inset:0;z-index:-1;}
.card--wash .card__overlay{background:color-mix(in srgb,var(--colour-vine-black) 72%,transparent);}
.card--cafe .card__overlay{background:color-mix(in srgb,var(--prune-800) 78%,transparent);}
.card__stack{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;}
.card__lockup{width:clamp(260px,32vw,480px);height:auto;}
.card__subtitle{font-size:var(--type-body-l);color:color-mix(in srgb,var(--text-inverse) 85%,transparent);max-width:460px;}
.card__explore{font-weight:500;font-size:var(--type-body-l);color:var(--text-inverse);}
/* Outer span — the fly-in. An insect wanders in: it curves through per-tag waypoints
   (--wx1..3/--wy1..3) from a random start (--dx/--dy) before settling at 0,0.
   Lives outside .card__frame so it can drift beyond the card edge. */
.card__tag{position:absolute;white-space:nowrap;opacity:0;filter:blur(4px);translate:var(--dx,0) var(--dy,0);will-change:opacity,filter,translate;}
@keyframes firefly-fly-in{
  0%{opacity:0;filter:blur(4px);translate:var(--dx,0) var(--dy,0);}
  22%{opacity:.42;filter:blur(2.6px);translate:var(--wx1,0) var(--wy1,0);}
  50%{opacity:.78;filter:blur(1.3px);translate:var(--wx2,0) var(--wy2,0);}
  76%{opacity:.95;filter:blur(.4px);translate:var(--wx3,0) var(--wy3,0);}
  100%{opacity:1;filter:blur(0);translate:0 0;}
}
.card.tags-visible .card__tag{animation:firefly-fly-in 2.4s cubic-bezier(.19,.62,.28,1) forwards;}
.card.tags-visible .card__tag:nth-child(2){animation-delay:.2s;animation-duration:2.4s;}
.card.tags-visible .card__tag:nth-child(3){animation-delay:.65s;animation-duration:2.7s;}
.card.tags-visible .card__tag:nth-child(4){animation-delay:1.1s;animation-duration:2.3s;}
/* Inner pill — the visible chip + the idle firefly bob (translate animation, decoupled from the fly-in above). */
.card__tag-pill{display:inline-block;padding:10px 18px;border-radius:100px;font-size:var(--type-body-s);font-weight:500;border:1px solid;box-shadow:0 6px 22px color-mix(in srgb,var(--colour-vine-black) 26%,transparent);scale:1;transition:background 1.5s ease,box-shadow 1.5s ease,border-color 1.5s ease,color 1.5s ease,scale 1.5s ease;}
@keyframes firefly-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.card.tags-visible .card__tag-pill{animation:firefly-bob 6.5s cubic-bezier(.37,0,.63,1) infinite;}
.card.tags-visible .card__tag:nth-child(2) .card__tag-pill{animation-delay:.6s;animation-duration:6s;}
.card.tags-visible .card__tag:nth-child(3) .card__tag-pill{animation-delay:1s;animation-duration:7s;}
.card.tags-visible .card__tag:nth-child(4) .card__tag-pill{animation-delay:1.4s;animation-duration:6.3s;}
.card--wash .card__tag-pill{background:color-mix(in srgb,var(--dusk-denim-200) 62%,transparent);border-color:color-mix(in srgb,var(--dusk-denim-100) 70%,transparent);color:var(--text-inverse);}
.card--cafe .card__tag-pill{background:color-mix(in srgb,var(--colour-linen) 30%,transparent);border-color:color-mix(in srgb,var(--colour-linen) 70%,transparent);color:var(--text-inverse);}

/* Firefly signal — JS lights ONE visible tag at a time via .is-glowing.
   Fast bloom on (0.28s), slow decay off (1.5s base transition above) = real flash shape.
   Text flips to vine-black so it stays legible against the warm glow. */
.card__tag.is-glowing .card__tag-pill{
  transition-duration:.28s;
  scale:1.04;
  color:var(--colour-vine-black);
  background:color-mix(in srgb,#ffd483 90%,transparent);
  border-color:color-mix(in srgb,#ffe4a8 88%,transparent);
  box-shadow:0 0 10px 2px color-mix(in srgb,#ffd483 72%,transparent),
             0 0 30px 10px color-mix(in srgb,#ffcf6b 42%,transparent),
             0 6px 22px color-mix(in srgb,var(--colour-vine-black) 20%,transparent);
}

/* ---- Manifesto ---- */
.manifesto{background:#fcf1d0;padding-block:clamp(72px,8vw,96px);padding-inline:var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:80px;}
.manifesto__copy{display:flex;flex-direction:column;gap:56px;max-width:620px;flex:1;}
.manifesto__hook{display:flex;flex-direction:column;gap:4px;}
.manifesto__hook-line{font-size:var(--type-display-hero);color:var(--text-primary);}
.manifesto__body{font-size:1.375rem;font-weight:300;line-height:1.55;color:var(--text-secondary);}
.manifesto__closing{display:flex;flex-direction:column;gap:20px;}
.manifesto__eko{font-size:var(--type-heading-l);color:var(--text-primary);}
.manifesto__link{font-weight:500;font-size:var(--type-body-m);color:var(--text-primary);width:fit-content;}
.manifesto__link:hover{opacity:.65;}
.manifesto__illustration{width:500px;aspect-ratio:500/626;flex-shrink:0;}
.manifesto__illustration img{width:100%;height:100%;object-fit:contain;}

/* ---- Set to Soft ---- */
.sts{background:var(--surface-dark);padding-block:var(--section-pad-statement);padding-inline:160px;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;}
.sts__statement{font-size:var(--type-display-statement);color:var(--text-inverse);}
.sts__copy{font-size:1.75rem;font-weight:300;line-height:1.6;color:color-mix(in srgb,var(--text-inverse) 75%,transparent);max-width:880px;}

/* ---- Visit ---- */
.visit{background:var(--surface-page);display:flex;align-items:stretch;justify-content:space-between;}
.visit__info{flex:1;display:flex;flex-direction:column;gap:36px;padding:120px 80px 120px var(--page-gutter);max-width:700px;}
.visit__title{font-size:var(--type-heading-l);color:var(--text-primary);}
.visit__group{display:flex;flex-direction:column;gap:8px;}
.visit__group p{font-size:var(--type-body-l);color:var(--text-primary);}
.visit__link{font-weight:500;font-size:var(--type-body-m);color:var(--text-primary);width:fit-content;}
.visit__link:hover{opacity:.65;}
.visit__photo{width:620px;flex-shrink:0;}

/* ---- Footer ---- */
.footer{background:var(--surface-dark);color:var(--text-inverse);padding-inline:var(--page-gutter);padding-block:72px 40px;}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap;}
.footer__columns{display:flex;gap:72px;flex-wrap:wrap;}
.footer__column{display:flex;flex-direction:column;gap:12px;}
.footer__head{font-size:var(--type-label);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;opacity:.5;margin-bottom:2px;}
.footer__link{font-size:var(--type-body-s);opacity:.85;transition:opacity .2s ease;}
.footer__link:hover{opacity:1;}
.footer__rule{height:1px;background:var(--text-inverse);opacity:.15;margin-block:48px;}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;}
.footer__tagline{font-weight:300;font-size:var(--type-body-s);opacity:.6;}
/* Word-flip on the "Set to Soft." statement: "Set to ___" blurs out (up) and the next
   word blurs in (from below). Base = in-transition (slow, soft); .is-out = quick exit;
   .is-pre = instant jump below. */
.flipword{display:inline-block;text-transform:capitalize;color:var(--colour-linen);transition:opacity .46s cubic-bezier(.16,1,.3,1),filter .46s cubic-bezier(.16,1,.3,1),transform .46s cubic-bezier(.16,1,.3,1);will-change:opacity,filter,transform;}
.flipword.is-out{opacity:0;filter:blur(6px);transform:translateY(-8px);transition-duration:.28s;transition-timing-function:cubic-bezier(.4,0,.2,1);}
.flipword.is-pre{opacity:0;filter:blur(6px);transform:translateY(8px);transition:none;}

/* --- Set-to-Soft statement: "Set to ___." flips inline; the flip-wrap animates its
   width so "Set to" glides fluidly as the word resizes. --gap is the surgical space
   between "Set to" and the word. --- */
.sts__statement--inline{display:inline-flex;justify-content:center;align-items:baseline;gap:.12em;max-width:100%;white-space:nowrap;}
.sts__statement--inline .flip-wrap{display:inline-block;text-align:left;white-space:nowrap;transition:width .5s cubic-bezier(.16,1,.3,1);}
.footer__copyright{font-size:var(--type-body-s);opacity:.5;}

/* ============================================================
   WASH & DRY PAGE
   ============================================================ */
/* Hero */
.wd-hero{position:relative;width:100%;height:clamp(540px,72vh,720px);overflow:hidden;background:var(--surface-dark);}
.wd-hero__photo{position:absolute;inset:0;background-size:cover;background-position:center 30%;}
.wd-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--colour-vine-black) 48%,transparent),color-mix(in srgb,var(--colour-vine-black) 62%,transparent));}
.wd-hero__lockup{position:absolute;left:8%;top:50%;transform:translateY(-50%);width:clamp(300px,40vw,560px);height:auto;}

/* Tags — light pill (gallery) + glass variant (hero) */
.wd-tag{display:inline-block;padding:8px 16px;border-radius:100px;font-size:var(--type-body-s);font-weight:500;white-space:nowrap;color:var(--text-primary);background:color-mix(in srgb,var(--dusk-denim-200) 42%,transparent);border:1px solid color-mix(in srgb,var(--dusk-denim-300) 55%,transparent);}
.wd-tag--glass{position:absolute;color:var(--text-inverse);background:color-mix(in srgb,var(--colour-vine-black) 32%,transparent);border:1px solid color-mix(in srgb,var(--colour-linen) 45%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 18px;scale:1;transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,scale .28s ease;will-change:translate,box-shadow,background;}
/* Hero firefly tags — idle bob (staggered so they don't sync) + one-at-a-time warm glow.
   `translate` and `scale` are separate CSS properties from `transform`, so they compose
   cleanly with the inline `transform: rotate(...)` on each tag. */
@keyframes wd-hero-bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.wd-hero .wd-tag--glass{animation:wd-hero-bob 5s cubic-bezier(.4,0,.6,1) infinite;}
.wd-hero .wd-tag--glass:nth-of-type(1){animation-delay:.4s;animation-duration:5.2s;}
.wd-hero .wd-tag--glass:nth-of-type(2){animation-delay:1s;animation-duration:4.6s;}
.wd-hero .wd-tag--glass:nth-of-type(3){animation-delay:1.6s;animation-duration:5.8s;}
.wd-hero .wd-tag--glass.is-glowing{
  scale:1.04;
  color:var(--colour-vine-black);
  background:color-mix(in srgb,#ffd483 90%,transparent);
  border-color:color-mix(in srgb,#ffe4a8 88%,transparent);
  box-shadow:0 0 10px 2px color-mix(in srgb,#ffd483 72%,transparent),
             0 0 30px 10px color-mix(in srgb,#ffcf6b 42%,transparent);
}

/* Intro — content is capped at content-max (not full-width). Section is position:relative +
   overflow:hidden so the badge (absolute-positioned at section bottom) is naturally clipped
   by the section boundary as it parallaxes in and out — no CSS mask needed. */
.wd-intro{position:relative;background:var(--surface-page);padding-block:var(--section-pad-info);padding-inline:var(--page-gutter);overflow:hidden;}
.wd-intro__container{position:relative;max-width:var(--content-max);margin-inline:auto;}
.wd-intro__copy{max-width:640px;}
.wd-intro__title{font-size:clamp(1.9rem,3vw,2.75rem);line-height:1.12;color:var(--text-primary);margin-bottom:28px;}
.wd-intro__body{font-size:1.125rem;line-height:1.55;color:var(--text-secondary);max-width:520px;}
/* Rotating "Spin · Dry · Repeat · Wash" badge — flush at the section's bottom-right corner
   (of the content-max column). Two layers:
   - .wd-badge__parallax carries the scroll-driven translateY (parallax)
   - .wd-badge__mark carries the scroll-driven rotation (both directions) */
.wd-badge{position:absolute;bottom:0;right:max(var(--page-gutter),calc((100vw - var(--content-max)) / 2));width:clamp(160px,18vw,240px);aspect-ratio:1;pointer-events:none;}
.wd-badge__parallax{width:100%;height:100%;will-change:transform;}
.wd-badge__mark{width:100%;height:100%;display:block;transform-origin:center;will-change:transform;}

/* Editorial gallery */
.wd-gallery{background:var(--surface-card);padding-block:var(--section-pad);padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:var(--gallery-gap);}
.wd-card{display:grid;grid-template-columns:2.35fr 1fr;gap:64px;align-items:center;max-width:var(--content-max);width:100%;margin-inline:auto;}
.wd-card--reverse{grid-template-columns:1fr 2.35fr;}
.wd-card--reverse .wd-card__media{order:2;}
.wd-card__media{aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden;}
.wd-card__media .slot{width:100%;height:100%;background-size:cover;background-position:center;}
.wd-card__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.wd-card__title{font-size:clamp(1.9rem,3vw,2.55rem);line-height:1.08;color:var(--text-primary);}
.wd-card__body{font-size:1rem;line-height:1.6;color:var(--text-secondary);}

/* What to know */
.wd-know{background:var(--surface-page);padding-block:var(--section-pad-info);padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:56px;}
.wd-know__heading{font-size:var(--type-heading-l);color:var(--text-primary);}
.wd-know__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.wd-know__item{display:flex;flex-direction:column;gap:12px;}
.wd-know__label{font-weight:600;font-size:var(--type-body-m);color:var(--text-primary);}
.wd-know__desc{font-size:var(--type-body-s);line-height:1.55;color:var(--text-secondary);max-width:240px;}

/* Close */
.wd-close{position:relative;overflow:hidden;background:var(--colour-prune);padding-block:var(--section-pad-statement);padding-inline:var(--page-gutter);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;}
.wd-close__pattern{position:absolute;inset:0;pointer-events:none;opacity:.095;display:flex;align-items:center;justify-content:center;}
.wd-close__pattern img{width:150%;max-width:none;}
.wd-close__statement{position:relative;font-size:var(--type-heading-xl);line-height:1.14;color:var(--text-inverse);}
.wd-close__link{position:relative;font-weight:500;font-size:var(--type-body-m);color:var(--text-inverse);transition:opacity .2s ease;}
.wd-close__link:hover{opacity:.72;}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,0,.1,1),transform .8s cubic-bezier(.2,0,.1,1);}
.reveal.is-in{opacity:1;transform:none;}

/* ============================================================
   CAFÉ PAGE
   ============================================================ */
/* Hero */
.cf-hero{position:relative;width:100%;height:clamp(540px,72vh,720px);overflow:hidden;background:var(--surface-dark);}
.cf-hero__photo{position:absolute;inset:0;background-size:cover;background-position:center;}
.cf-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--prune-800) 34%,transparent),color-mix(in srgb,var(--prune-800) 50%,transparent));}
.cf-hero__lockup{position:absolute;left:8%;top:50%;transform:translateY(-50%);width:clamp(300px,40vw,540px);height:auto;}

/* Tags — light pill (gallery) + glass variant (hero) */
.cf-tag{display:inline-block;padding:8px 16px;border-radius:100px;font-size:var(--type-body-s);font-weight:500;white-space:nowrap;color:var(--text-primary);background:color-mix(in srgb,var(--prune-100) 60%,transparent);border:1px solid color-mix(in srgb,var(--colour-prune) 40%,transparent);}
.cf-tag--glass{position:absolute;color:var(--text-inverse);background:color-mix(in srgb,var(--colour-vine-black) 32%,transparent);border:1px solid color-mix(in srgb,var(--colour-linen) 45%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 18px;scale:1;transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,scale .28s ease;will-change:translate,box-shadow,background;}
@keyframes cf-hero-bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.cf-hero .cf-tag--glass{animation:cf-hero-bob 5s cubic-bezier(.4,0,.6,1) infinite;}
.cf-hero .cf-tag--glass:nth-of-type(1){animation-delay:.4s;animation-duration:5.2s;}
.cf-hero .cf-tag--glass:nth-of-type(2){animation-delay:1s;animation-duration:4.6s;}
.cf-hero .cf-tag--glass:nth-of-type(3){animation-delay:1.6s;animation-duration:5.8s;}
.cf-hero .cf-tag--glass.is-glowing{scale:1.04;color:var(--colour-vine-black);background:color-mix(in srgb,#ffd483 90%,transparent);border-color:color-mix(in srgb,#ffe4a8 88%,transparent);box-shadow:0 0 10px 2px color-mix(in srgb,#ffd483 72%,transparent),0 0 30px 10px color-mix(in srgb,#ffcf6b 42%,transparent);}

/* Intro — rust/coral section with subtle coffee-cup pattern behind and the three-line statement. */
.cf-intro{position:relative;background:var(--colour-rust);padding-block:clamp(72px,10vw,112px);padding-inline:var(--page-gutter);overflow:hidden;}
.cf-intro__pattern{position:absolute;inset:0;background:url('../images/cafe-intro-pattern.png') center/cover no-repeat;opacity:.20;pointer-events:none;}
.cf-intro__inner{position:relative;max-width:var(--content-max);margin-inline:auto;}
.cf-intro__statement{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.18;color:var(--text-inverse);letter-spacing:-.005em;}

/* Editorial gallery */
.cf-gallery{background:var(--surface-card);padding-block:var(--section-pad);padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:var(--gallery-gap);}
.cf-card{display:grid;grid-template-columns:2.35fr 1fr;gap:64px;align-items:center;max-width:var(--content-max);width:100%;margin-inline:auto;}
.cf-card--reverse{grid-template-columns:1fr 2.35fr;}
.cf-card--reverse .cf-card__media{order:2;}
.cf-card__media{aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden;}
.cf-card__media .slot{width:100%;height:100%;background-size:cover;background-position:center;}
.cf-card__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.cf-card__title{font-size:clamp(1.9rem,3vw,2.55rem);line-height:1.08;color:var(--text-primary);}
.cf-card__body{font-size:1rem;line-height:1.6;color:var(--text-secondary);}

/* Menu */
.cf-menu{background:var(--surface-page);padding-block:var(--section-pad-info);padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:28px;max-width:var(--content-max);margin-inline:auto;}
.cf-menu__eyebrow{color:var(--text-muted);}
.cf-menu__title{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.2;color:var(--text-primary);max-width:920px;}
.cf-menu__link{font-weight:500;font-size:var(--type-body-m);color:var(--text-primary);width:fit-content;}
.cf-menu__link:hover{opacity:.65;}

/* Spin Club break — dark section. Badge sits centred (its natural design position) and
   spins horizontally on scroll like a coin standing on its edge, viewed face-on: face →
   edge → back (mirrored) → edge → face. Perspective on the wrapper gives it real depth. */
.cf-club-break{position:relative;background:var(--surface-dark);color:var(--text-inverse);padding-block:88px;padding-inline:var(--page-gutter);display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;}
.cf-club-break__caption{font-size:var(--type-body-l);color:color-mix(in srgb,var(--text-inverse) 78%,transparent);}
.cf-club-break__badge{width:clamp(200px,22vw,320px);aspect-ratio:320/250;pointer-events:none;perspective:1200px;}
.cf-club-badge__parallax{width:100%;height:100%;transform-style:preserve-3d;}
.cf-club-badge__mark{width:100%;height:100%;display:block;transform-origin:center;will-change:transform;backface-visibility:visible;}

/* Spin Club description — long serif statement */
.cf-club-desc{background:var(--surface-page);padding-block:var(--section-pad-info);padding-inline:var(--page-gutter);}
.cf-club-desc__body{max-width:var(--content-max);margin-inline:auto;font-size:clamp(1.6rem,2.4vw,2.15rem);line-height:1.28;color:var(--text-primary);letter-spacing:-.005em;}

/* How Spin Club Works — 3 columns */
.cf-club-how{background:var(--surface-page);padding-block:0 var(--section-pad-info);padding-inline:var(--page-gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:var(--content-max);margin-inline:auto;}
.cf-club-how__item{display:flex;flex-direction:column;gap:14px;}
.cf-club-how__label{font-weight:600;font-size:var(--type-body-m);color:var(--text-primary);}
.cf-club-how__desc{font-size:var(--type-body-s);line-height:1.6;color:var(--text-secondary);}

/* Spin Club Gallery — 3 photos side by side */
.cf-club-gallery{background:var(--surface-page);padding-block:0 var(--section-pad-info);padding-inline:var(--page-gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--content-max);margin-inline:auto;}
.cf-club-gallery__item{aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;}
.cf-club-gallery__item .slot{width:100%;height:100%;background-size:cover;background-position:center;}

/* Close — olive section with pattern behind */
.cf-close{position:relative;overflow:hidden;background:var(--colour-olive);padding-block:var(--section-pad-statement);padding-inline:var(--page-gutter);display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;}
.cf-close__pattern{position:absolute;inset:0;pointer-events:none;opacity:.09;display:flex;align-items:center;justify-content:center;}
.cf-close__pattern img{width:150%;max-width:none;}
.cf-close__statement{position:relative;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.24;color:var(--text-inverse);}
.cf-close__link{position:relative;font-weight:500;font-size:var(--type-body-m);color:var(--text-inverse);transition:opacity .2s ease;}
.cf-close__link:hover{opacity:.72;}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.ct-page{background:var(--surface-page);}
.ct-hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--nav-height));gap:0;}
.ct-hero__photo{background-size:cover;background-position:center;background-color:var(--surface-dark);}
.ct-hero__content{padding:clamp(72px,10vw,140px) clamp(48px,7vw,96px);display:flex;flex-direction:column;gap:32px;justify-content:center;max-width:640px;}
.ct-hero__title{font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.02;color:var(--text-primary);}
.ct-hero__body{font-size:var(--type-body-l);line-height:1.55;color:var(--text-secondary);}
.ct-cta{display:inline-block;padding:16px 32px;border-radius:100px;background:var(--surface-dark);color:var(--text-inverse);font-weight:500;font-size:var(--type-body-m);width:fit-content;transition:opacity .2s ease;}
.ct-cta:hover{opacity:.85;}
.ct-details{display:flex;flex-direction:column;gap:24px;margin-top:12px;}
.ct-details__group{display:flex;flex-direction:column;gap:6px;}
.ct-details__group .eyebrow{color:var(--text-muted);}
.ct-details__group p{font-size:var(--type-body-m);color:var(--text-primary);}

/* ============================================================
   VISIT PAGE
   ============================================================ */
.vs-hero{position:relative;height:clamp(480px,72vh,700px);overflow:hidden;background:var(--surface-dark);}
.vs-hero__photo{position:absolute;inset:0;background-size:cover;background-position:center;}
.vs-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--colour-vine-black) 12%,transparent) 0%,color-mix(in srgb,var(--colour-vine-black) 20%,transparent) 45%,color-mix(in srgb,var(--colour-vine-black) 52%,transparent) 100%);}
.vs-hero__title{position:absolute;left:var(--page-gutter);bottom:clamp(60px,8vw,120px);font-size:clamp(3rem,6vw,5.5rem);line-height:1;color:var(--colour-linen);z-index:1;text-shadow:0 2px 24px color-mix(in srgb,var(--colour-vine-black) 32%,transparent);}
.vs-info{background:var(--surface-page);padding-block:clamp(72px,10vw,140px);padding-inline:var(--page-gutter);}
.vs-info__cols{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:var(--content-max);margin-inline:auto;align-items:start;}
.vs-info__col{display:flex;flex-direction:column;gap:36px;}
.vs-info__group{display:flex;flex-direction:column;gap:6px;}
.vs-info__group .eyebrow{color:var(--text-muted);margin-bottom:4px;}
.vs-info__group p{font-size:var(--type-body-m);color:var(--text-primary);}
.vs-info__photo{aspect-ratio:5/4;border-radius:var(--radius-lg);background-size:cover;background-position:center;background-color:var(--surface-dark);}
.vs-inline-link{color:var(--text-primary);border-bottom:1px solid currentColor;}
.vs-map{background:var(--colour-elm-grey);height:clamp(300px,42vh,480px);}
.vs-notes{background:var(--surface-page);padding-block:clamp(60px,8vw,112px);padding-inline:var(--page-gutter);display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:var(--content-max);margin-inline:auto;}
.vs-notes__col{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.vs-notes__title{font-size:var(--type-heading-m);color:var(--text-primary);}
.vs-notes__body{font-size:var(--type-body-m);line-height:1.65;color:var(--text-secondary);}
.vs-notes__link{font-weight:500;font-size:var(--type-body-m);color:var(--text-primary);}
.vs-notes__link:hover{opacity:.65;}

/* ============================================================
   JOURNAL PAGE
   ============================================================ */
.jn-page{background:var(--surface-page);}
.jn-hero{padding-block:clamp(72px,9vw,120px) clamp(48px,6vw,80px);padding-inline:var(--page-gutter);max-width:var(--content-max);margin-inline:auto;display:flex;flex-direction:column;gap:20px;}
.jn-hero__title{font-size:clamp(3rem,6.5vw,5.5rem);color:var(--text-primary);line-height:1;}
.jn-hero__intro{font-size:var(--type-body-l);color:var(--text-secondary);max-width:720px;line-height:1.55;}
.jn-featured{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;max-width:var(--content-max);margin:0 auto clamp(72px,10vw,140px);padding-inline:var(--page-gutter);padding-block:0;}
.jn-featured__photo{aspect-ratio:5/4;border-radius:var(--radius-lg);background-size:cover;background-position:center;background-color:var(--surface-dark);}
.jn-featured__copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.jn-featured__copy .eyebrow{color:var(--text-muted);}
.jn-featured__title{font-size:clamp(2rem,3.2vw,2.8rem);color:var(--text-primary);line-height:1.1;}
.jn-featured__date{font-size:var(--type-body-s);color:var(--text-secondary);}
.jn-featured__cta,.jn-entry__cta{font-weight:500;font-size:var(--type-body-m);color:var(--text-primary);margin-top:6px;}
.jn-featured:hover .jn-featured__cta,.jn-entry:hover .jn-entry__cta{opacity:.65;}
.jn-grid{max-width:var(--content-max);margin:0 auto;padding-inline:var(--page-gutter);padding-block:0 clamp(72px,10vw,140px);display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.jn-entry{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.jn-entry__photo{width:100%;aspect-ratio:5/4;border-radius:var(--radius-card);background-size:cover;background-position:center;background-color:var(--surface-dark);margin-bottom:6px;}
.jn-entry__meta{font-size:var(--type-body-s);color:var(--text-muted);}
.jn-entry__title{font-size:clamp(1.4rem,2vw,1.8rem);color:var(--text-primary);line-height:1.15;}
.jn-entry__excerpt{font-size:var(--type-body-m);color:var(--text-secondary);line-height:1.6;}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.ar-page{background:var(--surface-page);}
.ar-hero{width:100%;height:clamp(400px,60vh,600px);}
.ar-hero__photo{width:100%;height:100%;background-size:cover;background-position:center;}
.ar-header{max-width:var(--reading-max);margin:0 auto;padding-block:clamp(48px,7vw,88px) 20px;padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:14px;}
.ar-back{font-size:var(--type-body-s);color:var(--text-muted);align-self:flex-start;transition:opacity .2s ease;}
.ar-back:hover{opacity:.6;color:var(--text-primary);}
.ar-meta{font-size:var(--type-body-s);color:var(--text-muted);}
.ar-title{font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.05;color:var(--text-primary);margin-top:8px;}
.ar-body{max-width:var(--reading-max);margin:0 auto;padding-block:24px;padding-inline:var(--page-gutter);display:flex;flex-direction:column;gap:24px;}
.ar-body p{font-size:var(--type-body-l);line-height:1.7;color:var(--text-primary);}
.ar-pull{padding-block:clamp(56px,7vw,88px);padding-inline:var(--page-gutter);text-align:center;max-width:var(--content-max);margin-inline:auto;}
.ar-pull__quote{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.28;color:var(--text-primary);max-width:1000px;margin-inline:auto;}
.ar-pull__cite{font-size:var(--type-body-s);color:var(--text-muted);margin-top:16px;}
.ar-image{padding-inline:var(--page-gutter);padding-block:12px clamp(24px,4vw,48px);max-width:var(--content-max);margin-inline:auto;}
.ar-image__photo{width:100%;aspect-ratio:5/2;border-radius:var(--radius-lg);background-size:cover;background-position:center;}
.ar-back-wrap{padding-block:clamp(48px,7vw,96px);padding-inline:var(--page-gutter);text-align:center;}
.ar-back-wrap .ar-back{display:inline-block;font-size:var(--type-body-m);color:var(--text-primary);}

/* ============================================================
   STORY PAGE
   ============================================================ */
.st-page{background:var(--surface-page);}

/* -------- Story choreography --------
   Line-by-line reveal (blur → sharp), sticky beats, and photo parallax. */
.st-line{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,0,.1,1),filter .9s cubic-bezier(.2,0,.1,1),transform .9s cubic-bezier(.2,0,.1,1);will-change:opacity,filter,transform;}
.st-line.is-in{opacity:1;filter:blur(0);transform:translateY(0);}
/* Parallax — outer frame stays laid out; inner div carries the moving background. */
.st-parallax-frame{position:relative;overflow:hidden;}
.st-parallax-inner{position:absolute;top:-8%;left:0;width:100%;height:116%;background-size:cover;background-position:center;will-change:transform;}
.st-hero{background:var(--linen-400);padding-block:clamp(72px,10vw,140px) clamp(48px,7vw,96px);padding-inline:var(--page-gutter);}
.st-hero__title{font-size:clamp(2.6rem,5.2vw,4.5rem);line-height:1.1;color:var(--text-primary);max-width:var(--content-max);margin-inline:auto;}
.st-poster{width:100%;height:clamp(360px,52vh,560px);}
.st-poster__photo{width:100%;height:100%;background-size:cover;background-position:center;}
.st-split{max-width:var(--content-max);margin-inline:auto;padding-block:clamp(64px,10vw,120px);padding-inline:var(--page-gutter);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.st-split--reverse{grid-template-columns:1fr 1fr;}
.st-split__copy{display:flex;flex-direction:column;gap:20px;}
.st-split__title{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.2;color:var(--text-primary);}
.st-split__hook{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--text-primary);}
.st-split__body{font-size:var(--type-body-l);line-height:1.55;color:var(--text-secondary);}
.st-split__photo{aspect-ratio:4/5;border-radius:var(--radius-lg);background-size:cover;background-position:center;background-color:var(--surface-dark);}
/* Sticky beat: section holds its own scroll length; stage pins inside for a beat. */
.st-reveal{position:relative;width:100%;background:var(--surface-dark);min-height:160vh;}
.st-reveal__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.st-reveal__photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;}
.st-reveal__statement{position:relative;font-size:clamp(2rem,4.4vw,3.4rem);color:var(--colour-linen);text-align:center;padding-inline:var(--page-gutter);}
.st-felt{position:relative;min-height:150vh;}
.st-felt__stage{position:sticky;top:0;height:100vh;padding-inline:var(--page-gutter);display:flex;flex-direction:column;justify-content:center;gap:22px;text-align:center;max-width:var(--content-max);margin-inline:auto;}
.st-felt__statement{font-size:clamp(2rem,4vw,3rem);line-height:1.24;color:var(--text-primary);}
.st-felt__body{font-size:var(--type-body-l);line-height:1.6;color:var(--text-secondary);max-width:820px;margin-inline:auto;}
/* Tightened trailing sections — the last split ("A laundromat..."), the felt sticky beat,
   and the closing split ("Three cycles..."). Add `.st-split--tight` on those closing splits
   and `.st-felt--tight` on the felt to opt into shorter padding/hold. */
.st-split--tight{padding-block:clamp(48px,7vw,88px);gap:56px;}
.st-split--tight .st-split__copy{gap:16px;}
.st-felt--tight{min-height:90vh;}
.st-felt--tight .st-felt__stage{height:60vh;gap:18px;}
/* ---- Hamburger menu (mobile) ---- */
.nav__menu-btn{display:none;background:none;border:none;padding:0;cursor:pointer;color:inherit;width:28px;height:22px;position:relative;}
.nav__menu-btn span{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.2,0,.1,1),opacity .2s ease;}
.nav__menu-btn span:nth-child(1){top:2px;}
.nav__menu-btn span:nth-child(2){top:10px;}
.nav__menu-btn span:nth-child(3){top:18px;}
body.nav-menu-open .nav__menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg);}
body.nav-menu-open .nav__menu-btn span:nth-child(2){opacity:0;}
body.nav-menu-open .nav__menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
/* Mobile menu panel */
.nav__mobile{position:fixed;inset:0;background:var(--surface-page);z-index:150;padding:calc(var(--nav-height) + 24px) var(--page-gutter) 48px;display:flex;flex-direction:column;gap:8px;opacity:0;pointer-events:none;transition:opacity .32s cubic-bezier(.2,0,.1,1);overflow-y:auto;}
body.nav-menu-open .nav__mobile{opacity:1;pointer-events:auto;}
.nav__mobile-link{display:flex;justify-content:space-between;align-items:center;padding-block:18px;border-bottom:1px solid color-mix(in srgb,var(--colour-vine-black) 10%,transparent);font-size:1.5rem;font-weight:500;color:var(--text-primary);}
.nav__mobile-link:last-child{border-bottom:none;}
.nav__mobile-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:20px 0 4px;}

/* ---- Responsive ---- */
@media (max-width:900px){
  /* Nav: hide desktop links + Rooms button, show hamburger */
  .nav__links{display:none;}
  .nav__menu-btn{display:block;}

  .hero__headline{align-items:flex-start;gap:24px;}
  .hero__intro{font-size:1.125rem;max-width:none;}
  .hero__image{aspect-ratio:4/3;}
  .card{aspect-ratio:3/4;}
  .card__tag-pill{font-size:.75rem;padding:8px 14px;}
  .manifesto{flex-direction:column-reverse;align-items:stretch;gap:48px;}
  .manifesto__illustration{width:100%;max-width:380px;margin-inline:auto;}
  .sts{padding-inline:var(--page-gutter);}
  .sts__copy{font-size:1.25rem;}
  .visit{flex-direction:column;}
  .visit__info{padding:88px var(--page-gutter);max-width:none;}
  .visit__photo{width:100%;aspect-ratio:4/3;}
  .footer__top{flex-direction:column;gap:40px;}
  /* Wash & Dry */
  .wd-hero{height:clamp(420px,66vh,560px);}
  .wd-hero__lockup{left:50%;transform:translate(-50%,-50%);width:clamp(220px,74vw,360px);}
  .wd-badge{width:min(32vw,150px);}
  .wd-card,.wd-card--reverse{grid-template-columns:1fr;gap:24px;}
  .wd-card--reverse .wd-card__media{order:0;}
  .wd-know__grid{grid-template-columns:1fr 1fr;gap:36px 24px;}
  /* Home firefly tags — pull to safer corners, shrink, and cap fly-in offsets */
  .card__tag-pill{font-size:.7rem;padding:6px 12px;}
  .card--wash .card__tag:nth-child(2){left:auto!important;right:6%!important;top:6%!important;bottom:auto!important;--dx:36px;--dy:-14px;}
  .card--wash .card__tag:nth-child(3){left:6%!important;right:auto!important;top:auto!important;bottom:8%!important;--dx:-36px;--dy:14px;}
  .card--wash .card__tag:nth-child(4){left:auto!important;right:6%!important;top:auto!important;bottom:15%!important;--dx:20px;--dy:22px;}
  .card--cafe .card__tag:nth-child(2){left:6%!important;right:auto!important;top:6%!important;bottom:auto!important;--dx:-36px;--dy:-14px;}
  .card--cafe .card__tag:nth-child(3){left:auto!important;right:6%!important;top:auto!important;bottom:15%!important;--dx:36px;--dy:22px;}
  .card--cafe .card__tag:nth-child(4){left:6%!important;right:auto!important;top:auto!important;bottom:8%!important;--dx:-20px;--dy:22px;}
  /* Wash & Dry hero tags — corners + smaller */
  .wd-tag{padding:6px 12px;font-size:.7rem;}
  .wd-hero .wd-tag--glass:nth-of-type(1){left:auto!important;right:6%!important;top:8%!important;}
  .wd-hero .wd-tag--glass:nth-of-type(2){left:6%!important;top:66%!important;}
  .wd-hero .wd-tag--glass:nth-of-type(3){left:auto!important;right:6%!important;top:auto!important;bottom:10%!important;}
  /* Wash & Dry badge — smaller, tucked so it doesn't overlap the intro copy */
  .wd-badge{width:min(28vw,120px);right:16px;}
  .wd-intro__container{padding-bottom:calc(min(28vw,120px) + 24px);}
  /* Café hero tags — corners + smaller (glass variant on cafe hero) */
  .cf-hero .cf-tag--glass:nth-of-type(1){left:auto!important;right:6%!important;top:8%!important;}
  .cf-hero .cf-tag--glass:nth-of-type(2){left:6%!important;top:36%!important;}
  .cf-hero .cf-tag--glass:nth-of-type(3){left:auto!important;right:6%!important;top:auto!important;bottom:10%!important;}
  .cf-tag--glass{padding:6px 12px;font-size:.7rem;}
  /* Café */
  .cf-hero{height:clamp(420px,66vh,560px);}
  .cf-hero__lockup{left:50%;transform:translate(-50%,-50%);width:clamp(220px,74vw,360px);}
  .cf-card,.cf-card--reverse{grid-template-columns:1fr;gap:24px;}
  .cf-card--reverse .cf-card__media{order:0;}
  .cf-club-how{grid-template-columns:1fr;gap:32px;}
  .cf-club-gallery{grid-template-columns:1fr;gap:16px;}
  .cf-club-break{padding-block:112px 72px;}
  /* Contact */
  .ct-hero{grid-template-columns:1fr;min-height:auto;}
  .ct-hero__photo{aspect-ratio:4/3;}
  /* Visit */
  .vs-info__cols{grid-template-columns:1fr;gap:48px;}
  .vs-notes{grid-template-columns:1fr;gap:48px;}
  /* Journal */
  .jn-featured{grid-template-columns:1fr;gap:24px;}
  .jn-grid{grid-template-columns:1fr;gap:48px;}
  /* Article */
  .ar-image__photo{aspect-ratio:4/3;}
  /* Story */
  .st-split,.st-split--reverse{grid-template-columns:1fr;gap:32px;}
  .st-split--reverse .st-split__photo{order:0;}
  /* Rooms dropdown — stack on mobile */
  .nav__dropdown{width:min(320px,calc(100vw - 24px));grid-template-columns:1fr;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .hero__spiral img{animation:none;}
  /* Show hero elements at their final state, no fade-in. */
  .hero__spiral{opacity:.03;}
  .hero__headline,.hero__image{opacity:1;transform:none;filter:none;}
}

/* ================================================================
   WAITLIST PAGE
   ================================================================ */

/* Hero — full-bleed photo with vine overlay, giant type on top. */
.wl-hero{position:relative;min-height:78vh;padding-inline:var(--page-gutter);padding-block:calc(var(--nav-height) + 72px) 88px;display:flex;align-items:flex-end;overflow:hidden;color:var(--text-inverse);}
.wl-hero__photo{position:absolute;inset:0;background-size:cover;background-position:center;}
.wl-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg, color-mix(in srgb, var(--colour-vine-black) 55%, transparent) 0%, color-mix(in srgb, var(--colour-vine-black) 60%, transparent) 45%, color-mix(in srgb, var(--colour-vine-black) 92%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--colour-vine-black) 20%, transparent) 0%, transparent 30%, transparent 70%, color-mix(in srgb, var(--colour-vine-black) 45%, transparent) 100%);}
.wl-hero__spiral{position:absolute;right:-8%;top:-8%;width:min(55vw,640px);opacity:.05;pointer-events:none;color:var(--colour-linen);}
.wl-hero__spiral img{width:100%;height:auto;filter:invert(1);}
.wl-hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;max-width:820px;}
.wl-hero__eyebrow{color:color-mix(in srgb, var(--colour-linen) 80%, transparent);}
.wl-hero__title{font-size:var(--type-display-statement);color:var(--colour-linen);text-shadow:0 2px 24px color-mix(in srgb, var(--colour-vine-black) 40%, transparent);}
.wl-hero__lede{font-size:1.375rem;font-weight:300;line-height:1.5;color:color-mix(in srgb, var(--colour-linen) 88%, transparent);max-width:560px;}

/* Form section — two-column, narrative + card. */
.wl-form-section{padding-inline:var(--page-gutter);padding-block:var(--section-pad-info);background:var(--surface-page);}
.wl-form-section__inner{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start;max-width:1280px;margin:0 auto;position:relative;}

.wl-narrative{display:flex;flex-direction:column;gap:24px;position:sticky;top:calc(var(--nav-height) + 40px);}
.wl-narrative__title{font-size:var(--type-heading-xl);color:var(--text-primary);}
.wl-narrative__body{font-size:1.125rem;font-weight:300;line-height:1.6;color:var(--text-secondary);max-width:440px;}
.wl-narrative__note{font-size:var(--type-body-m);color:var(--text-muted,var(--vine-black-300));font-style:italic;margin-top:8px;}

.wl-form{display:flex;flex-direction:column;gap:24px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:40px;box-shadow:0 24px 48px -32px color-mix(in srgb, var(--colour-vine-black) 20%, transparent);}
.wl-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.wl-form__field{display:flex;flex-direction:column;gap:10px;}
.wl-form__label{font-size:var(--type-body-s);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-secondary);}
.wl-form__optional{font-weight:400;letter-spacing:0.04em;text-transform:none;color:var(--text-muted,var(--vine-black-300));margin-left:6px;font-size:.75rem;}
.wl-form__input{font:inherit;font-size:1.0625rem;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-page);color:var(--text-primary);transition:border-color .2s ease, background .2s ease;}
.wl-form__input:focus{outline:none;border-color:var(--colour-vine-black);background:var(--colour-white,#fff);}
.wl-form__input::placeholder{color:color-mix(in srgb, var(--text-secondary) 55%, transparent);}

.wl-form__chips{display:flex;flex-wrap:wrap;gap:8px;}
.wl-form__chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border-subtle);border-radius:999px;font-size:var(--type-body-m);cursor:pointer;transition:background .2s ease, border-color .2s ease, color .2s ease;background:var(--surface-page);}
.wl-form__chip input{position:absolute;opacity:0;pointer-events:none;}
.wl-form__chip:has(input:checked){background:var(--colour-vine-black);color:var(--colour-linen);border-color:var(--colour-vine-black);}

.wl-form__submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;background:var(--colour-vine-black);color:var(--colour-linen);border-radius:10px;font-weight:600;font-size:1rem;letter-spacing:0.01em;transition:background .2s ease, transform .2s ease;margin-top:8px;}
.wl-form__submit:hover{background:color-mix(in srgb, var(--colour-vine-black) 88%, var(--colour-linen));transform:translateY(-1px);}
.wl-form__submit:disabled{opacity:.6;cursor:wait;transform:none;}
.wl-form__submit svg{transition:transform .2s ease;}
.wl-form__submit:hover svg{transform:translateX(3px);}

.wl-form__legal{font-size:var(--type-body-s);color:var(--text-muted,var(--vine-black-300));text-align:center;line-height:1.5;}
.wl-form__error{font-size:var(--type-body-s);color:#a44;background:color-mix(in srgb, #a44 12%, transparent);padding:10px 14px;border-radius:8px;}

/* Success state — replaces the form. */
.wl-success[hidden]{display:none !important;}
.wl-form[hidden]{display:none !important;}
.wl-success{display:flex;flex-direction:column;gap:20px;align-items:flex-start;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:56px 40px;text-align:left;position:relative;overflow:hidden;}
.wl-success__mark{position:absolute;right:-20%;top:-30%;width:80%;opacity:.06;pointer-events:none;}
.wl-success__mark img{width:100%;height:auto;}
.wl-success__title{font-size:var(--type-display-hero);color:var(--text-primary);position:relative;}
.wl-success__body{font-size:1.125rem;font-weight:300;line-height:1.55;color:var(--text-secondary);max-width:400px;position:relative;}
.wl-success__link{font-weight:500;font-size:var(--type-body-m);color:var(--text-primary);border-bottom:1px solid currentColor;padding-bottom:2px;position:relative;}

/* What waitlist gets first — three-column grid. */
.wl-first{padding-inline:var(--page-gutter);padding-block:var(--section-pad-info);background:var(--colour-vine-black);color:var(--colour-linen);}
.wl-first__title{font-size:var(--type-display-hero);color:var(--colour-linen);max-width:720px;margin-bottom:56px;}
.wl-first__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.wl-first__item{display:flex;flex-direction:column;gap:14px;border-top:1px solid color-mix(in srgb, var(--colour-linen) 25%, transparent);padding-top:24px;}
.wl-first__num{font-size:var(--type-body-s);font-weight:600;letter-spacing:0.08em;color:color-mix(in srgb, var(--colour-linen) 60%, transparent);}
.wl-first__label{font-size:1.375rem;font-weight:500;color:var(--colour-linen);}
.wl-first__desc{font-size:var(--type-body-m);font-weight:300;line-height:1.55;color:color-mix(in srgb, var(--colour-linen) 78%, transparent);}

/* Nav CTA emphasis */
.nav__link--cta{padding:8px 16px;border:1px solid currentColor;border-radius:999px;font-size:.8125rem;letter-spacing:.02em;transition:background .2s ease, color .2s ease;}
.nav__link--cta:hover{background:currentColor;}
.nav--dark .nav__link--cta:hover{color:var(--colour-vine-black);}
.nav--light .nav__link--cta:hover{color:var(--colour-linen);}
.nav__mobile-link--cta{font-weight:600;}

/* Waitlist — responsive */
@media (max-width:900px){
  .wl-hero{min-height:64vh;padding-block:calc(var(--nav-height) + 40px) 56px;}
  .wl-hero__title{font-size:var(--type-display-statement);}
  .wl-hero__lede{font-size:1.125rem;}
  .wl-form-section__inner{grid-template-columns:1fr;gap:48px;}
  .wl-narrative{position:static;}
  .wl-form,.wl-success{padding:28px 22px;}
  .wl-form__row{grid-template-columns:1fr;gap:24px;}
  .wl-first__grid{grid-template-columns:1fr;gap:28px;}
  .wl-first__title{font-size:var(--type-heading-xl);margin-bottom:32px;}
}