/* Ciaooo, 62-64 Swan Street, Manchester.
   Light theme built from the venue's own identity: the colours and Savate lettering of
   ciaooopizzeria.co.uk, the dashed oven outline from the logo, and the dashed boxes, basil
   green and lemon blobs of the printed menu card. Barlow Condensed stands in for the DIN 1451
   Engschrift the old site self-hosts, which is a licensed face. */

/* Self-hosted from Google Fonts (SIL Open Font License), latin subset only: one less
   render-blocking stylesheet and two fewer connections on a phone. */
@font-face { font-family: 'Savate'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/savate-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); }

:root {
  color-scheme: light;

  --paper:    #fafafa;   /* ciaooopizzeria.co.uk page background */
  --white:    #ffffff;
  --ink:      #0d100e;   /* their black */
  --ink-2:    #4a4643;   /* secondary text, 8:1 on paper */
  --red:      #ed3225;   /* logo red: logos, display type, outlines */
  --red-deep: #d42a1e;   /* buttons and small red text – keeps white/paper contrast above 4.5:1 */
  --pink:     #fce6e4;   /* header, footer and brick pink */
  --basil:    #35a67c;   /* the green boxes on the printed menu */
  --lemon:    #fffb87;   /* the yellow blobs on the printed menu */
  --rule:     rgba(13, 16, 14, 0.12);

  --shell: min(1180px, 100% - 2rem);
  --r-lg: 22px;
  --r-sm: 12px;

  --display: 'Savate', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1, h2, h3 { margin: 0 0 0.5em; }

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem);
  line-height: 1.02;
  color: var(--red);
}

h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.55rem, 1.35rem + 0.7vw, 1.95rem);
  line-height: 1.05;
  color: var(--red);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

a:focus-visible,
button:focus-visible,
iframe:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { width: var(--shell); margin-inline: auto; }

.lede { font-size: clamp(1.08rem, 1.02rem + 0.35vw, 1.25rem); color: var(--ink-2); max-width: 38rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--fill { background: var(--red-deep); color: var(--white); }
.btn--fill:hover { background: #b9221a; }

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

.btn--small { min-height: 42px; padding: 0.45rem 1.1rem; font-size: 1.05rem; }

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red-deep);
  color: var(--white);
  padding: 0.8rem 1.3rem;
  z-index: 100;
  text-decoration: none;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pink);
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
}

.logo { display: inline-flex; align-items: center; min-height: 48px; }
.logo img { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.4rem; }

/* display:contents so the links sit directly in the flex row; the media query below still
   collapses them. */
.nav__links { display: contents; }

.nav__links a,
.nav__call {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { border-bottom-color: var(--red); }

.nav__call { white-space: nowrap; }

@media (max-width: 860px) {
  .nav__links { display: none; }
}

@media (max-width: 420px) {
  .nav__call { display: none; }
}

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

.hero {
  position: relative;
  padding: clamp(2rem, 1rem + 3.5vw, 4rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}

.hero__copy { position: relative; text-align: center; }

.slogan { display: block; width: min(100%, 470px); height: auto; margin: 0 auto -0.4rem; overflow: visible; }
.slogan text { font-family: var(--display); font-weight: 800; fill: var(--red); }

.hero h1 {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  margin: 0 auto 0.55em;
  text-wrap: balance;
}

.hero__sub { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--ink-2); max-width: 31rem; margin-inline: auto; }

.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.8rem; }

.hero__call { margin-top: 1rem; font-size: 0.98rem; color: var(--ink-2); }
.hero__call a { color: var(--ink); font-weight: 600; white-space: nowrap; }

.hero__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  margin: 2rem auto 0;
  padding-top: 1.2rem;
  border-top: 2px dashed rgba(237, 50, 37, 0.45);
  max-width: 34rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.hero__strip b { color: var(--ink); font-weight: 600; }

.hero__olive {
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: clamp(38px, 2rem + 1.5vw, 56px);
  transform: rotate(-14deg);
}

/* The photo sits in the oven dome from the logo: a round top and a dashed outline. */
.arch { position: relative; margin: 0; padding: 14px; max-width: 470px; justify-self: center; width: 100%; }
.arch::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px dashed var(--red);
  border-radius: 999px 999px 30px 30px;
  pointer-events: none;
}
.arch img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 42% 50%;
  border-radius: 999px 999px 18px 18px;
}

.arch__sticker {
  position: absolute;
  left: -1.6rem;
  bottom: 2.2rem;
  width: clamp(76px, 3.5rem + 2.5vw, 104px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--paper);
  border-radius: 50%;
  padding: 0.7rem;
  transform: rotate(-10deg);
}

@media (max-width: 860px) {
  .hero__in { grid-template-columns: 1fr; }
  .arch { max-width: 360px; }
  .arch__sticker { left: -0.4rem; }
}

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

.section { position: relative; padding: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem) 0; }
.section--pink { background: var(--pink); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section__icon { width: 48px; height: auto; margin-bottom: 0.9rem; }

/* ---------- story ---------- */

.story {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.story h2 { max-width: 15ch; }

.story__figure { position: relative; margin: 0; }
.story__figure img { border-radius: var(--r-lg); }

.story__stat {
  position: absolute;
  right: -0.9rem;
  bottom: -1.4rem;
  width: 9.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red-deep);
  color: var(--white);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
  transform: rotate(8deg);
  margin: 0;
}
.story__stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 2.5rem; line-height: 1; }
.story__stat span { display: block; font-family: var(--cond); font-weight: 600; font-size: 0.95rem; line-height: 1.15; margin-top: 0.3rem; text-transform: uppercase; }

@media (max-width: 880px) {
  .story { grid-template-columns: 1fr; }
  .story__stat { right: 0.5rem; width: 8rem; }
  .story__stat b { font-size: 2.1rem; }
}

/* ---------- menu ---------- */

.menu-section { overflow: hidden; }
.menu-section > .shell { position: relative; z-index: 1; }

/* The yellow blobs from the printed card, kept behind the boxes. */
.blob { position: absolute; z-index: 0; fill: var(--lemon); pointer-events: none; }
.blob--a { width: min(46vw, 560px); top: 3rem; right: -9rem; }
.blob--b { width: min(52vw, 620px); bottom: 6rem; left: -12rem; }

/* Two explicit columns rather than auto-fit: with four stacks of very different lengths,
   auto-fit left the last stack stretched across the full width on its own row. */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.25rem;
  align-items: start;
}

@media (max-width: 860px) {
  .menu-grid { grid-template-columns: 1fr; }
}

.menu-col { display: grid; gap: 2rem; }

.menu-card {
  background: var(--white);
  border: 2px dashed var(--red);
  border-radius: var(--r-lg);
  padding: 1.5rem clamp(1.1rem, 0.8rem + 1vw, 1.6rem) 0.9rem;
}

.menu-card h3 { margin-bottom: 0.4rem; }

.menu-card--green { background: var(--basil); border: 2px solid var(--basil); }
.menu-card--green h3 { color: var(--white); }
.menu-card--green .dish { border-bottom-color: rgba(13, 16, 14, 0.18); }
.menu-card--green .dish__note { color: var(--ink); }
.menu-card--green .tag { background: var(--white); }

.dish {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.dish:last-child { border-bottom: 0; }

.dish__name,
.dish__price {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.dish__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__note { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }

.tag {
  display: inline-block;
  font-family: var(--cond);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.45rem 0.18rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: var(--basil);
  color: var(--ink);
  vertical-align: 0.15em;
}

.menu-foot {
  margin-top: 2.5rem;
  padding: 1.3rem 1.5rem;
  background: var(--pink);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  max-width: 60rem;
}

/* ---------- booking ---------- */

.book {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.book__copy { position: sticky; top: 6.5rem; }
.book__copy p { max-width: 30rem; }
.book__copy .lede { margin-bottom: 1.2rem; }
.book__copy a { font-weight: 600; }
.book__alt { font-size: 0.92rem; color: var(--ink-2); }

.book__frame {
  background: var(--white);
  border: 2px dashed var(--red);
  border-radius: var(--r-lg);
  padding: 1rem 0.75rem 0.5rem;
  max-width: 640px;
  width: 100%;
  justify-self: end;
}

/* ResDiary's first step is 601px tall; 650px matches the frame on ciaooopizzeria.co.uk. */
.book__frame iframe { display: block; width: 100%; height: 650px; border: 0; }
.book__copy a[href^="tel:"] { white-space: nowrap; }

@media (max-width: 860px) {
  .book { grid-template-columns: 1fr; }
  .book__copy { position: static; }
  .book__frame { justify-self: stretch; max-width: none; padding: 0.6rem 0.25rem 0.25rem; }
}

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

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
}
.gallery img { border-radius: var(--r-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery figure { margin: 0; }

@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .gallery img { aspect-ratio: 1; }
}

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

.reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 3rem;
}

@media (max-width: 760px) {
  .reviews { grid-template-columns: 1fr; }
}

.review {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 2px dashed var(--red);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.review blockquote { margin: 0; font-size: 1.05rem; max-width: 34rem; }
.review figcaption { font-size: 0.9rem; color: var(--ink-2); margin-top: auto; }
.review figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- visit ---------- */

.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}

@media (max-width: 880px) { .visit { grid-template-columns: 1fr; } }

.hours { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.hours th, .hours td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.hours th { font-weight: 600; width: 11rem; }
.hours td { font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .is-today th, .hours .is-today td { color: var(--red-deep); font-weight: 700; }
.today {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--cond);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--red-deep);
  color: var(--white);
  vertical-align: 0.1em;
}

.contact-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.6rem; }
.contact-list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center; min-height: 44px; }
.contact-list b { font-weight: 600; color: var(--ink-2); }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.note {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin-top: 1.5rem;
}

/* ---------- bricks + footer ---------- */

/* Whole-pixel tile sizes so the repeat never shows a hairline seam. */
.bricks {
  height: 59px;
  background: url('/assets/brand/bricks-tile.svg') repeat-x left bottom / 31px 59px;
}

@media (max-width: 600px) {
  .bricks { height: 46px; background-size: 24px 46px; }
}

.foot {
  background: var(--pink);
  padding: 2.5rem 0 2.25rem;
  font-size: 0.95rem;
}

.foot__in { display: flex; flex-wrap: wrap; gap: 1.75rem 3rem; justify-content: space-between; align-items: flex-start; }
.foot__brand { display: flex; gap: 1.4rem; align-items: center; }
.foot__brand img { width: 104px; height: auto; }
.foot__title { font-family: var(--cond); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.foot a { font-weight: 600; }
.foot__social { display: flex; gap: 1.2rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.foot__legal { width: 100%; padding-top: 1.25rem; border-top: 1px solid rgba(237, 50, 37, 0.25); font-size: 0.82rem; color: var(--ink-2); }

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

.oops {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 1rem;
}
.oops__in { max-width: 32rem; }
.oops__in .logo { justify-content: center; }
.oops__in .logo img { height: 64px; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* <picture> wrappers around the photos: let the img inside size against its figure. */
picture { display: block; }