/* fonts are self-hosted: no visitor data goes to Google */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-500i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-500i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/CormorantGaramond-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --fg:#f4ece1; --dim:rgba(244,236,225,.8); --line:rgba(244,236,225,.35);
  --accent:#e9b98a; --bg:#241c17;
  --mono:"JetBrains Mono",ui-monospace,monospace; --serif:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html.ready{scroll-behavior:smooth} /* only after load, so a deep link (#s5) jumps instead of gliding */
body{background:var(--bg);color:var(--fg);font:400 15px/1.55 var(--mono);letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
/* film grain + vignette */
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.12;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
/* vignette + top/bottom shade keep the HUD text readable on bright photos */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:
  linear-gradient(to bottom,rgba(20,14,10,.55),transparent 22%,transparent 50%,rgba(20,14,10,.7)),
  radial-gradient(ellipse at center,transparent 45%,rgba(20,14,10,.55) 100%)}

.scroll{position:relative;z-index:1}
.scroll section{height:140vh}
.scroll section:last-child{height:100vh}

.hud{position:fixed;z-index:5;pointer-events:none}
.hud *{pointer-events:auto}
.tl{top:28px;left:32px}
.tr{top:28px;right:32px;text-align:right}
.bl{bottom:28px;left:32px}
.br{bottom:28px;right:32px;text-align:right}
.logo{width:144px;display:block;margin-bottom:8px}
.tl .muted,.today{font-size:14px}
.muted{color:var(--dim)}
.tl .muted a{border-bottom:1px solid rgba(244,236,225,.4)}
nav ol{list-style:none;display:flex;gap:22px;justify-content:flex-end;font-size:16px}
nav a{opacity:.75;transition:opacity .3s}
nav a:hover,nav a.on{opacity:1}
.btn{display:inline-block;border:1px solid var(--fg);padding:13px 20px;min-height:48px;font-size:15px;text-transform:uppercase;letter-spacing:.12em;transition:background .3s,color .3s}
.btn:hover{background:var(--fg);color:#2b221b}
.progress{width:120px;height:2px;background:var(--line);margin-top:10px;position:relative}
.progress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#009246 0 33%,#f4f1ea 33% 66%,#ce2b37 66%)}

/* section overlays */
.panel{position:fixed;z-index:4;text-shadow:0 1px 18px rgba(30,20,14,.45);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;max-width:420px}
.panel.on{opacity:1;visibility:visible;transition:opacity .8s .3s,visibility 0s .3s} /* the old text leaves before the new one arrives */
.panel h2{font:500 clamp(40px,5vw,6rem)/1 var(--serif);font-style:italic;letter-spacing:0;margin-bottom:18px}
.panel p{font:500 22px/1.45 var(--serif);color:var(--fg);margin-bottom:14px;max-width:44ch}
.p0{left:32px;top:max(240px,27vh);max-width:min(1000px,calc(100vw - 64px))}
.p0 h1{font:500 clamp(56px,8.4vw,9rem)/.9 var(--serif);font-style:italic;letter-spacing:-.015em;max-width:7.6em} /* breaks after "bene," */
.p0 .sub{margin-top:22px;font-style:italic;font-size:23px;color:var(--fg)}
.p0 .who{font:500 22px/1.4 var(--serif);color:var(--fg);max-width:34em}
.p0 .cta{margin-top:22px}
/* soft dark pools behind text that sits on a bright photo */
.p0::before,.p2::before{content:"";position:absolute;inset:-80px -90px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(20,14,10,.6),rgba(20,14,10,.3) 60%,transparent)}
.p1{right:32px;top:52%;transform:translateY(-50%);max-width:520px}
.p1::before{content:"";position:absolute;inset:-90px -70px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(20,14,10,.78),rgba(20,14,10,.45) 60%,transparent)}
.p2{left:32px;right:32px;bottom:84px;max-width:none;display:grid;grid-template-columns:auto minmax(0,440px);gap:8px 48px;align-items:end}
.p2 h2{grid-area:1/1/3/2}
.p2 .lead{grid-area:1/2}.p2 p:last-child{grid-area:2/2}
.p2 h2{font-size:clamp(44px,5.4vw,88px);line-height:.92;margin:0}
.p2 .lead{font:500 italic 28px/1.3 var(--serif);color:var(--fg)}
.p2{grid-template-columns:auto minmax(0,520px)}
.label.flip em{left:auto;right:14px;text-align:right}
/* the two hosts: their names as gold signatures instead of map labels */
.label.big::before{display:none}
.label.big em{border:0;top:-56px;left:-10px;text-shadow:0 2px 14px rgba(10,7,5,.9)}
.label.big.flip em{left:auto;right:-10px}
.label.big b{font-size:clamp(34px,3.6vw,52px);color:var(--accent);line-height:1}
.label.big .swash{width:150px;margin-top:9px}
.label.big.flip .swash{margin-left:auto}
/* the closing scene has its own booking buttons */
.end .br,.end .bl{display:none}
.label.big small{font-size:14px;margin-top:2px;color:var(--fg)}

.p3{left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;width:min(920px,calc(100vw - 32px))}
.p3 h2{text-align:center;font-size:clamp(40px,4vw,64px);margin-bottom:12px}
.tabs{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-bottom:22px}
.tabs button{all:unset;cursor:pointer;opacity:.75;text-transform:uppercase;letter-spacing:.14em;font-size:14px;padding:8px 0;border-bottom:1px solid transparent;transition:opacity .3s,color .3s,border-color .3s}
.tabs button:hover{opacity:1}
.tabs button[aria-selected=true]{opacity:1;color:var(--accent);border-color:var(--accent)}
.tabs button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
/* the menu as a printed trattoria card: inner gold frame, serif dishes, dotted leaders to the price */
.card{background:rgba(26,19,15,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);
  outline:1px solid rgba(233,185,138,.28);outline-offset:-9px}
/* dishes dissolve at the edges instead of sliding through the gold frame */
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px 60px;max-height:52vh;overflow:auto;overscroll-behavior:auto;padding:30px 48px 56px;
  -webkit-mask-image:linear-gradient(transparent 6px,#000 26px,#000 calc(100% - 52px),transparent calc(100% - 12px));mask-image:linear-gradient(transparent 6px,#000 26px,#000 calc(100% - 52px),transparent calc(100% - 12px));
  scrollbar-width:none}
.menu .cat{grid-column:1/-1;display:flex;align-items:center;gap:20px;margin:0 0 6px;max-width:none;text-align:center}
.menu .cat::before,.menu .cat::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(233,185,138,.55),transparent)}
.menu .cat strong{display:block;font:500 italic 34px/1 var(--serif);color:var(--fg)}
.menu .cat small{display:block;margin-top:6px;color:var(--accent);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.menu .note{grid-column:1/-1;font:400 15px/1.5 var(--mono);color:var(--accent);text-align:center;max-width:none;margin:0}
.menu .cat{font:inherit}
.menu .note a{white-space:nowrap;border-bottom:1px solid currentColor}
.menu .row{display:flex;align-items:baseline;gap:10px}
.menu .row b{font:500 italic 25px/1.2 var(--serif);color:var(--fg)}
.menu .idx{font:400 10px/1 var(--mono);color:var(--accent);margin-right:8px;vertical-align:4px}
.menu .row i{flex:1;min-width:16px;border-bottom:1px dotted rgba(244,236,225,.4);transform:translateY(-5px)}
.menu .price{font:500 20px/1 var(--serif);font-style:normal;color:var(--accent);white-space:nowrap}
.menu .dish>span{display:block;margin-top:3px;color:var(--dim);font-size:14px}
.menu>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*35ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.today{margin-top:8px;display:flex;align-items:center;gap:8px}
.today i{width:7px;height:7px;border-radius:50%;background:#7bc47f}
.today i.off{background:#8a7a6e}
.today i.soon{background:var(--accent)}
.navtoggle{display:none}
.p5{left:32px;top:57%;transform:translateY(-50%);max-width:none;width:min(620px,calc(100vw - 32px))}
.scores{display:flex;gap:28px;margin-bottom:20px}
.scores b{display:block;font:500 40px/1 var(--serif);font-style:italic;color:var(--fg)}
.scores>*{flex:1;min-width:0}
.scores b{margin-bottom:6px}
.scores span{display:block;color:var(--dim);font-size:14px}
.scores a:hover b{color:var(--accent)}
.quotes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;padding:20px 22px;
  background:rgba(40,30,24,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.quotes q{display:block;font:500 21px/1.25 var(--serif);font-style:italic;margin-bottom:6px}
.quotes q::before{content:"“"}.quotes q::after{content:"”"}
.quotes cite{font-style:normal;color:var(--accent);font-size:13px}
.p4{left:32px;top:57%;transform:translateY(-50%);max-width:none;width:min(680px,calc(100vw - 32px))}
.credits{font:400 10px/1.5 var(--mono);margin-top:6px;opacity:.8}
.credits a{text-decoration:underline}
/* the closing: A presto, one invitation, one big way to book */
.p4 h2{font-size:clamp(56px,6.6vw,6rem);margin-bottom:10px}
.p4 .lead{font:500 italic 26px/1.3 var(--serif);color:var(--fg);margin-bottom:18px}
.p4 .lead span{color:var(--accent)}
/* two quiet ways to book; WhatsApp first, it works on a computer too */
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn.gold{border-color:var(--accent);color:var(--accent)}
.btn.gold:hover{background:var(--accent);color:#241c17}
.btn:focus-visible,nav a:focus-visible,summary:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.p4 .alt{font:400 14px/1.5 var(--mono);margin:12px 0 0}
.p4 .alt.fb{margin-top:6px}.p4 .alt.fb a{color:var(--accent);border-bottom:1px solid rgba(233,185,138,.4)}
.foot summary{cursor:pointer;list-style:none;font-size:12px}
.foot summary::-webkit-details-marker{display:none}
.foot summary::after{content:" +";color:var(--accent)}
.foot[open] summary::after{content:" −"}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;margin:22px 0 14px;padding:18px 20px;
  background:rgba(26,19,15,.7);border:1px solid var(--line)}
.grid p{font:400 14px/1.6 var(--mono);color:var(--fg);margin-bottom:6px;max-width:none}
.grid h3{font-weight:500;color:var(--accent);margin-bottom:8px;font-size:13px;letter-spacing:.14em}
.grid table{border-collapse:collapse;width:100%}
.grid td{padding:1px 0;color:var(--dim);white-space:nowrap;font-size:14px}
.grid td+td{padding-left:10px}
.grid td+td{text-align:right}
.grid a{border-bottom:1px solid rgba(244,236,225,.3)}

/* the stamp of 1978 and the map of the South: the history as things you can look at */
.p6{left:32px;right:32px;top:54%;transform:translateY(-50%);max-width:none;display:grid;align-items:center;gap:56px}
.p6{grid-template-columns:minmax(0,380px) minmax(0,560px);justify-content:center}
.p6 h2,.p7 h2{margin-bottom:16px}
/* the story headings carry the page: large enough to read as titles of a film, the body text stays small beside them */
.p1{max-width:min(860px,calc(100vw - 64px))}
.p1 h2,.p6 h2,.p7 h2{font-size:clamp(48px,7vw,8.5rem);line-height:.9;margin-bottom:22px}
.p2 h2{font-size:clamp(56px,7.4vw,8.5rem)}
/* Dal Sud ad As: the map fills the screen and the camera (app.js, journey) follows the route north while the km count up */
.p7{inset:0;max-width:none}
.p7::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,10,8,.88) 0,rgba(14,10,8,.55) 34%,rgba(14,10,8,0) 58%)}
.p7 .txt{position:absolute;z-index:2;left:max(32px,6vw);top:54%;transform:translateY(-50%);max-width:540px}
.p7 .km{font:500 clamp(72px,10vw,168px)/.9 var(--serif);font-style:italic;color:var(--accent);margin-bottom:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.p7 .km b{font-weight:500}
.stamp img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));transform:rotate(-4deg) translateY(30px) scale(.94);opacity:0;transition:transform 1.4s cubic-bezier(.16,.8,.24,1) .35s,opacity 1s .35s}
.p6.on .stamp img{transform:rotate(-4deg);opacity:1}
.map{position:relative;max-height:68vh;aspect-ratio:720/852}
.map img{display:block;width:100%;height:100%;object-fit:contain}
.map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map .route{fill:none;stroke:var(--accent);stroke-width:.7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.map circle{fill:var(--accent)}
.map figcaption span{position:absolute;font:400 13px/1.2 var(--mono);color:var(--fg);white-space:nowrap;text-shadow:0 1px 8px rgba(10,7,5,.9)}
.map .as{left:44%;top:-10%;transform:translateX(-50%);color:var(--accent);font:italic 500 17px/1 var(--serif)}
.map .gz{left:58%;top:62%}
.map .re{left:72%;top:74%;color:var(--accent)}
.map .head{fill:var(--fg);filter:drop-shadow(0 0 1.5px var(--accent))}
.map figcaption span{opacity:0;transition:opacity .6s}
.map.start .gz,.map.start .re,.map.end .as{opacity:1}
.p7 .map{position:absolute;left:0;top:0;height:86vh;max-height:none;width:auto;transform-origin:0 0;will-change:transform}

/* 3D-anchored labels */
.label{position:fixed;z-index:3;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .6s;white-space:nowrap;font-size:12px}
.label.on{opacity:1}
.label::before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border:1px solid var(--fg);border-radius:50%}
.label::before{width:6px;height:6px;border:0;background:var(--accent);left:-3px;top:-3px}
.label em{font-style:normal;position:absolute;left:14px;top:-34px;padding-bottom:4px;border-bottom:1px solid rgba(233,185,138,.5)}
.label em b{display:block;font:500 italic 24px/1 var(--serif);color:var(--fg)}
.label em small{display:block;color:var(--dim);font-size:13px;margin-top:3px}

.loader{position:fixed;inset:0;z-index:10;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:22px;transition:opacity 1s}
/* the logo is written in from left to right while the photos load */
.loader img{width:180px;animation:write 1.6s cubic-bezier(.45,0,.2,1) both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.loader i{width:120px;height:1px;background:var(--line);position:relative}
.loader i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .4s}
.loader.done{opacity:0;pointer-events:none}

@media (max-width:760px){
  .tl,.bl{left:16px}.tr,.br{right:16px}
  .tl{top:16px}.tr{top:20px}.bl,.br{bottom:16px}
  .logo{width:96px}
  .navtoggle{display:inline-block;font:inherit;color:var(--fg);background:rgba(24,18,14,.6);border:1px solid var(--line);padding:12px 16px;min-height:44px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
  nav ol{display:none;flex-direction:column;gap:0;margin-top:10px;padding:16px 20px;background:rgba(24,18,14,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line)}
  nav.open ol{display:flex}
  nav a{opacity:.9;display:block;padding:12px 0}
  .tl .muted{display:none}
  .p0{left:16px;right:16px;top:auto;bottom:16vh;max-width:none}
  .p0 h1{font-size:15vw}
  .p1 h2,.p6 h2,.p7 h2{font-size:clamp(44px,12.5vw,60px);margin-bottom:14px}
  .p0 .cta .btn{flex:1;text-align:center;letter-spacing:.08em}
  .p0 .cta .btn+.btn{display:none} /* the corner button already says Reserveren */
  .p0 .sub{font-size:20px}
  .p1,.p2{left:16px;right:16px;top:auto;bottom:90px;transform:none;max-width:none}
  .panel p{font-size:19px}
  .p0 .who{font-size:18px}
  .p6{left:16px;right:16px;top:auto;bottom:84px;transform:none;grid-template-columns:1fr;gap:18px}
  .p7 .txt{left:16px;right:16px;top:auto;bottom:84px;transform:none}
  .p7::before{background:linear-gradient(0deg,rgba(14,10,8,.92) 0,rgba(14,10,8,.6) 45%,rgba(14,10,8,0) 70%)}
  .p7 .km{font-size:22vw}
  .p6 .stamp{width:42vw;max-width:190px}
  .p7 .map{height:62vh}
  .map .re{left:44%;top:78%}
  
  .p3{top:52%}
  .menu{grid-template-columns:1fr;max-height:46vh;gap:14px;padding:24px 24px 48px}
  .menu .row b{font-size:20px}.menu .cat strong{font-size:28px}.menu .cat{gap:12px}
  .grid{grid-template-columns:1fr;gap:14px;margin:18px 0}
  .p4{left:16px;top:auto;bottom:16px;transform:none;max-height:calc(100vh - 140px);overflow:auto}
  .p4 h2{font-size:50px;margin-bottom:4px}
  .p4 .lead{font-size:19px;margin-bottom:12px}
  .p4 .cta{gap:8px}.p4 .cta .btn{padding:14px;font-size:14px}
  .p4 .alt{font-size:14px}
  .p4 .alt.fb a{display:inline-block;padding:10px 0}
  .p4 .grid a{display:inline-block;padding:8px 0}
  .p4 .grid p,.p4 .grid td{font-size:14px}
  .tabs{gap:0 18px;margin-bottom:12px}
  .tabs button{padding:13px 0}
  .menu .idx{display:none}
  .p4 .grid{grid-template-columns:1fr 1fr;gap:12px 16px;padding:14px;margin:12px 0 10px}
  .p4 .grid>div:last-child{grid-column:1/-1}
  .p5{left:16px;top:52%}
  .scores{gap:18px}.scores b{font-size:30px}
  .quotes{grid-template-columns:1fr;max-height:44vh;overflow:auto}
  .quotes q{font-size:17px}
  .label{display:none}
  .label.big{display:block}
  .p2{display:block;bottom:84px}
  .p2 h2{font-size:46px;margin-bottom:10px}
  .label.big b{font-size:30px}
  .p2 .lead{font-size:20px}
}
@media (max-height:760px) and (min-width:761px){
  .p1{top:54%}
}
body.nogl{background:url(assets/fontana/hero.webp) center/cover fixed}
body.nogl .p7{background:var(--bg)} /* without WebGL the map would lie on top of the bright hero photo */
body.nogl canvas#gl{display:none}
@media (prefers-reduced-motion:reduce){.grain{animation:none}html.ready{scroll-behavior:auto}.menu>*{animation:none}.loader img{animation:none}}
.center{text-align:center}
.foot{margin-top:22px}
/* laptops with short screens: smaller logo and 4 quotes, so the text blocks clear the header */
@media (min-width:761px) and (max-height:960px){
  .quotes li:nth-child(n+5){display:none}
}
@media (min-width:761px) and (max-height:860px){
  .logo{width:110px}
  .p4{top:60%}.p4 h2{font-size:64px}.p4 .grid{margin:14px 0 10px}
  .p0{top:max(210px,26vh)}
  .p3{top:53%}.menu{max-height:52vh}
}
/* hero, closing and the hosts' names: ink from a fountain pen — letters flow in large, blurred and slanted in glowing gold, dry to cream;
   then a gold-leaf glint runs over the word and the pen draws a flourish underneath */
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.ink .ch{animation:inkt 1.2s cubic-bezier(.16,.8,.24,1) both, glint .7s ease-in-out;
  animation-delay:calc(var(--i)*45ms), calc(var(--n)*45ms + .9s + var(--i)*30ms)}
@keyframes inkt{
  0%{opacity:0;filter:blur(12px);transform:translate(-.2em,.45em) scale(1.45) skewX(-18deg);color:var(--accent);text-shadow:0 0 .5em rgba(233,185,138,.9)}
  40%{opacity:1;filter:blur(0);color:var(--accent);text-shadow:0 0 .35em rgba(233,185,138,.6)}
  100%{opacity:1;transform:none;color:inherit;text-shadow:0 0 0 transparent}
}
@keyframes glint{50%{color:#fff3df;text-shadow:0 0 .3em rgba(233,185,138,.95),0 0 .9em rgba(233,185,138,.45)}}
.swash{display:block;width:min(62%,300px);height:auto;margin-top:.12em;overflow:visible}
.p3 .swash{margin-inline:auto}
.swash path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ink .swash path{animation:pen 1.4s cubic-bezier(.45,0,.2,1) forwards;animation-delay:calc(var(--n)*45ms + .4s)}
@keyframes pen{to{stroke-dashoffset:0}}
/* the film-like opening: header and text wait until the camera has reached the water */
.tl,.tr,.bl{transition:opacity .9s}
.intro .hud,.intro .panel.on{opacity:0}

/* without JavaScript the film can't run: the essentials, on top of the loader */
.nojs{position:fixed;inset:0;z-index:20;background:var(--bg);color:var(--fg);overflow:auto;padding:32px 20px;font:500 20px/1.5 var(--serif)}
.nojs>*{max-width:560px;margin:0 auto 18px}
.nojs h1{font-size:44px;font-style:italic;font-weight:500;line-height:1.05}
.nojs a{display:inline-block;padding:9px 0;color:var(--accent)}

.p3 .allergen{text-align:center;font:400 14px/1.4 var(--mono);color:var(--fg);margin:12px 0 0;max-width:none}