/* THE WEBSITE'S CHROME: its header and footer, wherever a website page is served.
   Every selector here starts with .site- so the file can ride on the sample page, which also
   loads the app's stylesheet for its viewer (templates/sample.html).  Colors and the two
   typefaces come from /static/tokens.css.

   THE HEADER is one slim bar.  On the website's own pages (body.site) it stays at the top of
   the screen as the page scrolls -- CSS only, no script -- so the pages and the two account
   links are always in reach; on the sample it scrolls away and leaves the viewer the screen.
   THE FOOTER is a drawing's title block: ruled cells on the page's grid. */
.site-skip{position:absolute;left:12px;top:-80px;z-index:60;padding:12px 16px;border-radius:4px;
  background:var(--accent);color:var(--on-accent);font:600 16px/1.2 var(--font-ui);text-decoration:none}
.site-skip:focus{top:8px}

.site-header{position:relative;z-index:20;border-bottom:1px solid var(--line);background:var(--chrome);
  font:500 16px/1.2 var(--font-ui);color:var(--ink)}
body.site .site-header{position:sticky;top:0}
.site-header *,.site-footer *{box-sizing:border-box}
.site-header a{color:inherit;text-decoration:none}
.site-header a:focus-visible,.site-footer a:focus-visible,.site-header summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.site-bar{display:flex;align-items:stretch;gap:0 26px;max-width:1296px;margin-inline:auto;
  padding:0 28px;min-height:60px}
.site-bar>*{align-self:center}
.site-brand{display:inline-flex;align-items:center;gap:.5em;min-height:48px;
  font:700 21px/1 var(--font-display);letter-spacing:.1em;white-space:nowrap}
.site-brand svg{width:.72em;height:.72em;flex:none;fill:currentColor}
/* the pages: each link is as tall as the bar, so the mark of the current one sits on the bar's edge */
.site-bar>.site-nav{display:flex;gap:2px;margin-left:14px;align-self:stretch}
.site-nav a{display:inline-flex;align-items:center;padding:0 12px;color:var(--ink-2);white-space:nowrap;
  box-shadow:inset 0 -3px 0 transparent}
.site-nav a:hover{color:var(--ink);box-shadow:inset 0 -3px 0 var(--faint)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--accent)}
/* the two ways into the app: one is a link, the other the button */
.site-auth{display:flex;align-items:center;gap:6px;margin-left:auto}
.site-auth a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:9px;white-space:nowrap}
.site-auth a:hover{background:var(--hover)}
.site-header .site-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:9px;
  background:#e6edf7;color:#0a1320;font-weight:600;white-space:nowrap}
.site-header .site-cta:hover{background:#fff}

/* the menu: a <details>, so it opens with no script.  A sheet under the bar; the page behind
   it is dimmed, and a press there closes it (the dimmer is part of the <summary>). */
.site-menu{display:none;margin-left:auto}
.site-auth + .site-menu{margin-left:8px}
.site-menu summary{list-style:none;cursor:pointer;position:relative;width:48px;height:48px;border-radius:9px;
  border:1px solid var(--line)}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu summary span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .18s ease,opacity .12s ease}
.site-menu summary span:nth-child(1){top:16px}
.site-menu summary span:nth-child(2){top:23px}
.site-menu summary span:nth-child(3){top:30px}
.site-menu[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-menu[open] summary span:nth-child(2){opacity:0}
.site-menu[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-menu[open] summary::before{content:"";position:fixed;inset:60px 0 0 0;z-index:-1;background:rgba(3,8,15,.66);cursor:default}
.site-menu nav{position:absolute;right:28px;top:100%;z-index:30;width:320px;display:flex;
  flex-direction:column;padding:8px;border:1px solid var(--line);border-top:0;border-radius:0 0 9px 9px;background:var(--chrome);
  color:var(--ink);box-shadow:0 24px 48px var(--shadow)}
.site-menu nav>a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:6px;
  border-left:3px solid transparent}
.site-menu nav>a:hover{background:var(--hover)}
.site-menu nav>a[aria-current="page"]{color:var(--ink);font-weight:600;border-left-color:var(--accent);
  border-radius:0 6px 6px 0;background:var(--panel)}
.site-menu-acct{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.site-menu-acct a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:9px;font-weight:600}
.site-menu-acct a:first-child{box-shadow:inset 0 0 0 1px var(--faint)}
@media (prefers-reduced-motion:reduce){.site-menu summary span{transition:none}}

/* over the home page's photograph the bar is clear, and its colours are fixed (not the theme's).
   Where the browser can tie a style to the scroll position (no script), the same bar stays at
   the top and turns solid once the photograph has scrolled under it; elsewhere it stays with
   the photograph, as before. */
.site-header.site-header--over{position:absolute;inset:0 0 auto 0;border-bottom-color:transparent;color:#f6f4ef;
  background:linear-gradient(180deg,rgba(6,12,21,.72) 0%,rgba(6,12,21,.3) 70%,rgba(6,12,21,0) 100%)}
.site-header--over .site-nav a{color:#dfe6ef;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.site-header--over .site-nav a:hover,.site-header--over .site-auth a:hover{color:#fff}
.site-header--over .site-auth a:first-child{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.site-header--over .site-auth a:first-child:hover{background:rgba(246,244,239,.12)}
.site-header--over .site-menu summary{border-color:rgba(246,244,239,.4);background:rgba(6,12,21,.35)}
.site-header--over .site-menu summary span{background:#f6f4ef}
@supports (animation-timeline:scroll()){
  body.site .site-header.site-header--over{position:sticky;inset:0 auto auto auto;margin-bottom:-61px;
    animation:site-bar-solid linear both;animation-timeline:scroll(root block);animation-range:16px 104px}
}
@keyframes site-bar-solid{to{background-color:var(--chrome);border-bottom-color:var(--line)}}
/* under 1000px the photograph is a strip of its own below the words (site.css), so nothing is
   behind the bar: it is the plain solid bar there, at the top of the screen in every browser */
@media (max-width:1000px){
  body.site .site-header.site-header--over{position:sticky;inset:0 auto auto auto;margin-bottom:0;animation:none;
    background:var(--chrome);border-bottom-color:var(--line)}
  .site-header--over .site-menu summary{background:transparent;border-color:var(--line)}
}

@media (max-width:1080px){
  .site-bar>.site-nav{display:none}
  .site-menu{display:block}
  .site-header .site-cta{min-height:48px}
}
@media (max-width:760px){
  .site-bar{padding-inline:16px;min-height:56px}
  .site-brand{font-size:19px}
  .site-auth{display:none}
  .site-auth + .site-menu{margin-left:auto}
  .site-menu-acct{display:grid}
  .site-menu[open] summary::before{top:56px}
  .site-menu nav{position:fixed;left:0;right:0;top:56px;width:auto;max-height:calc(100vh - 56px);overflow-y:auto;
    padding:8px 16px 16px;border-inline:0;border-radius:0;border-bottom:1px solid var(--line)}
}

/* ---------- footer: the title block ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--chrome);color:var(--muted);
  font:400 16px/1.5 var(--font-ui);padding:clamp(28px,4vw,48px) 28px clamp(28px,4vw,44px)}
.site-footer a{color:var(--ink-2);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.site-tb{max-width:1240px;margin-inline:auto;border:1px solid var(--line)}
.site-foot{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,2fr) minmax(0,3fr)}
.site-foot--3{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}
.site-foot>*{padding:22px 24px 20px;border-left:1px solid var(--line);min-width:0}
.site-foot>*:first-child{border-left:0}
.site-footer .site-foot h2{margin:0 0 4px;font:500 14.5px/1.3 var(--font-ui);color:var(--muted);letter-spacing:0}
.site-foot ul{margin:0;padding:0;list-style:none}
.site-foot .site-foot-pages ul{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(3,auto);column-gap:20px}
.site-foot li a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink)}
.site-foot .site-brand{color:var(--ink)}
.site-footer .site-foot p{margin:4px 0 0;max-width:36ch}
.site-footer .site-foot p + p{margin-top:2px}
.site-legal{padding:14px 24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:4px 28px;justify-content:space-between;font-size:15px}
.site-legal strong{font-weight:500;color:var(--ink)}
.site-legal>*{text-wrap:balance}
@media (max-width:1000px){
  .site-foot,.site-foot--3{grid-template-columns:1fr 1fr}
  .site-foot>*:nth-child(odd){border-left:0}
  .site-foot>*:nth-child(n+3){border-top:1px solid var(--line)}
  .site-foot--3>*:last-child{grid-column:1 / -1}
}
@media (max-width:600px){
  .site-footer{padding-inline:16px}
  .site-foot,.site-foot--3{grid-template-columns:1fr}
  .site-foot>*{padding:18px 16px 14px;border-left:0}
  .site-foot>*:nth-child(n+2){border-top:1px solid var(--line)}
  .site-foot ul,.site-foot .site-foot-pages ul{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-template-rows:none;column-gap:12px}
  .site-foot li a{display:flex;min-height:48px}
  .site-foot li.site-foot-wide{grid-column:1 / -1}
  .site-legal{flex-direction:column;gap:6px;padding:16px}
}