/* Evo Firenze - Evoluzione Pizza
   Tokens are sampled from the venue's own Google Maps photographs; see _brief.md for the
   sampling table. The one accent is the yellow of the "Pizza Zone" road sign hanging on the
   front of their counter, so it is only ever used with ink on top of it. */

:root {
  --ink:      #121316;   /* counter graphite */
  --slate:    #35343A;   /* tables and stools */
  --zone:     #F0BE3C;   /* the Pizza Zone diamond, and the Forst gold */
  --zone-dk:  #D9A61F;   /* the same yellow, darkened for hover */
  --basil:    #465232;   /* the foliage panels on the walls */
  --plaster:  #E8D9BE;   /* lit plaster, and the crust of every tray */
  --paper:    #FBF8F2;
  --stone:    #6A625B;   /* floor tone, darkened to 5.7:1 on paper */
  --line:     #E2D9CA;

  --display: 'Bricolage Grotesque', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --shell: 72rem;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
}

*, *::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(--body);
  font-size: clamp(1.0rem, 0.94rem + 0.30vw, 1.14rem);
  line-height: 1.62;
  overflow-x: hidden;
}

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

a { color: inherit; }

::selection { background: var(--zone); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--basil);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--zone);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  font-family: var(--display);
  font-weight: 700;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- the diamond, lifted off the counter sign ---------- */

.dia,
.mark__dia {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  background: var(--zone);
  transform: rotate(45deg);
  vertical-align: baseline;
  margin-inline-end: 0.15em;
}
.mark__dia { width: 0.7rem; height: 0.7rem; margin-inline-end: 0.55rem; }

/* ---------- header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-inline-end: auto;
  padding-block: 0.6rem;
}

.nav {
  display: none;
  gap: clamp(0.9rem, 2vw, 1.7rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav a {
  text-decoration: none;
  padding-block: 1.15rem;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.nav a:hover { border-bottom-color: var(--zone); }

@media (min-width: 52rem) { .nav { display: flex; } }

.topbar__cta { padding: 0.55rem 1.1rem; font-size: 0.82rem; }

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

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.82rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  min-height: 44px;
  transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease;
}

.btn--zone { background: var(--zone); color: var(--ink); }
.btn--zone:hover { background: var(--zone-dk); }

.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--zone); border-color: var(--zone); color: var(--ink); }

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

.hero {
  background: var(--ink);
  color: var(--paper);
  display: grid;
  gap: 0;
}

.hero__text {
  padding: clamp(2.6rem, 6vw, 5.5rem) var(--gutter) clamp(2.4rem, 5vw, 4rem);
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plaster);
  margin: 0 0 1.4rem;
}

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 1.35rem + 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 1.35rem;
}

.hero__lead {
  margin: 0 0 2rem;
  max-width: 34rem;
  color: #E9E4DA;
  font-size: 1.06em;
}

.hero__score {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 2.1rem;
}
.hero__score-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--zone);
  letter-spacing: -0.04em;
}
.hero__score-t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero__score-t span { color: var(--plaster); }

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

.hero__shot picture { display: contents; }
.hero__shot img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .hero__text {
    padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    padding-block: clamp(4rem, 7vw, 7rem);
    margin-inline: 0;
    max-width: none;
    align-self: center;
  }
  .hero__shot { position: relative; }
  .hero__shot img { height: 100%; aspect-ratio: auto; position: absolute; inset: 0; }
}

/* ---------- today strip ---------- */

.today {
  background: var(--zone);
  color: var(--ink);
}
.today--shut { background: var(--plaster); }

.today__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem 1rem;
  padding-block: 0.85rem;
}

.today__tag {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  background: var(--ink);
  color: var(--zone);
  padding: 0.3rem 0.7rem;
}
.today--shut .today__tag { color: var(--plaster); }

.today__text {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.92rem, 0.86rem + 0.28vw, 1.08rem);
  letter-spacing: -0.005em;
}

/* ---------- bands ---------- */

.band { padding-block: clamp(3rem, 7vw, 6rem); }
.band--paper   { background: var(--paper); }
.band--plaster { background: var(--plaster); }
.band--ink     { background: var(--ink); color: var(--paper); }

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 1.2rem;
}

.prose { max-width: 38rem; }
.prose p { margin: 0 0 1rem; }
.prose__note {
  border-left: 3px solid var(--zone);
  padding-left: 1rem;
  color: var(--stone);
  font-size: 0.95em;
}

.lede {
  max-width: 36rem;
  color: var(--stone);
  margin: 0 0 2rem;
}

/* ---------- the tray: the signature block ---------- */

.tray {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;                 /* the width of a knife line through a teglia */
  background: var(--paper);
}

@media (min-width: 48rem) {
  .tray { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tray__pc {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.tray__pc img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 340ms ease;
}
.tray__pc:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .tray__pc img, .tray__pc:hover img { transition: none; transform: none; }
}

.tray__pc span {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1.5rem 0.85rem 0.7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.76rem, 0.7rem + 0.28vw, 0.92rem);
  line-height: 1.25;
  color: var(--paper);
  background: linear-gradient(to top, rgba(18, 19, 22, 0.88), rgba(18, 19, 22, 0));
}

/* ---------- split bands ---------- */

.split {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.split__text { max-width: 34rem; }
.split__text p { margin: 0 0 1rem; }
.split__shot img { width: 100%; }

@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  .split--flip .split__shot { order: 2; }
  .split--flip .split__text { order: 1; }
  .split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
}

.band--ink .split__text .muted { color: #B7B0A4; }
.muted { color: var(--stone); font-size: 0.95em; }

.pull {
  margin: 1.6rem 0;
  padding: 1.15rem 1.3rem;
  background: var(--slate);
  border-left: 4px solid var(--zone);
}
.pull p {
  margin: 0 0 0.5rem;
  font-size: 1.08em;
  font-style: italic;
}
.pull cite {
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--zone);
}

/* ---------- quotes ---------- */

.quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 52rem) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
}

.quotes li {
  background: var(--slate);
  color: var(--paper);
  border-radius: 2px;
  padding: 1.5rem 1.35rem 1.6rem;
  border-top: 4px solid var(--zone);
}
.quotes p { margin: 0; font-size: 1.02em; }

/* ---------- closing: hours and address ---------- */

.closing { border-top: 1px solid var(--line); }

.closing__in {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4rem);
}
@media (min-width: 62rem) {
  .closing__in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.week {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.9rem;
  font-family: var(--display);
}
.week th,
.week td {
  text-align: left;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.98rem;
}
.week th { color: var(--basil); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; }
.week td { text-align: right; letter-spacing: -0.01em; }
.week .shut { color: var(--stone); font-weight: 400; font-family: var(--body); }

address {
  font-style: normal;
  font-size: 1.18em;
  line-height: 1.5;
  margin: 0 0 1.4rem;
}

.where__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
}

.where__social {
  display: flex;
  gap: 1.3rem;
  margin: 0 0 2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.where__social a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 2px solid var(--zone);
  transition: color 160ms ease, border-color 160ms ease;
}
.where__social a:hover { color: var(--basil); border-bottom-color: var(--basil); }

.where__shot { border-radius: 2px; }

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

.footer {
  background: var(--ink);
  color: var(--plaster);
  padding-block: 2rem;
  font-size: 0.92rem;
}
.footer__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.footer__mark {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
}
/* The phone number is the only thing anyone taps down here, so give it a real target
   instead of leaving it as a 20px inline run of text. */
.footer a {
  color: var(--zone);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}