/* ==========================================================================
   FROZEN LOVE — 122 La Salle St, New York
   Flat, printed-paper design. Ink, cream and one ice blue.
   No soft glows, no mesh/radial gradients — colour is used in solid blocks
   the way a printed shop sign uses it.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:#FAF5EA;
  --paper-2:#F2E8D6;
  --paper-3:#E8DCC4;

  --ink:#11212F;
  --ink-2:#3E5162;
  --ink-3:#71818E;

  --ice:#1A9AD4;
  --ice-deep:#0D6389;
  --ice-pale:#D6EEFA;
  --ice-line:#8FD2EE;

  --neon:#2BE39B;        /* the glow around the lit word */
  --neon-ink:#0C9A5F;    /* the tube itself, dark enough to read on paper */

  --choc:#4A2413;
  --berry:#E0556C;
  --green:#14764B;
  --red:#A33A28;

  --rule:rgba(17,33,47,.14);
  --rule-strong:rgba(17,33,47,.30);

  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-ui:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hand:'Caveat','Segoe Script',cursive;

  --nav-h:74px;
  --pad:clamp(20px,5vw,60px);
  --maxw:1280px;

  --r:14px;
  --ease:cubic-bezier(.2,.8,.25,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-ui);font-size:clamp(15px,1vw,16.5px);
  line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.02;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--ice);color:#fff}
:focus-visible{outline:2.5px solid var(--ice);outline-offset:3px;border-radius:6px}

/* ---------- 3. Type ---------- */
.t-xl{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:.98;letter-spacing:-.024em}
.t-lg{font-size:clamp(1.85rem,3.2vw,2.9rem);line-height:1.04;letter-spacing:-.02em}
.lede{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.62;color:var(--ink-2);max-width:52ch}
.hand{font-family:var(--font-hand);font-weight:600;color:var(--ice-deep);line-height:1}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice-deep);
}
.eyebrow .flake{width:15px;height:15px;color:var(--ice);animation:spin 26s linear infinite}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(70px,9vw,124px)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,64px);max-width:60ch;position:relative;z-index:1}

.slab-ink{background:var(--ink);color:var(--paper)}
.slab-ink .lede{color:rgba(250,245,234,.72)}
.slab-ink .eyebrow{color:var(--ice-line)}
.slab-ink .hand{color:var(--ice-line)}

/* ---------- 4b. Tooth ----------
   Flat colour is what makes a screen feel like a screen. These give every
   surface a little tooth: a grain tile and a field of pencil hatching, both
   drawn by the browser from a filter rather than loaded as an image, so they
   cost no bytes and rasterise once. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.75'/%3E%3C/svg%3E");
  --hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M-4 12 12 -4M2 30 30 2M20 38 38 20' stroke='%2311212F' stroke-width='1.1' stroke-linecap='round' fill='none' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 5. Ice artwork ---------- */
.fern{position:absolute;pointer-events:none;color:var(--ice);opacity:.30;z-index:0}
.fern svg{width:100%;height:100%;overflow:visible}
.fern path{fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:round}
.slab-ink .fern{color:var(--ice);opacity:.36}
.fern--tl{top:-10px;left:-30px;width:min(300px,28vw);height:min(300px,28vw)}
.fern--br{bottom:-10px;right:-30px;width:min(340px,30vw);height:min(340px,30vw);transform:rotate(180deg)}
@media (max-width:720px){.fern{display:none}}

.flake{display:block;width:100%;height:100%;color:inherit;overflow:visible}
.flake path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--fw,3.2)}
[data-flake]{display:inline-block;line-height:0}

/* The scalloped hem along the bottom of a canopy. It unrolls into place the
   first time you reach it. */
.hem{display:block;width:100%;line-height:0;position:relative;z-index:2;overflow:visible;
  height:clamp(20px,2.5vw,32px);background:var(--paper)}
.hem svg{width:100%;display:block;overflow:visible;
  transform:scaleY(.06);transform-origin:50% 0;
  transition:transform .9s cubic-bezier(.22,.9,.28,1)}
.hem.in svg{transform:scaleY(1)}

/* the colouring-in: pen strokes across the shape, kept inside it by the clip */
.v-hatch{fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;opacity:.13}
/* the two passes of the pen. Neither agrees with the other, and the second is
   lighter — the one you go back over the line with. */
.v-ink{fill:none;stroke-linecap:round;stroke-linejoin:round}
.v-ink--1{stroke-width:2.6;opacity:.95}
.v-ink--2{stroke-width:1.4;opacity:.6}

/* the awning's own hem carries the stripes of the canopy straight through */
.awning__hem .v-a{fill:var(--awn-a)}
.awning__hem .v-b{fill:var(--awn-b)}
.awning__hem .v-hatch{stroke:#000;opacity:.16}
.awning__hem .v-ink{stroke:#060C13}
.awning__hem .v-ink--2{stroke:var(--ice);opacity:.42}

/* the dark slab's hem */
.hem--ink{height:clamp(24px,3vw,38px)}
.hem--top{transform:scaleY(-1)}
.hem--ink .v-a,.hem--ink .v-b{fill:var(--ink)}
.hem--ink .v-hatch{stroke:#fff;opacity:.07}
.hem--ink .v-ink{stroke:var(--ink)}
.hem--ink .v-ink--2{stroke:var(--ice);opacity:.6}

/* hand-drawn menu pieces */
.ic{width:100%;height:100%}

/* Snowfall — a handful of flakes, slow and faint */
.snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.snow__f{position:absolute;top:0;display:block;color:var(--ice);
  animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform}
.slab-ink .snow__f{color:var(--ice-line)}
@keyframes fall{
  from{transform:translate3d(0,-110px,0) rotate(0deg)}
  to{transform:translate3d(26px,var(--fall,900px),0) rotate(300deg)}
}

/* ---------- 6. Buttons ----------
   A sticker with a scoop on it. The face, the ink outline and the hard
   shadow are one layer; underneath sits a drawn run of melt that oozes out
   from beneath the pill when you point at it. */
.btn{
  --bf:var(--ice);            /* face */
  --bf-h:var(--ice-deep);     /* face, pointed at */
  --bo:var(--ink);            /* outline + shadow */
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.5em;border-radius:100px;
  font-weight:600;font-size:.93rem;color:#fff;
  background:var(--bf);border:2px solid var(--bo);box-shadow:4px 4px 0 var(--bo);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .22s;
}
/* once JS has given it a face + a melt, the element itself goes bare */
.btn.is-rich{background:none;border-color:transparent;box-shadow:none}

.btn__face{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--bf);border:2px solid var(--bo);box-shadow:4px 4px 0 var(--bo);
  transition:background .22s,box-shadow .18s var(--ease);
}
.btn__melt{position:absolute;left:12%;right:12%;top:calc(100% - 11px);height:34px;z-index:-2;
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .3s;opacity:0}
.btn__melt svg{width:100%;height:auto;overflow:visible}
.btn__melt path{fill:var(--bf);stroke:var(--bo);stroke-width:1.8;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;transition:fill .22s}

.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);background:var(--bf-h)}
.btn:hover .btn__face,.btn:focus-visible .btn__face{background:var(--bf-h);box-shadow:6px 6px 0 var(--bo)}
.btn:hover .btn__melt,.btn:focus-visible .btn__melt{transform:scaleY(1);opacity:1}
.btn:hover .btn__melt path,.btn:focus-visible .btn__melt path{fill:var(--bf-h)}
.btn:not(.is-rich):hover{box-shadow:6px 6px 0 var(--bo)}
.btn:active{transform:translate(2px,2px)}
.btn:active .btn__face{box-shadow:1px 1px 0 var(--bo)}
.btn:not(.is-rich):active{box-shadow:1px 1px 0 var(--bo)}

/* the little drawing on the left, and the arrow on the right */
.btn__ico{display:grid;place-items:center;width:1.35em;height:1.35em;flex:none;
  transition:transform .5s var(--ease)}
.btn__ico .ic{width:100%;height:100%;stroke-width:1.7}
.btn:hover .btn__ico{transform:rotate(-9deg) scale(1.14) translateY(-1px)}
.btn__go{width:1.05em;height:1.05em;flex:none;transition:transform .3s var(--ease)}
.btn:hover .btn__go{transform:translateX(4px)}

.btn--ink  {--bf:var(--ink);--bf-h:#1B3448;color:var(--paper)}
.btn--paper{--bf:var(--paper);--bf-h:#fff;color:var(--ink)}
.slab-ink .btn{--bo:var(--paper)}

/* sprinkles thrown when a button is pressed */
.fx{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
.fx i{position:absolute;display:block;width:9px;height:4px;border-radius:3px;will-change:transform,opacity}

.tlink{display:inline-flex;align-items:center;gap:.45em;font-weight:600;
  border-bottom:2px solid var(--ice);padding-bottom:2px;transition:color .2s,border-color .2s}
.tlink:hover{color:var(--ice-deep);border-color:var(--ink)}

/* ---------- 7. The door sign ----------
   The card that hangs on the inside of a shop door: two cords from a nail
   through two eyes in a double-ruled board, the word hand-lettered and
   underlined in one stroke. It swings gently on its nail.

   The nail, the cords and the eyes are all placed from the top-left corner of
   .sign__swing with the same three numbers, so each cord always ends in the
   middle of its eye: --cord (nail to the top of the board), --eye-x (an eye's
   centre in from the board's side) and --eye-y (its centre down from the
   board's top). The cords are drawn to fit that box exactly; their strokes
   keep one width however the box is stretched. */
.sign{--cord:32px;--sw:min(236px,calc(100vw - 64px));--eye:7px;--eye-x:19.5px;--eye-y:12.5px;
  position:relative;display:inline-block;width:var(--sw);
  line-height:1;-webkit-tap-highlight-color:transparent}
.sign__swing{position:relative;display:block;padding-top:var(--cord);transform-origin:50% 5px;
  animation:sway 6.5s cubic-bezier(.45,0,.55,1) infinite}
/* the nail */
.sign__swing::before{content:"";position:absolute;z-index:3;left:50%;top:1.6px;
  width:6.8px;height:6.8px;margin-left:-3.4px;border-radius:50%;background:var(--ink)}
.sign__cord{position:absolute;z-index:1;top:5px;left:var(--eye-x);
  width:calc(100% - 2 * var(--eye-x));height:calc(var(--cord) - 5px + var(--eye-y));overflow:visible;
  fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;opacity:.85}
.sign__cord path{vector-effect:non-scaling-stroke}
.slab-ink .sign__cord{stroke:var(--paper);opacity:.6}
.slab-ink .sign__swing::before{background:var(--paper)}
/* the eyes sit over the cord ends, so each cord runs into its hole */
.sign__eye{position:absolute;z-index:2;top:calc(var(--cord) + var(--eye-y) - var(--eye) / 2);
  width:var(--eye);height:var(--eye);border-radius:50%;
  border:1.5px solid var(--ink);background:var(--paper-3)}
.sign__eye--l{left:calc(var(--eye-x) - var(--eye) / 2)}
.sign__eye--r{right:calc(var(--eye-x) - var(--eye) / 2)}
.sign__card{
  position:relative;display:grid;justify-items:center;gap:0;width:100%;
  padding:15px 18px 14px;text-align:center;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:11px;
  box-shadow:0 7px 0 -2px rgba(17,33,47,.16),0 16px 26px -18px rgba(17,33,47,.7);
}
.sign__card::before{content:"";position:absolute;inset:5px;border-radius:6px;
  border:1px solid var(--rule-strong);pointer-events:none}

.sign__flake{position:absolute;right:11px;bottom:9px;width:16px;height:16px;color:var(--ice);opacity:.75}
.sign__lead{font-family:var(--font-hand);font-size:1.06rem;font-weight:600;color:var(--ink-2)}
.sign__wrap{position:relative;display:inline-block;padding-bottom:12px;margin-top:1px}
.sign__word{display:block;font-family:var(--font-hand);font-weight:700;
  font-size:2.55rem;line-height:.9;letter-spacing:.005em}
.sign__wrap .ul{position:absolute;left:-9%;right:-9%;bottom:-1px;width:118%;height:auto}
.ul path{fill:none;stroke:currentColor;stroke-linecap:round;
  stroke-dasharray:210;stroke-dashoffset:210;animation:ink .85s var(--ease) .3s forwards}
.ul__a{stroke-width:2.6}
.ul__b{stroke-width:1.5;opacity:.5;animation-delay:.52s}
@keyframes ink{to{stroke-dashoffset:0}}
.sign__sub{font-family:var(--font-hand);font-size:1.06rem;font-weight:600;color:var(--ink-2);margin-top:5px}

.sign--shut .sign__wrap{color:var(--red)}
.sign--shut .sign__word{color:var(--red)}
.sign--shut .sign__flake{color:var(--ink-3);opacity:.5}

/* Open, the board is the same board — only the word and the stroke under it
   are wired up, so they burn like a tube of gas with the odd stutter in the
   current. Everything else stays paper and ink like the rest of the site. */
.sign--open .sign__wrap{color:var(--neon-ink);animation:neon 7s linear infinite}
.sign--open .sign__word{color:var(--neon-ink);
  text-shadow:0 0 2px rgba(43,227,155,.95),0 0 6px rgba(43,227,155,.85),
              0 0 13px rgba(43,227,155,.55),0 0 26px rgba(43,227,155,.3),
              0 0 44px rgba(43,227,155,.16)}
.sign--open .ul path{filter:drop-shadow(0 0 3px rgba(43,227,155,.95))
                            drop-shadow(0 0 9px rgba(43,227,155,.6))}
.sign--open .sign__flake{color:var(--neon-ink);opacity:.42;animation:spin 16s linear infinite}
@keyframes neon{
  0%,88%,100%{opacity:1}
  89%{opacity:.4}90%{opacity:1}91.5%{opacity:.62}92.5%{opacity:1}
}

/* the one thing still working while the shop is shut */
.sign__fly{position:absolute;top:0;left:0;width:17px;height:14px;z-index:6;
  color:var(--ink-2);pointer-events:none;animation:buzz 11s linear infinite}
.sign__fly svg{width:100%;height:100%;overflow:visible}
.fly-b{fill:currentColor;stroke:none}
.fly-w{fill:none;stroke:currentColor;stroke-width:.9;opacity:.5;
  transform-origin:8px 7px;animation:flap .1s linear infinite}
.fly-w--b{animation-delay:.05s}
.fly-l{fill:none;stroke:currentColor;stroke-width:.8;stroke-linecap:round;opacity:.8}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@keyframes buzz{
  0%  {transform:translate(18px,6px)   rotate(8deg)}
  9%  {transform:translate(74px,-14px) rotate(-14deg)}
  19% {transform:translate(152px,12px) rotate(10deg)}
  28% {transform:translate(214px,-8px) rotate(-7deg)}
  38% {transform:translate(238px,46px) rotate(18deg)}
  48% {transform:translate(196px,96px) rotate(-11deg)}
  59% {transform:translate(116px,112px)rotate(6deg)}
  69% {transform:translate(46px,86px)  rotate(-16deg)}
  79% {transform:translate(-8px,52px)  rotate(9deg)}
  90% {transform:translate(30px,20px)  rotate(-6deg)}
  100%{transform:translate(18px,6px)   rotate(8deg)}
}

@keyframes sway{0%,100%{transform:rotate(-1.9deg)}50%{transform:rotate(1.9deg)}}

/* the compact one, for the footer and the mobile menu */
.sign--sm{--sw:auto;width:auto;padding-top:0}
.sign--sm .sign__cord,.sign--sm .sign__eye,.sign--sm .sign__swing::before{display:none}
.sign--sm .sign__swing{padding-top:0}
.sign--sm .sign__card{display:inline-flex;align-items:baseline;gap:.5em;width:auto;
  padding:.34em .85em .5em;border-width:2px;border-radius:8px;white-space:nowrap;
  box-shadow:0 4px 0 -1px rgba(17,33,47,.16);transform:rotate(-1.4deg);
  transform-origin:50% 50%}
.sign.sign--sm .sign__swing{animation:none}
.sign--sm.sign--shut .sign__card{transform:rotate(3.2deg)}
.sign--sm .sign__card::before{inset:3px;border-radius:5px}
.sign--sm .sign__lead,.sign--sm .sign__flake{display:none}
.sign--sm .sign__wrap{padding-bottom:6px}
.sign--sm .sign__word{font-size:1.34rem}
.sign--sm .sign__wrap .ul{bottom:-2px}
.sign--sm .sign__sub{font-size:1.02rem;margin-top:0}

/* the same door sign, smaller, for the top of the page; the cords keep the
   236:32 shape of their drawing so they still meet the board's eyes */
.sign--mini{--sw:184px;--cord:25px;--eye:5.5px;--eye-x:15px;--eye-y:9.5px}
.sign--mini .sign__card{padding:8px 12px 7px;border-width:2px;border-radius:9px;
  box-shadow:0 5px 0 -2px rgba(17,33,47,.16),0 12px 18px -14px rgba(17,33,47,.7)}
.sign--mini .sign__card::before{inset:3px;border-radius:6px}
.sign--mini .sign__eye{border-width:1.2px}
.sign--mini .sign__swing::before{top:2.3px;width:5.4px;height:5.4px;margin-left:-2.7px}
.sign--mini .sign__lead,.sign--mini .sign__sub{font-size:1.02rem}
.sign--mini .sign__wrap{padding-bottom:8px}
.sign--mini .sign__word{font-size:2.05rem}
.sign--mini .sign__sub{margin-top:2px}
.sign--mini .sign__flake{right:7px;bottom:6px;width:11px;height:11px}

/* ---------- 8. Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:var(--paper);border-bottom:1.5px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
.nav.is-stuck{border-bottom-color:var(--ink)}
/* how far down the page you are, drawn as a rail of ice under the bar */
.prog{position:absolute;left:0;right:0;bottom:-2.5px;height:2.5px;pointer-events:none;
  opacity:0;transition:opacity .3s}
.nav.is-stuck .prog{opacity:1}
.prog i{display:block;height:100%;background:var(--ice);
  transform:scaleX(var(--p,0));transform-origin:0 50%}
.nav__in{display:flex;align-items:center;gap:20px;width:100%}
.nav__logo{flex:none;position:relative;z-index:3;transition:transform .3s var(--ease)}
.nav__logo:hover{transform:translateY(-2px) rotate(-1.5deg)}
.nav__logo img{height:46px;width:auto}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__link{position:relative;padding:.5em .8em;font-size:.92rem;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav__link::after{content:"";position:absolute;left:.8em;right:.8em;bottom:.28em;height:2px;background:var(--ice);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--ink);font-weight:600}
.nav__link--tel,.nav__status{display:none}
.nav__right{display:flex;align-items:center;gap:12px;flex:none;margin-left:14px}
.nav__phone{font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:color .2s}
.nav__phone svg{width:15px;height:15px;color:var(--ice-deep);transition:transform .4s var(--ease)}
.nav__phone:hover{color:var(--ice-deep)}
.nav__phone:hover svg{animation:ring .7s ease-in-out}
.nav__burger{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);
  place-items:center;position:relative;z-index:3;background:var(--paper)}
.nav__burger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav__burger span+span{margin-top:5px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
  .nav__burger{display:grid}
  .nav__right{margin-left:auto}
  .nav__phone{display:none}
  /* the menu takes the whole screen, so nothing shows underneath it */
  .nav__links{
    position:fixed;left:0;right:0;top:0;margin:0;
    height:100vh;height:100svh;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(var(--nav-h) + 22px) var(--pad) calc(34px + env(safe-area-inset-bottom,0px));
    flex-direction:column;align-items:stretch;justify-content:center;gap:0;
    background:var(--paper);
    clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease);
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-family:var(--font-display);font-size:clamp(1.7rem,7vw,2.1rem);padding:.26em 0;color:var(--ink);
    opacity:0;transform:translateY(16px);
    transition:opacity .4s var(--ease),transform .55s var(--ease),color .2s}
  .nav.is-open .nav__link{opacity:1;transform:none}
  .nav.is-open .nav__link:nth-child(1){transition-delay:.16s}
  .nav.is-open .nav__link:nth-child(2){transition-delay:.21s}
  .nav.is-open .nav__link:nth-child(3){transition-delay:.26s}
  .nav.is-open .nav__link:nth-child(4){transition-delay:.31s}
  .nav.is-open .nav__link:nth-child(5){transition-delay:.36s}
  .nav.is-open .nav__link:nth-child(6){transition-delay:.41s}
  .nav__link::after{left:0;right:auto;width:32px;bottom:.18em}
  .nav__link--tel{display:block;color:var(--ice-deep);margin-top:16px;
    padding-top:20px;border-top:1.5px solid var(--rule-strong)}
  .nav__status{display:block;margin-top:18px;opacity:0;transform:translateY(16px);
    transition:opacity .4s var(--ease) .46s,transform .55s var(--ease) .46s}
  .nav.is-open .nav__status{opacity:1;transform:none}
}

/* ---------- 9. Hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(26px,5vw,60px));padding-bottom:0;overflow:visible}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr);
  gap:clamp(16px,2.5vw,36px);align-items:center;padding-bottom:clamp(40px,6vw,80px)}
.hero__copy{position:relative;z-index:4;display:grid;gap:clamp(20px,2.6vw,28px);justify-items:start}
.hero__logo{width:min(430px,84%)}
.hero__h{font-family:var(--font-display);font-size:clamp(2.5rem,5.6vw,4.6rem);
  line-height:1;letter-spacing:-.022em;max-width:13ch}
.hero__h em{font-style:italic;color:var(--ice-deep)}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.hero__addr{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-2)}
.hero__addr svg{width:15px;height:15px;color:var(--ice-deep);flex:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* --- the deck of prints ---
   Five photographs in a pile. --sx/--sy/--sr set how far each one behind the
   front is nudged, tipped and shrunk; the padding on the shot reserves the
   room that fan needs so nothing ever hangs off the screen. */
.hero__shot{
  --sx:14px;--sy:10px;--sr:2.4deg;--n:4;
  position:relative;justify-self:end;width:min(100%,436px);
  margin-left:auto;margin-bottom:clamp(30px,4vw,56px);
  padding-top:calc(var(--n) * var(--sy) + 12px);
  padding-right:calc(var(--n) * var(--sx) + 26px);
}
.hero__deck{position:relative;aspect-ratio:3/4;cursor:grab;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;transition:transform .5s var(--ease)}
.hero__deck:active{cursor:grabbing}

.hero__card{
  position:absolute;inset:0;margin:0;display:flex;flex-direction:column;
  padding:9px 9px 0;overflow:hidden;
  border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);
  box-shadow:0 12px 24px -18px rgba(17,33,47,.8);
  transform-origin:50% 64%;
  transform:translate3d(calc(var(--i,0) * var(--sx) + var(--dg,0px)),calc(var(--i,0) * var(--sy) * -1),0)
            rotate(calc(var(--i,0) * var(--sr)))
            scale(calc(1 - var(--i,0) * .035));
  z-index:calc(10 - var(--i,0));
  transition:transform .62s cubic-bezier(.22,.9,.28,1),filter .5s;
  will-change:transform;
}
.hero__card:not(.is-front){filter:saturate(.86) brightness(.97)}
.hero__card.is-drag{transition:none}
.hero__card img{flex:1;min-height:0;width:100%;object-fit:cover;border-radius:6px;
  background:var(--ink);pointer-events:none;user-select:none}
/* the strip along the bottom of a print, written on by hand */
.hero__card figcaption{
  flex:none;display:grid;place-items:center;height:40px;padding:0 8px;
  font-family:var(--font-hand);font-weight:600;font-size:1.12rem;line-height:1.05;
  color:var(--ink-2);text-align:center;
  opacity:.35;transition:opacity .4s var(--ease)}
.hero__card.is-front figcaption{opacity:1}

@keyframes peel{
  0%  {z-index:30;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  46% {z-index:30;transform:translate3d(-56%,-11%,0) rotate(-15deg) scale(1.03)}
  47% {z-index:1}
  100%{z-index:1;
       transform:translate3d(calc(var(--n) * var(--sx)),calc(var(--n) * var(--sy) * -1),0)
                 rotate(calc(var(--n) * var(--sr))) scale(calc(1 - var(--n) * .035))}
}

.hero__tape{position:absolute;top:-11px;left:50%;width:104px;height:26px;z-index:40;
  transform:translateX(-50%) rotate(-2.4deg);
  background:var(--ice-pale);border:1.5px solid var(--ink);border-radius:2px;
  box-shadow:0 2px 5px -2px rgba(17,33,47,.5)}

.hero__deckbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-top:16px;padding-left:2px}
.hero__dots{display:flex;align-items:center;gap:7px;flex:none}
.hero__dot{width:10px;height:10px;border-radius:50%;flex:none;padding:0;
  border:1.5px solid var(--ink-3);background:transparent;
  transition:background .3s,border-color .3s,transform .35s var(--ease)}
.hero__dot:hover{border-color:var(--ink);transform:scale(1.2)}
.hero__dot.is-on{background:var(--ice);border-color:var(--ink);transform:scale(1.25)}
.hero__note{display:flex;align-items:flex-end;gap:6px;color:var(--ice-deep);
  transform:rotate(-3.5deg);transform-origin:100% 100%}
.hero__note > span{font-family:var(--font-hand);font-weight:700;font-size:1.85rem;line-height:1;white-space:nowrap}
.hero__note svg{width:44px;height:38px;flex:none;margin-bottom:-5px;
  animation:point 4.2s ease-in-out infinite}
@keyframes point{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-4px)}}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:30px}
  .hero__copy{justify-items:center;text-align:center}
  .hero__h{max-width:16ch}
  .hero__meta{flex-direction:column;justify-content:center;gap:15px}
  .hero__actions{justify-content:center}
  .hero__logo{width:min(360px,74%)}
  .hero__shot{width:min(100%,372px);margin-inline:auto;justify-self:center}
  .hero__deckbar{justify-content:center;gap:10px}
}
@media (max-width:560px){
  .hero__in{gap:24px;padding-bottom:clamp(28px,6vw,50px)}
  .hero__copy{gap:17px}
  .hero__shot{--sx:9px;--sy:7px;--sr:2deg;width:min(100%,306px)}
  .hero__logo{width:min(270px,70%)}
  .hero__tape{width:84px;height:22px}
  .hero__card figcaption{padding:9px 12px;font-size:.78rem}
  .hero__note > span{font-size:1.6rem}
  .hero__note svg{width:36px;height:31px}
  .hero__deckbar{flex-direction:column;align-items:center;gap:8px}
  .hero__actions{width:100%;flex-direction:column;align-items:stretch;max-width:300px}
}

/* Entrance. Gated on .ready so the page is never stuck hidden if JS fails. */
body.ready .hero__logo   {animation:riseIn .85s var(--ease) .04s backwards}
body.ready .hero__meta   {animation:riseIn .85s var(--ease) .30s backwards}
body.ready .hero__actions{animation:riseIn .85s var(--ease) .42s backwards}
body.ready .hero__shot   {animation:shotIn 1.1s var(--ease) .18s backwards}
body.ready .hero__deckbar{animation:riseIn .8s var(--ease) .95s backwards}
@keyframes riseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes shotIn{from{opacity:0;transform:translateY(28px) rotate(2.5deg) scale(.95)}to{opacity:1;transform:none}}

/* the cards deal themselves out on load */
body.ready .hero__card{animation:deal .8s cubic-bezier(.22,.9,.28,1) backwards}
body.ready .hero__card:nth-child(2){animation-delay:.34s}
body.ready .hero__card:nth-child(3){animation-delay:.42s}
body.ready .hero__card:nth-child(4){animation-delay:.50s}
body.ready .hero__card:nth-child(5){animation-delay:.58s}
body.ready .hero__card:nth-child(6){animation-delay:.66s}
@keyframes deal{
  from{opacity:0;transform:translate3d(-18%,14%,0) rotate(-9deg) scale(.92)}
  to{opacity:1;transform:translate3d(calc(var(--i,0) * var(--sx)),calc(var(--i,0) * var(--sy) * -1),0)
                        rotate(calc(var(--i,0) * var(--sr))) scale(calc(1 - var(--i,0) * .035))}
}

/* the top print peels off to the left and drops in at the back. Declared
   last, and matched more tightly than the deal above, so it always wins. */
.hero__card.is-peel,
body.ready .hero__card.is-peel{animation:peel .68s cubic-bezier(.5,0,.3,1) forwards}

/* ---------- 10. The awning ----------
   A striped canopy on a rail. The stripes are hard-stopped colour blocks, not
   a blend — the same way a real awning is sewn — and the scallop width below
   is set to match the stripe, so the hem carries the pattern through. */
.awning{--awn-a:#11212F;--awn-b:#1A3B54;--sp:82px;
  position:relative;z-index:2;isolation:isolate}
.ticker{
  position:relative;overflow:hidden;color:var(--paper);
  padding-block:clamp(20px,2.2vw,28px);
  border-top:4px solid var(--ice);
  /* woven cloth, so it gets a weave rather than two flat blocks of colour */
  background-image:var(--grain),
    repeating-linear-gradient(90deg,
      var(--awn-a) 0 var(--sp), var(--awn-b) var(--sp) calc(var(--sp) * 2));
  background-size:150px 150px,auto;
  background-blend-mode:soft-light,normal;
}
/* the fold where the canopy leaves the rail */
.ticker::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:1;
  background:rgba(255,255,255,.07);pointer-events:none}
/* the chalk slab the words run across — drawn in JS as a wobbly band with
   hatched shading and two pen passes along each edge (ART.seam), so the middle
   of the belt is as hand-made as the scallops under it */
.ticker__seam{position:absolute;inset:0;z-index:0;pointer-events:none}
.ticker__seam svg{width:100%;height:100%;display:block}
.s-face{fill:rgba(6,14,22,.5)}
.s-hatch{stroke:#fff;stroke-width:1.2;opacity:.07}
.s-ink{fill:none;stroke:var(--ice-line);stroke-linecap:round;stroke-linejoin:round}
.s-ink--1{stroke-width:1.9;opacity:.55}
.s-ink--2{stroke-width:1;opacity:.35}
.ticker__track{position:relative;z-index:1;display:flex;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker__row{display:flex;align-items:center;gap:clamp(26px,3.6vw,52px);padding-right:clamp(26px,3.6vw,52px)}
/* the words are lettered by hand, not set in a typeface: the hand font, no
   two words sitting quite level, and a ghost copy of each word nudged off
   true — the second pass of the pen that never agrees with the first */
.ticker__item{display:flex;align-items:center;gap:clamp(26px,3.6vw,52px);white-space:nowrap;
  font-family:var(--font-hand);font-weight:700;
  font-size:clamp(1.5rem,2.1vw,2rem);letter-spacing:.015em;line-height:1;
  color:var(--paper)}
.ticker__item:nth-child(odd){transform:rotate(.8deg)}
.ticker__item:nth-child(even){transform:rotate(-.7deg) translateY(1px)}
.ticker__word{position:relative;display:inline-block}
.ticker__word::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;
  opacity:.3;transform:translate(1.5px,-1px) rotate(.4deg);pointer-events:none}
.ticker__item [data-flake]{width:1.05em;height:1.05em;color:var(--ice-line);flex:none;
  animation:spin 20s linear infinite}

/* ---------- 11. Kinds ---------- */
.kinds{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)}
.kind{grid-column:span 2}
.kind:nth-child(4),.kind:nth-child(5){grid-column:span 3}
@media (max-width:1000px){
  .kinds{grid-template-columns:repeat(2,1fr)}
  .kind,.kind:nth-child(4),.kind:nth-child(5){grid-column:span 1}
}
@media (max-width:600px){.kinds{grid-template-columns:1fr}}

/* Each one is a print taped to the wall: numbered the way the section
   promises, and written on underneath by hand. */
.kind{
  position:relative;display:grid;gap:13px;align-content:start;padding:clamp(20px,2.2vw,26px);
  border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),background .26s;
}
.kind__tape{position:absolute;top:-11px;left:50%;width:76px;height:20px;z-index:2;
  transform:translateX(-50%) rotate(-2.2deg);
  background:var(--ice-pale);border:1.5px solid var(--ink);border-radius:2px;
  box-shadow:0 2px 5px -3px rgba(17,33,47,.6)}
.kind:nth-child(2n) .kind__tape{transform:translateX(-50%) rotate(2.4deg)}
.kind__head{display:grid;gap:3px}
.kind__no{font-family:var(--font-hand);font-weight:700;font-size:1.06rem;line-height:1;
  color:var(--ice-deep);letter-spacing:.02em}
.kind:hover{transform:translateY(-5px);box-shadow:0 18px 30px -16px rgba(17,33,47,.45);background:#fff}
.kind__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kind__flake{width:44px;height:44px;color:var(--ice);flex:none;transition:transform .6s var(--ease)}
.kind:hover .kind__flake{transform:rotate(60deg) scale(1.08)}
.kind h3{font-size:1.42rem;line-height:1.06}
/* the description is written on the print, not typed under it */
.kind__note{font-family:var(--font-hand);font-weight:600;font-size:1.18rem;line-height:1.3;
  color:var(--ink-2)}
.kind__shot{position:relative;border-radius:9px;overflow:hidden;border:1.5px solid var(--ink);
  aspect-ratio:16/10;background:var(--paper);padding:7px}
.kind__shot img{width:100%;height:100%;object-fit:cover;border-radius:4px;
  transition:transform .6s var(--ease)}
.kind:hover .kind__shot img{transform:scale(1.06)}
/* the drawing of the thing, revealed over its photo */
.kind__glyph{position:absolute;right:15px;bottom:14px;width:42px;height:42px;color:#fff;
  opacity:0;transform:translateY(12px) scale(.75);pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(17,33,47,.55));
  transition:opacity .35s,transform .5s var(--ease)}
.kind:hover .kind__glyph{opacity:1;transform:none}
.kind__art{border-radius:8px;border:1.5px solid var(--ink);aspect-ratio:16/10;background:var(--ice-pale);
  display:grid;place-items:center;overflow:hidden}
.kind__art > span{display:block;width:86px;height:86px;color:var(--ice);transition:transform .6s var(--ease)}
.kind:hover .kind__art > span{transform:rotate(30deg) scale(1.06)}
.kind__go{display:inline-flex;align-items:center;gap:.4em;font-size:.84rem;font-weight:700;color:var(--ice-deep);
  letter-spacing:.02em}
.kind__go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.kind:hover .kind__go svg{transform:translateX(4px)}

/* ---------- 12. Menu ----------
   A printed menu board hanging on the wall behind the counter: index tabs
   along the top edge, a heavy ink rule around a cream board, a drawn
   flourish in every corner, and a masthead over each course. */
.menu{background:var(--paper-2)}
.menu__bar{position:relative;position:sticky;top:calc(var(--nav-h) - 1px);z-index:20;
  background:var(--paper-2);padding-block:14px 0;margin-bottom:0}
/* a fade at the trailing edge, so it is obvious the strip carries on */
.menu__bar::after{content:"";position:absolute;right:0;bottom:0;width:38px;top:14px;
  pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(242,232,214,0),var(--paper-2))}
@media (min-width:1000px){.menu__bar::after{display:none}}
.menu__tabs{display:flex;align-items:flex-end;gap:5px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:10px 2px 6px;margin-block:-6px -6px}
.menu__tabs::-webkit-scrollbar{display:none}
.menu__tab{scroll-snap-align:start}

/* index tabs, the kind stitched onto the edge of a real menu */
.menu__tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:.5em;
  padding:.62em 1.15em .72em .88em;white-space:nowrap;
  border:2px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;
  font-size:.88rem;font-weight:600;color:var(--ink-2);
  background:var(--paper-3);
  transform:translateY(5px);
  transition:color .22s,background .22s,transform .3s var(--ease)}
.menu__tab:hover{color:var(--ink);background:#EFE4CD;transform:translateY(1px)}
.menu__tab.is-active{background:var(--paper);color:var(--ink);transform:translateY(0)}
/* the active tab bridges over the board's top rule, so the two read as one
   piece of card */
.menu__tab.is-active::after{content:"";position:absolute;left:2px;right:2px;bottom:-3px;
  height:5px;background:var(--paper);border-radius:0}
.menu__tab.is-active::before{content:"";position:absolute;left:9px;right:9px;top:5px;
  display:none}

/* the board itself */
.menu__board{--bpy:clamp(26px,4vw,54px);--bpx:clamp(18px,3.4vw,46px);
  position:relative;background:var(--paper);
  border:2.5px solid var(--ink);border-radius:0 16px 16px 16px;
  padding:var(--bpy) var(--bpx) clamp(30px,4vw,54px);
  box-shadow:0 10px 0 -3px rgba(17,33,47,.13),0 40px 60px -46px rgba(17,33,47,.9);
  margin-bottom:clamp(10px,2vw,20px)}
.menu__board::before{content:"";position:absolute;inset:7px;border-radius:0 11px 11px 11px;
  border:1px solid var(--rule);pointer-events:none}
.menu__corner{position:absolute;width:34px;height:34px;color:var(--ice);opacity:.5;pointer-events:none}
.menu__corner svg{width:100%;height:100%}
.menu__corner path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.menu__corner circle{fill:currentColor}
.menu__corner--tl{top:12px;left:12px}
.menu__corner--tr{top:12px;right:12px;transform:scaleX(-1)}
.menu__corner--bl{bottom:12px;left:12px;transform:scaleY(-1)}
.menu__corner--br{bottom:12px;right:12px;transform:scale(-1)}
@media (max-width:640px){.menu__corner{width:24px;height:24px}}
@media (max-width:700px){
  .menu__tab{padding:.55em .8em .62em .66em;font-size:.8rem;gap:.42em;
    border-radius:10px 10px 0 0}
  .menu__tabic{width:16px;height:16px}
  .menu__tabs{gap:4px}
}

/* the photograph bleeds out of the top corner and dissolves into the paper,
   so the board reads like a printed menu rather than a list in a box */
.menu__bleed{position:absolute;top:0;right:0;z-index:0;pointer-events:none;
  width:min(48%,430px);aspect-ratio:4/3;border-radius:0 13.5px 0 0;overflow:hidden;
  opacity:.82;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 18%,rgba(0,0,0,.55) 43%,transparent 69%);
  mask-image:radial-gradient(120% 120% at 100% 0%,#000 18%,rgba(0,0,0,.55) 43%,transparent 69%)}
.menu__bleed img{width:100%;height:100%;object-fit:cover;
  transition:opacity .45s var(--ease),transform .8s var(--ease)}
.menu__bleed.is-swap img{opacity:0;transform:scale(1.04)}
.menu__panels{position:relative;z-index:1}
/* on a phone the masthead sits centred across the whole board, so the
   photograph drops back to a tint rather than competing with it */
@media (max-width:760px){
  .menu__bleed{width:60%;aspect-ratio:1/1;opacity:.3;
    -webkit-mask-image:radial-gradient(112% 112% at 100% 0%,#000 10%,transparent 62%);
    mask-image:radial-gradient(112% 112% at 100% 0%,#000 10%,transparent 62%)}
}

/* the masthead over each course, the way a printed menu names itself */
.menu__head{display:grid;justify-items:center;gap:7px;text-align:center;
  margin-bottom:clamp(26px,3.4vw,44px)}
.menu__mark{width:clamp(58px,7vw,78px);height:auto;opacity:.92}
.menu__name{font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1;letter-spacing:-.02em;font-style:italic}
.menu__where{font-family:var(--font-hand);font-weight:600;font-size:1.08rem;color:var(--ink-3);
  letter-spacing:.01em}
.menu__flourish{display:flex;align-items:center;gap:12px;width:min(340px,80%);margin-top:6px}
.menu__flourish i{flex:1;height:1.5px;background:var(--rule-strong)}
.menu__flourish > span{width:16px;height:16px;flex:none;color:var(--ice);
  animation:spin 30s linear infinite}

.menu__tabic{display:block;width:19px;height:19px;flex:none;opacity:.8;
  transition:transform .4s var(--ease),opacity .22s}
.menu__tab:hover .menu__tabic{transform:rotate(-10deg) scale(1.14)}
.menu__tab.is-active .menu__tabic{opacity:1}

.menu__panel{display:none}
.menu__panel.is-active{display:block}
.menu__blurb{max-width:48ch;margin:2px auto 0;text-align:center;color:var(--ink-2);
  font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.6}

.board{margin-bottom:clamp(40px,5vw,68px)}
.board:last-child{margin-bottom:0}
.board__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:24px}
.board__head h3{font-size:clamp(1.55rem,2.6vw,2.15rem)}
.board__head .sub{font-family:var(--font-hand);font-size:1.3rem;color:var(--ice-deep)}
/* a rule with a crystal set into it, instead of a plain underline */
.board__rule{flex:1;display:flex;align-items:center;gap:10px;min-width:70px}
.board__rule i{flex:1;height:1.5px;background:var(--rule-strong)}
.board__rule > span{width:17px;height:17px;flex:none;color:var(--ice);animation:spin 34s linear infinite}
.board__head .tagpill{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ice-deep);border:1.5px solid var(--ice);border-radius:100px;padding:.34em .8em;white-space:nowrap}

/* named items — the drawing sits faint and lifts on hover */
.dishes{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(14px,1.8vw,24px)}
.dish{position:relative;display:grid;gap:6px;padding:0 62px 16px 0;border-bottom:1px solid var(--rule);
  transition:border-color .3s;outline-offset:6px}
.dish__glyph{position:absolute;right:2px;top:-6px;width:54px;height:54px;color:var(--ice);
  opacity:.3;transform:rotate(-8deg) scale(.92);pointer-events:none;
  transition:opacity .35s,transform .55s var(--ease)}
.dish:hover,.dish:focus-visible{border-color:var(--ice)}
.dish:hover .dish__glyph,.dish:focus-visible .dish__glyph{opacity:1;transform:rotate(0) scale(1.1)}
.dish__k{display:flex;align-items:baseline;gap:10px}
.dish__k h4{font-size:1.22rem;flex:1;transition:color .25s}
.dish:hover .dish__k h4{color:var(--ice-deep)}
.dish__k .p{font-family:var(--font-hand);font-size:1.32rem;color:var(--ice-deep);flex:none}
.dish p.d{font-size:.89rem;color:var(--ink-2);line-height:1.5}

/* price columns — hovering a line draws what it is */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:clamp(18px,2.6vw,40px)}
.col h4{font-family:var(--font-ui);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice-deep);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.col h4 > span{width:14px;height:14px;flex:none}
.row{position:relative;display:flex;align-items:center;gap:7px;padding:.34em 0;font-size:.93rem;
  border-radius:8px;outline-offset:2px;
  transition:background .25s,padding .25s var(--ease)}
.row__ic{display:block;width:0;height:24px;overflow:hidden;flex:none;color:var(--ice-deep);opacity:0;
  transform:translateX(-8px) scale(.6);
  transition:width .3s var(--ease),opacity .25s,transform .35s var(--ease)}
.row__ic .ic{width:24px;height:24px}
.row .n{flex:none}
.row .n small{color:var(--ink-3);font-size:.82em}
.row .d{flex:1;border-bottom:1.5px dotted var(--rule-strong);transform:translateY(-.2em);
  transition:border-color .25s}
.row .p{flex:none;font-family:var(--font-hand);font-size:1.16rem;color:var(--ice-deep);
  transform-origin:right center;transition:transform .25s var(--ease)}
.row:hover,.row:focus-visible{background:var(--ice-pale);padding-inline:9px}
.row:hover .row__ic,.row:focus-visible .row__ic{width:29px;opacity:1;transform:none}
.row:hover .d,.row:focus-visible .d{border-bottom-color:var(--ice)}
.row:hover .p,.row:focus-visible .p{transform:scale(1.14)}

@keyframes rowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- 13. Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,18px)}
.gal__i{position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r);border:1.5px solid var(--ink);
  background:var(--paper-2);cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.gal__i:hover{transform:translateY(-4px);box-shadow:0 16px 28px -15px rgba(17,33,47,.45)}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal__i:hover img{transform:scale(1.07)}
/* frost grows across the photo while you look at it */
.gal__frost{position:absolute;top:0;left:0;width:64%;height:64%;pointer-events:none;color:#fff;
  border-radius:calc(var(--r) - 2px) 0 0 0;overflow:hidden;
  opacity:0;transition:opacity .45s}
.gal__frost svg{width:100%;height:100%;overflow:visible}
.gal__frost path{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,.7,.3,1)}
.gal__i:hover .gal__frost{opacity:.6}
.gal__i:hover .gal__frost path{stroke-dashoffset:0}
.gal__badge{position:absolute;top:12px;right:12px;width:30px;height:30px;color:#fff;pointer-events:none;
  opacity:0;transform:scale(.4) rotate(-120deg);
  transition:opacity .4s,transform .6s var(--ease)}
.gal__i:hover .gal__badge{opacity:.95;transform:none}
/* A chip of frosted glass laid over a photograph. It blurs and saturates
   whatever is behind it, so it takes the colour of that particular picture,
   and the sheen is the light catching its top edge. Used by the gallery
   captions and the shakes caption. */
.gal__cap,
.visit__photo figcaption{
  position:absolute;color:#fff;border-radius:13px;
  background:rgba(13,24,35,.46);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(18px) saturate(190%);
  backdrop-filter:blur(18px) saturate(190%);
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.gal__cap::after,
.visit__photo figcaption::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 38%,rgba(255,255,255,0) 62%)}

.gal__cap{left:11px;right:11px;bottom:11px;padding:12px 15px 13px;
  font-size:.88rem;font-weight:600;letter-spacing:-.005em;
  transform:translateY(calc(100% + 16px)) scale(.97);opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.28,1),opacity .32s var(--ease)}
.gal__i:hover .gal__cap,.gal__i:focus-visible .gal__cap{transform:none;opacity:1}
/* there is no hover on a phone, so the glass simply stays put */
@media (hover:none){
  .gal__cap{transform:none;opacity:1}
}
/* where the browser cannot frost, fall back to solid ink so the words stay
   readable rather than washing out over the photograph */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .gal__cap,.visit__photo figcaption{background:rgba(14,26,38,.9)}
}
.gal__i--a{grid-column:span 7;aspect-ratio:4/5}
.gal__i--b{grid-column:span 5;aspect-ratio:1/1}
.gal__i--c{grid-column:span 5;aspect-ratio:3/4}
.gal__i--d{grid-column:span 7;aspect-ratio:16/11}
.gal__i--e{grid-column:span 7;aspect-ratio:16/10}
.gal__i--f{grid-column:span 5;aspect-ratio:3/4}
.gal__i--g{grid-column:span 6;aspect-ratio:5/4}
.gal__i--h{grid-column:span 6;aspect-ratio:5/4}
@media (max-width:880px){
  .gal{grid-template-columns:repeat(6,1fr)}
  .gal__i--a,.gal__i--d,.gal__i--e,.gal__i--g,.gal__i--h{grid-column:span 6}
  .gal__i--b,.gal__i--c,.gal__i--f{grid-column:span 6}
  .gal__i--b{aspect-ratio:5/4}
  .gal__i--c,.gal__i--f{aspect-ratio:4/5}
}

/* Lightbox — the photograph comes out as a print in a paper mat, taped up
   against a plain dark room rather than a wash of blue. */
.lb{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  padding:clamp(52px,7vw,64px) clamp(14px,4vw,48px) clamp(20px,4vw,48px);
  background:rgba(9,13,17,.93);
  -webkit-backdrop-filter:blur(9px) saturate(.55);backdrop-filter:blur(9px) saturate(.55);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.is-open{opacity:1;visibility:visible}

.lb__frame{position:relative;margin:0;max-width:min(100%,720px);
  display:flex;flex-direction:column;
  padding:clamp(9px,1.2vw,14px) clamp(9px,1.2vw,14px) 0;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:0 30px 70px -34px #000}
.lb.is-open .lb__frame{animation:lbIn .5s cubic-bezier(.2,.9,.28,1) backwards}
@keyframes lbIn{from{opacity:0;transform:translateY(16px) rotate(-1.6deg) scale(.94)}
  to{opacity:1;transform:none}}
.lb__frame img{width:auto;max-width:100%;max-height:min(66svh,620px);object-fit:contain;
  border-radius:7px;background:var(--paper-2)}
.lb__tape{position:absolute;top:-12px;left:50%;width:96px;height:24px;
  transform:translateX(-50%) rotate(-2.2deg);
  background:var(--ice-pale);border:1.5px solid var(--ink);border-radius:2px}
.lb__cap{padding:12px 6px 13px;text-align:center;
  font-family:var(--font-hand);font-weight:600;font-size:1.24rem;line-height:1.15;
  color:var(--ink-2)}

.lb__b{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(9,13,17,.55);
  transition:transform .22s var(--ease),background .22s}
.lb__b:hover{background:#fff;transform:scale(1.09)}
.lb__b:active{transform:scale(.96)}
.lb__b svg{width:27px;height:27px}
.lb__x{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px)}
.lb__x svg{width:23px;height:23px}
.lb__x:hover svg{animation:drip .7s var(--ease)}
@keyframes drip{0%{transform:translateY(0)}45%{transform:translateY(2.5px)}100%{transform:none}}
.lb__p{left:clamp(8px,2.2vw,28px);top:50%;margin-top:-26px}
.lb__n{right:clamp(8px,2.2vw,28px);top:50%;margin-top:-26px}
.lb__p svg,.lb__n svg{stroke-width:2.4;transition:transform .25s var(--ease)}
.lb__p:hover svg{transform:translateX(-3px)}
.lb__n:hover svg{transform:translateX(3px)}
/* which print this is, pencilled in the corner of the mat */
.lb__count{position:absolute;right:14px;bottom:13px;font-size:.74rem;font-weight:700;
  letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lb__cap{padding-inline:58px}
@media (max-width:620px){
  /* on a phone the arrows sit under the print, where a thumb is, instead of on top of it */
  .lb{padding-bottom:92px}
  .lb__b{width:50px;height:50px}
  .lb__p,.lb__n{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));margin-top:0}
  .lb__p{left:calc(50% - 60px)}
  .lb__n{right:calc(50% - 60px)}
  .lb__frame img{max-height:56svh}
  .lb__cap{font-size:1.08rem;padding-inline:50px}
  .lb__count{right:11px;bottom:12px}
}

/* The wall it all hangs on: chalk rather than clean line, with the board's
   own grain under it and pencil shading gathered in the corners. */
.wall{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  color:var(--ice-deep);opacity:0;transition:opacity 1.2s var(--ease)}
.wall.in{opacity:.15}
.wall svg{position:absolute;top:0;left:0;width:100%;height:100%}
/* the shading that gathers where a hand would rest */
.wall::before,.wall::after{content:"";position:absolute;width:46%;height:62%;
  background-image:var(--hatch);background-size:34px 34px;opacity:.08}
.wall::before{left:-4%;top:-6%;
  -webkit-mask-image:radial-gradient(120% 120% at 0% 0%,#000 18%,transparent 72%);
  mask-image:radial-gradient(120% 120% at 0% 0%,#000 18%,transparent 72%)}
.wall::after{right:-4%;bottom:-6%;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 100%,#000 18%,transparent 72%);
  mask-image:radial-gradient(120% 120% at 100% 100%,#000 18%,transparent 72%)}
@media (max-width:640px){.wall.in{opacity:.12}}

/* ---------- 14. Story ----------
   The page of the site that is a person talking: clean dark slate background,
   warm ambient spotlight glow, clear typography, and a compact taped polaroid. */
.story{
  position:relative;
  overflow:hidden;
  background-color:var(--paper-2);
  background-image:var(--grain);
  background-size:190px 190px;
  background-blend-mode:soft-light;
}

/* frost off a real window, inverted so the crystals read as blue ink and the
   pale ground multiplies away into the paper — the same corner bleed the menu
   board uses, but drawn rather than photographed */
.story__bleed{position:absolute;top:0;right:0;z-index:0;pointer-events:none;
  width:min(44%,470px);aspect-ratio:4/3;overflow:hidden;
  opacity:.5;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 14%,rgba(0,0,0,.5) 42%,transparent 70%);
  mask-image:radial-gradient(120% 120% at 100% 0%,#000 14%,rgba(0,0,0,.5) 42%,transparent 70%)}
.story__bleed img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transform-origin:100% 0;
  transition:transform 1.4s var(--ease),opacity .9s var(--ease)}
/* it settles in as the section arrives — .wall is the sibling the sweep marks,
   so the frost fades up on the same beat as the sketched wall behind it */
.story__bleed img{opacity:0}
.wall.in ~ .story__bleed img{opacity:1;transform:scale(1)}

.story__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
  position:relative;
  z-index:1;
}

.story__frame{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* the sign in the photograph is lit, so it spills onto the page around the
   print — the glow breathes the way a real tube does rather than sitting still */
.story__frame::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:50%;
  top:48%;
  width:min(158%,540px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
    rgba(91,223,220,.62) 0%,
    rgba(91,223,220,.40) 27%,
    rgba(26,154,212,.17) 48%,
    rgba(26,154,212,.05) 64%,
    rgba(26,154,212,0) 78%);
  filter:blur(18px);
  animation:neonBreathe 5.4s ease-in-out infinite;
}
@keyframes neonBreathe{
  0%,100%{opacity:.68;transform:translate(-50%,-50%) scale(.985)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.05)}
}

.story__shot{
  position:relative;
  z-index:1;
  margin:0;
  width:100%;
  max-width:clamp(268px,27vw,348px);
  padding:11px 11px 7px;
  border-radius:12px;
  background:#FAF5EA;
  border:2px solid #11212F;
  box-shadow:
    0 16px 32px -14px rgba(17,33,47,.42),
    0 3px 10px rgba(17,33,47,.12);
  transform:rotate(-1.5deg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor:pointer;
}
.story__frame:hover::before{animation-duration:2.9s;filter:blur(14px)}
.story__shot:hover .story__photo{animation-duration:2.9s}
.story__shot:hover{
  transform:rotate(0deg) scale(1.03) translateY(-4px);
  box-shadow:
    0 22px 40px -16px rgba(17,33,47,.5),
    0 5px 14px rgba(17,33,47,.16);
}

.story__photo{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  border:1px solid rgba(17,33,47,.2);
  background:#0e1e2d;
  /* the neon washes onto the white mount the way it would on a real print */
  box-shadow:
    0 0 26px 2px rgba(91,223,220,.55),
    0 0 58px 10px rgba(26,154,212,.30);
  animation:neonBreathe2 5.4s ease-in-out infinite;
}
@keyframes neonBreathe2{
  0%,100%{box-shadow:0 0 22px 1px rgba(91,223,220,.42),0 0 48px 8px rgba(26,154,212,.22)}
  50%    {box-shadow:0 0 32px 3px rgba(91,223,220,.66),0 0 68px 13px rgba(26,154,212,.36)}
}
.story__photo img{
  width:100%;
  aspect-ratio:4/4.2;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease);
}
.story__shot:hover .story__photo img{
  transform:scale(1.04);
}

.story__shot figcaption{
  padding:9px 4px 6px;
  text-align:center;
  font-family:var(--font-hand);
  font-weight:600;
  font-size:1.15rem;
  line-height:1;
  color:var(--ink-2);
}

.story__tape{
  position:absolute;
  top:-11px;
  left:50%;
  width:88px;
  height:22px;
  z-index:4;
  transform:translateX(-50%) rotate(2deg);
  background:rgba(214,238,250,.95);
  border:1.5px solid #11212F;
  border-radius:2px;
  box-shadow:0 3px 6px -2px rgba(0,0,0,.45);
}

/* Pen sketch frame drawn by JS */
.sketch-frame{position:absolute;inset:-7px;z-index:3;pointer-events:none}
.sketch-frame svg{width:100%;height:100%;display:block;overflow:visible}
.k-ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.k-ink--1{stroke-width:2.3;opacity:.92}
.k-ink--2{stroke-width:1.2;opacity:.5}
.k-flip{stroke:var(--ice);stroke-width:1.2;opacity:.6}

/* Clean text without fuzzy SVG displacement filters */
.story .t-lg{
  color:var(--ink);
  font-size:clamp(2rem,3.4vw,3.1rem);
  line-height:1.04;
  margin:0;
  letter-spacing:-.015em;
}

.story .lede{
  font-size:clamp(1.02rem,1.2vw,1.15rem);
  line-height:1.68;
  color:var(--ink-2);
  max-width:52ch;
}

.story__copy{
  display:grid;
  gap:clamp(18px,2.2vw,24px);
  justify-items:start;
}

/* Handwritten quote box */
.story__q{
  position:relative;
  margin:4px 0 2px;
  padding:4px 0 4px clamp(28px,3vw,38px);
  max-width:min(100%,34rem);
  border-left:2px dashed rgba(17,33,47,.22);
}
.story__q::before{
  content:"“";
  position:absolute;
  left:-8px;
  top:-.08em;
  font-family:var(--font-display);
  font-size:clamp(3.8rem,6vw,5.2rem);
  line-height:.8;
  color:var(--ice);
  opacity:.65;
}
.story__q p{
  font-family:var(--font-hand);
  font-weight:600;
  font-size:clamp(1.48rem,2.2vw,2rem);
  line-height:1.36;
  letter-spacing:.005em;
  color:var(--ink);
}
.story__q cite{
  display:inline-flex;
  align-items:center;
  margin-top:14px;
  font-style:normal;
  white-space:nowrap;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ice-deep);
}
.story__q cite::before{
  content:"";
  display:inline-block;
  width:16px;
  height:1.5px;
  background:var(--ice-deep);
  margin-right:8px;
}

/* Stats row */
.stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
  width:100%;
  margin-top:8px;
}
.stat{
  border-top:1.5px solid var(--rule-strong);
  padding-top:16px;
  transition:border-color .25s var(--ease);
}
.stat:hover{
  border-color:var(--ice);
}
.stat b{
  position:relative;
  display:inline-block;
  padding:2px 12px 4px;
  font-family:var(--font-hand);
  font-weight:700;
  font-size:clamp(2.1rem,3.2vw,3rem);
  line-height:1;
  color:var(--ice-deep);
}
.stat .ring{
  position:absolute;
  left:50%;
  top:50%;
  width:126%;
  height:186%;
  transform:translate(-50%,-50%) rotate(-1.5deg);
  overflow:visible;
  pointer-events:none;
}
.stat .ring path{
  fill:none;
  stroke:var(--ice);
  stroke-width:2.1;
  stroke-linecap:round;
  opacity:.85;
  stroke-dasharray:340;
  stroke-dashoffset:340;
  transition:stroke .3s var(--ease), transform .3s var(--ease);
}
.stat.in .ring path{
  animation:ink 1.1s var(--ease) .35s forwards;
}
.stat:hover .ring path{
  stroke:var(--ice);
}
.stat > span{
  display:block;
  margin-top:9px;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.stat__n{
  position:relative;
  z-index:1;
  display:inline-block;
}

@media (max-width:820px){
  .story__grid{grid-template-columns:1fr;gap:36px}
  .story__shot{max-width:340px;margin-inline:auto}
  /* on one column the print is already the loudest thing on screen, so the
     spill and the frost both step back rather than swamping the copy */
  .story__frame::before{width:min(126%,400px)}
  .story__photo{animation:neonBreathe2m 5.4s ease-in-out infinite}
  @keyframes neonBreathe2m{
    0%,100%{box-shadow:0 0 16px 1px rgba(91,223,220,.30),0 0 34px 6px rgba(26,154,212,.15)}
    50%    {box-shadow:0 0 24px 2px rgba(91,223,220,.46),0 0 48px 9px rgba(26,154,212,.24)}
  }
  .story__bleed{width:min(62%,300px);aspect-ratio:1/1;opacity:.34;
    -webkit-mask-image:radial-gradient(112% 112% at 100% 0%,#000 8%,transparent 64%);
    mask-image:radial-gradient(112% 112% at 100% 0%,#000 8%,transparent 64%)}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr;gap:0}
  .stat{padding-block:14px}
  .stat b{padding-left:4px}
}

/* ---------- 15. Visit ---------- */
.visit__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(24px,3.6vw,52px);align-items:stretch}
.card{border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);overflow:hidden}
.card__hd{padding:clamp(20px,2.4vw,28px);border-bottom:1.5px solid var(--rule-strong);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.card__hd h3{font-size:1.45rem}
.card__bd{padding:clamp(20px,2.4vw,28px)}

.hours{display:grid;gap:2px}
.hours__r{display:flex;justify-content:space-between;gap:16px;padding:.42em .6em;border-radius:7px;
  font-size:.94rem;color:var(--ink-2);transition:background .22s,color .22s}
.hours__r:hover{background:rgba(26,154,212,.09);color:var(--ink)}
.hours__r.is-today{background:var(--ice-pale);color:var(--ink);font-weight:700}
.hours__r em{font-style:normal;font-family:var(--font-hand);font-weight:600;font-size:1.1em;
  color:var(--ice-deep);margin-left:7px}
.hours__r .t{font-variant-numeric:tabular-nums;white-space:nowrap}
/* when every day keeps the same hours, say it once and mark today on a week strip */
.hours--same{gap:14px;padding:2px 0 14px}
.hours__every{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.hours__every b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,2.9vw,2.5rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--ice)}
.hours__every span{font-family:var(--font-hand);font-weight:700;font-size:1.5rem;line-height:1.1;color:var(--ink)}
.hours__week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hours__week li{display:grid;justify-items:center;align-content:center;min-height:50px;padding:6px 0;
  border:1.5px solid var(--rule-strong);border-radius:11px;
  font-size:.8rem;font-weight:700;line-height:1.15;color:var(--ink-2)}
.hours__week li.is-today{background:var(--ice);border-color:var(--ink);color:#fff;box-shadow:2px 3px 0 var(--ink)}
.hours__week small{font-family:var(--font-hand);font-size:1rem;font-weight:700;line-height:.9}

.facts{display:grid;margin-top:8px}
.fact{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.fact:first-child{border-top:0}
.fact__ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1.5px solid var(--rule-strong);color:var(--ice-deep);background:var(--paper);
  transition:background .28s,border-color .28s,transform .28s var(--ease)}
.fact__ico svg{width:18px;height:18px}
.fact:hover .fact__ico{background:var(--ice-pale);border-color:var(--ice);transform:scale(1.07)}
.fact .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.fact .v{font-size:1rem;color:var(--ink);font-weight:500;transition:color .22s}
/* a taller place to press, without moving anything */
.fact a.v{display:inline-block;padding-block:9px;margin-block:-9px}
.fact:hover .v{color:var(--ice-deep)}

/* each icon moves the way its subject moves */
.fact:hover .fact__ico[data-ico="phone"] svg{animation:ring .7s ease-in-out}
.fact:hover .fact__ico[data-ico="pin"]   svg{animation:drop .6s var(--ease)}
.fact:hover .fact__ico[data-ico="ig"]    svg{animation:pop .55s var(--ease)}
.fact:hover .fact__ico[data-ico="train"] svg{animation:ride .8s var(--ease-soft)}
@keyframes ring{0%,100%{transform:rotate(0)}12%{transform:rotate(-17deg)}26%{transform:rotate(15deg)}
  40%{transform:rotate(-11deg)}54%{transform:rotate(9deg)}68%{transform:rotate(-5deg)}82%{transform:rotate(3deg)}}
@keyframes drop{0%{transform:translateY(-8px)}55%{transform:translateY(2px)}75%{transform:translateY(-1px)}100%{transform:none}}
@keyframes pop{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.2) rotate(10deg)}100%{transform:none}}
@keyframes ride{0%{transform:translateX(0)}35%{transform:translateX(6px)}70%{transform:translateX(-2px)}100%{transform:none}}

.visit__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* the photo and the map share the column beside the card, and together they
   run exactly as tall as it does */
.visit__side{display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(18px,2vw,26px);min-width:0}
.visit__photo{margin:0;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;
  position:relative;isolation:isolate}
.visit__photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;
  transition:transform .8s var(--ease)}
.visit__photo:hover img{transform:scale(1.05)}
.visit__photo figcaption{left:12px;right:12px;bottom:12px;padding:12px 16px;
  font-size:.86rem;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.visit__photo figcaption .tlink{color:#fff;border-color:rgba(255,255,255,.55);border-bottom-width:2px;padding-block:.45em}
.visit__photo figcaption .tlink:hover{color:#fff;border-color:#fff}
@media (max-width:820px){
  .visit__grid{grid-template-columns:1fr}
  .visit__photo img{aspect-ratio:4/3}
}

/* --- the block, in a frame that matches everything else on the page --- */
.map{position:relative;margin:0;display:flex;flex-direction:column;min-width:0;
  border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--paper);
  box-shadow:0 8px 0 -3px rgba(17,33,47,.13)}
.map__bar{position:relative;z-index:3;flex:none;
  background:var(--paper);color:var(--ink);border-bottom:2px solid var(--ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding:12px clamp(13px,1.6vw,18px)}
.map__pin{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--ink);background:var(--pink);color:var(--ink)}
.map__pin svg{width:20px;height:20px}
.map__where{display:grid;gap:1px;margin-right:auto}
.map__where b{font-family:var(--font-display);font-size:1.24rem;font-weight:400;line-height:1.1}
.map__where i{font-family:var(--font-hand);font-style:normal;font-weight:700;font-size:1.08rem;
  color:var(--ink-2)}
.map__go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.map__go .tlink{font-size:.9rem;padding-block:.5em}
.btn--sm{padding:.66em 1.1em;font-size:.86rem}
.btn--sm .btn__melt{display:none}

.map__frame{position:relative;width:100%;flex:1;min-height:280px;background:var(--paper-2)}
.map__f{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;
  filter:saturate(.82) contrast(1.03);
  opacity:0;transition:opacity .5s var(--ease)}
.map.is-live .map__f{opacity:1}

/* A drawing of the block stands in for the map, and keeps it from grabbing
   the page scroll, until it is asked for. */
.map__cover{position:absolute;inset:0;display:block;width:100%;padding:0;overflow:hidden;
  background:var(--paper-2);color:var(--ink);cursor:pointer;
  transition:opacity .4s var(--ease),visibility .4s}
.map.is-live .map__cover{opacity:0;visibility:hidden;pointer-events:none}
.map__sketch{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  transition:transform .9s var(--ease)}
.map__cover:hover .map__sketch{transform:scale(1.035)}
.map__cover-in{position:absolute;left:14px;bottom:14px;display:grid;gap:1px;text-align:left;
  padding:10px 16px 9px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);
  box-shadow:3px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.map__cover:hover .map__cover-in{transform:translate(1px,1px);box-shadow:2px 3px 0 var(--ink)}
.map__cover b{font-family:var(--font-ui);font-weight:700;font-size:.92rem;line-height:1.3}
.map__cover b::after{content:" \2197";color:var(--ice)}
.map__cover i{font-style:normal;font-size:.76rem;color:var(--ink-2);line-height:1.3}
.map__cover:focus-visible{outline-offset:-5px}
@media (max-width:820px){
  .map__frame{flex:none;aspect-ratio:4/3;min-height:0}
}
@media (max-width:620px){
  .map__frame{aspect-ratio:1/1}
  .map__bar{gap:9px 12px}
  .map__go{width:100%}
}

/* ---------- 16. Footer ---------- */
.foot{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  padding-block:clamp(44px,5.5vw,70px) calc(26px + env(safe-area-inset-bottom,0px))}
.foot__in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,46px);align-items:center;
  position:relative;z-index:1}
.foot__logo{transition:transform .35s var(--ease)}
.foot__logo:hover{transform:translateY(-3px) rotate(-2deg)}
.foot__logo img{height:62px;width:auto}
.foot__nav{display:flex;flex-wrap:wrap;gap:2px 20px;justify-content:center}
.foot__nav a{font-size:.9rem;color:rgba(250,245,234,.72);padding-block:.62em;transition:color .2s}
.foot__nav a:hover{color:var(--ice-line);text-decoration:underline;text-underline-offset:5px}
/* the page's own sections on one line, ways to reach the shop on the next */
.foot__break{flex-basis:100%;height:0}
.foot__social{display:flex;gap:10px}
.foot__social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid rgba(250,245,234,.3);
  transition:background .22s,color .22s,border-color .22s,transform .28s var(--ease)}
.foot__social a:hover{background:var(--ice);border-color:var(--ice);color:#fff;transform:translateY(-4px)}
.foot__social svg{width:19px;height:19px}
.foot__social a:hover svg{animation:pop .55s var(--ease)}
.foot__base{position:relative;z-index:1;margin-top:clamp(26px,3.4vw,44px);padding-top:20px;
  border-top:1px solid rgba(250,245,234,.18);
  display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;align-items:center;
  font-size:.78rem;color:rgba(250,245,234,.5)}
@media (max-width:780px){
  .foot__in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot__base{justify-content:center;text-align:center}
}

/* ---------- 17. Reveals ----------
   Reveals use a backwards-filling animation instead of a transition, so the
   element's own fast hover transitions are never hijacked by the reveal, and
   nothing is left with a forwards fill sitting on top of it afterwards. */
/* Only hidden when the script that reveals them is running (see the one
   line in the head), so the page still reads with scripts switched off. */
.js [data-r],.js [data-rev]{opacity:0}
[data-r].in{opacity:1;animation:revealIn .7s var(--ease) backwards}
@keyframes revealIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* headings rise a word at a time */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.09em;margin-bottom:-.09em}
.w > span{display:inline-block;transform:translateY(108%);
  transition:transform .85s cubic-bezier(.2,.85,.25,1)}
[data-split].in .w > span{transform:none}

/* an eyebrow arrives as its crystal spins into place */
.js .eyebrow{opacity:0}
.eyebrow.in{opacity:1;animation:revealIn .6s var(--ease) backwards}
.eyebrow.in .flake{animation:spinUp .9s var(--ease) backwards,spin 26s linear 1s infinite}
@keyframes spinUp{from{transform:rotate(-190deg) scale(.2);opacity:0}to{transform:none;opacity:1}}

/* --- the "what we make" cards are dealt onto the table, one after another */
[data-rev="deal"].in{opacity:1;
  animation:dealIn .8s cubic-bezier(.2,.85,.26,1) backwards;
  animation-delay:calc(var(--d,0) * 95ms)}
@keyframes dealIn{
  from{opacity:0;transform:translateY(46px) rotate(-4deg) scale(.94)}
  to{opacity:1;transform:none}
}

/* --- the photos come off the machine: flung out of the middle of the grid,
       spinning, and settling into their places one after another --- */
[data-rev="spin"].in{opacity:1;
  animation:spinOut 1.05s cubic-bezier(.16,.84,.24,1) backwards;
  animation-delay:calc(var(--d,0) * 85ms)}
@keyframes spinOut{
  0%  {opacity:0;transform:translate(var(--ox,0px),var(--oy,0px)) rotate(-150deg) scale(.24)}
  38% {opacity:1}
  100%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
}

/* The tall menu stays in place as the paper comes into view. */
[data-rev="board"].in{opacity:1;animation:boardIn .35s ease-out backwards}
@keyframes boardIn{
  from{opacity:0}
  to{opacity:1}
}

/* --- a photograph tips itself straight as it arrives --- */
[data-rev="tip"].in{opacity:1;animation:tipIn .95s cubic-bezier(.2,.9,.28,1) backwards}
@keyframes tipIn{
  from{opacity:0;transform:translateY(38px) rotate(-5deg) scale(.94)}
  to{opacity:1;transform:var(--rest,none)}
}

/* --- a rule that draws itself across --- */
[data-rev="wipe"]{transform-origin:0 50%}
[data-rev="wipe"].in{opacity:1;animation:wipeIn .8s var(--ease) backwards}
@keyframes wipeIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  [data-r]{opacity:1 !important;transform:none !important}
  .w > span{transform:none !important}
  .snow,.hero__note svg,.sign__fly{display:none}
  .ul path{stroke-dashoffset:0 !important}
  .hero__card{transition:none}
  .nav__link,.nav__status{opacity:1 !important;transform:none !important}
}