/* ==========================================================================
   Pastisseria Llavina — base layer
   Tokens, reset, typography, utilities, chrome (header / nav / footer)
   ========================================================================== */

:root{
  /* --- paper & ink ----------------------------------------------------- */
  --bone:        #F1ECE3;
  --bone-2:      #E7DFD2;
  --cream:       #FBF8F2;
  --paper:       #FFFFFF;
  --ink:         #1B1714;
  --ink-2:       #453C34;
  --ink-3:       #665C52;
  --espresso:    #14100E;
  --espresso-2:  #221B17;
  --cocoa:       #3A2A22;

  /* --- metal ------------------------------------------------------------ */
  --gold:        #A8823C;   /* decorative: rules, large display          */
  --gold-text:   #85632A;   /* 4.7:1 on bone — small text, labels, numbers */
  --gold-2:      #C6A15A;   /* on dark                                    */
  --gold-3:      #E6D6AE;
  --claret:      #6E2B28;

  --line:        color-mix(in srgb, var(--ink) 14%, transparent);
  --line-2:      color-mix(in srgb, var(--ink) 8%, transparent);
  --line-gold:   color-mix(in srgb, var(--gold) 38%, transparent);

  /* --- type ------------------------------------------------------------- */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(3.4rem, 13vw, 12rem);
  --fs-h1:      clamp(2.6rem, 7.2vw, 6.4rem);
  --fs-h2:      clamp(2.1rem, 5.2vw, 4.4rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.3rem);
  --fs-lead:    clamp(1.12rem, 1.55vw, 1.5rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.075rem);
  --fs-small:   .82rem;
  --fs-micro:   .7rem;

  /* --- metrics ---------------------------------------------------------- */
  --gutter:  clamp(20px, 5.2vw, 96px);
  --maxw:    1560px;
  --rail:    clamp(48px, 9vh, 96px);
  --radius:  2px;

  /* --- motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur:       .75s;

  --header-h: 82px;
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.86%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.42%27/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (max-width: 860px){ :root{ --header-h: 66px; } }

/* --------------------------------------------------------------------------
   reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }


body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--cream); }

:focus-visible{
  outline:2px solid var(--gold-text);
  outline-offset:3px;
  border-radius:2px;
}
[data-theme="dark"] :focus-visible,
.navpanel :focus-visible,
.lightbox :focus-visible,
.mobilebar :focus-visible{ outline-color:var(--gold-2); }

.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:10px; left:50%; translate:-50% -220%;
  z-index:10001;
  background:var(--ink); color:var(--cream);
  padding:14px 24px; border-radius:100px;
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
  transition:translate .3s var(--ease);
}
.skip:focus{ translate:-50% 0; }

/* --------------------------------------------------------------------------
   typography helpers
   -------------------------------------------------------------------------- */
.serif{ font-family:var(--serif); font-weight:300; }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-micro);
  font-weight:400;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold-text);
  display:flex;
  align-items:center;
  gap:.9em;
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:clamp(22px,4vw,54px);
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:none;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:"";
  width:clamp(22px,4vw,54px);
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:none;
}
.eyebrow--plain::before{ display:none; }

.h1,.h2,.h3{
  font-family:var(--serif);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); line-height:1.1; letter-spacing:-.01em; }
.h2 em,.h1 em,.h3 em{ font-style:italic; color:var(--gold); }

.lead{
  font-size:var(--fs-lead);
  line-height:1.62;
  color:var(--ink-2);
  font-weight:300;
  max-width:62ch;
  text-wrap:pretty;
}
.body-copy{ color:var(--ink-2); max-width:58ch; text-wrap:pretty; }
.muted{ color:var(--ink-3); }

.num{
  font-family:var(--serif);
  font-size:var(--fs-small);
  letter-spacing:.24em;
  color:var(--gold-text);
  font-weight:500;
}

/* --------------------------------------------------------------------------
   layout
   -------------------------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(64px,8.5vh,124px); position:relative; }
.section--tight{ padding-block:clamp(56px,7vh,104px); }
.section-head{ display:grid; gap:clamp(18px,2.2vw,30px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--gold{ background:linear-gradient(90deg,transparent,var(--line-gold) 12%,var(--line-gold) 88%,transparent); }

/* --------------------------------------------------------------------------
   buttons & links
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; gap:.75em;
  padding:1.05em 1.9em;
  background:var(--bg); color:var(--fg);
  font-size:var(--fs-micro); font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  border-radius:100px;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease-soft), transform .4s var(--ease);
  min-height:48px;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .52s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{ transform:translateY(0); }
.btn:hover{ color:#fff; }
.btn:active{ transform:scale(.98); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn--ghost:hover{ color:var(--cream); box-shadow:inset 0 0 0 1px transparent; }
.btn--light{ --bg:transparent; --fg:var(--cream); box-shadow:inset 0 0 0 1px rgba(230,214,174,.34); }
.btn__ico{ width:1.05em; height:1.05em; flex:none; }

.ulink{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}
.ulink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; opacity:.45;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--ease);
}
.ulink:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* --------------------------------------------------------------------------
   media / LQIP
   -------------------------------------------------------------------------- */
.media{
  position:relative;
  overflow:hidden;
  background-color:var(--bone-2);
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
}
.media > img,.media > video{
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .9s var(--ease-soft), transform 1.4s var(--ease);
}
.media > img.is-loaded,.media > video.is-loaded{ opacity:1; transform:scale(1); }
.media--arch{ border-radius:999px 999px var(--radius) var(--radius); }
.media__zoom{ transition:transform 1.2s var(--ease) !important; }
a:hover .media__zoom,.js-zoom:hover .media__zoom{ transform:scale(1.045); }

/* --------------------------------------------------------------------------
   grain + vignette overlay
   -------------------------------------------------------------------------- */
.grain{
  /* Bleeds past the viewport on purpose: grainShift slides this layer by up to
     ±3%, and at exactly inset:0 that slide uncovers a strip of the edge. The
     strip reads as a hard line, because the layer multiplies over everything
     it does cover. 5% clears the 3% travel with room to spare. */
  position:fixed; inset:-5%; z-index:9000;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:var(--grain-url);
  background-size:180px 180px;
}
@media (prefers-reduced-motion: no-preference){
  .grain{ animation:grainShift 6s steps(6) infinite; }
}
@keyframes grainShift{
  0%{ transform:translate(0,0) }      16%{ transform:translate(-2%,-3%) }
  32%{ transform:translate(3%,-1%) }  48%{ transform:translate(-1%,2%) }
  64%{ transform:translate(2%,3%) }   80%{ transform:translate(-3%,1%) }
  100%{ transform:translate(0,0) }
}

/* --------------------------------------------------------------------------
   reveal system
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .95s var(--ease-soft), transform 1.05s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

.reveal-img > img,
.reveal-img > video{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--ease), opacity .9s var(--ease-soft), transform 1.4s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal-img.is-in > img,
.reveal-img.is-in > video{ clip-path:inset(0 0 0 0); }
/* the blurred placeholder waits for the wipe too */
.reveal-img{ background-image:none !important; }
.reveal-img.is-in{ background-image:var(--lqip) !important; }

.reveal-line{ transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s var(--ease); }
.reveal-line.is-in{ transform:scaleX(1); }

/* split-text */
.split{ display:inline-block; }
.split .ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.split .wd{
  display:inline-block;
  transform:translate3d(0,108%,0) rotate(2.5deg);
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--wi,0) * 52ms + var(--i,0) * 90ms);
}
.is-in .split .wd,.split.is-in .wd{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-line,.split .wd,.reveal-img > img,.reveal-img > video{
    opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
  }
  .reveal-img{ background-image:var(--lqip) !important; }
  .grain{ animation:none; }
}

/* --------------------------------------------------------------------------
   intro curtain
   -------------------------------------------------------------------------- */
.intro{
  position:fixed; inset:0; z-index:10000;
  background:var(--espresso);
  display:grid; place-items:center;
  transition:opacity .6s ease .55s, visibility .6s .55s;
}
.intro__inner{ display:grid; justify-items:center; gap:22px; }
.intro__logo{
  width:min(280px,58vw);
  opacity:0;
  filter:brightness(0) invert(1);
  transform:translateY(12px);
  animation:introLogo 1.15s var(--ease) .12s forwards;
}
.intro__bar{ width:min(280px,58vw); height:1px; background:rgba(230,214,174,.25); position:relative; overflow:hidden; }
.intro__bar i{ position:absolute; inset:0; background:var(--gold-2); transform:scaleX(0); transform-origin:0 50%; animation:introBar 1.35s var(--ease-soft) .25s forwards; }
.intro__word{ font-family:var(--sans); font-size:var(--fs-micro); letter-spacing:.44em; text-transform:uppercase; color:rgba(230,214,174,.6); opacity:0; animation:introLogo .9s var(--ease) .45s forwards; }
@keyframes introLogo{ to{ opacity:1; transform:none; } }
@keyframes introBar{ to{ transform:scaleX(1); } }
.intro.is-done{ opacity:0; visibility:hidden; }
.intro.is-done .intro__panel{ transform:translateY(-101%); }

/* --------------------------------------------------------------------------
   scroll progress
   -------------------------------------------------------------------------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:8000;
  background:transparent; pointer-events:none;
}
.progress i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
}

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease-soft), box-shadow .5s var(--ease-soft), transform .55s var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--bone) 82%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  opacity:0; transition:opacity .5s var(--ease-soft);
}
.site-header.is-stuck::before{ opacity:1; }
.site-header.is-stuck{ box-shadow:0 1px 0 var(--line-2); }
.site-header.is-hidden{ transform:translateY(-102%); }

.site-header__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:14px; flex:none; padding-block:4px; }
.brand img{ width:clamp(108px,10vw,142px); transition:opacity .4s; }
.brand__tag{
  font-size:var(--fs-micro); letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-text); padding-left:14px; border-left:1px solid var(--line-gold);
}
@media (max-width:1100px){ .brand__tag{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,38px); }
.nav a{
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-2); position:relative; padding-block:12px;
  transition:color .35s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav a:hover,.nav a.is-active{ color:var(--ink); }
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); transform-origin:0 50%; }
.header-cta{ margin-left:8px; }
.header-cta__txt{ white-space:nowrap; }
@media (max-width:1180px){
  .header-cta{
    margin-left:auto; margin-right:6px;
    width:46px; height:46px; min-height:46px;
    padding:0; justify-content:center; gap:0;
  }
  .header-cta .btn__ico{ width:17px; height:17px; }
  .header-cta__txt{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  }
}
body.menu-open .header-cta{ opacity:0; pointer-events:none; }
@media (max-width:980px){ .nav{ display:none; } }

/* burger */
.burger{
  display:none; width:46px; height:46px; margin-right:-10px;
  align-items:center; justify-content:center; position:relative; z-index:2;
}
.burger span{ display:block; width:24px; height:1px; background:var(--ink); position:relative; transition:background .3s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:24px; height:1px; background:var(--ink);
  transition:transform .45s var(--ease), width .45s var(--ease);
}
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; width:15px; }
.burger:hover span::after{ width:24px; }
@media (max-width:980px){ .burger{ display:flex; } }

body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(7px) rotate(45deg); background:var(--cream); }
body.menu-open .burger span::after{ transform:translateY(-7px) rotate(-45deg); width:24px; background:var(--cream); }
body.menu-open .brand img{ filter:brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   mobile nav overlay
   -------------------------------------------------------------------------- */
.navpanel{
  position:fixed; inset:0; z-index:6500;
  background:var(--espresso);
  color:var(--cream);
  display:grid; grid-template-rows:var(--header-h) 1fr auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--ease), visibility 0s .85s;
  visibility:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
body.menu-open .navpanel{
  clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path .85s var(--ease), visibility 0s 0s;
}
.navpanel__list{
  align-self:center;
  padding:min(6vh,48px) var(--gutter);
  display:grid; gap:clamp(6px,1.4vh,14px);
}
.navpanel__list li{ overflow:hidden; }
.navpanel__list a{
  display:flex; align-items:baseline; gap:18px;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.1rem,9.6vw,3.6rem); line-height:1.12;
  transform:translateY(105%);
  transition:transform .8s var(--ease), color .3s;
}
body.menu-open .navpanel__list a{ transform:none; transition-delay:calc(var(--i) * 60ms + 120ms); }
.navpanel__list a:active{ color:var(--gold-2); }
.navpanel__list i{
  font-family:var(--sans); font-style:normal; font-size:var(--fs-micro);
  letter-spacing:.2em; color:var(--gold); flex:none; opacity:.8;
}
.navpanel__foot{
  padding:0 var(--gutter) max(28px,env(safe-area-inset-bottom));
  display:grid; gap:14px;
  border-top:1px solid rgba(230,214,174,.14);
  padding-top:24px;
  opacity:0; transition:opacity .6s ease .5s;
}
body.menu-open .navpanel__foot{ opacity:1; }
.navpanel__foot a{ font-size:1rem; color:var(--gold-3); }
.navpanel__foot .row{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
.navpanel__foot small{ font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase; color:rgba(230,214,174,.66); display:block; }

/* --------------------------------------------------------------------------
   cursor
   -------------------------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--gold);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s;
  display:grid; place-items:center;
  mix-blend-mode:normal;
}
.cursor__label{
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--espresso);
  opacity:0; transition:opacity .25s; white-space:nowrap;
}
.cursor.is-on{ opacity:1; }
.cursor.is-lg{ width:86px; height:86px; margin:-43px 0 0 -43px; background:var(--gold-2); border-color:transparent; }
.cursor.is-lg .cursor__label{ opacity:1; }
.cursor.is-sm{ width:9px; height:9px; margin:-4.5px 0 0 -4.5px; background:var(--gold); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--espresso);
  color:var(--bone);
  padding-block:clamp(64px,9vh,120px) 0;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);
  opacity:.5;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:38px; } }

.footer-brand img{ width:min(240px,62vw); margin-bottom:22px; }
.footer-brand p{ color:rgba(241,236,227,.62); max-width:36ch; font-size:.96rem; }
.footer-col h3{
  font-family:var(--sans); font-size:var(--fs-micro); font-weight:400;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  margin-bottom:22px;
}
.footer-col li + li{ margin-top:0; }
.footer-col a,.footer-col span{ display:inline-block; padding-block:10px; }
.footer-col a,.footer-col span{ color:rgba(241,236,227,.72); font-size:.96rem; transition:color .3s; }
.footer-col a:hover{ color:var(--gold-2); }
.footer-hours{ display:grid; gap:4px; }
.footer-hours dt{ color:rgba(241,236,227,.42); font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; margin-top:12px; }
.footer-hours dd{ margin:0; color:rgba(241,236,227,.82); font-size:.96rem; }

.footer-mark{
  margin-top:clamp(48px,7vh,96px);
  border-top:1px solid rgba(230,214,174,.13);
  padding-block:24px max(24px, calc(env(safe-area-inset-bottom) + 12px));
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between;
}
.footer-mark small{ font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; color:rgba(241,236,227,.62); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(230,214,174,.2);
  transition:border-color .35s, background .35s, color .35s;
}
.footer-social a:hover{ border-color:var(--gold); background:var(--gold); color:var(--espresso); }
.footer-social svg{ width:16px; height:16px; }

@media (max-width:760px){
  .site-footer{ padding-bottom:calc(var(--mobilebar-h,0px)); }
}

/* --------------------------------------------------------------------------
   mobile action bar
   -------------------------------------------------------------------------- */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:6000;
  display:none;
  padding:8px max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--espresso) 92%, transparent);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid rgba(230,214,174,.14);
  transform:translateY(120%);
  transition:transform .6s var(--ease);
}
.mobilebar.is-in{ transform:none; }
.mobilebar ul{ display:grid; grid-template-columns:repeat(3,1fr); }
.mobilebar a{
  display:grid; justify-items:center; gap:5px;
  padding:9px 4px; min-height:54px;
  color:var(--bone);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  border-radius:12px;
  -webkit-tap-highlight-color:transparent;
}
.mobilebar a:active{ background:rgba(230,214,174,.1); }
.mobilebar svg{ width:19px; height:19px; stroke:var(--gold-2); }
.mobilebar li + li{ border-left:1px solid rgba(230,214,174,.12); }
@media (max-width:760px){
  .mobilebar{ display:block; }
  body{ --mobilebar-h:92px; }
  body.menu-open .mobilebar{ transform:translateY(120%); }
}

/* --------------------------------------------------------------------------
   back to top
   -------------------------------------------------------------------------- */
.totop{
  position:fixed; right:clamp(16px,2.4vw,40px); bottom:clamp(16px,2.4vw,40px);
  z-index:5900;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--cream);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .45s var(--ease-soft), transform .45s var(--ease), background .35s;
}
.totop.is-in{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--gold); }
.totop svg{ width:15px; height:15px; }
@media (max-width:760px){ .totop{ display:none; } }


/* --------------------------------------------------------------------------
   header over dark sections
   -------------------------------------------------------------------------- */
.site-header.on-dark::before{ background:color-mix(in srgb, var(--espresso) 84%, transparent); }
.site-header.on-dark.is-stuck{ box-shadow:0 1px 0 rgba(230,214,174,.12); }
.site-header.on-dark .brand img{ filter:brightness(0) invert(1); }
.site-header.on-dark .brand__tag{ color:var(--gold-2); border-left-color:rgba(230,214,174,.28); }
.site-header.on-dark .nav a{ color:rgba(241,236,227,.7); }
.site-header.on-dark .nav a:hover,.site-header.on-dark .nav a.is-active{ color:var(--bone); }
.site-header.on-dark .btn{ --bg:transparent; --fg:var(--cream); box-shadow:inset 0 0 0 1px rgba(230,214,174,.32); }
.site-header.on-dark .burger span,
.site-header.on-dark .burger span::before,
.site-header.on-dark .burger span::after{ background:var(--bone); }

/* deep-link targets clear the fixed header */
section[id], footer[id]{ scroll-margin-top: calc(var(--header-h) + 6px); }