/* Otto Osteria Giapponese - Monza.
   A dinner-only room of twenty-five seats: the page is dark where the evening is, paper where
   the reading is, and the only saturated colour is the persimmon of the accent. */

:root {
  --sumi: #14161a;          /* ink, the darkest surface */
  --sumi-deep: #0d0f12;
  --sumi-soft: #1d2027;     /* raised panels on the dark sections */
  --kinari: #f3efe6;        /* unbleached paper */
  --kinari-deep: #e7e1d4;
  --testo: #23262b;
  --muto: #6d6a63;
  --muto-scuro: #a29c90;    /* muted text on dark */
  --kaki: #b85c2c;          /* persimmon */
  --kaki-chiaro: #d98a52;
  --linea: rgba(35, 38, 43, 0.14);
  --linea-scura: rgba(243, 239, 230, 0.14);
  --shell: 68rem;
  --raggio: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--kinari);
  color: var(--testo);
  font-family: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 5.4vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.12rem; font-family: 'Karla', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.01em; }

p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--kaki);
  outline-offset: 3px;
  border-radius: var(--raggio);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sumi);
  color: var(--kinari);
  padding: 0.7rem 1.1rem;
  z-index: 40;
}
.skip:focus { left: 0; }

/* ---------- topbar ---------- */

.topbar {
  background: var(--sumi-deep);
  color: var(--kinari);
  border-bottom: 1px solid var(--linea-scura);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 4.35rem;
  flex-wrap: wrap;
}

.mark {
  text-decoration: none;
  display: grid;
  gap: 0.1rem;
  margin-right: auto;
}
.mark__word {
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.24rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mark__sub {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muto-scuro);
}

.nav {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
  font-size: 0.87rem;
}
.nav a {
  text-decoration: none;
  color: var(--muto-scuro);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a:focus-visible { color: var(--kinari); border-bottom-color: var(--kaki); }

@media (max-width: 62rem) {
  .nav { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.3rem;
  border-radius: var(--raggio);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn--kaki { background: var(--kaki); color: #fff; }
.btn--kaki:hover, .btn--kaki:focus-visible { background: #a4501f; }
.btn--linea { border-color: currentColor; }
.btn--linea:hover, .btn--linea:focus-visible { background: rgba(184, 92, 44, 0.1); }
.btn--chiaro { border-color: rgba(243, 239, 230, 0.45); color: var(--kinari); }
.btn--chiaro:hover, .btn--chiaro:focus-visible { background: rgba(243, 239, 230, 0.1); }

.topbar__cta { padding: 0.6rem 1.05rem; font-size: 0.85rem; }

/* ---------- hero ---------- */

.hero {
  background: var(--sumi);
  color: var(--kinari);
  padding-block: clamp(3rem, 7vw, 5.2rem) clamp(2.6rem, 6vw, 4.4rem);
}

.hero__in {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

@media (max-width: 58rem) {
  .hero__in { grid-template-columns: 1fr; }
}

.eyebrow {
  font-size: 0.71rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kaki-chiaro);
  margin-bottom: 1.15rem;
}

.hero h1 { margin-bottom: 1.3rem; }

.hero__lead {
  font-size: 1.06rem;
  color: #ddd7ca;
  max-width: 33rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.7rem;
}

.hero__meta {
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-scura);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  font-size: 0.9rem;
  color: var(--muto-scuro);
}
.hero__meta b { display: block; color: var(--kinari); font-size: 1.02rem; font-weight: 700; }

.hero__shot {
  border-radius: var(--raggio);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }

/* Above the fold on a wide screen the photograph runs the full height of the text beside it,
   so the two columns end together instead of leaving a hole under the image. */
@media (min-width: 58.0625rem) {
  .hero__shot { aspect-ratio: auto; min-height: 100%; }
}

.su5 { color: var(--muto-scuro); font-weight: 400; font-size: 0.86em; }

/* ---------- generic sections ---------- */

.sezione { padding-block: clamp(3rem, 7vw, 4.8rem); }
.sezione--scura { background: var(--sumi); color: var(--kinari); }
.sezione--riga { border-top: 1px solid var(--linea); }

.sezione__testa { max-width: 40rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.sezione__testa .eyebrow { color: var(--kaki); }
.sezione--scura .sezione__testa .eyebrow { color: var(--kaki-chiaro); }
.sezione__testa h2 { margin-bottom: 0.9rem; }

.lead { font-size: 1.04rem; }
.sezione--scura .lead { color: #ddd7ca; }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 5vw, 3.4rem);
  align-items: center;
}
@media (max-width: 54rem) { .duo { grid-template-columns: 1fr; } }

.duo__shot { border-radius: var(--raggio); overflow: hidden; }

/* ---------- dish list ---------- */

.piatti {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(1.6rem, 5vw, 3.4rem);
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.12rem;
}
@media (max-width: 40rem) { .piatti { columns: 1; } }

.piatti li {
  break-inside: avoid;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--linea);
}
.sezione--scura .piatti li { border-bottom-color: var(--linea-scura); }

.nota {
  font-size: 0.87rem;
  color: var(--muto);
  margin-top: 1.5rem;
  max-width: 38rem;
}
.sezione--scura .nota { color: var(--muto-scuro); }

/* ---------- gallery ---------- */

.galleria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (max-width: 46rem) { .galleria { grid-template-columns: repeat(2, 1fr); } }

.galleria figure { margin: 0; }
.galleria img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raggio);
}
.galleria figcaption {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muto);
  margin-top: 0.45rem;
}
.sezione--scura .galleria figcaption { color: var(--muto-scuro); }

/* ---------- guide panel ---------- */

.guida {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--linea-scura);
  border: 1px solid var(--linea-scura);
  border-radius: var(--raggio);
  overflow: hidden;
}
.guida > div { background: var(--sumi-soft); padding: 1.6rem 1.5rem; }
.guida dt {
  font-size: 0.71rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kaki-chiaro);
  margin-bottom: 0.6rem;
}
.guida dd { margin: 0; font-size: 0.97rem; color: #ddd7ca; }
.guida dd b { display: block; font-family: 'Spectral', Georgia, serif; font-size: 1.35rem; font-weight: 400; color: var(--kinari); margin-bottom: 0.35rem; }

/* ---------- reviews ---------- */

.voci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
}

.voce {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.voce blockquote {
  margin: 0;
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.55;
}
.voce figcaption { font-size: 0.85rem; color: var(--muto); margin-top: auto; }
.voce figcaption b { color: var(--testo); }

/* ---------- info grid ---------- */

.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.8rem);
}

.orari { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.orari th, .orari td { text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.orari th { color: var(--muto); font-weight: 400; }
.orari td { text-align: right; }
.orari .chiuso { color: var(--kaki); }

.contatti { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.98rem; }
.contatti a { text-decoration-color: var(--kaki); text-underline-offset: 3px; }

/* ---------- footer ---------- */

.footer {
  background: var(--sumi-deep);
  color: var(--muto-scuro);
  padding-block: 2.6rem;
  font-size: 0.87rem;
}
.footer__in { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; align-items: baseline; }
.footer a { color: var(--kinari); text-decoration-color: var(--kaki); text-underline-offset: 3px; }
.footer__note { margin-left: auto; max-width: 26rem; }

/* ---------- 404 ---------- */

.vuoto {
  min-height: 76vh;
  display: grid;
  align-content: center;
  gap: 0.5rem;
}
.vuoto__mark {
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}
.vuoto__links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.5rem; }