/* ============================================================================
   KHALDOUN — Shared site shell  (header · drill-down mega-menu · footer)
   Single source of truth, loaded on EVERY page (hand-built + Eleventy) so the
   shell can never drift apart again. Self-contained --sh-* tokens mean the shell
   looks identical regardless of each page's own stylesheet (style.css,
   the .cacao-page vars, or /library/library.css).

   Built from the approved shell mockup (260628) for LOOK & BEHAVIOUR only —
   real links/labels/imagery come from shell.js (the IA), never the mockup.
   Markup is injected by /shell.js; keep the two in sync.
   ========================================================================== */
:root{
  --sh-bone:#f1ece5;
  --sh-bone-dim:#cdc6ba;
  --sh-ink:#1a1714;        /* dark anchor (matches the homepage canvas) */
  --sh-ink-2:#1d1a1b;      /* layering shade for menu/footer */
  --sh-accent:var(--page-accent,#c9a96e);  /* adapts per page: gold default, ember on the Library (which sets --page-accent) */
  --sh-line:rgba(241,236,229,.14);
  --sh-line-soft:rgba(241,236,229,.08);
  --sh-display:'Cormorant Garamond',Georgia,serif;   /* stands in for The Seasons */
  --sh-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Helvetica Now */
  --sh-maxw:1280px;
  --sh-menu-h:70px;
}

/* ============ HEADER — adopt the canonical nav on every page ============ */
/* Header fades out while the footer logo is on screen, back when it leaves
   (shell.js · wireFooterFade). Fade is animated by each page's own .nav
   opacity transition. */
.nav.sh-nav-hidden{opacity:0!important;pointer-events:none!important}

/* The hamburger is the single menu entry now, so it is always available. */
.nav .nav__toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:30px;height:30px;padding:0;background:none;border:none;cursor:pointer;
}
.nav .nav__toggle span{
  display:block;height:1.4px;width:24px;background:var(--sh-bone);
  transition:transform .35s ease,opacity .35s ease;
}
.nav .nav__toggle:hover span{opacity:.85}

/* Desktop priority links (Cacao · Letters). Hidden on mobile — Cacao lives in
   the menu, Letters in the footer band (brief §C1). */
.nav .nav__right{display:none}
.nav .nav__right a{
  font-family:var(--sh-body);font-weight:500;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sh-bone);position:relative;padding:.4rem 0;opacity:.92;
}
.nav .nav__right a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--sh-accent);transition:right .35s ease;
}
.nav .nav__right a:hover{opacity:1}
.nav .nav__right a:hover::after{right:0}
.nav .nav__right a[aria-current="page"]{opacity:1}
.nav .nav__right a[aria-current="page"]::after{right:0}
@media(min-width:861px){
  .nav .nav__right{display:flex;align-items:center;gap:2.2rem;padding-right:1.6rem}
}

/* ============ MEGA-MENU (drill-down, Aman-style) ============ */
.sh-mm{
  position:fixed;inset:0;z-index:2000;
  background:linear-gradient(180deg,var(--sh-ink),var(--sh-ink-2));
  color:var(--sh-bone);font-family:var(--sh-body);font-weight:300;
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease;
  overflow-y:auto;-webkit-font-smoothing:antialiased;
}
.sh-mm.open{opacity:1;visibility:visible}
.sh-mm *{box-sizing:border-box}
.sh-mm a{color:inherit;text-decoration:none}

.sh-mm__top{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--sh-menu-h);padding:0 clamp(1.1rem,3vw,2.4rem);
}
.sh-mm__logo img{height:21px;width:auto;opacity:.96;display:block}
.sh-mm__close{
  background:none;border:none;color:var(--sh-bone);cursor:pointer;
  font-family:var(--sh-body);font-weight:500;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;display:flex;align-items:center;gap:.6rem;opacity:.85;
}
.sh-mm__close:hover{opacity:1}
.sh-mm__close .x{font-size:1.3rem;line-height:1}

.sh-mm__body{
  max-width:var(--sh-maxw);margin:0 auto;align-items:start;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(1.4rem,4vw,3rem) clamp(1.1rem,3vw,2.4rem) 4rem;
}

.sh-mm__crumb{min-height:1.6rem;margin-bottom:1.4rem}
.sh-mm__eyebrow{
  font-family:var(--sh-body);font-weight:500;font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sh-bone-dim);
}
.sh-mm__back{
  background:none;border:none;color:var(--sh-bone-dim);cursor:pointer;
  font-family:var(--sh-body);font-weight:500;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:.5rem;
  padding:.3rem 0;transition:color .3s ease;
}
.sh-mm__back:hover{color:var(--sh-bone)}

.sh-mm__visit{
  display:inline-block;margin-bottom:.6rem;font-family:var(--sh-body);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sh-bone);
  border-bottom:1px solid var(--sh-accent);padding-bottom:.25rem;opacity:.9;
}
.sh-mm__visit:hover{opacity:1}

.sh-mm__items{list-style:none;margin:0;padding:0;animation:sh-slidein .4s ease}
@keyframes sh-slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.sh-mm__items li{border-bottom:1px solid var(--sh-line-soft)}
.sh-mm__row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  background:none;border:none;color:var(--sh-bone);font-family:var(--sh-display);
  font-weight:300;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;
  padding:.62rem 0;cursor:pointer;text-align:left;
  transition:color .3s ease,padding-left .35s ease;
}
.sh-mm__row:hover,.sh-mm__row:focus-visible{color:#fff;padding-left:.5rem;outline:none}
.sh-mm__row .chev{font-family:var(--sh-body);font-size:.95rem;color:var(--sh-bone-dim);font-weight:300}
.sh-mm__row:hover .chev{color:var(--sh-accent)}

/* media pane (updates on hover / drill) */
.sh-mm__media{
  position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/5;
  background:var(--sh-ink-2);align-self:stretch;min-height:320px;display:block;
}
.sh-mm__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.02);transition:opacity .5s ease;
}
.sh-mm__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,23,20,0) 40%,rgba(26,23,20,.85));
}
.sh-mm__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.2rem,2.5vw,2rem)}
.sh-mm__cap-label{
  display:block;margin-bottom:.5rem;font-family:var(--sh-body);font-weight:500;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sh-bone-dim);
}
.sh-mm__cap p{font-family:var(--sh-display);font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.3;margin:0 0 .8rem;opacity:.95}
.sh-mm__discover{font-family:var(--sh-body);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--sh-bone);display:inline-flex;gap:.45rem}
.sh-mm__discover .arw{color:var(--sh-accent)}

/* ============ FOOTER (one comprehensive footer everywhere) ============ */
#site-footer{
  background:var(--sh-ink-2);color:var(--sh-bone);border-top:1px solid var(--sh-line);
  font-family:var(--sh-body);font-weight:300;
  padding:clamp(3rem,7vw,5.5rem) clamp(1.1rem,3vw,2.4rem) 2.2rem;
}
#site-footer *{box-sizing:border-box}
#site-footer a{color:inherit;text-decoration:none}
.sh-ft__logo{display:flex;justify-content:center;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.sh-ft__logo img{height:26px;opacity:.92;display:block}

/* newsletter band — anchor target #letters on every page */
.sh-ft__letters{max-width:560px;margin:0 auto clamp(3rem,6vw,4.4rem);text-align:center}
.sh-ft__letters .sh-ft__label{display:block;margin-bottom:1rem}
.sh-ft__letters h3{font-family:var(--sh-display);font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:300;line-height:1.15;margin:0 0 .8rem}
.sh-ft__letters p{font-size:.9rem;opacity:.72;max-width:42ch;margin:0 auto 1.6rem}
.sh-ft__sub{display:flex;border:1px solid var(--sh-line);border-radius:2px;overflow:hidden;max-width:420px;margin:0 auto;background:rgba(241,236,229,.02)}
.sh-ft__sub input{flex:1;min-width:0;background:transparent;border:none;color:var(--sh-bone);padding:.95rem 1.2rem;font-family:var(--sh-body);font-size:.85rem;outline:none}
.sh-ft__sub input::placeholder{color:var(--sh-bone-dim);opacity:.6}
.sh-ft__sub button{background:var(--sh-accent);color:var(--sh-ink);border:none;padding:0 1.6rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-family:var(--sh-body);font-weight:500}
.sh-ft__fine{font-size:.7rem;opacity:.5;margin-top:1rem}

.sh-ft__label{font-family:var(--sh-body);font-weight:500;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sh-bone-dim)}

.sh-ft__map{
  max-width:var(--sh-maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:2rem;padding:clamp(2.4rem,5vw,3.4rem) 0;border-top:1px solid var(--sh-line-soft);
}
.sh-ft__col .sh-ft__label{display:block;margin-bottom:1.1rem}
.sh-ft__col ul{list-style:none;margin:0;padding:0}
.sh-ft__col li{margin-top:.6rem}
.sh-ft__col li a{font-size:.85rem;opacity:.72}
.sh-ft__col li a:hover{opacity:1}
.sh-ft__col li.sub{padding-left:.9rem}
.sh-ft__col li.sub a{font-size:.76rem;opacity:.5}

.sh-ft__base{
  max-width:var(--sh-maxw);margin:0 auto;padding-top:2rem;border-top:1px solid var(--sh-line-soft);
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;justify-content:space-between;align-items:center;
}
.sh-ft__base p{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sh-bone-dim);opacity:.7;margin:0}
.sh-ft__base a{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sh-bone-dim);opacity:.7}
.sh-ft__base a:hover{opacity:1}
.sh-ext{font-size:.62em;vertical-align:.22em;opacity:.6}

/* ============ RESPONSIVE ============ */
@media(max-width:860px){
  .sh-mm__body{grid-template-columns:1fr;gap:1.8rem}
  .sh-mm__media{order:2;aspect-ratio:16/10;min-height:0}
  .sh-mm__list{order:1}
  .sh-ft__map{grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
}
@media(max-width:520px){
  .sh-ft__map{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .sh-mm,.sh-mm *{animation:none!important;transition:none!important}
}