/* ============================================================
 * chrome.css — the one Hero Rising panel, for every product surface.
 *
 * Single source of the global header's look: layout, height, padding,
 * typography, substrate, buttons, states and mobile behavior. Markup is
 * stamped by scripts/gen-nav.mjs; behavior lives in /nav.js.
 * Contract: docs/WEBSITE_GLOBAL_NAVIGATION_CONTRACT.md.
 *
 * Self-contained on purpose: it must render identically over the Fire,
 * Heart, Pearl, Observatory and portal palettes without inheriting any
 * page variable. Never fork this file into a page stylesheet.
 * ============================================================ */

/* The panel is fixed, so anchor jumps must clear it: the target heading
   lands below the band instead of behind it. */
html{scroll-padding-top:96px}
@media(max-width:1100px){html{scroll-padding-top:84px}}

/* ---------- the panel ------------------------------------------------- */
.hr-header{--hr-band:17,20,28}
.hr-nav{position:fixed;top:0;left:0;right:0;z-index:80}
/* The substrate is a layer of its own, never the panel's own opacity: the
   logo, links and CTA stay fully opaque while page content passes beneath. */
.hr-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,20,28,.97) 0,rgba(17,20,28,.94) 68%,rgba(17,20,28,.72) 88%,rgba(17,20,28,0) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hr-nav::after{content:"";position:absolute;left:clamp(20px,4vw,48px);right:clamp(20px,4vw,48px);bottom:0;height:1px;background:linear-gradient(90deg,rgba(216,176,76,0),rgba(216,176,76,.3) 28%,rgba(216,176,76,.3) 72%,rgba(216,176,76,0));opacity:0;transition:opacity .4s ease}
.hr-nav.scrolled::after{opacity:1}
.hr-nav.scrolled::before{background:linear-gradient(180deg,rgba(13,15,21,.985) 0,rgba(13,15,21,.96) 72%,rgba(13,15,21,.8) 90%,rgba(13,15,21,0) 100%)}
.hr-nav-wrap{max-width:1400px;margin:0 auto;padding:14px clamp(20px,4vw,48px);display:flex;align-items:center;gap:28px;min-height:70px}

/* ---------- brand ----------------------------------------------------- */
.hr-logo{font-family:'Cormorant',Georgia,'Times New Roman',serif;font-weight:500;font-size:20px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:#d8b04c;white-space:nowrap;display:inline-flex;align-items:center;min-height:42px}
.hr-logo span{opacity:.92}
/* The approved Solar Crest (docs/HERO_RISING_LOGO_CANON.md). Height drives the
   size and `width:auto` takes the ratio from the asset's own viewBox, so the
   crest can never be stretched. The optical gap is the mark's own margin, not
   a flex `gap`, so the wordmark's letter-spacing stays exactly as it was.
   No box, border, glow or shadow may be added here — brand canon. */
.hr-logo-mark{flex:none;display:block;height:34px;width:auto;object-fit:contain;margin-right:10px}

/* ---------- destinations ---------------------------------------------- */
.hr-links{display:flex;gap:24px;align-items:center;margin-left:6px}
.hr-links a,.hr-acct{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;text-decoration:none;color:#f3ecdc;opacity:.7;transition:opacity .3s,color .3s;white-space:nowrap;display:inline-flex;align-items:center;min-height:42px}
.hr-links a:hover,.hr-acct:hover{opacity:1}
.hr-links a[aria-current="page"]{opacity:1;color:#f0d488}
.hr-acct{margin-left:auto;position:relative;padding-left:24px}
.hr-acct::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;transform:translateY(-50%);background:currentColor;opacity:.35}
.hr-acct[aria-current="page"]{opacity:1;color:#f0d488}

/* ---------- the one calculation action -------------------------------- */
.hr-calc{position:relative;flex:none}
.hr-cta{text-decoration:none;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#231a0e;background:linear-gradient(115deg,#c39a3d,#f0d488 50%,#c39a3d);background-size:200% 100%;border:0;border-radius:60px;padding:12px 22px;min-height:42px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;box-shadow:0 0 32px rgba(216,176,76,.22),0 10px 26px -10px rgba(0,0,0,.55);transition:background-position .6s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.hr-cta:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 0 40px rgba(216,176,76,.34),0 14px 30px -10px rgba(0,0,0,.55)}


/* ---------- burger + drawer ------------------------------------------- */
.hr-burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:center;background:none;border:0;border-radius:50%;cursor:pointer;flex:none;color:#f3ecdc}
.hr-burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s}
.hr-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hr-burger.open span:nth-child(2){opacity:0}
.hr-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.hr-menu{position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);z-index:79;background:linear-gradient(180deg,rgba(19,22,30,.99),rgba(13,15,21,.99));border-left:1px solid rgba(216,176,76,.2);padding:96px clamp(20px,6vw,34px) 40px;display:flex;flex-direction:column;overflow-y:auto;transform:translateX(102%);transition:transform .34s cubic-bezier(.4,0,.2,1);visibility:hidden}
.hr-menu.open{transform:none;visibility:visible}
.hr-backdrop{position:fixed;inset:0;z-index:78;background:rgba(8,9,13,.7);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s ease}
.hr-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.hr-menu a{font-family:'Cormorant',Georgia,serif;font-size:30px;font-weight:500;line-height:1.1;text-decoration:none;color:#f3ecdc;padding:9px 0;display:flex;flex-direction:column;justify-content:center;min-height:52px}
.hr-menu a small{display:block;font:500 10px/1 'Manrope',system-ui,-apple-system,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#a89f92;margin-top:7px}
.hr-menu a[aria-current="page"]{color:#f0d488}
.hr-menu-sep{height:1px;background:rgba(216,176,76,.18);margin:16px 0 8px}
.hr-menu .hr-menu-cta{font-family:'Manrope',system-ui,-apple-system,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#231a0e;background:linear-gradient(115deg,#c39a3d,#f0d488 50%,#c39a3d);border-radius:60px;justify-content:center;align-items:center;flex-direction:row;text-align:center;min-height:50px;margin-top:10px;padding:0 20px}
body.hr-menu-locked{overflow:hidden}
.hr-nav a:focus-visible,.hr-cta:focus-visible,.hr-burger:focus-visible,.hr-menu a:focus-visible{outline:2px solid #f0d488;outline-offset:3px;border-radius:6px}

/* ---------- widths ----------------------------------------------------- */
/* eight destinations since 2026-10-22 (Разборы, Игра): the row is 1400 px wide, and between 1101 and 1400 px
   it tightens — smaller gaps and letter-spacing — so the account entry and the action never leave the screen */
@media(min-width:1101px) and (max-width:1400px){.hr-nav-wrap{gap:14px;padding-left:24px;padding-right:24px}.hr-links{gap:12px}.hr-links a,.hr-acct{font-size:9.5px;letter-spacing:.08em}.hr-acct{padding-left:14px}.hr-logo{font-size:18px;letter-spacing:.2em}.hr-cta{padding:12px 16px;letter-spacing:.1em}}
@media(max-width:1100px){
  .hr-links,.hr-acct{display:none}
  .hr-burger{display:flex}
  .hr-calc{margin-left:auto}
  .hr-nav-wrap{gap:12px;padding:12px 18px;min-height:64px}
  .hr-logo{font-size:17px;letter-spacing:.24em}
  .hr-logo-mark{height:28px;margin-right:9px}
  .hr-cta{font-size:10.5px;padding:11px 18px;letter-spacing:.12em}
}
@media(max-width:430px){
  .hr-nav-wrap{gap:8px;padding:10px 14px}
  .hr-logo{font-size:15px;letter-spacing:.18em}
  .hr-logo-mark{height:25px;margin-right:8px}
  .hr-cta{font-size:10px;padding:10px 14px;letter-spacing:.08em}
  .hr-menu a{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .hr-menu,.hr-backdrop,.hr-burger span,.hr-cta,.hr-nav::after{transition:none}
  .hr-cta:hover{transform:none}
}

/* ---------- baseline footer (production surfaces only) ----------------- */
.hr-footer{border-top:1px solid rgba(216,176,76,.14);background:rgba(9,9,12,.85);padding:46px 0 54px;position:relative;z-index:5}
/* on a preview page the footer is a warm dark ground (plum by default, a page may give its own through
   --hr-foot-ground) that fades in from the page above — never a near-black slab, readable on paper pages too */
.hr-footer--lab{background:var(--hr-foot-ground,linear-gradient(180deg,rgba(42,32,41,0) 0,#2a2029 42px,#1f181f 100%));border-top:0;margin-top:clamp(48px,8vh,96px)}
.hr-foot-wrap{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.hr-foot-brand .hr-logo{margin-bottom:12px}
.hr-foot-motto{color:#c9c5b4;font-family:'Manrope',-apple-system,sans-serif;font-size:13.5px;font-style:italic;line-height:1.5;margin:0 0 6px;max-width:34ch}
.hr-foot-copy{color:rgba(168,165,153,.6);font-family:'Manrope',-apple-system,sans-serif;font-size:12.5px;line-height:1.6;max-width:34ch}
.hr-foot-h{font-family:'Manrope',-apple-system,sans-serif;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#8f8d80;font-weight:700;margin-bottom:14px}
.hr-foot-col{display:flex;flex-direction:column;align-items:flex-start}
.hr-foot-col a{color:#a8a599;text-decoration:none;font-family:'Manrope',-apple-system,sans-serif;font-size:14px;padding:6px 0;display:inline-flex;align-items:center;min-height:44px;transition:color .3s}
.hr-foot-col a:hover{color:#f0d488}
.hr-foot-col a[aria-current="page"]{color:#f0d488}
.hr-footer a:focus-visible{outline:2px solid #f0d488;outline-offset:3px;border-radius:6px}
.hr-foot-sub{max-width:1180px;margin:26px auto 0;padding:18px 20px 0;border-top:1px dashed rgba(216,176,76,.15)}
.hr-foot-sub p{color:#a8a599;font-family:'Manrope',-apple-system,sans-serif;font-size:13.5px;line-height:1.7;max-width:74ch}
.hr-foot-sub a{color:#f0d488}
@media(max-width:900px){.hr-foot-wrap{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.hr-foot-wrap{grid-template-columns:1fr;gap:20px}}
@media(max-width:520px){.hr-footer--lab .hr-foot-wrap{grid-template-columns:1fr 1fr;gap:22px 18px}.hr-footer--lab .hr-foot-brand{grid-column:1/-1}.hr-footer--lab .hr-foot-col:last-child{grid-column:1/-1}}
/* the legal documents' row, present only once scripts/gen-nav.mjs LEGAL_LINKS_ENABLED is switched on */
.hr-foot-legal{max-width:1180px;margin:26px auto 0;padding:14px 20px 0;border-top:1px solid rgba(216,176,76,.12);display:flex;flex-wrap:wrap;gap:0 24px}
.hr-foot-legal a{color:#8f8d80;text-decoration:none;font-family:'Manrope',-apple-system,sans-serif;font-size:12.5px;display:inline-flex;align-items:center;min-height:44px;transition:color .3s}
.hr-foot-legal a:hover{color:#f0d488}


/* ---------- the way back to the visitor's chart (Library; /chart-return.js) ----------
   Painted over both Library palettes (night article shell, print paper): the
   text keeps the page's own colour, the gold is only the frame. */
.hr-chart-return{margin:0 0 22px;font-family:'Manrope',system-ui,sans-serif;font-size:14px;line-height:1.3}
.hr-chart-return a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid rgba(216,176,76,.6);border-radius:999px;background:rgba(216,176,76,.1);color:inherit;font-weight:600;text-decoration:none;letter-spacing:.01em}
.hr-chart-return a:hover,.hr-chart-return a:focus-visible{background:rgba(216,176,76,.2);border-color:#d8b04c}