hg-header,hg-footer{display:block;min-width:0}
/* Reserve the same border-box before and after the custom element upgrades. */
:root{--hg-header-height:88px}
hg-header{height:var(--hg-header-height);flex:none}
.hg-header{box-sizing:border-box}
.hg-header{position:relative;isolation:isolate;display:flex;align-items:center;gap:32px;height:var(--hg-header-height);padding:0 clamp(24px,3vw,96px);border-bottom:1px solid var(--hair);background:var(--paper);font:400 14px/1.4 var(--font-ui);overflow:hidden}
.hg-header .hg-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:25px;font-weight:650;letter-spacing:-1px;white-space:nowrap}
.hg-brand img{display:block;width:26px;height:26px}
.hg-header .hg-nav{display:flex;align-self:stretch;margin-left:auto;gap:0}
.hg-nav a{display:flex;align-items:center;padding:0 20px;border-bottom:2px solid transparent;color:var(--muted);opacity:1;text-decoration:none;font-size:17px;font-weight:650;letter-spacing:-.005em;white-space:nowrap}
.hg-nav a:hover{opacity:1}
.hg-nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--ink);opacity:1;font-weight:650}
.hg-demo{padding:5px 9px;font-size:var(--text-xs)}
.hg-footer{border-top:1px solid var(--hair);padding:10px clamp(24px,3vw,96px);color:var(--muted);font:400 var(--text-xs)/1.5 var(--font-ui);display:flex;align-items:center;justify-content:space-between;gap:12px 32px;background:var(--paper)}
.hg-footer p{margin:0}.hg-footer a{color:inherit;text-underline-offset:2px}.hg-source-note{max-width:32em}
.hg-header a:focus-visible,.hg-footer a:focus-visible{outline:2px solid var(--cool);outline-offset:-4px}
@media(max-width:820px){:root{--hg-header-height:106px}.hg-header{height:var(--hg-header-height);min-height:0;flex-wrap:wrap;gap:0 16px;padding:14px 24px 0}.hg-header .hg-brand{font-size:25px}.hg-demo{margin-left:auto}.hg-header .hg-nav{order:3;flex-basis:100%;height:44px;margin:4px 0 0;justify-content:space-between}.hg-nav a{padding:0 12px}.hg-nav a:first-child{padding-left:0}.hg-nav a:last-child{padding-right:0}.hg-footer{flex-direction:column;align-items:flex-start;gap:8px}}

/* A static crop of the home map: nested cool/sand/heat contours at every width. */
.hg-header::before{content:"";position:absolute;inset:0;pointer-events:none;background:url('./header-isotherms.svg') center center / cover no-repeat;opacity:.55}
.hg-header > *{position:relative;z-index:var(--z-furniture)}
.hg-header .hg-brand,.hg-header .hg-demo{background:var(--paper);box-shadow:0 0 12px 8px var(--paper)}
.hg-nav a{text-shadow:0 0 4px var(--paper),0 0 8px var(--paper),0 0 12px var(--paper)}
@media(max-width:820px){.hg-header::before{background-size:960px 100%;background-position:66% center;opacity:.30}}

/* Page-load furniture stays in viewport coordinates while content fills in. */
.hg-page-loading{
  position:fixed;inset:var(--hg-header-height) 0 0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--muted);
  opacity:1;transition:opacity 350ms ease;pointer-events:auto;
}
.hg-page-loading[data-exit]{opacity:0;pointer-events:none}
/* Fixed dimensions also reserve the mark/caption while its shadow CSS arrives. */
.hg-page-loading > hg-loader{
  display:block;width:320px;height:118px;text-align:center;
}
/* Font swaps must not move the navigation or badge within the reserved band. */
.hg-header .hg-brand{width:172px;flex:none}
.hg-header .hg-demo{box-sizing:border-box;width:104px;padding-left:4px;padding-right:4px;flex:none;text-align:center}
.hg-header .hg-nav a{box-sizing:border-box;width:112px;flex:none;justify-content:center}
.hg-header .hg-nav a:last-child{width:152px}
@media(max-width:820px){.hg-header .hg-nav a{width:auto;flex:1;justify-content:center}.hg-header .hg-nav a:first-child{justify-content:flex-start}.hg-header .hg-nav a:last-child{width:auto;justify-content:flex-end}}
@media print{.hg-page-loading{display:none!important}}
/* The page under the loading cover stays put (see shared/page-loading.js). */
html[data-loading]{overflow:hidden;overscroll-behavior:none}

/* Demo information stays in document flow, including the planner rail. */
.hg-footer { display:block; }
.hg-about summary { cursor:pointer; color:var(--ink); min-height:40px; padding:10px 0; line-height:20px; list-style:none; display:flex; align-items:center; gap:8px; }
.hg-about summary::-webkit-details-marker { display:none; }
.hg-about summary::after { content:'＋'; margin-left:4px; color:var(--muted); }
.hg-about[open] summary::after { content:'−'; }
.hg-about summary span { color:var(--muted); }
.hg-about-body { max-width:76em; padding:0 0 16px; }
.hg-about-body p + p { margin-top:8px; }
.hg-credits { display:flex; align-items:start; justify-content:space-between; gap:12px 32px; padding-top:8px; border-top:1px solid var(--hair); }
hg-footer[compact] { min-height:41px; }
hg-footer[compact] .hg-footer { padding-top:0; padding-bottom:0; }
@media(max-width:820px) {
  .hg-credits { flex-direction:column; gap:8px; }
}