/* ===========================================================================
   Grange Hall Gardens — design-a body styles  (Lobby design vocabulary)
   Scoped to [data-design="a"]. Body only — the hero is injected by the shell.
   Palette: warm Lobby tokens (linen / brass / terracotta / olive) — matches the
   warm pastoral dusk-glow hero + the meadow-day life-layer.
   =========================================================================== */

[data-design="a"]{
  --linen:#F3EFE6; --linen-deep:#E7E1CF; --ink:#171411; --ink-soft:#3D3830;
  --muted:#7E7665; --rule:#26221C; --terracotta:#A64A2C; --olive:#5A6534;
  --brass:#A0823E; --ivory:#F8F4E8; --critical:#7C1812;
  --font-display:"Cormorant Garamond","GT Sectra Display",Georgia,"Times New Roman",serif;
  --font-room:"Cormorant Garamond","GT Sectra Display",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-data:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  --dur-tick:140ms; --dur-snap:240ms; --dur-caption:680ms; --dur-room:1100ms;
  --ease-warm:cubic-bezier(.16,1,.3,1); --ease-room:cubic-bezier(.22,.61,.36,1);
  --radius-warm:4px; --radius-key:8px;
  --maxw:1280px; --gutter:clamp(20px,5vw,48px);
  --bl-cta-bg:linear-gradient(135deg,var(--brass),#7c6630);
  --bl-cta-ink:var(--ink);
  box-sizing:border-box; color:var(--ink); background:var(--linen);
  font-family:var(--font-body); line-height:1.6;
}
[data-design="a"].dq-design *,[data-design="a"].dq-design *::before,[data-design="a"].dq-design *::after{box-sizing:border-box;}
[data-design="a"] .gh-anchor{display:block; height:0; scroll-margin-top:80px;}
[data-design="a"] :where(section){scroll-margin-top:80px;}

/* ── Shared windowed-center column (EVERY wrapper with max-width also has margin-inline:auto) */
[data-design="a"] .gh-story__inner,
[data-design="a"] .gh-facts__inner,
[data-design="a"] .gh-stays__inner,
[data-design="a"] .gh-gallery__inner,
[data-design="a"] .gh-nearby__inner,
[data-design="a"] .gh-host__inner,
[data-design="a"] .gh-close__inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}

/* ── Pointer — hero→body eye-handoff (data-mf-role="pointer") ───────────── */
[data-design="a"] .gh-pointer{
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding-block:clamp(16px,3vw,28px) clamp(8px,2vw,16px);
  pointer-events:none;
}
[data-design="a"] .gh-pointer__rule{
  display:block; width:1px; height:clamp(36px,6vw,72px);
  background:linear-gradient(to bottom,transparent,var(--brass) 40%,var(--brass));
  opacity:0; animation:gh-ptr-line 700ms 600ms var(--ease-warm) forwards;
}
[data-design="a"] .gh-pointer__chevron{
  display:block; width:22px; height:13px; color:var(--brass);
  opacity:0; animation:gh-ptr-chevron 500ms 1200ms var(--ease-warm) forwards;
  transform:translateY(-4px);
}
@keyframes gh-ptr-line{to{opacity:1;}}
@keyframes gh-ptr-chevron{to{opacity:.85; transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  [data-design="a"] .gh-pointer__rule,
  [data-design="a"] .gh-pointer__chevron{animation:none !important; opacity:1 !important; transform:none !important;}
}

/* ── Shared bits ─────────────────────────────────────────────────────────── */
[data-design="a"] .gh-kicker{
  font-family:var(--font-data); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 16px;
}
[data-design="a"].dq-design h2{font-family:var(--font-display); font-weight:500; letter-spacing:.01em;}

/* ── Key (brass) button — the styled CTA ─────────────────────────────────── */
[data-design="a"] .gh-key{
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  padding:13px 26px; min-height:48px; border-radius:var(--radius-key);
  font-family:var(--font-display); font-weight:600; letter-spacing:.02em;
  font-size:clamp(15px,2vw,18px); line-height:1.1; text-decoration:none;
  color:var(--ink); background:var(--brass);
  box-shadow:0 1px 0 var(--linen-deep),0 1px 0 1px var(--brass);
  transition:transform var(--dur-snap) var(--ease-warm),
             background var(--dur-snap) var(--ease-warm),
             box-shadow var(--dur-snap) var(--ease-warm),
             filter var(--dur-snap) var(--ease-warm);
  animation:gh-key-breath 4.5s var(--ease-warm) infinite;
}
[data-design="a"] .gh-key__ext{font-size:.9em; line-height:1;}
@media (hover:hover) and (pointer:fine){
  [data-design="a"] .gh-key:hover{
    background:color-mix(in oklab,var(--brass) 88%,var(--olive));
    transform:translateY(-2px); animation-play-state:paused; filter:brightness(1.04);
  }
}
[data-design="a"] .gh-key:focus-visible{outline:3px solid var(--terracotta); outline-offset:4px;}
[data-design="a"] .gh-key:active{
  background:color-mix(in oklab,var(--brass) 80%,var(--ink));
  box-shadow:inset 0 2px 0 rgba(0,0,0,.10); transform:translateY(1px);
}
[data-design="a"] .gh-key--lg{padding:16px 34px; min-height:56px; font-size:clamp(17px,2.4vw,20px);}
@keyframes gh-key-breath{
  0%,100%{box-shadow:0 1px 0 var(--linen-deep),0 1px 0 1px var(--brass);}
  50%    {box-shadow:0 1px 0 var(--linen-deep),0 0 0 4px color-mix(in oklab,var(--brass) 30%,transparent);}
}

/* ── 1 · Header / drawer (Lobby Brand Mark Travel) ───────────────────────── */
/* PERF-6: NEVER backdrop-filter:blur on position:sticky — replaced with solid/translucent bg */
[data-design="a"] .gh-header{
  position:sticky; top:0; z-index:40; isolation:isolate;
  background:color-mix(in oklab,var(--linen) 96%,transparent);
  /* no backdrop-filter:blur — solid bg per PERF-6 hard rule */
  border-bottom:1px solid color-mix(in oklab,var(--rule) 22%,transparent);
}
[data-design="a"] .gh-header__wash{position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden;}
[data-design="a"] .gh-header__wash::before{
  content:""; position:absolute; top:0; bottom:0; width:42%;
  background:linear-gradient(100deg,transparent,color-mix(in oklab,var(--ivory) 70%,transparent),transparent);
  transform:translateX(-60%);
  animation:gh-header-sweep 31s var(--ease-warm) infinite;
}
[data-design="a"] .gh-header__bar{
  max-width:var(--maxw); margin-inline:auto; padding:13px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
[data-design="a"] .gh-logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
[data-design="a"] .gh-logo__dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--brass);
  box-shadow:0 0 0 0 color-mix(in oklab,var(--brass) 50%,transparent);
  animation:gh-key-dot 24s var(--ease-warm) infinite;
}
[data-design="a"] .gh-logo__mark{
  font-family:var(--font-display); font-weight:600; letter-spacing:.01em;
  font-size:clamp(18px,2.4vw,23px); line-height:1; white-space:nowrap;
  transition:font-size var(--dur-snap) var(--ease-warm),letter-spacing var(--dur-snap) var(--ease-warm);
}
[data-design="a"] .gh-header[data-shrunk="true"] .gh-logo__mark{font-size:clamp(15px,1.9vw,17px); letter-spacing:.04em;}
[data-design="a"] .gh-burger{
  appearance:none; border:1px solid var(--rule); background:transparent;
  width:44px; height:44px; border-radius:var(--radius-warm); cursor:pointer;
  display:grid; place-content:center; gap:4px; padding:0;
  transition:border-color var(--dur-tick) var(--ease-warm);
}
[data-design="a"] .gh-burger__line{
  display:block; width:18px; height:1.5px; background:var(--ink);
  transition:transform var(--dur-snap) var(--ease-warm),opacity var(--dur-snap) var(--ease-warm);
}
@media (hover:hover) and (pointer:fine){
  [data-design="a"] .gh-burger:hover{border-color:var(--terracotta);}
}
[data-design="a"] .gh-burger:focus-visible{outline:3px solid var(--terracotta); outline-offset:3px;}
[data-design="a"] .gh-burger[aria-expanded="true"] .gh-burger__line:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
[data-design="a"] .gh-burger[aria-expanded="true"] .gh-burger__line:nth-child(2){opacity:0;}
[data-design="a"] .gh-burger[aria-expanded="true"] .gh-burger__line:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

[data-design="a"] .gh-drawer{position:fixed; inset:0; z-index:60; visibility:hidden;}
[data-design="a"] .gh-drawer[data-open="true"]{visibility:visible;}
[data-design="a"] .gh-drawer__scrim{
  position:absolute; inset:0; background:rgba(15,13,10,.5);
  opacity:0; transition:opacity var(--dur-snap) var(--ease-warm);
}
[data-design="a"] .gh-drawer[data-open="true"] .gh-drawer__scrim{opacity:1;}
[data-design="a"] .gh-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(460px,86vw);
  background:var(--linen); border-left:1px solid var(--rule);
  padding:clamp(20px,6vw,52px); display:flex; flex-direction:column; gap:14px;
  transform:translateX(100%); transition:transform var(--dur-room) var(--ease-room);
  overflow-y:auto;
}
[data-design="a"] .gh-drawer[data-open="true"] .gh-drawer__panel{transform:translateX(0);}
[data-design="a"] .gh-drawer__close{
  align-self:flex-start; font-family:var(--font-room); font-style:italic; font-size:17px;
  color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:6px 0; min-height:44px;
  text-decoration:underline; text-decoration-color:var(--terracotta);
}
[data-design="a"] .gh-navlink{
  display:block; font-family:var(--font-room); font-style:italic; font-size:27px;
  color:var(--ink); text-decoration:none; padding:8px 0;
  border-bottom:1px solid color-mix(in oklab,var(--rule) 16%,transparent);
  transition:color var(--dur-tick) var(--ease-warm);
}
@media (hover:hover) and (pointer:fine){
  [data-design="a"] .gh-navlink:hover{color:var(--terracotta);}
}
[data-design="a"] .gh-key--drawer{margin-top:12px; justify-content:center;}
@keyframes gh-header-sweep{0%{transform:translateX(-60%);} 100%{transform:translateX(320%);}}
@keyframes gh-key-dot{
  0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--brass) 50%,transparent);}
  50%    {box-shadow:0 0 0 5px color-mix(in oklab,var(--brass) 0%,transparent);}
}

/* ── reveal primitive (TRIAD-1 eye journey; opacity/transform only) ───────── */
[data-design="a"] [data-gh-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--dur-caption) var(--ease-warm),transform var(--dur-caption) var(--ease-warm);
}
[data-design="a"] [data-gh-reveal][data-gh-seen]{opacity:1; transform:none;}
[data-design="a"] [data-gh-reveal][data-gh-stagger] > *{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-caption) var(--ease-warm),transform var(--dur-caption) var(--ease-warm);
}
[data-design="a"] [data-gh-reveal][data-gh-seen][data-gh-stagger] > *{opacity:1; transform:none;}
[data-design="a"] [data-gh-stagger] > *:nth-child(2){transition-delay:90ms;}
[data-design="a"] [data-gh-stagger] > *:nth-child(3){transition-delay:180ms;}
[data-design="a"] [data-gh-stagger] > *:nth-child(4){transition-delay:270ms;}

/* ── 2 · Place story + parallax feature photo ────────────────────────────── */
[data-design="a"] .gh-story{padding-block:clamp(64px,10vw,120px);}
[data-design="a"] .gh-story__inner{display:grid; gap:clamp(28px,5vw,56px); align-items:center;}
@media (min-width:880px){
  [data-design="a"] .gh-story__inner{grid-template-columns:1fr 1.05fr;}
}
[data-design="a"] .gh-story__title{
  font-size:clamp(28px,4.4vw,46px); line-height:1.12; margin:0 0 20px; max-width:18ch;
}
[data-design="a"] .gh-story__body{
  font-size:clamp(16px,1.5vw,18px); line-height:1.7; color:var(--ink-soft);
  margin:0 0 28px; max-width:60ch;
}
[data-design="a"] .gh-story__figure{
  margin:0; position:relative; border-radius:var(--radius-warm); overflow:hidden;
  box-shadow:0 0 0 1px var(--rule); aspect-ratio:4/3;
}
[data-design="a"] .gh-story__figure img{
  display:block; width:100%; height:100%; object-fit:cover;
}
[data-design="a"] .gh-story__cap{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:28px 18px 14px; font-family:var(--font-data); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ivory);
  background:linear-gradient(to top,rgba(15,13,10,.62),transparent);
}

/* ── 3 · Key facts ───────────────────────────────────────────────────────── */
[data-design="a"] .gh-facts{padding-block:clamp(48px,8vw,88px); background:var(--linen-deep);}
[data-design="a"] .gh-facts__title{font-size:clamp(24px,3.4vw,36px); margin:0 0 clamp(24px,4vw,40px);}
[data-design="a"] .gh-facts__grid{
  list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
[data-design="a"] .gh-fact{
  background:var(--linen); border-radius:var(--radius-warm);
  box-shadow:0 0 0 1px var(--rule); padding:clamp(20px,3vw,28px);
  display:flex; flex-direction:column; gap:8px; border-top:3px solid var(--brass);
}
[data-design="a"] .gh-fact--terracotta{border-top-color:var(--terracotta);}
[data-design="a"] .gh-fact--olive{border-top-color:var(--olive);}
[data-design="a"] .gh-fact__num{
  font-family:var(--font-display); font-weight:600; font-size:clamp(28px,4vw,40px);
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
}
[data-design="a"] .gh-fact__lab{font-size:14px; line-height:1.5; color:var(--muted);}

/* ── 4 · Stays selector ──────────────────────────────────────────────────── */
[data-design="a"] .gh-stays{padding-block:clamp(64px,10vw,120px);}
[data-design="a"] .gh-stays__title{font-size:clamp(26px,3.8vw,40px); margin:0 0 12px;}
[data-design="a"] .gh-stays__lede{font-size:clamp(16px,1.5vw,18px); color:var(--ink-soft); margin:0 0 clamp(24px,4vw,40px); max-width:54ch;}
[data-design="a"] .gh-stays__tabs{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:clamp(24px,4vw,36px);}
[data-design="a"] .gh-tab{
  appearance:none; cursor:pointer; text-align:left; flex:1 1 200px;
  background:var(--linen); border:1px solid var(--rule); border-radius:var(--radius-warm);
  padding:14px 18px; min-height:48px; display:flex; flex-direction:column; gap:4px; color:var(--ink);
  transition:border-color var(--dur-tick) var(--ease-warm),
             background var(--dur-tick) var(--ease-warm),
             box-shadow var(--dur-tick) var(--ease-warm),
             transform var(--dur-tick) var(--ease-warm);
}
[data-design="a"] .gh-tab__name{font-family:var(--font-room); font-style:italic; font-size:clamp(20px,2.6vw,26px); line-height:1.1;}
[data-design="a"] .gh-tab__meta{font-family:var(--font-data); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
@media (hover:hover) and (pointer:fine){
  [data-design="a"] .gh-tab:hover{border-color:var(--terracotta); transform:translateY(-2px);}
}
[data-design="a"] .gh-tab:focus-visible{outline:3px solid var(--terracotta); outline-offset:3px;}
[data-design="a"] .gh-tab[aria-selected="true"]{
  border-color:var(--brass); background:var(--ivory);
  box-shadow:inset 0 0 0 1px var(--brass);
}
[data-design="a"] .gh-tab[aria-selected="true"] .gh-tab__meta{color:var(--olive);}

[data-design="a"] .gh-stays__panel{display:grid; gap:clamp(24px,4vw,48px); align-items:center;}
@media (min-width:880px){
  [data-design="a"] .gh-stays__panel{grid-template-columns:1.3fr 1fr;}
}
[data-design="a"] .gh-stays__photo{
  aspect-ratio:16/10; width:100%; border-radius:var(--radius-warm);
  box-shadow:0 0 0 1px var(--rule); background-color:var(--linen-deep);
  background-image:linear-gradient(150deg,#8a7c63,#3d3830);
  background-size:cover; background-position:center;
  transition:opacity var(--dur-room) var(--ease-room);
}
[data-design="a"] .gh-stays__photo[data-fading="true"]{opacity:0;}
[data-design="a"] .gh-stays__strip{font-family:var(--font-data); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; transition:opacity var(--dur-caption) var(--ease-warm);}
[data-design="a"] .gh-stays__name{font-family:var(--font-room); font-style:italic; font-weight:400; font-size:clamp(26px,4vw,38px); margin:0 0 14px; color:var(--ink); transition:opacity var(--dur-caption) var(--ease-warm);}
[data-design="a"] .gh-stays__desc{font-size:clamp(15px,1.6vw,18px); line-height:1.65; color:var(--ink-soft); margin:0 0 26px; max-width:56ch; transition:opacity var(--dur-caption) var(--ease-warm);}
[data-design="a"] .gh-stays__detail[data-fading="true"] .gh-stays__strip,
[data-design="a"] .gh-stays__detail[data-fading="true"] .gh-stays__name,
[data-design="a"] .gh-stays__detail[data-fading="true"] .gh-stays__desc{opacity:0;}

/* ── 5 · Gallery ─────────────────────────────────────────────────────────── */
[data-design="a"] .gh-gallery{padding-block:clamp(48px,8vw,96px); background:var(--linen-deep);}
[data-design="a"] .gh-gallery__title{font-size:clamp(24px,3.4vw,36px); margin:0 0 clamp(24px,4vw,40px);}
[data-design="a"] .gh-gallery__grid{
  display:grid; gap:clamp(12px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
[data-design="a"] .gh-gallery__img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-warm); box-shadow:0 0 0 1px var(--rule);
  transition:transform var(--dur-room) var(--ease-warm),box-shadow var(--dur-snap) var(--ease-warm);
}
@media (hover:hover) and (pointer:fine){
  [data-design="a"] .gh-gallery__img:hover{transform:scale(1.02); box-shadow:0 0 0 1px var(--brass);}
}

/* ── 6 · What's nearby ───────────────────────────────────────────────────── */
[data-design="a"] .gh-nearby{padding-block:clamp(64px,10vw,112px);}
[data-design="a"] .gh-nearby__title{font-size:clamp(26px,3.8vw,40px); margin:0 0 clamp(24px,4vw,40px);}
[data-design="a"] .gh-nearby__list{list-style:none; margin:0; padding:0; display:grid; gap:clamp(20px,3vw,32px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
[data-design="a"] .gh-near{
  padding-left:18px; border-left:2px solid var(--olive);
  display:flex; flex-direction:column; gap:8px;
}
[data-design="a"] .gh-near__name{font-family:var(--font-room); font-style:italic; font-size:clamp(20px,2.4vw,26px); color:var(--ink); line-height:1.15;}
[data-design="a"] .gh-near__note{font-size:15px; line-height:1.6; color:var(--ink-soft);}

/* ── 7 · Host ────────────────────────────────────────────────────────────── */
[data-design="a"] .gh-host{padding-block:clamp(48px,8vw,88px); background:var(--linen-deep);}
[data-design="a"] .gh-host__inner{max-width:760px; margin-inline:auto;}
[data-design="a"] .gh-host__dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--terracotta); margin-bottom:16px; animation:gh-dot-warm 12s var(--ease-warm) infinite;}
[data-design="a"] .gh-host__title{font-size:clamp(24px,3.4vw,34px); margin:0 0 16px;}
[data-design="a"] .gh-host__body{font-size:clamp(16px,1.6vw,19px); line-height:1.7; color:var(--ink-soft); margin:0; max-width:60ch;}
@keyframes gh-dot-warm{0%,100%{background:var(--terracotta);} 50%{background:var(--olive);}}

/* ── 8 · Closing CTA ─────────────────────────────────────────────────────── */
[data-design="a"] .gh-close{padding-block:clamp(72px,12vw,140px); text-align:center;}
[data-design="a"] .gh-close__title{font-size:clamp(30px,5vw,52px); margin:0 0 16px;}
[data-design="a"] .gh-close__body{font-size:clamp(16px,1.7vw,19px); color:var(--ink-soft); margin:0 auto 32px; max-width:46ch;}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  [data-design="a"] .gh-header__wash::before,
  [data-design="a"] .gh-logo__dot,
  [data-design="a"] .gh-host__dot,
  [data-design="a"] .gh-key{animation:none;}
  [data-design="a"] .gh-drawer__panel,
  [data-design="a"] .gh-drawer__scrim,
  [data-design="a"] .gh-tab,
  [data-design="a"] .gh-gallery__img,
  [data-design="a"] .gh-stays__photo,
  [data-design="a"] .gh-stays__strip,
  [data-design="a"] .gh-stays__name,
  [data-design="a"] .gh-stays__desc{transition:none;}
  [data-design="a"] [data-gh-reveal],
  [data-design="a"] [data-gh-reveal] > *{opacity:1 !important; transform:none !important; transition:none;}
}

/* ── responsive header / drawer tightening ───────────────────────────────── */
@media (max-width:560px){
  [data-design="a"] .gh-drawer__panel{width:100vw;}
  [data-design="a"] .gh-navlink{font-size:24px;}
}
@media (max-width:390px){
  [data-design="a"] .gh-header__bar{gap:10px;}
  [data-design="a"] .gh-logo__mark{font-size:17px;}
}
@media (max-width:320px){
  [data-design="a"] .gh-logo__mark{font-size:15px; letter-spacing:0;}
  [data-design="a"] .gh-burger{width:40px; height:40px;}
}

/* ── mobile no-h-scroll floor (MANDATORY tail) ───────────────────────────── */
[data-design="a"].dq-design,[data-design="a"] .dq-design{max-width:100%; overflow-x:clip;}
[data-design="a"].dq-design *{min-width:0;}
[data-design="a"].dq-design img{max-width:100%; height:auto;}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }