/* OHANA'S WEBSITE — the look of the menu and of the till's screen (sand, arch, leaves, cut-out plates, Bricolage), made to be
   walked through. His words: "molto vivido, molto rilassante, molto Ohana … colori sgargianti … elegante e moderno … effetto
   wow". And his older ones, which still hold: nothing square, everything rounded with arches, chips never cut, air around.
   Each band has its own ground, so the page changes colour as it turns, like the slides. Checked at 375 px. */
:root{
  --sand:#F6EEDF; --cream:#FFFDF9; --ink:#3B2A20; --brown:#4B3327; --teal:#1B5262; --teal2:#2E7185; --sun:#EFBF58; --gold:#E8B44C;
  --coral:#DC5A2B; --foam:#D6E9EC; --night:#21140E; --leaf:#2F6B3A;
  --display:"Bricolage Grotesque",Inter,system-ui,sans-serif; --body:Inter,system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:44px; --gap:14px; --pad:clamp(22px,5.2vw,84px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--sand);font-size:17px;line-height:1.55;overflow-x:hidden;
  background-image:radial-gradient(90% 60% at 15% 0%,#FCF7EF,transparent 70%),radial-gradient(80% 50% at 100% 30%,#F2E3CB,transparent 70%)}
img{max-width:100%;display:block}
a{color:inherit}
main{display:flex;flex-direction:column;gap:var(--gap);padding:92px var(--gap) var(--gap)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.028em;line-height:1.02;text-wrap:balance;font-weight:700}
h1{font-size:clamp(44px,8.2vw,112px)}
h2{font-size:clamp(34px,5.2vw,68px)}
h3{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.015em;line-height:1.12}
p{max-width:62ch;text-wrap:pretty}
u{text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c40-6 78-7 120-4s92 5 174-2' fill='none' stroke='%23E8B44C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .2em;padding-bottom:.08em}
.kick{font-family:var(--mono);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--kick);margin-bottom:18px;max-width:none}
.kick a{text-decoration:none;border-bottom:1px solid currentColor}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.5;color:var(--soft);margin-top:20px}
.fine{font-size:14px;color:var(--soft);margin-top:18px;max-width:78ch}
.price mark.tc{font-family:var(--body);font-size:12px;vertical-align:middle;letter-spacing:0}
mark.tc{background:#FFE08A;color:#5A3A00;border-radius:999px;padding:.1em .6em;font-size:.82em;font-weight:600;white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ── the grounds ── */
.band{position:relative;border-radius:var(--r);padding:clamp(40px,7vw,104px) var(--pad);overflow:hidden;color:var(--ink);background:var(--ground);isolation:isolate}
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.sand{--ink:#3B2A20;--soft:rgba(59,42,32,.8);--kick:#2E7185;--card:#FFFDF9;--ground:radial-gradient(120% 100% at 20% 10%,#FFFBF4,#F5EBDA 62%,#EDDEC7)}
.tide{--ink:#FFFDF9;--soft:rgba(255,253,249,.86);--kick:#9FD0DA;--card:rgba(255,255,255,.1);--ground:radial-gradient(120% 110% at 18% 8%,#2B7890,#1B5262 55%,#0F3A47)}
.sun{--ink:#3B2A20;--soft:rgba(59,42,32,.84);--kick:#7A3A1A;--card:rgba(255,253,249,.6);--ground:radial-gradient(110% 110% at 80% 15%,#FBE2A2,#F1C25C 58%,#E5AA3C)}
.foam{--ink:#173F4B;--soft:rgba(23,63,75,.84);--kick:#2E7185;--card:#FFFDF9;--ground:radial-gradient(120% 110% at 75% 12%,#F4FAFA,#D8EBEE 60%,#BEDDE3)}
.coral{--ink:#FFFDF9;--soft:rgba(255,253,249,.94);--kick:#FFE3B0;--card:rgba(255,255,255,.14);--ground:radial-gradient(120% 115% at 18% 8%,#F58444,#DC5A2B 52%,#BC4320)}
.night{--ink:#FFF6E8;--soft:rgba(255,246,232,.84);--kick:#F2B25C;--card:rgba(255,246,232,.08);--ground:radial-gradient(80% 90% at 74% 60%,#7A3A17 0%,#3F2315 40%,#21140E 80%)}
.band{color:var(--ink)} .band p{color:var(--soft)} .band h1,.band h2,.band h3,.band strong{color:var(--ink)}

/* ── the top bar ── */
.bar{position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - 28px));display:flex;align-items:center;gap:8px;
  padding:9px 10px 9px 22px;border-radius:999px;background:rgba(255,253,249,.9);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 10px 34px rgba(59,42,32,.14),0 1px 0 rgba(255,255,255,.8) inset}
.wm{display:block;width:118px;aspect-ratio:4138/898;background:var(--brown);-webkit-mask:url(img/wordmark.svg) center/contain no-repeat;mask:url(img/wordmark.svg) center/contain no-repeat}
.wm.light{background:#FFF6E8;width:150px}
.mark{margin-right:auto;display:block;padding:6px 0}
.links{display:flex;gap:2px}
.links a{font-size:14.5px;font-weight:600;text-decoration:none;padding:9px 13px;border-radius:999px;color:var(--ink);white-space:nowrap}
.links a:hover,.links a[aria-current]{background:#F2E7D6}
.more-nav{position:relative}
.more-nav summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:999px;display:grid;place-content:center;gap:5px;background:#F2E7D6}
.more-nav summary::-webkit-details-marker{display:none}
.more-nav summary span{display:block;width:18px;height:2px;border-radius:2px;background:var(--brown)}
.more-nav nav{position:absolute;right:0;top:56px;width:min(300px,82vw);background:var(--cream);border-radius:28px;padding:12px;box-shadow:0 22px 60px rgba(59,42,32,.26);display:grid}
.more-nav nav a{padding:11px 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15.5px}
.more-nav nav a:hover{background:#F2E7D6}
.draft{position:fixed;z-index:60;left:14px;top:80px;background:#3B2A20;color:#FFE08A;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* ── buttons, chips, ticks ── */
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:16.5px;text-decoration:none;line-height:1.15;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.btn.main{background:#3B2A20;color:#FFFDF9;box-shadow:0 12px 28px rgba(33,20,14,.28)}
.tide .btn.main,.coral .btn.main,.night .btn.main{background:#F2B94F;color:#2A1B12;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.btn.soft{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px currentColor}
.btn.small{min-height:44px;padding:11px 18px;font-size:14.5px;box-shadow:none}
.btn.mini{min-height:40px;padding:9px 16px;font-size:14px;background:#3B2A20;color:#FFFDF9;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #E8B44C;outline-offset:3px}
.btn.wa::before{content:"";width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--wa) center/contain no-repeat;mask:var(--wa) center/contain no-repeat;
  --wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2a9.7 9.7 0 0 0-8.3 14.8L2.2 21.8l5-1.4A9.7 9.7 0 1 0 12 2.2Zm0 1.9a7.8 7.8 0 1 1-4 14.5l-.3-.2-2.8.8.8-2.7-.2-.3A7.8 7.8 0 0 1 12 4.1Zm-3 3.8c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.300s1 2.700 1.200 2.900c.1.2 2 3.200 5 4.300 2.400.9 2.900.7 3.400.7.500-.1 1.700-.7 1.900-1.400.2-.6.2-1.200.2-1.300-.1-.2-.3-.2-.6-.4l-1.900-.9c-.3-.1-.5-.1-.7.2l-.8 1c-.2.2-.3.2-.6.1-.3-.2-1.200-.5-2.300-1.400-.8-.8-1.400-1.700-1.600-2-.1-.3 0-.4.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2c-.2-.5-.4-.5-.6-.5H9Z'/%3E%3C/svg%3E")}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chips li{font-size:14.5px;font-weight:600;padding:9px 16px;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 16%,transparent)}
.chips li strong{font-weight:800}
.ticks{list-style:none;margin-top:20px;display:grid;gap:11px}
.ticks li{position:relative;padding-left:34px;color:var(--soft);max-width:60ch}
.ticks li::before{content:"";position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 22%,transparent)}
.ticks li::after{content:"";position:absolute;left:7px;top:.5em;width:8px;height:5px;border-left:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);transform:rotate(-45deg)}

/* ── hero and split: words on one side, an arch on the other ── */
.hero,.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center}
.hero{min-height:min(820px,86vh);padding-top:clamp(52px,7vw,104px)}
.split.flip .pic{order:-1}
.txt{position:relative;z-index:2}
.txt p+p{margin-top:14px}
.split h2+p,.split h2+.ticks{margin-top:24px}
.pic{position:relative;z-index:1}
.arch{border-radius:999px 999px 40px 40px;overflow:hidden;aspect-ratio:4/5;max-height:680px;margin-inline:auto;background:color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 30px 70px rgba(15,25,30,.3)}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.08) translateY(var(--py,0px));will-change:transform}
.arch img.cut{object-fit:contain;padding:14% 10% 8%;transform:translateY(var(--py,0px))}
.hero.night .arch,.hero.tide .arch:has(.cut),.hero.sun .arch:has(.cut){background:radial-gradient(70% 60% at 50% 62%,rgba(255,246,232,.2),rgba(255,246,232,.05));box-shadow:none}
.disc{aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--cream) 34%,transparent);display:grid;place-items:center;max-width:560px;margin-inline:auto}
.disc img{width:96%;filter:drop-shadow(0 26px 30px rgba(33,20,14,.3))}
.ph{width:100%;height:100%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 14px,transparent 14px 28px)}
.plate{position:absolute;width:clamp(120px,36%,270px);left:-9%;bottom:-6%;z-index:3;filter:drop-shadow(0 22px 26px rgba(33,20,14,.36));transform:translateY(var(--pp,0px)) rotate(var(--pr,0deg));will-change:transform}
.flip .plate{left:auto;right:-7%}
.leaf{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 16px 20px rgba(20,30,20,.26));transform:translateY(var(--pl,0px)) rotate(var(--lr,0deg));will-change:transform}
.leaf.l1{width:clamp(150px,24vw,360px);right:-4%;top:-7%;--lr:24deg}
.leaf.l2{width:clamp(96px,13vw,200px);left:-2.5%;bottom:-5%;--lr:-18deg}
.leaf.l3{width:clamp(90px,34%,210px);right:-9%;top:-5%;z-index:2;--lr:12deg}
.flip .leaf.l3{right:auto;left:-9%;--lr:-12deg}
@media (prefers-reduced-motion:no-preference){.leaf{animation:sway 9s ease-in-out infinite alternate}.leaf.l2{animation-duration:11s}.leaf.l3{animation-duration:7.5s}}
@keyframes sway{from{rotate:-1.6deg}to{rotate:2.2deg}}

/* ── heads, grids, cards ── */
.head{max-width:900px;margin-bottom:clamp(28px,4vw,54px);position:relative;z-index:2}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.grid.n3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{display:flex;flex-direction:column;gap:10px;background:var(--card);border-radius:34px;padding:16px 16px 26px;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 34px rgba(33,20,14,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
a.card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(33,20,14,.18)}
.card .top{border-radius:999px 999px 22px 22px;overflow:hidden;aspect-ratio:1/1.06;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.card .top img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
a.card:hover .top img{transform:scale(1.06)}
.card .top.cutbox{display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--gold) 46%,transparent),transparent)}
.card .top.cutbox img{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(33,20,14,.3))}
.card h3,.card p,.card .more{padding-inline:10px}
.card h3{margin-top:10px}
.card p{font-size:15.5px}
.card .price,.dish .price,.pass .price{font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.01em}
.price small{font-family:var(--body);font-size:13px;font-weight:600;opacity:.7;letter-spacing:.04em}
.card .more{margin-top:auto;padding-top:8px;font-weight:700;font-size:15px}
.card .more::after{content:" →"}
.card:not(:has(.top)){padding-top:26px}
.post .kick{padding-inline:10px;margin-bottom:0}

/* ── plates from the menu ── */
.plates{display:grid;gap:22px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.plates{grid-template-columns:repeat(3,minmax(0,1fr))}.plates.n5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1240px){.plates.n6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.dish{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px}
.dish .round{width:min(100%,230px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cream) 40%,transparent) 62%,transparent 64%)}
.dish .round img{max-width:92%;max-height:92%;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(33,20,14,.32));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.dish:hover .round img{transform:rotate(7deg) scale(1.05)}
.dish p{font-size:14.5px;max-width:30ch}

/* ── passes ── */
.passes .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch}
.pass{border-radius:38px;padding:30px 26px 28px;background:var(--ground);display:flex;flex-direction:column;gap:12px;color:var(--ink);box-shadow:0 18px 44px rgba(20,35,40,.16);position:relative;overflow:hidden}
.pass h3{font-size:clamp(26px,2.5vw,34px)}
.pass .kick{margin-bottom:2px}
.pass .ticks{margin-top:6px;gap:9px}
.pass .ticks li{font-size:15px}
.pass .price{margin-top:auto;padding-top:14px;font-size:32px}
.pass .btn{align-self:flex-start;margin-top:6px}
.pass.sand .btn.main,.pass.sun .btn.main,.pass.foam .btn.main{background:#3B2A20;color:#FFFDF9}
.pass.tide .btn.main,.pass.night .btn.main{background:#F2B94F;color:#2A1B12}

/* ── the week ── */
.days{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.day{background:var(--card);border-radius:30px;padding:20px 20px 14px;box-shadow:0 10px 26px rgba(33,20,14,.07)}
.day h3 em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:#F2B94F;color:#2A1B12;padding:5px 10px;border-radius:999px;vertical-align:middle;margin-left:6px;white-space:nowrap}
.slot{display:grid;grid-template-columns:58px minmax(0,1fr);gap:4px 12px;align-items:start;padding:14px 0;border-top:1.5px dashed color-mix(in srgb,var(--ink) 16%,transparent);margin-top:12px}
.slot time{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.3}
.slot strong{display:block;line-height:1.3}
.slot .chip{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;margin-top:6px;background:#E3EFF1;color:#173F4B}
.slot .chip.workshop{background:#FBE2A2;color:#5A3A00}.slot .chip.special{background:#F6D3C3;color:#7A2A10}.slot .chip.charity{background:#DDEBD6;color:#234A2A}.slot .chip.free{background:#3B2A20;color:#FFF6E8}
.slot .btn{grid-column:2;justify-self:start;margin-top:6px}
.key{margin-top:22px}

/* ── the magic word ── */
.magic{display:grid;place-items:center;text-align:center;padding-block:clamp(48px,6vw,84px)}
.ticket{position:relative;z-index:2;max-width:760px;background:rgba(255,253,249,.72);border-radius:44px;padding:clamp(28px,4.4vw,54px);border:2.5px dashed rgba(59,42,32,.4)}
.ticket p{margin-inline:auto}.ticket h2{margin-bottom:16px}.ticket .kick{color:#7A3A1A}
.magic .plate{left:auto;right:6%;bottom:8%;width:clamp(84px,13vw,170px);--pr:8deg}

/* ── questions, quotes, facts, the closing band, the foot ── */
.qa{display:grid;gap:10px;max-width:900px}
.qa details{background:var(--card);border-radius:28px;padding:4px 24px;box-shadow:0 6px 18px rgba(33,20,14,.05)}
.qa summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,22px);padding:18px 34px 18px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:50%;translate:0 -50%;font-size:28px;font-weight:400;transition:rotate .3s}
.qa details[open] summary::after{rotate:45deg}
.qa details p{padding:0 0 22px;max-width:70ch}
.quote{background:var(--card);border-radius:34px;padding:28px;display:flex;flex-direction:column;gap:16px}
.quote blockquote{font-family:var(--display);font-size:clamp(19px,1.6vw,23px);line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.quote figcaption{font-weight:700;margin-top:auto}.quote figcaption span{font-weight:500;opacity:.7}
.facts dl{display:grid;gap:0;max-width:980px}
.facts dl div{display:grid;grid-template-columns:minmax(120px,240px) 1fr;gap:6px 24px;padding:16px 0;border-top:1.5px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.facts dt{font-family:var(--display);font-weight:700;font-size:19px}.facts dd{color:var(--soft)}
.closer{text-align:center}.closer .head{margin-inline:auto}.closer .lead{margin-inline:auto}.closer .ctas{justify-content:center}
.foot{margin:0 var(--gap) var(--gap);display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));padding-block:clamp(40px,5vw,70px)}
.foot h3{font-size:16px;font-family:var(--mono);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--kick);margin-bottom:14px}
.foot p{font-size:15.5px;margin-top:12px}.foot nav{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;font-size:15px}
.foot a{text-decoration:none;border-bottom:1px solid rgba(255,246,232,.3)}.foot nav a{border:0}.foot a:hover{color:#F2B25C}

/* ── the journal ── */
.article{padding-inline:clamp(22px,6vw,120px)}
.article>*{max-width:780px;margin-inline:auto}
.article h1,.article .lead{max-width:780px}
.article h1{font-size:clamp(36px,4.8vw,64px)}
.prose{margin-top:44px;max-width:70ch;font-size:18.5px;line-height:1.7}
.prose h2{font-size:clamp(26px,2.8vw,36px);margin:46px 0 14px}
.prose p{margin-top:16px;max-width:none;color:rgba(59,42,32,.9)}
.prose ul{margin:16px 0 0 0;list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding-left:26px;color:rgba(59,42,32,.9)}
.prose li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:#E8B44C}
.prose a{color:#1B5262;font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}

/* ── the walk through Ohana: a strip you drag ── */
.walk{padding-inline:0}
.walk .head{padding-inline:var(--pad)}
.walk .ctas{justify-content:center;padding-inline:var(--pad)}
.track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--pad) 26px;scrollbar-width:none;cursor:grab}
.track::-webkit-scrollbar{display:none}
.track.drag{cursor:grabbing;scroll-snap-type:none}
.stop{flex:0 0 min(78vw,560px);scroll-snap-align:center;position:relative;border-radius:999px 999px 40px 40px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 26px 60px rgba(8,22,28,.36)}
.stop img{width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.12) translateX(var(--sx,0px))}
.stop figcaption{position:absolute;inset:auto 0 0 0;padding:90px 28px 28px;background:linear-gradient(transparent,rgba(15,25,30,.82));color:#FFFDF9}
.stop figcaption b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#F2B25C;display:block;margin-bottom:8px}
.stop figcaption strong{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);line-height:1.05;color:#FFFDF9;display:block}
.stop figcaption span{display:block;font-size:15px;margin-top:8px;color:rgba(255,253,249,.86)}
.dots{display:flex;gap:8px;justify-content:center;padding-bottom:6px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 30%,transparent);cursor:pointer;padding:0;transition:width .3s,background .3s}
.dots button[aria-current]{width:30px;border-radius:999px;background:#F2B94F}

/* ── the running line of words ── */
.run{overflow:hidden;border-radius:999px;background:#3B2A20;color:#FFF6E8;padding:16px 0;white-space:nowrap}
.run div{display:inline-flex;gap:38px;padding-right:38px;font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,26px)}
.run span::after{content:"✺";margin-left:38px;color:#F2B25C}
@media (prefers-reduced-motion:no-preference){.run div{animation:run 46s linear infinite}}
@keyframes run{to{transform:translateX(-100%)}}

/* ── arriving: a band rises a little as it comes into view (it is always readable; this is only the last few pixels) ── */
@media (prefers-reduced-motion:no-preference){
  .js .band:not(.hero){transition:transform .9s cubic-bezier(.2,.8,.2,1)}
  .js .band.below:not(.hero){transform:translateY(34px) scale(.985)}
}

@media (max-width:980px){
  .links{display:none}
  .hero,.split{grid-template-columns:1fr}
  .hero{min-height:0}
  .split.flip .pic{order:0}
  .arch{aspect-ratio:1/1.05;max-height:520px;max-width:520px}
  .plate{left:-3%;bottom:-5%}.flip .plate{right:-3%}
  .leaf.l3{right:-5%}.flip .leaf.l3{left:-5%}
}
@media (max-width:560px){
  :root{--r:32px;--gap:8px}
  body{font-size:16px}
  main{padding-top:80px}
  .bar{top:8px;width:calc(100% - 16px);padding-left:16px}
  .wm{width:92px}
  .btn{width:100%;justify-content:center}.btn.small,.btn.mini{width:auto}
  .pass .btn{align-self:stretch}
  .card{border-radius:28px}
  .facts dl div{grid-template-columns:1fr}
  .slot{grid-template-columns:52px minmax(0,1fr)}
  .magic .plate{right:2%;bottom:2%;width:74px}
  .ticket{padding-bottom:64px}
  .draft{left:8px;top:70px;font-size:10px}
}

/* ── the guide: an article's picture, its way up to the pillar, cards with a picture ── */
.article .arch.wide{aspect-ratio:16/9;max-height:none;max-width:780px;border-radius:999px 999px 36px 36px/70% 70% 36px 36px;margin-top:38px}
.article .up{margin-top:44px;padding-top:22px;border-top:1.5px dashed rgba(59,42,32,.25);font-weight:600}
.article .up a{color:#1B5262}
.card .top.wide{aspect-ratio:16/10;border-radius:26px}
.lead a{color:inherit;font-weight:700;text-underline-offset:3px}
.chips li a{text-decoration:none}

/* ── the hero that turns: the day at Ohana, one picture fading into the next (site.js moves the "on" class) ── */
.arch.turn{position:relative}
.arch.turn img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.arch.turn img:first-child{position:relative;opacity:1}
.arch.turn img.on{opacity:1}
.arch.turn.started img:first-child:not(.on){opacity:0}
@media (prefers-reduced-motion:no-preference){.hero .arch:not(.turn) img:not(.cut),.arch.turn img.on{animation:drift 16s ease-in-out infinite alternate}}
@keyframes drift{from{scale:1}to{scale:1.07}}

/* ── asking for a place: the little sheet ── */
.slot .with{display:block;font-size:13px;color:var(--soft);margin-top:4px}
.slot button.btn{border:0;cursor:pointer;font-family:inherit}
dialog.ask{margin:auto;border:0;border-radius:36px;padding:0;width:min(520px,calc(100vw - 24px));background:#FFFDF9;color:#3B2A20;box-shadow:0 40px 100px rgba(20,12,8,.5)}
dialog.ask::backdrop{background:rgba(33,20,14,.55);backdrop-filter:blur(3px)}
dialog.ask form{padding:34px 28px 28px;display:grid;gap:14px;position:relative}
dialog.ask h2{font-size:30px}
dialog.ask .kick{color:#2E7185;margin:0}
dialog.ask label{display:grid;gap:6px;font-size:14px;font-weight:600}
dialog.ask input,dialog.ask select{font:inherit;font-weight:400;padding:13px 14px;border-radius:16px;border:1.5px solid #E2D3BC;background:#FBF5EA;color:#3B2A20;min-height:50px}
dialog.ask input:focus,dialog.ask select:focus{outline:3px solid #E8B44C;outline-offset:1px}
dialog.ask .x{position:absolute;right:16px;top:14px;width:44px;height:44px;border-radius:50%;border:0;background:#F2E7D6;font-size:26px;line-height:1;cursor:pointer;color:#3B2A20}
dialog.ask .btn.main{border:0;cursor:pointer;justify-content:center;font-family:inherit}
dialog.ask .btn.main:disabled{opacity:.55}
dialog.ask .said{font-size:15px;margin:0}
dialog.ask .said a{color:#1B5262;font-weight:700}
dialog.ask .fine{margin:0}

/* ── ALWAYS ONE TAP AWAY: the menu, the way here, WhatsApp, a table (his word, 14 Nov 2026: "tenerlo sempre a portata di mano
   per convertire visitatori veloci del sito in clienti del ristorante") ── */
.dock{position:fixed;z-index:55;left:50%;bottom:16px;transform:translate(-50%,0);display:grid;grid-template-columns:repeat(5,auto);gap:6px;align-items:center;
  padding:7px;border-radius:999px;background:rgba(33,20,14,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(20,12,8,.35);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.dock a{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:999px;color:#FFF6E8;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.dock a:hover{background:rgba(255,246,232,.1)}
.dock a.main{background:#F2B94F;color:#2A1B12}
.dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dock-open{grid-column:1/-1;text-align:center;font-size:12px;color:rgba(255,246,232,.75);margin:0 0 2px;max-width:none;font-family:var(--mono);letter-spacing:.06em}
.dock-open b{color:#9FE0A8;font-weight:500}
.js .dock.away{transform:translate(-50%,140%);opacity:0;pointer-events:none}
main{padding-bottom:120px}
/* the visit card */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
.visit .addr{font-family:var(--display);font-size:clamp(20px,2vw,26px);line-height:1.25;color:var(--ink);margin-top:18px;letter-spacing:-.01em;font-weight:600}
.visit .open{margin-top:10px;font-weight:600}
.visit .map{position:relative;display:block;border-radius:999px 999px 36px 36px/60% 60% 36px 36px;overflow:hidden;aspect-ratio:4/3.4;box-shadow:0 26px 60px rgba(15,25,30,.28);background:#D8EBEE}
.visit .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;filter:saturate(1.1)}
.visit .map span{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#3B2A20;color:#FFFDF9;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.25)}
/* the menu card in an article */
.menucard{margin:40px 0 8px;padding:24px;border-radius:32px;background:linear-gradient(135deg,#FFF6E4,#FBE2A2);box-shadow:0 14px 34px rgba(33,20,14,.1)}
.menucard .kick{color:#7A3A1A;margin-bottom:14px}
.menucard .mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.menucard .mini a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;text-decoration:none;color:#3B2A20;padding:6px;border-radius:20px}
.menucard .mini a:hover{background:rgba(255,255,255,.55)}
.menucard .mini img{width:100%;max-width:130px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(33,20,14,.28))}
.menucard .mini b{font-family:var(--display);font-size:15px;line-height:1.2}
.menucard .mini span{font-size:13px;color:rgba(59,42,32,.75)}
.menucard .btn{margin-top:14px;width:100%;justify-content:center}
.prose .menucard p{color:inherit}
/* a dish on a page is a link to its place on the menu */
a.dish{text-decoration:none;color:inherit;border-radius:28px;transition:background .3s}
a.dish:hover{background:color-mix(in srgb,var(--card) 70%,transparent)}
.dish .onmenu{font-size:13px;font-weight:700;color:var(--ink);opacity:.8}
.dish .onmenu::after{content:" →"}
@media (max-width:980px){.visit{grid-template-columns:1fr}}
@media (max-width:560px){
  .dock{left:8px;right:8px;bottom:8px;transform:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.12fr) minmax(0,1.06fr) minmax(0,.86fr) minmax(0,1.3fr);gap:4px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-radius:26px}
  .dock a{flex-direction:column;gap:3px;min-height:54px;padding:6px 2px;font-size:11.5px;justify-content:center;border-radius:20px}
  /* five doors at 375 px in every language: a long label wraps onto a second line (hyphenated where the language allows),
     it never spills into its neighbour */
  .dock a span{white-space:normal;text-align:center;line-height:1.08;font-size:11px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere;max-width:100%}
  .js .dock.away{transform:translateY(140%)}
  main{padding-bottom:130px}
  .menucard{padding:18px 14px}.menucard .mini{gap:6px}.menucard .mini b{font-size:13px}
}
@media print{.dock,.draft{display:none}}

/* ── the language switch in the bar ── */
.lang-nav{position:relative}
.lang-nav summary{list-style:none;cursor:pointer;height:44px;padding:0 12px;border-radius:999px;display:flex;align-items:center;gap:6px;background:#F2E7D6;font-weight:700;font-size:13px;color:var(--brown)}
.lang-nav summary::-webkit-details-marker{display:none}
.lang-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.lang-nav nav{position:absolute;right:0;top:56px;width:200px;background:var(--cream);border-radius:24px;padding:10px;box-shadow:0 22px 60px rgba(59,42,32,.26);display:grid;z-index:5}
.lang-nav nav a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink)}
.lang-nav nav a:hover,.lang-nav nav a[aria-current]{background:#F2E7D6}
@media (max-width:560px){.lang-nav summary{height:40px;padding:0 9px}.lang-nav summary b{display:none}}
/* scripts with tall letters breathe a little more */
:lang(si) body,:lang(hi) body{line-height:1.7}
:lang(si) h1,:lang(si) h2,:lang(hi) h1,:lang(hi) h2,:lang(ar) h1,:lang(ar) h2{line-height:1.25;letter-spacing:0}
:lang(ru) h1{font-size:clamp(38px,6.6vw,92px)}
:lang(ar) .kick,:lang(si) .kick,:lang(hi) .kick{letter-spacing:.04em;text-transform:none;font-family:var(--body);font-size:14px;font-weight:600}
/* ── right to left (Arabic): the page mirrors; pictures, numbers and addresses keep their own direction ── */
[dir="rtl"] .ticks li{padding-left:0;padding-right:34px}
[dir="rtl"] .ticks li::before{left:auto;right:0}
[dir="rtl"] .ticks li::after{left:auto;right:7px}
[dir="rtl"] .prose li{padding-left:0;padding-right:26px}
[dir="rtl"] .prose li::before{left:auto;right:2px}
[dir="rtl"] .card .more::after,[dir="rtl"] .dish .onmenu::after{content:" ←"}
[dir="rtl"] .more-nav nav,[dir="rtl"] .lang-nav nav{right:auto;left:0}
[dir="rtl"] .mark{margin-right:0;margin-left:auto}
[dir="rtl"] .bar{padding:9px 22px 9px 10px}
[dir="rtl"] .slot{direction:rtl}
[dir="rtl"] time,[dir="rtl"] .price,[dir="rtl"] .addr{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .plate{left:auto;right:-9%}
[dir="rtl"] .flip .plate{right:auto;left:-7%}
[dir="rtl"] .draft{left:auto;right:14px}
[dir="rtl"] u{background-position:100% 100%}

/* on a phone the two menus of the bar open as a sheet under it, never off the side of the screen */
@media (max-width:560px){
  .lang-nav nav,.more-nav nav,[dir="rtl"] .lang-nav nav,[dir="rtl"] .more-nav nav{position:fixed;top:66px;left:8px;right:8px;width:auto;max-height:calc(100vh - 160px);overflow:auto}
  .lang-nav nav{grid-template-columns:1fr 1fr}
}
/* Arabic letters sit low: the underline of a headline needs room above the next line */
:lang(ar) h1,:lang(ar) h2{line-height:1.45;padding-bottom:.1em}
:lang(ar) u{padding-bottom:0;background-position:100% 78%;background-size:100% .16em}
:lang(ar) .hero .lead{margin-top:26px}

/* ── OHANA IN 3D (his word, 13 Nov 2026: "vedere il locale in un modo creativo e fighissimo e invogliarli"). The way in is
   met without looking for it: a pill on the home's picture, the dock, the walk, the foot and the list of all pages. ── */
.dock a.d3 svg,.tourpill svg{stroke-width:1.9}
.dock a.d3[aria-current]{background:rgba(255,246,232,.14)}
.tourpill{position:absolute;z-index:4;left:50%;top:16%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:12px 20px 12px 14px;border-radius:999px;background:rgba(255,253,249,.92);color:#2A1B12;text-decoration:none;font-weight:700;font-size:15.5px;
  box-shadow:0 14px 34px rgba(8,22,28,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tourpill svg{width:30px;height:30px;padding:5px;border-radius:50%;background:#F2B94F;fill:none;stroke:#2A1B12;stroke-linecap:round;stroke-linejoin:round}
.tourpill:hover{transform:translateX(-50%) translateY(-3px)}
@media (prefers-reduced-motion:no-preference){.tourpill svg{animation:turn3d 5s ease-in-out infinite}}
@keyframes turn3d{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-14deg)}90%{transform:rotate(10deg)}}

/* the stage: the whole first screen, under the bar, the map drawn in light */
.tour3d{--top:92px;position:relative;margin:calc(var(--top) * -1) calc(var(--gap) * -1) 0;height:100vh;height:100svh;min-height:540px;max-height:1100px;
  border-radius:0 0 var(--r) var(--r);overflow:hidden;isolation:isolate;color:#FFFDF9;background:linear-gradient(#5F98A6,#C9B79A 58%,#F2C98E)}
.t-view{position:absolute;inset:0;outline:none}
.t-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.t-view canvas:active{cursor:grabbing}
.t-view:focus-visible{box-shadow:inset 0 0 0 4px #E8B44C}
.t-poster{position:absolute;inset:0}
.t-poster img{width:100%;height:100%;object-fit:cover}
.tour3d.live .t-poster{opacity:0;transition:opacity 1.2s;pointer-events:none}
.tour3d::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,38,46,.5),rgba(14,38,46,0) 34%,rgba(14,38,46,0) 72%,rgba(33,20,14,.38))}
.t-veil{position:absolute;inset:0;z-index:6;display:grid;place-content:center;gap:16px;text-align:center;background:radial-gradient(90% 70% at 50% 60%,#F6D7A6,#E7B98A 45%,#3E7D8C);transition:opacity .9s}
.t-veil b{font-family:var(--display);font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;color:#2A1B12}
.t-veil i{display:block;width:min(240px,60vw);height:6px;border-radius:9px;background:rgba(42,27,18,.16);overflow:hidden;margin-inline:auto}
.t-veil i::before{content:"";display:block;height:100%;width:var(--p,4%);background:#2A1B12;border-radius:9px;transition:width .3s}
.t-veil.gone{opacity:0;pointer-events:none}
.no3d .t-veil{display:none}

.t-intro{position:absolute;z-index:3;left:clamp(18px,4vw,64px);top:calc(var(--top) + clamp(18px,4vh,54px));max-width:min(780px,calc(100% - 36px));pointer-events:none;transition:opacity .6s,transform .6s}
.t-intro .kick{color:#FFE3B0;margin-bottom:12px}
.t-intro h1{font-size:clamp(36px,5.4vw,78px);color:#FFFDF9;text-shadow:0 2px 30px rgba(8,30,38,.45)}
.t-intro .lead{color:rgba(255,253,249,.94);font-size:clamp(16px,1.4vw,20px);margin-top:14px;max-width:44ch;text-shadow:0 1px 16px rgba(8,30,38,.5)}
.t-intro u{background-size:100% .16em}
.tour3d.touched .t-intro .lead,.tour3d.carded .t-intro .lead{opacity:0}
.tour3d.carded .t-intro{opacity:0;transform:translateY(-8px)}

.t-pins{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.pin{position:absolute;left:0;top:0;pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:8px;
  transform:translate3d(-999px,-999px,0);will-change:transform;transition:opacity .4s;font-family:var(--body);margin:-21px 0 0 -21px;transform-origin:21px 21px}
.pin i{position:relative;width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:800;font-size:17px;
  color:#2A1B12;background:radial-gradient(circle at 35% 30%,#FFE9B8,#F2B94F 60%,#E39A2E);box-shadow:0 0 0 3px rgba(255,253,249,.9),0 8px 22px rgba(33,20,14,.35)}
.pin i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,233,184,.85)}
@media (prefers-reduced-motion:no-preference){.pin i::after{animation:ping 2.6s cubic-bezier(.2,.7,.3,1) infinite}}
@keyframes ping{from{transform:scale(.7);opacity:.95}to{transform:scale(1.55);opacity:0}}
.pin b{font-weight:700;font-size:14px;color:#2A1B12;background:rgba(255,253,249,.92);padding:7px 13px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 18px rgba(33,20,14,.22)}
.pin.on i{background:radial-gradient(circle at 35% 30%,#FFFDF9,#FFE3B0);transform:scale(1.12)}
.pin:hover b,.pin.on b{background:#2A1B12;color:#FFF6E8}
.pin b{transition:opacity .3s,transform .3s;transform-origin:left center}
.pin.fold b{opacity:0;transform:scale(.6);pointer-events:none}
.pin.fold:hover b{opacity:1;transform:none}

.t-hint{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:94px;font-size:13px;font-weight:600;color:rgba(255,253,249,.92);background:rgba(33,20,14,.42);
  padding:7px 14px;border-radius:18px;text-align:center;width:max-content;max-width:calc(100% - 24px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .6s}
.t-hint .h-mouse{display:none}
@media (hover:hover) and (pointer:fine){.t-hint .h-touch{display:none}.t-hint .h-mouse{display:inline}}
.tour3d.touched .t-hint,.tour3d.carded .t-hint,.no3d .t-hint{opacity:0}
.t-tip{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(33,20,14,.82);color:#FFF6E8;font-weight:700;padding:14px 22px;border-radius:24px;opacity:0;pointer-events:none;transition:opacity .4s;width:max-content;max-width:calc(100% - 32px);text-align:center}
.t-tip.show{opacity:1}

.t-tools{position:absolute;z-index:4;right:clamp(14px,2vw,28px);top:calc(var(--top) + 14px);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.t-tools button{min-width:46px;height:46px;border:0;border-radius:999px;background:rgba(255,253,249,.9);color:#2A1B12;font:700 22px/1 var(--body);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 22px rgba(8,22,28,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.t-tools button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.t-tools .t-play{padding:0 18px 0 14px;font-size:15px;background:#F2B94F}
.t-tools .t-play svg{fill:currentColor;stroke:none}
.t-tools .t-play[aria-pressed="true"]{background:#2A1B12;color:#FFF6E8}
.t-tools button:focus-visible,.t-places button:focus-visible,.t-card button:focus-visible{outline:3px solid #E8B44C;outline-offset:3px}
.no3d .t-tools [data-zoom],.no3d .t-tools .t-home{display:none}

.t-list{position:absolute;z-index:4;left:0;right:0;bottom:22px;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
.t-places{list-style:none;display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(33,20,14,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(20,12,8,.35);pointer-events:auto;max-width:100%;overflow-x:auto;scrollbar-width:none}
.t-places::-webkit-scrollbar{display:none}
.t-places button{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 7px;border:0;border-radius:999px;background:transparent;color:#FFF6E8;font:700 14.5px/1.1 var(--body);cursor:pointer;white-space:nowrap}
.t-places button i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:800;background:rgba(255,246,232,.14)}
.t-places button:hover{background:rgba(255,246,232,.1)}
.t-places button[aria-current]{background:#F2B94F;color:#2A1B12}
.t-places button[aria-current] i{background:rgba(42,27,18,.14)}
.t-down{position:absolute;z-index:3;right:clamp(14px,2vw,28px);bottom:88px;color:#FFFDF9;font-weight:700;font-size:14px;text-decoration:none;padding:10px 4px;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.t-down::after{content:" ↓"}

/* the card: beside the map on a wide screen, a sheet from the bottom on a phone */
.t-card{position:absolute;z-index:5;right:clamp(12px,1.6vw,22px);top:calc(var(--top) + 8px);bottom:22px;width:min(410px,36vw);overflow:auto;overscroll-behavior:contain;
  background:var(--cream);color:var(--ink);border-radius:36px;box-shadow:0 30px 80px rgba(8,22,28,.42);opacity:0;transform:translateX(24px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin}
.t-card.in{opacity:1;transform:none}
.t-card .t-pic{margin:10px 10px 0;border-radius:999px 999px 26px 26px/70% 70% 26px 26px;overflow:hidden;aspect-ratio:16/10.5;background:#EAD9BF}
@media (min-height:900px){.t-card .t-pic{aspect-ratio:4/3.2}}
.t-card .t-pic img{width:100%;height:100%;object-fit:cover}
.t-card .t-txt{padding:20px 24px 22px}
.t-card .kick{color:#2E7185;margin-bottom:10px}
.t-card h2{font-size:clamp(26px,2.3vw,34px);outline:none}
.t-card p{color:rgba(59,42,32,.84);font-size:15.5px;margin-top:10px}
.t-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.t-acts .btn.soft{box-shadow:inset 0 0 0 2px currentColor}
.t-card .t-pic{position:relative}
.t-step{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;pointer-events:none}
.t-step span{background:rgba(33,20,14,.62);color:#FFF6E8;padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.t-step button{pointer-events:auto}
.t-step button,.t-x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,253,249,.92);color:#3B2A20;font-size:20px;cursor:pointer;font-family:var(--body);box-shadow:0 6px 16px rgba(33,20,14,.2)}
.t-x{position:absolute;right:18px;top:18px;z-index:2;background:rgba(255,253,249,.92);font-size:26px;line-height:1;box-shadow:0 6px 16px rgba(33,20,14,.2)}
.tour3d.carded .t-list{opacity:0;pointer-events:none}
.t-list{transition:opacity .4s}
.no3d .t-view{background:none}

/* the places below the map */
.card > .kick{padding-inline:10px;margin-bottom:0}
#places .card .top.wide{aspect-ratio:16/10.5}
#places .grid.n3{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}

@media (max-width:760px){
  .t-card{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:64%;border-radius:30px;transform:translateY(30px)}
  .t-card .t-pic{aspect-ratio:16/8.4;border-radius:24px 24px 18px 18px}
  .t-card .t-txt{padding:14px 18px 16px}
  .t-card .kick{margin-bottom:6px}
  .t-card h2{font-size:23px}
  .t-card p{font-size:14px;margin-top:7px}
  .t-acts{margin-top:14px}
  .t-acts .btn{width:auto;flex:1 1 auto;justify-content:center}
  .t-x{right:14px;top:14px}
  .t-tools{flex-direction:row;top:auto;bottom:128px;right:10px;gap:6px}
  .t-tools button{min-width:42px;height:42px;font-size:20px}
  .t-tools .t-play{padding:0 14px 0 11px;font-size:14px}
  .t-hint{bottom:180px;font-size:12px}
  /* on a phone every place is in view at once: three by two, the words allowed to wrap */
  .t-list{bottom:10px;padding:0 8px}
  .t-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border-radius:24px;width:100%;overflow:visible}
  .t-places button{width:100%;min-height:48px;padding:5px 8px 5px 5px;gap:6px;font-size:12.5px;white-space:normal;text-align:left;border-radius:18px;line-height:1.1}
  .t-places button i{width:26px;height:26px;flex:none;font-size:13px}
  .tour3d::after{background:linear-gradient(180deg,rgba(14,38,46,.66),rgba(14,38,46,.34) 38%,rgba(14,38,46,0) 54%,rgba(14,38,46,0) 74%,rgba(33,20,14,.42))}
  .t-down{display:none}
  .t-hint .h-mouse{display:none}.t-hint .h-touch{display:inline}
  .tour3d.carded .t-tools{opacity:0;pointer-events:none}
}
@media (max-width:560px){
  .tour3d{--top:80px;min-height:560px}
  .t-intro{left:16px;right:16px;max-width:none}
  .t-intro h1{font-size:clamp(34px,10.4vw,46px)}
  .t-intro .lead{font-size:15px}
}