/* ============================================================
   AMAN GRAMMAR — carousel, alternating splits, sparse editorial
   ============================================================ */

/* ---------- 1. The editorial statement: one thought, much air ---------- */
.statement{padding:210px 0 190px;text-align:center}
.statement .inner{max-width:1000px;margin:0 auto}
.statement .mark{display:block;width:52px;margin:0 auto 46px}
.statement .mark .crest{color:var(--gold);opacity:.85}
.statement p{font-family:var(--serif);font-size:clamp(24px,2.7vw,38px);line-height:1.62;
  color:#2a2721;font-weight:300;letter-spacing:.002em}
.statement .sub{font-family:var(--sans);font-size:10px;letter-spacing:.55em;text-transform:uppercase;
  color:var(--slate-lift);margin-top:52px}
@media(max-width:760px){.statement{padding:130px 0 120px}}

/* ---------- 2. The horizontal reel — Aman's signature ---------- */
.reel-wrap{position:relative;padding:0 0 130px}
.reel-head{display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 54px 46px;gap:40px;flex-wrap:wrap}
.reel-head .t{font-family:var(--disp);font-size:clamp(30px,3.4vw,52px);font-weight:400;line-height:1.06}
.reel-nav{display:flex;gap:0;flex:none}
.reel-nav button{width:52px;height:52px;border:1px solid var(--line);background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.45s cubic-bezier(.16,1,.3,1);
  color:#2a2721;font-size:17px;font-family:var(--serif)}
.reel-nav button:first-child{border-right:none}
.reel-nav button:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#fff}
.reel-nav button:disabled{opacity:.28;cursor:default}
.reel{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:0 54px 8px;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.reel::-webkit-scrollbar{display:none}
.reel.dragging{cursor:grabbing;scroll-behavior:auto}
.reel figure{flex:0 0 auto;margin:0;position:relative;overflow:hidden;
  width:min(46vw,620px);height:min(56vh,540px);background:var(--pine)}
.reel figure.tall{width:min(29vw,390px);height:min(56vh,540px)}
.reel figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,1,.3,1);
  pointer-events:none}
.reel figure:hover img{transform:scale(1.05)}
.reel figcaption{position:absolute;left:28px;bottom:24px;z-index:2;font-size:9px;letter-spacing:.42em;
  text-transform:uppercase;color:#fff;opacity:0;transform:translateY(10px);transition:.6s cubic-bezier(.16,1,.3,1);
  text-shadow:0 2px 18px rgba(0,0,0,.6)}
.reel figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,16,13,.6),transparent 46%);opacity:0;transition:.6s}
.reel figure:hover::after,.reel figure:hover figcaption{opacity:1;transform:none}
.reel-rail{height:1px;background:var(--line);margin:34px 54px 0;position:relative}
.reel-rail i{position:absolute;left:0;top:-1px;height:3px;background:var(--gold);width:18%;
  transition:left .18s linear,width .3s ease}
@media(max-width:760px){
  .reel,.reel-head,.reel-rail{padding-left:24px;padding-right:24px}
  .reel-rail{margin-left:24px;margin-right:24px}
  .reel figure,.reel figure.tall{width:78vw;height:60vh}
}

/* ---------- 3. Alternating split — image, air, few words ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;margin:0}
.split + .split{margin-top:170px}
.split .fig{position:relative;overflow:hidden;height:min(78vh,720px);background:var(--pine)}
.split .fig img{width:100%;height:100%;object-fit:cover;transition:transform 2s cubic-bezier(.16,1,.3,1)}
.split:hover .fig img{transform:scale(1.04)}
.split .body{padding:0 clamp(40px,6vw,110px)}
.split .eyebrow{font-size:9.5px;letter-spacing:.55em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:26px}
.split h3{font-family:var(--disp);font-size:clamp(32px,4vw,60px);font-weight:400;line-height:1.08;
  color:#1e1c18;margin-bottom:28px}
.split h3 i{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:300}
.split p{font-family:var(--serif);font-size:19px;line-height:1.95;color:var(--ivory-dim);max-width:430px}
.split .discover{display:inline-flex;align-items:center;gap:16px;margin-top:44px;
  font-family:var(--sans);font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:#1e1c18;text-decoration:none;padding-bottom:9px;border-bottom:1px solid var(--line);
  transition:.5s cubic-bezier(.16,1,.3,1)}
.split .discover::after{content:'⟶';transition:transform .5s cubic-bezier(.16,1,.3,1);font-size:13px}
.split .discover:hover{color:var(--gold);border-bottom-color:var(--gold)}
.split .discover:hover::after{transform:translateX(10px)}
/* mirrored */
.split.rev .fig{order:2}
.split.rev .body{order:1}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split + .split{margin-top:90px}
  .split .fig{height:56vh;order:1 !important}
  .split .body{order:2 !important;padding:52px 24px 0}
  .split p{max-width:none}
}

/* a narrow measure keeps the copy Aman-sparse */
.split .body .measure{max-width:430px}

/* ---------- 4. Full-bleed band with a caption in the corner ---------- */
.band{position:relative;height:min(92vh,860px);overflow:hidden;display:flex;align-items:flex-end}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,16,13,.78) 0%,rgba(18,16,13,.18) 46%,transparent 72%)}
.band .cap{position:relative;z-index:2;padding:0 clamp(24px,4vw,64px) clamp(48px,6vw,80px);max-width:760px}
.band .cap span{font-size:9.5px;letter-spacing:.55em;text-transform:uppercase;color:#e0c48b}
.band .cap h3{font-family:var(--disp);font-size:clamp(30px,4.4vw,64px);font-weight:400;color:#fff;
  margin:18px 0 16px;line-height:1.08}
.band .cap p{font-family:var(--serif);font-size:18px;line-height:1.85;color:rgba(255,255,255,.9);max-width:520px}
.band .cap .discover{color:#fff;border-bottom-color:rgba(255,255,255,.4);margin-top:34px;
  display:inline-flex;align-items:center;gap:16px;font-family:var(--sans);font-size:10px;
  letter-spacing:.42em;text-transform:uppercase;text-decoration:none;padding-bottom:9px;transition:.5s}
.band .cap .discover::after{content:'⟶';transition:transform .5s}
.band .cap .discover:hover{color:#e0c48b;border-bottom-color:#e0c48b}
.band .cap .discover:hover::after{transform:translateX(10px)}

/* ---------- 5. Portrait pair ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 54px}
@media(max-width:900px){.pair{grid-template-columns:1fr;padding:0 24px}}
.pair figure{margin:0;position:relative;overflow:hidden;height:min(84vh,760px);background:var(--pine)}
.pair img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.pair figure:hover img{transform:scale(1.045)}
.pair figcaption{position:absolute;left:30px;bottom:28px;z-index:2;color:#fff}
.pair figcaption span{display:block;font-size:9px;letter-spacing:.48em;text-transform:uppercase;
  color:#e0c48b;margin-bottom:10px}
.pair figcaption b{font-family:var(--disp);font-size:26px;font-weight:400;
  text-shadow:0 2px 20px rgba(0,0,0,.5)}
.pair figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,16,13,.62),transparent 44%)}

/* ============================================================
   HERO OVER MEDIA — the light register must not reach the film.
   Anything sitting on top of a photograph or video stays luminous.
   ============================================================ */
header#top .hero-content,
header#top .hero-title,
header#top .hero-sub,
header#top .hero-kicker,
header#top .hero-badge p,
header#top .hero-scroll span,
.scrub-stage .hero-content *{color:#fff !important}

header#top .hero-title{
  color:#fff !important;
  text-shadow:0 4px 46px rgba(10,12,14,.62), 0 1px 3px rgba(10,12,14,.35);
  font-weight:400}
header#top .hero-title .sheen{color:#fff !important}
header#top .hero-kicker{
  color:#f0dcae !important;
  text-shadow:0 2px 20px rgba(10,12,14,.85)}
header#top .hero-sub{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 2px 24px rgba(10,12,14,.8)}
header#top .hero-badge p{color:rgba(255,255,255,.86) !important;
  text-shadow:0 2px 16px rgba(10,12,14,.85)}
header#top .hero-badge p b{color:#f0dcae !important}
header#top .hero-scroll span{color:rgba(255,255,255,.8) !important;
  text-shadow:0 2px 14px rgba(10,12,14,.8)}
header#top .hero-scroll .wheel{background:rgba(255,255,255,.3)}
header#top .hero-scroll .wheel::after{background:#f0dcae}
header#top .hero-divider{background:linear-gradient(#f0dcae,transparent)}

/* buttons on the film: one solid, one glass — both legible */
header#top .btn-gold{background:#f0dcae;border-color:#f0dcae;color:#1a1712 !important}
header#top .btn-gold:hover{background:transparent;color:#f0dcae !important}
header#top .btn-ghost{border-color:rgba(255,255,255,.62);color:#fff !important;
  backdrop-filter:blur(3px);background:rgba(20,22,24,.16)}
header#top .btn-ghost:hover{border-color:#f0dcae;color:#f0dcae !important;background:rgba(20,22,24,.28)}

/* a deeper, better-shaped veil so bright summer frames still carry white type */
header#top .hero-veil{
  background:
    radial-gradient(ellipse 78% 62% at 50% 46%, rgba(12,14,16,.62) 0%, rgba(12,14,16,.28) 62%, transparent 100%),
    linear-gradient(to bottom, rgba(12,14,16,.58) 0%, rgba(12,14,16,.22) 30%,
                    rgba(12,14,16,.30) 58%, rgba(12,14,16,.80) 90%, rgba(12,14,16,.94) 100%) !important}

/* the scroll rail and progress on the film */
.scrub-progress{background:rgba(255,255,255,.22)}
.scrub-progress i{background:#f0dcae}
.season-mark span{color:#f0dcae !important}

/* nav over the film: white until the bar goes solid */
nav:not(.scrolled) .nav-logo .w{color:#fff !important;text-shadow:0 2px 18px rgba(10,12,14,.6)}
nav:not(.scrolled) .nav-logo .est{color:#f0dcae !important}
nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,.94) !important;text-shadow:0 1px 14px rgba(10,12,14,.55)}
nav:not(.scrolled) .nav-links a:hover,nav:not(.scrolled) .nav-links a.on{color:#f0dcae !important}
nav:not(.scrolled) .menu-btn span{background:#fff}

/* ============================================================
   CONTRAST — the light register needs its own gold.
   #c8a468 reads 3.44:1 on cream: fine as a line, illegible as a word.
   Text keeps a bronze; borders and marks keep the bright gold.
   ============================================================ */
:root{
  --gold-ink:#7d5f28;      /* gold, for words on cream — 5.9:1 */
  --slate-ink:#4a5b66;     /* slate, for words on cream — 6.4:1 */
}

/* small caps, eyebrows, tags, labels — everything that was gold text */
.chapter,.split .eyebrow,.dcard span,.offer span,.gives b,.eco-grid .kick,
.named .tag,.suite-feature .tag,.rcard .info span,.role .apply,.pledge b,
.aw-eyebrow,.reel figcaption,.v-line span,.tree .lbl,.sig .num,
.press .row div small,.awards .aw small,.ledger .k,.archive figcaption em,
.link-line,.crumb em,.foot-affil div,.socials a,.season-mark span,
footer h5,.spa-list div em,.gm span,.timeline span,.values b,
.dine-feature .txt span,.badge{color:var(--gold-ink)}

.link-line,.role .apply{color:var(--gold-ink)}
.link-line:hover,.role .apply:hover{color:#5c4519}
.sig .num,.ledger .k,.press .row div small,.awards .aw small,
.archive figcaption em,.crumb em{color:var(--slate-ink)}
footer p,footer a{color:#4f4a42}
footer a:hover{color:var(--gold-ink)}
.foot-affil div:hover{color:var(--gold-ink)}
.gm b,.values b,.timeline b,.tree .count sup{color:var(--gold-ink)}
.h2 i,.split h3 i,.statement p{color:inherit}
.split h3 i{color:var(--gold-ink)}
.reel-head .t i{color:var(--gold-ink) !important}

/* the gold button: ink on gold needs a deeper gold */
.btn-gold,#bookbar .go,.nav-cta{background:#8a6a2f;border-color:#8a6a2f;color:#fff !important}
.btn-gold:hover,#bookbar .go:hover,.nav-cta:hover{background:transparent;color:#7d5f28 !important;border-color:#8a6a2f}
header#top .btn-gold{background:#f0dcae;border-color:#f0dcae;color:#1a1712 !important}
header#top .btn-gold:hover{background:transparent;color:#f0dcae !important}

/* weather chip in the utility bar */
#wx b{color:var(--gold-ink)}
.util a,.util span,.util .langs a{color:#54504a}
.util .langs a.active{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}

/* ---------- text sitting on photographs: give it a floor ---------- */
.pair figure::after{background:linear-gradient(to top,rgba(16,14,11,.82) 0%,rgba(16,14,11,.28) 42%,transparent 66%)}
.pair figcaption b{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.6)}
.pair figcaption span{color:#f0dcae}
.rcard .veil{background:linear-gradient(to top,rgba(16,14,11,.88) 6%,rgba(16,14,11,.12) 56%,transparent 78%)}
.rcard .info h4{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.rcard .info span{color:#f0dcae}
.rcard .info p{color:rgba(255,255,255,.9)}
.reel figure::after{background:linear-gradient(to top,rgba(16,14,11,.7),transparent 50%)}
.reel figcaption{color:#fff}
.season .txt h3{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.season .txt span{color:#f0dcae}
.season .txt p{color:rgba(255,255,255,.9)}
.gal figcaption{color:#fff}
.her-img .year,.vrow .yr{-webkit-text-stroke:1px var(--gold-ink)}
.spa .year,#spa .year{color:#fff}

/* the spa page's big 2110 m² sat at 1:1 — put it back on ink */
.her-img .year{color:transparent}

/* ============================================================
   OVER PHOTOGRAPHY — every sub-page hero reads light
   light.css flipped --ivory to ink, which dragged the page-hero
   titles down onto their own dark pictures. Put them back.
   ============================================================ */
.page-hero .h2,
.page-hero .h2 i,
.page-hero .h2 .line-in,
.page-hero .h2 span,
.page-hero h1,
.page-hero .lead,
.page-hero .lead *,
.page-hero p:not(.chapter):not(.crumb){
  color:#fff !important;
  text-shadow:0 2px 30px rgba(8,11,14,.72),0 1px 3px rgba(8,11,14,.5);
}
.page-hero .lead,.page-hero .lead *{color:rgba(255,255,255,.9) !important}
.page-hero .chapter,.page-hero .chapter *{
  color:#f0dcae !important;
  text-shadow:0 2px 18px rgba(8,11,14,.7);
}
.page-hero .crumb,.page-hero .crumb span,.page-hero .crumb em{
  color:rgba(255,255,255,.78) !important;text-shadow:0 1px 14px rgba(8,11,14,.7)}
.page-hero .crumb a{color:rgba(255,255,255,.78) !important}
.page-hero .crumb a:hover{color:#f0dcae !important}
.page-hero .seal .crest{color:rgba(255,255,255,.32)}
.page-hero .btn-gold{background:#f0dcae;border-color:#f0dcae;color:#1a1712 !important}
.page-hero .btn-gold:hover{background:transparent;color:#f0dcae !important}
.page-hero .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff !important}
/* deepen the veil so the words always have ground under them */
.page-hero .veil{background:linear-gradient(to bottom,
   rgba(10,13,17,.60) 0%,rgba(10,13,17,.42) 34%,
   rgba(10,13,17,.80) 78%,rgba(12,16,20,.94) 100%) !important}

/* ---- nav CTA: light.css painted it white, aman painted the words
        white too. One rule, gold ground, white words. ---- */
nav .nav-cta,nav.scrolled .nav-cta{
  background:#8a6a2f !important;border-color:#8a6a2f !important;color:#fff !important}
nav .nav-cta:hover,nav.scrolled .nav-cta:hover{
  background:rgba(255,255,255,.96) !important;color:#6f5426 !important;border-color:#fff !important}

/* ---- fixed marginalia sits over both picture and cream ---- */
.side-mark{color:rgba(30,28,24,.42);transition:color .6s ease}
.side-mark b{color:#7d5f28}
body:not(.past-hero) .side-mark{color:rgba(255,255,255,.5)}
body:not(.past-hero) .side-mark b{color:#f0dcae}
.book-tab,.book-side{transition:color .6s ease}

/* ============================================================
   TEXT-ON-GROUND SWEEP — audited pixel-by-pixel, not by cascade
   ============================================================ */

/* spa list sits on cream now, not on the old dark band */
.spa-list div{color:#2a2822 !important;border-bottom-color:rgba(30,28,24,.14) !important}
.spa-list div em{color:var(--gold-ink) !important}

/* a card that carries its own photograph keeps light type */
.dcard[style*="url("],.rcard[style*="url("],.offer[style*="url("]{color:#fff}
.dcard[style*="url("] h4,.dcard[style*="url("] h3{color:#fff !important;text-shadow:0 2px 18px rgba(8,11,14,.6)}
.dcard[style*="url("] p{color:rgba(255,255,255,.86) !important}
.dcard[style*="url("] span{color:#f0dcae !important}

/* small caps in gold need the darker ink to hold on cream */
.named .tag,.suite-feature .tag,.rcard .info span,
.nav-logo .est,.mo-est,footer .est,.foot-logo small,
.m-logo small,.gm span,.timeline span{color:var(--gold-ink) !important}
small{color:var(--gold-ink)}
.cap,.p-cap,figcaption small{color:var(--gold-ink)}

/* awards caption sat at 1.4 on cream */
.aw-note,.cap.reveal,p.cap{color:#5a5348 !important}
p.cap b,p.cap strong{color:var(--gold-ink) !important}

/* words over photographs: firmer ground */
.page-hero .crumb,.page-hero .crumb *{color:rgba(255,255,255,.94) !important}
.page-hero .chapter{text-shadow:0 2px 10px rgba(8,11,14,.9),0 1px 30px rgba(8,11,14,.7) !important}
.page-hero .seal{opacity:.5}
.side-mark{text-shadow:0 1px 10px rgba(8,11,14,.45)}
body:not(.past-hero) .side-mark{color:rgba(255,255,255,.72)}
body.past-hero .side-mark{color:rgba(30,28,24,.5);text-shadow:none}

/* ---- the ground is cream, so gold ink must be the darker gold ---- */
:root,body,body[data-season="winter"],body[data-season="summer"]{
  --gold:#7d5f28;         /* 5.9:1 on cream */
  --gold-soft:#8a6a2f;
  --slate-lift:#3f4e58;   /* 7.6:1 on cream */
}
:root{--slate-ink:#3f4e58}

/* left scrim: every sub-page hero writes into shadow, not into the picture */
.page-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,11,14,.74) 0%,rgba(8,11,14,.48) 40%,rgba(8,11,14,.06) 70%,transparent 100%)}
.page-hero .wrap,.page-hero .seal{position:relative;z-index:3}
.page-hero .crumb a,.page-hero .crumb em,.page-hero .crumb span{color:rgba(255,255,255,.95) !important}

/* small caps that live on a photograph stay in candlelight gold */
.rcard .info span,.dcard[style*="url("] span,.season .txt span,
.page-hero .chapter,.voucher .chapter,#spa .chapter,#private .chapter{color:#f0dcae !important}
.rcard .info h4,.rcard .info p{color:#fff !important}
.rcard .info p{color:rgba(255,255,255,.88) !important}

/* the sustainability caption sits on its photograph */
.eco-hero p.cap,.eco-hero .cap,section[style*="url("] p.cap{color:#f0dcae !important}

/* one step darker again: the recessed cream bands (#e3dcd0) need it */
:root,body,body[data-season="winter"],body[data-season="summer"]{--gold:#6f5525;--gold-ink:#6f5525}

/* heroes whose text is not left-anchored need the whole veil, not just the scrim */
.page-hero .veil{background:linear-gradient(to bottom,
   rgba(10,13,17,.70) 0%,rgba(10,13,17,.56) 34%,
   rgba(10,13,17,.84) 78%,rgba(12,16,20,.95) 100%) !important}
.page-hero .chapter{text-shadow:0 1px 4px rgba(8,11,14,.95),0 2px 22px rgba(8,11,14,.85) !important}

/* last three: the slate numerals and the sustainability eyebrow */
.sig .num,span.num{color:#3a4750 !important}
.page-hero .chapter{color:#f7e6c2 !important}

/* ============================================================
   FACTS, HOURS & PRICE LISTS — the house's actual particulars
   ============================================================ */
.facts{margin-top:64px;border-top:1px solid var(--line)}
.facts .row{display:grid;grid-template-columns:1.1fr 1fr auto;gap:26px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);transition:.45s cubic-bezier(.16,1,.3,1)}
.facts .row:hover{padding-left:14px;background:linear-gradient(90deg,rgba(154,123,67,.05),transparent 60%)}
.facts .k{font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:#2a2822}
.facts .d{font-family:var(--serif);font-style:italic;font-size:16px;color:#5c5850;line-height:1.6}
.facts .v{font-family:var(--disp);font-size:19px;color:var(--gold-ink);white-space:nowrap;letter-spacing:.02em}
@media(max-width:760px){
  .facts .row{grid-template-columns:1fr;gap:7px;padding:18px 0}
  .facts .v{font-size:17px}
}

.hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:56px;
  border:1px solid var(--line)}
.hours div{padding:30px 26px;border-right:1px solid var(--line)}
.hours div:last-child{border-right:none}
.hours b{display:block;font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-ink);font-weight:400}
.hours span{display:block;margin-top:12px;font-family:var(--disp);font-size:22px;color:#2a2822}
.hours em{display:block;margin-top:8px;font-family:var(--serif);font-style:italic;font-size:14px;color:#5c5850}
@media(max-width:760px){.hours{grid-template-columns:1fr}.hours div{border-right:none;border-bottom:1px solid var(--line)}.hours div:last-child{border-bottom:none}}

.plist{margin-top:56px}
.plist .p-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line)}
.plist .p-row:first-child{border-top:1px solid var(--line)}
.plist h4{font-family:var(--disp);font-size:22px;font-weight:400;color:#2a2822;margin:0 0 7px}
.plist p{font-family:var(--serif);font-style:italic;font-size:15.5px;color:#5c5850;margin:0;line-height:1.7}
.plist .chf{font-family:var(--disp);font-size:21px;color:var(--gold-ink);white-space:nowrap}
.plist .chf small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.36em;
  text-transform:uppercase;color:#5f5a52;margin-top:6px;text-align:right}
@media(max-width:620px){.plist .p-row{grid-template-columns:1fr;gap:10px}.plist .chf small{text-align:left}}

.tag-note{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:15px;color:#5c5850}

/* ============================================================
   MOBILE — the house on a phone
   ============================================================ */
@media(max-width:820px){
  /* the utility bar is hidden on phones, so the languages move into the menu */
  .mo-langs{display:flex;gap:0;margin-bottom:30px;border:1px solid var(--line);width:max-content}
  .mo-langs a{padding:11px 18px;min-width:52px;text-align:center;font-size:10px;letter-spacing:.3em;
    text-transform:uppercase;color:#5c5850;text-decoration:none;border-right:1px solid var(--line)}
  .mo-langs a:last-child{border-right:none}
  .mo-langs a.active{background:var(--gold-ink);color:#fff}
}
@media(min-width:821px){.mo-langs{display:none}}

@media(max-width:620px){
  nav{padding:14px 18px}
  nav.scrolled{padding:10px 18px}
  .nav-logo .crest-mark{width:30px;height:30px}
  .nav-logo .w{font-size:19px}
  .nav-logo .est{font-size:6px;letter-spacing:.26em}
  .nav-right{gap:6px}
  .nav-cta{padding:10px 14px !important;font-size:8px;letter-spacing:.2em}
  .menu-btn{margin-left:8px;padding:9px 4px}
  .menu-btn span{width:22px}
  .wrap{padding:0 20px}
  .page-hero{height:66vh;min-height:420px}
  .page-hero .wrap{padding-bottom:52px}
  .hero-actions{gap:12px}
  .hero-actions .btn{width:100%;text-align:center}
  .pad{padding:96px 0}
  .pad-s{padding:70px 0}
  .cta-band{padding:96px 0}
  .dine-row{grid-template-columns:1fr !important;gap:16px}
  .her-grid{grid-template-columns:1fr !important;gap:40px}
  .facts{margin-top:40px}
  .hours,.plist{margin-top:36px}
  .sig{margin-bottom:20px}
  #bookbar{padding:12px 14px}
  #bookbar .fld{padding:0 8px}
  #bookbar input,#bookbar select{min-width:0;width:100%;font-size:15px}
}
@media(max-width:400px){
  .nav-logo .est{display:none}
  .nav-cta{padding:9px 11px !important;letter-spacing:.14em}
}

/* ---- tap targets: nothing a thumb must hunt for ---- */
@media(hover:none),(max-width:820px){
  a.discover,a.link-line,.role .apply,.socials a,.foot-grid a,.m-links a,.util .langs a{
    display:inline-flex;align-items:center;min-height:44px}
  .foot-grid a{padding:3px 0}
  #bookbar select,#bookbar input{min-height:44px}
  .gal figcaption{opacity:1;transform:none}          /* no hover on a phone */
  .gal figure::after{opacity:1}
  .dcard,.rcard,.offer{transform:none !important}
}
@media(hover:none),(max-width:820px){
  .crumb a,.crumb span,.crumb em{display:inline-flex;align-items:center;min-height:26px}
  .tag-note{line-height:2.1}
  .tag-note a{display:inline-flex;align-items:center;min-height:26px}
  .foot-grid p a,.mo-right a{min-height:26px}
}

/* the reel on a phone: native momentum, snap to each frame */
@media(hover:none),(max-width:820px){
  .reel{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
        padding-left:20px;padding-right:20px;touch-action:pan-x pan-y}
  .reel figure{scroll-snap-align:center}
  .reel-nav{display:none}          /* the thumb is the control */
  .reel-wrap{padding-bottom:96px}
}

/* ---- the overlay menu: opaque, scrollable, clear of the bar ---- */
#menu-overlay{background:#f3eee7}
@media(max-width:820px){
  #menu-overlay{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mo-inner{padding:96px 22px 60px;gap:26px}
  .m-links a{font-size:clamp(24px,7vw,34px);line-height:1.24;gap:16px;padding:5px 0}
  .m-links a span{min-width:26px;font-size:8px}
  .mo-eyebrow{margin-bottom:22px}
  .mo-right{gap:22px}
  .mo-right p{font-size:15px;line-height:1.9}
}

/* the bar must stay reachable above the opaque overlay — that X is the only way out */
body.menu-open nav{z-index:9996;background:transparent !important;border-bottom:none !important;box-shadow:none !important}
body.menu-open nav .nav-logo .w,body.menu-open nav .nav-logo .est{color:#1e1c18 !important}
body.menu-open nav .nav-logo .crest-mark .crest{color:var(--gold-ink) !important}
body.menu-open nav .menu-btn span{background:#1e1c18 !important}
body.menu-open nav .nav-links{opacity:0;pointer-events:none}
body.menu-open nav .nav-cta{opacity:0;pointer-events:none}