/* 05-emaki. A painted scroll with no bare paper: indigo is the main field (Japanese trust, and it makes the warm food glow), grey-lilac is the breath between
   scenes, pale gold is the leaf of a folding screen, used once, for the lemon that has no photograph.
   Base rules = the static page: a vertical sheet that keeps tategaki columns. Everything scroll-specific lives under html.motion-active. */
:root{--lil:#E7E5EC;--ai:#1B3A5B;--oro:#B79A52;--kin:#D9C07C;--bianco:#F4F2F7;
  --cima:0px;--piede:0px;--rail:0px;
  --alto:clamp(26.25rem,78svh,47.5rem);
  --tipo:var(--alto);
  --cap:clamp(1.0625rem,calc(var(--tipo)*.03),1.5625rem);
  --riga:clamp(1.25rem,calc(var(--tipo)*.04),2.125rem);
  --sub:clamp(1.25rem,calc(var(--tipo)*.044),2.25rem);
  --stacco:clamp(1.5rem,4.5vw,4.5rem);
  --bordo:clamp(1.25rem,5vw,5rem)}
html{background:var(--ai)}
body{background:var(--ai);color:var(--bianco);font-family:Tokumin,'Hiragino Mincho ProN','Yu Mincho',serif;font-weight:400;font-synthesis:none;font-size:var(--cap);line-height:1.9;word-break:auto-phrase;line-break:strict}
h1,h2,h3,h4{font-weight:400}
.f-ai{--bg:var(--ai);--fg:var(--bianco);--acc:var(--kin);--rule:var(--oro)}
.f-lil{--bg:var(--lil);--fg:var(--ai);--acc:var(--ai);--rule:var(--oro)}
.f-oro{--bg:var(--kin);--fg:var(--ai);--acc:var(--ai);--rule:var(--ai)}
.f-ai,.f-lil,.f-oro{background:var(--bg);color:var(--fg)}
.tate{writing-mode:vertical-rl;text-orientation:mixed;font-feature-settings:normal;line-height:1.95;letter-spacing:.09em}
.tcy{text-combine-upright:all;letter-spacing:0;font-feature-settings:normal}
.up{text-orientation:upright;letter-spacing:0}
.r{display:block}
.tax{font-size:.6em;letter-spacing:.06em;margin:0}

/* Header: a plain indigo row on the static page */
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--bordo);background:var(--ai);color:var(--bianco);box-shadow:0 1px 0 var(--oro)}
.hd .home{display:block;flex:none;min-width:44px}
.hd .home img{width:64px;height:auto}
.hd nav{display:flex;flex-wrap:wrap;justify-content:flex-end;min-width:0;gap:clamp(4px,3vw,28px)}
.hd nav a{display:flex;align-items:center;min-height:44px;padding:0 clamp(4px,1.4vw,12px);font-size:.875rem;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.hd nav a:hover{text-decoration:underline;text-decoration-color:var(--kin);text-underline-offset:.45em}

/* Scenes: a row that fills from the right and wraps into tiers, like a page of vertical text */
.scena{position:relative;display:flex;flex-flow:row-reverse wrap;align-items:flex-start;gap:clamp(1.5rem,5vw,4rem);padding:clamp(2.5rem,8vw,6rem) var(--bordo);overflow-wrap:normal}
.nastro>main{display:block}

/* First screen: enormous column on the right, the picture already fills the left */
.jo{flex-wrap:nowrap;padding:0;gap:0;align-items:stretch;min-height:calc(var(--alto) + 3rem)}
.testata{display:flex;flex-direction:row-reverse;align-items:stretch;flex:none;gap:clamp(.5rem,1.6vw,1.5rem);padding:1.5rem clamp(.5rem,3vw,2.5rem)}
#titolo{font-size:calc(var(--tipo)/5.12);line-height:1.08;letter-spacing:0}
.filo{flex:none;width:1px;background:var(--oro)}
.marca{font-size:var(--cap);line-height:1.5;letter-spacing:.12em;max-height:var(--alto);color:var(--bianco)}
.marca>span{display:inline;margin-block-end:0}
.nome-marca,.sotto-marca{margin-inline-end:1.5em}
.sotto-marca{color:var(--kin)}
.nome-marca,.sotto-marca,.cosa{white-space:nowrap}
.entra{flex:1 1 0;min-width:0;display:flex}

/* Photographs run from edge to edge */
.veduta{position:relative;margin:0;overflow:hidden;overflow:clip}
.quadro{display:block;width:100%;height:100%;overflow:hidden;overflow:clip;background:#2a4563}
.quadro img{display:block;width:100%;height:100%;object-fit:cover}
.hikari{display:none}
.pizzo{width:100%}
.pizzo img{object-position:38% 62%}
.furgone{flex:none;width:calc(100% + var(--bordo)*2);margin-inline:calc(var(--bordo)*-1);aspect-ratio:1.33;max-height:90svh}
.furgone img{object-position:50% 60%}
.pieno{flex:none;width:calc(100% + var(--bordo)*2);margin-inline:calc(var(--bordo)*-1);aspect-ratio:1.333;max-height:90svh}
.ritaglio{margin:0}
.ritaglio img{width:100%;height:auto}

/* Story */
.grande{font-size:calc(var(--tipo)/6.15);line-height:1.1;letter-spacing:.02em}
.righe{display:flex;flex-flow:row-reverse wrap;gap:.2rem clamp(.4rem,1.3vw,1rem);flex:1 1 20rem;justify-content:flex-start;align-items:flex-start}
.riga{--off:0em;writing-mode:vertical-rl;text-orientation:mixed;font-size:var(--riga);margin-top:var(--off);max-height:calc(var(--alto) - var(--off));line-height:1.65;letter-spacing:.06em;font-feature-settings:normal}
.r1{--off:1.5em}.r3{--off:1em}.r4{--off:2.5em}.r5{--off:.5em}.r6{--off:2em}.r8{--off:1.5em}
.seconda .r7,.seconda .r8{font-size:calc(var(--tipo)/7.6);line-height:1.2;letter-spacing:.02em}

/* French toast */
.ft{display:flex;flex-direction:row-reverse;flex-wrap:wrap;gap:clamp(1rem,3vw,3rem);flex:1 1 100%;align-items:flex-start}
.etichetta{font-size:var(--sub);letter-spacing:.2em;line-height:1.4;color:var(--acc)}
.titolone{font-size:calc(var(--tipo)/8.35);line-height:1.2;letter-spacing:.02em}
.intro{font-size:var(--cap);max-height:var(--alto);flex:0 1 auto}
.gusti{display:flex;flex-direction:column;gap:clamp(3rem,9vw,6rem);flex:1 1 100%;min-width:0}
.gusto{--n:7.35;position:relative;display:flex;flex-flow:row-reverse wrap;gap:clamp(1rem,3vw,2.5rem);align-items:flex-start}
.g-plain{--n:4.3}
.nome{font-size:calc(var(--tipo)/var(--n));line-height:1.1;letter-spacing:.02em;max-height:var(--alto);color:var(--fg,inherit)}
.dett{display:flex;flex-direction:row-reverse;gap:.35rem;min-height:calc(var(--alto)*.5);flex:none}
.en{letter-spacing:.14em;font-size:var(--cap);color:var(--acc,var(--kin))}
.nota{font-size:var(--cap);max-height:calc(var(--alto)*.8)}
.prezzo{align-self:flex-end;font-size:var(--sub);letter-spacing:.02em;line-height:1.15;text-align:left;white-space:nowrap;writing-mode:horizontal-tb}
.prezzo .tax{display:block;margin-top:.2em}
.f-plain{width:min(100%,38rem)}
.f-banana{width:min(100%,36rem)}
/* Lemon has no photograph by choice: gold leaf is its picture, with the square seams of a folding screen */
.g-lemon{--n:7.35;background:var(--kin) linear-gradient(90deg,rgba(138,106,40,.13) 1px,transparent 1px) 0 0/calc(var(--alto)/5.2) 100%;padding:clamp(2.5rem,9vw,5rem) var(--bordo);margin-inline:calc(var(--bordo)*-1)}
.g-lemon::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(138,106,40,.13) 1px,transparent 1px) 0 0/100% calc(var(--alto)/5.2);pointer-events:none}
.g-lemon>*{position:relative}
.g-lemon .nome{color:var(--ai)}
.limitato{display:block;color:var(--ai);border-block-start:0;margin-bottom:1em;letter-spacing:.3em}

/* Carnitas */
.carnitas{--n:7.35;display:flex;flex-flow:row-reverse wrap;gap:clamp(1rem,3vw,2.5rem);flex:1 1 100%;align-items:flex-start}
.titolone.cn{font-size:calc(var(--tipo)/10.7)}
.testo{font-size:var(--cap);max-height:var(--alto);flex:0 1 auto}
.f-carnitas{width:min(100%,40rem);flex:1 1 100%}

/* Drinks: gold rules on indigo, like a lacquer menu board; no dots */
.bevande{display:flex;flex-flow:row-reverse wrap;gap:clamp(1.25rem,3vw,2.5rem);flex:1 1 100%;align-items:flex-start}
.etichetta-grande{font-size:calc(var(--tipo)/4.3);line-height:1.1;letter-spacing:.02em}
.gruppo{display:flex;flex-direction:row-reverse;gap:.75rem}
.gruppo h4{writing-mode:vertical-rl;font-size:var(--sub);letter-spacing:.2em;line-height:1.5;color:var(--acc)}
.gruppo ul{display:flex;flex-direction:row-reverse}
.gruppo{--voce:clamp(1.25rem,calc(var(--tipo)*.052),2.75rem);border-inline-end:1px solid var(--oro);padding-inline-end:clamp(.75rem,1.6vw,1.5rem)}
.gruppo li{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;width:calc(var(--voce)*2.7);min-height:calc(var(--alto)*.72);padding:.15rem 0;align-items:center}
.voce{font-size:var(--voce);line-height:1.3;letter-spacing:.06em;max-height:calc(var(--alto)*.56)}
.gruppo .prezzo{font-size:clamp(1.0625rem,calc(var(--tipo)*.03),1.5rem);align-self:center;text-align:center}
.gruppo .prezzo .tax{font-size:.8125rem}
.nota-menu{font-size:var(--cap);max-height:var(--alto);line-height:1.8}

/* Dates */
.etichetta{flex:none}
.dove{font-size:calc(var(--tipo)/6.6);line-height:1.2}
.giorni{display:flex;flex-flow:row-reverse wrap;gap:clamp(1.5rem,4vw,3.5rem) clamp(1rem,3vw,2.5rem);flex:1 1 100%}
.giorno{display:flex;flex-flow:row-reverse nowrap;gap:.6rem;align-items:flex-start;padding-inline-end:clamp(.6rem,1.6vw,1.2rem);border-inline-end:1px solid var(--oro)}
.quando{font-size:calc(var(--tipo)/6.1);line-height:1.15;letter-spacing:.02em}
.wd{font-size:.5em}
.ora{writing-mode:horizontal-tb;font-size:clamp(1.0625rem,calc(var(--tipo)*.024),1.25rem);line-height:1.3}
.ora.solo{writing-mode:vertical-rl;white-space:nowrap}
.luogo{max-height:calc(var(--alto)*.8);font-size:var(--riga);line-height:1.6;letter-spacing:.05em}
.giorno .ora:not(.solo){align-self:flex-start;width:3.4em;text-align:center}
.nota-date{max-height:var(--alto);font-size:var(--cap);line-height:1.8}

/* Contact and the end of the scroll */
.invito-t{font-size:calc(var(--tipo)/5.7);line-height:1.15;letter-spacing:.01em}
.recapiti{flex:0 1 auto;min-width:min(100%,19rem)}
.invito{letter-spacing:.2em;margin-bottom:.8rem;color:var(--kin)}
.recapiti li{display:flex;align-items:center;min-height:44px;gap:.8em}
.recapiti a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid var(--oro);overflow-wrap:anywhere}
.tel{font-size:clamp(1.75rem,calc(var(--tipo)*.052),2.75rem);letter-spacing:.04em}
.mail{font-size:clamp(.9375rem,calc(var(--tipo)*.024),1.125rem);letter-spacing:.02em}
.coda{padding:clamp(2rem,6vw,4rem) var(--bordo);display:flex;flex-flow:row wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
.fine{width:clamp(7rem,16vw,10rem);height:auto}
.colophon{flex:1 1 16rem;max-width:32rem;font-size:.9375rem;line-height:1.8}
.demo-note{margin-bottom:1rem}
.motion-tools button{background:none;color:inherit;border-color:var(--oro)}
:focus-visible{outline:3px solid var(--kin);outline-offset:3px}
.f-lil :focus-visible{outline-color:var(--ai)}
/* Sheets meet in a straight join, as on a real emaki, marked at most by the thin gold thread */
.scena+.scena,.coda{border-top:1px solid var(--oro)}
html.motion-active .scena+.scena,html.motion-active .coda{border-top:0;border-right:1px solid var(--oro)}
html.motion-active .veduta{border-inline:1px solid var(--oro)}
html.motion-active .pizzo{border-left:0}
html.motion-active .g-lemon{border-left:1px solid var(--oro)}
.corso{display:none}
.motion-tools.in-rail{display:none}
/* The kit's skip link is sized in em-less pixels: on this larger body type it would peek under the top edge */
.skip{font-size:.875rem;line-height:1.4}

/* ---------- Scroll: only with motion on ---------- */
html.motion-active{--bar:4.75rem;--rail:0px;--cima:calc(var(--bar) + .75rem);--piede:1.5rem;--alto:calc(100svh - var(--cima) - var(--piede));--giu:calc(var(--piede) + 100lvh - 100svh);--pw:calc(100svh*.76)}
@media (min-width:700px) and (min-aspect-ratio:1/1){html.motion-active{--bar:0px;--rail:clamp(5.5rem,8.5vw,8rem);--cima:clamp(1rem,3.4svh,2.25rem);--piede:clamp(1rem,3.4svh,2.25rem);--pw:calc(100svh*1.333);--cap:clamp(1.0625rem,calc(var(--alto)*.03),1.625rem)}}
html.motion-active body{overflow-x:clip}
html.motion-active .hd{position:fixed;z-index:30;top:0;left:0;right:0;height:auto;min-height:4.75rem;padding:0 max(14px,env(safe-area-inset-left))}
html.motion-active .hd .home img{width:62px}
.rotolo{position:relative}
html.motion-active .palco{position:sticky;top:0;height:100svh;height:100lvh;overflow:hidden;overflow:clip;width:100%}
html.motion-active .nastro{position:absolute;top:0;right:0;height:100%;width:max-content;display:flex;flex-direction:row-reverse;padding-left:var(--rail);will-change:transform}
html.motion-active .nastro>main{display:flex;flex-direction:row-reverse;height:100%;flex:none}
html.motion-active .scena{flex-wrap:nowrap;flex:none;height:100%;padding:var(--cima) 0 var(--giu) 0;gap:0;align-items:stretch;overflow:clip}
html.motion-active .gusti,html.motion-active .ft,html.motion-active .gusto,html.motion-active .carnitas,html.motion-active .bevande,html.motion-active .giorni{flex:none;flex-wrap:nowrap;flex-direction:row-reverse}
html.motion-active .gusti{gap:0}
html.motion-active .hikari{display:block;position:absolute;top:0;bottom:0;left:-30%;width:90%;background:linear-gradient(100deg,transparent 20%,rgba(255,246,214,.5) 50%,transparent 80%);pointer-events:none}

html.motion-active .jo{padding:0;width:auto}
html.motion-active .testata{height:100%;padding:var(--cima) clamp(.5rem,2.5vw,2.5rem) var(--giu) clamp(.4rem,1.2vw,1.25rem);gap:clamp(.4rem,1.2vw,1.25rem)}
html.motion-active .entra{flex:none;height:100%}
html.motion-active .pizzo{height:100%;width:var(--pw)}
html.motion-active .quadro img.pan{transform:scale(1.12)}

html.motion-active .storia{padding-left:var(--stacco);gap:var(--stacco)}
html.motion-active .storia .grande{margin-right:var(--stacco)}
html.motion-active .righe{flex:none;flex-wrap:nowrap;height:100%;gap:clamp(.5rem,1.6vw,1.75rem)}
html.motion-active .furgone{flex:none;width:calc(100svh*1.331);height:100lvh;max-height:none;margin:calc(var(--cima)*-1) 0 calc(var(--giu)*-1) 0;aspect-ratio:auto}
html.motion-active .ft{height:100%;gap:clamp(1rem,2.4vw,2.75rem);padding:0 var(--stacco)}
html.motion-active .gusto{height:100%;gap:clamp(.75rem,1.8vw,2rem);padding:0 var(--stacco)}
html.motion-active .gusto+.gusto:not(.g-lemon):not(.g-berry)::before{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--oro)}
html.motion-active .dett{height:100%}
html.motion-active .ritaglio{align-self:center}
html.motion-active .f-plain{width:min(calc(var(--alto)*1.04),135vw);flex:none}
html.motion-active .f-banana{width:min(calc(var(--alto)*.98),125vw);flex:none}
html.motion-active .g-berry{padding:0 0 0 0;gap:clamp(.75rem,1.8vw,2rem)}
html.motion-active .g-berry .nome{margin-right:var(--stacco)}
html.motion-active .pieno{height:100svh;width:calc(100svh*1.333);max-height:none;margin:calc(var(--cima)*-1) 0 calc(var(--giu)*-1) 0;flex:none;aspect-ratio:auto}
html.motion-active .g-lemon{margin:calc(var(--cima)*-1) 0 calc(var(--giu)*-1) 0;height:100lvh;padding:var(--cima) var(--stacco) var(--giu);gap:clamp(1rem,3vw,3.5rem);overflow:clip}
html.motion-active .carnitas{height:100%;gap:clamp(.75rem,2vw,2.25rem);padding:0 var(--stacco);flex:none}
html.motion-active .f-carnitas{width:min(calc(var(--alto)*1.05),135vw);align-self:flex-end;flex:none;margin-bottom:calc(var(--giu)*-1)}
html.motion-active .bevande{height:100%;gap:clamp(1rem,2.4vw,2.5rem);padding:0 var(--stacco)}
html.motion-active .gruppo li{min-height:0;height:var(--alto)}
html.motion-active .voce{max-height:calc(var(--alto) - 4.5rem)}
html.motion-active .date{gap:clamp(1.25rem,2.6vw,3rem);padding-left:var(--stacco);padding-right:var(--stacco)}
html.motion-active .giorni{gap:clamp(1rem,2.4vw,2.5rem)}
html.motion-active .contatti{gap:clamp(1.25rem,2.6vw,3rem);padding:var(--cima) clamp(1.5rem,5vw,5rem) var(--giu)}
html.motion-active .recapiti{align-self:flex-end;flex:none;width:clamp(18rem,44vw,24rem)}
@media (min-width:700px){.tel{white-space:nowrap}.mail,.colophon{font-size:1.0625rem}}
html.motion-active .coda{flex:none;height:100%;width:clamp(19rem,28vw,30rem);flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-end;padding:var(--cima) clamp(1.25rem,3vw,3rem) var(--giu)}
html.motion-active .colophon{flex:none}
html.motion-active .corso{display:block;position:absolute;left:var(--rail);right:0;bottom:calc(100lvh - 100svh);height:3px;background:rgba(10,20,35,.34);z-index:5}
html.motion-active .corso i{position:absolute;inset:0;background:var(--kin);transform:scaleX(0);transform-origin:100% 50%;display:block}

/* On tall screens a landscape picture at full height would take three screens: it stays full height but crops to about one and a half */
@media (max-aspect-ratio:1/1){
  html.motion-active .furgone{width:min(calc(100svh*1.331),150vw)}
  html.motion-active .furgone img{object-position:18% 60%}
  html.motion-active .pieno{width:min(calc(100svh*1.333),160vw)}
}

/* Rail: on wide screens the header is the roller the scroll comes out of */
@media (min-width:700px) and (min-aspect-ratio:1/1){
  html.motion-active .hd{bottom:0;right:auto;height:auto;width:var(--rail);flex-direction:column;justify-content:flex-start;padding:clamp(.75rem,2.6svh,1.75rem) 0;gap:clamp(.75rem,3svh,2rem);box-shadow:1px 0 0 var(--oro)}
  html.motion-active .hd .home img{width:clamp(4rem,6.4vw,6rem);max-height:22svh;object-fit:contain}
  html.motion-active .hd nav{flex-direction:column;gap:clamp(.25rem,1.6svh,1rem);align-items:center}
  html.motion-active .hd nav a{writing-mode:vertical-rl;min-height:0;min-width:44px;padding:.4rem 0;justify-content:center;font-size:clamp(.8125rem,2svh,1rem)}
}

@media (min-width:700px) and (min-aspect-ratio:1/1) and (min-height:720px){
  html.rotolo-vivo .motion-tools.in-rail{display:flex;position:fixed;z-index:31;left:1rem;bottom:1rem;justify-content:center;color:#fff}
  html.rotolo-vivo .in-rail button{background:var(--ai);color:inherit;border-color:var(--oro)}
  html.motion-active .motion-tools.in-rail{left:0;bottom:clamp(1rem,3svh,1.75rem);width:var(--rail)}
  html.motion-active .in-rail button{writing-mode:vertical-rl;min-width:44px;min-height:0;padding:.7rem 0;background:none}
}

/* Up to 369 wide (the common 360 included) the links must stay on one row: at 360 and 361 they wrapped and the header grew to 99 px. */
@media (max-width:369px){
  html.motion-active .hd .home img{width:52px}
  .hd nav{gap:4px}
  .hd nav a{padding:0 3px;font-size:.8125rem;letter-spacing:.02em}
}
/* On the phone the roll stops on one contact screen, title above the numbers; logo and demo note sit below the roll, in plain vertical flow */
@media (max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
  html.motion-active .contatti{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:minmax(0,1fr) auto;gap:clamp(.75rem,2.4svh,1.5rem) 1rem;width:100vw;padding:var(--cima) 1.5rem var(--giu)}
  html.motion-active .contatti .etichetta{grid-area:1/3;white-space:nowrap}
  /* The title is 5.3 em tall and the numbers about 13 rem: on a short screen (under about 590 px of svh) it gets a little smaller so both stay on one contact sheet, never below a fourteenth of the height. */
  html.motion-active .invito-t{grid-area:1/2;align-self:start;font-size:max(calc(var(--tipo)/14),min(calc(var(--tipo)/10.5),calc((var(--alto) - 14.5rem)/5.4)));white-space:nowrap}
  html.motion-active .recapiti{grid-area:2/1/auto/-1;align-self:end;width:auto;min-width:0}
  html.motion-active .recapiti .sn{min-height:0}
  html.motion-active .coda{width:auto;height:auto;justify-content:flex-start;padding:clamp(2rem,6vw,4rem) 1.5rem;border-right:0;border-top:1px solid var(--oro)}
  html.motion-active .colophon{width:100%;max-width:none}
  html.motion-active .fine{flex:none;width:clamp(8rem,40vw,10rem)}
  html.motion-active .nastro{padding-left:0}
  /* With enlarged text the last link wraps to a second row instead of leaving the screen */
  html.motion-active .hd nav{flex-wrap:wrap;justify-content:flex-end;min-width:0}
}
/* Every block keeps inside the visible height: enlarged text turns into more columns, the strip simply gets longer. */
:where(html.motion-active .nastro .tate,html.motion-active .gruppo h4){max-height:var(--alto)}
html.motion-active .gruppo li{width:auto;min-width:calc(var(--voce)*2.7)}
html.motion-active.largo :is(.nome-marca,.sotto-marca,.cosa,.ora.solo,.contatti .etichetta,.invito-t),
html.motion-active.alti :is(.contatti .etichetta,.invito-t){white-space:normal}
.sosta{display:none}
/* Phone: the roll rests sheet by sheet. moto.mjs lays the blocks out so that no word stands on the edge of a rest; the native snap holds those rests. */
@media (max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
  html.motion-active.soste{scroll-snap-type:y mandatory}
  html.motion-active .sosta{display:block;position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
  html.motion-active.soste .coda{scroll-snap-align:end}
  /* Type one size down, so that a title, its details and its price share one rest instead of taking two; the invitation is never cut in two. On a tall, narrow screen the type follows the width: more columns would not fit one sheet. */
  html.motion-active{--tipo:min(var(--alto),190vw);--cap:clamp(1.0625rem,calc(var(--tipo)*.026),1.375rem);--riga:clamp(1.125rem,calc(var(--tipo)*.033),1.875rem);--sub:clamp(1.125rem,calc(var(--tipo)*.036),2rem);--stacco:1rem}
  html.motion-active .seconda :is(.r7,.r8){font-size:calc(var(--tipo)/12)}
  html.motion-active .r8{--off:.5em}
  html.motion-active .titolone:not(.cn){font-size:calc(var(--tipo)/11.4)}
  html.motion-active .titolone:not(.cn) .r:nth-child(-n+2){display:inline}
  html.motion-active .g-plain{--n:6.6}
  html.motion-active .titolone.cn{font-size:calc(var(--tipo)/12)}
  html.motion-active .dove{font-size:min(calc(var(--tipo)/14),13vw)}
  html.motion-active .etichetta-grande{font-size:calc(var(--tipo)/6.5)}
  html.motion-active .gruppo{--voce:clamp(1.125rem,calc(var(--tipo)*.03),1.5rem)}
  html.motion-active .gruppo .prezzo{font-size:clamp(1rem,calc(var(--tipo)*.024),1.25rem)}
  html.motion-active :is(.f-plain,.f-banana,.f-carnitas){width:min(calc(100vw - var(--stacco)*2),var(--alto));flex:none}
  html.motion-active .quando{font-size:min(calc(var(--tipo)/11),16.4vw)}
  html.motion-active .date{gap:.75rem}
  html.motion-active .giorno{display:grid;grid-template-columns:auto auto;grid-template-rows:auto minmax(0,1fr);gap:.6rem;height:100%}
  html.motion-active .quando{grid-area:1/2/3/3}
  html.motion-active .giorno .ora{grid-area:1/1;justify-self:end}
  html.motion-active .luogo{grid-area:2/1;justify-self:end;max-height:calc(var(--alto)*.7)}
  /* Plain and banana: the dish below, its words above, so each flavour takes one rest instead of two. With enlarged text the old two-rest layout returns.
     The words are stretched to the row, so on a short screen the note takes a second column instead of running under the dish. */
  html.motion-active:not(.largo) .pila{--n:10.5;display:grid;grid-template-columns:auto auto;grid-template-rows:minmax(0,1fr) auto;justify-content:end;align-items:stretch;gap:.75rem 1rem;width:100vw;box-sizing:border-box;padding:0 var(--stacco)}
  html.motion-active:not(.largo) .pila .nome{grid-area:1/2;max-height:100%}
  html.motion-active:not(.largo) .pila .dett{grid-area:1/1;height:auto;min-height:0}
  html.motion-active:not(.largo) .pila .nota{max-height:100%}
  html.motion-active:not(.largo) .pila .ritaglio{grid-area:2/1/3/3;align-self:end;justify-self:end}
  /* Lemon: name, details and price on one gold sheet. */
  html.motion-active .g-lemon{--n:14;gap:.75rem;min-width:100vw;box-sizing:border-box}
  html.motion-active:is(.largo,.alti) .contatti{display:flex;flex-flow:row-reverse nowrap;width:auto;gap:1rem}
  html.motion-active:is(.largo,.alti) .invito-t{max-height:var(--alto)}
  html.motion-active:is(.largo,.alti) .recapiti{flex:none;width:calc(100vw - 3rem);align-self:center}
}
/* The narrowest phones (320 wide): side margin of 12 px instead of 16, so the small words that sit by a title fit the same sheet (moto.mjs keeps the same figure). */
@media (max-width:339px){
  html.motion-active{--stacco:.75rem}
}
@media (min-width:900px){
  html:not(.motion-active) .gusti{display:contents}
  html:not(.motion-active) .ft{flex:0 0 auto;flex-wrap:nowrap}
  html:not(.motion-active) .g-plain{flex:1 1 0;min-width:0;flex-wrap:nowrap}
  html:not(.motion-active) .g-plain .f-plain{flex:1 1 0;min-width:0;align-self:center}
  html:not(.motion-active) .g-plain .dett .prezzo{position:absolute;left:0;bottom:0}
  html:not(.motion-active) .gusto:not(.g-plain){flex:1 1 100%}
}
/* Enlarged text: titles stay one long column inside the page, the glyphs clear the edge and the place moves below the date */
@media (max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
  html:not(.motion-active) main :is(section,div,.gruppo ul,.gruppo ol,.giorno){flex-wrap:wrap;max-width:100%}
  html:not(.motion-active) .gruppo li{min-width:calc(var(--voce)*2.7);width:max-content;max-width:100%}
  html:not(.motion-active) .dett{flex:0 1 auto}
  html:not(.motion-active) :is(h1,h2,h3,h4,.riga,.invito-t,.quando){max-height:none;height:max-content;max-width:100%}
  html:not(.motion-active) :is(h1,h2,h3,h4,.tate,.riga,.quando){padding-block-start:.15em}
  html:not(.motion-active) .tate:has(>.r){display:flex;flex-flow:column wrap}
}
@media print{.hd,.corso{display:none}}

/* The drinks heading shares the first sheet with its list, even on a short phone. */
.bevande-apre{display:contents}
.carnitas-apre{display:contents}
@media(max-width:699px) and (max-height:620px), (min-width:700px) and (max-width:1099px) and (orientation:portrait) and (max-height:620px){
 html.motion-active:not(.largo) .pila .nome{font-size:calc(var(--tipo)/12)}
 html.motion-active:not(.largo) .pila .ritaglio{height:calc(var(--alto)*.42);width:calc(100vw - var(--stacco)*2);align-self:end}
 html.motion-active:not(.largo) .pila .ritaglio img{width:100%;height:100%;object-fit:contain;object-position:right bottom}
}
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .carnitas-apre{--n:10.5;display:grid;grid-template-columns:auto auto;grid-template-rows:minmax(0,1fr) auto;justify-content:end;align-items:stretch;gap:.75rem 1rem;width:calc(100vw - var(--stacco)*2);height:100%;flex:none}
 html.motion-active:not(.largo) .carnitas-apre>.nome{grid-area:1/2;max-height:100%}
 html.motion-active:not(.largo) .carnitas-apre>.dett{grid-area:1/1;height:auto;min-height:0}
 html.motion-active:not(.largo) .carnitas-apre>.f-carnitas{grid-area:2/1/3/3;width:100%;align-self:end;justify-self:end;margin:0}
 html.motion-active:not(.largo) .bevande-apre{display:grid;grid-template-rows:40px minmax(0,1fr);height:100%;width:calc(100vw - var(--stacco)*2);flex:none;justify-items:end}
 html.motion-active:not(.largo) .bevande-apre>.etichetta-grande{writing-mode:horizontal-tb;font-size:28px;line-height:1.2;letter-spacing:.02em;max-width:100%;height:auto}
 html.motion-active:not(.largo) .bevande-apre .gruppo{height:100%;gap:10px;max-width:100%;box-sizing:border-box;--voce:18px}
 html.motion-active:not(.largo) .bevande-apre .gruppo h4{font-size:18px}
 html.motion-active:not(.largo) .bevande-apre .gruppo li{height:calc(var(--alto) - 40px);width:calc(var(--voce)*2.5)}
 html.motion-active:not(.largo) .bevande-apre .voce{max-height:calc(var(--alto) - 110px)}
 html.motion-active:not(.largo) .gruppo li{justify-content:center}
 html.motion-active:not(.largo) .gruppo .prezzo{margin-top:12px}
 html.motion-active:not(.largo) .f-carnitas{width:calc((100vw - var(--stacco)*2)*.55);align-self:center;margin-bottom:0}
}
/* mezza porzione sulla riga del gusto (mail Chiaki 02/11) */
.prezzo .mezza{display:block;margin-top:.45em;font-size:.72em;white-space:nowrap}
.prezzo .mezza .tax{display:inline;margin-left:.3em;font-size:.8em}
/* Telefono: la mezza va a capo dopo «ハーフ» e il 税込 sotto, così il prezzo non allarga la colonna e il gusto resta in una schermata */
@media (max-width:899px){
  .prezzo .mezza{width:min-content;white-space:normal;word-break:keep-all}
  .prezzo .mezza .tax{display:block;margin:.2em 0 0}
}
/* Decisione 04/11: la Lemon ha la sua foto vera (mezza porzione) come la Berry, a tutta altezza accanto a nome e prezzo,
   con la nota ※ sotto il prezzo. La carnitas è la tortilla vera nella vaschetta, intera: non più tagliata dal bordo in basso. */
.hs{font-size:max(12px,.7em);letter-spacing:.03em;color:var(--ai);opacity:.85}
.g-lemon .hs{margin-block-start:1em}
html.motion-active .g-lemon{padding-left:0}
html.motion-active .f-carnitas{width:min(calc(var(--alto)*.74),90vw);align-self:center;margin-bottom:0}
/* Telefono: la Lemon si impagina come i gusti a pila (nome e prezzo sopra, foto intera sotto), così il piatto non è mai tagliato. */
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-lemon{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;justify-content:end;align-items:stretch;gap:.75rem 1rem;width:calc(100vw - var(--stacco)*2);height:calc(100lvh - var(--cima) - var(--giu));box-sizing:content-box;padding:var(--cima) var(--stacco) var(--giu);--n:17;column-gap:.6rem}
 html.motion-active:not(.largo) .g-lemon .nome{grid-area:1/2;max-height:100%}
 html.motion-active:not(.largo) .g-lemon .dett{grid-area:1/1;height:auto;min-height:0;justify-self:end;min-width:0}
 html.motion-active:not(.largo) .g-lemon .f-lemon{grid-area:2/1/3/3;width:calc(100vw - var(--stacco)*2);height:auto;max-height:none;aspect-ratio:1400/1038;margin:0;justify-self:end;align-self:end}
}
/* La nota ※ sta nei dettagli; sul telefono, dove la colonna in più non entra, passa in basso sulla foto. */
.hs-foto{display:none}
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-lemon .dett .hs{display:none}
 html.motion-active:not(.largo) .hs-foto{display:block;position:absolute;left:0;bottom:0;padding:.35em .7em;background:var(--kin);color:var(--ai);font-size:12px;line-height:1.4;letter-spacing:.04em}
}
/* La vaschetta della Lemon sta in basso nella foto: il ritaglio e l'ingrandimento del movimento tolgono cielo sopra, mai il piatto sotto. */
.f-lemon .quadro img{object-position:50% 70%;transform-origin:50% 90%}
/* Regola del 04/11: nome, prezzo e foto intera nella stessa schermata anche su computer. Col movimento la foto Lemon si
   stringe quanto serve per stare accanto al nome; prezzo e nota ※ diventano due linguette oro sull'angolo della foto,
   attaccate alla colonna del testo. Senza movimento la foto sta accanto al testo, non sotto, come la Plain. */
@media (min-width:700px){
 html.motion-active .g-lemon .f-lemon{width:min(calc(100svh*1.333),calc(100vw - 58svh - 9rem))}
 html.motion-active .g-lemon .f-lemon .quadro img{object-position:38% 70%;scale:.9}
 html.motion-active .g-lemon .dett{position:relative}
 html.motion-active .g-lemon .dett .hs{display:none}
 html.motion-active .g-lemon .dett .prezzo{position:absolute;right:calc(100% + clamp(.75rem,1.8vw,2rem));bottom:calc(25px - var(--giu));z-index:2;margin:0;padding:.5em .9em .45em;background:var(--kin);white-space:nowrap}
 html.motion-active .g-lemon .hs-foto{display:block;position:absolute;right:0;bottom:0;z-index:2;padding:4px 10px;background:var(--kin);color:var(--ai);font-size:12px;line-height:17px;letter-spacing:.04em}
}
@media (min-width:900px){
 html:not(.motion-active) .g-lemon{flex-wrap:nowrap;align-items:center}
 html:not(.motion-active) .g-lemon .f-lemon{flex:1 1 0;min-width:0;width:auto;margin-inline:0;aspect-ratio:1400/1038;max-height:none}
 html:not(.motion-active) .carnitas .f-carnitas{flex:1 1 0;min-width:14rem;max-width:min(40rem,62svh);width:auto}
}
/* Telefono: foto Lemon più alta, così il campo oro sopra resta sotto metà schermo; il taglio toglie solo vaschetta a destra, mai il toast. */
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-lemon .f-lemon{aspect-ratio:1.1;max-height:40lvh}
 html.motion-active:not(.largo) .g-lemon .f-lemon .quadro img{object-position:18% 70%;transform-origin:18% 90%}
}
/* Computer senza movimento: la foto Lemon più grande e quadrata, così non galleggia nel campo oro; il taglio toglie solo tavolo, mai il toast. */
@media (min-width:900px){
 html:not(.motion-active) .g-lemon .f-lemon{flex:1.35 1 0;aspect-ratio:4/5;max-height:calc(100svh - 6rem)}
 html:not(.motion-active) .g-lemon .f-lemon .quadro img{object-position:40% 70%}
}
/* Lemon, giro 3 della review: niente scorrimento interno della foto (spostava il taglio sul toast), inquadratura che tiene toast, crema e fetta laterale. */
html.motion-active .g-lemon .f-lemon .quadro img.pan{transform:none!important;scale:1}
@media (min-width:700px){html.motion-active .g-lemon .f-lemon .quadro img{object-position:47% 70%}}
@media (max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-lemon .f-lemon{aspect-ratio:1}
 html.motion-active:not(.largo) .g-lemon .f-lemon .quadro img{object-position:40% 70%}
}
@media (min-width:900px){
 html:not(.motion-active) .g-lemon .f-lemon{flex:2 1 0;aspect-ratio:1/1;max-height:calc(100svh - 5rem)}
 html:not(.motion-active) .g-lemon .f-lemon .quadro img{object-position:46% 62%}
}
/* Lemon senza movimento su computer: foto a tutta altezza fino al bordo sinistro, come la Mixed berry; meno campo oro vuoto. */
@media (min-width:900px){
 html:not(.motion-active) .g-lemon{align-items:stretch}
 html:not(.motion-active) .g-lemon .f-lemon{flex:2 1 0;aspect-ratio:auto;height:auto;max-height:none;align-self:stretch;margin-block:calc(clamp(2.5rem,9vw,5rem)*-1);margin-left:calc(var(--bordo)*-1)}
 html:not(.motion-active) .g-lemon .f-lemon .quadro img{object-position:46% 62%}
}
@media (min-width:900px) and (max-width:1199px){html:not(.motion-active) .g-lemon{--n:10;padding-block:3rem}html:not(.motion-active) .g-lemon .f-lemon{margin-block:-3rem}html:not(.motion-active) .g-lemon .dett .hs{display:none}html:not(.motion-active) .g-lemon .hs-foto{display:block;position:absolute;right:0;bottom:0;padding:4px 10px;background:var(--kin);color:var(--ai);font-size:12px;line-height:17px;letter-spacing:.04em}}
/* Lemon al telefono, giro 4 della review: foto a filo dei bordi e fino al fondo dello schermo, niente cornice oro;
   senza movimento la stessa impaginazione (nome a destra, dettagli a sinistra, foto sotto), così nome, prezzo e piatto stanno insieme. */
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-lemon .f-lemon{justify-self:stretch;width:auto;margin:0 calc(var(--stacco)*-1) calc(var(--giu)*-1);aspect-ratio:auto;height:min(calc(100vw*1.1),50lvh);max-height:none}
 html.motion-active:not(.largo) .g-lemon .f-lemon .quadro img{object-position:46% 70%}
 html:not(.motion-active) .g-lemon{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.75rem .6rem;padding-bottom:0;--n:17}
 html:not(.motion-active) .g-lemon .nome{grid-area:1/2}
 html:not(.motion-active) .g-lemon .dett{grid-area:1/1;justify-self:end}
 html:not(.motion-active) .g-lemon .f-lemon{grid-area:2/1/3/3;width:auto;margin:0 calc(var(--bordo)*-1);aspect-ratio:auto;height:min(calc(100vw*1.1),50svh);max-height:none}
 html:not(.motion-active) .g-lemon .f-lemon .quadro img{object-position:46% 70%}
}
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){html.motion-active:not(.largo) .g-lemon .f-lemon{height:min(calc(100vw*1.1),50lvh,calc(100lvh - 22rem))}html:not(.motion-active) .g-lemon .f-lemon{height:min(calc(100vw*1.1),50svh,calc(100svh - 22rem))}}
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-lemon .f-lemon{width:100vw;margin-inline:0;justify-self:center}
 html:not(.motion-active) .g-lemon .dett .hs{display:none}
 html:not(.motion-active) .g-lemon .hs-foto{display:block;position:absolute;left:0;bottom:0;padding:.35em .7em;background:var(--kin);color:var(--ai);font-size:12px;line-height:1.4;letter-spacing:.04em}
}
@media (min-width:1200px) and (max-height:700px){html:not(.motion-active) .g-lemon{padding-block:3rem}html:not(.motion-active) .g-lemon .f-lemon{margin-block:-3rem}}
/* Lemon col movimento su schermi poco larghi (1024x768, 1180x820): la foto non scende mai sotto 0,85 volte l'altezza, così toast, limoni e crema restano interi; nome e spazi si stringono per restare nella stessa schermata. */
@media (min-width:700px){html.motion-active .g-lemon .f-lemon{width:max(calc(100lvh*.85),min(calc(100svh*1.333),calc(100vw - 58svh - 9rem)))}}
@media (min-width:700px) and (max-aspect-ratio:3/2){html.motion-active .g-lemon{--n:10;gap:1rem;padding-right:1rem}}

/* Maison fixes 20261105 WP2 */
/* Approved correction: complete product sheets, same Emaki colours and vertical reading. */
html:not(.motion-active) .gusti{display:flex;flex-direction:column;gap:0}
html:not(.motion-active) .g-plain{flex:1 1 100%;min-width:0}
html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry){width:100%;min-height:min(86svh,780px);margin:0;padding:24px;box-sizing:border-box}
:is(.g-plain,.g-banana,.g-berry){display:grid;grid-template-columns:minmax(0,56fr) minmax(0,20fr) minmax(0,24fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:24px;background:linear-gradient(90deg,var(--lil) 0 calc(56% - 6px),var(--ai) calc(56% - 6px) 100%);--n:8.5}
:is(.g-plain,.g-banana,.g-berry)>.nome{grid-area:1/3;align-self:center;justify-self:end;max-height:100%;min-height:0;font-size:clamp(42px,min(7vw,calc(var(--alto)/8.2)),104px)}
.g-plain>.nome{font-size:clamp(48px,min(9vw,calc(var(--alto)/5.2)),132px)}
:is(.g-plain,.g-banana,.g-berry)>.dett{grid-area:1/2;align-self:center;justify-self:end;min-height:0;height:100%;max-width:100%;min-width:0}
:is(.g-plain,.g-banana,.g-berry)>.ritaglio{grid-area:1/1;align-self:center;justify-self:center;width:100%;min-width:0;max-width:700px;height:100%;margin:0;transform:none!important}
:is(.g-plain,.g-banana,.g-berry)>.ritaglio img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
html.motion-active :is(.g-plain,.g-banana,.g-berry){width:calc(var(--foglio,100vw) - var(--rail));min-width:0;box-sizing:border-box;padding:0 24px;height:100%;gap:24px}
html.motion-active :is(.g-plain,.g-banana,.g-berry)>.ritaglio{width:100%;height:100%;flex:none}
html.motion-active :is(.g-plain,.g-banana,.g-berry)>.nome{max-height:100%}
.g-lemon .prezzo{display:flex;align-items:baseline;gap:.6em;flex-wrap:nowrap;font-size:clamp(18px,1.7vw,28px);white-space:nowrap}
.g-lemon .prezzo>.tax{display:inline;font-size:.55em;margin:0}
.g-lemon .prezzo .mezza{display:inline-flex;align-items:baseline;gap:.2em;margin:0;font-size:.8em;white-space:nowrap}
.g-lemon .prezzo .mezza .tax{display:inline;font-size:.65em;margin:0}
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) :is(.g-plain,.g-banana,.g-berry){width:var(--foglio,100vw);grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,45fr) minmax(0,55fr);padding:0 var(--stacco);gap:12px 16px;background:linear-gradient(180deg,var(--ai) 0 45%,var(--lil) 45% 100%)}
 html.motion-active:not(.largo) :is(.g-plain,.g-banana,.g-berry)>.nome{grid-area:1/2;align-self:start;font-size:min(15vw,calc(var(--alto)/8));max-height:100%}
 html.motion-active:not(.largo) :is(.g-plain,.g-banana,.g-berry)>.dett{grid-area:1/1;align-self:stretch;justify-self:end;height:100%;min-height:0}
 html.motion-active:not(.largo) :is(.g-plain,.g-banana,.g-berry)>.ritaglio{grid-area:2/1/3/3;height:100%;width:min(100%,700px);max-height:100%;align-self:center;justify-self:center}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry){min-height:0;height:min(100svh,850px);grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,45fr) minmax(0,55fr);padding:20px var(--bordo);gap:12px 16px;background:linear-gradient(180deg,var(--ai) 0 45%,var(--lil) 45% 100%)}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>.nome{grid-area:1/2;font-size:min(15vw,calc(var(--alto)/8));align-self:start;max-height:100%}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>.dett{grid-area:1/1;height:100%;align-self:stretch}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>.ritaglio{grid-area:2/1/3/3;width:min(100%,700px);height:100%;max-height:100%;justify-self:center}
 html.motion-active:not(.largo) .g-lemon{--lemon-photo-h:min(calc(var(--foglio,100vw)*1.1),50lvh,calc(100lvh - 22rem));width:var(--foglio,100vw);min-width:0;box-sizing:border-box}
 html.motion-active:not(.largo) .g-lemon .f-lemon{width:var(--foglio,100vw);height:var(--lemon-photo-h);margin-inline:0}
 html.motion-active:not(.largo) .g-lemon .dett{position:static}
 html.motion-active:not(.largo) .g-lemon .prezzo{position:absolute;left:var(--stacco);right:auto;bottom:calc(var(--lemon-photo-h) + 12px);top:auto;font-size:18px;margin:0;padding:0;background:none}
 html:not(.motion-active) .g-lemon{--lemon-photo-h:min(110vw,50svh,calc(100svh - 22rem));position:relative}
 html:not(.motion-active) .g-lemon .dett{position:static}
 html:not(.motion-active) .g-lemon .prezzo{position:absolute;left:var(--bordo);right:auto;bottom:calc(var(--lemon-photo-h) + 12px);font-size:18px;padding:0;background:none}
 html:not(.motion-active) .g-lemon .f-lemon{height:var(--lemon-photo-h)}
}
@media(min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-lemon{--n:17;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;padding:var(--cima) var(--stacco) var(--giu);height:100lvh;gap:12px 16px}
 html.motion-active:not(.largo) .g-lemon .nome{grid-area:1/2;max-height:100%;font-size:calc(var(--tipo)/17)}
 html.motion-active:not(.largo) .g-lemon .dett{grid-area:1/1;height:auto;min-height:0}
 html.motion-active:not(.largo) .g-lemon .f-lemon{grid-area:2/1/3/3;max-height:none;aspect-ratio:auto;align-self:end;justify-self:center;margin:0 0 calc(var(--giu)*-1)}
 html.motion-active:not(.largo) .g-lemon .dett .hs{display:none}
 html.motion-active:not(.largo) .g-lemon .f-lemon .quadro img{object-position:46% 70%}
 html.motion-active:not(.largo) .g-lemon .hs-foto{display:block;left:0;right:auto;bottom:0}
}
/* Enlarged text must keep the existing multi-sheet fallback rather than clip. */
html.motion-active.largo :is(.g-plain,.g-banana,.g-berry){display:flex;flex-flow:row-reverse nowrap;width:auto;background:var(--ai)}
html.motion-active.largo :is(.g-plain,.g-banana,.g-berry)>.ritaglio{width:min(700px,calc(var(--foglio,100vw) - 32px));height:auto}

/* Details occupy their own column; legacy flex rows and static Plain price cannot spill over the food. */
:is(.g-plain,.g-banana,.g-berry)>.dett{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;column-gap:.35rem;row-gap:16px}
:is(.g-plain,.g-banana,.g-berry)>.dett>.en{grid-area:1/2;justify-self:end}
:is(.g-plain,.g-banana,.g-berry)>.dett>.nota{grid-area:1/1;justify-self:end}
html:is(.motion-active,:not(.motion-active)) :is(.g-plain,.g-banana,.g-berry)>.dett>.prezzo{position:static;inset:auto;grid-area:2/1/3/3;align-self:end;justify-self:start;max-width:100%;white-space:normal}
:is(.g-plain,.g-banana,.g-berry)>.dett>:is(.nota,.en){max-height:100%;min-height:0}
/* Berry belongs to the same complete reading sheet; retain its photograph and show all of it. */
html:is(.motion-active,:not(.motion-active)) .g-berry>.nome{margin-right:0}
html:is(.motion-active,:not(.motion-active)) .g-berry>.veduta{grid-area:1/1;align-self:stretch;justify-self:center;position:relative;inset:auto;width:100%;min-width:0;max-width:700px;height:100%;max-height:100%;margin:0;flex:none;aspect-ratio:auto}
.g-berry>.veduta>.quadro{display:block;width:100%;height:100%;background:var(--lil)}
html:is(.motion-active,:not(.motion-active)) .g-berry>.veduta img.pan{width:100%;height:100%;object-fit:contain;transform:none!important}
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html.motion-active:not(.largo) .g-berry>.veduta,html:not(.motion-active) .g-berry>.veduta{grid-area:2/1/3/3;width:min(100%,700px);height:100%;max-height:100%;align-self:center;justify-self:center}
 html.motion-active.largo .g-berry>.veduta{width:min(700px,calc(var(--foglio,100vw) - 32px));height:100%;grid-area:auto}
}

/* Keep static Plain at its intended sheet height: flex-basis 100% otherwise expands it. */
html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry){flex:0 0 auto}
html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry) .prezzo .mezza{white-space:normal}
/* Static compact pages let details wrap naturally before the complete photograph. */
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry){display:flex;flex-flow:row-reverse wrap;height:auto;min-height:min(100svh,850px);align-content:space-between;gap:16px;background:var(--ai)}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>.nome{flex:0 0 auto;align-self:start;height:auto;max-height:none;max-width:100%}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>.dett{display:flex;flex:1 1 min(100%,6.5rem);flex-flow:column nowrap;align-self:start;width:auto;height:auto;min-width:0;min-height:0;max-width:100%;gap:.5rem}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>.dett>:is(.nota,.en){writing-mode:horizontal-tb;height:auto;max-height:none;min-height:0;overflow-wrap:anywhere}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>.dett>.prezzo{align-self:start;width:auto;max-width:100%;white-space:normal}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>:is(.ritaglio,.veduta){flex:0 0 100%;align-self:center;width:100%;height:min(44svh,max(160px,calc(100svh - 25rem)),500px);max-height:none;background:var(--lil)}
 html:not(.motion-active) .g-berry>.veduta .quadro{height:100%}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>:is(.ritaglio,.veduta) img{width:100%;height:100%;max-height:none;object-fit:contain}
}
@media(max-width:699px){
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry){padding-inline:20px}
 html:not(.motion-active) :is(.g-plain,.g-banana,.g-berry)>:is(.ritaglio,.veduta){height:min(44svh,max(160px,calc(100svh - 107.2vw - 56px)),500px)}
}
/* Keep the skip link out of view until keyboard focus, even with enlarged text. */
.skip:not(:focus){transform:translateY(-100%)}
/* end Maison fixes WP2 */

/* Maison fixes 20261105 WP2-R1: compact static text must reflow. */
@media(max-width:699px), (min-width:700px) and (max-width:1099px) and (orientation:portrait){
 html:not(.motion-active) :is(.ft .intro,.carnitas .testo,.date .dove){writing-mode:horizontal-tb;width:100%;min-width:0;max-width:100%;height:auto;max-height:none;overflow-wrap:anywhere;word-break:normal}
 html:not(.motion-active) .date .dove{display:block}
 html:not(.motion-active) .recapiti .sn{flex-wrap:wrap;min-width:0}
 html:not(.motion-active) .g-lemon{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;gap:12px 16px}
 html:not(.motion-active) .g-lemon .nome{grid-area:1/2/3/3}
 html:not(.motion-active) .g-lemon .dett{display:contents}
 html:not(.motion-active) .g-lemon .dett :is(.en,.nota){writing-mode:horizontal-tb;min-width:0;max-width:100%;height:auto;max-height:none;overflow-wrap:anywhere}
 html:not(.motion-active) .g-lemon .dett .en{grid-area:1/1}
 html:not(.motion-active) .g-lemon .dett .nota{grid-area:2/1}
 html:not(.motion-active) .g-lemon .prezzo{position:static;inset:auto;grid-area:3/1/4/3;justify-self:start;max-width:100%;flex-wrap:wrap}
 html:not(.motion-active) .g-lemon .f-lemon{grid-area:4/1/5/3;height:min(110vw,50svh);max-height:none}
 html:not(.motion-active) .g-lemon .f-lemon .quadro{background:var(--kin)}
 html:not(.motion-active) .g-lemon .f-lemon .quadro img{object-fit:contain}
}
/* end Maison fixes WP2-R1 */

/* Maison fixes 20261105 WP2 landscape Lemon */
@media (min-width:700px) and (min-aspect-ratio:1/1) and (max-aspect-ratio:3/2){
 html.motion-active .g-lemon{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:minmax(0,1fr);width:calc(100vw - var(--rail));box-sizing:border-box;gap:1rem;padding:0 1rem 0 0}
 html.motion-active .g-lemon .f-lemon{grid-area:1/1;width:100%;min-width:0;max-width:none;height:100%;margin:0;align-self:stretch}
 html.motion-active .g-lemon .dett{grid-area:1/2;height:var(--alto);align-self:center}
 html.motion-active .g-lemon .nome{grid-area:1/3}
 html.motion-active .g-lemon .f-lemon .quadro{background:var(--kin)}
 html.motion-active .g-lemon .f-lemon .quadro img.pan{object-fit:contain;object-position:center}
}
/* end Maison fixes WP2 landscape Lemon */