/* =====================================================================
   DRAFT 3 · OLIVA (sage slats)
   Soft and traditional: Italian arches. Photos sit inside arch frames
   and rise into them as you scroll. Sage panels from the slat wall,
   cream base, maroon only for actions. Menu as arched cards with
   filter tabs. Poppins only.
   ===================================================================== */
:root {
  --font: "Poppins", system-ui, sans-serif;
  --bg: #f5f0e6; --surface: #fbf8f2; --accent: #7d2a33; --text: #1f2620; --soft: #5f675e; --line: #dfe0d2;
  --sagebg: #c9d3c3;
}
.nav .wtag { color: var(--sage-d); }
.arch { display: block; overflow: hidden; border-radius: 9999px 9999px 16px 16px; }
.arch img { width: 100%; height: 100%; object-fit: cover; }

.hero-arch { padding: 150px 0 var(--s800); text-align: center; }
.hero-arch .wrap { display: flex; flex-direction: column; align-items: center; }
.hero-arch .hero-sub { margin-top: var(--s300); }
.hero-arch .hero-act { justify-content: center; }
.arches { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--s300); align-items: end; width: 100%; margin-top: var(--s700); }
.arches .arch { height: 380px; }
.arches .arch.tall { height: 480px; }
.arches .lid { background: var(--bg); }

/* home: the menu sections as a compact row of links with a small round photo */
.cats.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s100); max-width: 960px; margin: 0 auto; }
.cats.pills .cat-tile { display: grid; grid-template-columns: 48px auto; grid-template-rows: auto auto; column-gap: var(--s100); align-items: center; padding: var(--s75) var(--s300) var(--s75) var(--s75); border-radius: 9999px; background: var(--surface); text-decoration: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); transition: transform 500ms var(--ease), background-color 300ms var(--ease); }
.cats.pills .cat-tile:hover { transform: translateY(-2px); background: var(--sagebg); }
.cats.pills .cat-img { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 9999px; overflow: hidden; }
.cats.pills img { width: 100%; height: 100%; object-fit: cover; }
.cats.pills .cat-it { grid-column: 2; grid-row: 2; color: var(--accent); }
.cats.pills .cat-name { grid-column: 2; grid-row: 1; font-size: 16px; line-height: 24px; }

.sagepanel { background: var(--sagebg); padding: var(--s900) 0; }
.sagepanel .arch.big { height: 560px; }
.sagepanel .lid { background: var(--sagebg); }
.sagepanel .lede { color: #44503f; }

.tagsec { text-align: center; }
.tagsec .tagline { margin: 0 auto; }
.ordering { background: var(--sagebg); }
.ordering .lede { color: #44503f; }

/* menu: arched cards */
.mode-arch .cat-head { align-items: center; text-align: center; margin: 0 auto var(--s500); }
.mode-arch .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s500) var(--s300); }
.mode-arch .item { display: flex; flex-direction: column; gap: var(--s50); }
.mode-arch .item .arch { aspect-ratio: 3 / 4; margin-bottom: var(--s100); }
.mode-arch .item .it { color: var(--accent); }
.tabs { justify-content: center; }
.band { margin: 0 var(--s300); border-radius: 9999px 9999px 24px 24px; }
.band.small { border-radius: 24px; }
.tp-img img { border-radius: 9999px 9999px 24px 24px; }
.visitshort { background: var(--surface); }
.hours.card { background: var(--bg); }

.foot { background: var(--sage-d); color: #eef0e6; --soft: #c3cbbd; --line: #4b5c50; --text: #eef0e6; --accent: #f0d3a9; }
.foot .phone b { color: #eef0e6; }

@media (max-width: 1000px) { .mode-arch .items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .arches .arch { height: 240px; } .arches .arch.tall { height: 300px; }
  .mode-arch .items { grid-template-columns: 1fr 1fr; }
  .sagepanel .arch.big { height: 420px; }
}
@media (max-width: 560px) {
  .arches { grid-template-columns: 1fr 1fr; }
  .arches .arch:first-child { display: none; }
  .arches .arch { height: 220px; } .arches .arch.tall { height: 260px; }
  .band { margin: 0 var(--s200); }
}
/* inner page heads: centred, with the photo in an arch */
.pagehead { text-align: center; }
.pagehead .ph-grid { grid-template-columns: 1fr; justify-items: center; gap: var(--s500); }
.pagehead .ph-copy { display: flex; flex-direction: column; align-items: center; }
.pagehead .hero-act { justify-content: center; }
.ph-img { width: min(420px, 100%); }
.ph-img img { height: 300px; border-radius: 9999px 9999px 16px 16px; }
.search { margin: 0 auto var(--s300); }