/* ==========================================================================
   LA PAPPARDELLA — PUERTO BANÚS
   White-led. Black typography. Restrained red.
   Bodoni Moda for voice · Archivo for structure · Pinyon Script as the stamp.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Ground */
  --paper:      #ffffff;
  --shell:      #f7f4f2;
  --shell-2:    #efe9e6;

  /* Ink — warm blacks and greys, biased a touch toward the red */
  --ink:        #131110;
  --ink-2:      #47413f;   /* body copy */
  --graphite:   #776f6c;   /* captions, labels */
  --hairline:   #e2dbd8;
  --hairline-2: #d3cac6;
  --hairline-d: rgba(255,255,255,.16);

  /* Accent */
  --rosso:      #c62b28;
  --rosso-deep: #96201e;

  /* Type */
  --sans:   "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:  "Bodoni Moda", Didot, "Times New Roman", Times, serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 80px);
  --rail: 70px;
  --band: clamp(76px, 9.5vw, 164px);
  --maxw: 1520px;
}

*, *::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(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg{ max-width: 100%; display: block; }
a{ color: inherit; }
::selection{ background: var(--rosso); color: #fff; }
:focus-visible{ outline: 2px solid var(--rosso); outline-offset: 3px; }

/* ---------- Type -----------------------------------------------------------
   Headings are Bodoni, set in sentence case. Uppercase is reserved for small
   labels, navigation and buttons — never for the headlines themselves.
   -------------------------------------------------------------------------- */

.display{
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
  text-transform: none;
}
.d1{ font-size: clamp(38px, 5.6vw, 78px); line-height: 1.02; }
.d2{ font-size: clamp(29px, 3.5vw, 50px); }
.d3{ font-size: clamp(23px, 2.4vw, 34px); line-height: 1.14; }

/* the restaurant's own name, hero scale */
.name{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7.6vw, 112px);
  line-height: .98;
  letter-spacing: -.018em;
  margin: 0;
}

/* the red signature — used sparingly */
.sig{
  font-family: var(--script);
  font-weight: 400;
  font-style: normal;
  color: var(--rosso);
  line-height: 1.24;
  letter-spacing: 0;
  display: inline-block;
  padding-bottom: .08em;
}
.sig--lg{ font-size: clamp(42px, 6.4vw, 92px); }
.sig--md{ font-size: clamp(32px, 4vw, 56px); }
.sig--sm{ font-size: clamp(24px, 2.4vw, 34px); }
.sig--paper{ color: #fff; }

.eyebrow{
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before{
  content: "";
  width: 26px; height: 1px;
  background: var(--rosso);
  flex: none;
}
.eyebrow--plain::before{ display: none; }
.eyebrow--paper{ color: rgba(255,255,255,.82); }

.lede{
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 33em;
  margin: 0;
}
.body-copy{
  font-size: 16px;
  line-height: 1.78;
  color: var(--ink-2);
  max-width: 35em;
  margin: 0;
}
.body-copy + .body-copy{ margin-top: 1.1em; }
.body-copy strong{ color: var(--ink); font-weight: 600; }

.on-dark .body-copy{ color: rgba(255,255,255,.74); }
.on-dark .lede{ color: rgba(255,255,255,.88); }
.on-dark .body-copy strong{ color: #fff; }
.on-dark .display, .on-dark .name{ color: #fff; }

/* ---------- Buttons -------------------------------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn:hover{ background: var(--rosso); border-color: var(--rosso); color: #fff; }
.btn .arw{ transition: transform .25s ease; }
.btn:hover .arw{ transform: translateX(4px); }

.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.btn--ghost:hover{ background: transparent; color: var(--rosso); border-color: var(--rosso); }

.btn--paper{ background: #fff; border-color: #fff; color: var(--ink); }
.btn--paper:hover{ background: var(--rosso); border-color: var(--rosso); color: #fff; }

.btn--outline-paper{ background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn--outline-paper:hover{ background: #fff; border-color: #fff; color: var(--ink); }

.btn--rosso{ background: var(--rosso); border-color: var(--rosso); }
.btn--rosso:hover{ background: var(--ink); border-color: var(--ink); }

.textlink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline-2);
  transition: color .2s, border-color .2s;
}
.textlink:hover{ color: var(--rosso); border-color: var(--rosso); }
.textlink .arw{ transition: transform .2s ease; }
.textlink:hover .arw{ transform: translateX(4px); }
.on-dark .textlink{ color: #fff; border-color: rgba(255,255,255,.4); }
.on-dark .textlink:hover{ color: #fff; border-color: #fff; }

.btnrow{ display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Top rail ------------------------------------------------------- */

.rail{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  z-index: 120;
  height: var(--rail);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 46px);
  padding: 0 var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.rail.on-photo::before{
  content: "";
  position: absolute;
  inset: calc(env(safe-area-inset-top, 0px) * -1 - 4px) 0 auto 0;
  height: calc(var(--rail) + env(safe-area-inset-top, 0px) + 60px);
  background: linear-gradient(to bottom, rgba(10,8,8,.52), rgba(10,8,8,.22) 56%, rgba(10,8,8,0));
  pointer-events: none;
  transition: opacity .35s ease;
}
.rail.on-photo.is-solid::before{ opacity: 0; }
.rail > *{ position: relative; }

.rail__logo{ display: block; flex: none; line-height: 0; position: relative; }
.rail__logo img{ height: 26px; width: auto; display: block; transition: opacity .3s ease; }
.rail__logo .logo--paper{ position: absolute; top: 0; left: 0; opacity: 0; }

.rail__nav{ display: flex; align-items: center; gap: clamp(16px, 2.1vw, 34px); margin-left: auto; }
.rail__nav a{
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.rail__nav a:hover{ border-bottom-color: currentColor; }
.rail__nav a.is-current{ border-bottom-color: var(--rosso); }

.rail__side{ display: flex; align-items: center; gap: 16px; margin-left: 4px; }

.lang{
  display: flex; align-items: center;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: rgba(255,255,255,.55);
}
.lang button{
  appearance: none; background: none; border: 0; font: inherit; color: inherit;
  cursor: pointer; padding: 5px 3px; letter-spacing: inherit;
}
.lang button[aria-pressed="true"]{ color: #fff; }
.lang span{ opacity: .4; padding: 0 2px; }

.rail__cta{
  display: inline-flex; align-items: center;
  padding: 12px 22px;
  background: #fff; color: var(--ink);
  font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none;
  transition: background .25s, color .25s;
}
.rail__cta:hover{ background: var(--rosso); color: #fff; }

.rail.is-solid{ background: var(--paper); border-bottom-color: var(--hairline); }
.rail.is-solid .rail__nav a{ color: var(--ink); }
.rail.is-solid .lang{ color: var(--graphite); }
.rail.is-solid .lang button[aria-pressed="true"]{ color: var(--ink); }
.rail.is-solid .rail__cta{ background: var(--ink); color: #fff; }
.rail.is-solid .rail__cta:hover{ background: var(--rosso); }
.rail.is-solid .logo--ink{ opacity: 1; }
.rail.is-solid .logo--paper{ opacity: 0; }

.rail.on-photo .logo--ink{ opacity: 0; }
.rail.on-photo .logo--paper{ opacity: 1; }
.rail.on-photo.is-solid .logo--ink{ opacity: 1; }
.rail.on-photo.is-solid .logo--paper{ opacity: 0; }

.rail:not(.on-photo){ background: var(--paper); border-bottom-color: var(--hairline); }
.rail:not(.on-photo) .rail__nav a{ color: var(--ink); }
.rail:not(.on-photo) .lang{ color: var(--graphite); }
.rail:not(.on-photo) .lang button[aria-pressed="true"]{ color: var(--ink); }
.rail:not(.on-photo) .rail__cta{ background: var(--ink); color: #fff; }
.rail:not(.on-photo) .rail__cta:hover{ background: var(--rosso); }

.burger{
  display: none; appearance: none; background: none; border: 0;
  padding: 10px 0 10px 12px; cursor: pointer; color: currentColor;
}
.burger i{ display: block; width: 24px; height: 1px; background: currentColor; margin: 6px 0; }
.rail.on-photo:not(.is-solid) .burger{ color: #fff; }
.rail.is-solid .burger, .rail:not(.on-photo) .burger{ color: var(--ink); }

@media (max-width: 1080px){
  .rail__nav{ display: none; }
  .rail .lang{ display: none; }
  .burger{ display: block; }
  .rail__side{ margin-left: auto; }
}
@media (max-width: 560px){ .rail__cta{ display: none; } }

/* ---------- Drawer --------------------------------------------------------- */

.drawer{
  position: fixed; inset: 0; z-index: 130;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: calc(var(--rail) + env(safe-area-inset-top, 0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  transform: translateY(-101%);
  transition: transform .46s cubic-bezier(.76,0,.24,1);
  overflow-y: auto;
}
.drawer.is-open{ transform: translateY(0); }
.drawer__nav{ margin-top: auto; display: flex; flex-direction: column; }
.drawer__nav a{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 8.6vw, 46px);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}
.drawer__nav a.is-current{ color: var(--rosso); }
.drawer__foot{
  margin-top: auto; padding-top: 34px;
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  font-size: 12px; color: var(--graphite);
}
.drawer__foot a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.drawer .lang{ color: var(--graphite); }
.drawer .lang button[aria-pressed="true"]{ color: var(--ink); }
.drawer__close{
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: var(--gutter);
  appearance: none; background: none; border: 0; cursor: pointer;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); padding: 10px 0;
}
body.nav-open{ overflow: hidden; }

/* ---------- Credential strip ------------------------------------------------ */

.strip{ border-bottom: 1px solid var(--hairline); background: var(--paper); }
.strip__in{
  max-width: var(--maxw); margin: 0 auto;
  padding: 19px var(--gutter);
  display: flex; flex-wrap: wrap;
  gap: 10px clamp(20px, 3.4vw, 56px);
  align-items: center;
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--graphite);
}
.strip__in span{ display: inline-flex; align-items: center; gap: 13px; }
.strip__in span::before{
  content: ""; width: 3px; height: 3px; background: var(--rosso); border-radius: 50%; flex: none;
}
.strip__in a{ color: inherit; text-decoration: none; }
.strip__in a:hover{ color: var(--rosso); }

/* ---------- Layout --------------------------------------------------------- */

.wrap{ padding-inline: var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.band{ padding-block: var(--band); }
.band--tight{ padding-block: clamp(54px, 6.2vw, 104px); }

.plate--shell{ background: var(--shell); }
.plate--ink{ background: var(--ink); color: #fff; }

hr.rule{ border: 0; height: 1px; background: var(--hairline); margin: 0; }
.on-dark hr.rule{ background: var(--hairline-d); }

/* ---------- Hero -----------------------------------------------------------
   An asymmetric plate: a quiet white column carrying the mark, one line and the
   reservation, set against a photograph that bleeds off the right and bottom.
   The panel renders the picture at 64-85% of its native width, so it stays
   sharp — full bleed was upscaling it and cropping away most of the frame.
   -------------------------------------------------------------------------- */

.hero{
  margin-top: calc(var(--rail) + env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-columns: minmax(340px, .92fr) minmax(0, 1.35fr);
  min-height: clamp(480px, 74vh, 800px);
}

.hero__panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: clamp(44px, 5.4vw, 84px);
  padding-right: clamp(28px, 4.2vw, 72px);
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.hero__mark{ width: clamp(170px, 16.5vw, 236px); height: auto; }
.hero__line{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.85vw, 27px);
  line-height: 1.36;
  letter-spacing: -.008em;
  color: var(--ink);
  max-width: 15em;
  margin: clamp(24px, 2.6vw, 34px) 0 0;
  text-wrap: balance;
}
.hero__rule{
  width: 38px; height: 1px;
  background: var(--rosso);
  margin: clamp(26px, 2.8vw, 36px) 0;
  flex: none;
}
.hero__act{
  display: flex; align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
  flex-wrap: wrap;
}

.hero__shot{ position: relative; overflow: hidden; background: var(--shell-2); }
.hero__shot img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 44%;
}

@media (max-width: 1000px){
  .hero{ grid-template-columns: 1fr; min-height: 0; }
  .hero__shot{ order: -1; aspect-ratio: 4 / 3; }
  .hero__panel{ padding: clamp(36px, 7vw, 54px) var(--gutter); }
  .hero__line{ max-width: 19em; }
}

/* interior page heads */
.pagehead{
  position: relative; color: #fff;
  min-height: clamp(340px, 54vh, 580px);
  display: flex; align-items: flex-end; overflow: hidden;
}
.pagehead__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehead::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,8,.74), rgba(10,8,8,.14) 62%, rgba(10,8,8,.3));
}
.pagehead__inner{
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 4.6vw, 70px);
}
.pagehead .eyebrow{ color: rgba(255,255,255,.82); }

/* ---------- Editorial split ------------------------------------------------ */

.split{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  gap: clamp(30px, 5vw, 92px);
  align-items: center;
}
.split--rev{ grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
.split--rev .split__txt{ order: 2; }
.split--rev .split__img{ order: 1; }
@media (max-width: 900px){
  .split, .split--rev{ grid-template-columns: 1fr; }
  .split--rev .split__txt{ order: 1; }
  .split--rev .split__img{ order: 2; }
}
.split__img img{ width: 100%; height: auto; }

.bleed-r{ margin-right: calc(var(--gutter) * -1); }
.bleed-l{ margin-left: calc(var(--gutter) * -1); }
@media (max-width: 900px){ .bleed-r, .bleed-l{ margin-inline: calc(var(--gutter) * -1); } }

.cap{
  font-size: 10px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--graphite);
  margin-top: 14px; display: flex; gap: 12px; align-items: baseline;
}
.cap::before{ content: ""; width: 18px; height: 1px; background: var(--rosso); flex: none; transform: translateY(-4px); }
.on-dark .cap{ color: rgba(255,255,255,.56); }

/* ---------- Fact rail ------------------------------------------------------ */

.facts{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--hairline);
}
.facts > div{
  padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2.2vw, 34px) 0 0;
  border-right: 1px solid var(--hairline);
}
.facts > div:last-child{ border-right: 0; }
.facts dt{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  letter-spacing: -.01em; line-height: 1; margin: 0 0 12px;
}
.facts dd{ margin: 0; font-size: 13px; line-height: 1.6; color: var(--graphite); max-width: 17em; }
.on-dark .facts, .on-dark .facts > div{ border-color: var(--hairline-d); }
.on-dark .facts dd{ color: rgba(255,255,255,.62); }
@media (max-width: 720px){
  .facts{ grid-template-columns: 1fr; }
  .facts > div{ border-right: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 22px; }
  .facts > div:last-child{ border-bottom: 0; }
}

/* ---------- The signature dish --------------------------------------------- */

.signature{ background: var(--shell); }
.signature__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.92fr);
  gap: clamp(34px, 5.4vw, 92px);
  align-items: center;
}
@media (max-width: 980px){ .signature__grid{ grid-template-columns: 1fr; } }

.signature__list{
  list-style: none; margin: clamp(30px, 3.2vw, 44px) 0; padding: 0;
  border-top: 1px solid var(--hairline-2); max-width: 34em;
}
.signature__list li{
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--hairline-2);
}
.signature__list b{ font-weight: 500; font-size: 13.5px; color: var(--ink); }
.signature__list .p{
  font-family: var(--serif); font-weight: 400; font-size: 19px;
  font-variant-numeric: tabular-nums; color: var(--ink); flex: none;
}
.signature__stack{ display: grid; gap: clamp(14px, 1.6vw, 22px); }
.signature__stack img{ width: 100%; }

/* ---------- Craft / video --------------------------------------------------- */

.craft__grid{
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
}
@media (max-width: 900px){ .craft__grid{ grid-template-columns: 1fr; } }

.reel{ position: relative; background: #0d0b0b; }
.reel video{ width: 100%; height: auto; display: block; }
.reel__btn{
  position: absolute; left: 14px; bottom: 14px;
  appearance: none; border: 1px solid rgba(255,255,255,.4);
  background: rgba(10,8,8,.38); backdrop-filter: blur(6px);
  color: #fff; font: inherit;
  font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 10px 15px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.reel__btn:hover{ background: var(--rosso); border-color: var(--rosso); }

.stills{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(36px, 4vw, 60px);
}
.stills img{ width: 100%; height: clamp(130px, 17vw, 250px); object-fit: cover; }
@media (max-width: 620px){ .stills{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Timeline -------------------------------------------------------- */

.tl{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  position: relative; margin-top: clamp(34px, 4vw, 58px);
}
.tl::before{
  content: ""; position: absolute; left: 0; right: 0; top: 5px;
  height: 1px; background: var(--hairline-2);
}
.tl__step{ position: relative; padding: 30px clamp(16px, 2.2vw, 38px) 0 0; }
.tl__step::before{
  content: ""; position: absolute; left: 0; top: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rosso);
}
.tl__step.is-now::before{ background: var(--rosso); }
.plate--shell .tl__step::before{ background: var(--shell); }
.plate--shell .tl__step.is-now::before{ background: var(--rosso); }
.tl__yr{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.3vw, 34px); letter-spacing: -.01em; line-height: 1; margin: 0 0 8px;
}
.tl__pl{
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--graphite); margin: 0 0 14px;
}
.tl__tx{ margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); max-width: 21em; }
@media (max-width: 860px){
  .tl{ grid-template-columns: 1fr; }
  .tl::before{ left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tl__step{ padding: 0 0 36px 30px; }
  .tl__step::before{ top: 4px; }
}

/* ---------- Menu index (home) ---------------------------------------------- */

.mindex{ border-top: 1px solid var(--hairline); }
.mindex a{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) auto;
  gap: clamp(16px, 3vw, 46px);
  align-items: baseline;
  padding: clamp(20px, 2.3vw, 30px) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink);
  transition: color .22s;
}
.mindex a:hover{ color: var(--rosso); }
.mindex .h{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -.01em; line-height: 1.1;
}
.mindex .s{ font-size: 13.5px; color: var(--graphite); line-height: 1.6; }
.mindex .arw{ font-size: 15px; color: var(--hairline-2); }
.mindex a:hover .arw{ color: var(--rosso); }
@media (max-width: 860px){
  .mindex a{ grid-template-columns: minmax(0,1fr) auto; }
  .mindex .s{ display: none; }
}

/* ---------- Menu page ------------------------------------------------------- */

.menunav{
  position: sticky;
  top: calc(var(--rail) + env(safe-area-inset-top, 0px));
  z-index: 90; background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.menunav__in{
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding-inline: var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.menunav__in::-webkit-scrollbar{ display: none; }
.menunav a{
  flex: none; padding: 19px 18px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--graphite);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.menunav a:first-child{ margin-left: -18px; }
.menunav a:hover{ color: var(--ink); }
.menunav a.is-active{ color: var(--ink); border-bottom-color: var(--rosso); }

.msec{ padding-block: clamp(56px, 6.6vw, 112px); scroll-margin-top: calc(var(--rail) + 58px); }
.msec + .msec{ border-top: 1px solid var(--hairline); }
.msec__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; margin-bottom: clamp(30px, 3.4vw, 50px);
}
.msec__head h2{
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 56px); letter-spacing: -.012em; line-height: 1.04;
}
.msec__head p{ margin: 0; font-size: 14px; color: var(--graphite); max-width: 28em; line-height: 1.65; }

.dishes{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: clamp(32px, 5vw, 96px);
}
@media (max-width: 800px){ .dishes{ grid-template-columns: 1fr; } }

.dish{
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 7px 22px; padding: 17px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.dish__n{ margin: 0; font-size: 15px; font-weight: 500; line-height: 1.38; }
.dish__p{
  font-family: var(--serif); font-weight: 400; font-size: 18px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dish__p::after{ content: "€"; font-size: .7em; color: var(--graphite); margin-left: 3px; }
.dish__d{
  grid-column: 1 / -1; margin: 0;
  font-size: 13.5px; line-height: 1.62; color: var(--graphite); max-width: 34em;
}
.dish__a{ font-size: 10px; letter-spacing: .12em; color: #ada5a2; font-weight: 500; white-space: nowrap; }

.dish--hero{
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--hairline-2);
  border-left: 2px solid var(--rosso);
  padding: clamp(24px, 2.8vw, 36px);
  margin-bottom: 10px;
}
.dish--hero .dish__n{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 30px); letter-spacing: -.01em;
}
.dish--hero .dish__p{ font-size: clamp(21px, 2.1vw, 30px); }

.adds{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 6px; }
.adds li{
  list-style: none; font-size: 12px; letter-spacing: .01em;
  border: 1px solid var(--hairline-2); padding: 9px 14px; color: var(--ink-2);
}
.adds li b{ color: var(--rosso); font-weight: 600; margin-left: 8px; }

.note{ font-size: 12px; color: var(--graphite); letter-spacing: .04em; margin: 24px 0 0; }

.allerg{ display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.allerg li{ font-size: 12px; color: var(--graphite); letter-spacing: .02em; }
.allerg li b{ color: var(--ink); font-weight: 600; }

/* ---------- Gallery --------------------------------------------------------- */

.gchap{ padding-block: clamp(48px, 5.6vw, 92px); }
.gchap + .gchap{ border-top: 1px solid var(--hairline); }
.gchap__head{ display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: clamp(24px, 2.8vw, 40px); }
.gchap__head h2{
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.2vw, 44px); letter-spacing: -.012em;
}
.gchap__head p{ margin: 0; font-size: 13.5px; color: var(--graphite); letter-spacing: .01em; }

.gset{ display: grid; gap: clamp(10px, 1.3vw, 18px); }
.gset--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gset--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.gset--wide{ grid-template-columns: 1.6fr 1fr; }
.gset--tall{ grid-template-columns: 1fr 1.6fr; }
@media (max-width: 760px){ .gset--3, .gset--wide, .gset--tall{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px){ .gset--2, .gset--3, .gset--wide, .gset--tall{ grid-template-columns: 1fr; } }

.gitem{ margin: 0; position: relative; overflow: hidden; background: var(--shell-2); cursor: zoom-in; }
.gitem img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.gitem:hover img{ transform: scale(1.03); }
.gitem figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(10,8,8,.68), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.gitem:hover figcaption, .gitem:focus-within figcaption{ opacity: 1; }
.h-sm{ height: clamp(180px, 24vw, 340px); }
.h-md{ height: clamp(230px, 32vw, 460px); }
.h-lg{ height: clamp(280px, 42vw, 620px); }

.lb{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,8,8,.95);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.lb.is-open{ opacity: 1; pointer-events: auto; }
.lb img{ max-width: 100%; max-height: 84vh; object-fit: contain; }
.lb__cap{
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vw, 34px);
  text-align: center; color: rgba(255,255,255,.66);
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.lb__x, .lb__prev, .lb__next{
  position: absolute; appearance: none; background: none; border: 0; cursor: pointer;
  color: #fff; font: inherit; padding: 16px;
}
.lb__x{ top: calc(env(safe-area-inset-top,0px) + 8px); right: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.lb__prev{ left: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.lb__next{ right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.lb__x:hover, .lb__prev:hover, .lb__next:hover{ color: var(--rosso); }

/* ---------- Location -------------------------------------------------------- */

.map{ background: var(--ink); position: relative; }
.map svg{ width: 100%; height: auto; display: block; }
.map__pin{ animation: pulse 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes pulse{
  0%,100%{ opacity: .26; transform: scale(1); }
  50%{ opacity: 0; transform: scale(2.4); }
}
@media (prefers-reduced-motion: reduce){ .map__pin{ animation: none; opacity: .18; } }

.contactgrid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(28px, 3vw, 52px);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(30px, 3vw, 46px);
}
.contactgrid h3{
  margin: 0 0 16px;
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--graphite);
}
.contactgrid p{ margin: 0 0 6px; font-size: 15px; line-height: 1.68; color: var(--ink-2); }
.contactgrid strong{ color: var(--ink); font-weight: 500; }
.contactgrid a{ text-decoration: none; border-bottom: 1px solid var(--hairline-2); color: var(--ink); }
.contactgrid a:hover{ color: var(--rosso); border-color: var(--rosso); }
.contactgrid .muted{ color: var(--graphite); font-size: 12.5px; }

/* ---------- Reserve --------------------------------------------------------- */

.reserve{ background: var(--shell); text-align: center; }
.reserve__in{ max-width: 720px; margin: 0 auto; }
.reserve .eyebrow{ justify-content: center; }
.reserve .eyebrow::before{ display: none; }
.reserve h2{ margin: 0 0 clamp(20px, 2.2vw, 28px); }
.reserve .lede{ margin-inline: auto; }
.reserve .btnrow{ justify-content: center; }
.reserve__alt{
  margin: clamp(28px, 3vw, 42px) 0 0;
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--hairline-2);
  font-size: 13px; color: var(--graphite);
}
.reserve__alt a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline-2); }
.reserve__alt a:hover{ color: var(--rosso); border-color: var(--rosso); }

/* ---------- Story ----------------------------------------------------------- */

.chapter{ padding-block: clamp(60px, 7vw, 124px); }
.chapter + .chapter{ border-top: 1px solid var(--hairline); }

.yearmark{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 6.4vw, 96px);
  line-height: .96; letter-spacing: -.018em;
  color: var(--ink); margin: 0 0 clamp(16px, 1.9vw, 24px);
}
.yearmark small{
  display: block; font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--graphite); margin-top: 18px;
}

.pull{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(23px, 3vw, 44px); line-height: 1.24; letter-spacing: -.012em;
  margin: 0; max-width: 19em; text-wrap: balance;
}
.pull cite{
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--graphite); margin-top: clamp(20px, 2.2vw, 30px);
}

.famiglia{
  display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1fr);
  gap: clamp(30px, 5vw, 88px); align-items: center;
}
@media (max-width: 860px){ .famiglia{ grid-template-columns: 1fr; } }
.famiglia__art{ max-width: 300px; width: 100%; }

/* ---------- Experience ------------------------------------------------------ */

.tiles{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--hairline);
}
.tiles > div{
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 36px) clamp(26px, 3vw, 42px) 0;
  border-right: 1px solid var(--hairline);
}
.tiles > div:last-child{ border-right: 0; }
.tiles h3{
  margin: 0 0 12px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -.008em; line-height: 1.2;
}
.tiles p{ margin: 0; font-size: 13.5px; line-height: 1.68; color: var(--ink-2); }
.tiles .num{
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .24em;
  color: var(--graphite); margin-bottom: 16px;
}
@media (max-width: 700px){
  .tiles > div{ border-right: 0; border-bottom: 1px solid var(--hairline); }
  .tiles > div:last-child{ border-bottom: 0; }
}

.daypart{
  display: grid; grid-template-columns: 140px minmax(0,1fr);
  gap: clamp(18px, 3vw, 48px);
  padding-block: clamp(28px, 3vw, 46px);
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.daypart__t{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 1.9vw, 27px);
  font-variant-numeric: tabular-nums; margin: 0; line-height: 1.1;
}
.daypart__t small{
  display: block; font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--graphite); margin-bottom: 8px;
}
.daypart h3{
  margin: 0 0 10px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 30px); letter-spacing: -.01em; line-height: 1.18;
}
.daypart p{ margin: 0; }
@media (max-width: 620px){ .daypart{ grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Footer ---------------------------------------------------------- */

.foot{ background: var(--ink); color: #fff; padding-block: clamp(58px, 6.4vw, 100px) 0; }
.foot__top{
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0,1fr));
  gap: clamp(30px, 3.4vw, 64px);
  padding-bottom: clamp(40px, 4.6vw, 68px);
  border-bottom: 1px solid var(--hairline-d);
}
@media (max-width: 900px){ .foot__top{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .foot__top{ grid-template-columns: 1fr; } }
.foot__logo img{ height: 32px; width: auto; margin-bottom: 22px; }
.foot h4{
  margin: 0 0 16px; font-size: 10px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.foot p, .foot li{ margin: 0 0 6px; font-size: 13.5px; line-height: 1.66; color: rgba(255,255,255,.72); }
.foot ul{ list-style: none; margin: 0; padding: 0; }
.foot a{ color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
.foot a:hover{ color: #fff; }
.foot strong{ color: #fff; font-weight: 500; }
.foot__bot{
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  align-items: center; justify-content: space-between;
  padding-block: 26px 32px;
  font-size: 10.5px; letter-spacing: .08em; color: rgba(255,255,255,.42);
}
.foot__bot nav{ display: flex; gap: 24px; flex-wrap: wrap; }
.foot .lang{ color: rgba(255,255,255,.42); }
.foot .lang button[aria-pressed="true"]{ color: #fff; }

/* ---------- Reveal ---------------------------------------------------------- */

.rv{ transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.rv--wait{ opacity: 0; transform: translateY(18px); }
.rv--wait.is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .rv--wait{ opacity: 1 !important; transform: none !important; }
}

/* ---------- Utilities -------------------------------------------------------- */

.stack{ display: flex; flex-direction: column; }
.gap-s{ gap: 14px; } .gap-m{ gap: 24px; } .gap-l{ gap: clamp(28px,3.4vw,48px); }
.mt-s{ margin-top: 20px; } .mt-m{ margin-top: clamp(26px,3vw,42px); } .mt-l{ margin-top: clamp(38px,4.6vw,68px); }
.mb-m{ margin-bottom: clamp(26px,3vw,42px); }
.center{ text-align: center; }
.rosso{ color: var(--rosso); }
.sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}