/* Pizzeria Dalla Norma – Massa.
   Colours are taken from the venue's own photographs: the burgundy of the awning over the
   door, the salmon render of the building on Piazza IV Novembre, the copper of the fan hood
   above the oven and the amber of the fire under the cecina tins. */

:root {
  --vino: #6d1c2d;
  --vino-scuro: #4a1220;
  --vino-chiaro: #8e2c40;
  --rosa: #e8ab90;
  --rosa-pallido: #f6e0d4;
  --crema: #fcf5ec;
  --carta: #fffaf3;
  --rame: #a2603a;
  --brace: #c9691e;
  --inchiostro: #2c1a16;
  --fumo: #6d564e;
  --bordo: #e3d3c4;

  --shell: 68rem;
  --radius: 4px;
  --ombra: 0 1px 2px rgba(44, 26, 22, .07), 0 10px 26px -18px rgba(44, 26, 22, .5);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.65 Asap, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: Bitter, Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 5.4vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.12rem; letter-spacing: 0; }

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

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

a { color: var(--vino); }

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

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--vino);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 60;
  text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- the awning: a burgundy band with the name in white, like the real one ------- */

.tenda {
  background: var(--vino);
  color: #fff;
  border-bottom: 4px solid var(--vino-scuro);
  position: sticky;
  top: 0;
  z-index: 40;
}

.tenda__in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.35rem;
  flex-wrap: wrap;
  padding-block: .55rem;
}

.mark {
  color: inherit;
  text-decoration: none;
  display: grid;
  gap: .1rem;
  margin-right: auto;
}
.mark__word {
  font-family: Bitter, Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .02em;
  line-height: 1.05;
}
.mark__sub {
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--rosa);
}

.nav {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
  font-size: .92rem;
}
.nav a {
  color: #fbe7de;
  text-decoration: none;
  padding-block: .2rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--rosa); }

.tel {
  font-family: Bitter, Georgia, serif;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .55);
  padding: .45rem .85rem;
  border-radius: var(--radius);
}
.tel:hover { background: rgba(255, 255, 255, .12); }

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

.btn {
  display: inline-block;
  font-family: Bitter, Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: .82rem 1.5rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--vino);
  transition: background-color .15s ease, color .15s ease;
}
.btn--pieno { background: var(--vino); color: #fff; }
.btn--pieno:hover { background: var(--vino-scuro); border-color: var(--vino-scuro); }
.btn--vuoto { background: transparent; color: var(--vino); }
.btn--vuoto:hover { background: var(--rosa-pallido); }

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

.hero {
  background:
    linear-gradient(180deg, var(--carta) 0%, var(--crema) 100%);
  border-bottom: 1px solid var(--bordo);
  padding-block: clamp(2.25rem, 6vw, 4rem);
}

.hero__in {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.occhiello {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rame);
  margin-bottom: .9rem;
  font-weight: 600;
}

.hero__lead {
  font-size: 1.16rem;
  color: #4a352f;
  max-width: 34rem;
  margin-top: 1.15rem;
}

.hero__azioni {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.voto {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--bordo);
  max-width: 22rem;
}
.voto__n {
  font-family: Bitter, Georgia, serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--vino);
}
.voto__t { font-size: .9rem; color: var(--fumo); line-height: 1.4; }
.voto__t b { color: var(--inchiostro); font-weight: 600; }

.hero__foto img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--ombra);
}

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

section { padding-block: clamp(2.75rem, 6.5vw, 4.75rem); }

.filo {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.filo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bordo);
}

.intro {
  max-width: 42rem;
  font-size: 1.08rem;
  color: #4a352f;
}

/* ---------- calda calda ---------- */

.calda { background: var(--carta); border-block: 1px solid var(--bordo); }

.calda__in {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
}

.calda__foto img { border-radius: var(--radius); box-shadow: var(--ombra); }

.nomi {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.nomi li {
  font-family: Bitter, Georgia, serif;
  font-size: .93rem;
  font-weight: 600;
  color: var(--vino);
  background: var(--rosa-pallido);
  border: 1px solid #eccdbd;
  border-radius: 999px;
  padding: .3rem .95rem;
}

/* ---------- banco ---------- */

.banco ul {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.banco li {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  overflow: hidden;
}
.banco img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.banco .testo { padding: 1.1rem 1.2rem 1.35rem; }
.banco h3 { margin-bottom: .35rem; }
.banco p { font-size: .97rem; color: var(--fumo); }

.listino {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--rosa-pallido);
  border-left: 4px solid var(--rame);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .99rem;
  max-width: 44rem;
}

/* ---------- forno ---------- */

.forno {
  background: var(--vino-scuro);
  color: #f7e3d8;
  border-block: 1px solid var(--vino-scuro);
}
.forno h2 { color: #fff; }
.forno .filo::after { background: rgba(255, 255, 255, .22); }
.forno .intro { color: #f0d3c6; }
.forno figure { margin: 2rem 0 0; }
.forno img { border-radius: var(--radius); width: 100%; }
.forno figcaption {
  margin-top: .75rem;
  font-size: .88rem;
  color: #dcb5a5;
}

.numeri {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.numeri li {
  border-top: 2px solid var(--brace);
  padding-top: .8rem;
}
.numeri b {
  display: block;
  font-family: Bitter, Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.numeri span { font-size: .9rem; color: #dcb5a5; }

/* ---------- recensioni ---------- */

.dicono ul {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.dicono li {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
}
.dicono blockquote {
  margin: 0 0 1rem;
  font-family: Bitter, Georgia, serif;
  font-size: 1.03rem;
  line-height: 1.5;
}
.dicono figcaption, .dicono .chi {
  margin-top: auto;
  font-size: .87rem;
  color: var(--fumo);
}
.dicono .chi b { color: var(--inchiostro); font-weight: 600; }
.stelle { color: var(--brace); letter-spacing: .1em; font-size: .9rem; }

/* ---------- dove ---------- */

.dove { background: var(--carta); border-top: 1px solid var(--bordo); }
.dove__in {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: start;
}
.dove img { border-radius: var(--radius); box-shadow: var(--ombra); }

.scheda { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
.scheda div { border-top: 1px solid var(--bordo); padding-top: .9rem; }
.scheda dt {
  font-size: .74rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rame);
  font-weight: 600;
  margin-bottom: .3rem;
}
.scheda dd { margin: 0; font-size: 1.03rem; }
.scheda a { color: var(--vino); }

.nota { font-size: .92rem; color: var(--fumo); margin-top: 1.4rem; }

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

.pie {
  background: var(--vino);
  color: #f4dbd0;
  padding-block: 2.25rem;
  font-size: .92rem;
}
.pie a { color: #fff; }
.pie__in { display: grid; gap: 1rem; }
.pie strong { color: #fff; font-family: Bitter, Georgia, serif; font-size: 1.05rem; }

/* ---------- wide screens ---------- */

/* The bar is sticky, so on a phone it has to stay one row tall. The page is short and
   linear; the section links are not worth a third of the viewport. */
@media (max-width: 55.99rem) {
  .nav { display: none; }
  .tenda__in { flex-wrap: nowrap; gap: .75rem; min-height: 3.6rem; }
  .mark__word { font-size: 1.05rem; }
  .mark__sub { font-size: .62rem; letter-spacing: .13em; }
  .tel { font-size: .92rem; padding: .4rem .7rem; }
}

@media (min-width: 56rem) {
  .hero__in { grid-template-columns: 1.05fr .95fr; }
  .calda__in { grid-template-columns: .95fr 1.05fr; }
  .calda__foto { order: -1; }
  .dove__in { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}