:root{
  --navy:#032847; --deep:#011a2e; --abyss:#01111f;
  --gold:#c9a45c; --leaf:#f0d9a0; --gold-deep:#8a6a2c;
  --silver:#9fb9c4; --ember:#e0936d;
  --paper:#f4efe4; --paper-2:#e8dfcb; --ink:#0d1d29; --ink-2:#3d4c56;
  --hair:rgba(201,164,92,.42); --hair-soft:rgba(201,164,92,.22);
  --serif:'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --gut:clamp(16px, 4vw, 72px);
  --bar-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:auto; background:var(--deep); overflow-x:clip}
body{margin:0; background:var(--deep); color:var(--paper); font:400 17px/1.55 var(--sans); overflow-x:clip; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
button,input,select{font:inherit; color:inherit}
button,a,[role="button"],[role="radio"]{touch-action:manipulation}
button,[role="radio"],.cta,.chip{-webkit-user-select:none; user-select:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--leaf); outline-offset:3px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.skip{position:fixed; left:12px; top:-60px; z-index:100; background:var(--leaf); color:var(--ink); padding:10px 16px; font-weight:600; text-decoration:none; transition:transform .2s var(--ease-out)}
.skip:focus{transform:translateY(72px)}

/* ---------- the sea (fixed, behind everything) ---------- */
#sea,#seaFallback{position:fixed; inset:0 0 auto 0; width:100%; height:100lvh; z-index:0; display:block; pointer-events:none}
#seaFallback{display:none}
#seaFallback svg{width:100%; height:100%; display:block}
.no-gl #sea{display:none} .no-gl #seaFallback{display:block; position:absolute; height:100svh; min-height:620px}
.no-gl body{background:repeating-linear-gradient(180deg, rgba(159,185,196,0) 0 15px, rgba(159,185,196,.07) 15px 16px), var(--deep)}

/* ---------- header ---------- */
.bar{position:fixed; z-index:30; inset:0 0 auto 0; height:var(--bar-h); padding:0 var(--gut); padding-top:env(safe-area-inset-top); display:flex; align-items:center; gap:28px;
  transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease}
.bar.is-solid{background:rgba(1,22,40,.72); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); box-shadow:0 1px 0 var(--hair-soft)}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; margin-right:auto; min-height:44px}
.brand img{width:42px; height:42px; border-radius:50%; box-shadow:0 0 0 1px var(--hair), 0 0 0 4px rgba(1,26,46,.5), 0 0 0 5px var(--hair-soft)}
.brand-name{font:500 21px/1 var(--serif); letter-spacing:.005em; font-variation-settings:'opsz' 28}
.brand-name i{font-style:italic; color:var(--leaf)}
.brand-sub{display:block; font:400 12.5px/1.2 var(--sans); color:var(--silver); margin-top:5px; letter-spacing:.01em}
.bar-nav{display:flex; align-items:center; gap:30px}
.bar-nav a,.bar-nav button{position:relative; background:none; border:0; padding:10px 0; cursor:pointer; font:500 15px/1 var(--sans); color:rgba(244,239,228,.86); text-decoration:none}
.bar-nav a::after,.bar-nav button::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .bar-nav a:hover::after,.bar-nav button:hover::after{transform:scaleX(1)} .bar-nav a:hover,.bar-nav button:hover{color:var(--paper)} }
.bar-tel{font-variant-numeric:tabular-nums}
.basket-btn{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 8px 0 16px; background:rgba(1,26,46,.45); border:1px solid var(--hair); cursor:pointer; font:600 15px/1 var(--sans); transition:transform .16s var(--ease-out), background-color .2s ease, border-color .2s ease}
.basket-btn svg{width:20px; height:20px}
.basket-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .basket-btn:hover{border-color:var(--gold); background:rgba(3,40,71,.7)} }
.basket-count{min-width:30px; height:30px; padding:0 8px; display:grid; place-items:center; background:var(--gold); color:var(--ink); font:700 14px/1 var(--sans); font-variant-numeric:tabular-nums; overflow:hidden}
.basket-count.bump{animation:bump .5s var(--ease-out)}
@keyframes bump{0%{transform:scale(1)} 30%{transform:scale(1.28)} 100%{transform:scale(1)}}

main{position:relative; z-index:2}

/* ---------- hero ---------- */
.hero{position:relative; height:100svh; min-height:620px}
.hero::before{content:""; position:absolute; inset:auto auto 0 0; width:min(1100px,100%); height:75%; pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 18% 92%, rgba(1,17,31,.72), rgba(1,17,31,0) 70%)}
.sun{position:fixed; z-index:1; left:0; top:0; width:120px; height:120px; perspective:700px; pointer-events:none; will-change:transform; opacity:0}
.sun-tilt{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform}
.sun-face,.sun-edge{position:absolute; inset:0; border-radius:50%}
.sun-edge{background:linear-gradient(135deg,#7a5a1a,#e9cf8f 45%,#8a6a2c 70%,#f0d9a0)}
.sun-face{overflow:hidden; transform:translateZ(5px); box-shadow:0 0 0 1.5px rgba(240,217,160,.85), 0 0 0 5px rgba(1,26,46,.55), 0 0 0 6px rgba(201,164,92,.45), 0 0 90px 16px rgba(224,147,109,.22), 0 0 30px 2px rgba(240,217,160,.25)}
.sun-face img{width:100%; height:100%; object-fit:cover; transform:scale(1.03)}
.sun-sheen{position:absolute; inset:0; border-radius:50%; mix-blend-mode:soft-light; background:radial-gradient(circle at var(--sx,35%) var(--sy,30%), rgba(255,250,230,.95), rgba(255,250,230,0) 45%); transform:translateZ(6px)}

.hero-copy{position:absolute; inset:0; pointer-events:none; will-change:transform,opacity}
.hero-head,.hero-body{position:absolute; left:var(--gut); max-width:840px; pointer-events:auto}
.hero-head{bottom:calc(100% - var(--hz, 60vh) + 4px)}
.hero-body{top:calc(var(--hz, 60vh) + 30px); max-width:640px}
.hero-kicker{display:flex; align-items:center; gap:14px; margin:0 0 22px; font:italic 400 19px/1.3 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18}
.hero-kicker .rule{width:34px; height:1px; background:var(--gold); opacity:.8}
.hero-title{margin:0; font:500 clamp(60px, min(10.2vw, 17.5vh), 172px)/.88 var(--serif); letter-spacing:-.028em; font-variation-settings:'opsz' 96}
.hero-title .ln{display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em}
.hero-title .ln > span{display:inline-block; padding-right:.06em;
  background-image:repeating-linear-gradient(180deg, rgba(1,26,46,0) 0 2.2px, rgba(1,26,46,.34) 2.2px 3.1px), linear-gradient(180deg,#fffaf0 10%,#f3e6c4 62%,#d9b977 112%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateY(108%); transition:transform 1.25s var(--ease-out)}
.hero-title .ln:nth-child(2) > span{transition-delay:.12s}
.hero-title .ln:nth-child(2){padding-left:.62em}
.hero-title em{font-style:italic; font-weight:400}
.is-in .hero-title .ln > span{transform:none}
.hero-lede{margin:0; max-width:31em; font-size:clamp(17px,1.25vw,19px); line-height:1.6; color:rgba(244,239,228,.88)}
.hero-actions{display:flex; align-items:center; gap:26px; margin-top:34px; flex-wrap:wrap}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform 1s var(--ease-out)}
.is-in .reveal{opacity:1; transform:none}
.settled .reveal{transition:none}
.is-in .reveal.d1{transition-delay:.45s} .is-in .reveal.d2{transition-delay:.6s} .is-in .reveal.d3{transition-delay:.75s}

.cta{position:relative; display:inline-flex; align-items:center; gap:14px; height:62px; padding:0 30px 0 32px; text-decoration:none; overflow:hidden; cursor:pointer; border:0;
  background:linear-gradient(180deg,#f0d9a0 0%,#d4b26c 55%,#c39d55 100%); color:#0b1c2a; font:650 17.5px/1 var(--sans); letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 14px 34px -14px rgba(224,180,100,.75), 0 0 0 1px rgba(122,90,26,.6);
  transition:transform .16s var(--ease-out), box-shadow .3s ease}
.cta::before{content:""; position:absolute; inset:5px; border:1px solid rgba(11,28,42,.28); pointer-events:none}
.cta::after{content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); transform:translateX(-120%) skewX(-18deg); pointer-events:none}
.cta svg{width:30px; height:16px; transition:transform .4s var(--ease-out)}
.cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .cta:hover::after{transform:translateX(560%) skewX(-18deg); transition:transform .9s var(--ease-out)}
  .cta:hover svg{transform:translateX(4px)}
}
.cta-inner{display:inline-flex; align-items:center; gap:14px; will-change:transform}
.quiet{background:none; border:0; padding:10px 2px; cursor:pointer; font:500 16px/1.2 var(--sans); color:rgba(244,239,228,.9); text-decoration:underline; text-decoration-color:rgba(201,164,92,.7); text-underline-offset:6px; text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){ .quiet:hover{color:var(--leaf)} }
.cta-note{flex-basis:100%; margin:2px 0 0; font-size:14px; color:var(--silver)}

.awards{position:absolute; right:var(--gut); bottom:clamp(44px, 9vh, 108px); text-align:right; display:grid; gap:18px; padding-right:20px; border-right:1px solid var(--hair); will-change:transform,opacity}
.awards p{margin:0}
.award-t{display:block; font:italic 400 17px/1.25 var(--serif); color:var(--leaf); font-variation-settings:'opsz' 18}
.award-y{display:block; margin-top:6px; font:500 13.5px/1.2 var(--sans); color:var(--silver); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.play-hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); margin:0; display:flex; align-items:center; gap:10px; font:500 13.5px/1 var(--sans); color:var(--silver); transition:opacity .6s ease; white-space:nowrap}
.play-hint i{position:relative; width:18px; height:18px}
.play-hint i::before,.play-hint i::after{content:""; position:absolute; inset:0; border:1px solid var(--gold); border-radius:50%; animation:ring 2.6s var(--ease-out) infinite}
.play-hint i::after{animation-delay:1.3s}
@keyframes ring{0%{transform:scale(.3); opacity:1} 100%{transform:scale(1.6); opacity:0}}
.is-played .play-hint{opacity:0}

/* ---------- the dive (transition) ---------- */
.dive{position:relative; height:58vh; display:grid; place-items:center; padding:0 var(--gut)}
.dive-line{margin:0; max-width:17em; text-align:center; font:italic 400 clamp(30px, 3.7vw, 56px)/1.18 var(--serif); color:var(--paper); font-variation-settings:'opsz' 60; will-change:transform,opacity}
.dive-line span{display:block; font:400 clamp(16px,1.2vw,18px)/1.5 var(--sans); font-style:normal; color:var(--silver); margin-top:20px}


/* ---------- the shop ---------- */
.shop{position:relative; padding:24px var(--gut) 120px}
.shop-inner{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:minmax(360px,5fr) minmax(0,7fr); gap:clamp(32px,5vw,88px); align-items:start}
.dial-col{position:sticky; top:calc(var(--bar-h) + 8px); height:calc(100vh - var(--bar-h) - 24px); display:grid; place-items:center}
.dial-window{position:relative; width:100%; display:grid; place-items:center}
.dial-stage{position:relative; width:min(100%, 600px, calc(100vh - 150px)); aspect-ratio:1; perspective:1500px; touch-action:pan-y; cursor:grab}
.dial-stage.is-drag{cursor:grabbing}
.dial-3d{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform,opacity}
.dial-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.dial-rot{will-change:transform}
.dial-lbl{font:italic 500 17px var(--serif); fill:var(--silver); letter-spacing:.02em; transition:fill .3s ease}
.dial-lbl.is-on{fill:var(--leaf)}
.dial-ico{color:var(--silver); transition:color .3s ease} .dial-ico.is-on{color:var(--leaf)}
.dial-center{position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; text-align:center; pointer-events:none; border-radius:50%}
.dial-center svg{width:56%; height:auto; color:var(--leaf); overflow:visible}
.dial-center .ill path,.dial-center .ill circle,.dial-center .ill ellipse,.dial-center .ill line,.dial-center .ill polyline{stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--ease-io)}
.dial-center.is-drawing .ill *{stroke-dashoffset:1; transition:none}
.dial-name{display:block; margin-top:6px; font:italic 500 clamp(18px,1.7vw,24px)/1.1 var(--serif); color:var(--paper)}
.dial-count{display:block; margin-top:6px; font:500 13px/1 var(--sans); color:var(--silver); font-variant-numeric:tabular-nums}
.dial-tip{position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); margin:0; font:500 13.5px/1.3 var(--sans); color:var(--silver); white-space:nowrap; transition:opacity .4s ease}
.dial-tip.is-gone{opacity:0}

.guide-col{padding-top:clamp(8px, 7vh, 80px); min-width:0}
.steps{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-wrap:wrap; gap:10px 0; counter-reset:s}
.steps li{display:flex; align-items:center; gap:10px; font:500 14.5px/1.2 var(--sans); color:rgba(159,185,196,.85); counter-increment:s}
.steps li::before{content:counter(s); display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--hair); font:600 14px/1 var(--serif); color:var(--silver); transition:background-color .3s ease, color .3s ease}
.steps li + li::after{content:none}
.steps li:not(:last-child){margin-right:12px}
.steps li:not(:last-child)::after{content:""; display:block; order:3; width:36px; height:1px; background:var(--hair-soft); margin-left:2px}
.steps li.is-on{color:var(--paper)} .steps li.is-on::before{background:var(--gold); color:var(--ink); border-color:var(--gold)}
.steps li.is-done::before{background:rgba(201,164,92,.2); color:var(--leaf)}
.shop h2{margin:0; font:500 clamp(42px, 4.8vw, 78px)/.98 var(--serif); letter-spacing:-.022em; font-variation-settings:'opsz' 80}
.guide-text{margin:18px 0 0; max-width:36em; font-size:18px; color:rgba(244,239,228,.84)}
.cats{margin:30px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(178px,1fr)); gap:8px}
.cat{position:relative; display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 14px; text-align:left; cursor:pointer; border:1px solid var(--hair-soft); background:rgba(1,22,40,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font:600 15.5px/1.2 var(--sans); color:var(--paper); transition:transform .16s var(--ease-out), background-color .25s ease, border-color .25s ease, color .25s ease}
.cat svg{flex:none; width:30px; height:30px; color:var(--gold)}
.cat .n{margin-left:auto; font:500 13px/1 var(--sans); color:var(--silver); font-variant-numeric:tabular-nums}
.cat:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .cat:hover{border-color:var(--gold); background:rgba(3,40,71,.8)} }
.cat[aria-checked="true"]{background:linear-gradient(180deg,#f0d9a0,#cfac66); color:var(--ink); border-color:var(--gold)}
.cat[aria-checked="true"] svg{color:var(--ink)} .cat[aria-checked="true"] .n{color:rgba(13,29,41,.7)}

.counter{margin-top:52px; scroll-margin-top:calc(var(--bar-h) + 20px)}
.counter-head{display:flex; align-items:end; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--hair-soft)}
.counter-head h3{margin:0; font:500 clamp(28px,2.6vw,38px)/1.05 var(--serif); letter-spacing:-.01em}
.counter-head p{margin:8px 0 0; max-width:34em; color:var(--silver); font-size:15.5px}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px}
.chip{min-height:40px; padding:0 15px; border:1px solid var(--hair-soft); background:rgba(1,22,40,.55); cursor:pointer; font:500 14.5px/1 var(--sans); color:rgba(244,239,228,.9); transition:transform .16s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--paper); color:var(--ink); border-color:var(--paper)}
@media (hover:hover) and (pointer:fine){ .chip:hover{border-color:var(--gold)} }

.grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(212px,1fr)); gap:16px}
.card{position:relative; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); padding:7px;
  box-shadow:0 24px 44px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(122,90,26,.25);
  opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .6s var(--ease-out)}
.card.in{opacity:1; transform:none; transition-delay:calc(var(--i,0) * 45ms)}
.card::after{content:""; position:absolute; inset:4px; border:1px solid rgba(138,106,44,.38); pointer-events:none}
.card-photo{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2)}
.card-photo img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out), opacity .5s ease; opacity:0}
.card-photo img.ok{opacity:1}
@media (hover:hover) and (pointer:fine){ .card:hover .card-photo img{transform:scale(1.045)} }
.tag{position:absolute; left:8px; top:8px; padding:5px 8px; background:rgba(13,29,41,.82); color:var(--paper); font:600 12px/1 var(--sans); letter-spacing:.02em}
.tag.best{background:var(--gold); color:var(--ink)}
.card-body{display:flex; flex-direction:column; flex:1; padding:12px 9px 9px}
.card-name{margin:0; font:600 15.5px/1.3 var(--sans); min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:8px}
.price{font:600 25px/1 var(--serif); font-variant-numeric:lining-nums; letter-spacing:-.01em}
.card-sub{font-size:13px; color:var(--ink-2)}
.card select{width:100%; margin-top:10px; height:44px; padding:0 10px; border:1px solid rgba(13,29,41,.3); background:#fff; color:var(--ink); font-size:16px; border-radius:0}
.buy{margin-top:auto; padding-top:12px}
.add{position:relative; width:100%; height:48px; border:0; cursor:pointer; background:var(--navy); color:var(--paper); font:600 15.5px/1 var(--sans); display:flex; align-items:center; justify-content:center; gap:10px; overflow:hidden; transition:transform .16s var(--ease-out), background-color .2s ease}
.add svg{width:18px; height:18px}
.add:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .add:hover{background:#0a3a62} }
.add.is-busy{pointer-events:none} .add.is-busy .lbl{opacity:.5}
.stepper{display:grid; grid-template-columns:48px 1fr 48px; height:48px; border:1px solid var(--navy); background:#fff}
.stepper button{border:0; background:none; cursor:pointer; font:500 22px/1 var(--sans); color:var(--navy); transition:background-color .15s ease}
.stepper button:active{background:var(--paper-2)}
.stepper output{display:grid; place-items:center; font:600 14.5px/1.1 var(--sans); color:var(--ink); text-align:center}
.stepper output small{display:block; font-weight:500; font-size:11.5px; color:var(--ink-2)}
.card.skel .card-photo{background:linear-gradient(100deg,#e6ddc9 30%,#f1ebdd 50%,#e6ddc9 70%); background-size:300% 100%; animation:sh 1.4s linear infinite}
.card.skel .card-name{background:#e6ddc9; color:transparent; min-height:1.3em; width:80%}
@keyframes sh{to{background-position:-150% 0}}
.more{display:block; margin:28px auto 0; height:52px; padding:0 30px; border:1px solid var(--gold); background:rgba(1,22,40,.6); cursor:pointer; font:600 15.5px/1 var(--sans); transition:transform .16s var(--ease-out), background-color .2s}
.more:active{transform:scale(.97)} .more[hidden]{display:none}
.note-err{padding:20px; border:1px solid var(--hair); color:var(--paper)}

/* ---------- toast, flying fish ---------- */
.toast{position:fixed; z-index:40; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); width:min(480px, calc(100vw - 24px)); display:flex; align-items:center; gap:14px; padding:12px 12px 12px 12px;
  background:rgba(3,34,60,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--hair); box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  transform:translate(-50%, calc(100% + 40px)); opacity:0; transition:transform .38s var(--ease-drawer), opacity .25s ease; pointer-events:none}
.toast.show{transform:translate(-50%,0); opacity:1; pointer-events:auto}
.toast img{width:54px; height:54px; object-fit:cover; flex:none; background:var(--paper)}
.toast-txt{flex:1; min-width:0}
.toast-txt b{display:block; font:italic 500 17px/1.2 var(--serif); color:var(--leaf)}
.toast-txt span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.35; color:rgba(244,239,228,.86)}
.toast-go{flex:none; height:44px; padding:0 16px; border:0; background:var(--gold); color:var(--ink); font:650 14.5px/1 var(--sans); cursor:pointer}
.toast-x{flex:none; width:40px; height:44px; border:0; background:none; color:var(--silver); cursor:pointer; font-size:22px}
.flyer{position:fixed; z-index:45; left:0; top:0; width:62px; height:auto; pointer-events:none; filter:drop-shadow(0 0 8px rgba(240,217,160,.55))}

/* ---------- dialogs: basket drawer + delivery ---------- */
dialog{color:var(--paper); padding:0; border:0}
dialog::backdrop{background:rgba(1,10,20,.58); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s ease}
dialog.open::backdrop{opacity:1}
.drawer{position:fixed; margin:0; inset:0 0 0 auto; width:min(460px,100vw); height:100dvh; max-height:none; max-width:none;
  background:linear-gradient(180deg,#03294a,#011a2e 60%); border-left:1px solid var(--hair); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .42s var(--ease-drawer)}
.drawer[open]{display:flex}
.drawer.open{transform:none}
.drawer-handle{display:none}
.d-wrap{display:flex; flex-direction:column; flex:1; min-height:0}
.d-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 16px 24px; border-bottom:1px solid var(--hair-soft)}
.d-head h2{margin:0; font:500 30px/1 var(--serif)}
.d-head h2 small{display:block; margin-top:6px; font:500 13.5px/1 var(--sans); color:var(--silver)}
.x{width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--hair-soft); background:none; cursor:pointer; color:var(--paper)}
.x svg{width:18px; height:18px}
.d-body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:8px 24px 24px}
.lines{list-style:none; margin:0; padding:0}
.line{display:grid; grid-template-columns:72px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--hair-soft)}
.line img{width:72px; height:72px; object-fit:cover; background:var(--paper)}
.line h3{margin:0; font:600 15px/1.3 var(--sans)}
.line .v{display:block; margin-top:3px; font-size:13px; color:var(--silver)}
.line-row{display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px}
.line .stepper{grid-template-columns:40px 44px 40px; height:40px; background:none; border-color:var(--hair)}
.line .stepper button{color:var(--paper); font-size:19px}
.line .stepper button:active{background:rgba(255,255,255,.08)}
.line .stepper output{color:var(--paper)}
.line .lp{font:600 19px/1 var(--serif)}
.empty{padding:48px 8px; text-align:center}
.empty svg{width:120px; margin:0 auto 18px; color:var(--gold)}
.empty p{margin:0 0 22px; color:rgba(244,239,228,.85)}
.post{margin-top:22px; padding:18px; border:1px solid var(--hair-soft); background:rgba(1,17,31,.5)}
.post label{display:block; font:italic 500 18px/1.2 var(--serif); color:var(--leaf); margin-bottom:10px}
.post-row{display:flex; gap:8px}
.post input{flex:1; min-width:0; height:48px; padding:0 14px; background:rgba(244,239,228,.06); border:1px solid var(--hair); color:var(--paper); font-size:16px; text-transform:uppercase; border-radius:0}
.post input::placeholder{color:rgba(159,185,196,.7); text-transform:none}
.post button{height:48px; padding:0 18px; border:1px solid var(--gold); background:none; cursor:pointer; font-weight:600}
.post-out{margin:12px 0 0; font-size:15px; line-height:1.5; color:var(--paper); min-height:1.5em}
.post-out b{color:var(--leaf); font-weight:600}
.know{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.know li{display:grid; grid-template-columns:46px 1fr; gap:12px; align-items:center; font-size:14px; color:var(--silver)}
.know svg{width:46px; height:32px; color:var(--gold)}
.know b{display:block; color:var(--paper); font-weight:600; font-size:14.5px}
.d-foot{padding:18px 24px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--hair-soft); background:rgba(1,17,31,.6)}
.sub{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px}
.sub span{font-size:15px; color:var(--silver)} .sub b{font:600 32px/1 var(--serif)}
.d-foot p{margin:0 0 14px; font-size:13.5px; color:var(--silver)}
.cta.wide{width:100%; justify-content:center}
.cta[aria-disabled="true"]{filter:grayscale(.6) brightness(.8); pointer-events:none}

.modal{width:min(680px, calc(100vw - 24px)); max-height:min(88dvh, 820px); margin:auto; background:linear-gradient(180deg,#03294a,#011a2e); border:1px solid var(--hair); box-shadow:0 40px 100px -30px #000;
  opacity:0; transform:translateY(14px) scale(.98); transition:opacity .25s ease, transform .35s var(--ease-out); overflow:auto}
.modal.open{opacity:1; transform:none}
.m-in{padding:30px clamp(20px,4vw,40px) 34px}
.modal h2{margin:0 0 6px; font:500 clamp(32px,4vw,44px)/1 var(--serif)}
.modal .lead{margin:0 0 22px; color:var(--silver)}
.zones{list-style:none; margin:0; padding:0; display:grid; gap:0}
.zone{display:grid; grid-template-columns:64px 1fr; gap:16px; padding:18px 0; border-top:1px solid var(--hair-soft)}
.zone svg{width:64px; height:44px; color:var(--gold)}
.zone h3{margin:0; font:italic 500 21px/1.2 var(--serif); color:var(--leaf)}
.zone p{margin:4px 0 0; color:rgba(244,239,228,.88)}
.m-x{position:absolute; right:14px; top:14px}

/* ---------- footer, motion toggle ---------- */
.foot{position:relative; z-index:2; padding:56px var(--gut) calc(40px + env(safe-area-inset-bottom)); border-top:1px solid var(--hair-soft); background:rgba(1,17,31,.82); display:flex; flex-wrap:wrap; gap:20px 48px; justify-content:space-between; color:var(--silver); font-size:15px}
.foot b{display:block; color:var(--paper); font:500 22px/1.2 var(--serif); margin-bottom:6px}
.foot a{color:var(--paper)}
.motion{position:fixed; z-index:35; right:calc(var(--gut) - 6px); bottom:calc(18px + env(safe-area-inset-bottom)); width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--hair); background:rgba(1,22,40,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; color:var(--leaf); transition:transform .16s var(--ease-out), opacity .3s}
.motion svg{width:16px; height:16px}
.motion[hidden],.rm .play-hint,.no-gl .play-hint{display:none}
.motion:active{transform:scale(.94)}
.motion .tip{position:absolute; right:52px; white-space:nowrap; padding:8px 10px; background:rgba(1,22,40,.92); border:1px solid var(--hair-soft); font:500 13px/1 var(--sans); color:var(--paper); opacity:0; transform:translateX(4px); transition:opacity .15s ease, transform .2s var(--ease-out); pointer-events:none}
@media (hover:hover) and (pointer:fine){ .motion:hover .tip{opacity:1; transform:none} }
.motion:focus-visible .tip{opacity:1; transform:none}
.paused .play-hint i::before,.paused .play-hint i::after{animation:none; opacity:0}

/* ---------- phones: their own choreography ---------- */
@media (max-width: 860px){
  :root{--bar-h:64px}
  .bar{gap:12px}
  .bar-nav{display:none}
  .brand img{width:36px; height:36px}
  .brand-name{font-size:18px} .brand-sub{font-size:12px}
  .basket-btn{height:44px; padding:0 6px 0 12px}
  .basket-btn .lbl{display:none}
  .hero{min-height:560px}
  .hero::before{width:100%; height:80%; background:radial-gradient(ellipse 110% 70% at 30% 100%, rgba(1,17,31,.8), rgba(1,17,31,0) 75%)}
  .hero-copy{inset:calc(var(--hz, 36vh) + 18px) var(--gut) auto var(--gut); display:flex; flex-direction:column}
  .hero-head,.hero-body{position:static}
  .hero-kicker{font-size:16px; margin-bottom:14px; gap:10px}
  .hero-kicker .rule{width:20px}
  .k-long,.s-long{display:none}
  .hero-title{font-size:clamp(50px, 15.2vw, 76px)}
  .hero-title .ln:nth-child(2){padding-left:.4em}
  .hero-lede{margin-top:16px; font-size:16.5px; line-height:1.55}
  .hero-actions{margin-top:22px; gap:10px 18px}
  .cta{height:58px; flex:1 1 100%; justify-content:center}
  .cta-note{display:none}
  .awards{left:var(--gut); right:auto; top:calc(var(--bar-h) + 14px); bottom:auto; text-align:left; border-right:0; border-left:1px solid var(--hair); padding:0 0 0 12px; gap:0}
  .awards p + p{display:none}
  .award-t{font-size:15px} .award-y{font-size:12.5px}
  .play-hint{display:none}
  .dive{height:56vh}
  .shop{padding-top:0}
  .shop-inner{grid-template-columns:minmax(0,1fr); gap:0}
  .dial-col{position:relative; top:auto; height:auto; display:block; margin:0 calc(var(--gut) * -1)}
  .dial-window{height:calc(var(--wheel) * .42); overflow:hidden; display:flex; justify-content:center; align-items:flex-start}
  .dial-window::after{content:""; position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(180deg, rgba(1,26,46,0), rgba(1,26,46,.92)); pointer-events:none; z-index:1}
  .dial-stage{width:var(--wheel); height:var(--wheel); flex:none}
  .dial-center{display:none}
  .dial-tip{bottom:10px; z-index:2; color:var(--paper)}
  .guide-col{padding-top:6px}
  .steps{margin-bottom:18px} .steps li{font-size:13.5px} .steps li:not(:last-child)::after{width:14px}
  .shop h2{font-size:clamp(36px, 10.5vw, 48px)}
  .guide-text{font-size:16.5px; margin-top:12px}
  .cats{position:sticky; top:var(--bar-h); z-index:5; display:flex; overflow-x:auto; scroll-snap-type:x proximity; gap:8px; margin:18px calc(var(--gut) * -1) 0; padding:10px var(--gut); background:rgba(1,22,40,.96); scrollbar-width:none; overscroll-behavior-x:contain; box-shadow:0 1px 0 var(--hair-soft)}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:none; scroll-snap-align:start; min-height:46px; padding:6px 12px; font-size:15px; gap:8px; background:rgba(1,22,40,.6)}
  .cat svg{width:24px; height:24px} .cat .n{display:none}
  .counter{margin-top:26px; scroll-margin-top:calc(var(--bar-h) + 76px)}
  .counter-head p{font-size:15px}
  .filters{flex-wrap:nowrap; overflow-x:auto; margin:14px calc(var(--gut) * -1) 16px; padding:0 var(--gut); scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .grid{grid-template-columns:1fr 1fr; gap:10px}
  .card{padding:5px} .card::after{inset:3px}
  .card-body{padding:10px 6px 6px}
  .card-name{font-size:14.5px}
  .price{font-size:22px}
  .add{height:46px; font-size:14.5px; gap:6px} .add svg{display:none}
  .stepper{grid-template-columns:44px 1fr 44px; height:46px}
  .stepper output small{display:none}
  .drawer{inset:auto 0 0 0; width:100%; height:auto; max-height:90dvh; border-left:0; border-top:1px solid var(--hair); transform:translateY(100%)}
  .drawer-handle{display:block; position:absolute; left:50%; top:8px; width:44px; height:4px; margin-left:-22px; background:rgba(201,164,92,.5)}
  .d-head{padding:22px 16px 14px 20px; touch-action:none}
  .d-body{padding:4px 20px 20px}
  .d-foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom))}
  .motion{bottom:calc(14px + env(safe-area-inset-bottom)); right:12px; opacity:.85}
  .toast{bottom:calc(12px + env(safe-area-inset-bottom))}
  .toast-go{padding:0 12px}
  .toast{gap:10px; padding:10px}
  .toast img{width:44px; height:44px}
  .toast-txt b{font-size:16px; white-space:nowrap}
  .toast-txt span{font-size:13.5px}
  .toast-x{width:32px}
}

/* ---------- reduced motion: still, fully drawn, instant ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-title .ln > span,.reveal{transform:none!important; transition:opacity .3s ease!important}
  .card{transform:none!important; transition:opacity .2s ease!important}
  .toast{transition:opacity .2s ease!important}
  .drawer{transition:opacity .2s ease!important; transform:none!important; opacity:0} .drawer.open{opacity:1}
  .modal{transform:none!important}
  .play-hint i::before,.play-hint i::after{animation:none; opacity:.6}
  .dial-center .ill *{transition:none!important}
  .card.skel .card-photo{animation:none}
  .basket-count.bump{animation:none}
}
/* the same still version, previewable with ?motion=reduced */
.rm .hero-title .ln > span,.rm .reveal{transform:none!important; transition:opacity .3s ease!important}
.rm .card{transform:none!important; transition:opacity .2s ease!important}
.rm .toast{transition:opacity .2s ease!important}
.rm .drawer{transition:opacity .2s ease!important; transform:none!important; opacity:0}
.rm .drawer.open{opacity:1}
.rm .modal{transform:none!important}
.rm .play-hint i::before,.rm .play-hint i::after{animation:none; opacity:.6}
.rm .dial-center .ill *{transition:none!important}
.rm .card.skel .card-photo{animation:none}
.rm .basket-count.bump{animation:none}
@media (prefers-contrast: more){
  .cat,.chip,.basket-btn{border-color:var(--gold)} .hero-lede,.guide-text{color:var(--paper)}
}


/* ================= Round 2: the engraver's finish ================= */
:root{
  --tex-guil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-opacity='.11' stroke-width='.6'%3E%3Cpath d='M0 12Q15 2 30 12T60 12T90 12T120 12'/%3E%3Cpath d='M0 12Q15 22 30 12T60 12T90 12T120 12'/%3E%3Cpath d='M0 6Q15 -4 30 6T60 6T90 6T120 6'/%3E%3Cpath d='M0 18Q15 28 30 18T60 18T90 18T120 18'/%3E%3C/g%3E%3C/svg%3E");
  --tex-hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M-1 6L6 -1' stroke='%23c9a45c' stroke-opacity='.08' stroke-width='.7'/%3E%3C/svg%3E");
  --tex-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M-1 5L5 -1' stroke='%230d1d29' stroke-opacity='.045' stroke-width='.6'/%3E%3C/svg%3E");
  --cg:url(art/corner-g-tl.webp) left 5px top 5px/22px no-repeat, url(art/corner-g-tr.webp) right 5px top 5px/22px no-repeat, url(art/corner-g-bl.webp) left 5px bottom 5px/22px no-repeat, url(art/corner-g-br.webp) right 5px bottom 5px/22px no-repeat;
  --cd:url(art/corner-d-tl.webp) left 0 top 0/30px no-repeat, url(art/corner-d-tr.webp) right 0 top 0/30px no-repeat, url(art/corner-d-bl.webp) left 0 bottom 0/30px no-repeat, url(art/corner-d-br.webp) right 0 bottom 0/30px no-repeat;
  --rule-orn:radial-gradient(circle, var(--gold) 0 2px, transparent 2.6px) center/9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(201,164,92,.85) 30%, rgba(201,164,92,.85) 70%, transparent) center/100% 1px no-repeat;
}
/* engraved plate: guilloche ground, double rule, corner mounts */
.plate{background:var(--cg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.9), rgba(1,24,43,.95)); border:1px solid rgba(201,164,92,.55);
  box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.28), 0 30px 60px -30px rgba(0,0,0,.9)}

/* header */
.bar.is-solid{background:var(--tex-guil), rgba(1,22,40,.78)}
.bar::after{content:""; position:absolute; left:var(--gut); right:var(--gut); bottom:-5px; height:9px; background:var(--rule-orn); opacity:0; transition:opacity .35s ease}
.bar.is-solid{box-shadow:none} .bar.is-solid::after{opacity:1}
.bar-tel{display:inline-flex; align-items:center; gap:8px}
.bar-tel svg{width:17px; height:17px; color:var(--gold)}
.brand img{box-shadow:0 0 0 1px var(--gold), 0 0 0 3px rgba(1,26,46,.8), 0 0 0 4px var(--hair), 0 0 0 7px rgba(1,26,46,.5), 0 0 0 8px var(--hair-soft)}
.basket-btn{background:var(--tex-hatch), rgba(1,26,46,.55); box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px var(--hair-soft)}
.basket-btn svg{width:24px; height:24px}
.basket-count{border-radius:50%; min-width:32px; height:32px; background:radial-gradient(circle at 35% 30%, #f6e2ac, #c9a45c 60%, #8a6a2c); box-shadow:inset 0 0 0 1.5px rgba(11,28,42,.35), inset 0 0 0 3px rgba(246,226,172,.6); font-family:var(--serif); font-size:15px}

/* hero */
.k-orn{height:15px; width:auto; opacity:.95}
.cta{background:var(--tex-hatch), linear-gradient(180deg,#f3dda2 0%,#d4b26c 55%,#bf9850 100%)}
.cta::before{inset:5px; border:1px solid rgba(11,28,42,.32); box-shadow:inset 0 0 0 2px rgba(255,248,226,.35)}
.cta-fish{width:46px; height:auto; transition:transform .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .cta:hover .cta-fish{transform:translateX(5px)} }
.awards{border-right:0; padding-right:74px}
.aw-laurel{position:absolute; right:0; top:50%; width:62px; height:auto; transform:translateY(-50%)}
.boat{position:fixed; z-index:1; left:0; top:0; width:84px; height:auto; pointer-events:none; opacity:0; will-change:transform,opacity; filter:drop-shadow(0 0 6px rgba(1,26,46,.8))}
.dive-orn{display:block; width:260px; height:auto; margin:22px auto 4px; opacity:.85}

/* shop headings */
.h-orn{display:block; width:210px; height:auto; margin:16px 0 0 -8px; opacity:.9}
.counter-head{align-items:center; justify-content:flex-start; border-bottom:0; padding-bottom:20px; position:relative}
.counter-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:9px; background:var(--rule-orn)}
.ch-art{width:86px; height:86px; border-radius:50%; padding:8px; object-fit:contain; background:radial-gradient(circle,#063257,#011a2e 70%); box-shadow:0 0 0 1px var(--gold), 0 0 0 4px rgba(1,22,40,.9), 0 0 0 5px var(--hair), 0 10px 26px -10px #000; transition:opacity .3s ease}
.ch-art.swap{opacity:0}
.counter-head h3{font-size:clamp(30px,2.8vw,42px)}

/* steps: three engraved roundels joined by ornamented rules */
.steps{gap:12px 0; align-items:center}
.steps li{gap:12px; color:rgba(159,185,196,.9)}
.steps li::before{content:none}
.steps li:not(:last-child)::after{width:44px; height:9px; margin:0 6px; background:var(--rule-orn); opacity:.7}
.st-art{width:50px; height:50px; flex:none; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#063257,#011a2e 72%);
  box-shadow:0 0 0 1px var(--hair), 0 0 0 4px rgba(1,22,40,.85), 0 0 0 5px var(--hair-soft); transition:box-shadow .35s ease}
.st-art img{width:auto; height:36px; max-width:38px; object-fit:contain; opacity:.55; transition:opacity .35s ease}
.st-t{font:500 14.5px/1.2 var(--sans)} .st-t i{font:italic 500 16px/1 var(--serif); color:var(--gold); margin-right:2px}
.steps li.is-on .st-art{box-shadow:0 0 0 1px var(--leaf), 0 0 0 4px rgba(1,22,40,.85), 0 0 0 5px var(--gold), 0 0 22px rgba(240,217,160,.35)}
.steps li.is-on .st-art img,.steps li.is-done .st-art img{opacity:1}
.steps li.is-done .st-art{box-shadow:0 0 0 1px var(--gold), 0 0 0 4px rgba(1,22,40,.85), 0 0 0 5px var(--hair)}
.steps li.is-on{color:var(--paper)}

/* category plaques */
.cats{grid-template-columns:repeat(auto-fill, minmax(212px,1fr)); gap:10px}
.cat{min-height:82px; padding:10px 16px 10px 10px; gap:14px; background:var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.86), rgba(1,22,40,.92)); border:1px solid rgba(201,164,92,.4);
  box-shadow:inset 0 0 0 3px rgba(1,22,40,.8), inset 0 0 0 4px rgba(201,164,92,.18)}
.cat-med{flex:none; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#073660,#011a2e 72%);
  box-shadow:0 0 0 1px var(--gold), 0 0 0 3px rgba(1,22,40,.9), 0 0 0 4px var(--hair-soft)}
.cat-med img{width:50px; height:50px; object-fit:contain}
.cat-txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.cat-name{font:500 18px/1.1 var(--serif); letter-spacing:.005em}
.cat .n{margin:0; font:500 12.5px/1 var(--sans); color:var(--silver); font-variant-numeric:oldstyle-nums}
.cat[aria-checked="true"]{background:var(--tex-hatch), linear-gradient(180deg,#f3dda2,#d1ad66 60%,#bd964d); border-color:#8a6a2c; box-shadow:inset 0 0 0 3px rgba(246,226,172,.55), inset 0 0 0 4px rgba(11,28,42,.35), 0 12px 30px -14px rgba(224,180,100,.6)}
.cat[aria-checked="true"] .cat-med{box-shadow:0 0 0 1px #0b1c2a, 0 0 0 3px rgba(246,226,172,.8), 0 0 0 4px rgba(11,28,42,.45)}
.cat[aria-checked="true"] .n{color:rgba(13,29,41,.75)}

/* chips */
.chip{display:inline-flex; align-items:center; gap:8px; box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px rgba(201,164,92,.16); background:var(--tex-hatch), rgba(1,22,40,.6)}
.chip::before{content:""; width:6px; height:6px; transform:rotate(45deg); border:1px solid var(--gold); flex:none}
.chip[aria-pressed="true"]{background:var(--tex-paper), #f4efe4; box-shadow:inset 0 0 0 3px #f4efe4, inset 0 0 0 4px rgba(138,106,44,.5)}
.chip[aria-pressed="true"]::before{background:#8a6a2c; border-color:#8a6a2c}

/* product cards: engraved labels with ornamental photo mounts */
.grid{gap:20px}
.card{padding:14px; background:var(--tex-paper), radial-gradient(130% 90% at 50% 0%, #fdf9f0, #efe5cf); box-shadow:0 0 0 1px #8a6a2c, 0 28px 50px -30px rgba(0,0,0,.95), 0 2px 0 rgba(255,255,255,.1)}
.card::after{inset:5px; border:1px solid rgba(138,106,44,.55); box-shadow:inset 0 0 0 2px rgba(253,249,240,.8), inset 0 0 0 3px rgba(138,106,44,.22)}
.card::before{content:""; position:absolute; inset:3px; z-index:2; pointer-events:none; background:var(--cd)}
.card-photo{box-shadow:0 0 0 1px rgba(138,106,44,.65), 0 0 0 4px #f6efe0, 0 0 0 5px rgba(138,106,44,.3)}
.card-photo::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 30px rgba(70,46,10,.22)}
.card-body{padding:14px 4px 2px}
.card-name{font-size:15.5px; letter-spacing:.003em}
.card-rule{display:block; width:72px; height:9px; margin:8px 0 2px; background:radial-gradient(circle, #8a6a2c 0 2px, transparent 2.6px) left 30px center/9px 9px no-repeat, linear-gradient(90deg, rgba(138,106,44,.8), rgba(138,106,44,0)) left center/100% 1px no-repeat}
.price{font-size:27px}
.tag{left:10px; top:10px; padding:6px 14px 6px 9px; font:600 11.5px/1 var(--sans); letter-spacing:.06em; font-variant:small-caps; text-transform:lowercase; clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%); background:#0b2440; color:var(--leaf); box-shadow:inset 0 0 0 1px rgba(201,164,92,.5)}
.tag.best{background:linear-gradient(180deg,#f3dda2,#c9a45c); color:#0b1c2a}
.add{background:var(--tex-hatch), linear-gradient(180deg,#0a3a62,#032847); box-shadow:inset 0 0 0 1px rgba(201,164,92,.6), inset 0 0 0 3px #032847, inset 0 0 0 4px rgba(201,164,92,.25); letter-spacing:.01em}
.add svg{width:20px; height:20px}
@media (hover:hover) and (pointer:fine){ .add:hover{background:var(--tex-hatch), linear-gradient(180deg,#0d4675,#063258)} }
.stepper{border-color:#8a6a2c; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(138,106,44,.3)}
.stepper button{font:500 24px/1 var(--sans); color:#3a2a0b}
.line .stepper{border-color:rgba(201,164,92,.7); box-shadow:inset 0 0 0 2px rgba(1,22,40,.9), inset 0 0 0 3px var(--hair-soft)}
.line .stepper button{color:var(--leaf)}
.stepper output{font-family:var(--serif); font-size:17px}
.more{background:var(--tex-guil), rgba(1,22,40,.7); box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px var(--hair-soft)}

/* toast */
.toast{background:var(--cg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.97), rgba(1,24,43,.97)); box-shadow:inset 0 0 0 4px rgba(1,22,40,.75), inset 0 0 0 5px rgba(201,164,92,.3), 0 30px 70px -24px #000; padding:16px 16px 16px 18px}
.toast img{box-shadow:0 0 0 1px var(--gold), 0 0 0 3px rgba(1,22,40,.9), 0 0 0 4px var(--hair)}
.toast-go{background:linear-gradient(180deg,#f3dda2,#c9a45c); box-shadow:inset 0 0 0 1px rgba(11,28,42,.3), inset 0 0 0 3px rgba(246,226,172,.5)}

/* drawer */
.drawer{background:var(--tex-guil), linear-gradient(180deg,#03294a,#011a2e 60%); box-shadow:-30px 0 80px -20px #000}
.drawer::before{content:""; position:absolute; inset:8px; border:1px solid rgba(201,164,92,.22); pointer-events:none; background:var(--cg)}
.d-head{border-bottom:0; position:relative}
.d-head::after{content:""; position:absolute; left:24px; right:24px; bottom:0; height:9px; background:var(--rule-orn); opacity:.7}
.d-head{padding:30px 22px 18px 36px}
.d-body{padding-left:30px; padding-right:30px}
.d-orn{display:block; width:120px; height:auto; margin:6px 0 2px -4px; opacity:.85}
.line{border-bottom:0; position:relative}
.line::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(201,164,92,.4), rgba(201,164,92,.05))}
.line img{box-shadow:0 0 0 1px var(--gold), 0 0 0 3px rgba(1,22,40,.9), 0 0 0 4px var(--hair)}
.line h3{font:500 16.5px/1.25 var(--serif)}
.empty-art{width:170px; height:auto; margin:0 auto 18px; display:block}
.post{background:var(--cg), var(--tex-hatch), rgba(1,17,31,.55); box-shadow:inset 0 0 0 3px rgba(1,17,31,.8), inset 0 0 0 4px var(--hair-soft); padding:28px 30px}
.know li{grid-template-columns:70px 1fr}
.know img{width:70px; height:46px; object-fit:contain}
.d-foot{background:var(--tex-guil), rgba(1,17,31,.75); border-top:0; position:relative; padding-left:30px; padding-right:30px; padding-bottom:calc(26px + env(safe-area-inset-bottom))}
.d-foot::before{content:""; position:absolute; left:24px; right:24px; top:-4px; height:9px; background:var(--rule-orn); opacity:.7}
.sub b{font-size:34px}

/* delivery dialog */
.modal{background:var(--cg), var(--tex-guil), linear-gradient(180deg,#03294a,#011a2e); box-shadow:inset 0 0 0 5px rgba(1,22,40,.85), inset 0 0 0 6px rgba(201,164,92,.3), 0 40px 100px -30px #000}
.m-vignette{display:block; width:min(100%,520px); height:auto; margin:-6px auto 14px; -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent)}
.modal h2{text-align:center} .modal .h-orn{margin:12px auto 0} .modal .lead{text-align:center}
.zone{grid-template-columns:96px 1fr; align-items:center; border-top:0; position:relative}
.zone::before{content:""; position:absolute; left:0; right:0; top:0; height:9px; margin-top:-4px; background:var(--rule-orn); opacity:.55}
.zone img{width:96px; height:62px; object-fit:contain}

/* motion button */
.motion{box-shadow:inset 0 0 0 3px rgba(1,22,40,.85), inset 0 0 0 4px var(--hair-soft)}
.motion svg{width:18px; height:18px}

@media (max-width: 860px){
  .awards{padding-right:0; padding-left:12px} .aw-laurel{display:none}
  .boat{width:54px}
  .st-art{width:32px; height:32px} .st-art img{height:23px; max-width:24px}
  .st-t i{display:none}
  .counter-head{flex-wrap:nowrap; gap:14px}
  .steps{flex-wrap:nowrap} .steps li{gap:6px; font-size:13.5px} .steps li:not(:last-child){margin-right:0} .steps li:not(:last-child)::after{width:12px; margin:0 3px}
  .st-t{font-size:13.5px; white-space:nowrap}
  .h-orn{width:170px}
  .cat{min-height:56px; padding:6px 14px 6px 6px; gap:10px}
  .cat-med{width:42px; height:42px} .cat-med img{width:34px; height:34px}
  .cat-name{font-size:16.5px} .cat .n{display:none}
  .ch-art{width:56px; height:56px; padding:5px; flex:none}
  .card{padding:10px} .card::before{background:url(art/corner-d-tl.webp) left 0 top 0/22px no-repeat, url(art/corner-d-tr.webp) right 0 top 0/22px no-repeat, url(art/corner-d-bl.webp) left 0 bottom 0/22px no-repeat, url(art/corner-d-br.webp) right 0 bottom 0/22px no-repeat}
  .card-body{padding:12px 2px 2px} .price{font-size:23px}
  .drawer::before{inset:6px}
  .d-head{padding:26px 16px 14px 28px} .d-body{padding-left:24px; padding-right:24px} .d-foot{padding-left:24px; padding-right:24px} .post{padding:24px 22px}
  .zone{grid-template-columns:72px 1fr} .zone img{width:72px}
}
/* the dial centre: an engraved medallion revealed like a plate being wiped */
.dial-center .dc-art{display:block; width:62%; height:auto; margin:0 auto; clip-path:circle(75% at 50% 50%); opacity:1; filter:none; transition:clip-path 1s var(--ease-io), opacity .6s ease, filter .8s ease}
.dial-center.is-drawing .dc-art{clip-path:circle(0% at 50% 50%); opacity:0; filter:blur(4px); transition:none}
.dial-name{font-size:clamp(17px,1.5vw,22px); margin-top:2px}
.dial-count{font-variant-numeric:oldstyle-nums}
.rm .dial-center .dc-art{transition:none}
/* the hero is framed like a banknote */
.hero-frame{position:absolute; inset:calc(var(--bar-h) + 6px) 14px 14px; pointer-events:none; border:1px solid rgba(201,164,92,.3);
  box-shadow:inset 0 0 0 4px rgba(1,22,40,.0), inset 0 0 0 5px rgba(201,164,92,.16);
  background:url(art/corner-g-tl.webp) left 8px top 8px/46px no-repeat, url(art/corner-g-tr.webp) right 8px top 8px/46px no-repeat, url(art/corner-g-bl.webp) left 8px bottom 8px/46px no-repeat, url(art/corner-g-br.webp) right 8px bottom 8px/46px no-repeat;
  opacity:.85; will-change:opacity}
@media (max-width:860px){ .hero-frame{inset:calc(var(--bar-h) + 4px) 8px 8px; background-size:30px,30px,30px,30px; background-position:left 5px top 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px} }
/* ================= Round 3: one plate, one ink ================= */
/* a shared paper grain over the whole page, so art, type and water read as one print */
body::before{content:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .86 0 0 0 0 .64 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
/* engraved art is inked into its roundel, never stuck on: soft edges, a touch of plate tone */
.cat-med img,.toast img{-webkit-mask-image:radial-gradient(circle closest-side, #000 74%, transparent 100%); mask-image:radial-gradient(circle closest-side, #000 74%, transparent 100%)}
.st-art img{filter:drop-shadow(0 0 3px rgba(1,22,40,.9))}
.cat-med,.st-art,.ch-art{position:relative; overflow:hidden}
.cat-med::after,.ch-art-wrap::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,244,214,.38) 50%, transparent 62%) 0 0/250% 100% no-repeat; mix-blend-mode:screen;
  animation:glint 7.5s var(--ease-io) infinite; animation-delay:calc(var(--gi,0) * 1.1s)}
@keyframes glint{0%,62%{background-position:130% 0} 100%{background-position:-60% 0}}
.cat-med img,.dc-art{filter:sepia(.08) contrast(1.04)}
.dial-center .dc-art{-webkit-mask-image:radial-gradient(circle closest-side, #000 70%, transparent 100%); mask-image:radial-gradient(circle closest-side, #000 70%, transparent 100%); animation:breathe 6s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)} to{transform:scale(1.025)}}
/* a slow sheen travelling round the rope */
.dial-glint{position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:conic-gradient(from 0deg, transparent 0 300deg, rgba(255,238,196,.55) 330deg, transparent 352deg);
  -webkit-mask-image:radial-gradient(circle closest-side, transparent 72%, #000 73.5%, #000 93%, transparent 95%); mask-image:radial-gradient(circle closest-side, transparent 72%, #000 73.5%, #000 93%, transparent 95%);
  animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.paused .cat-med::after,.paused .dial-glint,.paused .dial-center .dc-art{animation-play-state:paused}
.rm .cat-med::after,.rm .dial-glint,.rm .dial-center .dc-art{animation:none}
@media (prefers-reduced-motion: reduce){ .cat-med::after,.dial-glint,.dial-center .dc-art{animation:none} }
/* plaques and cards answer the pointer with a lift, presses settle */
@media (hover:hover) and (pointer:fine){
  .cat:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 3px rgba(1,22,40,.8), inset 0 0 0 4px rgba(201,164,92,.3), 0 14px 30px -18px rgba(0,0,0,.9)}
  .card:hover{transform:translateY(-3px); box-shadow:0 0 0 1px #8a6a2c, 0 36px 60px -30px rgba(0,0,0,.95)}
}
.card.in{transition:opacity .45s ease, transform .5s var(--ease-out), box-shadow .4s ease}
.cat{transition:transform .25s var(--ease-out), background-color .25s ease, border-color .25s ease, box-shadow .3s ease}
.cat:active{transform:scale(.98)}
/* ================= Round 3b: critic fixes ================= */
:root{--tex-grain: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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .86 0 0 0 0 .64 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
/* grain as a plain background layer (normal blend) on the panels, not a full-screen blend */
.modal,.toast{background:var(--tex-grain), var(--cg), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.97), rgba(1,24,43,.98))}
.drawer{background:var(--tex-grain), var(--tex-guil), linear-gradient(180deg,#03294a,#011a2e 60%)}
.cat{background-image:var(--tex-grain), var(--tex-guil), linear-gradient(180deg, rgba(4,44,78,.92), rgba(1,22,40,.95))}
.cat[aria-checked="true"]{background-image:var(--tex-hatch), linear-gradient(180deg,#f3dda2,#d1ad66 60%,#bd964d)}
.card{background-image:var(--tex-paper), radial-gradient(130% 90% at 50% 0%, #fdf9f0, #efe5cf)}
/* no backdrop blur over the live canvas: opaque panels instead */
.cat{-webkit-backdrop-filter:none; backdrop-filter:none}
.bar.is-solid{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--tex-guil), rgba(1,22,40,.94)}
.motion,.toast{-webkit-backdrop-filter:none; backdrop-filter:none}
.motion{background:rgba(1,22,40,.9)}
/* the dial never selects text while you turn it */
.dial-stage,.dial-stage *{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
/* Bodoni hairlines that survive standard screens */
.hero-title,.shop h2,.modal h2,.dive-line,.counter-head h3,.d-head h2{font-variation-settings:'opsz' 40}
.hero-title .ln > span{-webkit-text-stroke:.6px rgba(231,207,149,.95); paint-order:stroke fill}
@media (min-resolution: 2dppx){ .hero-title{font-variation-settings:'opsz' 96} .shop h2{font-variation-settings:'opsz' 80} .modal h2,.counter-head h3,.d-head h2{font-variation-settings:'opsz' 72} }
/* toast: on desktop it lands under the basket, where the gold fish flies */
@media (min-width: 861px){
  .toast{left:auto; right:24px; top:84px; bottom:auto; width:380px; transform:translateY(-14px); opacity:0}
  .toast.show{transform:none}
  .toast{width:400px} .toast-txt b{white-space:nowrap}
}
@media (max-width: 860px){ .grid.toast-pad{padding-bottom:96px} }
/* the hint stays readable over the sun path */
.play-hint{text-shadow:0 0 6px #011a2e, 0 0 12px #011a2e}
/* tap targets: 44 px minimum */
.chip,.quiet,.more{min-height:44px}
.quiet{display:inline-flex; align-items:center}
.toast-x{min-width:44px}
.line .stepper{grid-template-columns:44px 44px 44px; height:44px}
.foot a{display:inline-block; padding:12px 0}
/* delivery dialog: the tool first, the details at a glance beneath */
.m-vignette{max-height:150px; width:auto; max-width:100%; object-fit:contain}
.modal .post{margin:18px 0 6px}
@media (max-width: 860px){
  .chip{min-height:44px}
  .dial-window{-webkit-mask-image:linear-gradient(#000 0 70%, transparent); mask-image:linear-gradient(#000 0 70%, transparent); height:calc(var(--wheel) * .46); padding-top:8px}
  .dial-window::after{content:none}
  .dial-tip{bottom:calc(30% + 2px); color:var(--paper); text-shadow:0 0 8px #011a2e, 0 0 14px #011a2e}
  .dial-tip.is-under{opacity:0}
}
/* round 3c */
.bar.is-solid{background:var(--tex-guil), rgba(1,22,40,.95)}
:root{--tex-grain: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='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .86 0 0 0 0 .64 0 0 0 .25 -.06'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.line .stepper{grid-template-rows:44px; height:auto}