/* 03-sankyu. Two colours, always as whole fields. Cherry: Chérie, affection and a fashion cover. Ivory: the cream, and the air between posters.
   The only other colour on the page is the food. */
:root{--ci:#7A0F2A;--av:#FFF4E6;--b:Bodoni,ZenKaku,serif;--k:ZenKaku,sans-serif;--pad:clamp(20px,4vw,72px);--alt:calc((100svh - var(--pad)*2)*.76)}
html{background:var(--ci)}
body{font:500 clamp(15px,1.05vw,18px)/1.9 var(--k);color:var(--ci);letter-spacing:.03em;overflow-x:clip}
.opening,html.pre-intro{--opening-paper:#7A0F2A}
.opening-caption{font-family:var(--k);font-weight:900}
.def{position:absolute}
a{text-underline-offset:.22em;text-decoration-thickness:1px}
.tax{font-family:var(--k);font-weight:500;font-size:.5em;letter-spacing:.04em;margin-left:.35em}
h1,h2,h3,h4{font-weight:900;font-feature-settings:'palt' 1;word-break:auto-phrase}
b{font-weight:900}

/* Header: part of the poster, on cherry only. */
.hd{position:absolute;z-index:6;left:0;top:0;display:flex;flex-direction:column;justify-content:space-between;width:clamp(120px,11vw,190px);height:100svh;padding:clamp(16px,2vw,28px);color:var(--av)}
.hd .home{display:block;width:100%;max-width:104px}
.hd .home img{width:100%;height:auto}
.hd nav{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(14px,1vw,16px);line-height:1.4}
.hd nav a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.hd nav a:hover{text-decoration:underline}

/* The 39. --u is the length of 1000 font units: every measure of the figure follows it. */
.zero{background:var(--ci)}
.palco{position:relative;height:100svh;min-height:420px;--u:min(41.6vw,66svh);color:var(--av)}
.cifre{position:absolute;inset:0;overflow:clip}
.lastra{display:none;position:absolute;left:0;top:0;width:100%;height:100lvh}
.dig{position:absolute}
.cifra{display:block;width:100%;height:auto;fill:var(--av);overflow:visible}
.tre{width:calc(var(--u)*1.112);right:calc(var(--u)*1.09 - 7vw);top:calc(50% - var(--u)*.77)}
.nove{width:calc(var(--u)*1.16);right:-7vw;top:calc(50% - var(--u)*.77)}
.foro{position:absolute;left:39.655%;top:.26%;width:20.69%;height:63.117%;clip-path:url(#foroClip);background:var(--ci) url(../_k/foto/berry-mano-800.webp) 65% 50%/auto 104%}
.marca{position:absolute;right:calc(-7vw + var(--u)*.64);top:calc(50% + var(--u)*.25);width:calc(var(--u)*.44)}
.marca .marca-titolo{font:900 calc(var(--u)*.074)/1 var(--b);letter-spacing:.01em;font-variation-settings:'opsz' 28;word-break:normal}
.sotto{font:500 calc(var(--u)*.03)/1.2 var(--b);margin-top:.7em;letter-spacing:.02em;font-variation-settings:'opsz' 11}

/* Ivory curtain: the first page after the plate. */
.apre{background:var(--av);min-height:100svh;padding:clamp(72px,12vh,140px) var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,8vh,96px)}
.apre h2{font-size:clamp(15px,1.2vw,20px);line-height:1.4;letter-spacing:.2em}
.ft{font-size:min(calc((100vw - var(--pad)*2)/8.2),10.4vw,176px);line-height:1.16;letter-spacing:-.01em}
.ft span{display:block}
.ft .uno{font-style:normal;margin:0 -.2em 0 -.33em}
.intro{max-width:32em;font-size:clamp(16px,1.3vw,21px);line-height:2;align-self:flex-end}

/* A flavour, a poster. The name is the subject; each one stands where its own letters want to stand.
   --alt is the height a name may take: about three quarters of the screen, so a whole name always has room to be read in one go. */
.poster{position:relative;overflow:clip;min-height:max(100svh,520px);padding:var(--pad);display:grid;align-items:end}
.nome{writing-mode:vertical-rl;font-feature-settings:normal;line-height:1;letter-spacing:0;font-size:var(--em);word-break:normal;white-space:nowrap;align-self:start;position:relative;z-index:1}
.nome span{display:block}
.info{position:relative;z-index:3;word-break:auto-phrase;line-break:strict;overflow-wrap:normal;font-size:clamp(15.5px,1.05vw,17px);line-height:1.7}
.en{overflow-wrap:normal;font:500 clamp(19px,1.7vw,28px)/1.2 var(--b);font-variation-settings:'opsz' 28;letter-spacing:.01em;margin-bottom:.4em}
.prezzo{font:500 1rem/1 var(--k);margin-top:.9em;white-space:nowrap;letter-spacing:0}
.prezzo b{font:900 clamp(24px,2vw,34px)/1 var(--b);font-variation-settings:'opsz' 28;letter-spacing:.005em}
.piatto{position:absolute;z-index:2;pointer-events:none}
.piatto img{width:100%;height:auto}

.p-plain{--em:min(calc(var(--alt)/4.04),46vw);background:var(--ci);color:var(--av);grid-template-columns:1fr auto;column-gap:16px}
.p-plain .nome{grid-column:2;grid-row:1}
.p-plain .info{grid-column:1;grid-row:1}
.p-plain .piatto{left:-9vw;top:15svh;width:min(68vw,50svh)}

.p-berry{--em:min(calc(var(--alt)/7.04),30vw);background:var(--av);grid-template-columns:auto 1fr;column-gap:20px}
.p-berry .nome{grid-column:1;grid-row:1}
.p-berry .info{grid-column:2;grid-row:1;justify-self:start}
.p-berry .piatto{right:-31vw;top:14svh;width:min(98vw,72svh)}

.p-lemon{--em:min(calc(var(--alt)/7.04),30vw);background:var(--ci);color:var(--av);grid-template-columns:1fr auto;column-gap:16px}
.p-lemon .nome{grid-column:2;grid-row:1}
.p-lemon .info{grid-column:1;grid-row:1}
.p-lemon .en{font-size:17px}
.lim{grid-column:1;grid-row:1;align-self:start;justify-self:start;writing-mode:vertical-rl;font-feature-settings:normal;font-weight:900;font-size:clamp(34px,10.4vw,44px);line-height:1;letter-spacing:.04em}

/* Banana without motion: the photograph, then its poster. */
.p-banana{padding:0;display:block;background:var(--ci);color:var(--av)}
.piastra img{width:100%;height:min(100svh,75vw);object-fit:cover;object-position:60% 55%}
.varco{margin:0}
.varco img{width:100%;height:min(100svh,63vw);object-fit:cover;object-position:58% 50%}
.pannello{position:relative;overflow:clip;min-height:max(100svh,520px);padding:var(--pad);display:grid;--em:min(calc((100svh - var(--pad)*2)/4.04),calc(50vw - var(--pad)))}
.legenda{display:contents}
.pannello .nome{justify-self:end}
.pannello .info{position:absolute;left:var(--pad);bottom:var(--pad);width:calc(var(--em) - 8px)}
.vetro{display:none}

/* Carnitas: the yellow disc is the counter of the 9, seen once more. */
.carni{position:relative;overflow:clip;background:var(--av);padding:var(--pad);min-height:max(100svh,560px);display:flex;flex-direction:column;gap:clamp(16px,3vh,32px)}
.carni h3{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.1em;font-size:min(calc((100vw - var(--pad)*2)/12.5),60px);line-height:1.24;position:relative;z-index:3}
.dieci{white-space:nowrap;font:900 4em/.76 var(--b);font-variation-settings:'opsz' 96;letter-spacing:-.02em}
.resto{min-width:0;max-width:100%}
.resto span{display:block}
.carni .piatto{position:relative;align-self:center;width:min(100%,66svh);z-index:1}
.carni .info{max-width:34em}
.corpo{margin-top:.8em}
.carni .voce{border-top:1px solid currentColor;padding-top:clamp(12px,2vh,20px)}
.cn-nome{font-size:clamp(28px,3.2vw,52px);line-height:1.2;margin-bottom:.25em}
.carni .voce .prezzo{font-size:clamp(20px,1.6vw,26px);margin-top:.5em}

/* Drinks: the one quiet column after the posters. */
.bere{background:var(--ci);color:var(--av);padding:clamp(72px,12vh,160px) var(--pad);display:grid;gap:clamp(32px,6vw,96px)}
.bere h3{font-size:clamp(50px,12vw,190px);line-height:1}
.colonna{width:100%;max-width:25em}
.gruppo{padding:1.2em 0}
.gruppo h4{font-size:1em;letter-spacing:.2em;margin-bottom:.5em}
.gruppo li{display:flex;justify-content:space-between;gap:1em;align-items:baseline;padding:.34em 0;line-height:1.5;word-break:auto-phrase;overflow-wrap:normal}
.y{white-space:nowrap;letter-spacing:0}
.y b{font:900 1.3em/1 var(--b);font-variation-settings:'opsz' 28}
.y .tax{font-size:.62em}
.mnota{font-size:.875em;line-height:1.9;padding-top:1.2em}

/* Story: one vertical heading, the lines run round it. */
#story{background:var(--av);overflow:clip;padding:clamp(72px,12vh,160px) var(--pad);display:flow-root;font-size:clamp(17px,1.5vw,25px);line-height:1.9}
#story h2{float:right;writing-mode:vertical-rl;font-feature-settings:normal;font-size:min(calc((100svh - var(--pad)*2)/5.1),34vw);line-height:1;letter-spacing:0;white-space:nowrap;margin:0 0 .15em .16em}
.r,.dnota,.demo-note,.mnota,.intro,.corpo,.nota{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word;text-wrap:pretty}
.r{display:flow-root;min-width:min(11em,100%)}
.r{margin-bottom:1.1em}
.nw{display:inline-block;max-width:100%}
.r:last-child{margin-bottom:0}
.ventiq{font:900 2.5em/.8 var(--b);font-variation-settings:'opsz' 96;letter-spacing:-.02em;vertical-align:-.06em;margin:0 .04em}
.r7,.r8{font-weight:900;font-size:1.34em;line-height:1.5}
@media(min-width:900px){#story{padding-left:calc(var(--pad) + 20vw);padding-right:calc(var(--pad) + 6vw)}}

/* Dates: the figures do the work, each with its place next to it from the start. */
#dates{background:var(--ci);color:var(--av);padding:clamp(72px,12vh,140px) var(--pad)}
#dates h2{font-size:clamp(15px,1.2vw,20px);letter-spacing:.2em;line-height:1.4}
.domanda{font-weight:900;font-feature-settings:'palt' 1;font-size:clamp(32px,7.4vw,128px);line-height:1.2;margin:.3em 0 clamp(32px,6vh,72px);word-break:auto-phrase}
.giorni{display:grid;gap:clamp(30px,5vh,56px)}
.giorni li{display:grid;grid-template-columns:1.28em 1fr;column-gap:.08em;align-items:end;font-size:clamp(92px,28vw,250px)}
.g{display:block;position:relative;white-space:nowrap;font:900 1em/.76 var(--b);font-variation-settings:'opsz' 96;letter-spacing:-.02em;text-align:right}
.dinfo{font-size:clamp(16px,1.15vw,19px);line-height:1.6;padding-left:.4em;word-break:auto-phrase;line-break:strict;overflow-wrap:normal}
.q{font-weight:900;font-size:1.2em}
.dnota{margin-top:clamp(28px,5vh,48px);max-width:34em}

/* Contact */
#contact{background:var(--av);padding:clamp(72px,12vh,140px) var(--pad)}
.eti{letter-spacing:.2em;font-weight:900}
#contact h2{font-size:clamp(40px,9.2vw,168px);line-height:1.14;margin:.2em 0 .4em}
.invito{font-size:clamp(18px,1.8vw,28px)}
.vie{margin-top:clamp(20px,4vh,40px);display:grid;gap:.2em;font-size:clamp(16px,2.4vw,40px);line-height:1.4}
.vie a{display:inline-flex;align-items:center;min-height:48px}
.vie a[href^=tel]{font:900 clamp(32px,9.6vw,132px)/1.1 var(--b);font-variation-settings:'opsz' 11;text-decoration:none;letter-spacing:-.005em;white-space:nowrap}
.vie a[href^=tel]:hover{text-decoration:underline}
.poi{font-size:clamp(16px,1.15vw,19px)}
.poi span{font:500 1.15em/1 var(--b);font-variation-settings:'opsz' 11;margin-right:.3em}

/* The last poster: the same 39, closed. */
.fine{position:relative;overflow:clip;background:var(--ci);color:var(--av);padding:clamp(56px,10vh,120px) var(--pad) var(--pad);--u:min(40vw,62svh)}
.saluto{display:flex;gap:calc(var(--u)*.06);justify-content:center}
.saluto .dig{position:static;width:calc(var(--u)*1.14)}
.grazie{font:500 clamp(22px,3vw,48px)/1.2 var(--b);font-variation-settings:'opsz' 28;text-align:center;margin:.7em 0 1.6em}
.fine nav{display:flex;flex-wrap:wrap;gap:0 1.6em;justify-content:center}
.fine nav a{display:inline-flex;align-items:center;min-height:44px}
.demo-note{font-size:.8125rem;line-height:1.8;text-align:center;margin:1.4em auto;max-width:36em;letter-spacing:.02em}
.motion-tools{justify-content:center}
.motion-tools button{font-family:var(--k);letter-spacing:.03em}

@media(max-width:360px){
  .gruppo li{font-size:14px;letter-spacing:0;gap:.7em}
  .giorni li{font-size:80px}
  .dinfo{font-size:14px;letter-spacing:0}
  #story{font-size:15px;letter-spacing:0}
  #story h2{font-size:min(calc((100svh - var(--pad)*2)/5.1),26vw)}
}
/* Portrait: the digits stack on a diagonal, the only way a 39 can fill a telephone. */
@media(max-aspect-ratio:4/5){
  .hd{width:100%;height:auto;flex-direction:row;align-items:flex-start;padding:12px 14px 0}
  .hd .home{width:64px}
  .hd nav{flex-direction:row;gap:12px;font-size:14px}
  .palco{--u:min(calc((100svh - 92px)/3),68vw)}
  .tre{right:auto;left:-2vw;top:84px}
  .nove{right:-2vw;top:calc(84px + var(--u)*1.46)}
  .marca{right:auto;left:14px;top:calc(84px + var(--u)*2.42);width:calc(100vw - var(--u)*.92);max-width:calc(var(--u)*.74);min-width:112px}
  .marca .marca-titolo{font-size:max(19px,calc(var(--u)*.094))}
  .sotto{font-size:max(12px,calc(var(--u)*.042))}
}
/* Very short phones: side by side, name underneath. */
@media(max-height:520px) and (max-width:640px){
  .hd{padding-top:8px}
  .hd .home{width:48px}
  .palco{--u:calc(47vw - 20px)}
  .tre{left:6px;top:76px}
  .nove{right:6px;left:auto;top:76px}
  .marca{left:14px;top:calc(76px + var(--u)*1.6);max-width:none;width:auto}
  .marca .marca-titolo{font-size:19px}
  .marca .marca-titolo br{display:none}
}

@media(min-width:900px){
  :root{--alt:calc((100svh - var(--pad)*2)*.86)}
  .p-plain{--em:min(calc(var(--alt)/4.04),30vw)}
  .p-plain .piatto{left:8vw;top:6svh;width:min(60vw,97svh)}
  .p-berry .piatto{right:-6vw;top:5svh;width:min(66vw,120svh)}
  .p-berry .info{justify-self:end;text-align:right}
  .p-lemon{--em:calc((100vw - var(--pad)*2)/7.06);grid-template-columns:1fr;align-items:start;align-content:space-between;row-gap:clamp(16px,3vh,40px)}
  .p-lemon .nome{writing-mode:horizontal-tb;grid-column:1;grid-row:2;line-height:1.1;letter-spacing:-.01em;font-feature-settings:'palt' 1}
  .lim{grid-column:1;grid-row:1;writing-mode:horizontal-tb;font-size:clamp(20px,2vw,32px)}
  .p-lemon .info{grid-column:1;grid-row:3;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:2em}
  .p-lemon .en{font:900 clamp(34px,5.4vw,96px)/1 var(--b);font-variation-settings:'opsz' 96;grid-row:1/3;margin:0}
  .p-lemon .nota{grid-column:2}.p-lemon .prezzo{grid-column:2}
  .carni{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:4vw}
  .carni h3{grid-column:1;grid-row:1;align-self:end;font-size:clamp(23px,2.9vw,60px)}
  .carni .info{grid-column:1;grid-row:2;align-self:start}
  .carni .voce{grid-row:3}
  .carni .piatto{grid-column:2;grid-row:1/4;width:min(100%,86svh)}
  .bere{grid-template-columns:1fr minmax(0,25em)}
  .bere h3{writing-mode:vertical-rl;font-feature-settings:normal;justify-self:start}
  .giorni{grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);align-items:start}
  .giorni li{display:block;font-size:clamp(130px,16vw,300px)}
  .g{text-align:left}
  .dinfo{padding:.9em 0 0}
}

/* Text at 200 %: nothing here changes the page at normal size. Name and details share a line while they fit, then the details drop under the name;
   a name in two columns does the same. Big type wraps instead of being cut. */
.info,.en,.dinfo,.gruppo li{overflow-wrap:break-word}
.p-plain,.p-berry{display:flex;flex-wrap:wrap}
.p-plain{flex-direction:row-reverse}
.p-plain .info,.p-berry .info,.p-lemon .info{flex:1 1 0}
.nome,.lim,#story h2{contain:paint}
.gruppo li{flex-wrap:wrap}
.v{flex:1 1 0;min-width:min(6em,100%)}
.giorni li{display:flex;flex-wrap:wrap;align-items:flex-end}
.g{flex:0 0 1.28em;max-width:100%}
.dinfo{flex:1 1 0;min-width:0}
@media(min-width:900px){.dinfo{flex-basis:100%}}
.vie a[href^=tel]{white-space:normal;overflow-wrap:break-word}
.pannello{grid-template-columns:minmax(0,1fr)}
.pannello .nome{writing-mode:horizontal-tb;display:flex;flex-flow:row-reverse wrap;align-items:flex-start;max-width:100%}
.pannello .nome span{writing-mode:vertical-rl}
html:not(.motion-active) .nome{z-index:3}
html:not(.motion-active) .pannello .info{position:static;width:auto}
@media(max-width:899px){
  .p-lemon{display:flex;flex-flow:row-reverse wrap}
  .p-lemon .nome{writing-mode:horizontal-tb;display:flex;flex-flow:row-reverse wrap;align-items:flex-start;max-width:100%}
  .p-lemon .nome span{writing-mode:vertical-rl}
  .lim{position:absolute;left:var(--pad);top:var(--pad)}
}
@media(max-aspect-ratio:4/5) and (min-height:521px){
  html:not(.motion-active) .palco{height:auto;min-height:max(100svh,420px);display:flow-root}
  html:not(.motion-active) .marca{position:relative;top:0;margin-top:calc(84px + var(--u)*2.42)}
}

/* Everything below exists only with motion on. */
.motion-active .lastra{display:block}
.motion-active .foro{display:none}
.motion-active .dig.tre,.motion-active .dig.nove{visibility:hidden}
.motion-active .hd{position:fixed;transform-origin:var(--ox,0) var(--oy,0)}
.motion-active .zero{height:300svh;background:none}
.motion-active .palco{position:sticky;top:0;overflow-x:clip;overflow-y:visible}
.motion-active .marca{transform-origin:var(--mx,0) var(--my,0)}
/* After the zoom the same header returns as a thin line, only when you scroll back up. */
.motion-active .hd.bar{inset:0 0 auto;width:100%;height:60px;flex-direction:row;align-items:center;padding:6px var(--pad);background:var(--ci);transform:translateY(-101%);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.motion-active .hd.bar.su,.motion-active .hd.bar:focus-within{transform:none}
.motion-active .hd.bar .home{width:44px;flex:none}
.motion-active .hd.bar nav{flex-direction:row;gap:clamp(12px,3vw,32px);font-size:14px}
/* Two plates stay behind the page: the zoom's photo, then, once the menu's opening sheet has covered it, the banana seen through its poster. */
.motion-active .p-banana{background:none}
.motion-active .piastra,.motion-active .varco{position:fixed;z-index:-2;top:0;left:50%;width:min(100vw,1820px);height:100lvh;margin-left:calc(min(100vw,1820px)/-2);overflow:hidden;background:var(--ci)}
.motion-active .varco{z-index:-1}
.motion-active .varco.via{visibility:hidden}
.motion-active .apre{min-height:100lvh}
.motion-active .piastra img{height:100%}
.motion-active .varco img{height:100%;transform-origin:0 0;will-change:transform}
.motion-active .pannello{margin-top:62svh;display:block;--vh:calc(100svh - var(--pad)*2);--vw:calc(100vw - var(--pad)*2);--lv:min(var(--vw),var(--vh)/2);--cella:calc(var(--lv)/2 + var(--vw) - var(--lv) - 12px)}
.motion-active .vetro{position:relative;z-index:1;overflow:visible}
.motion-active .vetro.v{display:block;width:var(--lv);height:auto;margin-left:auto}
/* The letters are a window; the name is also set in plain type beside the note and the price, so it never has to be read through the photograph. */
.motion-active .legenda{display:block;position:absolute;z-index:3;left:var(--pad);bottom:var(--pad);width:var(--cella)}
.motion-active .legenda .nome{writing-mode:horizontal-tb;display:block;justify-self:auto;font-size:min(calc(var(--cella)/4.3),clamp(26px,3.4vw,44px));line-height:1.25;margin:0 0 .45em}
.motion-active .legenda .nome span{writing-mode:horizontal-tb}
.motion-active .legenda .info{position:static;width:auto}
/* Short phones: the cell under the letters is only about 150 px high, so the name goes on one line and the block stays inside it. */
@media(max-height:700px) and (max-aspect-ratio:1/1){
  .motion-active .legenda .nome{font-size:min(26px,calc(var(--cella)/7.4));line-height:1.3;margin-bottom:.3em}
  .motion-active .legenda .nome span{display:inline}
}
.motion-active .piatto img{will-change:transform}
.fetta{display:none}
.motion-active .g.taglia{color:transparent}
.motion-active .fetta{display:block;position:absolute;inset:0;color:var(--av);pointer-events:none;will-change:transform}
@media(min-aspect-ratio:1/1){
  .motion-active .pannello{--lh:min(var(--vw),var(--vh)*2);--cella:calc(var(--lh)/4)}
  .motion-active .vetro.v{display:none}
  .motion-active .vetro.h{display:block;width:var(--lh);height:auto}
  .motion-active .legenda{left:calc(var(--pad) + var(--lh)*.76);right:auto}
}

/* Big screen: nothing after the posters may fall back to fine print. */
@media(min-width:900px){
  .info{font-size:clamp(17px,1.35vw,22px)}
  .prezzo b{font-size:clamp(32px,2.8vw,46px)}
  .intro{font-size:clamp(17px,1.45vw,23px)}
  .apre h2,#dates h2{font-size:clamp(17px,1.35vw,22px)}
  .dinfo{font-size:clamp(18px,1.5vw,24px)}
  .poi{font-size:clamp(17px,1.35vw,22px)}
  .colonna{font-size:clamp(18px,1.6vw,26px);max-width:30em}
  .mnota{font-size:.94em}
  .dnota{font-size:clamp(17px,1.35vw,22px)}
  .eti{font-size:clamp(17px,1.35vw,22px)}
}
@media print{.hd{position:static}}
/* mezza porzione sulla riga del gusto (mail Chiaki 02/11) */
.prezzo{white-space:normal}
.mezza{display:inline-block;white-space:nowrap;margin-left:.75em}
.mezza b{font-size:.74em}
@media (max-width:699px){.mezza{display:block;margin:.35em 0 0}}
/* Feedback 03/11 (computer): info accanto al nome del gusto, testi piccoli più leggibili, inglese del Lemon meno gridato */
@media(min-width:900px){
  .poster .en,.legenda .en{font-size:clamp(26px,2.2vw,36px)}
  .poster .nota,.legenda .nota{font-size:clamp(18px,1.5vw,24px)}
  .mezza b{font-size:.8em}
  .p-plain .info{justify-self:end;text-align:right}
  .p-berry .info{justify-self:start;text-align:left}
  .p-lemon .en{font-size:clamp(32px,3.6vw,60px)}
}
@media(min-width:900px){.p-lemon .info{grid-template-columns:auto auto;justify-content:start}}
/* Decisione 04/11: la foto vera della Lemon (mezza porzione, 期間限定) sta accanto a nome e prezzo, intera e senza tagli.
   Telefono: foto in alto a tutta larghezza, poi 期間限定, nome e prezzo nella stessa schermata. Computer: foto a sinistra
   per tutta l'altezza del poster, testo a destra, centrato. */
.p-lemon{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:start;align-items:start;row-gap:clamp(12px,2.2vh,26px);min-height:0;--em:calc((100vw - var(--pad)*2)/7.06)}
.p-lemon .foto{grid-column:1;grid-row:1;margin:calc(-1*var(--pad)) calc(-1*var(--pad)) clamp(4px,1vh,12px)}
.p-lemon .foto img{display:block;width:100%;height:auto}
.p-lemon .lim{position:static;grid-column:1;grid-row:2;writing-mode:horizontal-tb;font-size:clamp(18px,2vw,30px)}
.p-lemon .nome{grid-column:1;grid-row:3;writing-mode:horizontal-tb;display:block;max-width:none;line-height:1.1;letter-spacing:-.01em;font-feature-settings:'palt' 1}
.p-lemon .nome span{display:block;writing-mode:horizontal-tb}
.p-lemon .info{grid-column:1;grid-row:4;display:block}
.p-lemon .en{font:500 clamp(19px,1.7vw,28px)/1.2 var(--b);font-variation-settings:'opsz' 28;grid-row:auto;margin:0 0 .4em}
.hs{margin-top:.9em;font-size:clamp(13px,.95vw,15px);line-height:1.5;letter-spacing:.04em}
@media(min-width:900px){
  .p-lemon{grid-template-columns:minmax(0,58fr) minmax(0,42fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(32px,4vw,72px);--em:calc((42vw - var(--pad) - clamp(32px,4vw,72px))/7.2)}
  .p-lemon .foto{grid-column:1;grid-row:1/6;margin:calc(-1*var(--pad)) 0 calc(-1*var(--pad)) calc(-1*var(--pad))}
  .p-lemon .lim{grid-column:2;grid-row:2}
  .p-lemon .nome{grid-column:2;grid-row:3}
  .p-lemon .info{grid-column:2;grid-row:4}
  .p-lemon .en{font-size:clamp(26px,2.2vw,36px)}
}
/* Carnitas (decisione 04/11): la tortilla vera nella sua vaschetta, colori originali, sul disco giallo che prima era nella foto. */
.carni .piatto{display:grid;place-items:center}
.carni .piatto::before{content:"";grid-area:1/1;width:92%;aspect-ratio:1;border-radius:50%;background:#F8D31E}
.carni .piatto img{grid-area:1/1;width:80%;position:relative}

/* Maison fixes 20261105 WP1 */
/* Planner candidate: same Sankyu palette, typography and 39 intro; complete product frames. */
.poster:is(.p-plain,.p-berry){display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"photo name" "photo info";height:100svh;min-height:0;padding:0;gap:0;align-items:stretch}
.p-plain{background:var(--ci);color:var(--av)}
.poster.p-berry{grid-template-columns:minmax(0,44fr) minmax(0,56fr);grid-template-areas:"name photo" "info photo";background:var(--av);color:var(--ci)}
:is(.p-plain,.p-berry)>.nome{grid-area:name;align-self:end;justify-self:center;max-width:100%;max-height:100%;margin:24px;font-size:min(11vw,calc((50svh - 48px)/4.04),112px);contain:none}
.p-berry>.nome{font-size:min(7vw,calc((50svh - 48px)/7.2),84px)}
:is(.p-plain,.p-berry)>.info{grid-area:info;align-self:start;justify-self:center;text-align:left;margin:0;padding:12px 24px 24px;max-width:100%}
:is(.p-plain,.p-berry)>.piatto{grid-area:photo;position:relative;inset:auto;align-self:stretch;justify-self:stretch;display:grid;place-items:center;margin:0;width:100%;height:100%;background:var(--av);overflow:clip}
.p-berry>.piatto{background:var(--ci)}
:is(.p-plain,.p-berry)>.piatto img{width:min(92%,700px);height:auto;max-height:calc(100svh - 48px);object-fit:contain;transform:none!important}
.p-banana,html.motion-active .p-banana{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);grid-template-rows:minmax(0,1fr);min-height:0;height:100svh;padding:0;gap:0;background:var(--ci);color:var(--av)}
.p-banana .piastra,html.motion-active .p-banana .piastra{position:relative;inset:auto;z-index:0;width:100%;height:100%;margin:0;display:grid;place-items:center;background:var(--av)}
.p-banana .piastra img,html.motion-active .p-banana .piastra img{width:min(100%,700px);height:auto;max-height:100%;object-fit:contain;object-position:center}
.p-banana .pannello,html.motion-active .p-banana .pannello{position:relative;margin:0;padding:24px;min-height:0;display:grid;align-items:center;overflow:visible}
.p-banana .vetro,html.motion-active .p-banana .vetro{display:none!important}
.p-banana .legenda,html.motion-active .p-banana .legenda{position:static;inset:auto;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.p-banana .legenda .nome,html.motion-active .p-banana .legenda .nome{grid-column:2;writing-mode:horizontal-tb;display:flex;flex-flow:row-reverse nowrap;font-size:min(10vw,calc((76svh - 48px)/4.2),104px);line-height:1.05;margin:0;contain:none}
.p-banana .legenda .nome span,html.motion-active .p-banana .legenda .nome span{writing-mode:vertical-rl}
.p-banana .legenda .info,html.motion-active .p-banana .legenda .info{grid-column:1;grid-row:1;position:static;inset:auto;width:auto;max-width:100%}
@media(max-width:899px){
 .poster:is(.p-plain,.p-berry){grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,52fr) minmax(0,48fr);grid-template-areas:"photo photo" "info name"}
 .poster.p-berry{grid-template-rows:minmax(0,48fr) minmax(0,52fr);grid-template-areas:"info name" "photo photo"}
 :is(.p-plain,.p-berry)>.nome{align-self:center;margin:12px 18px 12px 4px;font-size:min(24vw,calc((44svh - 28px)/4.04))}
 .p-berry>.nome{font-size:min(20vw,calc((44svh - 28px)/7.2))}
 :is(.p-plain,.p-berry)>.info{align-self:center;justify-self:start;padding:16px 8px 16px 18px;font-size:15.5px}
 :is(.p-plain,.p-berry)>.piatto img{width:min(92%,700px);height:100%;max-height:100%;object-fit:contain;padding:12px}
 .p-banana,html.motion-active .p-banana{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,52fr) minmax(0,48fr)}
 .p-banana .pannello,html.motion-active .p-banana .pannello{padding:16px 18px}
 .p-banana .legenda,html.motion-active .p-banana .legenda{gap:12px}
 .p-banana .legenda .nome,html.motion-active .p-banana .legenda .nome{font-size:min(21vw,calc((44svh - 28px)/4.2))}
 .p-banana .piastra img,html.motion-active .p-banana .piastra img{width:100%;height:100%;object-fit:contain}
 .p-banana .info,.p-banana .en{font-size:15.5px}
}


/* Use the real photograph's own ratio instead of letterboxing Banana. */
.p-banana,html.motion-active .p-banana{height:auto;min-height:0;align-items:stretch}
.p-banana .piastra,html.motion-active .p-banana .piastra{height:auto;aspect-ratio:4/3}
.p-banana .piastra img,html.motion-active .p-banana .piastra img{width:100%;height:100%;max-height:none;object-fit:contain}
@media(max-width:899px){.p-banana,html.motion-active .p-banana{grid-template-rows:auto auto}.p-banana .pannello,html.motion-active .p-banana .pannello{min-height:0}.p-banana .legenda .nome,html.motion-active .p-banana .legenda .nome{font-size:min(21vw,calc((44svh - 28px)/4.2))}}

@media(max-width:899px){
 :is(.p-plain,.p-berry,.p-banana) .info{min-width:0}
 :is(.p-plain,.p-berry,.p-banana) .mezza{white-space:normal;max-width:100%;overflow-wrap:normal}
}
/* end Maison fixes WP1 */

.skip:not(:focus){transform:translateY(-100%)}

/* Maison fixes WP1-landscape */
@media(min-width:700px) and (max-width:899px) and (orientation:landscape){.p-banana,html.motion-active .p-banana{grid-template-columns:minmax(0,56fr) minmax(0,44fr);grid-template-rows:auto;height:auto;align-items:stretch}.p-banana .piastra,html.motion-active .p-banana .piastra{height:calc(100svh - 60px);min-height:240px;aspect-ratio:auto;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.p-banana .piastra img,html.motion-active .p-banana .piastra img{min-width:0;min-height:0;max-height:100%}.p-banana .legenda .nome,html.motion-active .p-banana .legenda .nome{font-size:min(10vw,calc((100svh - 108px)/4.2),72px)}}
/* end Maison fixes WP1-landscape */