/* =====================================================================
   DRAFT 5 · CORNICE (frame)
   The photo IS the page. Every page opens on one picture that fills the
   whole screen, edge to edge, with nothing laid over it except a plain
   cream card in the corner holding the words. The photo drifts a little
   slower than the page as you scroll. Menu as photo cards; tap one for
   what it contains. Manrope only. Cream, sand, maroon for actions.
   ===================================================================== */
:root {
  --font: "Manrope", system-ui, sans-serif;
  --bg: #f4eee4; --surface: #fbf8f2; --sand: #e9dcc6; --accent: #7d2a33; --text: #1f1a16; --soft: #6b6158; --line: #e2d6c4;
}
.nav .wtag { color: var(--accent); }

/* ---------- full frame photo, a card in the corner ---------- */
.frame { position: absolute; inset: 0; overflow: hidden; background: var(--sand); }
.frame img { position: absolute; left: 0; top: -64px; width: 100%; height: calc(100% + 128px); object-fit: cover; transform: translateY(var(--py, 0px)); will-change: transform; }
.fr-card { position: relative; max-width: 600px; padding: var(--s500); border-radius: 24px; background: var(--surface); box-shadow: 0 24px 64px -32px rgba(30, 20, 10, .45); }
.fr-card .hero-sub { margin-top: var(--s200); }
.fr-card .hero-act { margin-top: var(--s300); }

.hero-frame { position: relative; height: 100vh; height: 100svh; min-height: 640px; display: flex; align-items: flex-end; }
.hero-frame .fr-wrap { position: relative; width: 100%; padding-bottom: var(--s500); }

.frameband { position: relative; height: 88vh; min-height: 560px; display: flex; align-items: flex-end; padding-bottom: var(--s500); }
.frameband .wrap { position: relative; width: 100%; }
.frameband .fr-card { max-width: 480px; padding: var(--s400); display: flex; flex-direction: column; gap: var(--s200); align-items: flex-start; }

.pagehead.framehead { position: relative; height: 76vh; min-height: 560px; padding: 0 0 var(--s500); display: flex; align-items: flex-end; }
.pagehead.framehead .wrap { position: relative; width: 100%; }
.pagehead.framehead .fr-card { max-width: 640px; }

/* ---------- home: the sections as a photo mosaic, one big and four small ---------- */
.cats.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: var(--s300) var(--s200); }
.cats.mosaic .cat-tile { display: flex; flex-direction: column; gap: var(--s50); min-height: 0; text-decoration: none; color: var(--text); }
.cats.mosaic .cat-tile:first-child { grid-row: 1 / 3; }
.cats.mosaic .cat-img { flex: 1; min-height: 0; overflow: hidden; border-radius: 16px; margin-bottom: var(--s75); }
.cats.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.cats.mosaic .cat-tile:hover img { transform: scale(1.04); }
.cats.mosaic .cat-name { order: 2; }
.cats.mosaic .cat-it { order: 3; color: var(--accent); }

.tagsec { text-align: left; }
.ordering { background: var(--sand); }
.ord-card { background: var(--surface); }
.visitshort { background: var(--surface); }
.hours.card { background: var(--bg); }
.band { margin: 0; }
.tp-img img { border-radius: 16px; }

/* ---------- menu: photo cards, tap for the details ---------- */
.mode-cards .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s500) var(--s300); }
.mode-cards .item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s75); }
.card-open { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s50); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card-open .card-img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; margin-bottom: var(--s100); }
.card-open img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.card-open:hover img { transform: scale(1.04); }
.card-open .it { color: var(--accent); }
.card-open .see { display: inline-flex; align-items: center; gap: var(--s50); margin-top: var(--s50); color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.card-open .see .ph { font-size: 16px; color: var(--accent); }
.card-open:hover .see { color: var(--accent); }

.foot { background: #1f1a16; color: #f3ecdf; --soft: #b9ad9d; --line: #3a322b; --text: #f3ecdf; --accent: #e7c79f; }
.foot .phone b { color: #f3ecdf; }

@media (max-width: 900px) {
  .cats.mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 320px 220px 220px; }
  .cats.mosaic .cat-tile:first-child { grid-row: auto; grid-column: 1 / 3; }
  .mode-cards .items { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fr-card { padding: var(--s300); border-radius: 16px; }
  .hero-frame { min-height: 600px; }
  .hero-frame .fr-wrap, .pagehead.framehead, .frameband { padding-bottom: var(--s200); }
  .hero-frame .fr-wrap { padding-left: var(--s200); padding-right: var(--s200); }
  .pagehead.framehead .wrap, .frameband .wrap { padding: 0 var(--s200); }
  .cats.mosaic { grid-template-rows: 260px 180px 180px; gap: var(--s200) var(--s100); }
  .mode-cards .items { grid-template-columns: 1fr; }
}