/* ==========================================================================
   Pages: compositions that appear on one page only.
   home (hero, steps, dishes, visit) - page head - contact - 404 and error.
   ========================================================================== */

/* --- Home: hero ----------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl) var(--space-2xl);
  background:
    radial-gradient(60rem 30rem at 85% 0%, var(--tint-sea) 0 40%, transparent 70%),
    var(--paper);
}
[dir="rtl"] .hero {
  background:
    radial-gradient(60rem 30rem at 15% 0%, var(--tint-sea) 0 40%, transparent 70%),
    var(--paper);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl);
}

.hero__copy { --flow: var(--space-md); }
.hero h1 { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: -0.01em; }
.hero h1:lang(en) { font-size: var(--fs-2xl-latin); }
.hero h1 .swash { margin-block-start: 0.1em; }
.hero__lead { max-inline-size: 34rem; color: var(--ink-soft); font-size: var(--fs-md); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  padding-block-start: var(--space-sm);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.facts li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.facts .icon { color: var(--sea-ink); }

.hero__art { position: relative; padding: var(--space-md) var(--space-md) var(--space-lg); }
.hero__photo {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-arch);
  box-shadow: var(--shadow-lg);
}
/* The sea-blue arch offset behind the photo. */
.hero__art::before {
  content: "";
  position: absolute;
  inset-block: 0 var(--space-xs);
  inset-inline: 0 var(--space-lg);
  border: var(--border-thick) solid var(--sea);
  border-radius: var(--radius-arch);
}

.hero__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: calc(var(--space-md) * -0.5);
  inline-size: clamp(7rem, 12vw, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.4rem solid var(--paper);
  box-shadow: var(--shadow);
}
.hero__art .sticker {
  position: absolute;
  inset-block-start: calc(var(--space-sm) * -0.5);
  inset-inline-end: 0;
}

@media (max-width: 56rem) {
  .hero { padding-block-start: var(--space-lg); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-inline-size: 34rem; margin-inline: auto; inline-size: 100%; }
  .hero__art .sticker { inline-size: 6.5rem; }
  .sticker__big { font-size: var(--fs-sm); }
}

/* Slow drift on the hero's hand-drawn swash. Purely decorative. */
@media (prefers-reduced-motion: no-preference) {
  .hero .swash path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: draw 1.2s 0.3s var(--ease) forwards;
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- Home: steps ---------------------------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-xl);
  align-items: center;
}
.steps-grid .photo {
  aspect-ratio: 3 / 4;
  max-block-size: 36rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.steps { display: grid; gap: var(--space-lg); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-md);
}
.step__no {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--sea-ink);   /* 4.7:1 on paper-2; plain --sea was 2.5:1 */
}
.step h3 { font-size: var(--fs-lg); }
.step p { color: var(--ink-soft); }

@media (max-width: 56rem) {
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid .photo { aspect-ratio: 16 / 9; }
}

/* --- Home: dish grid ------------------------------------------------------ */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md);
}
.section-foot { margin-block-start: var(--space-xl); }

/* --- Home: visit ---------------------------------------------------------- */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
}
.visit__card {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  padding: var(--space-lg);
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.visit__card h3 { font-size: var(--fs-md); margin-block-end: var(--space-3xs); }
.visit .photo { border-radius: var(--radius-lg); min-block-size: 18rem; }
@media (max-width: 56rem) {
  .visit { grid-template-columns: 1fr; }
}

/* --- Interior page head --------------------------------------------------- */
.page-head {
  padding-block: var(--space-xl) var(--space-lg);
  background:
    radial-gradient(50rem 20rem at 50% -30%, var(--tint-sea) 0 40%, transparent 70%),
    var(--paper);
}
.page-head h1 { font-size: var(--fs-2xl); font-weight: var(--fw-black); }
.page-head p { max-inline-size: var(--measure); color: var(--ink-soft); font-size: var(--fs-md); }
.page-head .btn-row { margin-block-start: var(--space-md); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2xs); color: var(--line-strong); }
.crumbs a { color: var(--ink-soft); }

/* --- Contact -------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-xl);
  align-items: start;
}
.contact-cards { display: grid; gap: var(--space-md); }
.contact-card {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.contact-card h2 { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--fs-lg); }
.contact-card h2 .icon { color: var(--sea-ink); }
.contact-card address { font-style: normal; font-size: var(--fs-md); }
.phones { display: grid; gap: var(--space-2xs); }
.phones a { font-size: var(--fs-md); }
.contact-map { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-md)); display: grid; gap: var(--space-sm); }
@media (max-width: 56rem) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { position: static; }
}

/* --- 404 and error -------------------------------------------------------- */
.lost {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  padding: var(--space-xl) var(--gutter);
  background: var(--deep);
  color: var(--ink-on-deep);
  text-align: center;
}
.lost__inner { display: grid; gap: var(--space-md); justify-items: center; max-inline-size: 40rem; }
.lost img { inline-size: 12rem; }
.lost h1, .lost h2 { font-size: var(--fs-xl); }
.lost p { color: var(--ink-on-deep-soft); }
.lost :focus-visible { outline-color: var(--focus-on-deep); }
.lost__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
@media (max-width: 36rem) { .lost__pair { grid-template-columns: 1fr; } }