/* ============================================================
   dine.css — Dine page. Built on the global tokens in
   styles.css. Prefix: .dn-
   ============================================================ */

/* --- HERO (full-bleed, dark) --- */
.dn-hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; background: var(--c-charcoal); }
.dn-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center 55%; }
@media (prefers-reduced-motion: no-preference) { .dn-hero__img { animation: dnKen 3200ms var(--ease-out) both; } @keyframes dnKen { from { transform: scale(1.09); } to { transform: scale(1); } } }
.dn-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,22,0.52) 0%, rgba(8,14,22,0.2) 34%, rgba(8,14,22,0.58) 72%, rgba(8,14,22,0.86) 100%); }
.dn-hero__inner { position: relative; z-index: 1; width: 100%; padding: clamp(40px, 7vw, 110px) clamp(24px, 8vw, 132px) clamp(40px, 5vw, 72px); }
.dn-hero__crumb { font-family: var(--f-body); font-size: 9px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.62); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(28px, 5vw, 52px); }
.dn-hero__crumb a { color: rgba(255,255,255,0.78); }
.dn-hero__crumb a:hover { color: var(--c-snow); }
.dn-hero__crumb .sep { width: 16px; height: 1px; background: rgba(255,255,255,0.3); }
.dn-hero__eyebrow { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-cool-steel); display: block; margin-bottom: 20px; }
.dn-hero__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(44px, 6.4vw, 104px); line-height: 0.96; letter-spacing: -0.018em; color: var(--c-snow); margin: 0 0 24px; max-width: 15ch; }
.dn-hero__h .it { font-style: italic; }
.dn-hero__sub { font-family: var(--f-body); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.8; color: rgba(255,255,255,0.82); max-width: 52ch; margin: 0 0 clamp(32px, 4vw, 46px); }
.dn-hero__meta { display: flex; flex-wrap: wrap; gap: 18px clamp(30px, 5vw, 64px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid rgba(255,255,255,0.2); }
.dn-hero__meta div { display: flex; flex-direction: column; gap: 7px; }
.dn-hero__meta .k { font-family: var(--f-body); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.dn-hero__meta .v { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(19px, 2vw, 24px); line-height: 1; color: var(--c-snow); }
@media (max-width: 700px) { .dn-hero { min-height: 92dvh; } .dn-hero__h { max-width: 12ch; } }

/* --- SECTION SHELL --- */
.dn-sec { padding: clamp(76px, 10vw, 150px) clamp(24px, 8vw, 132px); }
.dn-sec--tint { background: var(--c-bone); }
.dn-sec--dark { background: var(--c-aegean); color: var(--c-snow); }
.dn-lab { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 17px; color: var(--c-olive); display: block; margin-bottom: 20px; }
.dn-sec--dark .dn-lab { color: var(--c-cool-steel); }

/* --- INTRO --- */
.dn-intro__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 92px); align-items: start; }
.dn-intro__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -0.012em; color: var(--c-charcoal); margin: 0; max-width: 15ch; }
.dn-intro__h .it { font-style: italic; }
.dn-intro__body { font-family: var(--f-body); font-size: 16.5px; line-height: 1.85; color: rgba(14,22,32,0.76); max-width: 60ch; }
.dn-intro__body p { margin: 0 0 18px; text-wrap: pretty; }
.dn-intro__body p:last-child { margin: 0; }
@media (max-width: 880px) { .dn-intro__inner { grid-template-columns: 1fr; gap: 24px; } }

/* --- SPLIT FEATURE --- */
.dn-split__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.dn-split--rev .dn-split__fig { order: 2; }
.dn-split__fig { position: relative; overflow: hidden; background: var(--c-pearl); aspect-ratio: 4 / 5; }
.dn-split__fig .img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); transition: transform 1800ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .dn-split__fig:hover .img { transform: scale(1.08); } }
.dn-split__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.013em; color: var(--c-charcoal); margin: 14px 0 24px; max-width: 16ch; }
.dn-sec--dark .dn-split__h { color: var(--c-snow); }
.dn-split__h .it { font-style: italic; }
.dn-split__body { font-family: var(--f-body); font-size: 16px; line-height: 1.85; color: rgba(14,22,32,0.74); margin: 0 0 26px; max-width: 52ch; text-wrap: pretty; }
.dn-sec--dark .dn-split__body { color: rgba(255,255,255,0.72); }
.dn-split__list { list-style: none; margin: 0 0 30px; padding: 0; }
.dn-split__list li { padding: 15px 0; border-top: 1px solid rgba(14,22,32,0.13); font-family: var(--f-body); font-size: 14.5px; line-height: 1.6; color: rgba(14,22,32,0.68); display: flex; gap: 16px; align-items: baseline; }
.dn-split__list li:last-child { border-bottom: 1px solid rgba(14,22,32,0.13); }
.dn-split__list .n { font-family: var(--f-display); font-style: italic; font-size: 15px; color: var(--c-olive); flex: none; }
@media (max-width: 880px) { .dn-split__inner { grid-template-columns: 1fr; gap: 30px; } .dn-split--rev .dn-split__fig { order: -1; } .dn-split__fig { aspect-ratio: 5 / 4; } }

/* --- SIGNATURES --- */
.dn-sigs__head { max-width: 1280px; margin: 0 auto clamp(38px, 5vw, 62px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.dn-sigs__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.013em; color: var(--c-snow); margin: 0; max-width: 17ch; }
.dn-sigs__h .it { font-style: italic; }
.dn-sigs__note { font-family: var(--f-body); font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 30ch; }
.dn-sigs__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(36px, 5vw, 80px); }
.dn-sig { padding: clamp(24px, 3vw, 32px) 0; border-top: 1px solid rgba(255,255,255,0.18); display: flex; gap: clamp(16px, 2vw, 26px); align-items: baseline; }
.dn-sig__num { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 14px; color: var(--c-cool-steel); flex: none; }
.dn-sig__name { font-family: var(--f-display); font-weight: 300; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -0.008em; color: var(--c-snow); margin: 0 0 8px; }
.dn-sig__name .it { font-style: italic; }
.dn-sig__desc { font-family: var(--f-body); font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.66); margin: 0; max-width: 42ch; }
@media (max-width: 800px) { .dn-sigs__grid { grid-template-columns: 1fr; } }

/* --- CHEF --- */
.dn-chef__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.dn-chef__fig { position: relative; overflow: hidden; background: var(--c-pearl); aspect-ratio: 4 / 5; }
.dn-chef__fig .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dn-chef__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -0.012em; color: var(--c-charcoal); margin: 14px 0 24px; max-width: 16ch; }
.dn-chef__h .it { font-style: italic; }
.dn-chef__body { font-family: var(--f-body); font-size: 16px; line-height: 1.85; color: rgba(14,22,32,0.76); max-width: 56ch; }
.dn-chef__body p { margin: 0 0 18px; text-wrap: pretty; }
.dn-chef__body p:last-child { margin: 0; }
@media (max-width: 880px) { .dn-chef__inner { grid-template-columns: 1fr; gap: 28px; } .dn-chef__fig { aspect-ratio: 5 / 4; } }

/* --- BUTTONS --- */
.dn-btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; background: var(--c-aegean); color: var(--c-snow); font-family: var(--f-body); font-weight: 500; font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase; transition: background-color 240ms var(--ease-out); }
.dn-btn:hover { background: var(--c-charcoal); }
.dn-btn .ar { font-family: var(--f-display); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; }
.dn-btn.outline { background: transparent; color: var(--c-charcoal); border: 1px solid rgba(14,22,32,0.28); }
.dn-btn.outline:hover { background: var(--c-bone); }
.dn-btn--light { background: var(--c-snow); color: var(--c-charcoal); }
.dn-btn--light:hover { background: var(--c-bone); }
.dn-btn--ghost { background: transparent; color: var(--c-snow); border: 1px solid rgba(255,255,255,0.4); }
.dn-btn--ghost:hover { background: rgba(255,255,255,0.08); }

/* --- RESERVE CTA --- */
.dn-cta__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.dn-cta__h { font-family: var(--f-display); font-weight: 300; font-size: clamp(32px, 4vw, 60px); line-height: 1.03; letter-spacing: -0.014em; color: var(--c-snow); margin: 18px 0 22px; }
.dn-cta__h .it { font-style: italic; }
.dn-cta__body { font-family: var(--f-body); font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.68); margin: 0; max-width: 46ch; }
.dn-cta__actions { display: flex; flex-direction: column; gap: 13px; }
.dn-cta__actions .dn-btn { justify-content: space-between; }
@media (max-width: 880px) { .dn-cta__inner { grid-template-columns: 1fr; gap: 28px; } }