/* ======================================================================
   MORNINGVALE COFFEE : cinematic build (Jul 2026)
   Full-bleed editorial · dive-into-cup hero · spectacular nav · per-page
   journeys · one unified warm grade · authored, buttery, 60fps motion.
   Type: Fraunces (display) + Inter (body). Accent: crema caramel.
   ====================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* one coherent warm tone: golden cream -> deep roast */
  --cream:#F6EAD6; --cream2:#EFE0C8; --oat:#E7D4B6; --latte:#DcC29c; --sand:#CDAE82;
  --milk:#FBF3E6;
  --crema:#C97E36; --crema-deep:#A5602545; --crema-ink:#8A501E;
  --espresso:#20140C; --cocoa:#372415; --cocoa2:#4E3722; --muted:#725636;
  --line:rgba(58,38,20,.15); --line-soft:rgba(58,38,20,.08);
  --shadow:0 40px 90px -40px rgba(42,24,8,.6), 0 14px 34px -20px rgba(42,24,8,.42);
  --shadow-sm:0 16px 40px -22px rgba(42,24,8,.5);
  /* long, silky, weighted easings : nothing abrupt */
  --e-silk:cubic-bezier(.22,1,.36,1);      /* smooth expo-out */
  --e-out:cubic-bezier(.16,1,.3,1);         /* strong settle */
  --e-soft:cubic-bezier(.4,.12,.2,1);
  --t:.55s; --t2:.9s; --t-slow:1.3s; --t-luxe:1.7s;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Fira Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* clean neutral sans for tiny uppercase micro-labels (serif caps read awkward) */
  --label:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --wrap:1200px;
  /* ONE unified luxurious warm grade on every image, everywhere */
  --grade:sepia(.34) saturate(1.32) contrast(1.02) brightness(1.04) hue-rotate(-6deg);
}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{font-family:var(--sans); font-weight:400; font-size:18px; line-height:1.68;
  color:var(--espresso); background:var(--cream); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden; font-synthesis:none}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2.5px solid var(--crema); outline-offset:3px; border-radius:5px}

/* ---- gradient-as-light behind everything ---- */
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 14% -8%, #FFF1DC 0%, rgba(255,241,220,0) 46%),
    radial-gradient(120% 120% at 90% 110%, #E4CAA0 0%, rgba(228,202,160,0) 52%),
    linear-gradient(180deg,var(--cream) 0%, var(--cream2) 100%)}
/* ---- enveloping atmosphere: soft warm light-planes (pure gradients, no filter : cheap & 60fps) ---- */
.ambient{position:fixed; inset:0; z-index:8; pointer-events:none; overflow:hidden;
  transform:translate3d(0,calc(var(--depth,0) * -40px),0)}
.ambient .glow{position:absolute; border-radius:50%; animation:float 30s ease-in-out infinite}
.ambient .g1{width:66vw;height:66vw;left:-18vw;top:-18vh; background:radial-gradient(circle,rgba(255,214,150,.28),rgba(255,214,150,0) 74%)}
.ambient .g2{width:82vw;height:82vw;right:-28vw;top:32vh; animation-duration:38s; animation-delay:-8s; background:radial-gradient(circle,rgba(201,126,54,.22),rgba(201,126,54,0) 74%)}
.ambient .g3{width:58vw;height:58vw;left:16vw;bottom:-26vh; animation-duration:34s; animation-delay:-16s; background:radial-gradient(circle,rgba(120,72,38,.18),rgba(120,72,38,0) 76%)}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(2vw,-2.6vh,0)}}
.depthveil{position:fixed; inset:0; z-index:8; pointer-events:none;
  background:radial-gradient(134% 110% at 50% 20%, rgba(22,12,6,0) 56%, rgba(20,11,5,.55) 100%);
  opacity:calc(var(--depth,0) * .5)}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(22px,5vw,72px)}
.bleed{width:100vw; margin-left:calc(50% - 50vw)}
.skip{position:fixed; left:14px; top:-60px; z-index:60; background:var(--espresso); color:var(--milk);
  padding:12px 18px; border-radius:12px; font-weight:600; transition:top .3s var(--e-silk)}
.skip:focus{top:14px}

/* ============================ TYPE ============================ */
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:-.008em;
  font-optical-sizing:auto; overflow-wrap:break-word}
/* display italic is intentionally not loaded : heading emphasis is colour, never a slant */
h1 em,h2 em,h3 em,h4 em,.fbig em,.wm b em,.menu-nav a em,.dive-title h1 em,.arrival h2 em,.story-hero h1 em,.pagehero h1 em,.approach-copy h1 em{font-style:normal}
p,.nm,.lede,li{overflow-wrap:break-word}
html{hyphens:none; -webkit-hyphens:none}
/* short labels must never break mid-word */
.hrow span,.hrow b,.infolist b,.cnum,.eyebrow,.k,.idx{overflow-wrap:normal; word-break:keep-all; hyphens:none}
.mline,.mline .nm,.infolist div,.infolist span,.frow,.footline,.acts,.spec{min-width:0}
em{font-style:italic; color:var(--crema-ink)}
.eyebrow{font-family:var(--label); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--crema-ink)}
/* all tiny uppercase labels use the clean sans (serif all-caps reads awkward) */
.eyebrow,.menu-eyebrow,.k,.cnum,.lbl,.idx,.tag,.sig,.hourscard h3,.doorhint,.wm span,.spec .k,.arw,.mapnote{font-family:var(--label)!important}
.lede{font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--cocoa2); max-width:54ch}

/* ============================ AUTHORED REVEAL SYSTEM (transform-only, never blank) ============================
   Content is ALWAYS visible (no opacity:0) : reveals only settle a gentle transform, so a
   blank/empty frame is structurally impossible no matter how the reveal is timed. Varied per
   section: word-rise, slide-l/r, depth-settle, rise, staggered lists. */
.js [data-rv]{transition:transform var(--t2) var(--e-silk) var(--d,0ms)}
.js [data-rv="rise"]{transform:translateY(15px)}
.js [data-rv="slide-l"]{transform:translateX(-22px)}
.js [data-rv="slide-r"]{transform:translateX(22px)}
.js [data-rv="depth"]{transform:scale(1.03)}
.js [data-rv="mask"]{transform:translateY(20px)}
[data-rv].in{transform:none}
/* word build : each word settles up into place, always visible */
.js .wd{display:inline-block; vertical-align:top}
.js .wd > i{display:inline-block; font-style:inherit; transform:translateY(.32em);
  transition:transform var(--t2) var(--e-silk); transition-delay:calc(var(--wi,0) * 40ms)}
[data-rv="words"].in .wd > i{transform:none}
/* list build : rows settle one after another */
.js [data-rv="stagger"] > *{transform:translateY(13px);
  transition:transform var(--t2) var(--e-silk); transition-delay:calc(var(--si,0) * 52ms)}
[data-rv="stagger"].in > *{transform:none}

/* ============================ TOP BAR + THREE-DOTS ============================ */
.bar{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.4vw,22px) clamp(20px,4vw,54px); color:var(--milk);
  transition:background .5s var(--e-silk), padding .5s var(--e-silk), color .5s var(--e-silk)}
.bar.solid{background:rgba(25,15,8,.95);
  padding-top:clamp(10px,1.6vw,14px); padding-bottom:clamp(10px,1.6vw,14px);
  box-shadow:0 10px 40px -24px rgba(0,0,0,.7)}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{width:38px; height:38px; flex:none}
.brand .wm{display:flex; flex-direction:column; line-height:1}
.brand .wm b{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.01em; color:inherit}
.brand .wm b em{color:var(--crema); font-style:italic}
.brand .wm span{font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; opacity:.66; margin-top:4px}
.dots{width:52px; height:52px; border:0; background:rgba(255,240,222,.08); border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px; color:inherit;
  transition:background .45s var(--e-silk), transform .5s var(--e-out)}
.dots:hover{background:rgba(255,240,222,.16); transform:scale(1.06)}
.dots i{width:4.5px; height:4.5px; border-radius:50%; background:currentColor;
  transition:transform .5s var(--e-out), opacity .4s}
.dots[aria-expanded="true"]{background:rgba(255,240,222,.14)}
.dots[aria-expanded="true"] i:nth-child(1){transform:translateX(6px) rotate(45deg) scaleX(3.2); border-radius:2px}
.dots[aria-expanded="true"] i:nth-child(2){opacity:0}
.dots[aria-expanded="true"] i:nth-child(3){transform:translateX(-6px) rotate(-45deg) scaleX(3.2); border-radius:2px}

/* ============================ SPECTACULAR MENU OVERLAY ============================ */
.menu{position:fixed; inset:0; z-index:39; visibility:hidden; pointer-events:none;
  clip-path:circle(0% at calc(100% - 46px) 46px); transition:clip-path .8s var(--e-silk), visibility .8s}
.menu.open{visibility:visible; pointer-events:auto; clip-path:circle(150% at calc(100% - 46px) 46px)}
.menu-bg{position:absolute; inset:0; overflow:hidden; background:#1a0f07}
.menu-bg img{width:100%; height:100%; object-fit:cover; filter:var(--grade) brightness(.5);
  transform:scale(1.18); transition:transform 1.4s var(--e-silk); opacity:.5}
.menu.open .menu-bg img{transform:scale(1)}
.menu-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(24,14,7,.86), rgba(24,14,7,.5) 60%, rgba(24,14,7,.7)),
    radial-gradient(80% 60% at 78% 12%, rgba(255,206,140,.18), transparent 60%)}
.menu-inner{position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:center; padding:clamp(30px,8vw,120px); color:var(--milk)}
.menu-eyebrow{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--crema); margin-bottom:clamp(20px,4vh,40px); opacity:0; transform:translateY(14px);
  transition:opacity .6s .1s var(--e-silk), transform .6s .1s var(--e-silk)}
.menu.open .menu-eyebrow{opacity:.9; transform:none}
.menu-nav{display:flex; flex-direction:column; gap:clamp(2px,1vh,10px)}
.menu-nav a{position:relative; font-family:var(--display); font-weight:400; font-size:clamp(40px,8.5vw,92px);
  line-height:1.04; color:var(--milk); width:max-content; max-width:100%;
  opacity:0; transform:translateY(40px); transition:transform .8s var(--e-silk), opacity .7s var(--e-silk), color .4s}
.menu-nav a .idx{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--crema);
  vertical-align:super; margin-right:14px; opacity:.7}
.menu-nav a em{font-style:italic; color:var(--crema)}
.menu.open .menu-nav a{opacity:1; transform:none}
.menu.open .menu-nav a:nth-child(1){transition-delay:.16s}
.menu.open .menu-nav a:nth-child(2){transition-delay:.24s}
.menu.open .menu-nav a:nth-child(3){transition-delay:.32s}
.menu.open .menu-nav a:nth-child(4){transition-delay:.4s}
.menu-nav a::after{content:""; position:absolute; left:0; bottom:.12em; height:2px; width:100%;
  background:var(--crema); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-silk)}
.menu-nav a:hover{color:#FFEBCB}
.menu-nav a:hover::after{transform:scaleX(1)}
.menu-nav a.on{color:var(--crema)}
.menu-foot{margin-top:clamp(28px,6vh,60px); display:flex; gap:14px 40px; flex-wrap:wrap; align-items:baseline;
  font-size:13.5px; color:rgba(251,243,230,.66); opacity:0; transition:opacity .6s .46s var(--e-silk)}
.menu.open .menu-foot{opacity:1}
.menu-foot b{color:var(--milk); font-weight:600}
.menu-foot a:hover{color:var(--crema)}
body.lock{overflow:hidden}

/* ============================ BUTTONS / LINKS ============================ */
.btn{display:inline-flex; align-items:center; gap:11px; font-family:var(--sans); font-weight:600; font-size:15.5px;
  color:var(--milk); background:var(--espresso); border:1px solid var(--espresso); padding:16px 28px; border-radius:9px;
  box-shadow:var(--shadow-sm); transition:transform .6s var(--e-out), box-shadow .5s var(--e-silk), background .4s}
.btn .arw{transition:transform .6s var(--e-out)}
.btn:hover{transform:translateY(-3px)}
.btn:hover .arw{transform:translateX(5px)}
.btn:active{transform:translateY(-1px)}
.btn.light{background:var(--milk); color:var(--espresso); border-color:var(--milk)}
.btn.ghost{background:transparent; color:currentColor; border-color:currentColor; opacity:.9}
.btn.ghost:hover{opacity:1}
.tlink{position:relative; font-weight:600; font-size:14.5px; color:var(--crema-ink); padding-bottom:4px}
.tlink::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--crema);
  transform:scaleX(.32); transform-origin:left; opacity:.55; transition:transform .55s var(--e-silk), opacity .4s}
.tlink:hover::after{transform:scaleX(1); opacity:1}
.acts{display:flex; align-items:center; gap:24px; flex-wrap:wrap}

/* ============================ STEAM (shared SVG) ============================ */
.steam{position:absolute; pointer-events:none}
.steam path{fill:none; stroke:rgba(255,246,234,.7); stroke-width:2.4; stroke-linecap:round;
  filter:blur(2px); opacity:0; transform-origin:bottom center; animation:wisp 6s var(--e-silk) infinite}
.steam path:nth-child(2){animation-delay:1.6s; animation-duration:6.8s}
.steam path:nth-child(3){animation-delay:3.2s; animation-duration:6.4s}
@keyframes wisp{0%{opacity:0;transform:translateY(12px) scaleY(.7)}25%{opacity:.5}60%{opacity:.32}100%{opacity:0;transform:translateY(-30px) scaleY(1.18) translateX(5px)}}

/* ============================ HERO: DIVE INTO THE CUP (signature scrub) ============================ */
.dive{position:relative; height:150vh; background:#160d06}
.dive-pin{position:sticky; top:0; height:100vh; overflow:hidden}
.dive-stage{position:absolute; inset:0}
/* the image scales INSIDE a fixed, non-transformed clipping frame : the clip edge never
   moves, so there is never a torn/stepped/misaligned rectangle at any scroll frame. */
.dive-cup{position:absolute; inset:0; overflow:hidden; background:#160d06}
.dive-cup img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 44%;
  transform:scale(calc(1.08 + var(--dive,0) * 3.3)); transform-origin:50% 44%;
  filter:var(--grade) saturate(1.05); will-change:transform; backface-visibility:hidden}
/* living light drifting across the crema surface */
.dive-shimmer{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(42% 34% at 47% 41%, rgba(255,228,184,.32), rgba(255,228,184,0) 60%);
  opacity:calc(.5 + var(--dive,0) * .3); animation:diveShimmer 8s ease-in-out infinite}
@keyframes diveShimmer{0%,100%{transform:translate(-2.5%,-1.5%) scale(1)}50%{transform:translate(3%,2.5%) scale(1.09)}}
/* vignette that closes into the liquid as we go deeper */
.dive-veil{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 54% at 50% 44%, rgba(60,30,10,0) 22%, rgba(42,23,10,.48) 62%, rgba(24,13,6,.95) 100%);
  opacity:calc(.4 + var(--dive,0) * .6)}
/* passing THROUGH the surface : warm coffee fills the frame near the end */
.dive-liquid{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 106% at 50% 44%, #3c2513 0%, #22130a 62%, #180d06 100%);
  opacity:calc(clamp(0, (var(--dive,0) - .58) * 3.1, 1))}
.dive-bloom{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(45% 40% at 50% 42%, rgba(255,196,124,.5), rgba(255,196,124,0) 60%);
  opacity:calc(var(--dive,0) * (1 - clamp(0,(var(--dive,0) - .72)*4,1)) * .95)}
/* drifting steam motes : particle life rising through the scene */
.dive-motes{position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:calc(.4 + var(--dive,0) * .4)}
.dive-motes span{position:absolute; bottom:-12px; width:5px; height:5px; border-radius:50%;
  background:rgba(255,236,204,.55); filter:blur(1px); animation:diveMote 12s linear infinite}
.dive-motes span:nth-child(1){left:23%}
.dive-motes span:nth-child(2){left:39%; width:4px; animation-delay:-3s}
.dive-motes span:nth-child(3){left:55%; animation-delay:-6.5s}
.dive-motes span:nth-child(4){left:69%; width:3px; animation-delay:-1.5s}
.dive-motes span:nth-child(5){left:81%; width:4px; animation-delay:-8.5s}
.dive-motes span:nth-child(6){left:47%; width:3px; animation-delay:-10.5s}
@keyframes diveMote{0%{transform:translateY(0) translateX(0); opacity:0}12%{opacity:1}86%{opacity:.55}100%{transform:translateY(-82vh) translateX(16px); opacity:0}}
.dive-steam{position:absolute; left:50%; top:11%; width:min(56vw,320px); height:62vh; transform:translateX(-50%);
  opacity:calc(.55 + var(--dive,0) * .4)}
.dive-hint{position:absolute; left:0; right:0; bottom:clamp(28px,6vh,60px); text-align:center; color:var(--milk);
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  opacity:calc(clamp(0, 1 - var(--dive,0) * 5, 1) * .8)}
.dive-hint .ln{display:block; width:1px; height:34px; margin:14px auto 0; background:linear-gradient(var(--crema),transparent);
  animation:hintpulse 2.4s var(--e-silk) infinite}
@keyframes hintpulse{0%,100%{transform:scaleY(.5); opacity:.4}50%{transform:scaleY(1); opacity:1}}
/* arrival title emerges as we pass through the surface */
.dive-title{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 clamp(22px,6vw,60px); color:var(--milk); pointer-events:none;
  opacity:calc(clamp(0, (var(--dive,0) - .68) * 3.6, 1));
  transform:scale(calc(.94 + clamp(0, (var(--dive,0) - .68) * 3.6, 1) * .06))}
.dive-title .eyebrow{color:var(--crema); margin-bottom:18px}
.dive-title h1{font-size:clamp(44px,8vw,104px); font-weight:400; letter-spacing:-.03em; line-height:1}
.dive-title h1 em{font-style:normal; color:#F6D8A8}

/* ============================ ARRIVAL (lands inside, readable hero) ============================ */
.arrival{position:relative; min-height:100vh; display:flex; align-items:flex-end;
  padding:0 0 clamp(60px,10vh,120px); overflow:hidden; background:#1b1109; color:var(--milk)}
.arrival .bgimg{position:absolute; inset:0; z-index:0}
.arrival .bgimg img{width:100%; height:112%; object-fit:cover; filter:var(--grade) brightness(.72); will-change:transform}
.arrival::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(6deg, rgba(18,10,5,.92) 6%, rgba(18,10,5,.35) 46%, rgba(18,10,5,.5) 100%)}
.arrival .wrap{position:relative; z-index:2; width:100%}
.arrival .eyebrow{color:var(--crema); margin-bottom:20px}
.arrival h2{font-size:clamp(40px,6.4vw,86px); font-weight:400; letter-spacing:-.028em; line-height:1.02; max-width:16ch}
.arrival h2 em{color:#F4D6A6}
.arrival .lede{margin-top:24px; color:rgba(251,243,230,.86)}
.arrival .acts{margin-top:36px}
.arrival .fact{margin-top:clamp(30px,5vh,50px); padding-top:18px; border-top:1px solid rgba(255,240,222,.16);
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,243,230,.66)}
.arrival .fact b{color:var(--crema)}

/* ============================ SECTION SCAFFOLD ============================ */
.section{padding:clamp(56px,8vh,100px) 0}
.section .head{max-width:62ch; margin-bottom:clamp(26px,4vh,44px)}
.section .head h2{font-size:clamp(34px,5vw,64px); margin-top:16px; max-width:18ch; font-weight:400}

/* full-bleed editorial figure : organic, never a plain box */
.figure{display:block; position:relative; overflow:hidden; box-shadow:var(--shadow); background:linear-gradient(155deg,var(--latte),var(--oat) 72%)}
.figure img{position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; filter:var(--grade); will-change:transform}
.figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,14,7,0) 44%, rgba(20,11,5,.82) 100%)}
.figure .cap{position:absolute; z-index:2; left:clamp(24px,4vw,54px); bottom:clamp(24px,4vh,48px); right:clamp(24px,4vw,54px); color:var(--milk)}
.figure .cap .k{font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#F0D6AE}
.figure .cap h3{font-size:clamp(24px,3vw,40px); margin-top:9px; color:var(--milk); font-weight:500}
.figure .cap p{font-size:15px; color:rgba(251,243,230,.9); margin-top:8px; max-width:34ch}
/* editorial photo credit : a plain corner label, not a pill chip */
.figure .tag,.tag{position:absolute; z-index:3; right:18px; top:18px; background:none; backdrop-filter:none;
  color:rgba(251,243,230,.72); font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:0; border-radius:0; text-shadow:0 1px 5px rgba(16,8,3,.75)}
.noimg{background:linear-gradient(155deg,var(--cocoa2),var(--espresso))!important}
.noimg img{visibility:hidden}
.noimg .tag{display:none}
.noimg::before{content:"photo coming soon"; position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--latte)}

/* ============================ SEAMS : buttery section-to-section blends ============================ */
.seam{height:clamp(46px,7vh,84px); position:relative; z-index:1; margin-top:-1px; margin-bottom:-1px}
.seam.dark-cream{background:linear-gradient(180deg, #1b1109 0%, #3a2616 30%, var(--cream) 100%)}
/* every footer melts up out of the section above it */
.foot::before{content:""; position:absolute; left:0; right:0; top:0; height:clamp(90px,15vh,170px);
  transform:translateY(-100%); background:linear-gradient(180deg, rgba(34,22,16,0), #221610); pointer-events:none; z-index:0}

/* HOME moments : two full-height editorial panels, offset & organic */
.moments-grid{display:grid; gap:clamp(20px,3vw,40px)}
@media(min-width:860px){.moments-grid{grid-template-columns:1fr 1fr; align-items:center}
  .moments-grid .figure:nth-child(2){margin-top:clamp(40px,8vw,90px)}}
.moments-grid .figure{aspect-ratio:4/5; border-radius:clamp(120px,30vw,210px) clamp(120px,30vw,210px) 26px 26px}
.moments-grid .figure:nth-child(2){border-radius:54% 46% 24px 24px / 62% 58% 24px 24px}

/* ============================ THE POUR (second signature) ============================ */
.pour{position:relative; background:#1b110a; color:var(--milk)}
.pour::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 42% at 50% 32%, rgba(255,204,138,.22), rgba(255,204,138,0) 60%);
  opacity:clamp(.4, .35 + var(--pour,0) * .9, 1.3); transform:scale(calc(1 + var(--pour,0) * .18)); transform-origin:50% 32%}
.pinwrap{position:relative; height:320vh}
.pinstick{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden}
.pourgrid{display:grid; gap:40px; align-items:center; width:100%}
@media(min-width:900px){.pourgrid{grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,90px)}}
.pourcopy .eyebrow{color:var(--crema)}
.pourbeats{position:relative; margin-top:16px}
.pourbeat{position:absolute; inset:0}
.pourbeat:first-child{position:relative}
.pourbeat h2{font-size:clamp(34px,4.8vw,64px); max-width:15ch; font-weight:400}
.pourbeat p{font-size:clamp(16px,1.8vw,20px); color:rgba(251,243,230,.72); margin-top:18px; max-width:40ch}
.pourbeat.b1{opacity:calc(1 - clamp(0,(var(--pour) - .42)*4.5,1))}
.pourbeat.b2{opacity:clamp(0,(var(--pour) - .5)*4.5,1); transform:translateY(calc((1 - clamp(0,(var(--pour) - .5)*4.5,1)) * 22px))}
.cupstage{display:flex; justify-content:center; align-items:center; min-height:min(64vh,560px)}
.cupstage svg{width:min(74%,360px); height:auto; overflow:visible}
.cup-liquid{transform:translateY(calc((1 - var(--pour,0)) * 122px)); will-change:transform}
.cup-crema{opacity:clamp(0,(var(--pour) - .66)*3.6,1)}
.pour-stream{opacity:clamp(0, min(var(--pour)*6, (.82 - var(--pour))*6), 1);
  transform:scaleY(clamp(.2,var(--pour)*2,1)); transform-origin:top center; will-change:transform,opacity}
.cupsteam{opacity:clamp(0,(var(--pour) - .74)*4.5,1)}

/* ============================ CLOSER : asymmetric, left-weighted (no centered stack) ============================ */
.promise{padding:clamp(60px,9vh,106px) 0}
.promise .wrap{display:grid; gap:clamp(20px,3vw,36px)}
@media(min-width:840px){.promise .wrap{grid-template-columns:1.45fr .55fr; align-items:end; gap:clamp(40px,6vw,96px)}}
.promise h2{font-size:clamp(38px,6.6vw,80px); max-width:15ch; font-weight:400; letter-spacing:-.022em; line-height:1}
.promise .aside{align-self:end; padding-bottom:8px; max-width:34ch}
.promise p{color:var(--cocoa2); font-size:clamp(17px,1.8vw,19px)}
.promise .acts{margin-top:24px}
.promise .rule{height:2px; width:64px; background:var(--crema); margin-bottom:22px; transform-origin:left}

/* ============================ VISIT TEASER (home) ============================ */
.teaser{position:relative; overflow:hidden; padding:clamp(56px,8vh,100px) 0; background:linear-gradient(180deg,var(--cream) 0%, var(--oat) 30%, var(--latte) 100%)}
.tgrid{display:grid; gap:38px; align-items:center}
@media(min-width:880px){.tgrid{grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,84px)}}
.tgrid h2{font-size:clamp(32px,4.4vw,56px); max-width:14ch; margin-top:14px; font-weight:400}
.tgrid .lede{margin-top:18px; color:var(--cocoa2)}
.hourscard{background:var(--milk); border:1px solid var(--line); border-radius:26px; padding:clamp(24px,3.4vw,38px); box-shadow:var(--shadow-sm)}
.hourscard h3{font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--crema-ink); margin-bottom:8px}
.hrow{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--cocoa2)}
.hrow:last-child{border-bottom:0}
.hrow span{white-space:nowrap; flex:0 1 auto}
.hrow b{font-family:var(--display); font-weight:500; font-size:18px; color:var(--espresso); white-space:nowrap; margin-left:auto; text-align:right}
.hrow.rest b{color:var(--crema-ink)}
.hnote{margin-top:16px; font-size:13.5px; color:var(--muted); line-height:1.5}

/* ============================ ABOUT : the story ============================ */
.story-hero{position:relative; min-height:84vh; display:flex; align-items:flex-end; overflow:hidden; background:#1b1109; color:var(--milk); padding-bottom:clamp(50px,8vh,96px)}
.story-hero .bgimg{position:absolute; inset:0}
.story-hero .bgimg img{width:100%; height:114%; object-fit:cover; filter:var(--grade) brightness(.66); will-change:transform}
.story-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(8deg, rgba(18,10,5,.94), rgba(18,10,5,.3) 60%)}
.story-hero .wrap{position:relative; z-index:2}
.story-hero .eyebrow{color:var(--crema)}
.story-hero h1{font-size:clamp(44px,7.4vw,96px); font-weight:400; letter-spacing:-.03em; margin-top:16px; max-width:15ch}
.story-hero h1 em{color:#F4D6A6}
.chapter{position:relative; padding:clamp(48px,7vh,86px) 0}
.chapter-grid{display:grid; gap:clamp(28px,5vw,72px); align-items:center}
@media(min-width:900px){.chapter-grid{grid-template-columns:1fr 1fr}
  .chapter.rev .chapter-grid > .figure{order:2}}
.chapter .num{font-family:var(--display); font-size:clamp(60px,10vw,150px); line-height:.8; color:var(--crema);
  opacity:.16; font-weight:500; margin-bottom:-.1em}
.chapter h2{font-size:clamp(30px,4.2vw,52px); font-weight:400; max-width:16ch; margin-top:10px}
.chapter p{margin-top:20px; color:var(--cocoa2); max-width:52ch; font-size:clamp(17px,1.7vw,19px)}
.chapter .sig{margin-top:26px; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--crema-ink)}
.chapter .figure{aspect-ratio:4/5}
.chapter:nth-child(odd) .figure{border-radius:clamp(130px,34vw,220px) clamp(130px,34vw,220px) 26px 26px}
.chapter:nth-child(even) .figure{border-radius:26px clamp(130px,34vw,220px) 26px clamp(130px,34vw,220px)}

/* ============================ MENU : the tasting ============================ */
.pagehero{position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; color:var(--milk); padding-bottom:clamp(46px,8vh,92px); background:#1b1109}
.pagehero .bgimg{position:absolute; inset:0}
.pagehero .bgimg img{width:100%; height:114%; object-fit:cover; filter:var(--grade) brightness(.66); will-change:transform}
.pagehero::after{content:""; position:absolute; inset:0; background:linear-gradient(8deg, rgba(18,10,5,.92), rgba(18,10,5,.3) 62%)}
.pagehero .wrap{position:relative; z-index:2}
.pagehero .eyebrow{color:var(--crema)}
.pagehero h1{font-size:clamp(44px,7vw,94px); font-weight:400; letter-spacing:-.03em; margin-top:16px; max-width:15ch}
.pagehero h1 em{color:#F4D6A6}
.pagehero .lede{margin-top:22px; color:rgba(251,243,230,.85)}
.rail-specials{margin-top:clamp(40px,7vh,72px)}
.rail-specials .lbl{font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--crema-ink); margin-bottom:18px; display:block}
.rail-track{display:flex; gap:18px; overflow-x:auto; padding:6px 4px 24px; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; cursor:grab; scrollbar-width:none}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.drag{cursor:grabbing; scroll-snap-type:none}
.spec{scroll-snap-align:start; flex:0 0 clamp(230px,74vw,300px); background:var(--milk); border:1px solid var(--line);
  border-radius:24px; padding:26px; box-shadow:var(--shadow-sm); transition:transform .6s var(--e-out), box-shadow .5s; user-select:none}
.spec:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.spec .k{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--crema-ink)}
.spec h3{font-size:25px; margin:12px 0 8px; font-weight:500}
.spec p{font-size:14.5px; color:var(--cocoa2); line-height:1.55}
.spec .price{margin-top:16px; font-family:var(--display); font-size:21px; color:var(--crema-ink)}
.courses{padding:clamp(50px,7vh,92px) 0}
.course{display:grid; gap:clamp(24px,4vw,60px); align-items:center; padding:clamp(24px,4vh,48px) 0; border-top:1px solid var(--line)}
.course:first-of-type{border-top:0}
@media(min-width:820px){.course{grid-template-columns:.9fr 1.1fr}
  .course.rev > *:first-child{order:2}}
.course .cnum{font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--crema-ink); margin-bottom:18px}
.course h2{font-size:clamp(28px,3.6vw,46px); font-weight:400}
.course .clist{margin-top:8px}
.mline{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0; border-bottom:1px dashed var(--line)}
.mline:last-child{border-bottom:0}
.mline .nm{font-family:var(--display); font-size:21px; font-weight:500}
.mline .ds{display:block; font-family:var(--sans); font-size:13.5px; color:var(--muted); margin-top:3px; font-weight:400}
.mline .pr{font-family:var(--display); font-size:20px; color:var(--crema-ink); white-space:nowrap}
.menu-note{margin-top:36px; font-size:13px; letter-spacing:.02em; color:var(--muted)}

/* ============================ VISIT : approach, door, inside ============================ */
.approach{position:relative; height:150vh; background:#150c05}
.approach-pin{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center}
.approach-img{position:absolute; inset:0; will-change:transform; transform:scale(calc(1.04 + var(--approach,0) * .3))}
.approach-img img{width:100%; height:100%; object-fit:cover; filter:var(--grade) brightness(.64)}
.approach-pin::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 46%, rgba(20,11,5,0) 34%, rgba(20,11,5,.9) 100%);
  opacity:calc(.4 + var(--approach,0) * .55)}
.approach-copy{position:relative; z-index:2; color:var(--milk); padding:0 clamp(22px,6vw,60px); max-width:min(92vw,760px)}
/* soft scrim behind the words so every letter stays high-contrast over any part of the photo */
.approach-copy::before{content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(152%,900px); height:210%; pointer-events:none;
  background:radial-gradient(60% 58% at 50% 52%, rgba(12,7,3,.74), rgba(12,7,3,0) 82%)}
.approach-copy .eyebrow{color:var(--crema); text-shadow:0 1px 3px rgba(8,4,1,.55)}
.approach-copy h1{font-size:clamp(40px,7vw,90px); font-weight:400; letter-spacing:-.03em; margin-top:14px; line-height:1.02;
  text-shadow:0 1px 2px rgba(8,4,1,.62), 0 2px 10px rgba(8,4,1,.5), 0 4px 30px rgba(8,4,1,.42)}
.approach-copy h1 em{color:#F6DCAE}
.approach-copy .doorhint{margin-top:26px; font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  text-shadow:0 1px 3px rgba(8,4,1,.6); opacity:calc(clamp(0, 1 - var(--approach,0)*4, 1) * .8)}
.inside{position:relative; background:var(--cream); padding:clamp(52px,8vh,94px) 0}
.split{display:grid; gap:clamp(30px,5vw,72px); align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev .figure{order:2}}
.split .figure{aspect-ratio:4/5; border-radius:clamp(130px,34vw,220px) clamp(130px,34vw,220px) 26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.tx h2{font-size:clamp(28px,3.8vw,48px); max-width:16ch; font-weight:400}
.tx p{margin-top:18px; color:var(--cocoa2); max-width:52ch}
.tx .sig{margin-top:26px; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--crema-ink)}
.mapwrap{border-radius:clamp(90px,24vw,170px) 26px clamp(90px,24vw,170px) 26px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; box-shadow:var(--shadow-sm); background:var(--oat)}
.mapwrap iframe{width:100%; height:100%; border:0; display:block; filter:sepia(.3) saturate(1.15) contrast(.96)}
.mapnote{margin-top:14px; font-family:var(--label); font-size:12.5px; letter-spacing:.01em; color:var(--muted)}
.infolist{margin-top:28px; display:flex; flex-direction:column; gap:13px; font-size:15px; color:var(--cocoa2)}
.infolist div{display:flex; gap:14px; align-items:baseline}
.infolist b{color:var(--espresso); font-weight:600; font-family:var(--display); font-size:16px; min-width:92px}

/* ============================ FOOTER ============================ */
.foot{position:relative; background:linear-gradient(178deg,#221610,#160d07); color:rgba(251,243,230,.7); padding:clamp(60px,9vh,90px) 0 36px; overflow:hidden}
.foot .frow{display:flex; justify-content:space-between; gap:28px 40px; flex-wrap:wrap; align-items:flex-start; position:relative; z-index:1}
.foot .fbig{font-family:var(--display); font-size:clamp(30px,5vw,58px); font-weight:400; color:var(--milk); max-width:16ch; line-height:1.04}
.foot .fbig em{color:var(--crema)}
.footnav{display:flex; gap:22px; flex-wrap:wrap; font-size:14.5px; margin-top:22px}
.footnav a{color:rgba(251,243,230,.72); transition:color .4s}
.footnav a:hover{color:var(--crema)}
.footline{margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,240,222,.12); display:flex; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; font-size:12px; letter-spacing:.04em; color:rgba(251,243,230,.5); position:relative; z-index:1}
/* quiet authorship credit : proves who built the site, stays low-key */
.foot .credit{margin-top:16px; font-family:var(--label); font-size:11.5px; letter-spacing:.07em; color:rgba(251,243,230,.34); position:relative; z-index:1}
.foot .credit a{color:inherit; border-bottom:1px solid rgba(251,243,230,.16); padding-bottom:1px; transition:color .35s, border-color .35s}
.foot .credit a:hover{color:var(--crema); border-color:rgba(201,126,54,.55)}

/* ============================ AMBIENT SOUND TOGGLE ============================ */
.hum{position:fixed; right:20px; bottom:20px; z-index:38; display:flex; align-items:center; gap:9px;
  background:rgba(25,15,8,.94); color:var(--milk); border:1px solid rgba(255,240,222,.14);
  padding:10px 16px 10px 13px; border-radius:100px; cursor:pointer; font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.04em; box-shadow:var(--shadow-sm); transition:transform .5s var(--e-out), background .4s}
.hum:hover{transform:translateY(-2px)}
.hum .bars{display:flex; align-items:flex-end; gap:2px; height:14px}
.hum .bars i{width:2.5px; height:5px; background:currentColor; border-radius:2px; opacity:.5}
.hum.on .bars i{animation:eq 1s var(--e-soft) infinite; opacity:1}
.hum.on .bars i:nth-child(2){animation-delay:.2s}.hum.on .bars i:nth-child(3){animation-delay:.4s}.hum.on .bars i:nth-child(4){animation-delay:.15s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
body.lock .hum{opacity:0; pointer-events:none; transition:opacity .3s}

/* ============================ RESPONSIVE ============================ */
@media(max-width:900px){
  .dive{height:125vh}
  .approach{height:130vh}
  .pinwrap{height:280vh}
  .pourgrid{grid-template-columns:1fr; text-align:center}
  .pourcopy{order:2}.cupstage{order:1; min-height:42vh}.cupstage svg{width:min(60%,230px)}
  .pourbeat p{margin-inline:auto}
}
@media(max-width:560px){
  .dive-title h1,.arrival h2,.story-hero h1,.pagehero h1,.approach-copy h1{font-size:clamp(38px,11vw,52px)}
  .btn{width:100%; justify-content:center}
  .acts .tlink{width:100%; text-align:center}
  .menu-nav a{font-size:clamp(38px,12vw,54px)}
}

/* ============================ REDUCED MOTION ============================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .js [data-rv]{opacity:1!important; transform:none!important; clip-path:none!important; filter:none!important}
  .js [data-rv="stagger"] > *{opacity:1!important; transform:none!important}
  .js .wd > i{transform:none!important}
  .ambient{transform:none!important}.ambient .glow,.ambient .drift path{animation:none!important}
  .depthveil{opacity:0!important}
  /* dive: land on the arrival immediately, no scrub */
  .dive{height:auto!important}.dive-pin{position:static!important; height:auto!important}
  .dive-cup{transform:none!important; position:relative; height:70vh}
  .dive-cup img{transform:none!important}
  .dive-liquid{opacity:0!important}.dive-veil{opacity:.4!important}.dive-bloom{opacity:.3!important}
  .dive-shimmer{opacity:.3!important; animation:none!important}.dive-motes{display:none}
  .dive-title{opacity:1!important; transform:none!important; position:relative; padding:clamp(40px,8vh,80px) 22px; background:#1b1109}
  .dive-hint{display:none}
  .cup-liquid{transform:none!important}.cup-crema,.cupsteam,.pour-stream{opacity:1!important}
  .pourbeat{position:relative!important; opacity:1!important; transform:none!important; inset:auto!important; margin-top:20px}
  .pourbeat.b1{display:none}.pinwrap{height:auto!important}.pinstick{position:static!important; height:auto!important; padding:clamp(70px,11vh,120px) 0}
  .approach{height:auto!important}.approach-pin{position:static!important; height:70vh}.approach-img{transform:none!important}
  .arrival .bgimg img,.story-hero .bgimg img,.pagehero .bgimg img,.figure img{transform:none!important}
}