/* nav.css (round 3, unit HN): transparent over the hero, solid ink and compact after 80 px, hides on scroll down, returns on scroll up.
   Phone: logo, gold Book, menu button; the menu is a right-side drawer. Pattern: ui-layouts "Responsive Header" (see components.md). */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:var(--radius);background:var(--gold);color:var(--on-gold);
  font:700 15px/1 var(--body);letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;transition:background .2s,transform .2s}
.btn-gold:hover{background:var(--gold-hi)}
.btn-gold:active{transform:translateY(1px)}

.nav{--nh:var(--nav-h);position:fixed;inset:0 0 auto 0;z-index:50;transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .3s,border-color .3s;
  background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,0));background-origin:border-box;border-bottom:1px solid rgba(245,243,238,0);padding-top:env(safe-area-inset-top)}
.nav__in{height:var(--nh);display:flex;align-items:center;gap:var(--s2);padding:0 var(--gut);transition:height .3s cubic-bezier(.22,1,.36,1)}
.nav.is-solid{background:rgba(10,10,10,.98);border-bottom-color:rgba(245,243,238,.08);--nh:56px}
.nav.is-hidden{transform:translateY(-101%)}
.nav__logo{display:flex;align-items:center;gap:12px;margin-right:auto;-webkit-tap-highlight-color:transparent}
.nav__logo img{width:40px;height:40px;opacity:.95;transition:width .3s,height .3s}
.nav.is-solid .nav__logo img{width:34px;height:34px}
.nav__word{display:none;font:800 20px/1 var(--display);letter-spacing:-.02em;color:var(--paper)}
.nav__links{display:none}
.nav__book{height:40px;padding:0 20px}
.nav__menu{position:relative;width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;color:var(--paper);-webkit-tap-highlight-color:transparent}
.nav__menu span,.drawer__x span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:1px;transition:transform .3s}
.nav__menu span:nth-child(1){top:17px}.nav__menu span:nth-child(2){top:25px}
.nav__menu:focus-visible,.drawer__x:focus-visible,.nav a:focus-visible,.drawer a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- drawer (phone) ---------- */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;transition:visibility 0s .4s}
.drawer.is-open{visibility:visible;transition:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(10,10,10,.62);opacity:0;transition:opacity .35s}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,380px);display:flex;flex-direction:column;background:var(--ink-2);border-left:1px solid var(--line);
  padding-top:env(safe-area-inset-top);transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);border-bottom:1px solid var(--line)}
.drawer__top img{width:40px;height:40px}
.drawer__x{position:relative;width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;color:var(--paper)}
.drawer__x span:nth-child(1){top:21px;transform:rotate(45deg)}.drawer__x span:nth-child(2){top:21px;transform:rotate(-45deg)}
.drawer__links{display:flex;flex-direction:column;padding:var(--s2) var(--gut);flex:1}
.drawer__links a{display:flex;align-items:center;justify-content:space-between;min-height:64px;font:800 34px/1 var(--display);letter-spacing:-.03em;color:var(--paper);
  border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent;transition:color .2s,padding .25s}
.drawer__links a:hover{color:var(--gold);padding-left:6px}
.drawer__links a::after{content:"";width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.5}
.drawer__tel{display:flex;align-items:center;gap:12px;padding:var(--s3) var(--gut);font:700 20px/1 var(--body);color:var(--paper);border-top:1px solid var(--line)}
.drawer__tel svg{color:var(--gold)}
.drawer__book{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:0;min-height:calc(var(--bar-h) + 24px + env(safe-area-inset-bottom));
  padding:0 var(--gut) env(safe-area-inset-bottom);background:var(--gold);color:var(--on-gold);font:800 20px/1 var(--display);letter-spacing:-.02em}
.drawer__book span{font:500 13px/1 var(--body);color:rgba(10,10,10,.65);letter-spacing:0}
html.menu-open{overflow:hidden}

@media (min-width:900px){
  .nav__in{gap:32px}
  .nav__word{display:block}
  .nav__links{display:flex;align-items:center;gap:32px;font:700 15px/1 var(--body);color:var(--soft)}
  .nav__links a:not(.nav__tel){position:relative;padding:8px 0;transition:color .2s}
  .nav__links a:not(.nav__tel)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
  .nav__links a:not(.nav__tel):hover{color:var(--paper)}
  .nav__links a:not(.nav__tel):hover::after{transform:scaleX(1)}
  .nav__tel{margin-left:8px;color:var(--paper);font-weight:700}
  .nav__logo{margin-right:0}
  .nav__links{margin-left:auto}
  .nav__book{height:44px;margin-left:0}
  .nav__menu,.drawer{display:none}
}
@media (prefers-reduced-motion:reduce){ .nav,.nav__in,.drawer__panel,.drawer__scrim{transition:none} }

/* EN | ES switch (RESUME-9): in the nav from 900 px, in the drawer on the phone. The current language is aria-current. */
.lang{display:flex;align-items:center;gap:2px;font:700 12px/1 var(--body);letter-spacing:.1em}
.lang a{display:inline-flex;align-items:center;min-height:32px;padding:0 7px;border-radius:6px;color:var(--mute);transition:color .2s}
.lang a:hover{color:var(--paper)}
.lang a[aria-current]{color:var(--paper);box-shadow:inset 0 -1.5px 0 var(--gold)}
.lang a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav__lang{display:none}
.drawer__lang{padding:var(--s2) var(--gut) 0;font-size:14px}
.drawer__lang a{min-height:44px;padding:0 12px}
@media (min-width:900px){ .nav__lang{display:flex;margin-left:-12px} }
/* Spanish width buffer, drawer: the Book label stays on one line, its live time may wrap under itself on the right */
.drawer__book{white-space:nowrap}
.drawer__book span{white-space:normal;text-align:right;line-height:1.25;min-width:0}