/* ==========================================================================
   MKOO Coffee & Space — Liquid Glass identity
   Palette (only these three, plus their own transparencies):
     Vanilla Cream  #F3E8D5  ~60%  backgrounds, light surfaces
     Forest Green   #173D32  ~30%  header text, type, primary sections
     Copper Caramel #C8794A  ~10%  accents, prices, key actions
   Sections: tokens · base · glass primitives · header · buttons · hero ·
             sections · menu · gallery · coffee · visit · footer · dock ·
             transitions · motion
   ========================================================================== */

@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/vazirmatn.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* the glass notch follows this value; registering it lets it animate */
@property --bx{syntax:"<length>";inherits:true;initial-value:50px}

:root{
  --cream:#F3E8D5; --forest:#173D32; --copper:#C8794A;
  --c:243 232 213; --f:23 61 50; --k:200 121 74;           /* rgb triplets for alpha use */
  --sans:"Vazirmatn","Segoe UI",system-ui,Tahoma,Arial,sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,"Vazirmatn",sans-serif;   /* Latin-only text uses the system (SF) face; name kept for history */
  --pad:clamp(1.25rem,5vw,5rem); --gap:clamp(4.5rem,9vw,8rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.34,1.45,.5,1);
  --hdr:56px; --hdr-top:max(10px,env(safe-area-inset-top));
  --r-card:24px; --r-img:26px;
  --muted:rgb(var(--f)/.76);
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.052,.178,.34,.509,.667,.802,.909,.987,1.039,1.069,1.082,1.082,1.075,1.062,1.048,1.034,1.022,1.012,1.004,.999,.995,.994,.993,.993,.994,.995,.997,1)}
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{font:1rem/2 var(--sans);color:var(--forest);background:var(--cream);overflow-x:clip;max-width:100%;font-feature-settings:"ss01"}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vmax 44vmax at 100% 0,rgb(var(--k)/.11),transparent 70%),radial-gradient(52vmax 40vmax at 0 100%,rgb(var(--f)/.07),transparent 70%)}
a{color:inherit}
img,svg{max-width:100%}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;box-shadow:0 0 0 5px rgb(var(--k)/.45)}
.hero :focus-visible,.signature :focus-visible,.follow :focus-visible,footer :focus-visible,.dock :focus-visible{outline-color:var(--cream)}
.skip{position:absolute;top:0;inset-inline-start:0;transform:translateY(-150%);background:var(--cream);color:var(--forest);padding:.5rem 1rem;z-index:200;border-radius:0 0 14px 14px}.skip:focus{transform:none}
[hidden]{display:none!important}
h1,h2{font-weight:700;line-height:1.35}
h2{font-size:clamp(1.8rem,4.2vw,3.2rem);margin-bottom:1rem}
.fa{font-family:var(--sans);direction:rtl;line-height:1.9}
.fa.sub{font-size:1.15rem;margin:0 0 1.5rem;color:var(--muted)}
html[lang=fa] h1.fa.sub{font-size:1.2rem;font-weight:500;margin:0 0 1.5rem}
html[lang=fa] p{text-align:right}

/* English display type: editorial serif, flush left; Persian flush right */
.en,.dsp{direction:ltr;text-align:left!important;font-family:var(--serif);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.dsp{font-size:clamp(2.1rem,4.6vw,3.8rem);margin-bottom:.7rem}
h2.en{margin-bottom:.6rem}
em{font-style:normal;color:inherit;text-decoration:underline;text-decoration-color:rgb(var(--k));text-decoration-thickness:.07em;text-underline-offset:.14em}
.eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:600;margin-bottom:1.1rem;color:var(--muted)}
.eyebrow::before{content:"";width:1.3rem;height:.32rem;border-radius:99px;background:var(--copper);box-shadow:0 0 12px rgb(var(--k)/.55)}
.note{font-size:.9rem;color:var(--muted);border-inline-start:2px solid var(--copper);padding-inline-start:.75rem;margin-top:1.25rem;max-width:40rem}
code{background:rgb(var(--f)/.08);padding:0 .3em;border-radius:6px}
small{color:inherit;opacity:.8}

section{position:relative;isolation:isolate;padding:var(--gap) var(--pad)}
main>section:not(.hero):not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 700px}
main>section{min-height:70svh;display:flex;flex-direction:column;justify-content:center}
main>section:not(.hero){padding-top:max(var(--gap),7.5rem)}
main>section::before{content:attr(data-label);position:absolute;z-index:2;top:5.6rem;inset-inline-start:var(--pad);direction:ltr;
  font:600 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--f)/.62)}
main>section.hero::before{display:none}
main>section.signature::before,main>section.follow::before{color:rgb(var(--c)/.7)}
.story,.signature,.visit{display:grid}

/* dark (forest) surfaces */
.signature,.follow,footer{background:var(--forest);color:var(--cream)}
.signature .eyebrow,.follow .eyebrow,.signature .fa.sub,.follow .fa.sub,.hero .eyebrow{color:rgb(var(--c)/.82)}
.signature .note,.follow .note{color:rgb(var(--c)/.8)}

/* ---------- glass primitives ---------- */
.ph{position:relative;background:rgb(var(--f)/.12);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:.75rem;text-align:center}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ph img+span,.has-img>span{display:none!important}
.ph.has-img{cursor:zoom-in}
@media(hover:hover){.ph:hover img{transform:scale(1.045)}}
/* bundled illustrations are tinted into the brand palette; real photos are left untouched */
.ph.is-art::after{content:"";position:absolute;inset:0;background:var(--copper);mix-blend-mode:color;opacity:.55;pointer-events:none}
.hero .ph img{will-change:transform;transform:scale(1.08)}

/* ---------- header: liquid glass capsule ---------- */
.nav{position:fixed;z-index:40;top:var(--hdr-top);inset-inline:0;margin-inline:auto;width:min(calc(100% - 20px),1180px);height:var(--hdr);
  display:flex;align-items:center;gap:1rem;padding:0 .5rem;padding-inline:1.2rem .5rem;border-radius:999px;color:var(--forest);isolation:isolate;
  background:linear-gradient(180deg,rgb(var(--c)/.7),rgb(var(--c)/.46));
  -webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9);
  border:1px solid rgb(var(--c)/.62);
  box-shadow:inset 0 1px 0 rgb(var(--c)/.95),inset 0 -1px 0 rgb(var(--f)/.08),inset 0 0 18px rgb(var(--c)/.28),0 12px 30px -14px rgb(var(--f)/.45);
  transition:background .45s,box-shadow .45s,height .45s var(--ease),top .45s var(--ease),border-color .45s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 160% at 12% -60%,rgb(var(--c)/.7),transparent 60%),linear-gradient(115deg,transparent 40%,rgb(var(--c)/.22) 50%,transparent 60%) 0 0/250% 100%;
  background-position:0 0,120% 0;transition:background-position 1.4s var(--ease)}
.nav:hover::before{background-position:0 0,-20% 0}
.nav.solid{background:linear-gradient(180deg,rgb(var(--c)/.9),rgb(var(--c)/.78));border-color:rgb(var(--c)/.8);
  box-shadow:inset 0 1px 0 rgb(var(--c)),inset 0 -1px 0 rgb(var(--f)/.1),0 14px 34px -14px rgb(var(--f)/.6)}
.logo{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;flex-shrink:0;line-height:1}
.logo-txt{font-family:var(--serif);font-size:1.2rem;font-weight:800;letter-spacing:.16em}
.logo span{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.72;direction:ltr}
.logo-img{height:30px;width:auto}.has-logo .logo-txt{display:none}
.desktop-links{display:flex;align-items:center;justify-content:center;gap:.2rem;flex:1;min-width:0}
.desktop-links a{position:relative;text-decoration:none;white-space:nowrap;font-size:.92rem;font-weight:500;padding:.38rem 1rem;border-radius:999px;transition:background .3s,color .3s,transform .3s var(--spring)}
.desktop-links a:hover{background:rgb(var(--f)/.09)}
.desktop-links a:active{transform:scale(.95)}
.desktop-links a.cur{background:rgb(var(--f)/.92);color:var(--cream);box-shadow:inset 0 1px 0 rgb(var(--c)/.28),0 6px 14px -6px rgb(var(--f)/.6)}
.acts{display:flex;align-items:center;gap:.25rem;margin-inline-start:auto;flex-shrink:0}
.ibtn{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:inherit;cursor:pointer;
  transition:background .3s,border-color .3s,transform .3s var(--spring),box-shadow .3s;-webkit-tap-highlight-color:transparent}
.ibtn:hover{background:rgb(var(--c)/.55);border-color:rgb(var(--c)/.8);box-shadow:inset 0 1px 0 rgb(var(--c)/.9),0 6px 14px -8px rgb(var(--f)/.5)}
.ibtn:active{transform:scale(.88)}
.ibtn[aria-expanded=true]{background:rgb(var(--f)/.92);color:var(--cream)}
.ibtn svg{width:20px;height:20px}
.sbar{position:fixed;z-index:39;top:calc(var(--hdr-top) + var(--hdr) + 8px);inset-inline:0;margin-inline:auto;width:min(calc(100% - 20px),30rem);padding:.2rem 1.1rem;border-radius:999px;
  background:rgb(var(--c)/.72);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);border:1px solid rgb(var(--c)/.7);
  box-shadow:inset 0 1px 0 rgb(var(--c)/.95),0 14px 30px -14px rgb(var(--f)/.5);
  transform:translateY(-10px) scale(.98);opacity:0;visibility:hidden;transition:transform .45s var(--spring),opacity .3s,visibility .3s}
.sbar.open{transform:none;opacity:1;visibility:visible}
.sbar input{width:100%;background:none;border:0;outline:0;color:var(--forest);font:inherit;font-size:1rem;padding:.55rem 0}
.sbar input::placeholder{color:rgb(var(--f)/.6)}
.sbar:focus-within{border-color:rgb(var(--k)/.7);box-shadow:inset 0 1px 0 rgb(var(--c)/.95),0 0 0 3px rgb(var(--k)/.25),0 14px 30px -14px rgb(var(--f)/.5)}
.sbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;cursor:pointer;
  background:linear-gradient(45deg,transparent 45%,var(--forest) 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--forest) 45% 55%,transparent 55%)}

/* ---------- buttons: soft tactile glass ---------- */
.btn,.hbtn,.filters button{
  --bg:rgb(var(--f)/.94); --fg:var(--cream); --edge:rgb(var(--c)/.34);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.5rem 1.6rem;border-radius:999px;font:600 .95rem/1.3 var(--sans);text-decoration:none;color:var(--fg);cursor:pointer;
  background:linear-gradient(180deg,rgb(var(--c)/.2),transparent 52%),var(--bg);
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgb(var(--c)/.55),inset 0 -2px 6px rgb(var(--f)/.18),0 10px 22px -10px rgb(var(--f)/.6);
  transition:transform .4s var(--spring),box-shadow .35s,background-color .3s,border-color .3s,color .3s;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.btn::before,.filters button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgb(var(--c)/.4) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn:not(.ghost)::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--copper);box-shadow:0 0 0 2px rgb(var(--k)/.28),0 0 10px rgb(var(--k)/.9);flex:none}
.btn:hover,.filters button:hover{transform:translateY(-2px);border-color:rgb(var(--k)/.75);box-shadow:inset 0 1px 0 rgb(var(--c)/.65),inset 0 -2px 6px rgb(var(--f)/.18),0 14px 26px -10px rgb(var(--f)/.7),0 0 22px -4px rgb(var(--k)/.5)}
.btn:hover::before,.filters button:hover::before{transform:translateX(130%)}
.btn:active,.filters button:active,.hbtn:active{transform:scale(.95);box-shadow:inset 0 2px 8px rgb(var(--f)/.3),0 4px 10px -6px rgb(var(--f)/.6);transition-duration:.15s}
/* light glass (secondary) */
.btn.ghost,.filters button{--bg:rgb(var(--c)/.52);--fg:var(--forest);--edge:rgb(var(--c)/.85);
  box-shadow:inset 0 1px 0 rgb(var(--c)),inset 0 -2px 6px rgb(var(--f)/.06),0 8px 20px -12px rgb(var(--f)/.5)}
.btn.ghost:hover,.filters button:hover{box-shadow:inset 0 1px 0 rgb(var(--c)),0 12px 24px -12px rgb(var(--f)/.6),0 0 20px -6px rgb(var(--k)/.5)}
/* on forest / photo surfaces: primary flips to cream glass, secondary to clear glass */
.hero .btn:not(.ghost),.signature .btn:not(.ghost),.follow .btn:not(.ghost),.map .btn:not(.ghost){--bg:rgb(var(--c)/.94);--fg:var(--forest);--edge:rgb(var(--c))}
.hero .btn.ghost,.signature .btn.ghost,.follow .btn.ghost,.collection .btn.ghost{--bg:rgb(var(--c)/.14);--fg:var(--cream);--edge:rgb(var(--c)/.4)}
.hero .btn.ghost:hover,.signature .btn.ghost:hover,.follow .btn.ghost:hover,.collection .btn.ghost:hover{--bg:rgb(var(--c)/.24)}
.hbtn{min-height:40px;padding:.3rem 1.1rem;font-size:.9rem}
.ctas{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{min-height:100svh!important;padding:0!important;align-items:flex-end;flex-direction:row!important;justify-content:flex-start!important;display:flex;color:var(--cream);background:var(--forest)}
.hero .ph{position:absolute;inset:0;background:var(--forest);cursor:default}
.hero .ph img{object-position:74% 42%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--f)/.5) 0,rgb(var(--f)/.04) 26%,rgb(var(--f)/.3) 56%,rgb(var(--f)/.94) 100%),linear-gradient(90deg,rgb(var(--f)/.45),transparent 70%)}
.hero-copy{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(3.5rem,8vw,6.5rem)}
.hero-copy>*{animation:rise .9s var(--ease) both}
.hero-copy>*:nth-child(2){animation-delay:.1s}.hero-copy>*:nth-child(3){animation-delay:.2s}.hero-copy>*:nth-child(4){animation-delay:.3s}.hero-copy>*:nth-child(5){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.hero .dsp{font-size:clamp(2.7rem,9vw,7.2rem);line-height:1.02;color:var(--cream);margin-bottom:0}
.hero em{color:var(--copper);text-decoration:none}
.hero .dsp+.fa.sub,.hero h1.fa.sub{margin:1.1rem 0 .3rem;color:rgb(var(--c)/.92);font-size:1.25rem}
.lede{max-width:34rem;margin:1rem 0 1.8rem;font-size:1.1rem;color:rgb(var(--c)/.88);margin-inline-start:0}

/* ---------- marquee ---------- */
.marquee{direction:ltr;overflow:hidden;white-space:nowrap;padding:1rem 0;background:var(--cream);color:var(--forest);border-block:1px solid rgb(var(--f)/.14)}
.track{display:inline-flex;gap:3rem;animation:mq 34s linear infinite;will-change:transform}
.track span{font-family:var(--serif);font-size:clamp(1.3rem,3vw,2rem);font-weight:700;letter-spacing:-.02em}
.track span::after{content:"✦";margin-inline-start:3rem;color:var(--copper);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ---------- story / collection ---------- */
.story{grid-template-columns:repeat(12,1fr);gap:2rem;align-items:start}
.story .tall{grid-column:1/6;aspect-ratio:3/4}.story-text{grid-column:7/13;padding-top:5rem}
.story .wide{grid-column:4/13;aspect-ratio:16/8;margin-top:2rem}
.story-text p{margin-bottom:1rem;max-width:34rem}
.story .ph,.gallery .ph{border-radius:var(--r-img)}
.collection{background:var(--forest);color:var(--cream)}
.collection::before{color:rgb(var(--c)/.7)!important}
.collection .eyebrow,.collection .fa.sub{color:rgb(var(--c)/.82)}
.collection em{color:var(--copper);text-decoration:none}
.col-head{max-width:none}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.card{transition-delay:calc(var(--i)*90ms)}
.card a{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-card);color:var(--cream);text-decoration:none;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--ease),box-shadow .45s;
  border:1px solid rgb(var(--c)/.22);box-shadow:0 18px 40px -20px rgb(var(--f)/.8)}
.card a:hover{box-shadow:0 26px 50px -20px rgb(var(--k)/.45)}
.card .ph{position:absolute;inset:0;cursor:pointer;border-radius:0}
.card .no{position:absolute;z-index:2;top:.9rem;inset-inline-start:.9rem;font:700 .85rem/1 var(--sans);padding:.5rem .8rem;border-radius:99px;color:var(--forest);
  background:rgb(var(--c)/.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(var(--c)/.8);box-shadow:inset 0 1px 0 rgb(var(--c))}
.card .arr{position:absolute;z-index:2;top:.8rem;inset-inline-end:.8rem;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--forest);
  background:rgb(var(--c)/.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(var(--c)/.85);box-shadow:inset 0 1px 0 rgb(var(--c)),0 0 18px -2px rgb(var(--k)/.5);
  opacity:0;transform:translateY(-8px) scale(.7);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.card a:hover .arr,.card a:focus-visible .arr{opacity:1;transform:none}
@media(hover:none){.card .arr{opacity:1;transform:none}}
.card .meta{position:absolute;z-index:2;inset:auto .6rem .6rem;padding:.9rem 1rem;border-radius:18px;
  background:rgb(var(--f)/.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgb(var(--c)/.22);box-shadow:inset 0 1px 0 rgb(var(--c)/.25)}
.card h3{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1;font-weight:600;margin-bottom:.4rem}
.card .meta p{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;font-size:.95rem}
.card b{font-weight:400;font-size:.9rem;line-height:1.7;color:rgb(var(--c)/.9)}
.card small{opacity:1;font-weight:700;font-size:1.05rem;padding:.1rem .75rem;border-radius:99px;background:rgb(var(--k)/.22);border:1px solid rgb(var(--k)/.7);color:var(--cream)}

/* ---------- menu ---------- */
.menu{background:transparent}
.menu-head{max-width:none}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0 2.2rem}
.filters button{min-height:42px;padding:.3rem 1.15rem;font-size:.92rem;font-weight:500}
.filters button[aria-pressed=true]{--bg:rgb(var(--f)/.94);--fg:var(--cream);--edge:rgb(var(--c)/.3);font-weight:600;box-shadow:inset 0 1px 0 rgb(var(--c)/.5),0 10px 20px -10px rgb(var(--f)/.7),0 0 18px -6px rgb(var(--k)/.6)}
.filters button[aria-pressed=true]::after{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--copper);box-shadow:0 0 8px rgb(var(--k))}
.items{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:0;max-width:48rem;margin-inline:auto;width:100%;overflow:hidden;border-radius:24px;
  background:rgb(var(--c)/.6);border:1px solid rgb(var(--c)/.9);box-shadow:inset 0 1px 0 rgb(var(--c)),0 22px 44px -26px rgb(var(--f)/.55);transition:opacity .3s}
.items li{direction:ltr;content-visibility:auto;contain-intrinsic-size:auto 86px;position:relative;padding:.95rem 1.25rem;border-radius:0;background:transparent;border:0;box-shadow:none;animation:rise .35s var(--ease) both;transition:background-color .2s}
.items li+li::before{content:"";position:absolute;top:0;inset-inline:1.25rem;height:1px;background:rgb(var(--f)/.12)}
.items li:hover{background:rgb(var(--f)/.04)}
.items li:active{background:rgb(var(--f)/.09)}
.items .row{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.items h3{font-size:1.2rem;font-weight:600;line-height:1.5}
.items h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;text-align:left}
.price{flex:none;font-weight:700;font-size:1.02rem;line-height:1;padding:.4rem .8rem;border-radius:99px;color:var(--forest);background:rgb(var(--k)/.2);border:1px solid rgb(var(--k)/.65);font-variant-numeric:tabular-nums}
.items p{font-size:.9rem;color:var(--muted);margin-top:.2rem;line-height:1.8}
html[lang=fa] .items p{direction:ltr;text-align:left;unicode-bidi:plaintext}
.empty{grid-column:1/-1;color:var(--muted);padding:2rem 0;background:none!important;border:0!important;box-shadow:none!important}
.mfoot{max-width:48rem;margin-inline:auto;width:100%;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid rgb(var(--f)/.16);color:var(--muted);font-size:.92rem}
.mfoot .en{font:600 .78rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* ---------- gallery ---------- */
.grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(8rem,17vw,16rem);gap:.8rem;margin-top:1rem}
.g1{grid-column:span 3;grid-row:span 2}.g2{grid-column:span 3}.g3{grid-column:span 2}.g4{grid-column:span 1}.g5{grid-column:span 3}
.grid .ph{box-shadow:0 16px 34px -20px rgb(var(--f)/.6);border:1px solid rgb(var(--c)/.7)}
.lb{border:0;background:rgb(var(--f)/.88);max-width:100vw;max-height:100vh;width:100%;height:100%;padding:2rem;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lb[open]{display:grid;place-items:center}.lb::backdrop{background:rgb(var(--f)/.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb img{max-width:100%;max-height:88vh;border-radius:20px;box-shadow:0 30px 70px -20px rgb(var(--f))}
.lb button{position:absolute;top:1rem;inset-inline-end:1.2rem;width:46px;height:46px;border-radius:50%;font-size:1.7rem;line-height:1;display:grid;place-items:center;padding:0 0 .15rem;cursor:pointer;color:var(--cream);
  background:rgb(var(--c)/.16);border:1px solid rgb(var(--c)/.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgb(var(--c)/.4);transition:transform .35s var(--spring),background .3s}
.lb button:hover{background:rgb(var(--c)/.28)}.lb button:active{transform:scale(.9)}

/* ---------- coffee ---------- */
.signature{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.signature p{max-width:32rem;margin-bottom:1rem}
.signature em{color:var(--copper);text-decoration:none}
.side{display:grid;gap:1.5rem;padding:clamp(1.5rem,3vw,2.5rem);border-radius:32px;background:rgb(var(--c)/.07);border:1px solid rgb(var(--c)/.22);
  box-shadow:inset 0 1px 0 rgb(var(--c)/.3);}
.rituals{list-style:none;padding:0;counter-reset:r}
.rituals li{counter-increment:r;display:grid;grid-template-columns:3rem 1fr;padding:1.1rem 0;border-top:1px solid rgb(var(--c)/.2)}
.rituals li::before{content:counter(r,decimal-leading-zero);font:600 1.1rem/1.6 var(--serif);color:var(--copper);grid-row:span 2}
.rituals b{font-size:1.4rem;font-weight:600}.rituals span{color:rgb(var(--c)/.8)}
.cup{width:min(100%,19rem);height:auto;aspect-ratio:270/290;margin-inline:auto;overflow:visible;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cup *{fill-opacity:inherit}
.cup .fill,.cup .art,.cup .rip,.cup .stream,.cup .bean .bobb{transform-box:fill-box}
.js .cup:not(.go) .fill{transform:translateY(112px)}.js .cup:not(.go) .art{opacity:0}
.cup.go .fill{animation:pourUp 2.6s .5s cubic-bezier(.35,.1,.25,1) both}
@keyframes pourUp{from{transform:translateY(112px)}}
.cup .stream,.cup .spout{opacity:0}.cup .stream{transform-origin:50% 0}
.cup.go .stream{animation:streamIn 3.1s .3s ease-in-out both}.cup.go .spout{animation:spoutIn 3.1s .2s ease-in-out both}
@keyframes streamIn{0%{transform:scaleY(0);opacity:1}14%{transform:scaleY(1);opacity:1}84%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(26px);opacity:0}}
@keyframes spoutIn{0%,100%{opacity:0;transform:translateY(-12px)}12%,86%{opacity:1;transform:none}}
.cup .rip{opacity:0;transform-origin:center}.cup.go .rip{animation:rip .7s ease-out 4 .8s both}.cup.go .rip.r2{animation-delay:1.15s}
@keyframes rip{from{transform:scale(.4);opacity:.9}to{transform:scale(1.9);opacity:0}}
.cup .art{transform-origin:center}.cup.go .art{animation:artIn .9s 3.1s cubic-bezier(.3,1.4,.5,1) both}
@keyframes artIn{from{opacity:0;transform:scale(.5)}}
.cup .bub{opacity:0}.cup.go .bub{animation:bub 2.8s 3.1s ease-in infinite}.cup.go .bub:nth-of-type(2){animation-delay:3.7s}.cup.go .bub:nth-of-type(3){animation-delay:4.3s}.cup.go .bub:nth-of-type(4){animation-delay:3.4s}.cup.go .bub:nth-of-type(5){animation-delay:4.9s}
@keyframes bub{from{transform:translateY(0);opacity:0}20%{opacity:.8}to{transform:translateY(-44px);opacity:0}}
.cup .steam path{fill:none;stroke:var(--cream);stroke-width:4;stroke-linecap:round;stroke-dasharray:110;stroke-dashoffset:110;opacity:0}
.cup.go .steam path{animation:steamUp 3.6s 3.3s ease-in-out infinite}.cup.go .steam path:nth-child(2){animation-delay:3.9s}.cup.go .steam path:nth-child(3){animation-delay:4.5s}
@keyframes steamUp{0%{stroke-dashoffset:110;opacity:0}30%{opacity:.6}100%{stroke-dashoffset:-110;opacity:0}}
.cup.go .cupg{animation:cupBob 5s 3.6s ease-in-out infinite}.cup.go .shd{animation:shdPulse 5s 3.6s ease-in-out infinite}
@keyframes cupBob{50%{transform:translateY(-5px)}}@keyframes shdPulse{50%{transform:scaleX(.94);opacity:.12}}
.cup .shd{transform-box:fill-box;transform-origin:center}
.cup .bean .bobb{transform-origin:center}.cup.go .bean .bobb{animation:beanBob 4s ease-in-out infinite}.cup.go .bean .b2{animation-delay:-2s}
@keyframes beanBob{50%{transform:translateY(-6px) rotate(14deg)}}
@media(hover:hover){.cup:hover .cupg{transform:rotate(-2deg);transform-origin:50% 90%;transition:transform .5s}}

/* ---------- visit ---------- */
.visit{grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
dl{display:grid;grid-template-columns:7rem 1fr;gap:1rem 1rem;margin-top:1rem}
dt{font-size:.92rem;font-weight:600;color:var(--muted);padding-top:.1rem}
dd.fa{direction:rtl;text-align:right}
dd a{text-underline-offset:5px;text-decoration-color:rgb(var(--k));text-decoration-thickness:2px}
.map{min-height:22rem;display:grid;place-items:center;text-align:center;padding:2rem;border-radius:32px;color:var(--cream);
  background:linear-gradient(160deg,rgb(var(--f)/.96),rgb(var(--f)/.86));border:1px solid rgb(var(--c)/.25);box-shadow:inset 0 1px 0 rgb(var(--c)/.3),0 30px 60px -30px rgb(var(--f)/.8);position:relative;overflow:hidden}
.map::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;top:-30%;inset-inline-end:-20%;background:radial-gradient(circle,rgb(var(--k)/.35),transparent 65%);pointer-events:none}
.map>*{position:relative}.map p{font-size:1.05rem}
.follow h2{font-size:clamp(2.2rem,7vw,5.5rem)}
.follow em{color:var(--copper);text-decoration:none}

/* ---------- footer ---------- */
footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;padding:3rem var(--pad) 3rem;overflow:hidden;border-top:1px solid rgb(var(--k)/.6)}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.92rem}
footer nav a{text-decoration:none;opacity:.88;padding:.2rem 0;border-bottom:1px solid transparent;transition:border-color .3s,opacity .3s}
footer nav a:hover{opacity:1;border-color:var(--copper)}
footer p{font-size:.88rem;opacity:.78}
footer .logo-txt{font-size:1.15rem}
.mega{flex-basis:100%;text-align:center;font-weight:800;font-size:clamp(5rem,26vw,22rem);line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgb(var(--c)/.22);margin-top:2rem;user-select:none;direction:ltr;font-family:var(--serif)}

/* ---------- reveal motion ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js figure.reveal{clip-path:inset(10% 0 0 0 round var(--r-img));transform:translateY(28px) scale(1.03);transition:opacity 1s var(--ease),transform 1.1s var(--ease),clip-path 1.1s var(--ease)}
.js figure.reveal.in{clip-path:inset(0 round var(--r-img));transform:none}
main{animation:pgIn .5s var(--ease) both}
@keyframes pgIn{from{opacity:0;transform:translateY(20px)}}

/* ---------- page transition + intro ---------- */
.wipe,.intro{display:grid;place-items:center;background:var(--forest);color:var(--cream);pointer-events:none}
.wipe{position:fixed;inset:0;z-index:90;visibility:hidden;clip-path:inset(100% 0 0 0)}
.intro{position:fixed;inset:0;z-index:100;clip-path:inset(0);animation:introOut .4s .4s cubic-bezier(.65,0,.35,1) forwards}
.wm{display:grid;justify-items:center;gap:.9rem;direction:ltr}
.wm b{display:flex;font-size:clamp(3.4rem,18vw,8rem);font-weight:800;line-height:1;letter-spacing:.12em;padding-inline-start:.12em}
.wm b i{font-style:normal;display:inline-block}
.wm span{font-size:.78rem;font-weight:600;letter-spacing:.5em;text-transform:uppercase;opacity:0;position:relative;padding-top:1rem}
.wm span::before{content:"";position:absolute;top:0;left:50%;width:2.4rem;height:2px;margin-left:-1.2rem;border-radius:2px;background:var(--copper);box-shadow:0 0 12px rgb(var(--k))}
.wipe b i,.intro b i{transform:translateY(45%);opacity:0}
.wipe.cover{visibility:visible;animation:wIn .2s cubic-bezier(.65,0,.35,1) forwards}
.wipe.cover b i{animation:wLet .18s cubic-bezier(.2,.8,.2,1) forwards}
.wipe.cover b i:nth-child(1){animation-delay:.04s}.wipe.cover b i:nth-child(2){animation-delay:.06s}.wipe.cover b i:nth-child(3){animation-delay:.08s}.wipe.cover b i:nth-child(4){animation-delay:.1s}
.wipe.cover span{animation:wFade .15s .1s forwards}
.arrive .wipe{visibility:visible;clip-path:inset(0);animation:wOut .3s .02s cubic-bezier(.65,0,.35,1) forwards}
.arrive .wipe b i{transform:none;opacity:1}.arrive .wipe span{opacity:.85}
.intro b i{animation:wLet .25s cubic-bezier(.2,.8,.2,1) forwards}
.intro b i:nth-child(1){animation-delay:0s}.intro b i:nth-child(2){animation-delay:.04s}.intro b i:nth-child(3){animation-delay:.08s}.intro b i:nth-child(4){animation-delay:.12s}
.intro span{animation:wFade .25s .15s forwards}
.seen .intro,.arrive .intro{display:none}
@keyframes wIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes wOut{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes wLet{to{transform:none;opacity:1}}
@keyframes wFade{to{opacity:.85}}
@keyframes introOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}

/* ---------- floating glass dock (mobile) ---------- */
.dock{display:none}
@media(max-width:820px){
  /* the glass bar, its concave notch and the luminous notch ring are all positioned from --bx */
  .dock{--notch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='44' viewBox='0 0 100 44'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V44H0Z M14.11 0A9 9 0 0 1 22.84 6.81A28 28 0 0 0 77.16 6.81A9 9 0 0 1 85.89 0Z'/%3E%3C/svg%3E");
    --ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='44' viewBox='0 0 100 44'%3E%3Cpath d='M14.11 0A9 9 0 0 1 22.84 6.81A28 28 0 0 0 77.16 6.81A9 9 0 0 1 85.89 0' fill='none' stroke='%23F3E8D5' stroke-opacity='.95' stroke-width='1.3'/%3E%3C/svg%3E");
    position:fixed;z-index:40;inset-inline:0;bottom:0;display:flex;align-items:stretch;height:calc(54px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    color:var(--forest);transition:--bx .8s var(--spring);-webkit-tap-highlight-color:transparent}
  .dock.snap{transition:none}
  .dock::before{content:"";position:absolute;inset:0 0 -90px 0;z-index:0;border-radius:0;pointer-events:none;
    background:linear-gradient(180deg,rgb(var(--c)/.8),rgb(var(--c)/.64));
    -webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9);
    border:0;border-top:1px solid rgb(var(--c)/.75);
    box-shadow:inset 0 1px 0 rgb(var(--c)),inset 0 14px 18px -14px rgb(var(--c)/.9),0 -14px 34px -14px rgb(var(--f)/.5);
    -webkit-mask-image:var(--notch),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:calc(var(--bx) - 50px) 0,0 0,100% 0,calc(var(--bx) - 50px) 44px;
    -webkit-mask-size:100px 44px,calc(var(--bx) - 50px) 100%,calc(100% - var(--bx) - 50px) 100%,100px 100%;
    mask-image:var(--notch),linear-gradient(#000,#000),linear-gradient(#000,#000),linear-gradient(#000,#000);
    mask-repeat:no-repeat;
    mask-position:calc(var(--bx) - 50px) 0,0 0,100% 0,calc(var(--bx) - 50px) 44px;
    mask-size:100px 44px,calc(var(--bx) - 50px) 100%,calc(100% - var(--bx) - 50px) 100%,100px 100%}
  .dock::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:var(--ring) no-repeat calc(var(--bx) - 50px) 0/100px 44px;filter:drop-shadow(0 0 3px rgb(var(--k)/.55))}
  .dock .pill{position:absolute;z-index:2;top:-23px;left:0;width:46px;height:46px;border-radius:50%;pointer-events:none;
    transform:translateX(calc(var(--bx) - 23px));
    background:radial-gradient(circle at 50% 18%,rgb(var(--c)/.95),rgb(var(--c)/.55) 70%);
    -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);
    border:1.5px solid rgb(var(--c));
    box-shadow:0 0 0 1px rgb(var(--k)/.3),0 0 22px 2px rgb(var(--k)/.42),0 10px 18px -6px rgb(var(--f)/.5),inset 0 1px 1px rgb(var(--c)),inset 0 -8px 14px rgb(var(--k)/.2)}
  .dock .pill::after{content:"";position:absolute;inset:3px 9px auto;height:42%;border-radius:50%;background:linear-gradient(180deg,rgb(var(--c)/.9),transparent)}
  .dock a{position:relative;z-index:3;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:9px 0 0;
    color:rgb(var(--f)/.78);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .dock a svg{width:22px;height:22px;stroke-width:1.7;transition:transform .7s var(--spring),color .3s,stroke-width .3s}
  .dock a span{font-size:.66rem;font-weight:500;line-height:1.4;white-space:nowrap;transition:color .3s,transform .6s var(--spring),font-weight .3s}
  .dock a.on{color:var(--forest)}
  .dock a.on svg{transform:translateY(-20px) scale(1.04);stroke-width:2}
  .dock a.on span{font-weight:700;transform:translateY(-1px)}
  .dock a:active svg{transform:scale(.88)}.dock a.on:active svg{transform:translateY(-20px) scale(.92)}
  footer{padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
}

/* ---------- responsive ---------- */
@media(max-width:820px){
  :root{--pad:1.25rem;--gap:4.5rem;--hdr:52px}
  .desktop-links{display:none}
  .nav{padding-inline:1.05rem .35rem}
  .logo-txt{font-size:1.1rem}.logo span{display:none}
  .ibtn{width:40px;height:40px}
  .story,.signature,.visit{grid-template-columns:1fr}
  .story .tall,.story-text,.story .wide{grid-column:1}.story-text{padding-top:0}
  .hero .ph{inset:0 0 53% 0;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .hero .ph img{object-position:78% 40%}
  .hero::after{background:linear-gradient(180deg,rgb(var(--f)/.4) 0,rgb(var(--f)/0) 22%)}
  .hero-copy{padding-bottom:6rem}
  .hero .dsp{font-size:11vw}
  .hero h1.fa.sub,.hero .dsp+.fa.sub{font-size:1.08rem}
  .lede{font-size:1rem}
  .ctas{flex-direction:column}.ctas .btn{width:100%}
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw}.g1,.g2,.g5{grid-column:span 2}.g3,.g4{grid-column:span 1}.g1{grid-row:span 1}
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:calc(var(--pad)*-1);padding:0 var(--pad) 1rem;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 76%;scroll-snap-align:center}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--pad)*-1);padding:.3rem var(--pad) .8rem;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{white-space:nowrap;flex:none}
  .items{gap:.7rem}
  .signature,.visit{gap:2.2rem}
  dl{grid-template-columns:5.5rem 1fr}
  .mega{font-size:30vw}
  main>section::before{top:5.2rem}
  footer{gap:1.2rem}
}

/* ---------- accessibility: reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js figure.reveal{opacity:1;transform:none;clip-path:none}
  .intro,.wipe{display:none}
  .hero .ph img{transform:none}
  .cup .fill,.cup .art{transform:none!important;opacity:1!important}.cup .stream,.cup .spout,.cup .rip{display:none}
}
@media(prefers-reduced-transparency:reduce){
  .nav,.dock::before,.sbar{background:var(--cream)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}


/* ==========================================================================
   iOS refinement layer
   ========================================================================== */
/* header specular highlight slides with the scroll position */
.nav::before{background-position:0 0,calc(120% - var(--sy,0)*1.4%) 0}
.nav:hover::before{background-position:0 0,-20% 0}
/* continuous (squircle) corners where the browser supports them */
@supports (corner-shape:squircle){
  .nav,.sbar,.favs,.card a,.card .meta,.items,.ph,.map,.side,.lb img{corner-shape:squircle}
  .card a,.ph,.items,.map,.side{border-radius:34px}
  .card .meta{border-radius:26px}
}
/* dock lens: the circle swells while it is dragged */
.dock .pill{transition:scale .35s var(--spring)}
.dock.drag .pill{scale:1.16}
.dock{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* press feedback everywhere, like a tapped iOS control */
a,button,summary,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.card a:active{transform:scale(.97)}


/* ---------- header extras: open-now chip, favourites, map ---------- */
.open-chip{display:inline-flex;align-items:center;gap:.4rem;margin-inline-start:.4rem;padding:.3rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;line-height:1.4;white-space:nowrap;
  background:rgb(var(--f)/.08);border:1px solid rgb(var(--f)/.14);box-shadow:inset 0 1px 0 rgb(var(--c)/.7);transition:opacity .3s}
.open-chip i{width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--forest);flex:none}
.open-chip.is-open i{background:var(--copper);border-color:var(--copper);box-shadow:0 0 0 3px rgb(var(--k)/.25),0 0 10px rgb(var(--k)/.8);animation:pulse 2.4s ease-in-out infinite}
.open-chip span{font-weight:500;opacity:.78}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgb(var(--k)/.08),0 0 10px rgb(var(--k)/.5)}}
.nav .acts{gap:.15rem}
.cnt{position:absolute;top:1px;inset-inline-start:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font:700 .66rem/1 var(--sans);
  background:var(--forest);color:var(--cream);border:1.5px solid rgb(var(--c)/.9);box-shadow:0 0 10px rgb(var(--k)/.7)}
.ibtn.has svg{fill:rgb(var(--k)/.9)}
.favs{position:fixed;z-index:39;top:calc(var(--hdr-top) + var(--hdr) + 8px);left:max(10px,calc(50% - 590px));width:min(calc(100% - 20px),23rem);max-height:min(60svh,28rem);overflow:auto;padding:.9rem 1rem 1rem;border-radius:26px;
  background:rgb(var(--c)/.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);border:1px solid rgb(var(--c)/.8);
  box-shadow:inset 0 1px 0 rgb(var(--c)),0 24px 44px -18px rgb(var(--f)/.55);
  transform:translateY(-10px) scale(.97);transform-origin:top left;opacity:0;visibility:hidden;transition:transform .45s var(--spring),opacity .3s,visibility .3s}
.favs.open{transform:none;opacity:1;visibility:visible}
.favs-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}.favs-h b{font-size:1.05rem}
.favs ul{list-style:none;padding:0}
.favs li{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;border-top:1px solid rgb(var(--f)/.12)}
.favs li .n{flex:1;font:600 1rem/1.4 var(--serif);direction:ltr;text-align:left}
.favs li .ibtn{width:34px;height:34px}
.favs-empty{color:var(--muted);font-size:.92rem;padding:.4rem 0 .2rem}
.items .end{display:flex;flex-direction:row-reverse;align-items:center;gap:.5rem;flex:none}
.fav{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--forest);cursor:pointer;transition:transform .35s var(--spring),background .25s}
.fav:hover{background:rgb(var(--k)/.14)}.fav:active{transform:scale(.8)}
.fav svg{width:20px;height:20px;transition:fill .25s}
.fav[aria-pressed=true] svg{fill:var(--copper);animation:pop .45s var(--spring)}
@keyframes pop{40%{transform:scale(1.35)}}
@media(max-width:820px){.favs{left:10px}}


/* ---------- hamburger drawer (mobile) ---------- */
.burger,.drawer,.scrim{display:none}
.dr-links a svg,.dr-row svg{flex:none}
@media(max-width:820px){
  .nav .open-chip,.nav .only-d{display:none}
  .nav{gap:.3rem;padding-inline:.35rem}
  .nav .logo{margin-inline-start:.2rem}
  .burger{display:grid;place-content:center;gap:5px;flex:none}
  .burger i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .55s var(--spring)}
  .burger.x i:first-child{transform:translateY(3.5px) rotate(45deg)}
  .burger.x i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  html.dr-open{overflow:hidden}
  .scrim{display:block;position:fixed;inset:0;z-index:60;background:rgb(var(--f)/.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
  .scrim.open{opacity:1;visibility:visible;transition-delay:0s}
  .drawer{display:flex;flex-direction:column;gap:.9rem;position:fixed;z-index:61;top:var(--hdr-top);bottom:8px;right:8px;width:min(84vw,21rem);padding:1rem;overflow:auto;overscroll-behavior:contain;color:var(--forest);
    border-radius:30px;background:linear-gradient(180deg,rgb(var(--c)/.92),rgb(var(--c)/.84));-webkit-backdrop-filter:blur(28px) saturate(1.9);backdrop-filter:blur(28px) saturate(1.9);
    border:1px solid rgb(var(--c)/.9);box-shadow:inset 0 1px 0 rgb(var(--c)),-20px 20px 50px -20px rgb(var(--f)/.6);
    transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .6s var(--spring),visibility 0s .6s}
  .drawer.open{transform:none;visibility:visible;transition-delay:0s}
  .dr-h{display:flex;align-items:center;justify-content:space-between;padding:.1rem .2rem 0}
  .dr-h .logo-txt{font-size:1.15rem}.dr-h .logo span{display:inline}
  .drawer .open-chip{align-self:flex-start;margin:0}
  .dr-links,.dr-tools{display:grid;border-radius:22px;overflow:hidden;background:rgb(var(--c)/.65);border:1px solid rgb(var(--f)/.08);box-shadow:inset 0 1px 0 rgb(var(--c))}
  .dr-links a,.dr-row{position:relative;display:flex;align-items:center;gap:.85rem;width:100%;min-height:52px;padding:.55rem 1.05rem;font:600 1rem/1.4 var(--sans);color:inherit;text-align:start;text-decoration:none;background:transparent;border:0;cursor:pointer;
    transition:background-color .2s,color .2s}
  .dr-links a+a::before,.dr-row+.dr-row::before{content:"";position:absolute;top:0;inset-inline:1.05rem;height:1px;background:rgb(var(--f)/.12)}
  .dr-links a:active,.dr-row:active{background:rgb(var(--f)/.1)}
  .dr-links a.cur{background:rgb(var(--f)/.94);color:var(--cream)}
  .dr-links a.cur::before,.dr-links a.cur+a::before{opacity:0}
  .dr-links a span,.dr-row span{padding-top:.3rem}
  .dr-row small{font-weight:500;opacity:.7;font-size:.85rem}
  .dr-row .cnt{position:static;margin-inline-start:auto}
  .dr-row[data-fav].has svg{fill:rgb(var(--k)/.9)}
  .dock.none .pill{opacity:0;scale:.6}
}
@media(min-width:821px) and (max-width:1100px){.logo span,.open-chip span{display:none}}

/* ---------- about page ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.chips .btn{min-height:44px;padding:.3rem 1.15rem;font-weight:500}
.faq-sec{background:transparent}
.faq{max-width:48rem;margin:2rem auto 0;width:100%;overflow:hidden;border-radius:24px;background:rgb(var(--c)/.6);border:1px solid rgb(var(--c)/.9);box-shadow:inset 0 1px 0 rgb(var(--c)),0 22px 44px -26px rgb(var(--f)/.55)}
.faq details+details{border-top:1px solid rgb(var(--f)/.12)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.25rem;font-weight:600;transition:background-color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:active{background:rgb(var(--f)/.08)}
.faq summary::after{content:"";flex:none;width:.55rem;height:.55rem;margin-top:-.25rem;border-inline-end:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(45deg);transition:transform .45s var(--spring)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:.2rem}
.faq p{padding:0 1.25rem 1.1rem;color:var(--muted);max-width:none}

/* phone button: mobile header only (beside the hamburger) */
.only-m{display:none}
@media(max-width:820px){.only-m{display:grid}.nav .only-m{margin-inline-start:-.1rem}}
/* toast */
.toast{position:fixed;z-index:70;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);bottom:calc(74px + env(safe-area-inset-bottom,0px));padding:.7rem 1.2rem;border-radius:999px;font:600 .92rem/1.5 var(--sans);color:var(--cream);
  background:rgb(var(--f)/.94);border:1px solid rgb(var(--c)/.3);box-shadow:inset 0 1px 0 rgb(var(--c)/.3),0 14px 30px -12px rgb(var(--f)/.7);opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;transition:opacity .3s,transform .5s var(--spring)}
.toast.on{opacity:1;transform:none}
@media(min-width:821px){.toast{bottom:28px}}

/* ---------- 3D map ---------- */
.map#map3d{display:block;padding:0;min-height:0;height:min(30rem,78vh);text-align:start;background:rgb(var(--c)/.9)}
.map#map3d::before{display:none}
#map3d-canvas{position:absolute;inset:0;z-index:0}
#map3d .maplibregl-canvas{outline:0}
#map3d .maplibregl-ctrl-group{background:rgb(var(--c)/.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgb(var(--f)/.15);border-radius:14px;box-shadow:none;overflow:hidden}
#map3d .maplibregl-ctrl-group button{width:34px;height:34px}
#map3d .maplibregl-ctrl-attrib{background:rgb(var(--c)/.7);font-size:10px;color:var(--forest)}
.m3-info{position:absolute;z-index:2;inset-inline:12px;bottom:12px;padding:.9rem 1rem;border-radius:24px;color:var(--forest);pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--c)/.86),rgb(var(--c)/.74));-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgb(var(--c)/.9);box-shadow:inset 0 1px 0 rgb(var(--c)),0 14px 30px -14px rgb(var(--f)/.55)}
.m3-info>*{pointer-events:auto}
.m3-info p{margin:0;font-size:.98rem;font-weight:600}
.m3-code{font-size:.78rem!important;font-weight:500!important;opacity:.7;margin:.1rem 0 .7rem!important}
.m3-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.m3-btns .btn{padding:.6rem 1.1rem;font-size:.9rem}
@media(max-width:820px){.map#map3d{height:min(34rem,74vh)}.m3-info{bottom:calc(12px + 56px)}}
@media(min-width:821px){.m3-info{inset-inline-end:auto;max-width:24rem}}
.m3-pin{display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 8px 8px rgb(23 61 50/.45))}
.m3-pin b{font:700 .78rem/1 var(--sans);letter-spacing:.14em;color:var(--cream);background:var(--forest);padding:.5rem .8rem;border-radius:999px;border:1.5px solid var(--cream)}
.m3-pin i{width:12px;height:12px;margin-top:-6px;background:var(--copper);border:2px solid var(--cream);border-radius:50%;box-shadow:0 0 0 6px rgb(200 121 74/.3);animation:pulse 2.4s ease-in-out infinite}
.map#map3d.fail #map3d-canvas{display:none}
.map#map3d.fail{height:auto;min-height:16rem;display:grid;place-items:center;background:linear-gradient(160deg,rgb(var(--f)/.96),rgb(var(--f)/.86))}
.map#map3d.fail .m3-info{position:static;background:none;border:0;box-shadow:none;color:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none}
.map#map3d.fail #map3d-reset{display:none}
.m3-info .btn{--bg:var(--forest);--fg:var(--cream);--edge:rgb(var(--f))}
.m3-info .btn.ghost{--bg:rgb(var(--f)/.08);--fg:var(--forest);--edge:rgb(var(--f)/.28)}
.map#map3d.fail .m3-info .btn:not(.ghost){--bg:rgb(var(--c)/.94);--fg:var(--forest);--edge:rgb(var(--c))}

/* ---------- desktop hero: keep the copy clear of the fixed header (short laptop screens) ---------- */
@media(min-width:821px){
  main>section.hero{padding-top:calc(var(--hdr-top) + var(--hdr) + 1rem)!important}
  .hero .dsp{font-size:clamp(2.7rem,min(9vw,14svh),7.2rem)}
}

/* ---------- tablet / phone side menu: children keep their height so the drawer itself scrolls, with a slim visible scrollbar ---------- */
@media(max-width:820px){
  .drawer{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgb(var(--f)/.35) transparent}
  .drawer>*{flex:none}
  .drawer::-webkit-scrollbar{width:6px}
  .drawer::-webkit-scrollbar-thumb{background:rgb(var(--f)/.3);border-radius:99px}
  .drawer::-webkit-scrollbar-track{background:transparent;margin-block:18px}
}

/* ---------- gallery with real photos: masonry columns, portrait photos are not cropped ---------- */
.grid.photos{display:block;columns:3;column-gap:.8rem}
.grid.photos .gp{display:grid;break-inside:avoid;margin:0 0 .8rem;aspect-ratio:2/3}
.grid.photos .gp.p{aspect-ratio:3/4}
@media(max-width:820px){.grid.photos{columns:2;column-gap:.6rem}.grid.photos .gp{margin-bottom:.6rem}}

/* ---------- story photos: choose which part of the photo stays visible in the crop ---------- */
.story .tall img{object-position:50% 30%}
.story .wide img{object-position:50% 46%}


/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - 4rem);display:grid;align-items:center}
.nf-in{max-width:44rem}
.nf-num{display:flex;align-items:flex-end;gap:.4rem;font-family:var(--serif);font-weight:800;font-size:clamp(5rem,22vw,11rem);line-height:.9;color:rgb(var(--c)/.92);margin-bottom:1.2rem}
.nf-cup{width:.9em;height:1.05em;color:var(--cream);overflow:visible}
.nf-steam{stroke:var(--copper);stroke-dasharray:40;animation:nfS 3.2s ease-in-out infinite}
.nf-spill{animation:nfW 2.4s ease-in-out infinite alternate}
.nf-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.nf-links a{text-decoration:none;font-size:.9rem;padding:.45rem 1rem;border-radius:999px;border:1px solid rgb(var(--c)/.35);background:rgb(var(--c)/.1);transition:background .3s}
.nf-links a:hover{background:rgb(var(--c)/.22)}
@keyframes nfS{0%{stroke-dashoffset:40;opacity:0}40%{opacity:1}100%{stroke-dashoffset:-40;opacity:0}}
@keyframes nfW{to{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.nf-steam,.nf-spill{animation:none}}