/*
 * Beethoven Café & Restaurant — public menu.
 * Cream paper, maroon + forest category headers, blackletter logo.
 * Zero JS: everything here is plain CSS. Nothing under 0.75rem (npm run check:fonts).
 */
:root {
  --paper: #efe6d6;
  --ink: #2b211c;
  --maroon: #6e1f2b;
  --forest: #1e2d25;
  --muted: #6b5d52;
  --rule: #d8cbb6;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --black: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;

  --wrap: 36rem;
  --gutter: 1.25rem;
}

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

html { -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font: 400 1.15rem/1.45 var(--serif);
  -webkit-font-smoothing: antialiased;
  /* paper: soft warm blotches, gradient only */
  background:
    radial-gradient(60% 30% at 15% 10%, rgba(255, 250, 240, 0.55), transparent 70%),
    radial-gradient(50% 25% at 90% 60%, rgba(190, 165, 130, 0.18), transparent 70%),
    var(--paper);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

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

.theme-maroon { --bg: var(--maroon); }
.theme-forest { --bg: var(--forest); }

/* ---------- logo ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: inherit; }
.logo__name { font: 400 2.1rem/1 var(--black); }
.logo__sub { margin-top: 0.2rem; font: 500 0.85rem/1 var(--serif); letter-spacing: 0.08em; }

/* ---------- home ---------- */
.top { display: flex; justify-content: center; padding: 1.1rem var(--gutter) 0; }

.hero {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  min-height: 21rem;
  padding: 2.5rem var(--gutter) 1.5rem;
  overflow: hidden;
}
.hero__portrait {
  position: absolute; z-index: 0;
  right: -8%; top: -1rem;
  width: min(66%, 20rem);
  /* the sketch is cut off at the bust: fade it out so it never ends in a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 92%);
  /* portrait.webp is maroon ink on a transparent background */
  opacity: 0.92;
  pointer-events: none;
}
.hero__title { position: relative; z-index: 1; margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; }
.hero__word { font: 400 1.9rem/1.15 var(--serif); letter-spacing: 0.04em; }
.hero__script { margin: -0.2rem 0 0 -0.2rem; font: 400 3.4rem/1.1 var(--script); color: var(--maroon); }
.hero__tag {
  position: relative; z-index: 1;
  margin: 2.4rem 0 0;
  font: 500 0.85rem/1.7 var(--serif);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}

.tiles {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem;
}
.tile {
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 6px; background: var(--forest);
}
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 60%); }
.tile__label {
  position: absolute; z-index: 1; left: 0.7rem; right: 0.7rem; bottom: 0.55rem;
  color: #fbf5ea; font: 500 1rem/1.15 var(--serif); letter-spacing: 0.06em; text-transform: uppercase;
}

.soon { max-width: var(--wrap); margin: 2rem auto; padding: 0 var(--gutter); color: var(--muted); font-style: italic; text-align: center; }

/* ---------- category header ---------- */
.chead {
  position: relative; overflow: hidden;
  background: var(--bg, var(--maroon)); color: #f6ece0;
  /* content lines up with the centred --wrap column at every width */
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding: 1.1rem var(--edge) 3.2rem;
  text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
}
.chead .logo { align-self: center; }
.chead::after, .ihead::after {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: -1px; height: 1.6rem;
  background: var(--paper);
  border-radius: 55% 45% 0 0 / 100% 100% 0 0;
  transform: translateY(0.35rem);
}
.back {
  position: absolute; z-index: 3; left: max(0.5rem, calc((100% - var(--wrap)) / 2)); top: 0.7rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  font: 400 2.2rem/1 var(--serif); color: inherit;
}
.chead__portrait {
  /* sits at the right of the content column (phones: overhangs the screen edge) */
  position: absolute; z-index: 0; right: max(-14%, calc((100% - var(--wrap)) / 2 - 3rem)); bottom: -1rem; width: min(70%, 18rem);
  filter: brightness(0) invert(1); opacity: 0.16; pointer-events: none;
}
.chead__title {
  position: relative; z-index: 1; margin: 3rem 0 0;
  font: 400 clamp(2.6rem, 14vw, 3.8rem)/1 var(--serif); letter-spacing: 0.03em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.chead__rule { position: relative; z-index: 1; display: block; width: 2.2rem; height: 2px; margin: 1rem 0 0.9rem; background: currentColor; opacity: 0.8; }
.chead__tagline { position: relative; z-index: 1; margin: 0; max-width: 14rem; font: 500 0.9rem/1.5 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- item rows ---------- */
.list { max-width: var(--wrap); margin: 0 auto; padding: 0.5rem var(--gutter) 1rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--rule); }
.row:last-child { border-bottom: 0; }
.row__link { display: flex; gap: 0.9rem; padding: 0.9rem 0; align-items: flex-start; }
.row__img { flex: 0 0 40%; width: 40%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
.row__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.row__name { font: 600 1.05rem/1.25 var(--serif); letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: anywhere; }
.row__price { font: 500 1.05rem/1.25 var(--serif); letter-spacing: 0.04em; color: var(--maroon); }
.row__desc { margin-top: 0.15rem; font: 400 1.15rem/1.35 var(--serif); color: var(--muted); overflow-wrap: anywhere; }
.row__out { font: 600 0.85rem/1.3 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.row--out .row__img, .row--out .row__name, .row--out .row__desc { opacity: 0.5; }
.row--out .row__price { color: var(--muted); text-decoration: line-through; }

/* ---------- item page ---------- */
.ihead { position: relative; overflow: hidden; color: #fbf5ea; background: var(--forest); min-height: 6rem; padding-top: 1.1rem; }
.ihead--plain { background: var(--bg, var(--maroon)); min-height: 9rem; padding-bottom: 2.5rem; }
.ihead__img { width: 100%; max-width: calc(var(--wrap) + 6rem); margin: 0 auto; max-height: 26rem; aspect-ratio: 4 / 3; object-fit: cover; }
.ihead .logo { position: absolute; z-index: 2; top: 1.1rem; left: 50%; transform: translateX(-50%); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.ihead__img + .back { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.ihead:not(.ihead--plain) { padding-top: 0; }
/* darken the top of the photo so the logo and back arrow stay readable */
.ihead:not(.ihead--plain)::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 7rem; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none; }

.detail { max-width: var(--wrap); margin: 0 auto; padding: 0.6rem var(--gutter) 1rem; }
.detail__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }
.item__name { margin: 0; font: 500 1.5rem/1.2 var(--serif); letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.item__price { font: 500 1.2rem/1.2 var(--serif); letter-spacing: 0.04em; color: var(--maroon); white-space: nowrap; }
.item__desc { margin: 0.7rem 0 0; font: 400 1.25rem/1.4 var(--serif); color: var(--muted); }
.detail--out .item__name, .detail--out .item__desc { opacity: 0.55; }

.more { margin-top: 1.6rem; }
.more__divider { position: relative; height: 1px; background: var(--rule); }
.more__divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); }
.more__title { margin: 1.1rem 0 0.8rem; text-align: center; font: 500 1.05rem/1.2 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; }
.more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.more__card { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0 0.45rem; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: rgba(255, 252, 245, 0.45); }
.more__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 0.3rem; }
.more__name { padding: 0.15rem 0.4rem 0; font: 600 0.8rem/1.25 var(--serif); letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.more__price { padding: 0 0.4rem; font: 500 0.85rem/1.25 var(--serif); color: var(--maroon); }

/* ---------- plain pages ---------- */
.page { max-width: var(--wrap); margin: 0 auto; padding: 1.5rem var(--gutter) 1rem; }
.page__back { font: 500 1rem/1 var(--serif); letter-spacing: 0.06em; color: var(--maroon); }
.page__title { margin: 1rem 0; font: 400 2.4rem/1.1 var(--serif); text-transform: uppercase; letter-spacing: 0.04em; }
.page p { font-size: 1.15rem; }
.page a { color: var(--maroon); text-decoration: underline; }

/* ---------- footer ---------- */
.footer { max-width: var(--wrap); margin: 1.5rem auto 0; padding: 1.2rem var(--gutter) 2rem; text-align: center; border-top: 1px solid var(--rule); }
.footer__line { margin: 0 0 0.4rem; font: 400 0.95rem/1.4 var(--serif); color: var(--muted); }
.footer__line a { text-decoration: underline; }
.powered { display: inline-block; margin-top: 0.3rem; font: 400 0.95rem/1.4 var(--serif); color: var(--maroon); }
.powered__brand { font-weight: 600; }

@media (min-width: 40rem) {
  .hero__word { font-size: 2.3rem; }
  .hero__script { font-size: 4.2rem; }
}