/* ============================================================
   ÉKO '77 — ABOUT / OUR STORY
   Page-scoped only. Everything else comes from style.css.
   The home page announces the name; this page is the record —
   a plainer, dated, documentary voice.
   ============================================================ */

/* ---------- masthead ---------------------------------------- */

.pagehead {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(392px, 64vh, 620px);
  background: var(--night);
  color: #fff;
}
.pagehead__bed { position: absolute; inset: -9% 0; }
.pagehead__bed > img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__bed::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(9,8,6,.74) 0%, rgba(9,8,6,.2) 36%, rgba(9,8,6,.88) 100%),
    linear-gradient(92deg, rgba(9,8,6,.62) 0%, rgba(9,8,6,.1) 58%, rgba(9,8,6,0) 100%);
}
.pagehead__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(108px, 15vh, 180px);
  padding-bottom: clamp(32px, 4.6vw, 60px);
}
.pagehead__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 8.4vw, 94px);
  line-height: 1.02;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 15px 0 0;
  text-shadow: 0 2px 26px rgba(0,0,0,.45);
}
.pagehead__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  letter-spacing: .04em;
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
  margin: 16px 0 0;
  max-width: 52ch;
}

/* ---------- a chapter: column of text, plate beside it ------- */

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(26px, 3.4vw, 44px) clamp(30px, 5vw, 76px);
  align-items: start;
}
/* the ledger runs the full measure under both columns, like a page of a register */
.chapter > .ledger { grid-column: 1 / -1; margin-top: clamp(4px, 1vw, 14px); }
.chapter__title { margin-top: 12px; }
.chapter__body .prose { margin-top: clamp(18px, 2.2vw, 24px); }
.chapter__fig .plate img { aspect-ratio: 4 / 3.2; }

/* ---------- ruled ledger (before / then / now, and dates) ---- */

.ledger {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  border-top: 1px solid var(--rule);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 156px) minmax(0, 1fr);
  gap: 6px clamp(16px, 2.4vw, 34px);
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ledger dt {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-deep);
  padding-top: 5px;
}
.ledger dd {
  margin: 0;
  max-width: 66ch;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.ledger--night { border-top-color: rgba(255,255,255,.24); }
.ledger--night .ledger__row {
  grid-template-columns: minmax(0, 172px) minmax(0, 1fr);
  border-bottom-color: rgba(255,255,255,.13);
}
.ledger--night dt {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: #CDB47A;
  padding-top: 0;
}
.ledger--night dd { color: rgba(255,255,255,.7); font-size: 16px; }

/* ---------- the name: one big word and its margin notes ----- */

.name__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 5vw, 78px);
  align-items: start;
}
.name__word {
  font-family: var(--serif);
  font-size: clamp(66px, 11vw, 130px);
  line-height: .94;
  letter-spacing: .015em;
  color: var(--ink);
  margin: 10px 0 0;
}
.gloss { list-style: none; margin: clamp(22px, 3vw, 30px) 0 0; padding: 0; }
.gloss li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.gloss li:last-child { border-bottom: 1px solid var(--rule); }
.gloss li::before {
  content: "";
  position: absolute;
  left: 0; top: 21px;
  width: 14px; height: 1px;
  background: var(--green);
}
.gloss i { font-style: italic; }
.name__body { padding-top: 6px; }

/* ---------- the festival ------------------------------------ */

.festac__grid {
  display: grid;
  grid-template-columns: minmax(0, .64fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.festac__plate {
  background: rgba(243,238,227,.92);
  border-color: rgba(255,255,255,.55);
}
.festac__plate img { aspect-ratio: 489 / 661; }
.festac__title { margin-top: 12px; }
.festac__body .prose { margin-top: clamp(16px, 2vw, 22px); }
.festac__payoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17.5px, 1.9vw, 21px);
  line-height: 1.5;
  color: #D8CDB2;
  margin: clamp(28px, 3.2vw, 38px) 0 0;
  max-width: 46ch;
}

/* light-on-night variants of two shared components */
.prose--light p { color: rgba(255,255,255,.74); }
.prose--light strong { color: #fff; }
.prose--light em { color: rgba(255,255,255,.86); }
.caption--light { color: rgba(255,255,255,.6); }
.caption--light b { color: rgba(255,255,255,.9); }

/* ---------- the cooking ------------------------------------- */

.cuisine__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.cuisine__title { margin-top: 12px; }
.cuisine__body .prose { margin-top: clamp(18px, 2.2vw, 24px); }
.cuisine__cta { margin-top: clamp(26px, 3vw, 34px); }
.cuisine__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}
.cuisine__pair .plate img { aspect-ratio: 4 / 5.3; }

/* ---------- sign-off ---------------------------------------- */

.closer__grid {
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  max-width: 1010px;
  margin-inline: auto;
}
.closer__fig { max-width: 300px; }
.closer__plate {
  background: rgba(243,238,227,.9);
  border-color: rgba(255,255,255,.5);
}
.closer__plate img { aspect-ratio: 300 / 470; }
.closer__title { margin-top: 12px; }
.closer__line {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 16px 0 clamp(24px, 3vw, 30px);
  max-width: 46ch;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .chapter,
  .name__grid,
  .festac__grid,
  .cuisine__grid,
  .closer__grid { grid-template-columns: 1fr; }

  .chapter__fig .plate img { aspect-ratio: 4 / 2.9; }

  /* one column: keep the measure readable instead of letting it run the width */
  .chapter__body,
  .name__body,
  .festac__body,
  .cuisine__body,
  .closer__body,
  .gloss { max-width: 64ch; }

  .festac__fig { max-width: 288px; }
  .closer__fig { max-width: 252px; }

  .name__body { padding-top: 0; }
  .ledger__row { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); }
  .ledger--night .ledger__row { grid-template-columns: minmax(0, 158px) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .ledger__row,
  .ledger--night .ledger__row { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; }
  .ledger dt { padding-top: 0; }
  .ledger--night dt { font-size: 16px; }
}

@media (max-width: 560px) {
  .pagehead { min-height: 400px; }
  .pagehead__inner { padding-top: 104px; padding-bottom: 34px; }
  .pagehead__title { font-size: 44px; letter-spacing: .08em; }
  .pagehead__lede { font-size: 17px; }

  .chapter__fig .plate img { aspect-ratio: 4 / 3.1; }
  .cuisine__pair { gap: 8px; }
  .cuisine__pair .plate { padding: 4px; }
  .closer__fig { max-width: 208px; }
}

/* the narrowest phones: a pair of 120px thumbnails is no use to anyone */
@media (max-width: 360px) {
  .cuisine__pair { grid-template-columns: 1fr; gap: 12px; max-width: 300px; }
  .cuisine__pair .plate img { aspect-ratio: 4 / 4.4; }
}