/* Casa Verde — a day in the house.
   Day = their sage walls + cream; night = walnut + umber; lamp gold is for things you can touch. */
:root {
  --umber: #100e0a;
  --walnut: #2a1d13;
  --forest: #14201a;
  --sage: #9aa88f;
  --sage-wall: #c9d0bd;
  --day: #eceee3;
  --cream: #f3ead8;
  --ink: #1c2a21;
  --lamp: #f2c46d;      /* interactive only */
  --brass: #b8925a;     /* hairlines on invitations & card, decorative only */
  --display: "Italiana", "Didot", serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 3.6vw, 52px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--umber); color: var(--cream); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--lamp); outline-offset: 4px; }
::selection { background: var(--lamp); color: var(--umber); }
.mono { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

body::after { /* 35mm grain, like their feed */
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} }

.leaf { display: inline-block; width: 24px; aspect-ratio: 420 / 360; background: currentColor;
  -webkit-mask: url(/img/leaf.png) center / contain no-repeat; mask: url(/img/leaf.png) center / contain no-repeat; }

/* knob: square-edged buttons, not pills */
.knob {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 1px solid currentColor; border-radius: 2px; text-decoration: none;
  font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .12s var(--ease-out);
}
.knob:not(.knob--quiet) { background: var(--lamp); border-color: var(--lamp); color: var(--umber); }
.knob:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .knob:not(.knob--quiet):hover { background: var(--cream); border-color: var(--cream); }
  .knob--quiet:hover { color: var(--lamp); }
}

/* ---------- gate: the brass plaque on the door ---------- */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gutter);
  background: radial-gradient(70% 60% at 50% 45%, #3a2817, var(--walnut) 45%, #150e08 100%); }
.gate[hidden] { display: none; }
.plaque {
  width: min(440px, 100%); padding: 44px 32px 36px; text-align: center; color: #2b1f12;
  background: linear-gradient(145deg, #e5c992, #b8925a 55%, #8d6a3c); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), 0 30px 60px rgba(0,0,0,.5);
}
.plaque .leaf { width: 40px; color: #2b1f12; }
.plaque .mono { margin: 16px 0 6px; }
.plaque h2 { margin: 0; font: 400 clamp(44px, 9vw, 58px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.plaque__q { margin: 16px 0 28px; font-size: 16px; }
.plaque__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.plaque .knob:not(.knob--quiet) { background: #2b1f12; border-color: #2b1f12; color: #f0dcae; }
.plaque .knob--quiet { color: #2b1f12; }
body.is-gated { overflow: hidden; }

/* ---------- nav: a timetable ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 28px;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 0; mix-blend-mode: difference; color: #f3ead8; pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav { transition: background-color .3s var(--ease-out); padding-bottom: 12px; }
.nav.is-solid { mix-blend-mode: normal; background: rgba(16,14,10,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__mark .leaf { width: 30px; margin-top: 4px; }
.nav__table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.nav__table a { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid currentColor; text-decoration: none; font-size: 13px; }
.nav__table .mono { opacity: .7; }
.nav__now { padding-top: 10px; }
.nav__table a { opacity: .62; transition: opacity .2s var(--ease-out); }
.nav__table a.is-current { opacity: 1; border-top-width: 3px; padding-top: 8px; }
@media (hover: hover) and (pointer: fine) { .nav__table a:hover { opacity: 1; } }
@media (max-width: 900px) { .nav__table { display: none; } .nav { grid-template-columns: auto auto; justify-content: space-between; } }

/* ---------- now in Thong Lo ---------- */
.now { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--umber); }
.now__room, .now__room > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.now__night { opacity: 0; transition: opacity 1.6s var(--ease-in-out); }
.now[data-phase="night"] .now__night { opacity: 1; }
.now[data-phase="dusk"] .now__night { opacity: .62; }
.now { --hero-fg: var(--cream); transition: color 1.6s var(--ease-in-out); color: var(--hero-fg); }
.now[data-phase="day"] { --hero-fg: var(--ink); }
.now__veil, .now__veil::before { position: absolute; inset: 0; transition: opacity 1.6s var(--ease-in-out); }
.now__veil { background: linear-gradient(90deg, rgba(16,14,10,.5) 0%, rgba(16,14,10,0) 55%), linear-gradient(0deg, rgba(16,14,10,.72) 0%, rgba(16,14,10,0) 42%); }
.now__veil::before { content: ""; opacity: 0; background: linear-gradient(90deg, rgba(236,238,227,.62) 0%, rgba(236,238,227,0) 58%), linear-gradient(0deg, rgba(236,238,227,.75) 0%, rgba(236,238,227,0) 40%); }
.now[data-phase="day"] .now__veil { background: none; }
.now[data-phase="day"] .now__veil::before { opacity: 1; }
.now__mark { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-58%); margin: 0;
  font: 400 clamp(84px, 19vw, 330px)/.8 var(--display); letter-spacing: -.01em; color: var(--hero-fg); display: grid; transition: color 1.6s var(--ease-in-out); }
.now__row { display: flex; overflow: hidden; padding: .02em 0 .06em; }
.now__row:last-child { justify-content: flex-end; }
.now__mark .lt { display: inline-block; }
.now__status { position: absolute; left: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); max-width: 560px; }
.now__status .mono { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; }
.now__status .mono span + span::before { content: "·"; margin-right: 14px; opacity: .6; }
.now__offer { margin: 0 0 12px; font: 500 13px/1.3 var(--sans); letter-spacing: .04em; }
.now__line { margin: 0; font: 400 clamp(22px, 2.2vw, 30px)/1.15 var(--display); text-wrap: balance; }

@media (max-width: 700px) {
  .now__room > * { object-position: 34% 50%; } /* phones frame the window wall, where the type can breathe */
  .now__mark { top: 42%; }
}

/* the lamp cord */
.cord { position: absolute; right: calc(var(--gutter) + 10px); top: 0; height: clamp(120px, 20vh, 200px); padding: 0 10px; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.cord__line { width: 1px; flex: 1; background: currentColor; opacity: .7; }
.cord__bead { width: 11px; height: 16px; border-radius: 6px; background: linear-gradient(160deg, #f3d9a0, var(--brass) 60%, #6e5129);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18); animation: glow 2.8s ease-in-out infinite; }
/* a quiet hint: the bead breathes like a warm bulb; the caption is barely there */
.cord__label { margin-top: 8px; font-size: 9px; letter-spacing: .14em; opacity: .7; white-space: nowrap; transition: opacity .2s var(--ease-out); }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 0 rgba(242,196,109,0); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 14px rgba(242,196,109,.75); } }
.cord.is-pulled { animation: tug .7s var(--ease-out); }
@keyframes tug { 0%{transform:translateY(0)} 25%{transform:translateY(16px)} 60%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
@media (hover: hover) and (pointer: fine) { .cord:hover .cord__label { opacity: 1; } }
/* by day the cord hangs over bright foliage: a soft cream halo keeps it readable without a box */
.now[data-phase="day"] .cord__label { font-size: 10px; font-weight: 500; opacity: 1; text-shadow: 0 0 6px rgba(236,238,227,.95), 0 0 12px rgba(236,238,227,.8), 0 0 2px rgba(236,238,227,1); }
.now[data-phase="day"] .cord__line { opacity: 1; box-shadow: 0 0 3px rgba(236,238,227,.9); }
@media (prefers-reduced-motion: reduce) { .cord__bead { animation: none; } }
@media (max-width: 900px) { .now__status { bottom: calc(84px + env(safe-area-inset-bottom)); } } /* clear the floating Menu button */

/* ---------- door ---------- */
.door { position: relative; height: 165vh; background: var(--umber); }
.door__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.door__capsule { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: translateZ(0); height: min(88svh, calc(92vw * 16 / 9)); aspect-ratio: 9 / 16; background: var(--forest) url(/img/walkthrough-poster.jpg) center / cover; clip-path: inset(18% 40% round 999px); will-change: clip-path; }
.door__capsule video { width: 100%; height: 100%; object-fit: cover; }
.door__words { position: relative; z-index: 2; margin: 0; width: 100%; padding: 0 var(--gutter); display: grid; font: 400 clamp(40px, 7.4vw, 124px)/.95 var(--display); color: var(--cream); pointer-events: none; }
@media (max-width: 900px) { .door__words { display: none; } } /* on phones the reel fills the frame; the words would only fight it */
.door__words span:nth-child(2) { text-align: center; }
.door__words span:nth-child(3) { text-align: right; }

/* ---------- one day ---------- */
.day { --bg: var(--day); --fg: var(--ink); --muted: color-mix(in srgb, var(--fg) 64%, transparent); --rule: color-mix(in srgb, var(--fg) 20%, transparent);
  position: relative; height: 380vh; background: var(--bg); color: var(--fg); }
.day__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: 96px var(--gutter) 32px; gap: 0 clamp(20px, 3vw, 48px); }
.day__swipe { display: none; margin: 18px var(--gutter) 0; }
.day__title { grid-column: 1 / -1; margin: 0 0 24px; color: var(--muted); }
.day__clock { grid-column: 1; grid-row: 2; align-self: end; margin: 0; font: 400 clamp(72px, 10.5vw, 180px)/.8 var(--mono); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.day__stage { grid-column: 2 / 4; grid-row: 2; position: relative; }
.ch { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); pointer-events: none; }
.ch figure { margin: 0; height: 100%; overflow: hidden; border-radius: 999px 999px 2px 2px; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-in-out); }
.ch img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.ch__text { align-self: end; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.ch.is-on { pointer-events: auto; z-index: 2; }
.ch.is-on figure { clip-path: inset(0 0 0 0); }
.ch.is-on img { transform: scale(1); }
.ch.is-on .ch__text { opacity: 1; transform: none; transition-delay: .25s; }
.ch.was-on { z-index: 1; }
.ch.was-on figure { clip-path: inset(0 0 0 0); } /* previous photo stays under the wipe */
.ch.was-on img { transform: scale(1); }
.ch__text .mono { color: var(--muted); margin: 0 0 14px; }
.ch__text h3 { margin: 0; font: 400 clamp(34px, 3.6vw, 60px)/1 var(--display); text-wrap: balance; }
.ch__text p:last-child { margin: 16px 0 0; max-width: 34ch; color: var(--muted); }
.day__ticks { grid-column: 1 / -1; grid-row: 3; list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 6px; }
.day__ticks li { flex: 1; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.day__ticks li::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- lamplight ---------- */
.lamp { position: relative; background: #0b0907; padding: 0 0 clamp(80px, 12vh, 140px); }
.lamp__room { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: clamp(12px, 2.4vw, 36px); align-items: center; padding: clamp(80px, 14vh, 160px) var(--gutter); min-height: 100svh; touch-action: pan-y; }
.jar { margin: 0; transform: rotate(var(--r)); }
.jar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.jar--tall img { aspect-ratio: 3 / 4.4; }
.jar figcaption { display: grid; gap: 4px; margin-top: 14px; }
.jar b { font: 400 30px/1 var(--display); }
.jar span { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(243,234,216,.6); }
.lamp__dark { position: absolute; inset: 0; background: rgba(11,9,7,.86); pointer-events: none;
  -webkit-mask: radial-gradient(circle var(--lr, 260px) at var(--lx, 50%) var(--ly, 50%), transparent 0, transparent 35%, rgba(0,0,0,.55) 62%, #000 100%);
          mask: radial-gradient(circle var(--lr, 260px) at var(--lx, 50%) var(--ly, 50%), transparent 0, transparent 35%, rgba(0,0,0,.55) 62%, #000 100%); }
.lamp__glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle calc(var(--lr, 260px) * 1.1) at var(--lx, 50%) var(--ly, 50%), rgba(242,196,109,.55), transparent 70%); }
.lamp__text { position: relative; max-width: 640px; margin: -40px auto 0; padding: 0 var(--gutter); text-align: center; }
.lamp__text .mono { color: rgba(243,234,216,.6); }
.lamp__text h2 { margin: 12px 0 18px; font: 400 clamp(44px, 6vw, 92px)/.95 var(--display); }
.lamp__text p { color: rgba(243,234,216,.72); }
.lamp__text .fine { margin-top: 28px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }
@media (max-width: 800px) { .lamp__room { grid-template-columns: 1fr 1fr; } .jar--tall { grid-column: 1 / -1; grid-row: 1; width: 70%; justify-self: center; } }

/* ---------- the tea card ---------- */
.card { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; padding: clamp(110px, 16vh, 180px) var(--gutter);
  background: var(--walnut); background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px); }
.card__photo { margin: 0; justify-self: end; width: min(100%, 420px); }
.card__photo img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.card__photo figcaption { margin-top: 12px; color: rgba(243,234,216,.6); }
.card__paper { position: relative; width: min(100%, 660px); padding: clamp(36px, 5vw, 60px) clamp(26px, 4vw, 52px); color: #2a2218; background: #f1e9d8;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -20px rgba(0,0,0,.6); transform: rotate(-3deg); }
.card__paper::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(184,146,90,.7); outline: 1px solid rgba(184,146,90,.35); outline-offset: 4px; pointer-events: none; }
.card__crest { margin: 0; text-align: center; color: var(--brass); }
.card__paper h2 { margin: 10px 0 4px; text-align: center; font: 400 clamp(40px, 4.4vw, 58px)/1 var(--display); letter-spacing: .02em; }
.card__sub { margin: 0 0 30px; text-align: center; color: rgba(42,34,24,.6); }
.card__paper h3 { margin: 26px 0 10px; color: var(--brass); }
.card__paper dl { margin: 0; }
.card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
@media (max-width: 560px) { .card__cols { grid-template-columns: 1fr; } }
.card__paper dl div { padding: 7px 0; }
.card__paper dt { font: 400 22px/1.1 var(--display); }
.card__paper dd { margin: 2px 0 0; font-size: 14px; color: rgba(42,34,24,.66); }
.card__foot { margin: 30px 0 0; text-align: center; font: 400 20px/1 var(--display); color: rgba(42,34,24,.7); }
@media (max-width: 860px) { .card { grid-template-columns: minmax(0, 1fr); } .card__photo { justify-self: start; width: 70%; } .card__paper { justify-self: center; width: 100%; } }

/* ---------- fashion atelier ---------- */
.atelier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  padding: clamp(100px, 14vh, 160px) var(--gutter); background: var(--sage); color: var(--ink); }
.atelier__text > .mono { margin: 0 0 14px; color: rgba(28,42,33,.7); }
.atelier h2 { margin: 0; font: 400 clamp(44px, 5.4vw, 88px)/.95 var(--display); text-wrap: balance; }
.atelier__lede { margin: 22px 0 28px; max-width: 46ch; font-size: 17px; color: rgba(28,42,33,.8); }
.atelier__facts { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid rgba(28,42,33,.25); }
.atelier__facts li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(28,42,33,.25); font-size: 15px; }
.atelier__facts b { font: 400 22px/1.1 var(--display); }
.atelier__facts a { color: inherit; }
.atelier__how { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.atelier__how li { display: flex; gap: 14px; align-items: baseline; }
.atelier__how .mono { color: rgba(28,42,33,.6); }
.atelier .knob { background: var(--ink); border-color: var(--ink); color: var(--day); }
@media (hover: hover) and (pointer: fine) { .atelier .knob:hover { background: var(--lamp); border-color: var(--lamp); color: var(--umber); } }
.atelier__photos { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1.05; }
.atelier__photos figure { margin: 0; overflow: hidden; border-radius: 2px; }
.atelier__photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.atelier__a { grid-row: 1 / span 2; border-radius: 999px 999px 2px 2px !important; }
@media (hover: hover) and (pointer: fine) { .atelier__photos figure:hover img { transform: scale(1.04); } }
@media (max-width: 900px) {
  .atelier { grid-template-columns: minmax(0, 1fr); padding-top: 76px; padding-bottom: 76px; }
  .atelier__photos { order: -1; aspect-ratio: 1 / .9; }
  .atelier__facts li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- rituals: Story Deck (ported from Scrolltide) ---------- */
.rituals { padding: clamp(110px, 16vh, 170px) var(--gutter); background: var(--forest); color: var(--cream); }
.rituals__kick { margin: 0 0 14px; color: var(--brass); }
.rituals__title { margin: 0 0 clamp(40px, 6vw, 72px); font: 400 clamp(46px, 6.4vw, 104px)/.95 var(--display); }
.sd { --sd-spring: linear(0, 0.0161, 0.0581, 0.1177, 0.1884, 0.2652, 0.344, 0.4219, 0.4967, 0.567, 0.6319, 0.6907, 0.7433, 0.7898, 0.8303, 0.8652, 0.8949, 0.92, 0.9408, 0.9578, 0.9717, 0.9827, 0.9913, 0.9978, 1.0027, 1.0062, 1.0086, 1.0101, 1.0109, 1.0111, 1.0109, 1.0105, 1.0098, 1.009, 1.0082, 1.0073, 1.0064, 1.0056, 1.0048, 1.0041, 1); /* Scrolltide springEasing(0.3) */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-rows: 1fr auto; gap: 32px clamp(32px, 8vw, 140px); max-width: 1180px; outline-offset: 12px; }
.sd__copy { grid-column: 1; grid-row: 1; align-self: center; animation: sd-copy .6s var(--ease-out) both; }
@keyframes sd-copy { from { opacity: 0; translate: 0 14px; filter: blur(4px); } }
.sd__count { display: flex; gap: 10px; margin-bottom: 28px; font: 400 13px/1 var(--mono); color: rgba(243,234,216,.55); }
.sd__count span + span { opacity: .55; }
.sd__kick { margin: 0 0 12px; color: var(--brass); }
.sd__copy h3 { margin: 0 0 14px; font: 400 clamp(44px, 5vw, 76px)/.95 var(--display); }
.sd__when { margin: 0 0 18px; color: rgba(243,234,216,.6); }
.sd__text { margin: 0; max-width: 40ch; font-size: 17px; color: rgba(243,234,216,.78); }
.sd__cta { margin-top: 22px; }
.sd__walkin { margin: 22px 0 0; display: inline-block; padding: 12px 16px; border: 1px dashed rgba(243,234,216,.35); border-radius: 2px; color: var(--cream); }
.sd__controls { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 14px; }
.sd__btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(243,234,216,.3); transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .12s var(--ease-out); }
.sd__btn svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd__btn.is-next { background: var(--lamp); color: var(--umber); border-color: var(--lamp); }
.sd__btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .sd__btn:not(.is-next):hover { border-color: var(--cream); } }
.sd__next-wrap { position: relative; display: grid; place-items: center; }
.sd__ring { position: absolute; width: 62px; height: 62px; rotate: -90deg; pointer-events: none; opacity: 0; }
.sd__ring circle { fill: none; stroke: var(--lamp); stroke-width: 1.6; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sd.is-playing .sd__ring { opacity: 1; }
.sd.is-playing .sd__ring circle { animation: sd-ring 6s linear both; }
@keyframes sd-ring { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sd__hint { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; color: rgba(243,234,216,.55); }
.sd__hint svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.sd__deck { grid-column: 2; grid-row: 1 / span 2; position: relative; aspect-ratio: 1 / 1.3; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sd__card { position: absolute; inset: 0; margin: 0; padding: 10px; background: #f1e9d8; border-radius: 3px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  transition: transform .7s var(--sd-spring), opacity .3s ease; will-change: transform; }
.sd__card::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(184,146,90,.5); pointer-events: none; }
.sd__card.is-top { cursor: grab; }
.sd__card.is-dragging { cursor: grabbing; transition: none; }
.sd__card.is-thrown { opacity: 0; transition: transform .45s cubic-bezier(0.32, 0, 0.67, 0), opacity .45s ease-in; }
.sd__card.is-returning { animation: sd-return .6s var(--ease-out) both; }
@keyframes sd-return { from { opacity: 0; translate: -120% -4%; rotate: -12deg; } }
.sd__card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; pointer-events: none; }
.rituals__lede { margin: -24px 0 clamp(36px, 5vw, 60px); max-width: 52ch; font-size: 17px; color: rgba(243,234,216,.72); }
.rituals__past { margin: 48px 0 0; color: rgba(243,234,216,.5); }
@media (max-width: 760px) {
  .sd { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .sd__deck { grid-column: 1; grid-row: 1; width: min(78%, 320px); justify-self: center; margin-bottom: 12px; }
  .sd__copy { grid-row: 2; } .sd__controls { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) { .sd__card, .sd__copy { transition-duration: .01s !important; animation: none !important; } }

/* ---------- from the feed: Overlap Reel (ported from Scrolltide) ---------- */
.feed { padding: clamp(90px, 14vh, 150px) 0; background: var(--umber); overflow: hidden; }
.feed__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 0 var(--gutter); margin-bottom: 40px; }
.feed__head h2 { margin: 0; font: 400 clamp(40px, 5vw, 80px)/1 var(--display); }
.feed__head a { text-decoration: none; color: rgba(243,234,216,.7); }
@media (hover: hover) and (pointer: fine) { .feed__head a:hover { color: var(--lamp); } }
.or { position: relative; height: calc(clamp(170px, 21vw, 300px) * 1.3 + 40px); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.or.is-dragging { cursor: grabbing; }
.or__card { position: absolute; left: 0; top: 20px; width: clamp(170px, 21vw, 300px); aspect-ratio: 1 / 1.3; border-radius: 3px; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); will-change: transform; -webkit-user-drag: none; }
.or__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---------- intro: Intro Loader (ported from Scrolltide) ---------- */
.il { position: fixed; inset: 0; z-index: 95; overflow: hidden; color: var(--cream); container-type: size; }
.il[hidden] { display: none; }
.il.is-open { pointer-events: none; }
.il__half { position: absolute; inset: 0; background: var(--umber); transition: translate .65s cubic-bezier(0.76, 0, 0.24, 1); }
.il__half.is-left { clip-path: inset(0 50% 0 0); } .il__half.is-right { clip-path: inset(0 0 0 50%); }
.il.is-open .il__half.is-left { translate: 0 -100%; } .il.is-open .il__half.is-right { translate: 0 100%; }
.il__marks i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--brass); transition: opacity .4s ease; }
.il__marks i:nth-child(1) { left: 12.5%; top: 16%; } .il__marks i:nth-child(2) { right: 12.5%; top: 16%; }
.il__marks i:nth-child(3) { left: 12.5%; bottom: 16%; } .il__marks i:nth-child(4) { right: 12.5%; bottom: 16%; }
.il:is(.is-logo-out, .is-open) .il__marks i { opacity: 0; }
.il__cards { position: absolute; inset: 0; z-index: 2; }
.il__card { position: absolute; left: 0; top: 0; width: max(96px, 10cqw); aspect-ratio: 1 / 1.25; overflow: hidden; border-radius: 3px; opacity: 0; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); will-change: transform, filter; }
.il__card img { width: 100%; height: 100%; object-fit: cover; }
.il__centre { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.il__tagline, .il__logo { grid-area: 1 / 1; margin: 0; text-align: center; }
.il__tagline { font: 400 clamp(26px, 3.4cqw, 52px)/1 var(--display); transition: opacity .3s ease, filter .3s ease; }
.il__tagline span { display: inline-block; margin: 0 .14em; opacity: 0; filter: blur(8px); translate: 0 .3em;
  transition: opacity .4s ease, filter .4s ease, translate .5s var(--ease-out); transition-delay: calc(.25s * var(--i, 0)); }
.il.is-words .il__tagline span { opacity: 1; filter: blur(0); translate: 0 0; }
.il:is(.is-logo, .is-logo-out, .is-open) .il__tagline { opacity: 0; filter: blur(10px); }
.il__logo { width: min(64vw, 420px); aspect-ratio: 2 / 1; background: var(--cream); opacity: 0; filter: blur(14px); scale: 1.06;
  -webkit-mask: url(/img/logo.png) center / contain no-repeat; mask: url(/img/logo.png) center / contain no-repeat;
  transition: opacity .45s ease, filter .45s ease, scale .8s var(--ease-out); }
.il.is-logo .il__logo { opacity: 1; filter: blur(0); scale: 1; }
.il:is(.is-logo-out, .is-open) .il__logo { opacity: 0; filter: blur(10px); scale: .97; }

/* ---------- find us: practical first ---------- */
.find { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px clamp(32px, 5vw, 80px); padding: clamp(110px, 16vh, 170px) var(--gutter); background: var(--day); color: var(--ink); }
.find__title { margin: 0 0 18px; font: 400 clamp(54px, 7vw, 116px)/.9 var(--display); }
.find__status { display: flex; align-items: center; gap: 10px; margin: 0 0 32px; font: 400 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.find__addr { font-style: normal; font: 400 clamp(22px, 2vw, 28px)/1.25 var(--display); }
.hours { display: grid; gap: 0; margin: 28px 0 8px; max-width: 360px; border-top: 1px solid rgba(28,42,33,.2); }
.hours div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(28,42,33,.2); }
.hours dt { font-weight: 500; } .hours dd { margin: 0; font-family: var(--mono); font-size: 14px; }
.find__note { color: rgba(28,42,33,.6); margin: 0; }
.find__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.find .knob--quiet { color: var(--ink); }
.find .knob:not(.knob--quiet) { background: var(--ink); border-color: var(--ink); color: var(--day); }
@media (hover: hover) and (pointer: fine) { .find .knob:not(.knob--quiet):hover { background: var(--lamp); border-color: var(--lamp); color: var(--umber); } .find .knob--quiet:hover { color: var(--ink); background: var(--sage-wall); } }
.find__map { margin: 0; min-height: 420px; border-radius: 2px; overflow: hidden; background: var(--sage-wall); }
.find__map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(.35) sepia(.12) contrast(.95); }
/* Step Path (ported from Scrolltide): one dashed line hops between the steps */
.spth { --drop: 46px; grid-column: 1 / -1; position: relative; padding: 70px 0 10px; }
.spth__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spth__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.spth__step { margin-top: calc(var(--drop) * var(--i, 0)); opacity: 0; translate: 0 12px; transition: opacity .6s ease, translate .7s var(--ease-out); }
.spth.is-shown .spth__step { opacity: 1; translate: 0 0; }
.spth__title { margin: 0; font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--display); }
.spth__number { font: 400 13px/1 var(--mono); color: rgba(28,42,33,.5); vertical-align: middle; }
.spth__text { margin: .6em 0 0; max-width: 30em; font-size: 16px; color: rgba(28,42,33,.78); }
.spth__draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s linear; }
.spth.is-shown .spth__draw { stroke-dashoffset: 0; }
.spth__dot { fill: var(--ink); scale: 0; transition: scale .45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.spth.is-shown .spth__dot { scale: 1; }
.spth.is-stacked { padding: 10px 0 10px 32px; }
.spth.is-stacked .spth__steps { grid-template-columns: 1fr; row-gap: 32px; }
.spth.is-stacked .spth__step { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .spth__step, .spth__dot, .spth__draw { transition: none; } }
.driver { display: grid; gap: 12px; align-content: start; padding: 26px; background: var(--ink); color: var(--day); border-radius: 2px; }
.driver .mono { margin: 0; opacity: .7; }
.driver__th { margin: 0; font: 400 20px/1.5 "Sukhumvit Set", "Thonburi", "Noto Sans Thai", sans-serif; }
.driver .knob { justify-self: start; color: var(--day); }
@media (hover: hover) and (pointer: fine) { .find .driver .knob--quiet:hover { background: var(--day); color: var(--ink); } }
.spot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.spot figure { margin: 0; }
.spot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.spot figcaption { margin-top: 8px; color: rgba(28,42,33,.6); }
@media (max-width: 900px) {
  .find { grid-template-columns: minmax(0, 1fr); }
  .find__map, .find__map iframe { min-height: 320px; }
}

/* open / closed dot */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9a9a8c; flex: none; }
.is-open .dot, .dot.is-open { background: #5fae6e; box-shadow: 0 0 0 3px rgba(95,174,110,.22); }

/* ---------- phone menu ---------- */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .menu-btn { position: fixed; z-index: 60; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 16px; border-radius: 3px;
    background: rgba(16,14,10,.82); color: var(--cream); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 0 0 1px rgba(243,234,216,.14);
    font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: transform .16s var(--ease-out); }
  .menu-btn:active { transform: translateX(-50%) scale(.97); }
  .menu-btn__label { padding: 10px 14px; background: var(--lamp); color: var(--umber); border-radius: 2px; }
  .nav__now { display: none; }
}
.menu { position: fixed; inset: 0; z-index: 80; }
.menu[hidden] { display: none; }
.menu__scrim { position: absolute; inset: 0; background: rgba(8,7,5,.55); opacity: 0; transition: opacity .3s var(--ease-out); }
.menu__sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88svh; overflow: auto; padding: 12px var(--gutter) max(24px, env(safe-area-inset-bottom));
  background: var(--umber); color: var(--cream); border-radius: 10px 10px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,.4);
  transform: translateY(100%); transition: transform .42s cubic-bezier(0.32, 0.72, 0, 1); }
.menu.is-open .menu__scrim { opacity: 1; }
.menu.is-open .menu__sheet { transform: none; }
.menu__sheet:focus { outline: none; }
.menu nav a:focus:not(:focus-visible) { outline: none; }
.menu__grab { display: block; width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 2px; background: rgba(243,234,216,.25); }
.menu nav { display: grid; }
.menu nav a { display: grid; gap: 6px; padding: 13px 0; border-bottom: 1px solid rgba(243,234,216,.12); text-decoration: none; }
.menu nav b { font: 400 28px/1 var(--display); }
.menu nav a.is-current { border-left: 3px solid var(--lamp); padding-left: 12px; }
.menu nav a.is-current b { color: var(--lamp); }
.menu nav .mono { color: rgba(243,234,216,.55); text-transform: none; letter-spacing: .02em; font-size: 12px; }
.menu__status { display: flex; align-items: center; gap: 10px; margin: 22px 0 16px; color: rgba(243,234,216,.75); }
.menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu__actions .knob--quiet { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .menu__sheet { transition: none; } }

/* ---------- footer ---------- */
.foot { padding: 80px var(--gutter) max(32px, env(safe-area-inset-bottom)); background: var(--umber); }
.foot__logo { width: 100%; aspect-ratio: 2 / 1; max-height: 50vh; background: var(--cream);
  -webkit-mask: url(/img/logo.png) center / contain no-repeat; mask: url(/img/logo.png) center / contain no-repeat; }
.foot__now { margin: 40px 0 0; text-align: center; font: 400 clamp(22px, 2.4vw, 32px)/1.2 var(--display); }
.foot__now .mono { font-size: 13px; vertical-align: middle; }
.foot__row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 40px; color: rgba(243,234,216,.6); }
.foot__row a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__row a:hover { color: var(--lamp); } }

/* ---------- small screens (and no-motion): the day becomes a stacked diary ---------- */
.day.is-static { height: auto; }
.day.is-static .day__pin { position: relative; height: auto; display: block; padding: 96px var(--gutter) 64px; }
.day.is-static .day__clock, .day.is-static .day__ticks { display: none; }
.day.is-static .day__stage { display: grid; gap: 72px; }
.day.is-static .ch { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; pointer-events: auto; }
.day.is-static .ch figure { height: auto; aspect-ratio: 4 / 5; clip-path: none; opacity: 1; }
.day.is-static .ch img { transform: none; }
.day.is-static .ch__text { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .day { height: auto; }
  .day__pin { position: relative; height: auto; display: block; padding: 72px 0 48px; }
  .day__title { padding: 0 var(--gutter); margin-bottom: 18px; }
  .day__clock, .day__ticks { display: none; }
  .day__stage { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .day__stage::-webkit-scrollbar { display: none; }
  .ch, .day.is-static .ch { position: relative; flex: 0 0 80%; grid-template-columns: 1fr; gap: 16px; align-content: start; scroll-snap-align: start; pointer-events: auto; }
  .ch figure { height: auto; aspect-ratio: 4 / 5; clip-path: none; }
  .ch img { transform: none; }
  .ch__text { opacity: 1; transform: none; align-self: start; }
  .ch__text h3 { font-size: 30px; }
  .ch__text p:last-child { font-size: 15px; margin-top: 10px; }
  .day__swipe { display: block; }
}

/* ---------- phones: less air, faster to the point ---------- */
@media (max-width: 700px) {
  .rituals, .card, .find { padding-top: 76px; padding-bottom: 76px; }
  .feed { padding: 64px 0; }
  .lamp__room { min-height: auto; padding-top: 72px; padding-bottom: 72px; }
  .rituals__title { margin-bottom: 32px; }
  .foot { padding-top: 56px; padding-bottom: 96px; }
}

/* ---------- reduced motion: same story, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .door { height: auto; } .door__pin { position: relative; } .door__capsule { clip-path: none; }
  .ch figure, .ch img, .ch__text { transition-property: opacity; }
  .ch figure { clip-path: none; opacity: 0; } .ch.is-on figure, .ch.was-on figure { opacity: 1; }
  .card__paper { transform: none; }
  .cord.is-pulled { animation: none; }
}