/* The shared chrome on every page (src/partials/header.html and footer.html) and the cover-page primitive.
   Loaded after site.css and before any page stylesheet. Every selector here is rooted at .skip, .site-top,
   .site-nav, .site-menu, .site-foot or .cover, so no page class can collide with it.

   A page gives the chrome its own identity by setting these tokens on body[data-page="<slug>"] in its own
   stylesheet (the defaults below are the Lunar look):
     --chrome-bg          header background (translucent; the header is sticky and sits over a cover)
     --chrome-menu-bg     the open phone menu's background (opaque: large type shows through any translucency)
     --chrome-fg          text and the current page
     --chrome-dim         links and secondary text (keep 4.5:1 or better on the page background)
     --chrome-line        header and footer rules
     --chrome-accent      the "Talk to us" button, the current-page marker and the focus ring
     --chrome-on-accent   text on the accent
     --chrome-mark        the Lunar half-moon
     --chrome-font        the chrome's type
     --chrome-radius      button and focus-ring corners (0 for square brands)
     --chrome-rule        an optional band under the header (a colour or gradient) ...
     --chrome-rule-h      ... its height (0, so no band, by default) ...
     --chrome-rule-opacity ... and its opacity
     --chrome-h           header height (60px). Set it on :root as well if you change it, so jumps to an anchor
                          stop below the sticky header.
     --chrome-max, --chrome-gutter  content width and side padding (default: the page's --gutter). */
:root{
  --chrome-h:60px;
  --chrome-bg:rgba(10,13,18,.74);
  --chrome-menu-bg:#0a0d12;
  --chrome-fg:#e3e9f0;
  --chrome-dim:#9aa6b5;
  --chrome-line:#1e2833;
  --chrome-accent:#cfdcef;
  --chrome-on-accent:#0a0d12;
  --chrome-mark:#cfdcef;
  --chrome-font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --chrome-radius:6px;
  --chrome-rule:transparent;
  --chrome-rule-h:0px;
  --chrome-rule-opacity:1;
  --chrome-max:1200px;
}
html{scroll-padding-top:calc(var(--chrome-h) + 12px)}

/* skip link: off screen until it has focus */
.skip{position:fixed;left:12px;top:-120px;z-index:100;padding:12px 16px;background:var(--chrome-accent);color:var(--chrome-on-accent);font:600 14px/1 var(--chrome-font);border-radius:var(--chrome-radius);text-decoration:none}
.skip:focus{top:12px;color:var(--chrome-on-accent)}
.skip:focus-visible{outline:2px solid var(--chrome-fg);outline-offset:2px}

/* header: sticky and translucent; over a cover (the first thing in <main>) it takes no space of its own */
.site-top{position:sticky;top:0;z-index:50;box-sizing:border-box;height:var(--chrome-h);background:var(--chrome-bg);border-bottom:1px solid var(--chrome-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--chrome-font);color:var(--chrome-fg)}
body:has(#main > .cover:first-child) .site-top{margin-bottom:calc(-1 * var(--chrome-h))}
.site-top::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--chrome-rule-h);background:var(--chrome-rule);opacity:var(--chrome-rule-opacity);pointer-events:none}
.site-top .site-in{height:100%;max-width:var(--chrome-max);margin:0 auto;padding-inline:var(--chrome-gutter,var(--gutter,28px));display:flex;align-items:center;gap:36px}
.site-top a{color:var(--chrome-dim);text-decoration:none}
.site-top a:hover{color:var(--chrome-fg)}
.site-top :focus-visible,.site-foot :focus-visible{outline:2px solid var(--chrome-accent);outline-offset:3px;border-radius:var(--chrome-radius)}
.site-top .site-brand{display:flex;align-items:center;gap:10px;color:var(--chrome-fg);white-space:nowrap;font-size:17px;letter-spacing:-.01em}
.site-top .site-brand:hover{color:var(--chrome-fg)}
.site-top .site-word b{font-weight:600}
.site-top .site-word span{font-weight:400;color:var(--chrome-dim)}
.site-top .site-moon,.site-foot .site-moon{position:relative;flex:none;box-sizing:border-box;width:18px;height:18px;border:1.5px solid var(--chrome-mark);border-radius:50%;overflow:hidden}
.site-top .site-moon::after,.site-foot .site-moon::after{content:"";position:absolute;top:0;right:0;bottom:0;width:50%;background:var(--chrome-mark)}
.site-nav{display:flex;gap:26px;font-size:14px}
.site-nav a{padding-block:6px;border-bottom:1px solid transparent}
.site-nav a[aria-current="page"]{color:var(--chrome-fg);border-bottom-color:var(--chrome-accent)}
.site-top .site-acts{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px}
.site-top .site-cta{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:var(--chrome-radius);background:var(--chrome-accent);color:var(--chrome-on-accent);font-weight:600;white-space:nowrap}
.site-top .site-cta:hover{color:var(--chrome-on-accent);filter:brightness(1.1)}

/* phone and tablet menu: a <details>, so it opens without JavaScript and from the keyboard */
.site-menu{display:none;margin-left:auto}
.site-menu > summary{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 12px;list-style:none;cursor:pointer;border:1px solid var(--chrome-line);border-radius:var(--chrome-radius);color:var(--chrome-fg);font-size:14px;font-weight:500;-webkit-user-select:none;user-select:none}
.site-menu > summary::-webkit-details-marker{display:none}
.site-menu > summary::after{content:"";width:14px;height:10px;background:linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
.site-menu[open] > summary{border-color:var(--chrome-dim)}
.site-menu[open] > summary::after{background:linear-gradient(45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%);width:12px;height:12px}
.site-menu .site-menu-panel{position:absolute;left:0;right:0;top:100%;box-sizing:border-box;max-height:calc(100vh - var(--chrome-h));overflow-y:auto;padding:4px var(--chrome-gutter,var(--gutter,28px)) 20px;background:var(--chrome-menu-bg);border-bottom:1px solid var(--chrome-line)}
.site-menu nav{display:flex;flex-direction:column;margin-bottom:16px}
.site-menu nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--chrome-line);color:var(--chrome-fg);font-size:16px}
.site-menu nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--chrome-accent);padding-left:12px}
.site-menu .site-cta{display:flex;height:44px}
@media (max-width:1060px){
  .site-nav,.site-top .site-acts{display:none}
  .site-menu{display:block}
}
@media (max-width:560px){
  .site-top .site-in{gap:14px}
}

/* footer */
.site-foot{border-top:1px solid var(--chrome-line);font-family:var(--chrome-font);font-size:13px;color:var(--chrome-dim)}
.site-foot .site-in{max-width:var(--chrome-max);margin:0 auto;padding:24px var(--chrome-gutter,var(--gutter,28px)) 36px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.site-foot p{margin:0}
.site-foot .site-co{display:flex;align-items:center;gap:8px}
.site-foot .site-moon{width:14px;height:14px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.site-foot a{display:inline-block;padding-block:4px;color:var(--chrome-fg);text-decoration:none}
.site-foot a:hover{color:var(--chrome-accent)}
.site-foot a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--chrome-accent)}
.site-foot .site-mail{margin-left:auto}
.site-foot .site-mail a{overflow-wrap:anywhere}
@media (max-width:820px){
  .site-foot .site-mail{margin-left:0;flex-basis:100%}
}

/* cover: a full-bleed first section with its own background layer. The header sits over it, so it pads its top
   by the header height. Markup:
     <main id="main"><section class="cover" aria-labelledby="…">
       <div class="cover-bg" aria-hidden="true"><canvas></canvas></div>
       <div class="cover-inner">…</div>
     </section>…</main> */
.cover{position:relative;isolation:isolate;box-sizing:border-box;width:100%;min-height:100vh;min-height:min(100vh,920px);min-height:min(100svh,920px);padding-top:var(--chrome-h);display:flex;flex-direction:column;justify-content:center;overflow-x:clip}
.cover-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cover-bg > canvas,.cover-bg > svg,.cover-bg > img{display:block;width:100%;height:100%}
.cover-bg > img{object-fit:cover}
.cover-inner{position:relative;box-sizing:border-box;width:100%;min-width:0;max-width:calc(var(--chrome-max) + 2 * var(--gutter,28px));margin-inline:auto;padding-inline:var(--gutter,28px)}