/* ═══════════════════════════════════════════════════════════════════
   DIE GROEN KAMER — Find Your Green Space
   Aesthetic: SURF & SMOKE LOUNGE. A sun-bleached timber shack on the
   Garden Route that dims down into a warm back room as the sun drops.
   The page alternates: a bright plank deck, then a dark stained-timber
   room, deck, room, all the way to the floor. Sunset orange off the
   badge does the shouting, sea-teal cools it, gold handles the small
   print, and cream is the paper everything is printed on.

   Palette is lifted straight out of the new badge artwork:
     #F67A00 sun · #268271 wave · #FEBA1A banner · #8FAF5E leaf
     #FDF6C7 cream · #000F06 the near-black green of the outline
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── the room: stained timber running to near-black green ────── */
  --forest-950: #050e07;
  --forest-900: #0a1710;
  --forest-850: #102117;
  --forest-800: #17301f;
  --forest-950-rgb: 5,14,7;
  --forest-900-rgb: 10,23,16;
  --forest-800-rgb: 23,48,31;

  /* ── the sun: the loud one, straight off the badge ───────────── */
  --sun:        #f67a00;
  --sun-lit:    #ff9421;
  --sun-deep:   #a34700;
  --sun-rgb:    246,122,0;

  /* ── the wave: the cool counterweight ────────────────────────── */
  --wave:       #268271;
  --wave-lit:   #35a48d;
  --wave-deep:  #17564a;
  --wave-rgb:   38,130,113;

  /* ── the banner: gold, for small print and hairline rules ────── */
  --gold:       #feba1a;
  --gold-rgb:   254,186,26;

  /* ── the leaf ────────────────────────────────────────────────── */
  --leaf:       #8faf5e;
  --leaf-rgb:   143,175,94;

  /* ── paper ───────────────────────────────────────────────────── */
  --cream:      #fdf6e3;
  --ivory:      #fffdf2;
  --paper:      #eadfc6;   /* the scrim laid over bare plank */

  --shell: 1240px;
  --gut: clamp(1.25rem, 5vw, 4rem);

  /* Anton carries the surf-poster headlines, Yellowtail echoes the
     retro signage script already painted into the badge, Alegreya Sans
     keeps the reading warm without going soft. */
  --f-poster: "Anton", "Haettenschweiler", Impact, sans-serif;
  --f-script: "Yellowtail", "Brush Script MT", cursive;
  --f-body: "Alegreya Sans", "Trebuchet MS", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ── ground tokens ───────────────────────────────────────────────
     Every component below reads its colour from these four inks plus
     --accent. Re-pointing them on .sec--wood / .sec--dark is what
     flips the whole page between deck and room without a single
     component rule being written twice. Defaults are the dark room. */
  --ink-hi:  var(--ivory);
  --ink:     var(--cream);
  --ink-mid: #c5bca0;
  --ink-low: #8a8169;
  --accent:     var(--sun-lit);
  --accent-rgb: var(--sun-rgb);
  --accent-2:   var(--wave-lit);
  --rule:    rgba(var(--gold-rgb),.22);
  --glow:    .45;              /* accents are self-lit in the dark */
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--forest-900);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:clamp(1.02rem,.97rem + .26vw,1.16rem);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; font-weight:400; line-height:1 }
p{ margin:0 0 1.15em }
ul,ol{ margin:0; padding:0; list-style:none }
address{ font-style:normal }

::selection{ background:var(--sun); color:var(--forest-950) }

:focus-visible{
  outline:2px solid var(--sun-lit);
  outline-offset:4px;
  border-radius:2px;
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut) }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:200;
  background:var(--sun); color:var(--forest-950);
  padding:.7rem 1.2rem; border-radius:2px; font-weight:700;
  transition:top .2s;
}
.skip:focus{ top:1rem }

/* ══════════════════════════════════════════ the ground system ═══
   .sec--wood  a sun-bleached plank deck, dark ink
   .sec--dark  the same timber stained down to near-black, cream ink
   Both lay their texture in a ::before so section content can sit
   above it without the texture bleeding through the type. */

.sec{ position:relative; isolation:isolate }
.sec > *{ position:relative; z-index:1 }
.sec::before{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background-image:url("assets/wood.webp");
  background-size:cover;
  background-position:center;
}

/* ── the deck ─────────────────────────────────────────────────── */
.sec--wood{
  --ink-hi:  #0d1a10;
  --ink:     #16261a;
  --ink-mid: #3d4a35;
  --ink-low: #6e7358;
  --accent:     var(--sun-deep);
  --accent-rgb: 163,71,0;
  --accent-2:   var(--wave-deep);
  --rule:    rgba(13,26,16,.16);
  --glow:    0;                /* nothing glows in daylight */
  color:var(--ink);
  border-block:1px solid rgba(13,26,16,.14);
}
/* the cream scrim is what makes plank photography safe to set type on */
.sec--wood::before{
  background-image:
    linear-gradient(178deg,rgba(253,247,234,.9),rgba(234,223,198,.82) 60%,rgba(226,211,180,.9)),
    url("assets/wood.webp");
  background-size:auto,cover;
  background-position:center,center;
}
/* a warm bloom where the sun would be hitting the boards */
.sec--wood::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 60% at 78% -10%,rgba(var(--sun-rgb),.13),transparent 68%);
}

/* ── the room ─────────────────────────────────────────────────── */
.sec--dark{
  color:var(--ink);
  background:var(--forest-900);
  border-block:1px solid rgba(var(--gold-rgb),.14);
}
/* same boards, stained down — keeps the two grounds related */
.sec--dark::before{
  opacity:.16;
  filter:brightness(.42) saturate(.55) sepia(.35) hue-rotate(48deg);
}
.sec--dark::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(72% 52% at 14% 0%,rgba(var(--sun-rgb),.10),transparent 66%),
    radial-gradient(66% 50% at 92% 100%,rgba(var(--wave-rgb),.16),transparent 68%);
}

/* shifting the plank crop stops five wood bands reading as one repeat */
.pillars::before{ background-position:center,left top }
.member::before{  background-position:center,right center }
.band::before{    background-position:center,center bottom }
.visit::before{   background-position:center,left bottom }

/* ────────────────────────────────────────────────── the leaf device ─── */

/* One symbol, reused everywhere: eyebrow ticks, ticker separators, list
   bullets. It is what makes the page read as cannabis almost entirely
   without stock art. The rosette is the one exception — it now carries a
   drawn leaf of its own (assets/cannabis-leaf.svg, inlined in the markup). */
.leaf-defs{ position:absolute; width:0; height:0; overflow:hidden }

.leaf{
  display:inline-block; width:1em; height:1em;
  fill:currentColor; flex:none;
  vertical-align:-.16em;
}

/* ─────────────────────────────────────────────── shared typography ─── */

.h-display{
  font-family:var(--f-poster);
  font-size:clamp(2.5rem,1.3rem + 5.2vw,5.6rem);
  line-height:.92;
  letter-spacing:.004em;
  text-transform:uppercase;
  color:var(--ink-hi);
  text-wrap:balance;
}
/* the script lines break the caps grid on purpose — that contrast is the
   whole poster idea, so they get the sun and, in the dark rooms, the glow */
.h-display em{
  display:inline-block;
  font-family:var(--f-script);
  font-style:normal;
  text-transform:none;
  font-size:.92em;
  line-height:1.24;
  letter-spacing:0;
  padding-right:.1em;
  color:var(--accent);
  text-shadow:0 0 34px rgba(var(--accent-rgb),var(--glow));
}

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:800;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.5rem;
}
.eyebrow .mark{ width:1.15rem; height:1.15rem; color:var(--accent); flex:none }
.eyebrow .mark svg{ width:100%; height:100%; fill:currentColor; display:block }

/* the display above already spends the one script line this composition
   can afford — a second one here fought it, so the lede steps down into
   the body face and carries its warmth with weight and colour instead */
.lede{
  font-family:var(--f-body);
  font-weight:700;
  font-size:clamp(1.14rem,1rem + .5vw,1.42rem);
  line-height:1.5; letter-spacing:.005em;
  color:var(--ink);
  margin:.5rem 0 1.5rem;
}

.sec-head{ max-width:46rem; margin-bottom:clamp(3rem,6vw,5.5rem) }
.sec-head--center{ margin-inline:auto; text-align:center }
.sec-head--center .eyebrow{ justify-content:center }
.sec-head__sub{
  margin-top:1.8rem; color:var(--ink-mid);
  font-size:1.06em; max-width:38rem;
}
.sec-head--center .sec-head__sub{ margin-inline:auto }

/* ───────────────────────────────────────────────────────── buttons ─── */

.btn{
  --bg:transparent; --fg:var(--ink); --bd:rgba(var(--accent-rgb),.5);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:1.05rem 1.9rem;
  font-family:var(--f-body);
  font-size:.78rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--bd);
  border-radius:999px;
  cursor:pointer;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease),
             transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.btn::before{                       /* sunset wipe rises from the base */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--sun-lit),var(--sun));
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0) }
.btn:hover,.btn:focus-visible{
  color:var(--forest-950); border-color:var(--sun-lit);
  box-shadow:0 0 30px -6px rgba(var(--sun-rgb),.5);
}
.btn:active{ transform:translateY(1px) }

.btn--sun{
  --bg:linear-gradient(180deg,var(--sun-lit),var(--sun));
  --fg:var(--forest-950); --bd:var(--sun-lit);
  box-shadow:0 10px 30px -14px rgba(var(--sun-rgb),.9);
}
.btn--sun::before{ background:linear-gradient(180deg,var(--ivory),var(--cream)) }
.btn--sun:hover,.btn--sun:focus-visible{ color:var(--forest-950) }

.btn--ghost{ --bd:rgba(var(--accent-rgb),.42) }
.btn--sm{ padding:.72rem 1.3rem; font-size:.68rem }
.btn--block{ display:flex; width:100% }

.btn svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none }
.btn__arrow{ width:1.55rem; transition:transform .45s var(--ease-out) }
.btn:hover .btn__arrow{ transform:translateX(5px) }
.btn__pin{ width:.85rem; transition:transform .45s var(--ease-out) }
.btn:hover .btn__pin{ transform:translateY(-3px) }

/* ─────────────────────────────────────────────── grain + scroll rule ─── */

/* smoke cursor — sits above the page but under the grain, the nav and
   the age gate, and never intercepts a click. Deliberately composited
   normally: screen or lighten would erase pale smoke over the sunlit
   plank sections, and half this page is now plank. */
.smoke{
  position:fixed; inset:0; z-index:88;
  display:block; width:100%; height:100%;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .smoke{ display:none } }

.grain-source{ position:absolute; width:0; height:0 }
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none;
  filter:url(#grain); opacity:.06; mix-blend-mode:overlay;
  background:#fff;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) } 40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) } 80%{ transform:translate(3%,3%) }
}

.scroll-rule{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:95; pointer-events:none;
}
.scroll-rule i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--wave),var(--sun),var(--gold));
  box-shadow:0 0 14px rgba(var(--sun-rgb),.75);
}

/* ──────────────────────────────────────────────────────── age gate ─── */

/* the door: dark, warm, closed. It opens onto a sunlit deck. */
.gate{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:var(--gut);
  background:var(--forest-950);
  text-align:center;
}
.gate[hidden]{ display:none }
.gate--out{ animation:gateOut .8s var(--ease-out) forwards }
@keyframes gateOut{ to{ opacity:0; visibility:hidden; transform:scale(1.04) } }

.gate::before{                       /* stained boards behind the badge */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("assets/wood.webp") center/cover;
  opacity:.14;
  filter:brightness(.4) saturate(.5) sepia(.4) hue-rotate(45deg);
}
.gate::after{                        /* low sun coming under the door */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(54% 40% at 50% 28%,rgba(var(--sun-rgb),.16),transparent 70%),
    radial-gradient(72% 56% at 50% 36%,rgba(var(--wave-rgb),.14),transparent 74%);
}
.gate__inner{ position:relative; z-index:1; max-width:34rem }
/* no glow here: the badge is bright, self-lit artwork on a transparent
   ground, so a halo just reads as a plate behind it */
.gate__badge{
  width:min(250px,56vw); margin:0 auto 2rem;
  animation:riseIn .9s var(--ease-out) both;
}
.gate .eyebrow{ justify-content:center; animation:riseIn .9s .1s var(--ease-out) both }
.gate__title{
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);
  line-height:1; letter-spacing:.01em;
  color:var(--ivory); margin-bottom:1.2rem;
  animation:riseIn .9s .18s var(--ease-out) both;
}
/* Yellowtail draws "18" wider than it measures: the advance is .630em but the
   ink runs to .855em, so the 8 overhangs its own box by .225em and leans into
   whatever follows. The two spaces in the markup are identical, yet that put
   91% of the air on the left and left the 8 touching the O. The values below
   are measured rather than eyeballed — they land the ink gaps at 272 and 267,
   against the 269 that ARE|YOU and OR|OLDER already sit at, so the number
   keeps the heading's own word rhythm instead of just being centred in
   isolation. letter-spacing is reset for the reason .h-display em resets it:
   tracking belongs to the caps, not to a script face. */
.gate__title em{
  font-family:var(--f-script); font-style:normal; text-transform:none;
  font-size:.94em;
  letter-spacing:0;
  margin-left:-.04em;
  padding-right:.25em;
  color:var(--sun-lit); text-shadow:0 0 30px rgba(var(--sun-rgb),.45);
}
.gate__note{ color:var(--ink-mid); font-size:.98rem; margin-bottom:2.2rem; animation:riseIn .9s .26s var(--ease-out) both }
.gate__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; animation:riseIn .9s .34s var(--ease-out) both }

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

/* ────────────────────────────────────────────────────────── header ─── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav--stuck{
  background:rgba(var(--forest-950-rgb),.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(var(--gold-rgb),.24);
}
.nav__bar{
  max-width:var(--shell); margin-inline:auto;
  padding:1rem var(--gut);
  display:flex; align-items:center; gap:1.5rem;
  transition:padding .5s var(--ease);
}
.nav--stuck .nav__bar{ padding-block:.6rem }

.nav__mark{
  display:flex; align-items:center; gap:.7rem;
  margin-right:auto; flex:none;
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.nav--stuck .nav__mark{ opacity:1; transform:none; pointer-events:auto }
.nav__mark img{ width:2.7rem }
/* On mobile the wordmark is visible from the top of the page, so it rides
   the same flip as the links: dark over the sunlit hero, cream once a dark
   bar — or the open menu panel — is behind it. */
.nav__mark span{
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:1.06rem; letter-spacing:.03em;
  color:#16261a; text-shadow:0 1px 12px rgba(253,247,227,.75);
  white-space:nowrap;
  transition:color .3s;
}
.nav--stuck .nav__mark span,
.nav__bar:has(.nav__links.is-open) .nav__mark span{
  color:var(--ivory); text-shadow:0 1px 10px rgba(var(--forest-950-rgb),.6);
}

.nav__links{ display:flex; gap:1.9rem }
/* The bar floats transparent over a sunlit plank hero before it sticks,
   so the links start dark and only flip to cream once a dark bar has
   slid under them. */
.nav__links a{
  position:relative;
  font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:#16261a; opacity:.82;
  padding-block:.35rem;
  transition:opacity .3s, color .3s;
  white-space:nowrap;
  text-shadow:0 1px 12px rgba(253,247,227,.75);
}
.nav--stuck .nav__links a{
  color:var(--cream); opacity:.74;
  text-shadow:0 1px 10px rgba(var(--forest-950-rgb),.8);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--sun); transform:scaleX(0); transform-origin:right;
  box-shadow:0 0 10px rgba(var(--sun-rgb),.8);
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover,.nav__links a.is-active{ opacity:1; color:var(--sun-deep) }
.nav--stuck .nav__links a:hover,.nav--stuck .nav__links a.is-active{ color:var(--sun-lit) }
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left }

.nav__burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:.6rem; cursor:pointer;
}
.nav__burger i{
  display:block; width:24px; height:2px; background:var(--sun);
  box-shadow:0 0 8px rgba(var(--sun-rgb),.6);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.nav__burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ──────────────────────────────────────────────────────────── hero ─── */

/* The deck, in full sun. The badge is dark artwork on a light ground
   here, which is the way round it was drawn — so the type goes dark
   with it and the whole opening reads as a painted shopfront sign. */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:8rem var(--gut) 6rem;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  color:#16261a;

  --ink-hi:  #0d1a10;
  --ink:     #16261a;
  --ink-mid: #3d4a35;
  --ink-low: #6e7358;
  --accent:     var(--sun-deep);
  --accent-rgb: 163,71,0;
  --glow:    0;
}
.hero__media{ position:absolute; inset:0; z-index:-3 }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:drift 38s var(--ease) infinite alternate;
}
@keyframes drift{ from{ transform:scale(1.05) translate3d(0,0,0) } to{ transform:scale(1.14) translate3d(-1.5%,-1.5%,0) } }

/* Warm the boards and lift the middle so the badge and headline have a
   clean field to sit in, without washing the plank grain out entirely. */
.hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(72% 56% at 50% 40%,rgba(253,247,227,.86),rgba(240,226,199,.5) 62%,transparent 82%),
    linear-gradient(180deg,rgba(250,242,225,.82) 0%,rgba(246,236,214,.42) 26%,rgba(238,224,196,.6) 72%,rgba(214,195,160,.9) 100%);
}
/* the sun itself, low and to the right, the way the badge draws it */
.hero__sun{
  position:absolute; z-index:-1;
  left:50%; top:28%; width:min(1150px,132vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,rgba(var(--sun-rgb),.20) 0%,rgba(var(--gold-rgb),.10) 40%,transparent 66%);
  animation:breathe 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08) } }

.hero__inner{ position:relative; width:100%; max-width:58rem }
.hero__eyebrow{ justify-content:center; animation:riseIn 1s .1s var(--ease-out) both }

.hero__badge{ margin:0 0 2.2rem }
/* The badge sits straight on the boards — no halo, no plate. A soft
   contact shadow is the only thing under it, so it reads as a painted
   sign hung on the wall rather than a sticker floating above it. */
.hero__badge img{
  width:min(560px,80vw); margin-inline:auto;
  filter:drop-shadow(0 18px 30px rgba(40,26,10,.28));
  animation:badgeIn 1.5s var(--ease-out) both;
}
@keyframes badgeIn{
  from{ opacity:0; transform:translateY(26px) scale(.93); filter:blur(7px) }
  to{ opacity:1; transform:none; filter:drop-shadow(0 18px 30px rgba(40,26,10,.28)) }
}

.hero__tag{
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:clamp(1.9rem,1rem + 3.6vw,4rem);
  line-height:1; letter-spacing:.02em;
  color:var(--ink-hi);
  margin:0 0 1.4rem;
}
.hero__tag span{ display:inline-block; animation:riseIn .95s var(--ease-out) both }
.hero__tag span:nth-child(1){ animation-delay:.55s }
.hero__tag span:nth-child(2){ animation-delay:.65s }
.hero__tag span:nth-child(3){ animation-delay:.75s }
.hero__tag span:nth-child(4){ animation-delay:.85s }
.hero__tag em{
  font-family:var(--f-script); font-style:normal; text-transform:none;
  font-size:1.02em; letter-spacing:0; padding-inline:.08em;
  color:var(--sun-deep);
}

.hero__sub{
  color:var(--ink-mid); max-width:34rem; margin:0 auto 2.6rem;
  font-size:1.06rem;
  animation:riseIn 1s .95s var(--ease-out) both;
}
.hero__actions{
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;
  animation:riseIn 1s 1.08s var(--ease-out) both;
}

.hero__cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:20px; color:var(--sun-deep);
  animation:riseIn 1s 1.4s var(--ease-out) both;
}
.hero__cue svg{ width:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; opacity:.75 }
.hero__cue:hover svg{ opacity:1 }
.hero__cue svg path:first-child{ animation:cue 2.4s var(--ease) infinite }
@keyframes cue{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }

/* ──────────────────────────────────────────────────────── ticker ─── */

/* the loudest band on the page — a painted sunset rail dividing the
   deck above from the room below. It does not whisper. */
.ticker{
  overflow:hidden; padding:1.05rem 0;
  background:linear-gradient(180deg,var(--gold),var(--sun));
  color:var(--forest-950);
  border-block:1px solid rgba(var(--forest-950-rgb),.4);
  box-shadow:0 0 55px -14px rgba(var(--sun-rgb),.6);
}
/* The rail carries --copies identical runs of the word list and rolls by
   exactly one of them, so the frame it lands on is the frame it started
   from and the seam never shows. Two things make that hold:
   the spacing is a trailing margin on every item rather than a flex gap —
   a gap sits only *between* children, which would make the track a hair
   under --copies whole runs and drift the loop by a few px each lap —
   and the remaining --copies minus one runs must still out-span the
   widest viewport, or the tail scrolls away into blank rail. */
.ticker__track{
  --copies:6;
  display:flex; align-items:center; width:max-content;
  animation:roll 34s linear infinite;
}
.ticker__track > *{ margin-right:2.4rem }
.ticker span{
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:1.3rem; letter-spacing:.06em; white-space:nowrap;
}
.ticker .leaf{ width:1.15rem; height:1.15rem; opacity:.5 }
@keyframes roll{ to{ transform:translateX(calc(-100% / var(--copies))) } }

/* ─────────────────────────────────────────────────────── welcome ─── */

.welcome{ padding:clamp(5rem,11vw,9rem) 0 }
.welcome__grid{
  display:grid; gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:1.15fr .85fr; align-items:center;
}
.welcome__copy p{ color:var(--ink-mid) }
.welcome__closer{
  margin-top:2rem; padding-top:1.6rem;
  border-top:1px solid var(--rule);
  color:var(--ink)!important; font-size:1.03em;
}

.welcome__figure{ position:relative; margin:0 }
.welcome__figure::before{           /* offset rule frame, sun-side */
  content:""; position:absolute; inset:-1.1rem -1.1rem 3.5rem 1.4rem;
  border:1px solid rgba(var(--accent-rgb),.45);
  pointer-events:none;
}
/* the source frame is lit cold blue and fought everything around it —
   a light sepia pulls it back toward the badge's warm sea tones */
.welcome__figure img{
  position:relative;
  width:100%; border-radius:2px;
  filter:saturate(1.05) contrast(1.04) sepia(.16) hue-rotate(-6deg);
}
.welcome__figure figcaption{
  position:relative;
  margin-top:1.2rem;
  font-family:var(--f-script);
  font-size:1.42rem; line-height:1.35; color:var(--accent);
}
.welcome__figure figcaption span{
  display:block; font-family:var(--f-body);
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-low); margin-top:.45rem;
}

/* ─────────────────────────────────────────────────────── pillars ─── */

.pillars{ padding:clamp(5rem,11vw,9rem) 0 }
.pillars__list{
  display:grid; gap:clamp(1.5rem,3vw,2.2rem);
  grid-template-columns:repeat(3,1fr);
}
/* cards on the deck read as painted boards screwed to the wall */
.pillar{
  position:relative;
  padding:clamp(2rem,3vw,2.8rem);
  background:linear-gradient(165deg,rgba(255,252,244,.78),rgba(243,233,213,.62));
  border:1px solid rgba(13,26,16,.14);
  border-radius:3px;
  box-shadow:0 18px 40px -28px rgba(40,26,10,.55);
  overflow:hidden;
  transition:transform .6s var(--ease-out), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.pillar::after{                      /* sun catches the card on hover */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(var(--sun-rgb),.16),transparent 70%);
  opacity:0; transition:opacity .6s var(--ease);
}
.pillar:hover{
  transform:translateY(-7px); border-color:rgba(var(--accent-rgb),.5);
  box-shadow:0 30px 60px -30px rgba(40,26,10,.6);
}
.pillar:hover::after{ opacity:1 }

.pillar__num{
  position:absolute; top:1rem; right:1.4rem;
  font-family:var(--f-poster);
  font-size:3.4rem; color:var(--accent); opacity:.16;
  line-height:1; letter-spacing:.02em;
}
.pillar__icon{ display:block; width:3.4rem; margin-bottom:1.6rem; color:var(--wave-deep) }
.pillar__icon svg{
  width:100%; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.pillar h3{
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:1.9rem; letter-spacing:.02em;
  color:var(--ink-hi); margin-bottom:.7rem;
}
.pillar p{ color:var(--ink-mid); font-size:.99rem; margin:0 }

/* ──────────────────────────────────────────────────────── lounge ─── */

/* the room itself: low light, timber, smoke. The darkest thing on the
   page and deliberately so — this is what the whole site is selling. */
.lounge{
  position:relative;
  padding:clamp(6rem,14vw,11rem) 0;
  overflow:hidden;
  isolation:isolate;
  color:var(--ink);
}
.lounge__media{ position:absolute; inset:-8% 0; z-index:-2 }
.lounge__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.06) brightness(.72) sepia(.22);
}
.lounge::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 70% at 88% 30%,rgba(var(--sun-rgb),.14),transparent 66%),
    linear-gradient(100deg,rgba(var(--forest-950-rgb),.96) 8%,rgba(var(--forest-950-rgb),.8) 48%,rgba(var(--forest-900-rgb),.5) 100%);
}
/* Proportional, not a fixed text column: a fixed one takes its full width
   first and leaves the photo whatever is left, which starves the picture
   at the middle widths. Sharing the row keeps the room shot the larger of
   the two everywhere it is side by side. */
.lounge .shell{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
}
.lounge__card{ max-width:34rem }

.lounge__inset{ margin:0; justify-self:end; width:min(100%,42rem) }
/* frame is scoped to the picture, not the figure, so the caption height
   can change without opening a gap under the image */
.lounge__inset picture{ position:relative; display:block; z-index:0 }
.lounge__inset picture::before{
  content:""; position:absolute; inset:-1.1rem -1.1rem 1.1rem 1.1rem;
  border:1px solid rgba(var(--gold-rgb),.45); pointer-events:none; z-index:-1;
}
/* The lounge interior is 1600x1200. height:auto keeps that 4/3 ratio so
   the bar, murals and sofa all stay in frame. */
.lounge__inset img{
  position:relative; width:100%; height:auto;
  border-radius:2px;
  box-shadow:0 34px 70px -26px rgba(0,0,0,.9);
  filter:saturate(1.1) contrast(1.04);
}
.lounge__inset figcaption{
  position:relative; margin-top:1.1rem;
  font-family:var(--f-script);
  font-size:1.36rem; line-height:1.35; color:var(--gold);
}
.lounge__inset figcaption span{
  display:block; font-family:var(--f-body);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-low); margin-top:.4rem;
}
.lounge__card p{ color:var(--ink-mid) }
.lounge__card .h-display{ margin-bottom:1.8rem }

.lounge__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem }
.lounge__tags li{
  padding:.42rem 1rem;
  border:1px solid rgba(var(--gold-rgb),.4);
  border-radius:999px;
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
  background:rgba(var(--forest-950-rgb),.55);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.lounge__tags li:hover{ background:var(--gold); color:var(--forest-950) }

/* ────────────────────────────────────────────────────── membership ─── */

.member{ padding:clamp(5rem,11vw,9rem) 0 }
.steps{
  display:grid; gap:clamp(1.5rem,3vw,2.4rem);
  grid-template-columns:repeat(3,1fr);
}
.step{
  position:relative; padding-top:2.6rem;
  border-top:1px solid rgba(var(--accent-rgb),.32);
}
.step__n{
  position:absolute; top:-.95rem; left:0;
  display:grid; place-items:center;
  width:2.7rem; height:2.7rem;
  background:var(--paper);
  border:1.5px solid var(--accent);
  border-radius:50%;
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:.95rem; color:var(--accent);
  letter-spacing:.04em;
}
.step h3{
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:1.7rem; letter-spacing:.02em;
  color:var(--ink-hi); margin-bottom:.7rem;
}
.step p{ color:var(--ink-mid); font-size:.99rem; margin:0 }

.cta-row{ margin-top:clamp(3rem,6vw,4.5rem); text-align:center }

/* ────────────────────────────────────────────────────── section 21 ─── */

.s21{ padding:clamp(5rem,11vw,9rem) 0 }
.s21__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:.95fr 1.05fr; align-items:start;
}
.s21__body p{ color:var(--ink-mid) }
.s21__note{
  margin-top:2rem; padding-left:1.4rem;
  border-left:2px solid var(--gold);
  font-family:var(--f-script);
  font-size:1.5rem; line-height:1.5;
  color:var(--gold)!important;
}

/* ──────────────────────────────────────────────────── quality band ─── */

.band{ padding:clamp(5rem,11vw,9rem) 0 }
.band__grid{
  display:grid; gap:clamp(1.2rem,2.6vw,2rem);
  grid-template-columns:repeat(3,1fr);
}
.band__item figure{ margin:0 }
.band__item picture{
  position:relative; display:block; overflow:hidden; border-radius:3px;
  border:1px solid rgba(13,26,16,.18);
  box-shadow:0 18px 40px -26px rgba(40,26,10,.6);
}
/* The three photos come from different sources — one daylight green, one
   magenta under grow lights, one a near-white book page — and left alone
   they never read as one set. This filter chain rebuilds them as a warm
   sun-faded duotone that belongs on the boards: strip the source colour,
   lay a sepia tint, then push it toward the badge's amber. Because it
   starts from grayscale the result is identical whatever the source was,
   which is exactly what a blend-mode duotone could not give. True colour
   floods back on hover. */
.band__item picture::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(175deg,rgba(253,247,227,.12),rgba(120,70,20,.22));
  transition:opacity .9s var(--ease);
}
.band__item img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(1) brightness(1.02) contrast(1.05) sepia(.75) saturate(1.7) hue-rotate(-12deg);
  transition:filter .9s var(--ease), transform 1.3s var(--ease-out);
}
.band__item:hover picture::after{ opacity:.2 }
.band__item:hover img{
  filter:grayscale(0) brightness(1) contrast(1.05) sepia(0) saturate(1.2) hue-rotate(0deg);
  transform:scale(1.05);
}
.band__item figcaption{ margin-top:1.1rem }
.band__item b{
  display:block; font-weight:400;
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:1.4rem; letter-spacing:.02em; color:var(--ink-hi);
}
.band__item span{
  display:block; margin-top:.35rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-low);
}

/* ───────────────────────────────────────────────────────────── shop ─── */

.shop{ padding:clamp(5rem,11vw,9rem) 0; text-align:center }
.shop__inner{ max-width:40rem; margin-inline:auto }
/* nudged up from the .7rem base — the leaf marks either side give this one
   more room than the left-aligned eyebrows, and it carries the section */
.shop .eyebrow{ justify-content:center; font-size:.96rem }
.shop__copy{ color:var(--ink-mid); margin-top:1.8rem }
.shop__meta{
  font-family:var(--f-script);
  font-size:1.5rem; line-height:1.45; color:var(--gold); margin:0;
}
.rosette{
  width:clamp(8rem,16vw,11.5rem); margin:0 auto 2.2rem;
  fill:none; stroke:var(--gold); stroke-width:1;
  overflow:visible;
  filter:drop-shadow(0 0 18px rgba(var(--gold-rgb),.3));
}
.rosette .thin{ opacity:.45 }
.rosette .dashed{
  opacity:.55; stroke-width:.7; stroke-dasharray:1 5; stroke-linecap:round;
  transform-origin:60px 60px;
  animation:spin 60s linear infinite;    /* only the ring turns — text stays legible */
}
.rosette .pip{ fill:var(--gold); stroke:none }
.rosette .mark-leaf{ fill:var(--leaf); stroke:none }
/* The two fonts measure very differently: at a given font-size Anton gives
   87 units of cap height and Yellowtail's "soon" — no ascenders, no
   descenders — only 42 of x-height, so the inherited .92em was painting it
   at 44% of the word beside it. 87/42 = 2.07em is the true optical match,
   but Yellowtail's swash and the glow carry weight the raw x-height figure
   does not, so at 2.07 "soon" reads bigger than COMING instead of equal to
   it. This sits deliberately under the match and lets COMING lead. Scoped
   to the shop: every other h-display em on the page wants the smaller
   script. */
.shop .h-display em{ font-size:1.6em; line-height:.8 }

.rosette text{
  font-family:var(--f-body); font-size:7px; font-weight:800;
  letter-spacing:.2em; fill:var(--gold); stroke:none;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ─────────────────────────────────────────────────────────── visit ─── */

.visit{ padding:clamp(5rem,11vw,9rem) 0 }
.visit__grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1.1fr .9fr; align-items:center;
}
.visit__copy p{ color:var(--ink-mid); max-width:30rem; margin-top:1.8rem }

.visit__notes{
  margin-top:2.4rem; padding-top:1.8rem; max-width:30rem;
  border-top:1px solid rgba(var(--accent-rgb),.3);
  display:grid; gap:.95rem;
}
.visit__notes li{
  display:flex; align-items:flex-start; gap:.85rem;
  font-size:.98rem; color:var(--ink);
}
.visit__notes .leaf{
  width:1.1rem; height:1.1rem; margin-top:.42em;
  color:var(--wave-deep);
}

/* the one card on the page that goes dark on the deck — a bar sign.
   It carries the dark-room inks with it so anything dropped inside
   (buttons included) colours itself correctly. */
.visit__card{
  --ink-hi:  var(--ivory);
  --ink:     var(--cream);
  --ink-mid: #c5bca0;
  --ink-low: #8a8169;
  --accent:     var(--sun-lit);
  --accent-rgb: var(--sun-rgb);
  --glow:    .45;
  position:relative;
  padding:clamp(2.2rem,4vw,3rem);
  text-align:center;
  color:var(--ink);
  background:linear-gradient(165deg,var(--forest-850),var(--forest-950));
  border:1px solid rgba(var(--gold-rgb),.38);
  border-radius:3px;
  box-shadow:0 34px 70px -28px rgba(40,26,10,.8);
}
.visit__compass{
  width:4.6rem; margin:0 auto 1.6rem;
  fill:none; stroke:var(--gold); stroke-width:1.2; stroke-linecap:round;
  filter:drop-shadow(0 0 14px rgba(var(--gold-rgb),.35));
}
.visit__compass .thin{ opacity:.4 }
.visit__compass .needle{ fill:rgba(var(--sun-rgb),.35); stroke:var(--sun-lit) }

.visit__label{
  font-size:.7rem; font-weight:800; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1rem;
}
.visit__addr{
  font-family:var(--f-poster); text-transform:uppercase;
  font-size:clamp(1.6rem,1.1rem + 1.3vw,2.2rem);
  line-height:1.18; letter-spacing:.02em; color:var(--ivory);
  margin-bottom:2rem;
}
.visit__hint{
  margin:1rem 0 0; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-low);
}

/* ────────────────────────────────────────────────────────── footer ─── */

.foot{ padding:clamp(4rem,8vw,6rem) 0 2rem }
.foot__grid{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1.4fr .8fr .8fr;
}
.foot__brand img{ width:8.5rem; margin-bottom:1.4rem }
.foot__brand p{ color:var(--ink-mid); max-width:24rem; font-size:.97rem }

.foot__h{
  font-size:.7rem; font-weight:800; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem;
}
.foot__nav{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start }
.foot__nav a,.foot__link{
  font-size:.95rem; color:var(--ink-mid);
  transition:color .3s, transform .3s var(--ease-out);
}
.foot__nav a:hover,.foot__link:hover{ color:var(--sun-lit); transform:translateX(3px) }
.foot__visit address{ color:var(--ink-mid); font-size:.95rem; margin-bottom:.9rem; line-height:1.7 }
.foot__link{ display:inline-block; color:var(--gold)!important }

.foot__base{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.8rem;
  border-top:1px solid rgba(var(--gold-rgb),.18);
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.foot__base p{ margin:0; font-size:.76rem; color:var(--ink-low); max-width:38rem }

/* ────────────────────────────────────────────────── reveal on scroll ─── */

.js [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.js [data-reveal].is-in{ opacity:1; transform:none }
.pillar[data-reveal]:nth-child(2),.step[data-reveal]:nth-child(2){ transition-delay:.12s }
.pillar[data-reveal]:nth-child(3),.step[data-reveal]:nth-child(3){ transition-delay:.24s }

/* ───────────────────────────────────────────────────────── responsive ─── */

@media (max-width:1040px){
  .nav__links{
    position:fixed; inset:0 0 auto; top:0;
    flex-direction:column; justify-content:center; align-items:center;
    gap:1.6rem; height:100svh;
    /* no backdrop-filter here: at .97 the plate is opaque enough that the blur
       was not visible, but it still forced a full-screen re-sample on a panel
       that lives in the DOM the whole time, open or not */
    background:rgba(var(--forest-950-rgb),.97);
    transform:translateY(-100%);
    transition:transform .6s var(--ease-out);
  }
  .nav__links.is-open{ transform:none }
  /* full-screen dark panel now, whatever the bar behind it is doing */
  .nav__links a{
    font-size:1.02rem; letter-spacing:.2em; opacity:.92;
    color:var(--cream); text-shadow:none;
  }
  .nav__burger{ display:flex; z-index:2 }
  .nav__cta{ display:none }
  .nav__mark{ opacity:1; transform:none; pointer-events:auto; z-index:2 }

  .welcome__grid,.s21__grid,.visit__grid,.lounge .shell{ grid-template-columns:1fr }
  .lounge__inset{ justify-self:start; margin-top:3.5rem }
  .welcome__figure{ max-width:24rem; margin-inline:auto }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .foot__brand{ grid-column:1/-1 }
}

@media (max-width:780px){
  .pillars__list,.steps,.band__grid{ grid-template-columns:1fr }
  .step{ padding-top:2.4rem }
  .hero{ padding:6.5rem var(--gut) 8rem }
  .hero__tag{ letter-spacing:.01em }
  .hero__eyebrow{ letter-spacing:.22em; font-size:.64rem }
  .hero__actions .btn{ width:100% }
  .foot__grid{ grid-template-columns:1fr }
  .foot__base{ flex-direction:column }
}

/* ───────────────────────────────────────────── cost control on phones ─── */

/* These are the effects a phone pays for on every single frame, and they are
   all decoration. The grain is by far the worst: inset:-50% makes it four
   viewports of surface, filter:url(#grain) runs an SVG filter across all of
   it, and mix-blend-mode:overlay forces everything underneath into one
   composited group that has to be blended again on each step of a 6s loop —
   all to sit at .06 opacity, which on a small screen is close to invisible
   anyway. The rest are full-viewport layers being transformed or repainted
   forever: a 1600px image scaling for 38s, a 1150px radial gradient pulsing
   its opacity, a dashed ring spinning, and a blur that has to re-sample the
   page behind the header every time you scroll a pixel.

   Desktop keeps all of it. Scoped by pointer as well as width so a touch
   laptop is treated like the phone it behaves like. */
@media (max-width:1040px), (hover:none){
  .grain{ display:none }
  .hero__media img{ animation:none; transform:scale(1.06) }
  .hero__sun{ animation:none; opacity:.85 }
  .rosette .dashed{ animation:none }
  /* dropping the blur needs the plate itself to carry the contrast that the
     blur was providing, or the links lose their background */
  .nav--stuck{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(var(--forest-950-rgb),.95);
  }
}

/* ─────────────────────────────────────────────────── reduced motion ─── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js [data-reveal]{ opacity:1!important; transform:none!important }
  .hero__media img{ animation:none; transform:scale(1.04) }
  .grain{ display:none }
}