/* =========================================================
   THE DOOR · ذا دور — palette pulled from the photos
   navy facade/door · cream awning stripe · white lightbox sign
   pine slat box · red wood panels · red sconce · plaid scarf
   ========================================================= */
:root{
  --navy:#1d2333;        /* facade + door */
  --navy-deep:#0e121c;
  --cream:#efe8da;       /* awning stripe */
  --sign:#fbfaf6;        /* lightbox sign */
  --ink:#1b1c20;         /* sign lettering */
  --pine:#a4632e;        /* slatted sign box */
  --pine-lt:#c98b4e;
  --redwood:#7a1f0c;     /* interior panels */
  --sconce:#e0243a;      /* red lamp shades */
  --scarf:#ac232d;       /* plaid scarf red */
  --plaid:#3f6b3c;       /* plaid scarf green */
  --plaque:#e79a86;      /* WELCOME plaque */
  --bulb:#ffc95a;        /* string bulbs */
  --pampas:#d4ae72;
  --brass:#b88a45;

  /* day (default) */
  --bg:#f6f1e7;
  --bg-2:#efe6d6;
  --surface:#fffdf8;
  --text:#1b1c20;
  --muted:#5d5a55;
  --line:#ddd2bf;
  --accent:var(--scarf);
  --accent-ink:#fff;
  --bulb-off:#efe3c4;
  --glow-a:rgba(255,190,90,.20);
  --shadow:0 10px 30px rgba(40,25,10,.12);

  --topbar-h:56px;
  --radius:14px;
  --ff-ar:"Segoe UI","Noto Naskh Arabic","Geeza Pro","Arabic Typesetting",Tahoma,system-ui,sans-serif;
  --ff-en:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-serif:"Didot","Bodoni 72","Bodoni MT",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
html[data-theme="night"]{
  --bg:#10131c;
  --bg-2:#171b27;
  --surface:#1b2030;
  --text:#f3ecdf;
  --muted:#b7ad9d;
  --line:#2c3347;
  --accent:#e0343f;
  --bulb-off:var(--bulb);
  --glow-a:rgba(255,170,70,.28);
  --shadow:0 10px 36px rgba(0,0,0,.45);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-ar);line-height:1.65;overflow-x:hidden;overflow-x:clip;transition:background .6s,color .6s}
html[lang="en"] body{font-family:var(--ff-en)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h2{font-size:clamp(1.7rem,6vw,2.6rem);font-weight:700}
html[lang="en"] h2{font-family:var(--ff-serif);font-weight:500;letter-spacing:.01em}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--bulb);outline-offset:3px;border-radius:6px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.section{padding:64px 0}
section[id]{scroll-margin-top:calc(var(--topbar-h) + 20px)}
.lead{color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .4em}
html[lang="ar"] .kicker{letter-spacing:0;font-size:.9rem}

/* ================= INTRO: the door leaves ================= */
.intro{position:fixed;inset:0;z-index:300;display:flex;pointer-events:none;perspective:1400px;animation:introFailsafe 0s 2.6s forwards}
.intro-leaf{width:50%;height:100%;display:block;background:#1d2333;transition:transform 1.1s cubic-bezier(.7,0,.25,1),opacity 1.1s}
.intro-a{transform-origin:left center}
.intro-b{transform-origin:right center}
.intro-done .intro-a{transform:rotateY(-100deg);opacity:0}
.intro-done .intro-b{transform:rotateY(100deg);opacity:0}
.intro-gone .intro{display:none}
@keyframes introFailsafe{to{visibility:hidden}}

/* ================= TOP BAR ================= */
.topbar{position:fixed;inset:0 0 auto 0;z-index:100;color:var(--cream)}
.topbar-inner{height:var(--topbar-h);display:flex;align-items:center;gap:10px;padding:0 12px;padding-top:env(safe-area-inset-top);background:rgba(29,35,51,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mini-brand{display:flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--ff-serif);font-size:1.05rem;white-space:nowrap}
.socials{display:flex;gap:6px;margin-inline-start:auto}
.socials a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1.5px solid currentColor;color:inherit;transition:transform .2s,background .2s,color .2s}
.socials a:hover{transform:translateY(-2px);background:var(--cream);color:var(--navy)}
.socials svg{width:18px;height:18px}
.toggles{display:flex;align-items:flex-start;gap:6px;height:100%}

/* valance: the striped scalloped awning edge (photo: exterior-awning-night) */
.valance{height:16px;background:repeating-linear-gradient(90deg,var(--navy) 0 22px,var(--cream) 22px 44px);
  -webkit-mask:linear-gradient(#000,#000) top/100% 5px no-repeat,radial-gradient(11px 11px at 11px 5px,#000 98%,transparent) 0 0/22px 16px repeat-x;
          mask:linear-gradient(#000,#000) top/100% 5px no-repeat,radial-gradient(11px 11px at 11px 5px,#000 98%,transparent) 0 0/22px 16px repeat-x;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.valance.flip{transform:scaleY(-1)}

/* lamp toggle: a bell lamp that lights up */
.lamp-toggle{position:relative;width:44px;height:100%;background:none;border:0;padding:0;cursor:pointer;color:#2b2f38}
.lamp-cord{position:absolute;top:0;left:50%;width:2px;height:12px;background:#0b0e15;transform:translateX(-50%)}
.lamp-svg{position:absolute;top:8px;left:50%;width:36px;height:36px;transform:translateX(-50%);transform-origin:50% 0;color:#5b5f6b;transition:transform .5s}
.lamp-svg{--bulbc:#8a8778}
.lamp-toggle:hover .lamp-svg{transform:translateX(-50%) rotate(8deg)}
.lamp-toggle.swing .lamp-svg{animation:swing 1s ease-out}
@keyframes swing{0%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(14deg)}50%{transform:translateX(-50%) rotate(-9deg)}75%{transform:translateX(-50%) rotate(4deg)}100%{transform:translateX(-50%) rotate(0)}}
.lamp-cone{position:absolute;top:40px;left:50%;width:70px;height:60px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0,rgba(255,201,90,.55),transparent 70%);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);opacity:0;transition:opacity .4s;pointer-events:none}
html[data-theme="night"] .lamp-cone{opacity:1}
html[data-theme="night"] .lamp-svg{--bulbc:var(--bulb);filter:drop-shadow(0 0 5px var(--bulb))}

/* language toggle: the WELCOME plaque that flips */
.sign-toggle{position:relative;height:100%;min-width:74px;background:none;border:0;padding:0;cursor:pointer;perspective:400px}
.sign-string{position:absolute;top:0;left:50%;width:22px;height:14px;transform:translateX(-50%);border:1.5px solid #c9b79a;border-bottom:0;border-radius:10px 10px 0 0}
.sign-plaque{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:grid;place-items:center;min-width:70px;height:28px;padding:0 10px;border-radius:50%;background:var(--plaque);color:#3a1d17;box-shadow:inset 0 0 0 2px #e79a86,inset 0 0 0 3px #7c3a2e;transition:transform .6s cubic-bezier(.5,1.6,.4,1)}
.sign-face{font-family:var(--ff-serif);font-size:.72rem;letter-spacing:.12em;white-space:nowrap}
.sign-face:lang(ar),html[lang="en"] .sign-face{letter-spacing:0;font-family:var(--ff-ar);font-size:.85rem;font-weight:700}
html[lang="ar"] .sign-face{font-family:var(--ff-serif);letter-spacing:.12em;font-size:.72rem;font-weight:400}
.sign-toggle.flip .sign-plaque{transform:translateX(-50%) rotateY(360deg)}
.sign-toggle:hover .sign-plaque{transform:translateX(-50%) rotate(-6deg)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100svh;padding-top:calc(var(--topbar-h) + 14px);display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
  background:radial-gradient(120% 60% at 50% 0,var(--surface),var(--bg) 70%)}
.lamps{display:flex;justify-content:center;gap:clamp(28px,12vw,90px);margin-top:4px;position:relative;z-index:2}
.hlamp{position:relative;width:52px;height:52px;color:#2f323a;animation:sway 6s ease-in-out infinite;transform-origin:50% -40px}
.hlamp:nth-child(2){animation-delay:-2s}.hlamp:nth-child(3){animation-delay:-4s}
.hlamp svg{width:100%;height:100%}
.hlamp{--bulbc:#efe3c4}
.hlamp::before{content:"";position:absolute;bottom:100%;left:50%;width:2px;height:40px;background:#2f323a}
.beam{position:absolute;top:44px;left:50%;width:140px;height:230px;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(255,201,90,.45),rgba(255,201,90,0));clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:0;transition:opacity .8s;pointer-events:none;mix-blend-mode:screen}
html[data-theme="night"] .hlamp{--bulbc:var(--bulb)}
html[data-theme="night"] .hlamp svg{filter:drop-shadow(0 6px 8px rgba(255,201,90,.9))}
html[data-theme="night"] .beam{opacity:1}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

/* wood sign box with procedural pine texture (set by JS as --wood) */
.wood{background-color:var(--pine);background-image:var(--wood,repeating-linear-gradient(90deg,#9a5a28 0 20px,#7a441c 20px 22px));background-size:144px 320px}
.signbox{position:relative;z-index:1;margin-top:-6px;width:min(88vw,420px);padding:26px 22px 30px;border-radius:4px;box-shadow:var(--shadow),inset 0 -12px 22px rgba(0,0,0,.25)}
.lightbox{background:var(--sign);border-radius:3px;padding:18px 14px 12px;box-shadow:0 2px 0 rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.05);transition:box-shadow .8s,background .8s}
html[data-theme="night"] .lightbox{background:#fffef8;box-shadow:0 0 30px rgba(255,240,200,.55),0 0 90px rgba(255,210,140,.35),inset 0 0 14px rgba(255,230,180,.6)}
.wordmark{width:100%;height:auto;color:var(--ink);display:block}
.wordmark .s{stroke-dasharray:var(--len,400);stroke-dashoffset:0}
.wordmark .t{stroke-width:2.4}
.wordmark .m{stroke-width:4.4}
.wordmark .o{stroke-width:2.8}
.wordmark .m2{stroke-width:5.6}
.wordmark .k{stroke-width:6.6}
.wordmark .k2{stroke-width:8.2}
.wordmark .ball{fill:currentColor}
.wordmark{transition:opacity .35s}
.wordmark.fading{opacity:0}

.hero-copy{position:relative;z-index:3;padding:22px 16px 0;max-width:640px}
.ar-name{font-size:1.9rem;font-weight:700;margin:.1em 0 0;font-family:var(--ff-ar)}
.tagline{font-family:var(--ff-serif);font-size:clamp(1.25rem,5vw,1.7rem);font-style:italic;margin:.2em 0 .3em}
html[lang="ar"] .tagline{font-family:var(--ff-ar);font-style:normal;font-weight:700}
.sub{color:var(--muted);margin:0 auto 14px;max-width:44ch}
.status{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);margin:0 0 10px;font-size:.95rem}
.status .dot{width:10px;height:10px;border-radius:50%;background:#9a9a9a;flex:none}
.is-open .status .dot{background:#2fa35a;box-shadow:0 0 0 0 rgba(47,163,90,.6);animation:pulse 2s infinite}
.is-closed .status .dot{background:var(--scarf)}
.status-count{color:var(--muted);font-variant-numeric:tabular-nums}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(47,163,90,0)}100%{box-shadow:0 0 0 0 rgba(47,163,90,0)}}
.notice{font-size:.9rem;background:rgba(63,107,60,.12);border:1px solid rgba(63,107,60,.35);border-radius:10px;padding:8px 12px;margin:0 auto 12px;max-width:44ch}
.ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--text);text-decoration:none;font-weight:700;background:var(--surface);color:var(--text);transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn svg{flex:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;text-align:start}
.btn b{font-weight:700}
.btn-primary span{display:flex;flex-direction:column;line-height:1.2}
.btn-primary small{font-weight:500;opacity:.9;font-size:.78rem}
.btn.wide{width:100%;justify-content:center;margin:6px 0 18px}
.ctas .btn-primary{flex-basis:100%;justify-content:center;max-width:340px}

.hero-photo{position:relative;margin:auto 0 0;width:100%;height:min(58vh,560px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent)}
.hero-photo img{width:100%;height:118%;object-fit:cover;object-position:50% 72%;animation:drift 26s ease-in-out infinite alternate;transform-origin:50% 80%}
@keyframes drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-2%,-5%,0)}}

/* ================= STATS ================= */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:1100px;margin:0 auto;padding:28px 16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 12px;text-align:center}
.stat-num{font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap}
.stat-num small{font-size:.95rem;color:var(--muted);font-weight:600}
.stat p{margin:.2em 0 0;color:var(--muted);font-size:.88rem}
.stat-num.has-stars{display:block}
.stars{display:block;margin:0 auto 4px;position:relative;font-size:1rem;letter-spacing:1px;color:#cfc4ae;width:max-content}
.stars::before{content:"★★★★★"}
.stars-fill{position:absolute;inset-block:0;inset-inline-start:0;overflow:hidden;white-space:nowrap;color:#e8a317;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.stars-fill::before{content:"★★★★★"}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ================= DIVIDERS ================= */
.divider{position:relative;height:34px;margin:8px 0}
.divider.awning{height:62px;margin:0}
.divider.awning::before{content:"";position:absolute;inset:0 0 auto;height:37px;background:repeating-linear-gradient(90deg,var(--navy) 0 30px,var(--cream) 30px 60px);
  -webkit-mask:linear-gradient(#000,#000) top/100% 22px no-repeat,radial-gradient(15px 15px at 15px 22px,#000 98%,transparent) 0 0/30px 37px repeat-x;
          mask:linear-gradient(#000,#000) top/100% 22px no-repeat,radial-gradient(15px 15px at 15px 22px,#000 98%,transparent) 0 0/30px 37px repeat-x;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.18))}
.divider.awning .bulbs{position:absolute;left:0;right:0;top:32px;height:28px;background:
  radial-gradient(circle at 15px 16px,var(--bulb-off) 5px,transparent 5.6px) 0 0/30px 28px repeat-x,
  linear-gradient(#6b6558,#6b6558) 0 7px/100% 1.2px no-repeat}
.divider.awning .bulbs::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15px 16px,rgba(255,255,255,.7) 1.6px,transparent 2px) 0 0/30px 28px repeat-x}
html[data-theme="night"] .divider.awning .bulbs{filter:drop-shadow(0 0 4px var(--bulb)) drop-shadow(0 0 10px rgba(255,190,80,.8));animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}45%{opacity:.75}55%{opacity:.95}}
.divider.tufted{height:46px;background-color:#16131a;background-image:
  radial-gradient(circle,#3a3440 1.6px,transparent 2px),
  linear-gradient(35deg,transparent 48%,#2b2630 49% 51%,transparent 52%),
  linear-gradient(-35deg,transparent 48%,#2b2630 49% 51%,transparent 52%);
  background-size:24px 23px;background-position:12px 0,0 0,0 0;border-block:3px solid #0b0a0d;box-shadow:inset 0 6px 10px rgba(255,255,255,.05),inset 0 -8px 12px rgba(0,0,0,.5)}
.divider.lattice{height:40px;background:
  linear-gradient(55deg,transparent 47%,var(--navy) 48% 52%,transparent 53%) 0 0/20px 28px,
  linear-gradient(-55deg,transparent 47%,var(--navy) 48% 52%,transparent 53%) 0 0/20px 28px,
  linear-gradient(90deg,rgba(255,200,120,.25),rgba(194,86,42,.35),rgba(255,200,120,.25));border-block:5px solid var(--navy)}

/* ================= REVEAL ================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.points li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.points li::before{content:"";flex:none;width:12px;height:18px;margin-top:4px;border-radius:2px;background:var(--navy);box-shadow:inset 0 0 0 2px var(--navy),inset 0 5px 0 2px var(--bulb)}

/* ================= VIBE ================= */
.vibe-grid{display:grid;gap:26px;align-items:center}
@media (min-width:860px){.vibe-grid{grid-template-columns:1.1fr .9fr}}
.photo-card{margin:0;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow);position:relative;transform-style:preserve-3d;transition:transform .25s ease-out}
.photo-card img{width:100%;height:auto;object-fit:cover}
.vibe .photo-card img{aspect-ratio:3/4}
.photo-card figcaption{position:absolute;inset:auto 0 0 0;padding:28px 14px 12px;color:#fff;font-size:.88rem;background:linear-gradient(transparent,rgba(0,0,0,.78))}

/* ================= DOOR SCENE (signature) ================= */
.door-scene{position:relative;height:260vh;background:
  radial-gradient(70% 40% at 50% 55%,rgba(255,180,90,calc(var(--p,0)*.22)),transparent 70%),
  linear-gradient(#141927,#1d2333 40%,#161b28);color:var(--cream)}
.door-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(var(--topbar-h) + 14px) 16px 20px;overflow:hidden}
.kicker.light{color:#c9bca5}
.door-stage{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;outline-offset:8px;-webkit-tap-highlight-color:transparent}
.bulkhead{width:38px;height:38px;border-radius:50%;background:#2a2d33;border:3px solid #8b7a5a;display:grid;place-items:center;margin-bottom:10px;box-shadow:0 0 calc(10px + var(--p,0)*30px) rgba(255,200,110,calc(.25 + var(--p,0)*.5))}
.bulkhead i{width:24px;height:24px;border-radius:50%;background:repeating-linear-gradient(90deg,#fce3a6 0 4px,#8b7a5a 4px 6px),#fce3a6}
.doorway{position:relative;box-sizing:content-box;width:min(56vw,36svh,300px);aspect-ratio:1/2;perspective:900px;background:#0a0c12;border:10px solid #121620;border-bottom:0;box-shadow:0 0 0 3px #2c3346,0 30px 60px rgba(0,0,0,.5)}
.interior{position:absolute;inset:0;width:100%;height:100%;transform:scale(calc(1 + var(--p,0)*.08));transform-origin:50% 70%}
.sconce-light{opacity:calc(.55 + var(--p,0)*.45)}
html[data-theme="night"] .sconce-light{animation:flicker 4s infinite}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:.85}50%{opacity:.95}}
.clock-hand{transform-origin:102px 120px;animation:tick 60s steps(60) infinite}
@keyframes tick{to{transform:rotate(360deg)}}
.spill{position:absolute;left:-40%;right:-40%;bottom:-60px;height:60px;background:radial-gradient(50% 100% at 50% 0,rgba(255,190,100,.55),transparent);opacity:var(--p,0);pointer-events:none}
.door-leaf{position:absolute;inset:0;width:100%;height:100%;transform-origin:var(--hinge,left) center;transform:rotateY(calc(var(--angle,0) * 1deg));box-shadow:0 0 30px rgba(0,0,0,.4);backface-visibility:visible;will-change:transform}
html[dir="rtl"] .door-leaf{--hinge:right}
.door-leaf .door-glass{transition:opacity .4s}
.door-stage.knocking .door-leaf{animation:knock .7s ease-in-out}
@keyframes knock{0%,100%{translate:0}15%{translate:-3px 0}30%{translate:2px 0}50%{translate:0}65%{translate:-3px 0}80%{translate:2px 0}}
.knock-text{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) scale(.6);font-family:var(--ff-serif);font-style:italic;font-size:1.4rem;color:var(--bulb);text-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;pointer-events:none;white-space:nowrap}
html[lang="ar"] .knock-text{font-family:var(--ff-ar);font-style:normal;font-weight:700}
.door-stage.knocking .knock-text{animation:pop .9s ease-out}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}30%{opacity:1;transform:translate(-50%,-80%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}
.step{width:calc(min(56vw,36svh,300px) + 50px);height:14px;background:#2a2c33;border-top:3px solid #3a3d46}
.door-title{font-size:clamp(1.4rem,5.5vw,2.4rem);text-align:center;margin:12px 0 0;opacity:clamp(0,calc((var(--p,0) - .5)*3),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .5)*3),1))*20px))}
html[lang="en"] .door-title{font-family:var(--ff-serif);font-style:italic;font-weight:400}
.door-hint{margin:0;font-size:.82rem;color:#a99f8e;text-align:center}

/* ================= MENU ================= */
.menu-boards{display:grid;gap:22px;margin-top:22px}
@media (min-width:860px){.menu-boards{grid-template-columns:1fr 1fr}}
.board{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.board-head{padding:14px 18px;color:#fff8ec;text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:1.25rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;box-shadow:inset 0 -6px 12px rgba(0,0,0,.25)}
html[lang="en"] .board-head{font-family:var(--ff-serif);font-weight:500;letter-spacing:.04em}
.board-head .nails{display:flex;gap:6px}
.board-head .nails i{width:6px;height:6px;border-radius:50%;background:#3a2412;box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.items{list-style:none;margin:0;padding:6px 18px 12px}
.item{padding:12px 0;border-bottom:1px dashed var(--line)}
.item:last-child{border-bottom:0}
.item-top{display:flex;align-items:baseline;gap:8px}
.item-name{font-weight:700}
.item-lead{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-4px);min-width:16px}
.item-price{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.item-price small{font-weight:600;color:var(--muted);font-size:.75rem}
.item-desc{margin:.25em 0 0;color:var(--muted);font-size:.9rem}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.tag.new{background:var(--plaid);color:#fff;border-color:transparent}
.tag.star{background:var(--scarf);color:#fff;border-color:transparent}

/* ================= TOPICS BARS ================= */
.bars{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.bar{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;align-items:center;gap:10px;font-size:.92rem}
.bar-track{display:block;height:14px;background:var(--bg-2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{display:block;height:100%;width:0;border-radius:999px;background:repeating-linear-gradient(90deg,var(--navy) 0 10px,#3a4462 10px 20px);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
html[data-theme="night"] .bar-fill{background:linear-gradient(90deg,#e0a33a,var(--bulb));box-shadow:0 0 12px rgba(255,200,90,.5)}
.bar:first-child .bar-fill{background:var(--scarf)}
.bar-n{font-weight:700;font-variant-numeric:tabular-nums;min-width:3ch;text-align:end}

/* ================= GALLERY ================= */
.gal-grid{display:grid;gap:16px;margin-top:18px}
@media (min-width:760px){.gal-grid{grid-template-columns:1fr 1fr;align-items:start}}
.gal-grid .photo-card:first-child img{aspect-ratio:4/5;object-position:50% 78%}
.gal-grid .photo-card:last-child img{aspect-ratio:4/5}

/* ================= VISIT ================= */
.visit-grid{display:grid;gap:18px;margin-top:18px}
@media (min-width:860px){.visit-grid{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{font-size:1.15rem;margin-top:.3em}
.wood-edge{border-top:14px solid var(--pine);border-image:var(--wood-border,none)}
.hours{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
.hours td{padding:9px 6px;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:end;white-space:nowrap}
.hours tr.today td{font-weight:700;background:rgba(172,35,45,.08)}
.hours tr.today td:first-child{border-inline-start:4px solid var(--scarf)}
.today-badge{font-size:.7rem;background:var(--scarf);color:#fff;border-radius:999px;padding:1px 7px;margin-inline-start:6px;vertical-align:middle}
.status.small{font-size:.85rem;margin:4px 0 6px}
.row-btns{display:flex;gap:10px;flex-wrap:wrap}
.sign-photo img{aspect-ratio:4/5;object-position:50% 45%}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:320px;background:var(--bg-2);box-shadow:var(--shadow)}
.map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
html[data-theme="night"] .map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.7)}

/* ================= FOOTER ================= */
.footer{background:var(--navy);color:var(--cream);margin-top:40px;text-align:center}
.footer .valance{transform:translateY(-13px) scaleY(-1);height:14px}
.footer-inner{padding:20px 16px 40px;display:flex;flex-direction:column;align-items:center;gap:6px}
.foot-mark{width:170px;color:var(--cream)}
.foot-mark path{fill:none;stroke:currentColor}
.socials-foot{margin:6px 0}
.footer .muted{color:#b8b0a2}
.rating-foot{font-weight:700;margin:4px 0}

/* ================= POINTER GLOW ================= */
.glow{position:fixed;inset:0;pointer-events:none;z-index:90;background:radial-gradient(220px 220px at var(--mx,-300px) var(--my,-300px),var(--glow-a),transparent 70%);mix-blend-mode:soft-light;transition:opacity .4s;opacity:var(--go,0)}
html[data-theme="night"] .glow{mix-blend-mode:screen}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .intro{display:none}
  .reveal{opacity:1;transform:none}
  .hero-photo img{transform:scale(1.04)}
  .door-scene{height:auto}
  .door-sticky{position:relative;height:auto;min-height:0;padding-block:60px}
  .door-leaf{transform:rotateY(-105deg)}
  html[dir="rtl"] .door-leaf{transform:rotateY(105deg)}
  .door-scene{--p:1}
  .glow{display:none}
}

/* ================= WIDE HERO: photo gets its own column ================= */
@media (min-width:980px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-rows:auto auto 1fr;column-gap:4vw;padding-inline:5vw;padding-bottom:32px;justify-items:center}
  .lamps{grid-column:1;grid-row:1}
  .signbox{grid-column:1;grid-row:2}
  .hero-copy{grid-column:1;grid-row:3;padding-top:18px}
  .hero-photo{grid-column:2;grid-row:1/4;align-self:center;height:calc(100svh - var(--topbar-h) - 70px);max-height:760px;margin:0;border-radius:20px;
    -webkit-mask-image:linear-gradient(to top,#000 72%,transparent 100%);mask-image:linear-gradient(to top,#000 72%,transparent 100%)}
  .hero-photo img{height:112%;object-position:50% 60%}
}