/* The site's own pages (terms, privacy, copyright, support, not found). They use the device's own fonts (the privacy
   policy says so) and the landing page's colors and motion tokens. Reading layout: one column at a comfortable measure;
   from 1080 px the sections are listed beside it (pages.js), the one being read marked. */
:root{
  --ground:#0a0d12; --panel:#11151d; --line:#232b3a;
  --text:#e9edf4; --muted:#7e8aa0; --faint:#4a5468; --amber:#f5a83c; --amber-top:#f9b754; --ink:#14100a;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-travel:cubic-bezier(.77,0,.175,1);
  --d-tap:80ms; --d-quick:150ms; --d-base:250ms; --press:.97;
  --r:3px; --r-card:8px;
  --measure:40rem; --toc:13rem; --gx:16px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{--ground:#eef0f3; --panel:#ffffff; --line:#d4d9e0;
    --text:#141821; --muted:#5a6472; --faint:#9aa3af; --amber:#b8720a; --amber-top:#c98112; color-scheme:light}
}
@media (min-width:700px){ :root{--gx:32px} }
@media (prefers-reduced-motion:reduce){ :root{--press:1; --d-base:var(--d-quick)} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--ground); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
@media (min-width:700px){ body{font-size:17px} }
:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

/* frame: the mark home, the page, the footer, on one width */
.bar,.doc,.foot{max-width:calc(var(--toc) + 4.5rem + var(--measure) + 2 * var(--gx)); margin:0 auto; padding-inline:max(var(--gx),env(safe-area-inset-left,0px)) max(var(--gx),env(safe-area-inset-right,0px))}
.bar{padding-top:max(24px,env(safe-area-inset-top,0px))}
.home{display:inline-flex; border-radius:var(--r)}
.home svg{display:block; width:34px; height:27px}
@media (min-width:1080px){
  .doc{display:grid; grid-template-columns:var(--toc) minmax(0,var(--measure)); column-gap:4.5rem}
  .doc>main{grid-column:2; grid-row:1}
}

/* the text */
main{max-width:var(--measure); padding:48px 0 72px}
h1{font-size:clamp(30px,4.4vw,40px); line-height:1.12; letter-spacing:-.015em; font-weight:700; margin:0 0 10px; text-wrap:balance}
.date{color:var(--muted); font-size:15px; margin:0 0 36px}
h2{font-size:20px; line-height:1.3; letter-spacing:-.005em; font-weight:650; margin:48px 0 10px; text-wrap:balance; scroll-margin-top:24px}
p,ul,ol{margin:0 0 14px}
ul,ol{padding-left:22px}
li{margin-bottom:8px; padding-left:2px}
li::marker{color:var(--muted)}
strong,b{font-weight:600}
main a{color:var(--amber); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); border-radius:2px;
  transition:text-decoration-color var(--d-quick) var(--ease-out), color var(--d-quick) var(--ease-out)}
main a:hover{text-decoration-color:currentColor}
.short{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 16px 4px; margin:4px 0 8px}
.short ul{padding-left:18px}
@media (min-width:700px){ .short{padding:18px 22px 6px} .short ul{padding-left:20px} }
.lead{font-weight:600}

/* a link to each section, shown beside its heading under the pointer (pages.js) */
.anchor{display:inline-grid; place-items:center; width:24px; height:24px; margin-left:6px; vertical-align:-3px; border-radius:var(--r);
  color:var(--faint); opacity:0; text-decoration:none;
  transition:opacity var(--d-quick) var(--ease-out), color var(--d-quick) var(--ease-out)}
.anchor svg{width:15px; height:15px}
h2:hover .anchor,.anchor:focus-visible{opacity:1}
.anchor:hover{color:var(--amber)}
@media (hover:none){ .anchor{display:none} }

/* the sections, beside the text from 1080 px: sticky, the one being read in the text color with an amber bar that
   glides to it (travel easing, base). Built by pages.js; without it the column stays empty and nothing moves. */
.toc{display:none}
@media (min-width:1080px){
  .toc{display:block; grid-column:1; grid-row:1; align-self:start; position:sticky; top:32px; margin-top:52px;
    max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:6px 0 32px; scrollbar-width:none;
    animation:toc-in var(--d-quick) var(--ease-out) both}
  .toc::-webkit-scrollbar{display:none}
}
@keyframes toc-in{from{opacity:0}}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
.toc li{margin:0; padding:0}
.toc a{display:block; padding:5px 0 5px 14px; font-size:14px; line-height:1.4; color:var(--muted); text-decoration:none; border-radius:var(--r);
  transition:color var(--d-quick) var(--ease-out)}
.toc a:hover,.toc a[aria-current]{color:var(--text)}
.toc a:focus-visible{outline-offset:-2px}
.marker{position:absolute; left:0; top:0; width:2px; height:0; background:var(--amber); border-radius:1px; pointer-events:none}
.toc.ready .marker{transition:transform var(--d-base) var(--ease-travel), height var(--d-base) var(--ease-travel)}

/* footer */
.foot>div{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; padding:20px 0 calc(32px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); font-size:14px}
.foot a{color:var(--muted); text-decoration:none; border-radius:2px; transition:color var(--d-quick) var(--ease-out)}
.foot a:hover,.foot a[aria-current]{color:var(--text)}
.foot a[aria-current]{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.35em; text-decoration-color:var(--amber)}
@media (min-width:1080px){ .foot>div{margin-left:calc(var(--toc) + 4.5rem)} }

/* not found: the mark, one line, one way home */
.gone{min-height:100vh; min-height:100dvh; max-width:none; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:max(24px,env(safe-area-inset-top,0px)) var(--gx) max(10vh,env(safe-area-inset-bottom,0px))}
.gone svg{width:52px; height:41px; margin-bottom:28px}
.gone h1{margin:0 0 28px}
.gone p{margin:0}
.gone a{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:var(--r);
  background:var(--amber); color:var(--ink); font-size:16px; font-weight:600; text-decoration:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-quick) var(--ease-out), transform var(--d-tap) var(--ease-out)}
.gone a:active{transform:scale(var(--press))}
.gone a:focus-visible{outline-offset:3px}
@media (hover:hover){ .gone a:hover{background:var(--amber-top)} }