/* Open Note — site/css/base.css
   the desk the site is laid out on: tokens, type, materials, chrome.

   The site wears the app's own four themes. Every colour below is lifted
   straight from the app's stylesheet, so a visitor flipping the theme dots is
   seeing the real presets — the site is drawn in the book's own inks. */

/* ---------- the themes (the app's, verbatim) ---------- */
:root, html[data-theme="graph"]{
  --desk:#2a2e33; --paper:#e9e6dd; --ink:#191f24; --soft:#6b7076;
  --line:#c3cbc6; --accent:#cf3a24; --accent2:#2b7d8c; --edge:#cfc9bd;
  --tape:rgba(210,200,175,.72);
  --deskink:#e4e1d8;            /* writing on the desk itself */
  --stickypaper:#f6e9a8;        /* the yellow sticky */
  --cardpaper:#f4f1e6;          /* an index card, a photo mount */
}
html[data-theme="dark"]{
  --desk:#0f1114; --paper:#262a2f; --ink:#e9e6df; --soft:#9aa0a6;
  --line:#3a4046; --accent:#e0653f; --accent2:#58b3c0; --edge:#1c2024;
  --tape:rgba(255,255,255,.10);
  --deskink:#e6e3db; --stickypaper:#4a4636; --cardpaper:#2e3338;
}
html[data-theme="blue"]{
  --desk:#08131f; --paper:#14304d; --ink:#e6f1fb; --soft:#93b4cf;
  --line:#2b5a80; --accent:#f2b544; --accent2:#7fd3ff; --edge:#0d2438;
  --tape:rgba(255,255,255,.12);
  --deskink:#dceaf5; --stickypaper:#274a63; --cardpaper:#1b3a58;
}
html[data-theme="kraft"]{
  --desk:#3a3128; --paper:#d9c39a; --ink:#2c2318; --soft:#7a6a52;
  --line:#c0aa80; --accent:#b83a1d; --accent2:#33656b; --edge:#c2ab80;
  --tape:rgba(255,255,255,.28);
  --deskink:#e9deca; --stickypaper:#e5d18f; --cardpaper:#e2d2ad;
}
:root{
  --desksoft:color-mix(in srgb, var(--deskink) 58%, transparent);
  --deskline:color-mix(in srgb, var(--deskink) 14%, transparent);
  --disp:'Barlow Condensed','Arial Narrow','Helvetica Neue',Impact,sans-serif;
  --body:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1120px;
  --navh:58px;
  /* one pencil, drawn once — the cursor over anything you can draw on */
  --pencil-cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M4.5 21.5l1-4L17 6a2 2 0 0 1 3 3L8.5 20.5l-4 1z" fill="%23f0ede4" stroke="%23191f24" stroke-width="1.4" stroke-linejoin="round"/></svg>') 3 23, crosshair;
}

/* ---------- reset & ground ---------- */
*{box-sizing:border-box}
html{background:var(--desk);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--desk);color:var(--deskink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:color-mix(in srgb, var(--accent) 30%, transparent)}
[hidden]{display:none !important}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:700;text-wrap:balance}
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--desksoft);
}
.kicker b{color:var(--accent);font-weight:500}
h1{font-size:clamp(3.4rem,9.5vw,7rem);line-height:.94;letter-spacing:.005em;text-transform:uppercase}
h2{font-size:clamp(2.3rem,5vw,3.7rem);line-height:.98;letter-spacing:.008em;text-transform:uppercase;color:var(--deskink)}
h3{font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase}
.lede{font-size:1.12rem;line-height:1.65;color:var(--desksoft);max-width:62ch;text-wrap:pretty}
.lede strong,.copy strong{color:var(--deskink);font-weight:600}
.copy p{max-width:62ch;color:var(--desksoft);text-wrap:pretty}
.copy p strong{font-weight:600}
small,.fine{font-size:.82rem}

/* ---------- buttons (the app's, grown up for a website) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:13px 20px;border:1px solid color-mix(in srgb, var(--deskink) 26%, transparent);
  border-radius:3px;color:var(--deskink);
  transition:transform .1s ease-out, border-color .15s, background-color .15s, color .15s;
}
.btn:hover{border-color:var(--accent);color:var(--deskink)}
.btn:active{transform:scale(.965)}      /* feedback lives on the press */
.btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 34%, transparent);
}
.btn.primary:hover{background:color-mix(in srgb, var(--accent) 88%, #000)}
.btn.ghost{border-color:transparent;color:var(--desksoft)}
.btn.ghost:hover{color:var(--deskink);border-color:var(--deskline)}
.btn .ic{width:15px;height:15px;flex:none}

/* small square tool buttons that live on demos */
.tbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:7px 10px;border-radius:3px;color:var(--deskink);
  border:1px solid color-mix(in srgb, var(--deskink) 20%, transparent);
  transition:transform .1s ease-out, border-color .15s, background-color .15s;
}
.tbtn:hover{border-color:var(--accent)}
.tbtn:active{transform:scale(.94)}
.tbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- the glass material (from js/ui/glass.js) ---------- */
.glass{
  color:var(--deskink);border-radius:14px;
  background:
    linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 70%),
    color-mix(in srgb, var(--desk) 46%, rgb(12 14 19 / .84));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1.5px 0 rgba(255,255,255,.12),
    0 26px 68px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
}
@supports not (backdrop-filter: blur(1px)){
  .glass{background:color-mix(in srgb, var(--desk) 55%, #14171c)}
}
@media (prefers-reduced-transparency: reduce){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:color-mix(in srgb, var(--desk) 55%, #14171c)}
}

/* ---------- paper (the sheet, straight out of the app) ---------- */
.paper{
  position:relative;background:var(--paper);color:var(--ink);
  border-radius:2px 6px 6px 2px;
  box-shadow:0 22px 50px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.25);
}
.paper.grid{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px;
}
.paper.ruled{
  background-image:linear-gradient(var(--line) 1px,transparent 1px);
  background-size:100% 34px;background-position:0 40px;
}
.paper.dots{
  background-image:radial-gradient(var(--line) 1.2px,transparent 1.3px);
  background-size:24px 24px;
}
/* the gutter shadow down the bound edge, and the dashed margin line */
.paper.leaf::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:34px;z-index:1;pointer-events:none;
  border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(0,0,0,.05) 55%,transparent);
}
.paper.leaf::after{
  content:"";position:absolute;left:16px;top:24px;bottom:24px;width:0;z-index:1;pointer-events:none;
  border-left:1px dashed rgba(0,0,0,.28);
}
html[data-theme="dark"] .paper.leaf::after,
html[data-theme="blue"] .paper.leaf::after{border-color:rgba(255,255,255,.20)}
.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5;mix-blend-mode:multiply;border-radius:inherit;z-index:0}
html[data-theme="dark"] .grain,html[data-theme="blue"] .grain{mix-blend-mode:overlay;opacity:.35}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap),calc(100% - 48px));margin:0 auto}
/* only the page's own top-level sections — the vendored app widgets use
   <section> inside their panels too (the circuit's component rail) */
main > section{padding:clamp(76px,11vh,132px) 0;scroll-margin-top:calc(var(--navh) + 12px)}
.sechead{max-width:760px;margin-bottom:clamp(34px,5vh,56px)}
.sechead .kicker{display:block;margin-bottom:14px}
.sechead h2{margin-bottom:18px}
.split{display:grid;grid-template-columns:minmax(300px,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(300px,5fr)}
.split.rev .copy{order:2}
@media (max-width:900px){
  .split,.split.rev{grid-template-columns:1fr}
  .split.rev .copy{order:0}
}

/* ---------- scroll reveal (only once JS is there to run it) ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{transform:none;transition:opacity .35s ease}
}

/* ---------- top nav: a translucent layer the desk scrolls under ---------- */
.topnav{
  position:fixed;inset:0 0 auto 0;z-index:90;height:var(--navh);
  display:flex;align-items:center;
}
/* the material fades out below the bar instead of ending on a 1px rule */
.topnav::before{
  content:"";position:absolute;inset:0 0 -18px 0;pointer-events:none;
  background:color-mix(in srgb, var(--desk) 72%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 18px),transparent);
  opacity:0;transition:opacity .25s ease;
}
.topnav.scrolled::before{opacity:1}
@media (prefers-reduced-transparency: reduce){
  .topnav::before{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--desk);-webkit-mask-image:none;mask-image:none;
    border-bottom:1px solid var(--deskline)}
}
.topnav .wrap{display:flex;align-items:center;gap:20px;position:relative}
.wordmark{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--deskink);opacity:.9;
  display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.wordmark:hover{opacity:1}
.wordmark .logomark{width:20px;height:20px;border-radius:5px;flex:none;
  box-shadow:0 1px 4px rgba(0,0,0,.35)}
.navlinks{display:flex;gap:2px;margin-left:auto}
.navlinks a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--desksoft);padding:8px 11px;border-radius:3px;
  transition:color .15s, background-color .15s;
}
.navlinks a:hover{color:var(--deskink);background:color-mix(in srgb, var(--deskink) 8%, transparent)}
.topnav .btn{padding:9px 14px}
.navside{display:flex;align-items:center;gap:13px;margin-left:8px}

/* the repository, one hop away */
.ghlink{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  color:var(--desksoft);transition:color .15s, background-color .15s}
.ghlink svg{width:17px;height:17px}
.ghlink:hover{color:var(--deskink);background:color-mix(in srgb, var(--deskink) 8%, transparent)}

/* theme dots — the four presets as little paper chips */
.themedots{display:flex;gap:7px;align-items:center}
.themedots button{
  width:19px;height:19px;border-radius:5px;position:relative;flex:none;
  border:1px solid rgba(255,255,255,.22);
  transition:transform .12s ease-out, box-shadow .15s;
}
.themedots button:hover{transform:scale(1.15)}
.themedots button:active{transform:scale(.95)}
.themedots button.on{box-shadow:0 0 0 2px var(--desk),0 0 0 3.5px var(--accent)}
.themedots [data-set="graph"]{background:linear-gradient(135deg,#e9e6dd 55%,#cf3a24 55%)}
.themedots [data-set="dark"]{background:linear-gradient(135deg,#262a2f 55%,#e0653f 55%)}
.themedots [data-set="blue"]{background:linear-gradient(135deg,#14304d 55%,#f2b544 55%)}
.themedots [data-set="kraft"]{background:linear-gradient(135deg,#d9c39a 55%,#b83a1d 55%)}

/* burger — mobile only */
.burger{display:none;width:38px;height:38px;border-radius:8px;place-items:center;color:var(--deskink)}
.burger svg{width:20px;height:20px}
@media (max-width:960px){
  .navlinks{display:none}
  .burger{display:grid}
  .topnav .themedots{display:none}
  .topnav .ghlink{display:none}
}

/* ---------- the menu sheet (mobile) — a real sheet you can throw away ---------- */
.scrim{position:fixed;inset:0;z-index:95;background:rgba(8,10,12,.55);
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:96;border-radius:18px 18px 0 0;
  padding:10px 22px calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateY(105%);touch-action:none;will-change:transform;
}
.sheet .grab{width:40px;height:5px;border-radius:3px;margin:4px auto 14px;
  background:color-mix(in srgb, var(--deskink) 30%, transparent)}
.sheet nav{display:grid;gap:2px}
.sheet nav a{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--deskink);padding:13px 10px;border-radius:8px;
}
.sheet nav a:active{background:color-mix(in srgb, var(--deskink) 10%, transparent)}
.sheet .sheetfoot{display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding:14px 10px 0;border-top:1px solid var(--deskline)}

/* ---------- footer ---------- */
footer{padding:56px 0 44px;border-top:1px solid var(--deskline)}
footer .cols{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
footer .fine{color:var(--desksoft);font-family:var(--mono);font-size:11px;letter-spacing:.08em}
footer nav{display:flex;flex-wrap:wrap;gap:16px}
footer nav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--desksoft);text-decoration:none}
footer nav a:hover{color:var(--deskink)}