/* ━━━━━━━━━━━ INNER PAGES — distinct layouts per page ━━━━━━━━━━━ */

/* Shared: page-hero header */
.phead {
  position: relative;
  padding: 160px var(--gutter) clamp(60px, 8vw, 110px);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 60vh;
}
.phead__bg { position: absolute; inset: 0; z-index: 0; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(108%) brightness(0.85); }
.phead__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,27,46,0.6) 0%, rgba(15,27,46,0.35) 40%, rgba(15,27,46,0.92) 90%, var(--navy)); }
.phead__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; align-self: end; }
.phead__crumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 28px;
  display: flex; gap: 14px; align-items: center;
}
.phead__crumb a { color: var(--mute-dark); transition: color 0.25s var(--ease); }
.phead__crumb a:hover { color: var(--gold-hi); }
.phead__crumb .sep { color: var(--mute-dark); }
.phead h1 {
  font-size: clamp(54px, 8.5vw, 140px);
  font-weight: 300; line-height: 0.93;
  color: var(--ivory); max-width: 14ch;
}
.phead h1 em { font-style: italic; color: var(--gold-hi); font-weight: 300; }
.phead h1 .mal { font-family: var(--mal); font-style: normal; font-size: 0.18em; color: var(--gold); display: block; margin-top: 22px; line-height: 1.4; }
.phead__sub { margin-top: 30px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 19px); color: var(--cream); line-height: 1.65; }

/* ╭──────────────────────────────────────╮
   │  STORES — Directory + Floor Index    │
   ╰──────────────────────────────────────╯ */
.dir-toolbar {
  position: sticky; top: 78px;
  z-index: 30;
  background: rgba(15, 27, 46, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--navy-hairline);
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.dir-toolbar__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.dir-toolbar__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 9px 14px;
  background: transparent; color: var(--cream);
  border: 1px solid var(--navy-hairline);
  transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold-hi); }
.chip.on { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.dir-toolbar__count { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.16em; }

.dir-floors { padding-block: clamp(80px, 10vw, 130px); }
.floor-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding-block: clamp(60px, 8vw, 110px);
  border-bottom: 1px solid var(--navy-hairline);
  position: relative;
}
.floor-block:last-child { border-bottom: none; }
.floor-block__intro { position: sticky; top: 160px; align-self: start; }
.floor-block__num {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(80px, 11vw, 160px); line-height: 0.8;
  color: var(--gold); letter-spacing: -0.04em;
}
.floor-block__sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); margin-top: 12px; }
.floor-block__name {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(40px, 4.4vw, 56px); line-height: 1.05;
  color: var(--ivory); margin-top: 20px;
}
.floor-block__name em { font-style: italic; color: var(--gold-hi); }
.floor-block__desc { font-size: 14px; color: var(--mute); margin-top: 18px; line-height: 1.7; max-width: 32ch; }
.floor-block__stat {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--navy-hairline);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mute);
}
.floor-block__stat b { color: var(--gold-hi); display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: 0; text-transform: none; margin-top: 6px; }

.stores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--navy-hairline);
  border: 1px solid var(--navy-hairline);
}
.store-card {
  background: var(--navy-2);
  padding: 26px 26px 28px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
  transition: background 0.3s var(--ease);
  position: relative;
}
.store-card:hover { background: var(--navy-3); }
.store-card__num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--mute); }
.store-card__name { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.05; color: var(--ivory); }
.store-card__desc { font-size: 13px; color: var(--mute); line-height: 1.6; }
.store-card__cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-top: auto; }
.store-card--anchor { background: var(--crimson); border-color: var(--crimson); }
.store-card--anchor .store-card__num { color: var(--gold-hi); }
.store-card--anchor:hover { background: var(--crimson-hi); }
.store-card--anchor .store-card__desc { color: var(--cream); }
.store-card--anchor .store-card__cat { color: var(--gold-hi); }

@media (max-width: 880px) {
  .floor-block { grid-template-columns: 1fr; gap: 32px; }
  .floor-block__intro { position: static; }
  .floor-block__num { font-size: 88px; }
}
@media (max-width: 560px) {
  .stores-grid { grid-template-columns: 1fr; }
  .dir-toolbar { grid-template-columns: 1fr; gap: 14px; }
  .dir-toolbar__count { text-align: left; }
}

/* ╭──────────────────────────────────────╮
   │  CINEPOLIS — Theatre Programme       │
   ╰──────────────────────────────────────╯ */
.cinema-intro { background: var(--ink); padding-block: clamp(70px, 9vw, 120px); position: relative; }
.cinema-intro__grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.cinema-intro h2 { font-weight: 300; }
.cinema-intro h2 em { font-style: italic; color: var(--gold-hi); font-weight: 300; }
.cinema-intro p { color: var(--cream); font-size: 16px; line-height: 1.7; }
.cinema-intro p.dropcap { color: var(--ivory); }
.cinema-intro p + p { margin-top: 1.2em; }

.now-playing { padding-block: clamp(80px, 10vw, 130px); position: relative; }
.now-playing__head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.day-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.day-tab {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 12px 16px;
  background: var(--navy-2); color: var(--cream);
  border: 1px solid var(--navy-hairline);
  transition: all 0.25s var(--ease);
}
.day-tab.on { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.day-tab:hover { border-color: var(--gold); }

/* Programme list — film as horizontal poster + show row */
.film {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 36px;
  padding: 32px 0;
  border-top: 1px solid var(--navy-hairline);
  align-items: center;
}
.film:last-child { border-bottom: 1px solid var(--navy-hairline); }
.film__poster {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  background: var(--navy-2);
}
.film__poster img { width: 100%; height: 100%; object-fit: cover; }
.film__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,27,46,0.5)); }
.film__cert { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10px; padding: 4px 8px; background: var(--ivory); color: var(--navy); letter-spacing: 0.18em; z-index: 2; }

.film__body { min-width: 0; }
.film__lang { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.film__title { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.0; color: var(--ivory); margin-top: 10px; }
.film__title em { font-style: italic; color: var(--gold-hi); }
.film__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.film__meta span::before { content: '·'; margin-right: 14px; color: var(--gold); }
.film__meta span:first-child::before { display: none; }
.film__times { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.film__time {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  padding: 9px 14px; border: 1px solid var(--navy-hairline); color: var(--ivory);
  background: var(--navy-2); cursor: pointer;
  transition: all 0.25s var(--ease);
}
.film__time:hover { background: var(--crimson); border-color: var(--crimson); color: var(--ivory); }
.film__time--soldout { color: var(--mute-dark); text-decoration: line-through; pointer-events: none; }
.film__screen {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(40px, 5vw, 64px); color: var(--gold);
  white-space: nowrap; text-align: right;
}
.film__screen small { display: block; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }

@media (max-width: 880px) {
  .film { grid-template-columns: 140px 1fr; gap: 22px; }
  .film__screen { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 480px) {
  .film { grid-template-columns: 1fr; }
}

/* Theatre amenities — labelled SVG plan */
.theatre-plan { background: var(--ink); padding-block: clamp(60px, 8vw, 100px); }
.theatre-plan__head { margin-bottom: clamp(50px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: end; }
.theatre-plan__head p { color: var(--mute); }
.theatre-plan svg { width: 100%; height: auto; }

.amen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--navy-hairline);
}
.amen__cell {
  padding: 30px 26px 32px;
  border-right: 1px solid var(--navy-hairline);
  border-bottom: 1px solid var(--navy-hairline);
}
.amen__cell:nth-child(4n) { border-right: none; }
.amen__cell:nth-last-child(-n+4) { border-bottom: none; }
.amen__icon { color: var(--gold); width: 32px; height: 32px; margin-bottom: 18px; }
.amen__name { font-family: var(--display); font-size: 22px; color: var(--ivory); line-height: 1.1; margin-bottom: 10px; }
.amen__name em { font-style: italic; color: var(--gold-hi); }
.amen__desc { font-size: 13px; color: var(--mute); line-height: 1.6; }
@media (max-width: 880px) {
  .theatre-plan__head { grid-template-columns: 1fr; gap: 24px; }
  .amen { grid-template-columns: repeat(2, 1fr); }
  .amen__cell:nth-child(2n) { border-right: none; }
  .amen__cell:nth-child(4n) { border-right: 1px solid var(--navy-hairline); }
}
@media (max-width: 480px) { .amen { grid-template-columns: 1fr; } .amen__cell { border-right: none !important; } }

/* ╭──────────────────────────────────────╮
   │  DINE — Magazine spread              │
   ╰──────────────────────────────────────╯ */
.dine-intro { background: var(--paper); color: var(--ink); padding-block: clamp(80px, 10vw, 130px); position: relative; }
.dine-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.dine-intro__media { aspect-ratio: 3 / 4; overflow: hidden; }
.dine-intro__media img { width: 100%; height: 100%; object-fit: cover; }
.dine-intro__copy h2 { font-weight: 300; color: var(--ink); }
.dine-intro__copy h2 em { font-style: italic; color: var(--crimson); font-weight: 300; }
.dine-intro__copy p { font-size: 17px; color: var(--ink-soft); line-height: 1.75; }
.dine-intro__pull {
  margin: 48px 0;
  padding: 32px 0;
  border-top: 1px solid rgba(168, 32, 26, 0.3);
  border-bottom: 1px solid rgba(168, 32, 26, 0.3);
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.35;
  color: var(--crimson);
}
@media (max-width: 880px) { .dine-intro__grid { grid-template-columns: 1fr; } }

.dine-section { background: var(--navy); padding-block: clamp(60px, 8vw, 100px); }
.dine-section + .dine-section { padding-top: 0; }
.dine-section__head { display: grid; grid-template-columns: 90px 1fr; gap: 36px; align-items: baseline; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--navy-hairline); }
.dine-section__num { font-family: var(--display); font-style: italic; font-size: 64px; color: var(--gold); line-height: 1; }
.dine-section__name { font-family: var(--display); font-weight: 300; font-size: clamp(34px, 4vw, 56px); color: var(--ivory); line-height: 1.05; }
.dine-section__name em { font-style: italic; color: var(--gold-hi); }
.dine-section__hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); margin-top: 10px; }

.eats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--navy-hairline);
  border: 1px solid var(--navy-hairline);
}
.eat {
  background: var(--navy-2);
  padding: 28px 28px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 8px 18px;
  min-height: 220px;
  transition: background 0.3s var(--ease);
}
.eat:hover { background: var(--navy-3); }
.eat__cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.eat__loc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--mute-dark); text-align: right; }
.eat__name { font-family: var(--display); font-size: 30px; line-height: 1.05; color: var(--ivory); grid-column: 1 / -1; }
.eat__desc { font-size: 13px; color: var(--mute); line-height: 1.6; grid-column: 1 / -1; align-self: end; }
.eat__price { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--gold-hi); grid-column: 1 / -1; padding-top: 12px; border-top: 1px dotted var(--navy-hairline); display: flex; justify-content: space-between; align-items: baseline; }
.eat__price small { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--mute); letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 720px) { .eats { grid-template-columns: 1fr; } .dine-section__head { grid-template-columns: 1fr; gap: 12px; } }

/* ╭──────────────────────────────────────╮
   │  EVENTS — Calendar / Playbill        │
   ╰──────────────────────────────────────╯ */
.calendar { padding-block: clamp(80px, 10vw, 130px); }
.calendar__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; margin-bottom: clamp(50px, 6vw, 80px); }
.calendar__head h2 em { font-style: italic; color: var(--gold-hi); font-weight: 300; }

.headliner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  margin-bottom: clamp(60px, 8vw, 100px);
}
.headliner__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.headliner__media img { width: 100%; height: 100%; object-fit: cover; }
.headliner__body { background: var(--crimson); color: var(--ivory); padding: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.headliner__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 22px; }
.headliner__title { font-family: var(--display); font-weight: 300; font-size: clamp(36px, 4.6vw, 64px); line-height: 0.98; }
.headliner__title em { font-style: italic; color: var(--gold-hi); font-weight: 300; }
.headliner__when { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); }
.headliner__when b { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 24px; color: var(--gold-hi); letter-spacing: 0; text-transform: none; margin-top: 4px; }
.headliner__cta { margin-top: 32px; }
@media (max-width: 880px) { .headliner { grid-template-columns: 1fr; } }

/* Playbill — listing of all events */
.playbill { display: grid; grid-template-columns: 1fr; gap: 0; }
.bill {
  display: grid;
  grid-template-columns: 110px 200px 1fr auto;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
  padding: 38px 0;
  border-top: 1px solid var(--navy-hairline);
  transition: padding 0.4s var(--ease);
}
.bill:last-child { border-bottom: 1px solid var(--navy-hairline); }
.bill:hover { padding-inline: 14px; }
.bill__date {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(48px, 5.4vw, 72px); color: var(--gold); line-height: 0.95;
}
.bill__date small { display: block; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.bill__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); padding-top: 14px; }
.bill__tag b { display: block; color: var(--gold-hi); font-family: var(--display); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: 0; text-transform: none; margin-top: 4px; }
.bill__title { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; color: var(--ivory); padding-top: 10px; }
.bill__title em { font-style: italic; color: var(--gold-hi); }
.bill__title small { display: block; font-family: var(--body); font-size: 13px; color: var(--mute); margin-top: 10px; font-weight: 400; line-height: 1.5; max-width: 50ch; }
.bill__cta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-hi); padding: 12px 22px; border: 1px solid var(--gold);
  align-self: center; white-space: nowrap;
  transition: all 0.3s var(--ease);
}
.bill:hover .bill__cta { background: var(--gold); color: var(--navy); }

@media (max-width: 1024px) {
  .bill { grid-template-columns: 80px 1fr auto; }
  .bill__tag { display: none; }
}
@media (max-width: 640px) {
  .bill { grid-template-columns: 1fr; gap: 8px; }
  .bill__cta { justify-self: start; margin-top: 18px; }
}

/* ╭──────────────────────────────────────╮
   │  VISIT — Find the House              │
   ╰──────────────────────────────────────╯ */
.find { padding-block: clamp(80px, 10vw, 130px); }
.find__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.find__map {
  aspect-ratio: 4 / 3;
  background: var(--navy-2);
  border: 1px solid var(--navy-hairline);
  overflow: hidden;
}
.find__map iframe { width: 100%; height: 100%; border: 0; filter: invert(0.88) hue-rotate(190deg) saturate(0.45); }
.find__info { padding-top: 8px; }
.find__rows { margin-top: 36px; border-top: 1px solid var(--navy-hairline); }
.find__row {
  display: grid; grid-template-columns: 150px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--navy-hairline);
}
.find__row dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); align-self: start; padding-top: 4px; }
.find__row dd { margin: 0; font-size: 15px; color: var(--ivory); line-height: 1.65; }
.find__row dd a { color: var(--gold-hi); }
.find__row dd small { display: block; font-size: 12px; color: var(--mute); margin-top: 4px; }
@media (max-width: 880px) { .find__grid { grid-template-columns: 1fr; } .find__row { grid-template-columns: 1fr; gap: 6px; } }

/* House visiting hours / amenities — mini card grid */
.house-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--navy-hairline);
}
.house-cell {
  padding: 32px 28px 36px;
  border-right: 1px solid var(--navy-hairline);
  border-bottom: 1px solid var(--navy-hairline);
}
.house-cell:nth-child(4n) { border-right: none; }
.house-cell:nth-last-child(-n+4) { border-bottom: none; }
.house-cell__icon { color: var(--gold); width: 30px; height: 30px; margin-bottom: 16px; }
.house-cell__name { font-family: var(--display); font-size: 22px; color: var(--ivory); line-height: 1.15; margin-bottom: 8px; }
.house-cell__desc { font-size: 13px; color: var(--mute); line-height: 1.6; }
@media (max-width: 880px) {
  .house-grid { grid-template-columns: repeat(2, 1fr); }
  .house-cell:nth-child(2n) { border-right: none; }
  .house-cell:nth-child(4n) { border-right: 1px solid var(--navy-hairline); }
}
@media (max-width: 480px) { .house-grid { grid-template-columns: 1fr; } .house-cell { border-right: none !important; } }

/* Reach us — directory of contacts */
.reach { background: var(--paper); color: var(--ink); padding-block: clamp(80px, 10vw, 130px); }
.reach__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.reach__copy h2 { font-weight: 300; color: var(--ink); }
.reach__copy h2 em { font-style: italic; color: var(--crimson); font-weight: 300; }
.reach__copy p { font-size: 16px; color: var(--ink-soft); line-height: 1.75; }
.reach__contact { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(27,27,31,0.15); margin-top: 32px; }
.reach__row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(27,27,31,0.15); align-items: center; }
.reach__row dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--crimson); }
.reach__row dd { margin: 0; font-size: 14px; color: var(--ink); }
.reach__row dd a { color: var(--crimson); }
@media (max-width: 880px) { .reach__grid { grid-template-columns: 1fr; } }

/* ╭──────────────────────────────────────╮
   │  404 — Lost in the Galleria          │
   ╰──────────────────────────────────────╯ */
.err-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 120px var(--gutter);
  background:
    radial-gradient(circle at 30% 30%, rgba(184, 151, 88, 0.12), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(168, 32, 26, 0.08), transparent 50%),
    var(--navy);
  text-align: center;
}
.err-page__num { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(180px, 28vw, 360px); line-height: 0.85; color: var(--gold); letter-spacing: -0.04em; }
.err-page h1 { font-size: clamp(34px, 5vw, 56px); margin: 22px 0; }
.err-page p { color: var(--cream); margin: 0 auto 32px; max-width: 50ch; font-size: 17px; line-height: 1.65; }
.err-page__ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }