/* p-dining.css - Dining page (r4). Built on base.css tokens/classes only.
 * Order: clip (no text on it) -> bone band with title -> sitting index -> one daytime row (3 columns)
 * -> rooftop dinner feature (ink) -> desert dinner row (ink) -> At the table -> 160 px ending strip. */

main { display: block; }
.dn-open, .dn-band, .dn-index, .dn-day, .dn-night, .dn-plates, .dn-cta { position: relative; }
.dn-col:focus, .dn-feature:focus, .dn-desert:focus { outline: none; }
.dn-col:focus-visible, .dn-feature:focus-visible, .dn-desert:focus-visible { outline: 2px solid var(--pool); outline-offset: 6px; }
.dn-night .dn-feature:focus-visible, .dn-night .dn-desert:focus-visible { outline-color: var(--pool-hi); }

/* ---------- opening: the clip only, no copy, no gradient (plays once and holds) ---------- */
.dn-open { background: var(--ink); color: var(--chalk); }
.dn-open__stage { position: relative; height: max(420px, calc(100svh - 168px)); overflow: hidden; background: var(--ink); }
.dn-open__zoom { position: absolute; inset: 0; }
.dn-open__zoom video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }

/* ---------- title band: 168 px, solid bone ---------- */
.dn-band { background: var(--bone); color: var(--ink); }
.dn-band__in { align-items: center; min-height: 168px; padding-top: 16px; padding-bottom: 16px; }
.dn-band__title { grid-column: 1 / span 7; margin: 0; font-size: 56px; line-height: .98; letter-spacing: -.03em; color: var(--ink); }
.dn-band__side { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dn-band__lede { margin: 0; max-width: 320px; color: var(--ink); }

/* ---------- sitting index: five links in one row, at most 120 px ---------- */
.dn-index { background: var(--bone); color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dn-index__in { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
.dn-index__in > li { min-width: 0; }
.dn-index__a { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 80px; padding: 18px 0; color: inherit; text-decoration: none; }
.dn-index__n { font: 500 16px/22px var(--font-sans); text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color .25s var(--ease); }
.dn-index__h { font-size: 14px; line-height: 18px; color: var(--ink-2); }
.dn-index__a:hover .dn-index__n, .dn-index__a:focus-visible .dn-index__n { text-decoration-color: currentColor; }
.dn-index__a:focus-visible { outline: 2px solid var(--pool); outline-offset: 2px; }

/* ---------- shared sitting bits ---------- */
.dn-pic { position: relative; overflow: hidden; background: rgba(140, 131, 119, .18); }
.dn-pic > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn-name { margin: 0 0 12px; font-size: 40px; line-height: 1.04; }
.dn-range { margin: 0 0 12px; font-size: 16px; line-height: 24px; }
.dn-txt { margin: 0; max-width: 34em; }
.dn-note { display: block; text-transform: none; letter-spacing: 0; }

/* ---------- daytime: one section, three columns, 32 px gutters ---------- */
.dn-day { background: var(--bone); color: var(--ink); padding: 80px 0 96px; }
.dn-day__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.dn-col .dn-pic { height: 280px; margin-bottom: 24px; }
.dn-col .dn-name { min-height: 2.08em; }
.dn-col .dn-txt { color: var(--ink); }

/* ---------- evening: ink ground ---------- */
.dn-night { background: var(--ink); color: var(--chalk); padding: 96px 0; }
.dn-night .dn-txt, .dn-night .dn-range { color: var(--chalk); }
.dn-feature { align-items: end; }
.dn-feature__pic { grid-column: 1 / span 8; aspect-ratio: 16 / 9; }
.dn-feature__what { grid-column: 9 / span 4; }
.dn-menu { margin-top: 28px; }
.dn-menu__h { margin: 0 0 8px; font: 500 16px/24px var(--font-sans); letter-spacing: 0; text-transform: none; }
.dn-menu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-dark); }
.dn-menu__list > li { padding: 10px 0; border-bottom: 1px solid var(--rule-dark); font: 400 16px/24px var(--font-sans); }

.dn-desert { align-items: center; margin-top: 96px; padding-top: 64px; position: relative; }
.dn-desert::before { content: ''; position: absolute; left: var(--margin); right: var(--margin); top: 0; height: 1px; background: var(--rule-dark); }
.dn-desert__pic { grid-column: 1 / span 5; aspect-ratio: 3 / 2; }
.dn-desert__what { grid-column: 7 / span 6; }
.dn-desert__what .dn-name { font-size: 36px; }
.dn-desert__go { margin-top: 8px; padding: 12px 0 8px; color: var(--chalk); }
.dn-night .dn-note { margin-top: 12px; color: var(--chalk-2); }

/* ---------- At the table: three captioned pictures ---------- */
.dn-plates { background: var(--bone); color: var(--ink); padding: 96px 0 80px; }
.dn-plates__head { row-gap: 12px; margin-bottom: 40px; }
.dn-plates__head .t-section { grid-column: 1 / span 6; margin: 0; }
.dn-plates__lede { grid-column: 1 / span 6; grid-row: 2; margin: 0; color: var(--ink-2); }
.dn-row3 { row-gap: 32px; column-gap: 32px; }
.dn-fig { grid-column: span 4; margin: 0; }
.dn-fig__m { aspect-ratio: 4 / 3; overflow: hidden; background: rgba(140, 131, 119, .18); }
.dn-fig__m > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dn-fig figcaption { margin-top: 12px; font: 500 15px/22px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ---------- ending: one 160 px strip ---------- */
.dn-cta { background: var(--bone); color: var(--ink); border-top: 1px solid var(--rule); }
.dn-cta__in { align-items: center; height: 160px; }
.dn-cta__p { grid-column: 1 / span 7; margin: 0; }
.dn-cta__act { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dn-cta .dn-note { color: var(--label-c); }

/* ---------- phones: only must not break ---------- */
@media (max-width: 800px) {
  .dn-open__stage { height: 56svh; }
  .dn-band__in { row-gap: 14px; }
  .dn-band__title, .dn-band__side, .dn-plates__head .t-section, .dn-plates__lede, .dn-cta__p, .dn-cta__act,
  .dn-feature__pic, .dn-feature__what, .dn-desert__pic, .dn-desert__what { grid-column: 1 / -1; }
  .dn-band__title { font-size: clamp(36px, 10vw, 52px); }
  .dn-index__in { grid-template-columns: 1fr 1fr; }
  .dn-day__in { grid-template-columns: 1fr; }
  .dn-col .dn-name { min-height: 0; }
  .dn-feature__what { margin-top: 24px; }
  .dn-desert__what { margin-top: 24px; }
  .dn-fig { grid-column: 1 / -1; }
  .dn-cta__in { height: auto; padding-top: 32px; padding-bottom: 32px; row-gap: 20px; }
}