/* ICEBERG FOOD — navy, gold and kraft, taken from the brand's printed menu and packaging */
:root{
  --abyss:#050d18; --navy-9:#081425; --navy-8:#0c1b31; --navy-7:#13284a; --navy-6:#1c3760;
  --gold:#d6b585; --gold-hi:#efd9b0; --gold-lo:#a8854f; --gold-line:rgba(214,181,133,.3); --gold-soft:rgba(214,181,133,.12);
  --ice:#e6eef6; --ice-2:#b9c9da; --ice-3:#8299b2;
  --kraft:#c9a77b; --cream:#f3ece0; --cream-2:#e9e0d0; --ink:#0b1a2c; --ink-2:#44546a; --ink-line:rgba(11,26,44,.14);
  --serif:"Cormorant Garamond","Noto Serif Armenian",Georgia,serif;
  --sans:"Onest","Noto Sans Armenian",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wm:"Josefin Sans","Onest",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1); --out:cubic-bezier(.16,1,.3,1);
  --nav-h:72px; --gut:clamp(16px,4.2vw,56px); --maxw:1600px; --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--abyss);color:var(--ice);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
html.lock{overflow:hidden}
body{margin:0;font:400 16px/1.62 var(--sans);font-variant-numeric:lining-nums;background:var(--abyss);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:opacity .6s var(--ease)}
html.js-wait body{opacity:0}
html.pre-on{overflow:hidden}

/* ---------- the mark drawing itself: light runs from the tip along every facet.
   Each line piece is its own element growing with transform, so the graphics card animates it
   and busy page scripts cannot make it stutter. Pieces come from work/logo/gen_flow.py:
   --x/--y start in the 64-unit box, --a angle, --l length, --t start and --d duration as parts of --T ---------- */
.dm{position:relative;aspect-ratio:1;--w:2px;--T:2.4s;--t0:0s;color:var(--gold)}
.dm i,.dm b{position:absolute;left:calc(var(--x) * 1.5625%);top:calc(var(--y) * 1.5625%)}
.dm i{width:calc(var(--l) * 1.5625%);height:0;transform:rotate(var(--a));transform-origin:0 0}
.dm i::before{content:"";position:absolute;left:calc(var(--w) / -2);top:calc(var(--w) / -2);width:calc(100% + var(--w));height:var(--w);border-radius:var(--w);background:currentColor;transform:scaleX(0);transform-origin:calc(var(--w) / 2) 50%}
.dm b{width:calc(var(--w) * 5);height:calc(var(--w) * 5);margin:calc(var(--w) * -2.5) 0 0 calc(var(--w) * -2.5);border-radius:50%;background:radial-gradient(circle,#fff7e4 0,rgba(239,217,176,.6) 32%,rgba(239,217,176,0) 70%);opacity:0}
.dm::before{content:"";position:absolute;inset:-38%;border-radius:50%;background:radial-gradient(closest-side,rgba(214,181,133,.24),rgba(214,181,133,.07) 55%,rgba(214,181,133,0));opacity:0}
.dm.go i::before{animation:dmLine calc(var(--d) * var(--T)) linear calc(var(--t0) + var(--t) * var(--T)) both}
.dm.go b{animation:dmSpark 1s var(--out) calc(var(--t0) + var(--t) * var(--T)) both}
.dm.go::before{animation:dmGlow 1.8s var(--ease) calc(var(--t0) + var(--T) * .7) both}
.dm.done i::before{animation:none;transform:none}
.dm.done b{display:none}
.dm.done::before{animation:none;opacity:1}
@keyframes dmLine{to{transform:scaleX(1)}}
@keyframes dmSpark{0%{opacity:0;transform:scale(.3)}25%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
@keyframes dmGlow{to{opacity:1}}

/* ---------- preloader: the mark drawn by light + a counter that follows it ---------- */
.pre{display:none;position:fixed;inset:0;z-index:300;background:radial-gradient(60% 50% at 50% 45%,#0c1b31 0%,var(--abyss) 70%);place-items:center;transition:transform 1.15s cubic-bezier(.87,0,.13,1) .25s}
html.pre-on .pre,.pre.out{display:grid}
.pre.out{transform:translate3d(0,-100%,0)}
.pre-c{display:flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .45s var(--ease),transform .7s var(--out)}
.pre.out .pre-c{opacity:0;transform:scale(.88)}
.pre-mark{width:clamp(112px,12vw,156px);--w:clamp(1.6px,.15vw,2px);--t0:.35s;--T:2.6s}
.pre .dm.go::before{animation:dmGlow 1.8s var(--ease) calc(var(--t0) + var(--T) * .7) both,dmBreath 2.6s ease-in-out calc(var(--t0) + var(--T) * .7 + 1.8s) infinite alternate}
@keyframes dmBreath{to{opacity:.55}}
.pre-wm{display:flex;flex-direction:column;align-items:center;font-family:var(--wm);color:var(--ice);line-height:1;opacity:0;animation:preIn 1.2s var(--out) 1.8s forwards}
.pre-wm b{font-weight:400;font-size:22px;letter-spacing:.42em;margin-right:-.42em}
.pre-wm small{font-weight:300;font-size:11px;letter-spacing:.62em;margin:8px -.62em 0 0;color:var(--gold)}
@keyframes preIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pre-n{position:absolute;left:var(--gut);bottom:clamp(10px,2vw,22px);font:300 clamp(72px,13vw,168px)/.9 var(--wm);color:var(--gold-hi);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:opacity .4s var(--ease)}
.pre.out .pre-n{opacity:0}
img,svg,canvas{display:block}
img{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
svg use{pointer-events:none}

/* ---------- type ---------- */
.kicker{font:500 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
html[lang=hy] .kicker{letter-spacing:.14em}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.2vw,74px);line-height:1.02;letter-spacing:-.01em;margin-top:14px;text-wrap:balance}
html[lang=hy] .h2{font-weight:600;font-size:clamp(30px,4.1vw,56px);line-height:1.12;letter-spacing:0}
.h3x{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.4vw,46px);line-height:1.08}
html[lang=hy] .h3x{font-size:clamp(25px,2.8vw,38px)}
.sec-lead{font-size:clamp(16px,1.35vw,19px);color:var(--ice-2);max-width:620px;margin-top:20px;text-wrap:pretty}
.sec-head.center{text-align:center}
.sec-head.center .sec-lead{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 26px;border-radius:99px;font:600 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold);color:#0a1626}
.btn-gold:hover{background:var(--gold-hi)}
.btn-line{border-color:var(--gold-line);color:var(--ice);background:rgba(8,20,37,.35)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn[disabled]{opacity:.45;pointer-events:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ctas.center{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--gold-line);color:var(--gold);font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
html[lang=hy] .chip{letter-spacing:.02em}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);border-bottom:1px solid transparent;transition:background .5s var(--ease),border-color .5s var(--ease)}
.nav.solid{background:#060f1c;border-bottom-color:rgba(214,181,133,.18)}
/* new iPhone Safari draws the page behind its address bar, above our top bar: paint that strip in the bar's own colour */
.nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:140px;background:inherit;pointer-events:none}
/* whatever slides up under the dark header fades away instead of being cut by its edge (not over the light delivery section) */
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:64px;background:linear-gradient(180deg,#060f1c,rgba(6,15,28,.6) 40%,rgba(6,15,28,0));opacity:0;pointer-events:none;transition:opacity .4s}
.nav.solid::after{opacity:1}
html.under-light .nav::after,html.under-light .dock::after{opacity:0}
.nav-in{max-width:var(--maxw);height:100%;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ice)}
.mark{width:36px;height:36px;color:var(--gold);flex:none}
.wm{display:flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--wm)}
.wm b{font-weight:300;font-size:16px;letter-spacing:.34em;margin-right:-.34em;padding-bottom:5px;border-bottom:1px solid rgba(230,238,246,.55)}
.wm small{font-weight:400;font-size:8px;letter-spacing:.52em;margin-right:-.52em;margin-top:5px;color:var(--ice-2)}
.links{display:flex;gap:30px;margin-left:auto}
.links a{text-decoration:none;font-size:14.5px;color:var(--ice-2);transition:color .25s;position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--out)}
.links a:hover,.links a.cur{color:var(--ice)}
.links a:hover::after,.links a.cur::after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:16px}
.lang{display:flex;border:1px solid var(--gold-line);border-radius:99px;padding:3px}
.lang button{border:0;background:none;cursor:pointer;font:600 11.5px/1 var(--sans);letter-spacing:.06em;color:var(--ice-3);padding:8px 10px;border-radius:99px;transition:background .25s,color .25s}
.lang button[aria-pressed=true]{background:var(--gold);color:#0a1626}
.nav-phone{text-decoration:none;font:500 14.5px/1 var(--sans);letter-spacing:.04em;color:var(--ice)}
.nav-phone:hover{color:var(--gold-hi)}
.nav-cart{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(8,20,37,.4);display:grid;place-items:center;cursor:pointer;transition:border-color .25s}
.nav-cart:hover{border-color:var(--gold)}
.nav-cart svg{width:21px;height:21px}
.nav-cart-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--gold);color:#0a1626;font:700 11px/20px var(--sans);text-align:center;transform:scale(0);transition:transform .35s var(--out)}
.nav-cart.has .nav-cart-n{transform:scale(1)}
.nav-cart.bump{animation:bump .5s var(--out)}
@keyframes bump{30%{transform:scale(1.14)}}
/* computer screens: a big header (phones and sideways phones keep their compact bar).
   Narrow laptops get a slightly smaller step so the Armenian links and the phone still fit on one line */
@media (min-width:820px) and (min-height:501px){
  :root{--nav-h:86px}
  .nav-in{gap:26px}
  .brand{gap:14px}
  .mark{width:50px;height:50px}
  .wm b{font-size:19px;padding-bottom:6px}
  .wm small{font-size:9.5px;margin-top:6px}
  .links{gap:28px}
  .links a{font-size:15.5px}
  .links a::after{bottom:-8px}
  .nav-r{gap:18px}
  .lang{padding:4px}
  .lang button{font-size:13px;padding:10px 12px}
  .nav-phone{font-size:16px}
  .nav-cart{width:52px;height:52px}
  .nav-cart svg{width:24px;height:24px}
  .nav-cart-n{min-width:22px;height:22px;font-size:12px;line-height:22px}
}
@media (min-width:1280px) and (min-height:501px){
  :root{--nav-h:98px}
  .nav-in{gap:34px}
  .brand{gap:16px}
  .mark{width:60px;height:60px}
  .wm b{font-size:24px;padding-bottom:8px}
  .wm small{font-size:12px;margin-top:8px}
  .links{gap:38px}
  .links a{font-size:18px}
  .nav-r{gap:22px}
  .lang button{font-size:14px;padding:11px 14px}
  .nav-phone{font-size:18.5px}
  .nav-cart{width:58px;height:58px}
  .nav-cart svg{width:26px;height:26px}
}

/* ---------- hero ---------- */
.hero{position:relative;height:760vh;background:var(--abyss)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:radial-gradient(90% 70% at 66% 30%,#13294a 0%,#08162a 55%,#040b15 100%)}
.ice-canvas{position:absolute;inset:0;width:100%;height:100%}
.stage-fallback{position:absolute;inset:0;display:none;place-items:center}
.stage-fallback svg{width:min(52vw,520px);height:auto;color:var(--gold);opacity:.55;transform:translateX(18%);filter:drop-shadow(0 0 22px rgba(214,181,133,.25))}
.no3d .stage-fallback{display:grid}
.no3d .ice-canvas{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,9,18,.82) 0%,rgba(3,9,18,.5) 30%,rgba(3,9,18,0) 56%)}
/* the sea floor fades into the menu as the iceberg story ends */
.s-end{position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;background:linear-gradient(180deg,rgba(5,13,24,0) 0%,rgba(5,13,24,.55) 45%,var(--abyss) 100%);opacity:0}
.beats{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;pointer-events:none;max-width:var(--maxw);margin:0 auto}
.beat{--y:0px;position:absolute;left:var(--gut);top:52%;width:min(540px,44vw);transform:translate3d(0,calc(-50% + var(--y)),0);opacity:0;visibility:hidden;will-change:opacity,transform}
.beat.on{pointer-events:auto}
.b-title{opacity:1;visibility:visible}
.h-wm{display:inline-flex;flex-direction:column;align-items:center;font-family:var(--wm);color:var(--ice);line-height:1}
.h-wm span{font-weight:300;font-size:clamp(40px,5.4vw,78px);letter-spacing:.3em;margin-right:-.3em;padding-bottom:12px;border-bottom:1px solid rgba(230,238,246,.6)}
.h-wm small{font-weight:400;font-size:clamp(11px,1vw,14px);letter-spacing:.9em;margin-right:-.9em;margin-top:12px;color:var(--ice-2)}
.h-line{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(34px,3.9vw,58px);line-height:1.05;color:var(--gold-hi);margin-top:30px;text-wrap:balance}
html[lang=hy] .h-line{font-size:clamp(28px,3.2vw,46px);line-height:1.15}
.lead{margin-top:18px;font-size:clamp(16px,1.3vw,18.5px);color:var(--ice-2);max-width:470px;text-wrap:pretty}
.h-beat{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4vw,60px);line-height:1.06;color:var(--ice);margin-top:16px;text-wrap:balance;text-shadow:0 2px 30px rgba(3,9,18,.6)}
html[lang=hy] .h-beat{font-size:clamp(27px,3.1vw,46px);line-height:1.16}
.beat-p{margin-top:18px;font-size:clamp(16px,1.3vw,19px);color:var(--ice-2);max-width:460px;text-wrap:pretty;text-shadow:0 1px 18px rgba(3,9,18,.8)}
.fact .num{font:300 clamp(46px,5vw,72px)/1 var(--wm);color:var(--gold);letter-spacing:.06em}
.fact .h-beat{color:var(--gold-hi)}
.marks{position:absolute;inset:0;pointer-events:none}
.mk{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.mk i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 6px rgba(214,181,133,.22),0 0 26px 6px rgba(240,215,170,.45)}
.mk i::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(240,215,170,.6);animation:ping 2.4s var(--out) infinite}
.mk b{position:absolute;left:16px;top:-30px;font:400 13px/1 var(--wm);letter-spacing:.18em;color:var(--gold-hi);padding:7px 9px 6px;border:1px solid var(--gold-line);border-radius:99px;background:rgba(5,16,30,.55)}
@keyframes ping{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
.gauge{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;opacity:.9}
.g-lbl{font:500 10px/1 var(--sans);letter-spacing:.3em;color:var(--ice-3);writing-mode:vertical-rl;transform:rotate(180deg)}
html[lang=hy] .g-lbl{letter-spacing:.14em}
.g-track{position:relative;width:1px;height:38vh;background:linear-gradient(var(--ice-3),rgba(130,153,178,.15))}
.g-sea{position:absolute;left:-9px;width:19px;height:1px;top:18%;background:var(--ice)}
.g-sea::after{content:"";position:absolute;left:-4px;right:-4px;top:4px;height:6px;background:repeating-linear-gradient(90deg,rgba(230,238,246,.5) 0 3px,transparent 3px 6px);opacity:.5}
.g-dot{position:absolute;left:-5px;top:0;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(214,181,133,.8);will-change:transform}
.g-val{font:400 13px/1 var(--wm);letter-spacing:.1em;color:var(--gold-hi);min-width:64px;text-align:center}
.hint{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:var(--ice-2);font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;transition:opacity .5s}
.hint i{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ice);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{to{top:110%}}
.hint.gone{opacity:0;pointer-events:none}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(88px,11vw,160px) 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:900px}
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--out),transform 1s var(--out)}
.rv.in{opacity:1;transform:none}

/* cook: the 10-minute pot */
.cook{position:relative;height:330vh;background:linear-gradient(180deg,var(--abyss) 0,rgba(5,13,24,0) 60vh),radial-gradient(60% 50% at 70% 45%,#122848 0%,#0a1729 60%,#06101e 100%)}
/* the gap between the menu and the pot: big lines of the ICEBERG mark, a chain of bergs on one waterline,
   fading in under the menu and out above the pot */
.cook::before{content:"";position:absolute;left:0;right:0;top:calc(clamp(56px,8vw,110px) * -1);height:calc(clamp(56px,8vw,110px) + 31vh);pointer-events:none;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='847.2' height='360' viewBox='10.82 5.8 84.72 36'><g fill='none' stroke='%23d6b585' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'><g><path vector-effect='non-scaling-stroke' stroke-opacity='.24' d='M10.82 23.82L13.4 17.3L18.68 15.04L21.14 7.84L24.04 9.56L29.91 2L34 7.3L36.21 6.09L41.34 12.08L43.37 10.99L49.95 17.04L53.18 23.81L48.81 32.73L47.04 42.75L43.46 48.08L36.7 53.54L32.15 62L25.25 53.38L22.72 55.53L19.7 39.88L16.24 42.87L14.82 30.27Z'/><path vector-effect='non-scaling-stroke' stroke-opacity='.16' d='M10.82 23.82L19.89 23.8L23.07 23.82L33.83 23.7L38.51 23.81L46.96 23.76L53.18 23.81M29.91 2L29.64 18.63L33.83 23.7L40.4 31.88L44.27 39.99L47.04 42.75M36.21 6.09L38.8 21.74L38.51 23.81M34 7.3L29.64 18.63L23.07 23.82L17.86 28.45L10.82 23.82M21.14 7.84L21.71 15.45L19.89 23.8M24.04 9.56L21.71 15.45M24.04 9.56L29.64 18.63M43.37 10.99L44.54 18.29L53.18 23.81M41.34 12.08L38.8 21.74M18.68 15.04L19.89 23.8M13.4 17.3L19.89 23.8M44.54 18.29L38.8 21.74M33.83 23.7L28.02 26.5L20.41 30.24L16.24 42.87M33.83 23.7L33.81 33.61L32.15 62M46.96 23.76L40.4 31.88L38.2 37.05L36.7 53.54M46.96 23.76L48.81 32.73M28.02 26.5L27.18 32.02L19.7 39.88M17.86 28.45L20.41 30.24M27.18 32.02L33.81 33.61L38.2 37.05L43.46 48.08M33.81 33.61L25.25 53.38M33.81 33.61L36.7 53.54M44.27 39.99L43.46 48.08'/></g><g transform='translate(106.36 0) scale(-1 1)'><path vector-effect='non-scaling-stroke' stroke-opacity='.24' d='M10.82 23.82L13.4 17.3L18.68 15.04L21.14 7.84L24.04 9.56L29.91 2L34 7.3L36.21 6.09L41.34 12.08L43.37 10.99L49.95 17.04L53.18 23.81L48.81 32.73L47.04 42.75L43.46 48.08L36.7 53.54L32.15 62L25.25 53.38L22.72 55.53L19.7 39.88L16.24 42.87L14.82 30.27Z'/><path vector-effect='non-scaling-stroke' stroke-opacity='.16' d='M10.82 23.82L19.89 23.8L23.07 23.82L33.83 23.7L38.51 23.81L46.96 23.76L53.18 23.81M29.91 2L29.64 18.63L33.83 23.7L40.4 31.88L44.27 39.99L47.04 42.75M36.21 6.09L38.8 21.74L38.51 23.81M34 7.3L29.64 18.63L23.07 23.82L17.86 28.45L10.82 23.82M21.14 7.84L21.71 15.45L19.89 23.8M24.04 9.56L21.71 15.45M24.04 9.56L29.64 18.63M43.37 10.99L44.54 18.29L53.18 23.81M41.34 12.08L38.8 21.74M18.68 15.04L19.89 23.8M13.4 17.3L19.89 23.8M44.54 18.29L38.8 21.74M33.83 23.7L28.02 26.5L20.41 30.24L16.24 42.87M33.83 23.7L33.81 33.61L32.15 62M46.96 23.76L40.4 31.88L38.2 37.05L36.7 53.54M46.96 23.76L48.81 32.73M28.02 26.5L27.18 32.02L19.7 39.88M17.86 28.45L20.41 30.24M27.18 32.02L33.81 33.61L38.2 37.05L43.46 48.08M33.81 33.61L25.25 53.38M33.81 33.61L36.7 53.54M44.27 39.99L43.46 48.08'/></g></g></svg>") 50% 0/auto 100% repeat-x;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 58%,transparent 100%)}
.cook-stage{position:sticky;top:0;height:100vh;height:100svh;max-width:var(--maxw);margin:0 auto;padding:var(--nav-h) var(--gut) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:20px}
.pot-canvas{grid-column:2;grid-row:1;width:100%;height:min(80vh,720px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 97%,transparent);mask-composite:intersect}
/* the pot gets some air on both sides (the canvas reaches under the text column and into the page margin); its edges melt away instead of cutting the handles, the falling pelmeni and the steam */
@media (min-width:820px){.pot-canvas{width:calc(112% + var(--gut));margin-left:-12%;margin-right:calc(var(--gut) * -1)}}
.cook-copy{grid-column:1;grid-row:1;position:relative;z-index:2}
.timer{position:relative;width:148px;height:148px;margin-top:30px}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.tr-bg{fill:none;stroke:rgba(214,181,133,.16);stroke-width:2}
.tr-fg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(214,181,133,.5))}
.tm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tm b{font:300 34px/1 var(--wm);letter-spacing:.06em;color:var(--ice);font-variant-numeric:tabular-nums}
.tm span{font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ice-3)}
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:4px;max-width:470px}
.step{display:flex;gap:16px;padding:12px 0;opacity:.38;transition:opacity .5s var(--ease)}
.step>b{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold-line);display:grid;place-items:center;font:400 14px/1 var(--wm);color:var(--gold);transition:background .4s,color .4s,border-color .4s}
.step>b svg{width:16px;height:16px}
.step h3{font:600 17px/1.3 var(--sans);color:var(--ice)}
.step p{margin-top:4px;font-size:14.5px;color:var(--ice-2)}
.step.on{opacity:1}
.step.on>b{background:var(--gold);color:#0a1626;border-color:var(--gold)}
.step.past{opacity:.62}
.step.past>b{border-color:var(--gold)}

.methods{background:#06101e;padding-top:clamp(60px,8vw,110px)}
.m-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.m-card{padding:30px 26px 30px;border-radius:var(--r);background:linear-gradient(180deg,rgba(19,40,74,.55),rgba(12,27,49,.3));border:1px solid rgba(214,181,133,.16);transition:border-color .4s,transform .5s var(--out)}
.m-card:hover{border-color:var(--gold-line);transform:translateY(-4px)}
.m-ic{width:50px;height:50px;color:var(--gold);margin-bottom:22px}
.m-card h3{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.1;margin-top:16px}
html[lang=hy] .m-card h3{font-size:20px;line-height:1.25}
.m-card p{margin-top:10px;color:var(--ice-2);font-size:15px}
/* method cards flip from a gold-ornament back to the face while scrolling (angle set in main.js) */
.m-flip{perspective:1300px}
.m-in{position:relative;height:100%;transform-style:preserve-3d}
.m-in>.m-card{height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.m-back{position:absolute;inset:0;border-radius:var(--r);transform:rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;color:var(--gold);background:radial-gradient(70% 60% at 50% 50%,#13284a 0%,#0a1830 60%,#071222 100%);border:1px solid var(--gold-line)}
.m-back::before{content:"";position:absolute;inset:10px;border:1px solid var(--gold-line);border-radius:calc(var(--r) - 9px);background:repeating-linear-gradient(45deg,rgba(214,181,133,.07) 0 1px,transparent 1px 15px),repeating-linear-gradient(-45deg,rgba(214,181,133,.07) 0 1px,transparent 1px 15px);-webkit-mask:radial-gradient(closest-side,transparent 34%,#000 70%);mask:radial-gradient(closest-side,transparent 34%,#000 70%)}
.mb-mark{position:absolute;left:50%;top:50%;height:min(48%,118px);width:auto;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 0 14px rgba(214,181,133,.35))}
.mb-c{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;font:400 13px/1 var(--wm);letter-spacing:.18em;color:var(--gold-hi)}
.mb-c small{font-size:8.5px;letter-spacing:.34em;color:var(--gold)}
.mb-tl{left:24px;top:22px}
.mb-br{right:24px;bottom:22px;transform:rotate(180deg)}

/* menu: the printed poster, made orderable */
.menu{background:var(--abyss)}
.posters{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;margin-top:60px}
.poster{position:relative;padding:54px clamp(22px,3.2vw,48px) 40px;background:radial-gradient(130% 70% at 50% 0%,#132a49 0%,#0b1a30 55%,#081324 100%);border:1px solid var(--gold-line);border-radius:4px}
.poster::before{content:"";position:absolute;inset:11px;border:1px solid rgba(214,181,133,.16);pointer-events:none}
.p-mark{width:50px;height:50px;color:var(--gold);margin:0 auto}
.p-wm{display:flex;flex-direction:column;align-items:center;font:300 14px/1 var(--wm);letter-spacing:.34em;margin:12px -.34em 0 0;color:var(--ice-2)}
.p-wm small{font-size:7px;letter-spacing:.5em;margin-top:6px;padding-top:5px;border-top:1px solid rgba(185,201,218,.5)}
.p-title{font-family:var(--serif);font-weight:700;font-size:clamp(38px,4.4vw,62px);line-height:1;text-align:center;margin-top:30px;color:var(--gold-hi);letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#f6e6c6,#d6b585 70%,#b8925a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[lang=hy] .p-title{font-size:clamp(32px,3.6vw,52px);letter-spacing:.01em}
.p-sub{display:flex;align-items:center;gap:14px;margin-top:14px;font:500 11.5px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--ice-2)}
html[lang=hy] .p-sub{letter-spacing:.28em}
.p-sub i{flex:1;height:1px;background:rgba(214,181,133,.4)}
.p-sub span{margin-right:-.42em}
.rows{list-style:none;margin:30px 0 0;padding:0}
.row{display:flex;align-items:center;gap:12px;border-radius:12px;transition:background .3s}
.row:hover{background:rgba(214,181,133,.05)}
.row-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;padding:11px 6px;background:none;border:0;cursor:pointer;text-align:left;color:var(--ice)}
.row-name{font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.45vw,20.5px);line-height:1.25}
html[lang=hy] .row-name{font-weight:500;font-size:clamp(14.5px,1.15vw,16.5px)}
.row-dots{flex:1 1 20px;min-width:18px;border-bottom:2px dotted rgba(214,181,133,.4);transform:translateY(-5px)}
.row-price{flex:none;white-space:nowrap;color:var(--gold);font-size:14px}
.row-price b{font:600 18px/1 var(--sans);color:var(--gold-hi)}
.row-price small{font-size:13px;color:var(--ice-3)}
.row-act{flex:none;width:112px;display:flex;justify-content:flex-end}
.row-add{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold-line);background:transparent;color:var(--gold);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.row-add:hover{background:var(--gold);color:#0a1626;border-color:var(--gold)}
.row-add svg{width:18px;height:18px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--gold);border-radius:99px;height:40px;background:rgba(214,181,133,.08)}
.qty button{width:36px;height:100%;border:0;background:none;cursor:pointer;color:var(--gold-hi);display:grid;place-items:center}
.qty button svg{width:16px;height:16px}
.qty span{min-width:22px;text-align:center;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.qty-lg{height:54px}
.qty-lg button{width:48px}
.qty-lg span{min-width:30px;font-size:17px}
/* menu cards: every item with its photo */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
.mc{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#10233e,#0b1a2f);border:1px solid rgba(214,181,133,.18);transition:border-color .35s var(--ease),transform .5s var(--out),box-shadow .5s var(--out)}
.mc:hover{border-color:var(--gold-line);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.mc-pic{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer;background:#0a1626}
.mc-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.mc:hover .mc-pic img{transform:scale(1.05)}
.mc-pic::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,rgba(11,26,47,0),rgba(11,26,47,.55));pointer-events:none}
.mc-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:14px 14px 14px 16px}
.mc-name{border:0;background:none;padding:6px 0;margin:-6px 0;text-align:left;cursor:pointer;color:var(--ice);font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.35vw,22px);line-height:1.2;text-wrap:balance}
html[lang=hy] .mc-name{font-weight:500;font-size:clamp(14.5px,1.1vw,17.5px);line-height:1.35}
.mc-name:hover{color:var(--gold-hi)}
.mc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.mc-price{white-space:nowrap;color:var(--gold);font-size:13px}
.mc-price b{font:600 17px/1 var(--sans);color:var(--gold-hi)}
.mc-price small{font-size:12.5px;color:var(--ice-3)}
.mc .row-act{width:auto}
@media (min-width:1280px){
  .mc-body{padding:16px 16px 16px 18px}
  .mc-price{font-size:14px}
  .mc-price b{font-size:19px}
  .mc-price small{font-size:13.5px}
}
.menu-note{text-align:center;margin-top:34px;color:var(--ice-3);font-size:14px}

/* delivery: back to the light room */
.deliv{background:var(--cream);color:var(--ink)}
.deliv .kicker{color:var(--gold-lo)}
.deliv .sec-lead{color:var(--ink);font-weight:500}
.d-wrap{position:relative;margin-top:64px}
.d-line{position:absolute;left:0;top:0;width:100%;height:84px;overflow:visible;pointer-events:none}   /* drawn by main.js through the centres of the three circles */
.d-line path{fill:none;stroke:var(--gold-lo);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.3,1) .2s}
.d-wrap.drawn .d-line path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.d-line path{transition:none}}
.d-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px)}
.d-num{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--cream);border:1px solid var(--gold-lo);font:300 26px/1 var(--wm);letter-spacing:.06em;color:var(--ink)}
.d-steps h3{font-family:var(--serif);font-weight:600;font-size:clamp(26px,2.4vw,34px);line-height:1.08;margin-top:26px}
html[lang=hy] .d-steps h3{font-size:clamp(21px,1.9vw,27px);line-height:1.2}
.d-steps p{margin-top:10px;color:var(--ink-2);font-size:16px;max-width:330px}
.d-chips{list-style:none;margin:64px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.d-chips li{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:99px;background:#fff8ee;border:1px solid var(--ink-line);font-size:15px;color:var(--ink)}
.d-chips svg{width:19px;height:19px;color:var(--gold-lo)}
.d-chips a{text-decoration:none;font-weight:600}
.d-chips .d-free{background:#f7e7c9;border-color:rgba(168,133,79,.45);font-weight:600}

/* final */
.final{position:relative;padding:clamp(110px,14vw,190px) 0 clamp(90px,10vw,140px);background:radial-gradient(70% 60% at 50% 30%,#14305a 0%,#0a1a31 50%,#050d18 100%);text-align:center;overflow:hidden}
.fin-mark{width:clamp(124px,15vw,196px);margin:0 auto 34px;--w:clamp(1.7px,.16vw,2.3px);--T:2.6s}
.fin-h{max-width:820px;margin:0 auto}
/* final title: letters roll on hover and hop now and then (split in main.js) */
.fw{display:inline-block;white-space:nowrap}
.ch{display:inline-block;clip-path:inset(-.32em -.1em)}
.ci{position:relative;display:block}
.ci i{position:absolute;left:0;top:140%;font-style:normal}
.ch.roll .ci{animation:chRoll .7s cubic-bezier(.4,0,.1,1)}
.ch.hop{animation:chHop .95s cubic-bezier(.34,1.56,.64,1)}
@keyframes chRoll{to{transform:translateY(-140%)}}
@keyframes chHop{38%{transform:translateY(var(--hy,-.14em))}100%{transform:none}}
.final .sec-lead{margin-left:auto;margin-right:auto}
.ig{display:inline-flex;flex-direction:column;align-items:center;gap:18px;margin-top:70px;text-decoration:none}
.ig-row{display:flex;gap:10px}
.ig-row img{width:clamp(64px,9vw,118px);aspect-ratio:1;object-fit:cover;border-radius:14px;opacity:.85;transition:opacity .3s,transform .5s var(--out)}
.ig:hover .ig-row img{opacity:1}
.ig:hover .ig-row img:nth-child(odd){transform:translateY(-6px)}
.ig-txt{display:flex;align-items:center;gap:10px;color:var(--ice-2);font-size:15px}
.ig-txt svg{width:20px;height:20px;color:var(--gold)}
.ig-txt b{color:var(--ice);font-weight:600}
.fb{display:flex;width:fit-content;margin:18px auto 0;text-decoration:none}
.fb:hover .ig-txt b,.ig:hover .ig-txt b{color:var(--gold-hi)}

.foot{background:#040b14;border-top:1px solid rgba(214,181,133,.14);padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:28px 48px;align-items:center}
.foot-in>p{color:var(--ice-3);font-size:14.5px;max-width:380px}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 26px}
.foot-links a{text-decoration:none;color:var(--ice-2);font-size:14.5px;white-space:nowrap}
.foot-links a:hover{color:var(--gold-hi)}
.foot-c{grid-column:1/-1;color:var(--ice-3);font-size:13px;border-top:1px solid rgba(214,181,133,.1);padding-top:24px}

/* ---------- order UI ---------- */
.cartbar{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:55;transform:translate(-50%,140%);display:flex;align-items:center;gap:22px;padding:8px 8px 8px 22px;border-radius:99px;border:1px solid var(--gold-line);background:#0b1a2f;color:var(--ice);box-shadow:0 18px 50px rgba(0,0,0,.45);cursor:pointer;transition:transform .55s var(--out)}
.cartbar.show{transform:translate(-50%,0)}
.cartbar[hidden]{display:flex;visibility:hidden}
.cb-l{display:flex;align-items:center;gap:10px;font:500 15px/1 var(--sans);white-space:nowrap}
.cb-l svg{width:20px;height:20px;color:var(--gold)}
.cb-r{display:flex;align-items:center;gap:8px;background:var(--gold);color:#0a1626;border-radius:99px;padding:12px 18px;font:600 14px/1 var(--sans)}
.cb-r svg{width:16px;height:16px}
.dock{display:none}
.toast{position:fixed;left:50%;top:calc(var(--nav-h) + 12px);z-index:90;transform:translate(-50%,-20px);opacity:0;pointer-events:none;padding:12px 20px;border-radius:99px;background:var(--gold);color:#0a1626;font:600 14px/1.2 var(--sans);box-shadow:0 12px 40px rgba(0,0,0,.35);transition:opacity .35s,transform .45s var(--out);max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.layer{position:fixed;inset:0;z-index:80;display:flex}
.layer[hidden]{display:none}
.layer-scrim{position:absolute;inset:0;background:rgba(2,7,14,.7);opacity:0;transition:opacity .4s var(--ease)}
.layer.open .layer-scrim{opacity:1}
.x{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(8,20,37,.7);display:grid;place-items:center;cursor:pointer;color:var(--ice);flex:none}
.x svg{width:20px;height:20px}
.sheet{position:relative;margin:auto;width:min(1280px,calc(100% - 80px));max-height:calc(100% - 48px);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);background:var(--navy-8);border:1px solid var(--gold-line);border-radius:26px;overflow:hidden;opacity:0;transform:translateY(26px) scale(.985);transition:opacity .4s var(--ease),transform .55s var(--out)}
.layer.open .sheet{opacity:1;transform:none}
.sheet>.x{position:absolute;right:16px;top:16px;z-index:3}
.sh-pic{position:relative;min-width:0;min-height:0;aspect-ratio:3/2;align-self:stretch;justify-self:stretch;background:#0a1626;overflow:hidden}   /* 3:2 sets the height; a taller text column only makes it taller, never wider */
.sh-pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* product photos: one frame per photo, swiped on a phone; arrows and dots on a computer */
.gal{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal-s{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;opacity:0;transition:opacity .5s var(--ease)}
.gal-s.ok{opacity:1}
/* the photo is shown whole; the free space around it is the same photo, blurred and dimmed */
.gal-s::before{content:"";position:absolute;inset:-60px;background:var(--bg) 50% 50%/cover no-repeat;filter:blur(32px) brightness(.6) saturate(1.1)}
.gal-s img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.sh-pic.multi::after{content:"";position:absolute;inset:auto 0 0;height:26%;background:linear-gradient(180deg,rgba(8,20,37,0),rgba(8,20,37,.5));pointer-events:none}
.gal-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:2px;pointer-events:none}
.gal-dots button{pointer-events:auto;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.gal-dots button::before{content:"";width:7px;height:7px;border-radius:4px;background:rgba(233,238,245,.6);box-shadow:0 1px 4px rgba(0,0,0,.4);transition:width .4s var(--out),background-color .4s var(--ease)}
.gal-dots button[aria-current=true]::before{width:22px;background:var(--gold-hi)}
.gal-nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(8,20,37,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ice);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s var(--ease),background-color .3s var(--ease)}
.gal-nav svg{width:20px;height:20px}
.gal-prev{left:14px}
.gal-next{right:14px}
.gal-next svg{transform:scaleX(-1)}
.sh-pic:hover .gal-nav:not(:disabled),.gal-nav:focus-visible{opacity:1}
.gal-nav:disabled{pointer-events:none}
.gal-nav:hover{background:rgba(8,20,37,.86)}
@media (hover:none){.gal-nav{display:none}}
/* zoom: the photo opens full screen (PhotoSwipe) */
.gal-s img{cursor:zoom-in}
.gal-zoom{position:absolute;right:14px;bottom:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(8,20,37,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ice);display:grid;place-items:center;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.gal-zoom svg{width:19px;height:19px}
.gal-zoom:hover{background:rgba(8,20,37,.86);color:var(--gold-hi)}
.pswp.pswp--ice{--pswp-bg:#040b14;--pswp-placeholder-bg:#0a1626;--pswp-icon-color:#e9eef5;--pswp-icon-color-secondary:#040b14;--pswp-icon-stroke-color:#040b14;--pswp-error-text-color:#e9eef5;--pswp-preloader-color:rgba(214,181,133,.3);--pswp-preloader-color-secondary:rgba(214,181,133,.9)}
.pswp--ice .pswp__counter{font:500 14px/1 var(--sans);color:var(--ice-2);opacity:1}
.pswp--ice .pswp__button:hover .pswp__icn,.pswp--ice .pswp__button:focus-visible .pswp__icn{fill:var(--gold-hi)}
.sh-body{padding:44px 40px 36px;max-height:calc(100vh - 48px);overflow:auto;display:flex;flex-direction:column}
.sh-name{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3vw,42px);line-height:1.06;margin-top:12px}
html[lang=hy] .sh-name{font-size:clamp(24px,2.3vw,32px);line-height:1.2}
.sh-price{margin-top:14px;color:var(--gold-hi);font:600 20px/1 var(--sans)}
.sh-price small{color:var(--ice-3);font-weight:400;font-size:14px}
.sh-desc{margin-top:18px;color:var(--ice-2);font-size:16px}
.sh-how{margin-top:22px;padding:18px;border-radius:16px;background:rgba(214,181,133,.07);border:1px solid rgba(214,181,133,.14)}
.sh-how p{margin-top:10px;font-size:14.5px;color:var(--ice-2)}
.sh-buy{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:28px}
.sh-add{flex:1;--h:54px}
/* computer: larger text in the product window */
@media (min-width:820px){
  .sh-body{padding:48px 44px 40px}
  .sh-body .kicker{font-size:13px}
  .sh-name{font-size:clamp(34px,2.9vw,48px);margin-top:14px}
  html[lang=hy] .sh-name{font-size:clamp(27px,2.2vw,36px)}
  .sh-price{margin-top:16px;font-size:25px}
  .sh-price small{font-size:16.5px}
  .sh-desc{margin-top:20px;font-size:19px;line-height:1.55}
  .sh-how{margin-top:24px;padding:20px 22px}
  .sh-how .chip{font-size:13px;padding:7px 14px}
  .sh-how p{margin-top:12px;font-size:17px;line-height:1.55}
  .sh-buy{position:sticky;bottom:0;background:var(--navy-8);gap:14px}
  .sh-buy .qty-lg{height:60px}
  .sh-buy .qty-lg button{width:52px}
  .sh-buy .qty-lg span{min-width:34px;font-size:19px}
  .sh-add{--h:60px;font-size:17px}
}
@media (min-width:820px) and (max-width:1180px){
  .sheet{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* kraft box with the navy label, for items we have no photo of yet */
.kraft{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 15%,#dcc29b 0%,#c9a77b 50%,#b38f63 100%);overflow:hidden}
.kraft::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kraft::after{content:"";position:absolute;inset:9% 8%;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(90,64,34,.25),inset 0 18px 40px rgba(90,64,34,.18)}
.kr-logo{position:absolute;left:50%;top:34%;width:clamp(120px,38%,190px);aspect-ratio:1;background:#0b1830;color:#e9eef5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transform:translate(-50%,-50%) rotate(-12deg);box-shadow:0 10px 24px rgba(40,25,10,.28)}
.kr-logo svg{width:44%;height:auto}
.kr-logo span{font:300 clamp(11px,1.3vw,15px)/1 var(--wm);letter-spacing:.3em;margin-right:-.3em;padding-bottom:4px;border-bottom:1px solid rgba(233,238,245,.6)}
.kr-logo small{font:400 7px/1 var(--wm);letter-spacing:.5em;margin-right:-.5em}
.kr-name{position:absolute;left:50%;top:64%;max-width:84%;transform:translate(-50%,-50%) rotate(-12deg);background:#0b1830;color:#e9eef5;padding:12px 22px 11px;text-align:center;box-shadow:0 10px 24px rgba(40,25,10,.28)}
.kr-name b{display:block;font:500 clamp(14px,1.6vw,19px)/1.15 "Noto Sans Armenian",var(--sans);letter-spacing:.14em;white-space:nowrap}
.kr-name small{display:block;margin-top:5px;font:400 12px/1.2 "Noto Serif Armenian",serif;color:#c8d3e0}

.drawer{position:relative;margin-left:auto;width:min(500px,100%);height:100%;background:var(--navy-8);border-left:1px solid var(--gold-line);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .55s var(--out)}
.layer.open .drawer{transform:none}
.dr-head{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid rgba(214,181,133,.16)}
.dr-head h2{flex:1;font-family:var(--serif);font-weight:600;font-size:30px;line-height:1}
html[lang=hy] .dr-head h2{font-size:24px}
.dr-back{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-line);background:none;display:grid;place-items:center;cursor:pointer}
.dr-back svg{width:20px;height:20px}
.dr-back[hidden]{display:none}
.dr-body{flex:1;overflow:auto;padding:10px 22px 24px;overscroll-behavior:contain}
.dr-foot{border-top:1px solid rgba(214,181,133,.16);padding:18px 22px calc(18px + env(safe-area-inset-bottom));display:grid;gap:12px;background:var(--navy-8)}
.dr-foot:empty{display:none}
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(214,181,133,.12)}
.line-pic{position:relative;width:64px;height:64px;border-radius:14px;overflow:hidden;background:#0a1626}
.line-pic img{width:100%;height:100%;object-fit:cover}
.line-pic .kraft::after{display:none}
.line-pic .kr-mini{position:absolute;inset:22%;background:#0b1830;color:#e9eef5;display:grid;place-items:center;transform:rotate(-12deg)}
.line-pic .kr-mini svg{width:70%;height:auto}
.line h3{font:600 15px/1.3 var(--sans)}
.line p{margin-top:3px;font-size:13.5px;color:var(--ice-3)}
.line-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.line-r b{font:600 15px/1 var(--sans);color:var(--gold-hi);white-space:nowrap}
.line .qty{height:36px}
.line .qty button{width:32px}
.sum{display:grid;gap:8px;font-size:15px}
.sum div{display:flex;justify-content:space-between;gap:16px;color:var(--ice-2)}
.sum .tot{color:var(--ice);font-size:18px;font-weight:600;padding-top:8px;border-top:1px solid rgba(214,181,133,.16)}
.sum .tot b{color:var(--gold-hi)}
.sum .free{color:var(--gold-hi);font-weight:600}
.sum .free-left{margin:0;font-size:13px;line-height:1.4;color:var(--gold-hi)}
.empty{text-align:center;padding:60px 10px}
.empty svg{width:64px;height:64px;color:var(--gold);margin:0 auto 22px;opacity:.8}
.empty h3{font-family:var(--serif);font-weight:600;font-size:28px}
.empty p{color:var(--ice-2);margin:10px 0 26px}
.form{display:grid;gap:18px;padding-top:12px}
.fld{display:grid;gap:8px}
.fld>span{font:500 13px/1 var(--sans);letter-spacing:.06em;color:var(--ice-2);text-transform:uppercase}
html[lang=hy] .fld>span{letter-spacing:.02em}
.fld input,.fld textarea,.fld select{width:100%;border:1px solid rgba(214,181,133,.26);border-radius:14px;background:rgba(5,13,24,.6);color:var(--ice);font:400 16px/1.4 var(--sans);padding:14px 16px;outline:none;transition:border-color .25s}
.fld textarea{min-height:84px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--gold)}
.fld.bad input{border-color:#e7836f}
.err{color:#f0a493;font-size:13.5px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid rgba(214,181,133,.26);background:rgba(5,13,24,.5);border-radius:99px;padding:10px 14px;cursor:pointer;font:500 14px/1 var(--sans);color:var(--ice-2);transition:background .25s,color .25s,border-color .25s}
.opt[aria-pressed=true]{background:var(--gold);color:#0a1626;border-color:var(--gold)}
.fine{font-size:13px;color:var(--ice-3)}
/* promo code: a field with an Apply button; once accepted it turns into a gold dashed ticket */
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em}
.promo-row input::placeholder{text-transform:none;letter-spacing:0}
.promo-row .btn{--h:50px;flex:none;padding:0 18px;font-size:14px}
.promo-on{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 6px 6px 16px;border:1px dashed var(--gold);border-radius:14px;background:rgba(214,181,133,.08);font-size:14px;color:var(--ice-2)}
.promo-on b{color:var(--gold-hi);font-weight:600;letter-spacing:.08em}
.promo-on span{flex:1}
.promo-x{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--ice-2);display:grid;place-items:center;cursor:pointer}
.promo-x svg{width:16px;height:16px}
.promo-x:hover{color:var(--gold-hi)}
.sum .disc span:last-child{color:var(--gold-hi);font-weight:600}
.done{text-align:center;padding:40px 6px 10px}
.done-ic{width:84px;height:84px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#0a1626;box-shadow:0 0 0 10px rgba(214,181,133,.14)}
.done-ic svg{width:40px;height:40px}
.done h3{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.1}
.done p{color:var(--ice-2);margin-top:14px}
.done .sum{text-align:left;margin-top:28px;padding:18px;border:1px solid rgba(214,181,133,.16);border-radius:16px}
.wa{background:#1fa855;color:#fff}
.wa:hover{background:#25c063}

/* ---------- phones and tablets ---------- */
/* laptops with a short window: keep all four cooking steps on screen */
@media (min-width:820px) and (max-height:880px){   /* the bigger header leaves the cooking steps less room */
  .cook-copy .h2{font-size:clamp(30px,3.4vw,50px)}
  html[lang=hy] .cook-copy .h2{font-size:clamp(25px,2.7vw,38px)}
  .timer{width:104px;height:104px;margin-top:16px}
  .tm b{font-size:26px}
  .steps{margin-top:12px;gap:0}
  .step{padding:7px 0}
  .step:not(.on) p{display:none}
}
@media (max-width:1080px){
  .links{display:none}
  .nav-r{margin-left:auto}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-phone{display:none}
  .posters{grid-template-columns:1fr}
  .row-act{width:auto}
}
@media (max-width:819px){
  :root{--nav-h:62px}
  .cook::before{height:calc(56px + 17svh)}   /* the pot sits right under the band on a phone */
  .mark{width:30px;height:30px}
  .wm b{font-size:13px}
  .wm small{font-size:7px}
  .nav-in{gap:14px}
  .lang button{padding:11px 9px;font-size:11px;min-width:34px}
  .nav-cart{width:42px;height:42px}
  .hero{height:680vh}
  .scrim{background:linear-gradient(0deg,rgba(3,9,18,.92) 0%,rgba(3,9,18,.72) 34%,rgba(3,9,18,0) 62%)}
  .beat{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:34px;transform:translate3d(0,var(--y),0)}   /* no safe-area inset here: Safari changes it while its toolbar slides, which made the captions jump */
  .b-title{bottom:30px}
  .h-hero{margin-top:16px}
  .h-wm span{font-size:clamp(30px,10vw,44px);padding-bottom:9px}
  .h-wm small{margin-top:9px}
  .h-line{margin-top:20px;font-size:clamp(30px,8.6vw,40px)}
  html[lang=hy] .h-line{font-size:clamp(25px,7vw,32px)}
  .lead{font-size:15.5px;margin-top:12px}
  .ctas{margin-top:22px}
  .b-title .ctas{display:grid;grid-template-columns:1fr;gap:10px}   /* the menu button and the full +374 number, one under the other, same width */
  .h-beat{font-size:clamp(28px,8vw,38px)}
  html[lang=hy] .h-beat{font-size:clamp(23px,6.4vw,30px)}
  .beat-p{font-size:16px;margin-top:12px}
  .fact .num{font-size:44px}
  .gauge{top:calc(var(--nav-h) + 20px);transform:none;right:14px;gap:10px}
  .g-track{height:20vh}
  .g-lbl{display:none}
  .g-val{font-size:11px;min-width:0}
  .mk b{font-size:11px;top:-26px}
  .hint{display:none}
  .cook{height:300vh}
  .cook-stage{grid-template-columns:1fr;grid-template-rows:39svh auto;align-items:start;padding-top:calc(var(--nav-h) + 36px);gap:0}
  .pot-canvas{grid-column:1;grid-row:1;height:39svh;width:calc(100% + 2 * var(--gut));margin:0 calc(var(--gut) * -1)}
  .cook-copy{grid-column:1;grid-row:2;display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center}
  .cook-copy .kicker,.cook-copy .h2,.cook-copy .steps{grid-column:1/-1}
  .cook-copy .h2{font-size:clamp(30px,8.4vw,40px);margin-top:8px}
  html[lang=hy] .cook-copy .h2{font-size:clamp(24px,6.6vw,30px)}
  .timer{display:none}
  .steps{margin-top:12px;gap:0}
  .step{padding:8px 0;gap:12px}
  .step>b{width:28px;height:28px;font-size:12px}
  .step h3{font-size:15.5px}
  .step p{font-size:13.5px}
  .step:not(.on) p{display:none}
  .m-grid{grid-template-columns:1fr;gap:12px}
  .m-card{padding:24px 22px;display:grid;grid-template-columns:auto 1fr;column-gap:16px}
  .m-ic{grid-row:span 3;width:42px;height:42px;margin:0}
  .m-card .chip{justify-self:start}
  .m-card h3{margin-top:10px}
  .poster{padding:40px 12px 16px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}
  .mc{border-radius:14px}
  .mc-body{padding:10px 10px 10px 12px;gap:10px}
  .mc-name{font-size:15.5px}
  html[lang=hy] .mc-name{font-size:13.5px}
  .mc-price b{font-size:15px}
  .mc-price small{display:block;margin-top:3px}
  .mc .row-add{width:36px;height:36px}
  .mc .qty{height:36px}
  .mc .qty button{width:28px}
  .mc .qty span{min-width:16px;font-size:14px}
  .poster::before{inset:7px}
  .row{gap:8px}
  .row-main{flex-wrap:wrap;row-gap:4px;padding:10px 2px}
  .row-name{flex:1 1 100%}
  .row-dots{display:none}
  .row-price b{font-size:16px}
  .d-line{display:none}
  .d-steps{grid-template-columns:1fr;gap:34px}
  .d-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:20px}
  .d-num{grid-row:span 2;width:62px;height:62px;font-size:20px}
  .d-steps h3{margin-top:4px}
  .d-chips{margin-top:44px}
  .d-chips li{font-size:14px;padding:10px 14px}
  .foot-in{grid-template-columns:1fr;gap:22px}
  .foot{padding-bottom:44px}
  .ig-row img:nth-child(n+5){display:none}
  .cartbar{display:none!important}
  /* quick links sit in a slim strip under the top bar: Safari's own toolbar slides in at the bottom, and anything fixed there jumps with it */
  .dock{position:fixed;left:0;right:0;top:var(--nav-h);z-index:55;display:flex;justify-content:space-around;align-items:stretch;height:42px;padding:0 4px;background:rgba(5,13,24,.96);border-bottom:1px solid rgba(214,181,133,.18);transform:translateY(-102%);opacity:0;pointer-events:none;transition:transform .45s var(--out),opacity .3s}
  .dock.show{transform:none;opacity:1;pointer-events:auto}
  .nav::after{display:none}                       /* on a phone the quick-link strip is the lower edge */
  .dock::after{content:"";position:absolute;left:0;right:0;top:100%;height:48px;background:linear-gradient(180deg,rgba(5,13,24,.96),rgba(5,13,24,.55) 40%,rgba(5,13,24,0));pointer-events:none;transition:opacity .4s}
  .dock a{position:relative;display:flex;align-items:center;padding:0 8px;text-decoration:none;color:var(--ice-2);font:500 13px/1 var(--sans);white-space:nowrap}
  html[lang=hy] .dock a{font-size:12px;padding:0 5px}
  .dock a.cur{color:var(--gold-hi)}
  .dock a.cur::after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:1.5px;background:var(--gold)}
  .toast{top:calc(var(--nav-h) + 54px)}
  .sheet{margin:auto 0 0;width:100%;max-height:92svh;grid-template-columns:1fr;border-radius:26px 26px 0 0;overflow:auto;transform:translateY(100%);opacity:1;border-bottom:0}
  .sh-pic{aspect-ratio:var(--ar,1.5)}
  .sh-body{padding:26px 20px calc(22px + env(safe-area-inset-bottom));max-height:none;overflow:visible}
  .sh-buy{position:sticky;bottom:0;background:var(--navy-8);padding-bottom:4px}
  .drawer{width:100%;border-left:0}
}
@media (max-width:380px){
  .wm{display:none}
}
/* short phones: a smaller pot keeps every cooking step above the fold */
@media (max-width:819px) and (max-height:700px){
  .cook-stage{grid-template-rows:33svh auto}
  .pot-canvas{height:33svh}
}
/* phones turned sideways: very little height, so everything gets compact */
@media (max-height:500px) and (min-width:560px){
  :root{--nav-h:56px}
  .h-wm span{font-size:34px;padding-bottom:7px}
  .h-wm small{margin-top:7px;font-size:9px}
  .h-line{font-size:28px;margin-top:12px}
  html[lang=hy] .h-line{font-size:23px}
  .lead{display:none}
  .ctas{margin-top:14px}
  .btn{--h:42px;padding:0 20px;font-size:14px}
  .h-beat{font-size:26px;margin-top:8px}
  html[lang=hy] .h-beat{font-size:21px}
  .beat-p{font-size:14px;margin-top:8px}
  .fact .num{font-size:34px}
  .gauge,.hint{display:none}
  .cook-stage{padding-top:calc(var(--nav-h) - 4px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;align-items:center}
  .pot-canvas{grid-column:2;grid-row:1;height:calc(100svh - var(--nav-h))}
  .cook-copy{grid-column:1;grid-row:1;display:block}
  .cook-copy .h2{font-size:26px;margin-top:6px}
  html[lang=hy] .cook-copy .h2{font-size:21px}
  .timer{display:none}
  .steps{margin-top:8px;gap:0}
  .step{padding:5px 0;gap:10px}
  .step>b{width:24px;height:24px;font-size:11px}
  .step h3{font-size:14px}
  .step p{font-size:12.5px}
  .step:not(.on) p{display:none}
}
@media (max-height:500px) and (min-width:820px){
  .beat{top:calc(50% + 24px)}
}
@media (prefers-reduced-motion:reduce){
  .rv{transform:none;transition:opacity .6s}
  .mk i::after,.hint i::after{animation:none}
  .m-card{transition:none}
  .dm i::before{animation:none!important;transform:none}
  .dm b{display:none}
  .dm::before{animation:none!important;opacity:1}
}
.no3d .gauge,.no3d .marks{display:none}
.err{font-style:normal}