/* Quattro Stagioni Hot Pot. Tokens in DIRECTION.md, "Tokens". */

@font-face{font-family:"Young Serif";src:url(fonts/young-serif-normal-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;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:"Young Serif";src:url(fonts/young-serif-normal-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";src:url(fonts/literata-normal-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;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:"Literata";src:url(fonts/literata-normal-latin-ext.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";src:url(fonts/literata-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;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:"Literata";src:url(fonts/literata-italic-latin-ext.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Serif SC";src:url(fonts/noto-serif-sc-600-subset.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Young Serif Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:118.71%;ascent-override:88.45%;descent-override:31.17%;line-gap-override:0%}
@font-face{font-family:"Literata Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:109.03%;ascent-override:108.23%;descent-override:28.43%;line-gap-override:0%}

:root{
  color-scheme: light;
  --paper:#FAFBFA;     /* sampled by series-sheet from the approved plates (art/sheets/r1) */
  --ink:#1E1C18;
  --ink-2:#4B4740;
  --brass:#C3912F;     /* the brass of the pot: the one action */
  --brass-dk:#A97C22;
  --brass-text:#7A5812; /* brass dark enough for text: 5.7:1 on paper */
  --seal:#C8312B;
  --rule:rgba(30,28,24,.13);
  --night:#0A0807;
  --ivory:#EDE6DA;
  --ivory-2:#BDB4A6;
  --display:"Young Serif","Young Serif Fallback",Georgia,"Times New Roman",serif;
  --text:"Literata","Literata Fallback",Georgia,"Times New Roman",serif;
  --cjk:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC",serif;
  --t-display:clamp(54px,min(9.6vw,16svh),150px);
  --t-h2:clamp(36px,4.2vw,64px);
  --t-h3:24px;
  --t-body:19px;
  --t-small:16px;
  --t-meta:14px;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--paper);scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--t-body);line-height:1.55;overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.zh{font-family:var(--cjk);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance}
h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.022em}
p{text-wrap:pretty}
.halo{background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 90%,transparent) 72%,transparent);padding:.06em .3em;margin:0 -.3em}
.open h1 .halo{background:none;padding:0;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:12px 24px;border-radius:999px;background:var(--brass);color:var(--ink);font-family:var(--text);font-weight:600;font-size:17px;text-decoration:none;border:1px solid transparent;white-space:nowrap;transition:background-color .15s}
.btn:hover{background:var(--brass-dk);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn--small{min-height:42px;padding:9px 18px;font-size:16px}

/* header */
.top{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:28px;padding:20px var(--gut)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:19px;height:auto}
.brand span{font-family:var(--display);font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.top nav{margin-left:auto}
.top nav ul{display:flex;gap:22px;list-style:none;padding:0;font-size:var(--t-small);white-space:nowrap}
.top nav a{text-decoration:none;padding:8px 0}
.top nav a:hover{text-decoration:underline}

/* 1. opening: the pot */
.open{position:relative;isolation:isolate;overflow-x:clip;min-height:max(100svh,960px);padding:clamp(118px,15vh,140px) var(--gut) 0;display:grid;grid-template-columns:minmax(0,1fr) min(372px,28vw);column-gap:40px;grid-template-rows:auto auto auto auto 1fr;align-content:start;align-items:start}
.open h1{grid-column:1/-1}
.lede,.proof,.hero-cta{grid-column:1}
.pot{position:absolute;z-index:-1;width:min(880px,62vw);aspect-ratio:1;left:54%;top:clamp(360px,44vh,400px);translate:-50% 0;pointer-events:none}
.pot .spin{position:absolute;inset:0;rotate:calc(var(--pick,0deg) + var(--scroll,0deg))}
.pot .spin > img{width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 99%);mask-image:radial-gradient(closest-side,#000 80%,transparent 99%)}
.pot .tag{position:absolute;translate:-50% -50%;rotate:calc(-1 * (var(--pick,0deg) + var(--scroll,0deg)));display:flex;align-items:baseline;gap:6px;padding:4px 12px 5px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);font-size:var(--t-meta);line-height:1.2;white-space:nowrap;color:var(--ink)}
.pot .tag .zh{font-size:13px;color:var(--brass-text)}
.pot .tag.on{background:var(--brass);border-color:var(--brass)}
.pot .tag.on .zh{color:var(--ink)}
.pot .t-pic{left:38%;top:38%}.pot .t-pom{left:62%;top:38%}.pot .t-fun{left:38%;top:62%}.pot .t-cla{left:62%;top:62%}
.pot.turning .spin,.pot.turning .tag{transition:rotate .85s cubic-bezier(.3,1.2,.5,1)}
.open h1{font-size:var(--t-display);line-height:.93;letter-spacing:-.03em;max-width:12.5em;overflow-wrap:break-word;text-shadow:0 0 .18em var(--paper),0 0 .4em var(--paper)}
.open h1 > span{display:block}
.open h1 .l2{padding-left:min(2.1em,18vw)}
.open h1 .l3{padding-left:.7em}
.lede{max-width:40ch;margin-top:20px;margin-left:-28px;padding:14px 28px;color:var(--ink-2);background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 94%,transparent) 76%,transparent)}
.lede .halo,.proof .halo{background:none;padding:0;margin:0}
.proof{margin-top:2px;font-size:var(--t-small);color:var(--ink)}
.proof b{font-weight:600}
.hero-cta{display:flex;align-items:center;gap:20px;margin-top:22px;font-size:16px;position:relative;z-index:2}

.compose{position:relative;grid-column:2;grid-row:2/6;margin-top:22px;padding:20px 22px 18px;border-radius:26px;background:color-mix(in srgb,var(--paper) 96%,transparent);border:1px solid var(--rule)}
.compose h2{font-size:28px;line-height:1.05;letter-spacing:-.01em}
.compose > p{font-size:16px;line-height:1.45;color:var(--ink-2);margin-top:8px}
.compose ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:2px}
.compose button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;gap:10px;width:100%;min-height:44px;padding:7px 12px;border-radius:10px;border-bottom:1px solid var(--rule);font-family:var(--text);font-size:17px}
.compose button .zh{font-size:14px;color:var(--brass-text)}
.compose button:hover{background:color-mix(in srgb,var(--brass) 14%,transparent)}
.compose button[aria-pressed="true"]{background:var(--brass);border-bottom-color:transparent;color:var(--ink)}
.compose button[aria-pressed="true"]::after{content:"scelto";margin-left:auto;font-size:var(--t-meta)}
.compose button[aria-pressed="true"] .zh{color:var(--ink)}
.compose button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.compose output{display:block;margin-top:12px;font-size:16px;line-height:1.4;min-height:1.4em}
.compose .btn{margin-top:14px;width:100%}
.compose .tel{display:block;text-align:center;margin-top:10px;font-size:16px}

/* 2. how to eat: painted margins */
.how{position:relative;isolation:isolate;overflow:clip;padding:clamp(190px,22vw,330px) var(--gut) clamp(150px,14vw,210px)}
.how .side{position:absolute;z-index:-1;top:clamp(60px,12vw,180px);bottom:0;width:min(25vw,400px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 76%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 76%,transparent)}
.how .side img{width:100%;height:100%;object-fit:cover}
.how .side--l img{-webkit-mask-image:linear-gradient(to right,#000 72%,transparent);mask-image:linear-gradient(to right,#000 72%,transparent)}
.how .side--r img{-webkit-mask-image:linear-gradient(to left,#000 72%,transparent);mask-image:linear-gradient(to left,#000 72%,transparent)}
.how .side--l{left:0}.how .side--l img{object-position:0 50%}
.how .side--r{right:0}.how .side--r img{object-position:100% 50%}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .how .side img{animation:drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes drift{from{transform:translateY(-3%) scale(1.06)}to{transform:translateY(3%) scale(1.06)}}
  }
}
.how .inner{max-width:min(700px,48vw);margin:0 auto}
.how .intro{margin-top:18px;color:var(--ink-2);max-width:44ch}
.steps{list-style:none;padding:0;margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:44px 40px}
.steps li{position:relative}
.steps .n{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.steps .num{font-family:var(--display);font-size:56px;line-height:.9;color:var(--ink)}
.steps .n .zh{font-size:19px;color:var(--brass-text)}
.steps h3{font-size:var(--t-h3);line-height:1.15;letter-spacing:-.01em}
.steps p{margin-top:8px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.steps .lao{color:var(--ink)}
.spice{margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);font-size:17px;color:var(--ink-2);max-width:52ch}
.spice b{color:var(--ink);font-weight:600}

/* 3. what you cook: the generated photos dissolve into the paper, the spice sprig belongs to the hot broth */
.cook{position:relative;isolation:isolate;padding:clamp(90px,9vw,140px) 0 clamp(40px,4.5vw,64px);display:grid;row-gap:48px;
  grid-template-columns:max(0px,calc(var(--gut) - 24px)) repeat(12,minmax(0,1fr)) max(0px,calc(var(--gut) - 24px));column-gap:24px;align-items:start}
.cook .text{grid-column:2/8;grid-row:1;position:relative;z-index:2}
.cook .lead{margin-top:20px;max-width:46ch;color:var(--ink)}
.cook .label{margin-top:34px;font-family:var(--text);font-weight:600;font-size:var(--t-small);color:var(--ink-2);letter-spacing:0}
.broths{list-style:none;padding:0;margin-top:10px;border-top:1px solid var(--ink)}
.broths li{position:relative;display:grid;grid-template-columns:48px 8.2em minmax(0,1fr);align-items:baseline;column-gap:6px;padding:13px 0 12px;border-bottom:1px solid var(--rule)}
.broths .zh{font-size:17px;color:var(--brass-text)}
.broths b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1}
.broths span:not(.zh){font-size:16px;color:var(--ink-2)}
.broths .sprig{position:absolute;z-index:3;pointer-events:none;width:clamp(90px,8vw,120px);right:-12px;top:50%;translate:0 -50%;max-width:none}
.cook .tablet{margin-top:22px;font-size:17px;font-weight:600;max-width:46ch}
.f-pot{grid-column:8/-1;grid-row:1;position:relative;z-index:1;margin-top:-30px}
.f-pot img{width:100%;aspect-ratio:1;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%),linear-gradient(to bottom,transparent,#000 6%,#000 82%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 14%),linear-gradient(to bottom,transparent,#000 6%,#000 82%,transparent);mask-composite:intersect}
.f-pot figcaption{position:absolute;right:var(--gut);bottom:5%;font-size:var(--t-meta);color:var(--ink-2)}
.f-tavola{grid-column:1/10;grid-row:2;position:relative;z-index:0}
.f-tavola img{width:100%;aspect-ratio:2/1;object-fit:cover;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 16%),linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,transparent,#000 16%),linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);mask-composite:intersect}
.f-tavola figcaption{padding-left:var(--gut);margin-top:-6px}
.cook figcaption{font-size:var(--t-meta);color:var(--ink-2)}
.cook .drink{grid-column:10/14;grid-row:2;align-self:start;margin-top:clamp(60px,9vw,140px);font-size:17px;color:var(--ink-2);max-width:30ch}
.cook .drink b{display:block;font-family:var(--display);font-weight:400;font-size:var(--t-h3);color:var(--ink);margin-bottom:6px}

/* 4. the evening: the one dark band, entered and left through a wet ink edge */
.night{position:relative;isolation:isolate;color:var(--ivory)}
.night .seam{display:block;width:100%;height:clamp(130px,22vw,330px);object-fit:fill;position:relative;z-index:0;pointer-events:none}
.night .seam--out{transform:scaleY(-1)}
.night .seam--in{margin-top:-5vw}
.night .stage{background:var(--night);margin-top:-1px;margin-bottom:-1px;padding:0 0 clamp(20px,3vw,40px);display:grid;
  grid-template-columns:max(0px,calc(var(--gut) - 24px)) repeat(12,minmax(0,1fr)) max(0px,calc(var(--gut) - 24px));column-gap:24px;align-items:start}
.night figure{position:relative}
.night figcaption{font-size:var(--t-meta);color:var(--ivory-2);margin-top:10px}
.night .say{grid-column:2/9;grid-row:1;align-self:end;position:relative;z-index:2;padding-bottom:clamp(20px,3vw,48px)}
.night h2{font-size:clamp(48px,7vw,108px);line-height:.95;color:#F6EFE3;max-width:8.5em}
.night .say p{margin-top:24px;font-size:19px;color:var(--ivory);max-width:36ch}
.lanterns{grid-column:10/13;grid-row:1;margin-top:calc(clamp(130px,22vw,330px) * -.5);z-index:1}
.lanterns::before{content:"";position:absolute;inset:10% -30% 0;background:radial-gradient(closest-side,rgba(200,49,43,.28),transparent);filter:blur(10px);z-index:-1}
.lanterns img{width:100%;aspect-ratio:2/3;object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 70%,transparent),linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 70%,transparent),linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .lanterns img,.lanterns::before{animation:light linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    @keyframes light{from{filter:brightness(.45) saturate(.7)}to{filter:none}}
  }
}
.f-hall{grid-column:5/-1;grid-row:2;margin-top:clamp(-90px,-5vw,-30px)}
.f-hall img{width:100%;aspect-ratio:2/1;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 26%),linear-gradient(to bottom,transparent,#000 10%,#000 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 26%),linear-gradient(to bottom,transparent,#000 10%,#000 84%,transparent);mask-composite:intersect}
.f-hall figcaption{text-align:right;padding-right:var(--gut);margin-top:-4px}
.f-banco{grid-column:2/8;grid-row:3;margin-top:clamp(30px,4vw,64px)}
.f-corr{grid-column:9/13;grid-row:3;margin-top:clamp(70px,8vw,130px)}
.f-banco img,.f-corr img{width:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.f-banco img{aspect-ratio:3/2}
.f-corr img{aspect-ratio:4/5;object-position:50% 40%}

/* 5. private rooms: the plate and the title share one cell, the table sits on its own paper */
.rooms{position:relative;isolation:isolate;padding:clamp(70px,8vw,120px) 0 clamp(60px,7vw,100px)}
.rooms .intro{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;overflow-x:clip}
.rooms .scene,.rooms .head{grid-area:1/1}
.rooms .scene img{width:min(96vw,1500px);max-width:none;margin-left:auto;margin-right:-9vw;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 70%,transparent 92%),linear-gradient(to right,transparent,#000 14%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 70%,transparent 92%),linear-gradient(to right,transparent,#000 14%);mask-composite:intersect}
.rooms .head{position:relative;z-index:1;margin-left:var(--gut);padding-top:clamp(40px,5vw,80px);max-width:min(470px,31vw)}
.rooms .head p{margin-top:18px;color:var(--ink-2);max-width:34ch}
.rooms .sheet{position:relative;z-index:2;margin:clamp(-64px,-4vw,-40px) var(--gut) 0;padding-top:8px;background:var(--paper);box-shadow:0 0 48px 32px var(--paper);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.table-wrap{grid-column:1/9}
table{width:100%;border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:var(--t-small);color:var(--ink-2);padding:0 0 10px}
th,td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
thead th{font-weight:600;font-size:var(--t-meta);letter-spacing:.04em;color:var(--ink);padding-top:6px;border-bottom:1px solid var(--ink)}
tbody th{font-family:var(--display);font-weight:400;font-size:24px;white-space:nowrap}
tbody th .zh{font-family:var(--cjk);font-size:28px;line-height:1;color:var(--brass-text);margin-right:14px;display:inline-block;min-width:1.1em;vertical-align:-4px}
.seats{text-align:right;padding-right:28px}
td.k.yes span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brass);margin-right:8px;vertical-align:2px}
td.k.no{color:var(--ink-2)}
td.num{text-align:right;padding-right:0;font-family:var(--display);font-size:var(--t-h3)}
thead th.num{text-align:right;padding-right:0}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.rooms .call{grid-column:10/13;align-self:start;padding-top:44px;font-size:var(--t-small);color:var(--ink-2)}
.rooms .call .lbl{display:block;font-size:var(--t-meta);font-weight:600;letter-spacing:.04em;color:var(--ink)}
.rooms .call a{display:block;font-family:var(--display);font-size:28px;line-height:1.05;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--brass);text-underline-offset:.18em;margin:10px 0 14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rooms .call a .pre{display:none}
.rooms .pics{margin:clamp(48px,5vw,80px) var(--gut) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 24px}
.rooms .pics .p1{grid-column:1/9;grid-row:1}.rooms .pics .p2{grid-column:9/13;grid-row:1}.rooms .pics .p3{grid-column:1/5;grid-row:2}.rooms .pics .p4{grid-column:5/13;grid-row:2}
.rooms .pics img{border-radius:4px;width:100%;height:clamp(240px,29vw,440px);object-fit:cover}
.rooms .pics figcaption{font-size:var(--t-meta);color:var(--ink-2);margin-top:8px}

/* 6. hours and address: the closing plate is the section's ground, the text sits in its empty paper */
.visit{position:relative;isolation:isolate;overflow:clip;min-height:calc(100vw * 2 / 3);padding:clamp(40px,5vw,80px) var(--gut) calc(100vw * 2 / 3 * .4)}
.visit .closing{position:absolute;z-index:-1;right:0;bottom:0;width:100%;max-width:none;pointer-events:none;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent)}
.visit .grid{width:min(58%,860px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;align-items:start}
.visit h2{grid-column:1/-1}
.hours{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 56px;margin-top:28px;padding-bottom:30px;border-bottom:1px solid var(--rule)}
.dinner{font-family:var(--display);font-size:var(--t-h2);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dinner span{display:block;font-family:var(--text);font-size:var(--t-small);letter-spacing:0;color:var(--ink-2);margin-bottom:12px}
.lunch h3,.more h3{font-family:var(--text);font-weight:600;font-size:var(--t-small);margin-bottom:6px}
.lunch dl{display:grid;grid-template-columns:7.5em auto;gap:3px 14px;font-size:var(--t-small);font-variant-numeric:tabular-nums}
.lunch dd{color:var(--ink-2)}
.where{margin-top:30px}
.where address{font-style:normal;font-family:var(--display);font-size:28px;line-height:1.12;color:var(--ink)}
.where p{margin-top:12px;font-size:16px;color:var(--ink-2);max-width:40ch}
.where .act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.where .act .btn{min-height:54px;padding:13px 28px}
.more{margin-top:34px;font-size:var(--t-small)}
.more ul{list-style:none;padding:0;display:grid;gap:0;margin-bottom:20px}
.more ul a{display:inline-block;padding:8px 0}
.more p{font-size:var(--t-small);color:var(--ink-2)}
.more p + h3{margin-top:14px}
blockquote{grid-column:1/-1;margin-top:clamp(36px,4vw,56px);font-family:var(--display);font-size:28px;line-height:1.15;letter-spacing:-.01em;max-width:22em}
blockquote footer{font-family:var(--text);font-size:var(--t-small);color:var(--ink-2);margin-top:10px;letter-spacing:0}

.foot{padding:22px var(--gut) 28px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--t-meta);color:var(--ink-2)}
.foot a{color:var(--ink-2)}
.foot span:first-child{color:var(--ink)}

/* tablet and phone: recomposed, not stacked */
@media (max-width:1180px){
  .open{min-height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
  .lede{max-width:none}
  .compose{grid-row:2/6;z-index:2}
  .rooms .head{max-width:min(470px,46vw)}
  .rooms .sheet{margin-top:24px;display:block}
  .rooms .call{padding-top:28px;max-width:34ch}
  .visit .grid{width:min(100%,640px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .where{grid-column:1/-1}
  .more{grid-column:1/-1}
  .pot{position:relative;grid-column:1/-1;grid-row:5;left:50%;top:auto;width:84vw;margin-top:-16vw;margin-bottom:-22vw}
}
@media (max-width:700px){
  .top{gap:12px;position:sticky;top:0;padding-block:10px;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .top nav{display:none}
  .top .btn{margin-left:auto}
  .brand span{font-size:17px}
  .open{padding-top:20px;min-height:auto;padding-bottom:0;display:flex;flex-direction:column}
  .lede,.proof,.compose,.pot{grid-column:auto;grid-row:auto}
  .lede{margin-left:-16px;padding:10px 16px}
  .open > *{flex:none}
  .hero-cta{order:3;gap:16px;margin-top:18px}
  .pot .tag{font-size:12px;padding:3px 8px;gap:4px}
  .pot .tag .zh{font-size:11px}
  .pot .t-pic{left:35%;top:39%}.pot .t-pom{left:65%;top:39%}.pot .t-fun{left:35%;top:61%}.pot .t-cla{left:65%;top:61%}
  .pot{order:4;position:relative;left:50%;top:auto;bottom:auto;width:128vw;max-width:none;margin-top:-6vw;margin-bottom:-36vw}
  .compose{order:5;margin-top:0;z-index:2}
  .open h1{font-size:11.6vw;overflow-wrap:anywhere}
  .open h1 .l2{padding-left:.9em}
  .open h1 .l3{padding-left:0}
  .how{padding-top:110px}
  .how .side{top:0;bottom:auto;width:120vw;height:130px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
  .how .side img{width:120vw;height:auto;object-fit:fill;-webkit-mask-image:none;mask-image:none;animation:none !important}
  .how .side--l{left:-14vw;top:48px}
  .how .side--l img{-webkit-mask-image:linear-gradient(to right,#000 22%,transparent 30%);mask-image:linear-gradient(to right,#000 22%,transparent 30%)}
  .how .side--r{right:-14vw;left:auto;top:auto;bottom:24px}
  .how .side--r img{position:absolute;bottom:0;right:0}
  .how .side--r img{-webkit-mask-image:linear-gradient(to left,#000 22%,transparent 30%);mask-image:linear-gradient(to left,#000 22%,transparent 30%)}
  .how{padding-top:200px;padding-bottom:190px}
  .how .inner{max-width:none;padding:0}
  .steps{grid-template-columns:1fr;gap:30px}
  .steps .num{font-size:46px}
  .cook,.night .stage{display:flex;flex-direction:column;padding-left:var(--gut);padding-right:var(--gut)}
  .cook > *,.night .stage > *{margin-top:0}
  .cook{row-gap:0;padding-top:56px}
  .night .seam--in{margin-top:0}
  .broths li{grid-template-columns:40px 6.6em minmax(0,1fr)}
  .broths .sprig{width:58px;right:-14px}
  .f-pot{order:2;margin:28px calc(-1 * var(--gut)) 0}
  .f-pot img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 84%,transparent)}
  .f-pot figcaption{position:static;padding:4px var(--gut) 0;text-align:right}
  .f-tavola{order:3;margin:12px calc(-1 * var(--gut)) 0}
  .f-tavola img{aspect-ratio:4/3;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 86%,transparent)}
  .cook .drink{order:4;margin-top:24px;align-self:auto;max-width:none}
  .lanterns{width:52%;align-self:flex-end;margin-top:-50px;margin-right:-8px}
  .night .seam{height:96px}
  .night .say{margin-top:-20px;padding-bottom:28px}
  .night .say p{font-size:17px}
  .f-hall{margin:0 calc(-1 * var(--gut))}
  .f-hall img{aspect-ratio:4/3;object-position:62% 50%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent)}
  .f-banco{width:88%;margin-top:28px}
  .f-corr{width:70%;align-self:flex-end;margin-top:24px}
  .rooms{padding-top:40px}
  .rooms .scene img{width:170vw;margin-right:-50vw}
  .rooms .head{max-width:none;margin:0;padding:76vw var(--gut) 0}
  .rooms .sheet{display:block;margin-top:24px;box-shadow:none}
  .rooms .call{padding-top:26px}
  .rooms .call a{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--ink);border-radius:999px;font-family:var(--text);font-weight:600;font-size:17px;text-decoration:none;margin:10px 0 10px}
  .rooms .call a .pre{display:inline;white-space:pre}
  .rooms .pics{grid-template-columns:1fr 1fr;gap:20px 14px}
  .rooms .pics .p1,.rooms .pics .p4{grid-column:1/-1;grid-row:auto}
  .rooms .pics .p2{grid-column:1;grid-row:auto}.rooms .pics .p3{grid-column:2;grid-row:auto}
  .rooms .pics img{height:auto;aspect-ratio:3/2}
  .rooms .pics .p2 img,.rooms .pics .p3 img{aspect-ratio:1}
  table,thead,tbody,tr,th,td{display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;padding:14px 0;border-bottom:1px solid var(--rule)}
  tbody tr:last-child{border-bottom:0}
  tbody th{order:1;flex:1 0 auto;border:0;padding:0 0 4px;font-size:var(--t-h3)}
  td.num{order:2;flex:none;border:0;padding:0;margin-left:auto;font-size:var(--t-h3)}
  tr::after{content:"";order:3;flex-basis:100%}
  td.seats,td.col-pot,td.k{order:4;border:0;padding:0;text-align:left;font-size:var(--t-small);color:var(--ink-2)}
  td.seats::after{content:" posti ·\00a0"}
  td.col-pot{white-space:nowrap}
  td.k.no{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  td.k.yes span{font-size:0}
  td.k.yes span::before{display:none}
  td.k.yes::before{content:"\00a0· karaoke";font-size:var(--t-small)}
  caption{display:block}
  .visit{min-height:0;padding-bottom:0;display:flex;flex-direction:column}
  .visit .grid{order:1}
  .visit .closing{order:2}
  .visit .grid{width:auto;display:block}
  .hours{gap:18px 40px}
  .visit .closing{position:relative;z-index:-1;width:175vw;margin:-40px 0 0 calc(-75vw - var(--gut));right:auto;bottom:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%);mask-image:linear-gradient(to bottom,transparent,#000 12%)}
  .where .act .btn{flex:1 1 100%}
}
@media (max-width:360px){
  .brand span{font-size:16px}
  .top .btn{padding:9px 14px}
}
/* short laptop screens (Windows at 125–150%): the action comes right under the headline */
@media (max-height:800px) and (min-width:701px){
  .open .hero-cta{grid-row:2;margin-top:16px}
  .open .lede{grid-row:3}
  .open .proof{grid-row:4}
}
@media (min-width:1700px){
  .pot{width:940px}
}
@media (forced-colors:active){
  .btn,.compose button,.pot .tag{border:1px solid ButtonText}
  .compose button[aria-pressed="true"]{outline:2px solid Highlight}
  .open h1{text-shadow:none}
}

/* ---- aggiunte per il kit Maiora: lingua, prenotazione nella pagina, telefono delle sale ---- */
.top .lang{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:var(--t-small);text-decoration:none}
.top .lang:hover{text-decoration:underline}
.book{padding:clamp(56px,7vw,104px) var(--gut) clamp(48px,6vw,88px)}
.book .inner{max-width:760px;margin:0 auto}
.book p{margin-top:14px;color:var(--ink-2);max-width:46ch}
.book [data-maiora-prenotazione]{margin-top:28px}
.rooms .call a::before{content:none}
@media (max-width:700px){
  .top .lang{margin-left:auto}
  .top .lang + .btn{margin-left:0}
  .rooms .call a::before{content:"Chiamate ";white-space:pre}
  html[lang="en"] .rooms .call a::before{content:"Call "}
  html[lang="en"] td.seats::after{content:" seats ·\00a0"}
}
html[lang="en"] .compose button[aria-pressed="true"]::after{content:"chosen"}
/* spazio in fondo per il cerchietto della chat: non copre l'ultimo collegamento del piè di pagina */
@media (max-width:700px){ .foot{padding-bottom:96px} }