/* ═══════════════════════════════════════════════════════════
   TheWeblo Café
   Tokens and system documented in ../DESIGN.md
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}

:root{
  /* ── surface ── */
  --paper:      oklch(0.967 0.014 92);
  --paper-2:    oklch(0.938 0.019 90);
  --paper-3:    oklch(0.905 0.022 88);
  --forest:     oklch(0.268 0.052 156);
  --forest-2:   oklch(0.196 0.045 158);

  /* ── ink ── */
  --ink:        oklch(0.235 0.032 155);
  --ink-soft:   oklch(0.450 0.028 155);
  --ink-faint:  oklch(0.600 0.022 155);
  --cream:      oklch(0.958 0.020 88);
  --cream-soft: oklch(0.840 0.024 90);

  /* ── accent ── */
  --leaf:       oklch(0.640 0.130 152);
  --leaf-deep:  oklch(0.480 0.105 153);
  --clay:       oklch(0.638 0.132 44);
  --clay-deep:  oklch(0.500 0.118 42);

  --line:       color-mix(in oklch, var(--ink) 15%, transparent);
  --line-dark:  color-mix(in oklch, var(--cream) 18%, transparent);

  /* ── type ── */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --text:    "Archivo", system-ui, -apple-system, sans-serif;

  --s--1: clamp(0.80rem, 0.775rem + 0.12vw, 0.875rem);
  --s-0:  clamp(1.00rem, 0.960rem + 0.20vw, 1.125rem);
  --s-1:  clamp(1.30rem, 1.190rem + 0.55vw, 1.640rem);
  --s-2:  clamp(1.70rem, 1.450rem + 1.20vw, 2.400rem);
  --s-3:  clamp(2.20rem, 1.700rem + 2.40vw, 3.600rem);
  --s-4:  clamp(2.90rem, 1.950rem + 4.60vw, 5.600rem);
  --s-5:  clamp(3.40rem, 1.700rem + 8.00vw, 9.000rem);

  /* ── motion ── */
  --exp: cubic-bezier(0.16, 1, 0.3, 1);
  --qt:  cubic-bezier(0.25, 1, 0.35, 1);

  --gut: clamp(1.25rem, 4vw, 5rem);
  --shadow: 0 1px 2px oklch(0.235 0.032 155 / .06), 0 10px 30px -12px oklch(0.235 0.032 155 / .22);
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--s-0);
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-0.022em;
  font-variation-settings:"wdth" 96;
  text-wrap:balance;
}

p{text-wrap:pretty}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:0;left:0;z-index:200;
  background:var(--clay);color:var(--paper);
  padding:.7rem 1.1rem;border-radius:0 0 6px 0;
  text-decoration:none;font-size:var(--s--1);font-weight:600;
  transform:translateY(-110%);transition:transform .25s var(--exp);
}
.skip:focus-visible{transform:none}

:where(a,button,[tabindex],input,select,textarea):focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:2px;
}
.on-dark :focus-visible,.hero :focus-visible,.room :focus-visible,.pitch :focus-visible{outline-color:var(--leaf)}

/* ── the one repeated label style ── */
.label,.hero-eyebrow,.pitch-eyebrow,.panel-intro-hint,.build-legend,.visit-facts dt,.build-stats dt{
  font-family:var(--text);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ═══ buttons ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  padding:.85rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:var(--s--1);font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  background:none;
  transition:background-color .35s var(--exp),color .35s var(--exp),border-color .35s var(--exp),transform .35s var(--exp);
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--clay);color:oklch(0.99 0.008 88);border-color:var(--clay)}
.btn-solid:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:color-mix(in oklch,var(--ink) 5%,transparent)}
.hero .btn-ghost,.room .btn-ghost,.pitch .btn-ghost{border-color:var(--line-dark);color:var(--cream)}
.hero .btn-ghost:hover,.room .btn-ghost:hover,.pitch .btn-ghost:hover{border-color:var(--cream);background:color-mix(in oklch,var(--cream) 10%,transparent)}

/* ═══ nav ═══ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:1rem var(--gut);
  color:var(--cream);
  transition:background-color .5s var(--exp),color .5s var(--exp),box-shadow .5s var(--exp),padding .5s var(--exp);
}
.nav.is-stuck{
  background:color-mix(in oklch,var(--paper) 94%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
  padding-block:.65rem;
}
.wordmark{text-decoration:none;display:grid;line-height:1;margin-right:auto}
.wordmark-name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,2.4vw,1.45rem);
  letter-spacing:-.035em;font-variation-settings:"wdth" 92;
  position:relative;padding-right:.55em;
}
.seed{
  position:absolute;top:.06em;right:0;
  width:.34em;height:.34em;border-radius:50%;
  background:var(--clay);
}
.nav.is-stuck .seed{background:var(--clay-deep)}
.wordmark-sub{
  font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;opacity:.62;margin-top:.42em;
}
.nav-links{display:flex;gap:clamp(.9rem,2vw,1.9rem)}
.nav-links a{
  text-decoration:none;font-size:var(--s--1);font-weight:500;
  opacity:.78;transition:opacity .3s var(--exp);
  padding-block:.3rem;
}
.nav-links a:hover{opacity:1}
.nav-cta{padding:.6rem 1.15rem}
.nav:not(.is-stuck) .nav-cta{background:transparent;border-color:var(--line-dark);color:var(--cream)}
.nav:not(.is-stuck) .nav-cta:hover{background:var(--cream);border-color:var(--cream);color:var(--forest-2)}

@media (max-width:820px){
  .nav-links{display:none}
}

/* ═══ hero ═══ */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding:8rem var(--gut) clamp(2.5rem,6vh,4.5rem);
  background:var(--forest-2);
  color:var(--cream);
  overflow:hidden;
}
.hero-photo{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
  filter:saturate(.82) contrast(1.04);
}
.hero-drench{
  position:absolute;inset:0;z-index:-2;
  background:var(--forest);
  mix-blend-mode:multiply;
  opacity:.82;
}
.hero-dapple{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;
  mix-blend-mode:screen;
  opacity:.5;
  filter:blur(26px);
}
.hero-inner{max-width:min(60rem,100%)}
.hero-eyebrow{color:var(--leaf);margin-bottom:clamp(1rem,2.5vh,1.8rem)}
.hero-title{
  font-size:var(--s-5);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.038em;
  font-variation-settings:"wdth" 100,"opsz" 96;
  max-width:14ch;
}
.hero-lead{
  margin-top:clamp(1.4rem,3vh,2.2rem);
  max-width:46ch;
  font-size:clamp(1rem,.94rem + .4vw,1.22rem);
  line-height:1.62;
  color:var(--cream-soft);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.6rem,3.5vh,2.4rem)}
.hero-status{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:clamp(1.4rem,3vh,2rem);
  font-size:var(--s--1);color:var(--cream-soft);
}
.dot{
  width:.5rem;height:.5rem;border-radius:50%;
  background:var(--ink-faint);flex:none;
  box-shadow:0 0 0 0 color-mix(in oklch,var(--leaf) 60%,transparent);
}
.is-open .dot{background:var(--leaf);animation:pulse 3.4s var(--qt) infinite}
.is-closed .dot{background:var(--clay)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--leaf) 55%,transparent)}
  70%,100%{box-shadow:0 0 0 .7rem transparent}
}
.scroll-cue{position:absolute;right:var(--gut);bottom:2.6rem;width:1px;height:4.5rem;background:var(--line-dark)}
.scroll-cue span{position:absolute;inset:0;background:var(--leaf);transform-origin:top;animation:cue 2.8s var(--qt) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:700px){
  .scroll-cue{display:none}
  /* leave room for the fixed pitch toggle, which sits bottom-right */
  .hero{padding-bottom:5.5rem}
  .foot{padding-bottom:6rem}
}

/* ═══ marquee ═══ */
.marquee{
  background:var(--clay);color:oklch(0.99 0.01 88);
  padding:.85rem 0;overflow:hidden;
  border-block:1px solid var(--clay-deep);
}
.marquee-track{
  display:flex;gap:2.2rem;white-space:nowrap;width:max-content;
  animation:slide 44s linear infinite;
}
.marquee-track span{
  font-size:var(--s--1);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ═══ the counter ═══ */
.counter{background:var(--paper);position:relative}
/* padding-top keeps the panel index numbers clear of the fixed nav */
.counter-stick{position:sticky;top:0;height:100svh;padding-top:4.5rem;display:flex;align-items:center;overflow:hidden}
.counter-track{
  display:flex;align-items:stretch;
  gap:clamp(1rem,2vw,2rem);
  padding-inline:var(--gut);
  will-change:transform;
}
.panel{flex:none;display:flex;flex-direction:column}
.panel-intro{
  width:min(23rem,72vw);justify-content:center;
  padding-right:clamp(1rem,3vw,3rem);
  border-right:1px solid var(--line);
}
.panel-intro-h{font-size:var(--s-3);margin-bottom:1rem}
.panel-intro p{color:var(--ink-soft);max-width:32ch;font-size:var(--s--1);line-height:1.65}
.panel-intro-hint{margin-top:1.6rem;color:var(--clay-deep)}

.panel-item{
  width:clamp(16rem,25vw,21rem);
  position:relative;padding-top:1.9rem;
}
.panel-no{
  position:absolute;top:0;left:0;
  font-family:var(--display);font-size:var(--s--1);font-weight:700;
  letter-spacing:.1em;color:var(--clay-deep);
}
.panel-fig{
  flex:1 1 auto;min-height:0;
  overflow:hidden;border-radius:3px;background:var(--paper-3);
}
.panel-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--exp)}
.panel-item:hover .panel-fig img{transform:scale(1.045)}
.panel-body{padding-top:1.1rem}
.panel-body h3{font-size:var(--s-1);margin-bottom:.5rem}
.panel-body p{font-size:var(--s--1);line-height:1.62;color:var(--ink-soft);max-width:38ch}
.panel-meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.78rem!important;color:var(--ink-faint)!important;
}
.panel-price{font-family:var(--display);font-weight:700;font-size:var(--s-0);color:var(--ink)}
/* every item carries a photograph; these two run a shorter figure and sit low,
   so the counter still has a vertical rhythm rather than six identical columns */
.panel-inset{justify-content:flex-end;padding-bottom:.5rem}
.panel-inset .panel-fig{flex:0 0 46%}
.panel-inset .panel-body{border-top:3px solid var(--forest);margin-top:1.1rem;padding-top:1.3rem}
.panel-inset .panel-body p{max-width:34ch}

/* touch fallback: native horizontal scroll */
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .counter-rail{height:auto!important}
  .counter-stick{position:static;height:auto;padding-block:clamp(3.5rem,10vh,6rem);padding-top:clamp(3.5rem,10vh,6rem)}
  .counter-track{
    transform:none!important;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:1rem;-webkit-overflow-scrolling:touch;
  }
  .panel{scroll-snap-align:start}
  .panel-item{width:min(20rem,78vw);height:min(30rem,72svh)}
  .panel-intro{width:min(20rem,78vw)}
}

/* ═══ interlude ═══ */
.interlude{
  position:relative;isolation:isolate;
  min-height:min(72svh,34rem);
  display:grid;place-items:center;
  padding:clamp(4rem,12vh,8rem) var(--gut);
  background:var(--forest-2);
  overflow:hidden;
}
.interlude-media{position:absolute;inset:-12% 0;z-index:-2}
.interlude-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.interlude::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--forest-2);opacity:.66;
}
/* an explicit measure: `ch` here would resolve against the body font, not the display font */
.interlude-quote{max-width:min(42rem,88vw);text-align:center;color:var(--cream)}
.interlude-quote p{
  font-family:var(--display);font-weight:500;
  font-size:var(--s-3);line-height:1.08;letter-spacing:-.028em;
  font-variation-settings:"wdth" 94;
}
.interlude-quote cite{
  display:block;margin-top:1.6rem;font-style:normal;
  font-size:var(--s--1);color:var(--leaf);letter-spacing:.04em;
}

/* ═══ build a cup ═══ */
.build{
  background:var(--paper-2);
  padding:clamp(4rem,11vh,8rem) var(--gut) clamp(4rem,11vh,7rem);
  border-block:1px solid var(--line);
}
.build-head{max-width:44rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.build-head h2{font-size:var(--s-3);margin-bottom:.9rem}
.build-head p{color:var(--ink-soft);max-width:52ch}
.build-grid{
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.build-visual{position:sticky;top:6rem}
#cup{width:100%;height:auto;max-width:24rem;margin-inline:auto}
.build-legend{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;justify-content:center;
  margin-top:1.4rem;color:var(--ink-faint);
}
.build-legend li{display:inline-flex;align-items:center;gap:.45rem}
.build-legend i{width:.7rem;height:.7rem;border-radius:2px;flex:none;border:1px solid var(--line)}

.ctrl{margin-bottom:clamp(1.3rem,3vh,1.9rem)}
.ctrl legend{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.6rem;
}
.seg{display:flex;flex-wrap:wrap;gap:.45rem}
.seg button{
  border:1px solid var(--line);background:transparent;
  padding:.62rem 1rem;border-radius:999px;cursor:pointer;
  font-size:var(--s--1);font-weight:500;line-height:1.25;
  display:inline-flex;align-items:baseline;gap:.4rem;
  transition:background-color .3s var(--exp),border-color .3s var(--exp),color .3s var(--exp);
}
.seg button em{font-style:normal;font-size:.72rem;opacity:.6;letter-spacing:.02em}
.seg button:hover{border-color:var(--ink-soft)}
.seg button.on{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.seg button.on em{opacity:.72}

.build-out{
  margin-top:clamp(1.8rem,4vh,2.6rem);
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.build-name{
  font-family:var(--display);font-weight:600;font-size:var(--s-2);
  letter-spacing:-.022em;line-height:1.06;margin-bottom:1.2rem;
}
.build-stats{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:flex-end}
.build-stats dt{color:var(--ink-faint);margin-bottom:.3rem}
.build-stats dd{
  font-family:var(--display);font-weight:700;font-size:var(--s-1);
  letter-spacing:-.02em;
}
.build-strength{flex:1 1 9rem;min-width:8rem}
.meter{display:block;height:.4rem;background:var(--paper-3);border-radius:99px;overflow:hidden;margin-bottom:.55rem}
.meter i{display:block;height:100%;background:var(--forest);transform-origin:left;transition:transform .6s var(--exp)}
.build-save{margin-top:1.8rem}
.build-saved{margin-top:.9rem;font-size:var(--s--1);color:var(--leaf-deep);font-weight:600}

@media (max-width:880px){
  .build-grid{grid-template-columns:1fr}
  .build-visual{position:static}
  #cup{max-width:17rem}
}

/* ═══ the room ═══ */
.room{
  background:var(--forest);color:var(--cream);
  padding:clamp(4rem,12vh,8rem) var(--gut);
}
.room-head{max-width:40rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.room-head h2{font-size:var(--s-3);margin-bottom:.9rem}
.room-head p{color:var(--cream-soft);max-width:50ch}
.room-grid{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;
}
/* ── floor plan ── */
.plan{width:100%;height:auto;overflow:visible}
.fl-dot{fill:color-mix(in oklch,var(--cream) 9%,transparent)}
.fz-floor{stroke:none}
.fz-shell{fill:none;stroke:color-mix(in oklch,var(--cream) 26%,transparent);stroke-width:1.5}
.fz-thresh{stroke:color-mix(in oklch,var(--cream) 22%,transparent);stroke-width:1;stroke-dasharray:4 6;fill:none}
.fz-door{stroke:var(--leaf);stroke-width:3;fill:none;stroke-linecap:round}
.fz-swing{stroke:color-mix(in oklch,var(--leaf) 45%,transparent);stroke-width:1;fill:none;stroke-dasharray:3 4}
.fz-arrow{stroke:var(--leaf);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fz-note,.fz-street{
  fill:var(--cream-soft);font-family:var(--text);font-size:8px;
  letter-spacing:.2em;text-anchor:middle;opacity:.55;
}
.fz-street{fill:var(--leaf);opacity:.8}

.zone{cursor:pointer}
.z-hit{
  fill:color-mix(in oklch,var(--cream) 3%,transparent);
  stroke:color-mix(in oklch,var(--cream) 14%,transparent);stroke-width:1;
  transition:fill .5s var(--exp),stroke .5s var(--exp);
}
.z-label,.z-sub{
  fill:var(--cream);font-family:var(--text);font-weight:600;
  font-size:11px;letter-spacing:.15em;text-anchor:middle;
  pointer-events:none;transition:fill .45s var(--exp);
}
.z-sub{font-size:8.5px;font-weight:400;letter-spacing:.09em;fill:var(--cream-soft);opacity:.7}

/* furniture is drawn, not filled, until the zone is chosen */
.z-furn{pointer-events:none}
.tbl,.longtbl,.bar,.bench,.backbar,.machine,.grinder{
  fill:none;stroke:color-mix(in oklch,var(--cream) 34%,transparent);stroke-width:1.4;
  transition:fill .5s var(--exp),stroke .5s var(--exp);
}
.bar,.machine{stroke-width:1.8}
.seat{
  fill:none;stroke:color-mix(in oklch,var(--cream) 30%,transparent);stroke-width:1.3;
  transform-box:fill-box;transform-origin:center;
  transition:fill .45s var(--exp),stroke .45s var(--exp),transform .55s var(--exp);
}
.glazing,.plant{fill:none;stroke:color-mix(in oklch,var(--leaf) 55%,transparent);stroke-width:1.4;stroke-linecap:round}
.tree-canopy{fill:color-mix(in oklch,var(--leaf) 8%,transparent);stroke:color-mix(in oklch,var(--leaf) 40%,transparent);stroke-width:1.2}
.tree-canopy-2{fill:none;stroke:color-mix(in oklch,var(--leaf) 26%,transparent)}
.tree-trunk{fill:color-mix(in oklch,var(--leaf) 40%,transparent);stroke:none}
.z-tree{transform-box:fill-box;transform-origin:center;animation:sway 14s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.1deg) scale(1)}50%{transform:rotate(1.1deg) scale(1.018)}}

.zone:hover .z-hit,.zone:focus-visible .z-hit{
  fill:color-mix(in oklch,var(--cream) 8%,transparent);
  stroke:color-mix(in oklch,var(--cream) 42%,transparent);
}
.zone:hover .seat,.zone:hover .tbl,.zone:hover .longtbl,.zone:hover .bar,.zone:hover .bench{
  stroke:color-mix(in oklch,var(--cream) 60%,transparent);
}

/* chosen: the room fills in, seat by seat */
.zone.is-on .z-hit{
  fill:color-mix(in oklch,var(--leaf) 15%,transparent);
  stroke:var(--leaf);stroke-width:1.6;
}
.zone.is-on .z-label{fill:oklch(0.99 0.01 88)}
.zone.is-on .z-sub{fill:var(--leaf);opacity:1}
.zone.is-on .tbl,.zone.is-on .longtbl,.zone.is-on .bar,.zone.is-on .bench,
.zone.is-on .backbar,.zone.is-on .machine,.zone.is-on .grinder{
  stroke:var(--leaf);fill:color-mix(in oklch,var(--leaf) 20%,transparent);
}
.zone.is-on .seat{
  fill:var(--leaf);stroke:var(--leaf);
  animation:seatIn .5s var(--exp) both;
  animation-delay:calc(var(--n,0) * 42ms);
}
@keyframes seatIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}

.plan-hint{
  margin-top:1rem;text-align:center;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leaf);opacity:.75;
}

.room-detail{display:grid;gap:1.8rem}
.room-photo{overflow:hidden;border-radius:4px;aspect-ratio:3/2;background:var(--forest-2)}
.room-photo img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--exp)}
.room-photo.is-swapping img{opacity:0}
.room-copy h3{font-size:var(--s-2);margin-bottom:.7rem}
.room-copy p{color:var(--cream-soft);max-width:44ch}
.room-facts{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 1.6rem;
}
.room-facts li{
  border:1px solid var(--line-dark);border-radius:999px;
  padding:.35rem .85rem;font-size:.76rem;color:var(--cream-soft);
}
@media (max-width:880px){.room-grid{grid-template-columns:1fr}}

/* ═══ visit ═══ */
.visit{
  padding:clamp(4rem,11vh,8rem) var(--gut);
  display:grid;gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start;
}
.visit-hours h2{font-size:var(--s-3);margin-bottom:1.2rem}
.visit-status{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:var(--s-1);
  letter-spacing:-.02em;
}
.visit-next{color:var(--ink-soft);margin-top:.4rem;font-size:var(--s--1)}
.daystrip{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(1.8rem,4vh,2.6rem);
}
.daystrip li{background:var(--paper);padding:.85rem .5rem;text-align:center}
.daystrip .d{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);margin-bottom:.45rem;
}
.daystrip .h{font-size:.78rem;line-height:1.4;color:var(--ink-soft)}
.daystrip .is-today{background:var(--forest);color:var(--cream)}
.daystrip .is-today .d{color:var(--leaf)}
.daystrip .is-today .h{color:var(--cream)}
.visit-note{margin-top:1.4rem;font-size:var(--s--1);color:var(--ink-faint);max-width:46ch}

.visit-where{border-top:3px solid var(--forest);padding-top:1.6rem}
.visit-where h3{font-size:var(--s-1);margin-bottom:1rem}
.visit-where address{font-style:normal;line-height:1.7;color:var(--ink-soft);margin-bottom:1.6rem}
.visit-facts div{padding:.75rem 0;border-top:1px solid var(--line)}
.visit-facts dt{color:var(--ink-faint);margin-bottom:.2rem}
.visit-facts dd{font-size:var(--s--1)}
@media (max-width:820px){.visit{grid-template-columns:1fr}}

/* ═══ book ═══ */
.book{
  background:var(--paper-2);border-top:1px solid var(--line);
  padding:clamp(4rem,11vh,8rem) var(--gut);
}
.book-head{max-width:38rem;margin-bottom:clamp(2.2rem,5vh,3.2rem)}
.book-head h2{font-size:var(--s-3);margin-bottom:.8rem}
.book-head p{color:var(--ink-soft)}
.book-form{
  display:grid;gap:1.2rem 1.4rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:60rem;
}
.field{display:grid;gap:.4rem;align-content:start}
.field-wide{grid-column:span 2}
.field-full{grid-column:1/-1}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.field input,.field select,.field textarea{
  background:var(--paper);
  border:1px solid var(--line);border-radius:4px;
  padding:.72rem .85rem;font-size:var(--s--1);
  width:100%;
  transition:border-color .3s var(--exp);
}
.field textarea{resize:vertical;min-height:3.2rem;font-family:inherit}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-faint)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.75}
.field.has-err input,.field.has-err select{border-color:var(--clay-deep)}
.err{font-size:.74rem;color:var(--clay-deep);min-height:1em}

.stepper{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:4px;background:var(--paper);overflow:hidden}
.stepper button{
  border:0;background:transparent;cursor:pointer;
  width:2.6rem;font-size:1.1rem;line-height:1;color:var(--ink-soft);
  transition:background-color .25s var(--exp);
}
.stepper button:hover{background:var(--paper-3)}
.stepper input{border:0;text-align:center;background:transparent;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.book-summary{
  grid-column:1/-1;
  border-top:3px solid var(--forest);padding-top:1.1rem;margin-top:.4rem;
  font-family:var(--display);font-weight:500;
  font-size:var(--s-1);line-height:1.28;letter-spacing:-.018em;
  color:var(--ink);
}
.book-summary b{font-weight:700;color:var(--clay-deep)}
.book-submit{grid-column:1/-1;justify-self:start;margin-top:.4rem}
.book-fine{grid-column:1/-1;font-size:var(--s--1);color:var(--ink-faint);max-width:44ch}

.book-done{max-width:34rem;border-top:3px solid var(--leaf-deep);padding-top:1.6rem}
.book-done h3{font-size:var(--s-2);margin-bottom:.8rem}
.book-done p{color:var(--ink-soft);margin-bottom:.9rem}
.book-done-note{font-size:var(--s--1)}
@media (max-width:760px){
  .book-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-wide{grid-column:span 2}
}

/* ═══ deconstruction stage ═══
   One scroll value drives eight layers at once. Every layer reads a segment of it
   (--pBg, --pExp, --pWire, --pGrid, --pNote, --pEnd), so they blend instead of
   firing in sequence. Only transform and opacity animate. */
.reveal{position:relative}
.reveal-rail{height:340vh}
.reveal-stage{
  position:sticky;top:0;
  height:100svh;overflow:hidden;
  display:grid;place-items:center;
  perspective:1400px;
  --pBg:0; --pExp:0; --pWire:0; --pGrid:0; --pNote:0; --pEnd:0;
  background:color-mix(in oklch, var(--forest-2) calc(var(--pBg) * 100%), var(--paper-2));
}

/* blueprint rules, drawn on with stroke-dashoffset */
.rv-grid{position:absolute;inset:0;width:100%;height:100%;opacity:calc(var(--pGrid) * .55)}
.rv-grid path{
  fill:none;stroke:var(--leaf);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pGrid));
}
.rv-dims path{stroke:var(--clay);stroke-width:1.5}

.rv-scene{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.rv-tile{
  position:absolute;top:50%;left:50%;
  width:clamp(112px,15vw,208px);aspect-ratio:4/3;
  margin:0;
  border:1px solid color-mix(in oklch,var(--leaf) calc(20% + var(--pWire) * 80%),transparent);
  border-radius:3px;
  /* the frame keeps a faint fill so the box still reads once the photo has gone */
  background:color-mix(in oklch,var(--leaf) calc(var(--pWire) * 11%),transparent);
  will-change:transform;
}
.rv-tile img{
  width:100%;height:100%;object-fit:cover;border-radius:2px;
  opacity:calc(1 - var(--pWire) * .7);
  filter:saturate(calc(1 - var(--pWire) * .72));
}
/* the brand green washes over each frame as it turns into a diagram */
.rv-veil{
  position:absolute;inset:0;border-radius:2px;
  background:var(--forest);mix-blend-mode:multiply;
  opacity:calc(var(--pWire) * .45);
}
.rv-tag{
  position:absolute;left:0;bottom:-1.45rem;
  font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leaf);white-space:nowrap;
  opacity:calc(var(--pWire) * (1 - var(--pEnd)));
}

.rv-notes{
  position:absolute;left:var(--gut);bottom:clamp(2rem,8vh,5rem);
  display:grid;gap:.55rem;
}
.rv-notes li{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  display:flex;align-items:baseline;
  opacity:calc(max(0, var(--pNote) - var(--i) * .18) * (1 - var(--pEnd)));
  transform:translateY(calc((1 - var(--pNote)) * 14px));
}
.rv-notes b{
  font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--leaf);
  margin-right:.45rem;letter-spacing:-.02em;
}

.rv-final{
  position:absolute;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.6rem,1rem + 3vw,3.2rem);
  letter-spacing:-.03em;line-height:1.05;text-align:center;
  color:var(--cream);max-width:16ch;
  opacity:var(--pEnd);
  transform:translateY(calc((1 - var(--pEnd)) * 26px)) scale(calc(.96 + var(--pEnd) * .04));
}

/* a light sweep, so the stage stays alive when the reader pauses */
.rv-scan{
  position:absolute;left:0;right:0;height:38vh;
  background:var(--leaf);opacity:calc(var(--pWire) * .09);
  animation:scan 6.5s cubic-bezier(.5,0,.5,1) infinite;
  pointer-events:none;
}
@keyframes scan{0%{transform:translateY(-140%)}100%{transform:translateY(320%)}}

/* the clay rule that becomes the top edge of the pitch */
.rv-seam{
  position:absolute;left:50%;bottom:0;height:2px;background:var(--clay);
  width:calc(var(--pEnd) * 100%);transform:translateX(-50%);
}

@media (max-width:760px){
  .reveal-rail{height:240vh}
  .rv-tile{width:clamp(92px,26vw,140px)}
  .rv-notes{font-size:.68rem}
}

/* no scroll choreography: the stage becomes a plain, finished composition */
@media (prefers-reduced-motion:reduce){
  .reveal-rail{height:auto}
  .reveal-stage{
    position:static;height:auto;padding:clamp(3.5rem,9vh,6rem) var(--gut);
    display:block;perspective:none;
    --pBg:1; --pExp:1; --pWire:1; --pGrid:1; --pNote:1; --pEnd:1;
  }
  .rv-scene{display:flex;flex-wrap:wrap;gap:2.4rem 1.6rem;justify-content:center;height:auto}
  .rv-tile{position:static;transform:none!important;opacity:1!important}
  .rv-notes{position:static;margin-top:3rem;justify-items:center;text-align:center}
  .rv-final{position:static;margin:2.5rem auto 0;transform:none}
  .rv-grid,.rv-scan,.rv-seam{display:none}
}

/* ═══ the reveal ═══ */
.pitch{
  background:var(--forest-2);color:var(--cream);
  padding:clamp(5rem,14vh,10rem) var(--gut);
}
.pitch-eyebrow{color:var(--clay);margin-bottom:1.4rem}
.pitch-h{
  font-size:var(--s-4);font-weight:500;line-height:.98;
  letter-spacing:-.036em;font-variation-settings:"wdth" 100,"opsz" 72;
  max-width:16ch;margin-bottom:clamp(1.6rem,4vh,2.4rem);
}
.pitch-lead{max-width:56ch;color:var(--cream-soft);font-size:clamp(1rem,.95rem + .35vw,1.18rem);line-height:1.65}
.pitch-lead strong{color:var(--cream);font-weight:600}
.pitch-lead-2{margin-top:1.1rem}

.ledger{margin-top:clamp(3rem,8vh,5rem);max-width:64rem}
.ledger-h{
  font-size:.72rem!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leaf);font-family:var(--text);margin-bottom:1rem;
}
.ledger-row{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) 11rem;
  gap:1.5rem;align-items:baseline;
  padding:1.6rem 0;border-top:1px solid var(--line-dark);
  transition:background-color .4s var(--exp);
}
.ledger-row:last-child{border-bottom:1px solid var(--line-dark)}
.ledger-row:hover{background:color-mix(in oklch,var(--cream) 4%,transparent)}
.ledger-code{font-size:.74rem;letter-spacing:.14em;color:var(--leaf);font-weight:600}
.ledger-main h4{font-size:var(--s-1);margin-bottom:.4rem}
.ledger-main h4 em{
  font-style:normal;font-family:var(--text);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--forest-2);
  background:var(--leaf);padding:.2rem .5rem;border-radius:99px;
  vertical-align:middle;margin-left:.6rem;
}
.ledger-main p{color:var(--cream-soft);font-size:var(--s--1);line-height:1.6;max-width:52ch}
.ledger-price{
  font-family:var(--display);font-weight:700;font-size:var(--s-1);
  letter-spacing:-.02em;text-align:right;
}
.ledger-row-care .ledger-price{font-size:var(--s-0);color:var(--cream-soft)}
@media (max-width:760px){
  .ledger-row{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .ledger-code{grid-row:1}
  .ledger-price{grid-row:1;text-align:right}
  .ledger-main{grid-column:1/-1;margin-top:.3rem}
}

.pitch-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(2.5rem,6vh,3.5rem)}
.pitch-contact{margin-top:1.6rem;font-size:var(--s--1);color:var(--cream-soft)}
.pitch-contact a{color:var(--leaf)}

/* ═══ footer ═══ */
.foot{
  background:var(--forest-2);color:var(--cream-soft);
  /* the deep bottom padding keeps the last line clear of the fixed pitch toggle */
  padding:2.5rem var(--gut) clamp(5rem,9vh,7rem);
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between;
  border-top:1px solid var(--line-dark);
}
.foot-mark{
  font-family:var(--display);font-weight:700;font-size:var(--s-1);
  letter-spacing:-.035em;color:var(--cream);position:relative;padding-right:.55em;
}
.foot-note{font-size:var(--s--1);max-width:44ch}
.foot-note a{color:var(--leaf)}

/* ═══ pitch mode ═══ */
.pitch-toggle{
  position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);
  z-index:95;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--forest-2);color:var(--cream);
  border:1px solid var(--line-dark);border-radius:999px;
  padding:.6rem .95rem .6rem .7rem;cursor:pointer;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;
  box-shadow:var(--shadow);
  transition:background-color .4s var(--exp),border-color .4s var(--exp);
}
.pitch-toggle[aria-pressed="true"]{background:var(--clay);border-color:var(--clay)}
.pitch-toggle-track{
  width:2rem;height:1.1rem;border-radius:99px;flex:none;
  background:color-mix(in oklch,var(--cream) 22%,transparent);
  position:relative;transition:background-color .4s var(--exp);
}
.pitch-toggle-track i{
  position:absolute;top:.15rem;left:.15rem;
  width:.8rem;height:.8rem;border-radius:50%;background:var(--cream);
  transition:transform .45s var(--exp);
}
.pitch-toggle[aria-pressed="true"] .pitch-toggle-track i{transform:translateX(.9rem)}

[data-annot]{position:relative}
body.pitch-on [data-annot]::after{
  content:"";position:absolute;inset:8px;pointer-events:none;z-index:40;
  border:1px dashed color-mix(in oklch,var(--clay) 70%,transparent);
  border-radius:4px;
}
.annot{position:absolute;z-index:45;display:none;max-width:19rem}
body.pitch-on .annot{display:block}
.annot-pin{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--clay);color:oklch(0.99 0.01 88);
  border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.82rem;
  box-shadow:var(--shadow);
}
.annot-card{
  margin-top:.5rem;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--clay);border-radius:5px;
  padding:.85rem 1rem;box-shadow:var(--shadow);
  transform-origin:top left;
  transition:opacity .35s var(--exp),transform .35s var(--exp);
}
.annot.is-shut .annot-card{opacity:0;transform:scale(.94);pointer-events:none}
.annot-card h4{
  font-family:var(--text);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clay-deep);
  margin-bottom:.4rem;
}
.annot-card p{font-size:.82rem;line-height:1.5;color:var(--ink-soft)}

.annot-1{top:22%;right:6%}
.annot-2{top:12%;right:5%}
.annot-3{top:5%;right:5%}
.annot-4{top:6%;right:5%}
.annot-5{top:4%;right:5%}
.annot-6{top:5%;right:5%}
@media (max-width:1100px){
  .annot{position:static;display:none;max-width:none;margin-bottom:1.5rem}
  body.pitch-on .annot{display:block}
  .annot-card{margin-top:.5rem}
}

/* ═══ reveal ═══ */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s var(--exp),transform .9s var(--exp)}
[data-reveal].is-in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.wi{display:inline-block;transform:translateY(105%);transition:transform 1.05s var(--exp)}
.is-in .wi,.split-ready .wi{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .wi{transform:none}
  .marquee-track{animation:none}
  .interlude-media img{transform:none!important}
}