/* Shirazi — menu. Owned by W3. Tokens + .eyebrow/.lede/.display/.ghost/.wrap come from base.css.
   Signature: the menu is ONE continuous ledger. Every section is a rung — its index rides alone
   in the empty left margin (sticky) while the title and items hang off the 34% line. Hairlines
   and that empty margin do all the containment; nothing is ever boxed. */

/* ---- mechanic 3: split colour-block opener (photo half / flat accent half) ---- */
.mn-open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--terracotta);
  color: var(--cream);
}

.mn-open--sage {
  background: var(--sage);
  color: var(--ink);
}

.mn-open-media {
  position: relative;
  min-height: min(100svh, 54rem);
  background: var(--ink);
  overflow: hidden;
}

.mn-open-media img,
.mn-open-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mn-open-media video {
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.mn-open-media video.playing {
  opacity: 1;
}

/* eyebrow + headline sit together at the top; the paragraph is pushed to the bottom and the
   emptiness between them is the whole point of mech 3 */
.mn-open-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.75rem);
  padding: calc(var(--hdr-h) + clamp(3rem, 9vh, 6rem)) var(--pad) clamp(3rem, 8vh, 5.5rem);
}

.mn-open--sage .mn-open-panel {
  padding-block: clamp(4.5rem, 12vh, 8rem) clamp(3rem, 8vh, 5.5rem);
}

.mn-lede {
  max-width: 22rem;
  margin-top: auto;
  padding-top: clamp(3rem, 12vh, 8rem);
  font-size: .9375rem;
  line-height: 1.6;
  opacity: .88;
}

.mn-fine {
  max-width: 24rem;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .02em;
  opacity: .62;
}

/* ---- the ledger key: one hairline row that sets the reading ---- */
.mn-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-block: clamp(3.5rem, 7vw, 6rem) 0;
  padding-block: 1.15rem;
  border-block: 1px solid var(--line);
}

.mn-key-a .mn-key-n {
  margin-left: 1.15rem;
  opacity: .45;
}

.mn-key-b {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  opacity: .55;
}

.mn-key-c {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  opacity: .45;
}

/* accents are flat panels, never text tints — so "vegetarian" is a sage block, not green type */
.mn-veg {
  display: inline-block;
  width: .4rem;
  height: .4rem;
  background: var(--sage);
  vertical-align: .06em;
}

.mn-i-n .mn-veg {
  margin-left: .5rem;
}

.mn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the ledger: index rail | body, mech 4's 34% offset held for the whole page ---- */
.mn-ledger {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.mn-sec {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.25rem, 3.5vw, 3.25rem);
  padding-bottom: clamp(3.25rem, 6vw, 5.5rem);
  scroll-margin-top: calc(var(--hdr-h) + 2rem);
}

/* the brunch chapter swaps the hairline for a flat sage bar — same ledger, new chapter */
.mn-sec--sage {
  border-top: 3px solid var(--sage);
}

.mn-idx {
  position: sticky;
  top: calc(var(--hdr-h) + 1.75rem);
  align-self: start;
  font-size: var(--eyebrow);
  font-weight: 400;
  letter-spacing: .28em;
  line-height: 1;
  opacity: .38;
}

.mn-h {
  font-size: var(--display-sm);
}

.mn-note {
  max-width: 30rem;
  margin-top: 1.1rem;
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .02em;
  opacity: .55;
}

/* ---- items: two editorial columns, held by dotted leaders. no cards, ever ---- */
.mn-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: clamp(1.5rem, 2.2vw, 2.1rem);
  margin-top: clamp(2rem, 3vw, 2.75rem);
  list-style: none;
}

.mn-list--one {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.5rem;
  row-gap: 1.15rem;
}

.mn-i-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

.mn-i-n {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
}

.mn-i-pax {
  margin-left: .55rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  opacity: .45;
}

.mn-i-lead {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  align-self: center;
  border-bottom: 1px dotted var(--line);
}

.mn-i-p {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

.mn-i-d {
  max-width: 30rem;
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.55;
  opacity: .58;
}

/* ---- photo interleave: stays inside the body column so the left rail never breaks ---- */
.mn-band {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(3.25rem, 6vw, 5.5rem);
}

.mn-band img {
  grid-column: 2;
  width: 100%;
  height: clamp(18rem, 30vw, 26rem);
  object-fit: cover;
  object-position: 50% 45%;
  background: var(--ink);
}

/* ---- run-on rows: sides and drink lists don't earn full ledger rows ---- */
.mn-run,
.mn-say {
  margin-top: 1.35rem;
  font-size: .8125rem;
  line-height: 2.1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mn-say {
  max-width: 34rem;
  line-height: 1.9;
  opacity: .72;
}

.mn-run-i + .mn-run-i::before {
  content: "\00b7";
  margin-inline: .7rem;
  opacity: .35;
}

.mn-run-p {
  margin-left: .45rem;
  font-variant-numeric: tabular-nums;
  opacity: .5;
}

.mn-meta {
  margin-top: 1rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.6;
  opacity: .5;
}

.mn-drinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: clamp(2.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 3vw, 2.75rem);
}

.mn-h3 {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  font-size: .8125rem;
  letter-spacing: .22em;
}

.mn-dg .mn-say,
.mn-dg .mn-meta {
  margin-top: 1rem;
}

.mn-dg .mn-fine {
  margin-top: .55rem;
  opacity: .45;
}

/* ---- PDF ghost boxes (square, per base .ghost) ---- */
.mn-pdf {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5vw, 4.5rem) var(--sec);
}

.mn-pdf-eb {
  opacity: .38;
}

.mn-pdf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .mn-sec,
  .mn-band,
  .mn-pdf {
    grid-template-columns: minmax(0, 24%) minmax(0, 1fr);
  }

  .mn-list,
  .mn-drinks {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .mn-open,
  .mn-sec,
  .mn-band,
  .mn-pdf {
    grid-template-columns: minmax(0, 1fr);
  }

  .mn-open-media {
    min-height: 62svh;
  }

  .mn-open-panel {
    padding-top: clamp(2.5rem, 8vh, 4rem);
    gap: clamp(2.5rem, 9vh, 5rem);
  }

  .mn-open--sage .mn-open-panel {
    padding-top: clamp(2.5rem, 8vh, 4rem);
  }

  /* rail collapses: the index becomes a marker above its title */
  .mn-idx {
    position: static;
    margin-bottom: 1.25rem;
  }

  .mn-band img {
    grid-column: 1;
    height: clamp(14rem, 52vw, 20rem);
  }

  .mn-pdf-eb {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 460px) {
  .mn-i-row {
    flex-wrap: wrap;
  }

  .mn-i-lead {
    flex-basis: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mn-open-media video {
    opacity: 1;
    transition: none;
  }
}