/* ==========================================================================
   MARGHERÌ — Pizzeria Trattoria Italiana · Estepona & Sotogrande
   Palette and graphic language taken from the house logo, the printed menu
   cards (turchese), the checkerboard ceiling and the daisy floor inlay.
   ========================================================================== */

/* -------------------------------------------------------------- 1. tokens */
:root{
  /* straight off the logo */
  --blu:        #69A8DB;   /* Margherì blue — logo field          */
  --blu-vivo:   #2F7FBE;   /* interactive / links                 */
  --blu-notte:  #0B3358;   /* contrast, footers, deep panels      */
  --turchese:   #99DFEC;   /* printed menu card stock             */
  --turchese-2: #46BFD6;
  --giallo:     #F9C80A;   /* daisy centre                        */
  --oro:        #E0AB3B;   /* pizza crust                         */
  --arancio:    #E07A2B;
  --verde:      #1E6B2A;   /* basil                               */
  --rosso:      #A8331F;   /* sauce                               */
  --terra:      #632804;   /* menu headings                       */
  --crema:      #FFF6E4;
  --bianco:     #FFFFFF;
  --inchiostro: #10222F;
  --ink-soft:   #3F5568;
  --ink-faint:  #7A8FA1;
  --rule:       #E3E9EE;

  --shell:  min(1600px, 100% - 2 * var(--gutter));
  --gutter: clamp(18px, 4.4vw, 68px);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --fx-chunky: "SOFT" 100, "WONK" 1, "opsz" 144;
}

/* ------------------------------------------------------------- 2. resets */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--bianco); color:var(--inchiostro);
  font-family:var(--sans); font-size:clamp(15.5px,.5vw + 14.2px,17px);
  font-variation-settings:"wdth" 100; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--giallo); color:var(--inchiostro); }
:focus-visible{ outline:3px solid var(--blu-vivo); outline-offset:2px; }

/* ------------------------------------------------------------ 3. type kit */
h1,h2,h3,.display{
  font-family:var(--display); font-weight:800;
  font-variation-settings:var(--fx-chunky);
  letter-spacing:-.028em; line-height:.96; text-wrap:balance;
}
.d1{ font-size:clamp(3.1rem, 7.4vw, 8rem); }
.d2{ font-size:clamp(2.4rem, 5vw, 4.9rem); line-height:.98; }
.d3{ font-size:clamp(1.85rem, 3vw, 3rem); line-height:1.02; }
.d4{ font-size:clamp(1.35rem, 1.7vw, 1.85rem); line-height:1.1; letter-spacing:-.02em; }

.dek{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.22rem,1.7vw,1.75rem); line-height:1.32;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  letter-spacing:-.018em; color:var(--blu-notte);
}
.sec-turchese .dek{ color:var(--terra); }

/* condensed uppercase — the poster voice */
.eyebrow,.tag,.btn,.link,.nav a,.drop__btn,.mgroup__name,.catbar a,
.hours caption,.deflist dt,.foot h4,.menu-switch button,figcaption{
  font-family:var(--sans); font-variation-settings:"wdth" 82;
  text-transform:uppercase; letter-spacing:.11em; font-weight:700;
}
.eyebrow{
  font-size:.82rem; color:var(--blu-vivo);
  display:inline-flex; align-items:center; gap:.75em;
}
.eyebrow::before{
  content:""; width:13px; height:13px; flex:none; border-radius:50%;
  background:var(--giallo); box-shadow:0 0 0 3.5px var(--rosso);
}
.eyebrow.on-dark{ color:var(--turchese); }
.eyebrow.on-colour{ color:var(--rosso); }
.eyebrow.bare::before{ display:none; }

.lede{ font-size:clamp(1.03rem,.45vw + .95rem,1.18rem); color:var(--ink-soft); max-width:60ch; }
.lede + .lede{ margin-top:1.05rem; }
.small{ font-size:.87rem; color:var(--ink-soft); }
.tag{ font-size:.72rem; color:var(--ink-faint); }
.num{
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  font-variation-settings:var(--fx-chunky); color:var(--oro);
}

/* ------------------------------------------------------------ 4. helpers */
.shell{ width:var(--shell); margin-inline:auto; }
section{ position:relative; }
.pad{ padding-block:clamp(3.8rem,7.5vw,8rem); }
.pad-s{ padding-block:clamp(2.6rem,5vw,5rem); }
.rule{ height:2px; background:var(--rule); border:0; }

.sec-blu{ background:var(--blu); color:var(--blu-notte); }
.sec-turchese{ background:var(--turchese); color:var(--terra); }
.sec-notte{ background:var(--blu-notte); color:#E8F2FA; }
.sec-crema{ background:var(--crema); }
.sec-giallo{ background:var(--giallo); color:var(--terra); }
.sec-notte .lede,.sec-notte .small{ color:#A8C6DE; }
.sec-blu .lede{ color:#0B3358; }
.sec-turchese .lede,.sec-turchese .small{ color:#6C4526; }
.sec-giallo .lede{ color:#6C4526; }

.ratio{ position:relative; overflow:hidden; background:#E9F1F6; }
.ratio > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.r-43{ aspect-ratio:4/3; } .r-11{ aspect-ratio:1/1; } .r-45{ aspect-ratio:4/5; }
.r-34{ aspect-ratio:3/4; } .r-32{ aspect-ratio:3/2; } .r-169{ aspect-ratio:16/9; }
.r-23{ aspect-ratio:2/3; } .r-219{ aspect-ratio:21/9; } .r-54{ aspect-ratio:5/4; }

figcaption{ margin-top:.7rem; font-size:.7rem; color:var(--blu-vivo); letter-spacing:.13em; }
.sec-notte figcaption,.sec-blu figcaption{ color:inherit; opacity:.8; }
.sec-turchese figcaption{ color:var(--rosso); }

/* ------------------------------------------- 5. house graphic devices ---- */

/* checkerboard, from the Estepona ceiling */
.checker{ height:18px; width:100%;
  background-image:
    linear-gradient(45deg, var(--ck,#fff) 25%, transparent 25%, transparent 75%, var(--ck,#fff) 75%),
    linear-gradient(45deg, var(--ck,#fff) 25%, transparent 25%, transparent 75%, var(--ck,#fff) 75%);
  background-size:36px 36px; background-position:0 0, 18px 18px;
  background-color:var(--ck-bg,var(--rosso));
}

/* daisy seal — the logo mark on a colour tile */
.seal{ display:grid; place-items:center; background:var(--blu); aspect-ratio:1; }
.seal img{ width:66%; }
.seal.giallo{ background:var(--giallo); }
.seal.turchese{ background:var(--turchese); }
.seal.notte{ background:var(--blu-notte); }
.seal.rosso{ background:var(--rosso); }

/* scrolling brand ticker */
.ticker{ overflow:hidden; background:var(--blu-notte); color:var(--bianco); padding-block:1rem; }
.ticker__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.ticker__track > span{
  display:inline-flex; align-items:center; gap:1.5rem; padding-right:1.5rem;
  font-family:var(--sans); font-variation-settings:"wdth" 78; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em; font-size:.92rem; white-space:nowrap;
}
.ticker b{ color:var(--giallo); font-weight:700; }
.ticker i{ width:9px; height:9px; background:var(--turchese-2); flex:none; rotate:45deg; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ------------------------------------------------------------ 6. buttons */
.btn{
  display:inline-flex; align-items:center; gap:.65em;
  font-size:.79rem; padding:1.05em 1.75em;
  background:var(--blu-notte); color:var(--bianco);
  border:3px solid var(--blu-notte); text-decoration:none;
  box-shadow:5px 5px 0 var(--giallo);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--giallo); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--giallo); }
.btn-ghost{ background:transparent; color:var(--blu-notte); box-shadow:5px 5px 0 var(--blu); }
.btn-ghost:hover{ box-shadow:8px 8px 0 var(--blu); }
.btn-light{ background:var(--bianco); color:var(--blu-notte); border-color:var(--blu-notte); box-shadow:5px 5px 0 var(--blu-notte); }
.btn-light:hover{ box-shadow:8px 8px 0 var(--blu-notte); }
.btn-giallo{ background:var(--giallo); color:var(--terra); border-color:var(--terra); box-shadow:5px 5px 0 var(--terra); }
.btn-giallo:hover{ box-shadow:8px 8px 0 var(--terra); }

.link{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  font-size:.78rem; color:var(--blu-vivo); width:fit-content;
  padding-bottom:.3em; border-bottom:3px solid var(--giallo);
  transition:gap .28s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.link:hover{ gap:1rem; }
.link.on-dark{ color:var(--bianco); border-color:var(--turchese-2); }
.link.on-colour{ color:var(--terra); border-color:var(--rosso); }
.actions{ display:flex; flex-wrap:wrap; gap:1.1rem 1.4rem; align-items:center; }

/* ------------------------------------------------------------- 7. header */
.topbar{
  background:var(--blu-notte); color:var(--turchese);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  font-variation-settings:"wdth" 82;
}
.topbar__in{
  width:var(--shell); margin-inline:auto; display:flex; gap:1.2rem;
  align-items:center; justify-content:space-between; padding-block:.5rem;
}
.topbar a{ text-decoration:none; color:inherit; white-space:nowrap; }
.topbar a:hover{ color:var(--giallo); }
.topbar__right{ display:inline-flex; align-items:center; gap:1.3rem; }
.topbar__hide{ display:none; }
.topbar__tag{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:760px){ .topbar__hide{ display:inline-flex; gap:1.3rem; } }
@media (max-width:459px){ .topbar__tag{ font-size:.66rem; } }

/* EN / ES switch */
.langswitch{ display:inline-flex; border:2px solid var(--turchese-2); flex:none; }
.langswitch button{
  padding:.3em .62em; font-size:.68rem; font-weight:700;
  font-variation-settings:"wdth" 82; letter-spacing:.1em; color:var(--turchese);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.langswitch button + button{ border-left:2px solid var(--turchese-2); }
.langswitch button:hover{ color:var(--giallo); }
.langswitch button[aria-pressed="true"]{ background:var(--giallo); color:var(--blu-notte); }
.drawer .langswitch{ border-color:rgba(255,255,255,.4); }

.site-head{
  position:sticky; top:0; z-index:90; background:var(--bianco);
  border-bottom:3px solid var(--blu-notte);
}
.site-head__in{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  height:clamp(70px,6.4vw,92px);
}
.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; flex:none; }
.brand .seal{ width:clamp(44px,4vw,56px); }
.brand__name{ height:clamp(17px,1.5vw,23px); width:auto; }
.brand__loc{
  display:none; font-size:.64rem; letter-spacing:.17em; text-transform:uppercase;
  font-weight:700; font-variation-settings:"wdth" 80; color:var(--blu-vivo);
  border-left:3px solid var(--turchese); padding-left:.8rem; line-height:1.35;
}
@media (min-width:1180px){ .brand__loc{ display:block; } }

.nav{ display:none; }
@media (min-width:1020px){ .nav{ display:flex; align-items:center; gap:clamp(1rem,1.9vw,2.1rem); } }
.nav a,.drop__btn{
  text-decoration:none; font-size:.79rem; color:var(--inchiostro);
  padding:.55rem 0; position:relative; white-space:nowrap; display:flex; align-items:center; gap:.4em;
}
.nav a::after,.drop__btn::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:4px;
  background:var(--giallo); transition:right .3s var(--ease);
}
.nav a:hover::after,.drop__btn:hover::after,.drop.is-open .drop__btn::after,
.nav a[aria-current="page"]::after,.drop__btn[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"],.drop__btn[aria-current="page"]{ color:var(--blu-vivo); }

.drop{ position:relative; }
.drop__btn .chev{
  width:7px; height:7px; border-right:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s var(--ease);
}
.drop.is-open .drop__btn .chev{ transform:rotate(225deg) translate(-2px,-2px); }
.drop__menu{
  position:absolute; top:calc(100% + .9rem); left:50%; translate:-50% 0;
  min-width:310px; background:var(--turchese); border:3px solid var(--blu-notte);
  box-shadow:8px 8px 0 var(--blu-notte); padding:.45rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.drop:hover .drop__menu,.drop.is-open .drop__menu{ opacity:1; visibility:visible; transform:none; }
.drop__menu::before{ content:""; position:absolute; left:0; right:0; top:-1rem; height:1rem; }
.drop__menu a{
  display:block; padding:.85rem 1rem; text-transform:none; letter-spacing:-.022em;
  font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--terra);
  font-variation-settings:var(--fx-chunky); transition:background .18s var(--ease);
}
.drop__menu a::after{ display:none; }
.drop__menu a span{
  display:block; font-family:var(--sans); font-size:.66rem; font-weight:700;
  font-variation-settings:"wdth" 82; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blu-vivo); margin-top:.25rem;
}
.drop__menu a:hover{ background:var(--bianco); }

.head-cta{ display:none; }
@media (min-width:1020px){ .head-cta{ display:inline-flex; } }
.head-cta.btn{ padding:.85em 1.4em; font-size:.74rem; }

.burger{ display:grid; gap:5px; padding:.7rem; margin-right:-.7rem; }
@media (min-width:1020px){ .burger{ display:none; } }
.burger span{ display:block; width:26px; height:3px; background:var(--blu-notte);
  transition:transform .3s var(--ease), opacity .2s, background .3s; }
body.menu-open .burger span{ background:var(--bianco); }
body.menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:80; background:var(--blu-notte); color:#fff;
  padding:clamp(96px,15vh,140px) var(--gutter) 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  opacity:0; visibility:hidden; transform:translateY(-1.2rem);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y:auto;
}
body.menu-open .drawer{ opacity:1; visibility:visible; transform:none; }
body.menu-open{ overflow:hidden; }
body.menu-open .site-head{ background:transparent; border-bottom-color:transparent; }
body.menu-open .brand__name{ filter:brightness(0) invert(1); }
.drawer a{ text-decoration:none; }
.drawer__nav li{ border-top:2px solid rgba(255,255,255,.18); }
.drawer__nav li:last-child{ border-bottom:2px solid rgba(255,255,255,.18); }
.drawer__nav > li > a,.drawer__nav > li > .drawer__group > a{
  display:block; padding:.7rem 0; font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,8vw,2.6rem); font-variation-settings:var(--fx-chunky);
  letter-spacing:-.03em;
}
.drawer__sub{ padding:0 0 1rem 1.1rem; display:grid; gap:.55rem; }
.drawer__sub a{
  font-size:.8rem; font-weight:700; font-variation-settings:"wdth" 82;
  letter-spacing:.14em; text-transform:uppercase; color:var(--turchese);
}
.drawer__foot{ display:grid; gap:.85rem; justify-items:start; }
.drawer__foot a{ font-size:.85rem; color:#B7D2E6; }

/* ---------------------------------------------------------- 8. home hero */
.hero{ background:var(--blu); position:relative; }
.hero__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:920px){ .hero__grid{ grid-template-columns:minmax(0,47fr) minmax(0,53fr); } }
.hero__type{
  padding:clamp(2.2rem,4vw,4rem) clamp(1.5rem,3.4vw,3.6rem) clamp(2.4rem,4.5vw,4.2rem) 0;
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
  color:var(--blu-notte); min-height:clamp(440px,64vh,760px);
}
@media (max-width:919px){ .hero__type{ padding-right:0; min-height:0; padding-top:2.4rem; } }
.hero__lock{ width:clamp(158px,15vw,215px); }
.hero h1{ color:var(--bianco); }
.hero h1 em{ font-style:italic; color:var(--giallo); }
.hero__sub{
  font-size:clamp(1.02rem,.5vw + .92rem,1.24rem); color:var(--blu-notte);
  max-width:42ch; font-weight:500;
}
.hero__media{ position:relative; overflow:hidden; min-height:320px; }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (min-width:920px){ .hero__media{ margin-right:calc(var(--gutter) * -1); } }
@media (max-width:919px){ .hero__media{ aspect-ratio:1/1; margin-inline:calc(var(--gutter) * -1); } }
.hero__ribbon{
  position:absolute; left:0; bottom:0; z-index:3; background:var(--giallo); color:var(--terra);
  padding:.75rem 1.2rem; font-size:.74rem; font-weight:700;
  font-variation-settings:"wdth" 82; letter-spacing:.15em; text-transform:uppercase;
}

/* location chooser bar under the hero */
.locbar{ background:var(--blu-notte); }
.locbar__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:760px){ .locbar__grid{ grid-template-columns:1fr 1fr; } }
.locbar a{
  display:grid; gap:.28rem; text-decoration:none; color:#fff; position:relative;
  padding:clamp(1.3rem,2.3vw,2rem) clamp(1.2rem,2.4vw,2.4rem);
  transition:background .3s var(--ease), color .3s var(--ease);
}
@media (min-width:760px){ .locbar a + a{ border-left:3px solid rgba(255,255,255,.2); } }
@media (max-width:759px){ .locbar a + a{ border-top:3px solid rgba(255,255,255,.2); } }
.locbar a:hover{ background:var(--turchese); color:var(--terra); }
.locbar__k{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  font-variation-settings:"wdth" 82; color:var(--giallo); }
.locbar a:hover .locbar__k{ color:var(--rosso); }
.locbar__n{ font-family:var(--display); font-weight:800; font-variation-settings:var(--fx-chunky);
  font-size:clamp(1.8rem,3vw,2.7rem); letter-spacing:-.03em; line-height:1; }
.locbar__m{ font-size:.87rem; opacity:.85; }
.locbar__go{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  font-variation-settings:"wdth" 82; margin-top:.35rem; color:var(--turchese); }
.locbar a:hover .locbar__go{ color:var(--rosso); }

/* ---------------------------------------------- 9. editorial compositions */
.split{ display:grid; gap:clamp(1.8rem,3.5vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .split{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); } }
.split.even{ grid-template-columns:1fr; }
@media (min-width:900px){ .split.even{ grid-template-columns:1fr 1fr; } }
.split.end{ align-items:end; }
.split.centre{ align-items:center; }

/* overlapping photo statement */
.stage{ display:grid; grid-template-columns:repeat(12,1fr); align-items:start; }
.stage__big{ grid-column:1 / span 12; grid-row:1; }
.stage__small{ grid-column:5 / span 8; grid-row:1; align-self:end;
  transform:translateY(26%); z-index:3; position:relative; }
.stage__note{ grid-column:1 / span 12; grid-row:2; margin-top:clamp(3.5rem,14vw,7rem); }
@media (min-width:900px){
  .stage__big{ grid-column:1 / span 8; }
  .stage__small{ grid-column:7 / span 5; transform:translateY(18%); }
  .stage__note{ grid-column:1 / span 5; margin-top:clamp(2.5rem,5vw,4.5rem); }
}
.stage__small img{ border:8px solid var(--bianco); }
.sec-turchese .stage__small img{ border-color:var(--turchese); }
.sec-crema .stage__small img{ border-color:var(--crema); }

/* three-up photo run */
.run{ display:grid; gap:clamp(1rem,2vw,2rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:880px){
  .run{ grid-template-columns:repeat(12,1fr); align-items:start; }
  .run__i:nth-child(1){ grid-column:1 / span 5; }
  .run__i:nth-child(2){ grid-column:6 / span 3; margin-top:clamp(2.5rem,6vw,6.5rem); }
  .run__i:nth-child(3){ grid-column:9 / span 4; }
}
@media (max-width:879px){ .run__i:nth-child(3){ grid-column:span 2; } }

/* full-bleed photo with type over it */
.feature{ position:relative; min-height:clamp(420px,74vh,780px); display:grid; align-items:end; }
.feature > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,32,56,.88), rgba(6,32,56,.3) 55%, rgba(6,32,56,.06));
}
.feature__in{ position:relative; z-index:2; padding-block:clamp(2.4rem,5vw,5rem); color:#fff; }
.feature__q{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.7rem,3.6vw,3.5rem); line-height:1.1; letter-spacing:-.028em;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  max-width:20ch; text-wrap:balance;
}
.feature__q b{ color:var(--giallo); font-weight:600; }

/* two-location colour cards */
.duo{ display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; } }
.duo__card{ position:relative; display:block; text-decoration:none; overflow:hidden;
  background:var(--blu-notte); color:#fff; }
.duo__card:nth-child(2){ background:var(--terra); }
.duo__card .ratio{ aspect-ratio:4/3; }
@media (min-width:900px){ .duo__card .ratio{ aspect-ratio:5/4; } }
.duo__card img{ transition:transform 1s var(--ease); }
.duo__card:hover img{ transform:scale(1.05); }
.duo__body{ padding:clamp(1.6rem,2.6vw,2.6rem) clamp(1.4rem,2.6vw,2.6rem) clamp(2rem,3.4vw,3rem); }
.duo__body h3{ color:#fff; margin-top:.4rem; }
.duo__body dl{ display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.3rem; margin-top:1.4rem; font-size:.9rem; }
.duo__body dt{ font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  font-variation-settings:"wdth" 82; color:var(--giallo); padding-top:.3em; }
.duo__body dd{ margin:0; color:rgba(255,255,255,.84); }
.duo__flag{ position:absolute; left:0; top:0; background:var(--giallo); color:var(--terra);
  padding:.55rem 1rem; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; font-variation-settings:"wdth" 82; z-index:2; }

/* closing CTA */
.closer{ text-align:center; display:grid; justify-items:center; gap:1.5rem; }
.closer .seal{ width:88px; }

/* number facts */
.facts{ display:grid; gap:clamp(1.2rem,2.4vw,2.2rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:860px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.facts__i{ border-top:5px solid var(--giallo); padding-top:1rem; }
.sec-turchese .facts__i{ border-color:var(--rosso); }
.facts__i b{ display:block; font-family:var(--display); font-weight:800;
  font-variation-settings:var(--fx-chunky); font-size:clamp(1.7rem,2.6vw,2.4rem);
  letter-spacing:-.03em; line-height:1; }
.facts__i span{ display:block; font-size:.82rem; color:var(--ink-soft); margin-top:.5rem; }
.sec-turchese .facts__i span{ color:#6C4526; }

/* ---------------------------------------------------------- 10. page head */
.phead{ padding-top:clamp(2.6rem,5vw,5rem); padding-bottom:clamp(2rem,3.5vw,3.5rem); }
.phead__grid{ display:grid; gap:1.5rem clamp(2rem,4vw,4.5rem); grid-template-columns:1fr; align-items:end; }
@media (min-width:900px){ .phead__grid{ grid-template-columns:minmax(0,1fr) minmax(0,36ch); } }
.phead h1{ margin-top:1.1rem; }

/* ------------------------------------------------------- 11. location page */
.loc-hero{ position:relative; min-height:clamp(360px,62vh,680px); display:grid; align-items:end; }
.loc-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.loc-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,32,56,.86), rgba(6,32,56,.22) 62%); }
.loc-hero__in{ position:relative; z-index:2; color:#fff; padding-block:clamp(2rem,4vw,4rem); }
.loc-hero h1{ color:var(--bianco); margin-top:.8rem; }
.loc-hero__seal{ position:absolute; right:var(--gutter); top:clamp(18px,3vw,36px); z-index:3;
  width:clamp(76px,7vw,112px); }

.info{ display:grid; gap:clamp(2rem,3.6vw,3.6rem); grid-template-columns:1fr; }
@media (min-width:900px){ .info{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.deflist > div{
  display:grid; grid-template-columns:minmax(88px,auto) 1fr; gap:.35rem 1.5rem;
  padding:1rem 0; border-top:2px solid var(--rule); align-items:baseline;
}
.deflist > div:last-child{ border-bottom:2px solid var(--rule); }
.deflist dt{ font-size:.68rem; color:var(--blu-vivo); }
.deflist dd{ margin:0; }
.deflist a{ color:inherit; text-decoration:none; box-shadow:inset 0 -3px 0 var(--giallo); }
.deflist a:hover{ box-shadow:inset 0 -1.1em 0 var(--giallo); }
.sec-turchese .deflist > div{ border-color:rgba(99,40,4,.25); }
.sec-turchese .deflist dt{ color:var(--rosso); }

.hours{ width:100%; border-collapse:collapse; font-size:.95rem; }
.hours caption{ text-align:left; font-size:.68rem; color:var(--blu-vivo); padding-bottom:.8rem; }
.hours th,.hours td{ padding:.75rem 0; border-top:2px solid var(--rule); vertical-align:top; text-align:left; }
.hours th{ font-weight:500; width:46%; }
.hours td{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.hours tr:last-child th,.hours tr:last-child td{ border-bottom:2px solid var(--rule); }
.hours + .hours{ margin-top:2.2rem; }
.hourbox{ background:var(--turchese); color:var(--terra); padding:clamp(1.4rem,2.6vw,2.2rem);
  border:3px solid var(--blu-notte); box-shadow:8px 8px 0 var(--blu-notte); }
.hourbox .hours caption{ color:var(--rosso); }
.hourbox .hours th,.hourbox .hours td,
.hourbox .hours tr:last-child th,.hourbox .hours tr:last-child td{
  border-color:rgba(99,40,4,.25); color:var(--terra);
}

.map{ border:3px solid var(--blu-notte); background:#E9F1F6; width:100%; aspect-ratio:16/10; }
@media (min-width:900px){ .map{ aspect-ratio:2/1; } }

/* photo essay */
.essay{ display:grid; gap:clamp(.8rem,1.6vw,1.5rem); grid-template-columns:repeat(6,1fr); }
.essay__i{ grid-column:span 6; }
@media (min-width:700px){
  .essay__i{ grid-column:span 2; }
  .essay__i.w3{ grid-column:span 3; }
  .essay__i.w4{ grid-column:span 4; }
  .essay__i.w6{ grid-column:span 6; }
}
.essay__i button{ display:block; width:100%; overflow:hidden; }
.essay__i img{ transition:transform .9s var(--ease); }
.essay__i button:hover img{ transform:scale(1.045); }

/* --------------------------------------------------------- 12. menu page */
.menu-page{ background:var(--turchese); }
.menu-switch{ display:inline-grid; grid-auto-flow:column; border:3px solid var(--blu-notte);
  background:var(--bianco); box-shadow:5px 5px 0 var(--blu-notte); }
.menu-switch button{ padding:.9em 1.6em; font-size:.76rem; color:var(--blu-notte);
  transition:background .25s var(--ease), color .25s var(--ease); }
.menu-switch button + button{ border-left:3px solid var(--blu-notte); }
.menu-switch button[aria-pressed="true"]{ background:var(--blu-notte); color:var(--giallo); }

.catbar{ position:sticky; top:clamp(70px,6.4vw,92px); z-index:60; background:var(--blu-notte); }
.catbar__scroll{
  width:var(--shell); margin-inline:auto; display:flex; gap:clamp(1rem,2vw,2.1rem);
  overflow-x:auto; scrollbar-width:none; padding-block:.95rem;
}
.catbar__scroll::-webkit-scrollbar{ display:none; }
.catbar a{
  white-space:nowrap; text-decoration:none; font-size:.73rem; color:#9FBFD8;
  padding-bottom:.28rem; border-bottom:3px solid transparent;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.catbar a:hover{ color:#fff; }
.catbar a.is-active{ color:var(--giallo); border-color:var(--giallo); }

.msec{ padding-block:clamp(2.4rem,4.4vw,4.2rem); scroll-margin-top:160px; }
.msec + .msec{ border-top:3px solid rgba(99,40,4,.22); }
.msec__head{ display:grid; gap:.5rem; margin-bottom:clamp(1.6rem,2.6vw,2.4rem); }
.msec__head h2{ color:var(--terra); }
.msec__head .small{ color:#6C4526; }
.msec__head .num{ color:var(--rosso); }

.mgroup + .mgroup{ margin-top:clamp(1.9rem,3.2vw,2.9rem); }
.mgroup__name{ font-size:.72rem; color:var(--rosso); padding-bottom:.7rem;
  border-bottom:3px solid var(--rosso); margin-bottom:.3rem; }
.mlist{ display:grid; }
@media (min-width:1000px){ .mlist{ grid-template-columns:1fr 1fr; column-gap:clamp(2.4rem,4.4vw,5rem); } }
.mitem{
  display:grid; grid-template-columns:1fr auto; gap:.12rem 1.3rem;
  padding:1rem 0; border-bottom:1.5px solid rgba(99,40,4,.26); align-content:start;
}
.mitem__n{
  font-family:var(--display); font-weight:700; font-size:1.1rem; line-height:1.24;
  letter-spacing:-.022em; font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 60;
  color:var(--terra);
}
.mitem__p{
  font-family:var(--display); font-weight:800; font-size:1.08rem;
  font-variation-settings:var(--fx-chunky); color:#124E82;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.mitem__p small{ display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; font-variation-settings:"wdth" 82;
  color:#6C4526; text-align:right; margin-top:.15rem; }
.mitem__d{ grid-column:1 / -1; font-size:.88rem; color:#5E4222; max-width:56ch; }
.mitem__x{
  grid-column:1 / -1; margin-top:.45rem; justify-self:start;
  background:var(--giallo); color:var(--terra); padding:.22rem .55rem;
  font-size:.62rem; font-weight:700; font-variation-settings:"wdth" 82;
  letter-spacing:.1em; text-transform:uppercase;
}
.mitem__a{ font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.08em;
  color:var(--rosso); vertical-align:.45em; margin-left:.4em; white-space:nowrap;
  font-variation-settings:"wdth" 82; }

.allergens{ display:grid; gap:.65rem 1.8rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .allergens{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1050px){ .allergens{ grid-template-columns:repeat(5,1fr); } }
.allergens li{ font-size:.84rem; display:flex; gap:.6rem; align-items:baseline; }
.allergens b{ color:var(--rosso); font-size:.74rem; letter-spacing:.08em; }

.cards{ display:grid; gap:clamp(.7rem,1.4vw,1.2rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1100px){ .cards{ grid-template-columns:repeat(6,1fr); } }
.cards button{ display:block; width:100%; border:3px solid var(--blu-notte); background:var(--turchese);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.cards button:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--giallo); }
.cards img{ width:100%; }

/* ------------------------------------------------------- 13. gallery page */
.mosaic{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.7rem,1.4vw,1.4rem); }
.mosaic figure{ grid-column:span 3; }
@media (min-width:760px){
  .mosaic figure{ grid-column:var(--c) / span var(--s); }
  .mosaic figure.off{ transform:translateY(clamp(1.4rem,3.2vw,3.4rem)); }
}
.mosaic button{ display:block; width:100%; overflow:hidden; }
.mosaic img{ transition:transform .9s var(--ease); width:100%; }
.mosaic button:hover img{ transform:scale(1.05); }
.mosaic .panel{ display:grid; align-content:center; gap:1rem; height:100%;
  padding:clamp(1.4rem,2.4vw,2.2rem); background:var(--blu); color:var(--blu-notte); }
.mosaic .panel.giallo{ background:var(--giallo); color:var(--terra); }
.mosaic .panel.turchese{ background:var(--turchese); color:var(--terra); }
.mosaic .panel p{ font-family:var(--display); font-weight:800; font-variation-settings:var(--fx-chunky);
  font-size:clamp(1.1rem,1.55vw,1.65rem); line-height:1.02; letter-spacing:-.03em; }
.mosaic .panel .seal{ width:clamp(42px,3.4vw,52px); }

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(8,34,58,.96);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;
}
.lb.is-open{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:84vh; object-fit:contain; }
.lb__cap{ color:var(--turchese); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; font-variation-settings:"wdth" 82; margin-top:1rem; text-align:center; }
.lb__x,.lb__nav{
  position:absolute; color:var(--blu-notte); background:var(--giallo); width:52px; height:52px;
  display:grid; place-items:center; font-size:1.2rem; transition:background .2s var(--ease);
}
.lb__x:hover,.lb__nav:hover{ background:var(--bianco); }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lb__nav.prev{ left:clamp(.5rem,2vw,2rem); top:50%; translate:0 -50%; }
.lb__nav.next{ right:clamp(.5rem,2vw,2rem); top:50%; translate:0 -50%; }

/* ------------------------------------------------------- 14. contact page */
.ccard{ display:grid; gap:1.4rem; align-content:start; }
.ccard__top{ display:grid; gap:.5rem; }

/* -------------------------------------------------------------- 15. footer */
.site-foot{ background:var(--blu-notte); color:#D5E6F2; padding-block:clamp(3rem,5vw,5.5rem) 2rem; }
.foot__top{ display:grid; gap:2rem; align-items:center; grid-template-columns:1fr;
  padding-bottom:clamp(2.2rem,4vw,3.6rem); margin-bottom:clamp(2.2rem,4vw,3.4rem);
  border-bottom:3px solid rgba(255,255,255,.18); }
@media (min-width:900px){ .foot__top{ grid-template-columns:auto 1fr auto; } }
.foot__top .foot__lock{ width:clamp(170px,17vw,230px); }
.foot__slogan{ font-family:var(--display); font-weight:800; font-variation-settings:var(--fx-chunky);
  font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1; letter-spacing:-.03em; color:#fff; max-width:19ch; }
.foot__slogan em{ font-style:italic; color:var(--giallo); }
.foot__grid{ display:grid; gap:clamp(2rem,3.4vw,3.2rem); grid-template-columns:1fr; }
@media (min-width:640px){ .foot__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .foot__grid{ grid-template-columns:repeat(4,1fr); } }
.foot h4{ font-size:.7rem; color:var(--giallo); margin-bottom:1rem; }
.foot ul{ display:grid; gap:.58rem; }
.foot a{ text-decoration:none; color:#D5E6F2; transition:color .2s var(--ease); font-size:.93rem; }
.foot a:hover{ color:var(--turchese); }
.foot address{ font-style:normal; font-size:.93rem; line-height:1.7; color:#A8C6DE; }
.foot__base{ margin-top:clamp(2.2rem,4vw,3.6rem); padding-top:1.5rem;
  border-top:3px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
  font-variation-settings:"wdth" 82; color:#7FA3BF; }

/* ------------------------------------------------------------ 16. reveal */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; } .rv-d3{ transition-delay:.24s; }
html.nofx .rv{ opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .duo__card img,.mosaic img,.essay__i img{ transition:none; }
}

/* ------------------------------------------------------------- 17. print */
@media print{
  .site-head,.topbar,.drawer,.catbar,.site-foot,.lb,.btn,.link,.ticker,.checker{ display:none !important; }
  body{ font-size:11pt; background:#fff; } .menu-page{ background:#fff; }
  .pad{ padding-block:1rem; } .mlist{ grid-template-columns:1fr 1fr; }
}