/* ═══════════════════════════════════════════════════════════════════════
   SOLOMONGRAPH — brand system
   Shared by index.html, docs.html and thanks.html so the three pages are
   one experience. Page-specific rules live in each page's <style> block.

   The reference is a car company that happens to make software: graphite,
   machined hairlines, one signal colour, spec-sheet typography. Nothing
   decorative that is not also functional.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ---- ground ---- */
  --void:#08090A;          /* page */
  --shell:#0D0E10;         /* raised surface */
  --shell-2:#131416;       /* card, code well */
  --shell-3:#191A1D;       /* hover, active cell */

  /* ---- hairlines ---- */
  --hair:#1F2124;
  --hair-2:#2B2E32;
  --hair-3:#3A3E44;

  /* ---- ink ---- */
  --bone:#F2F2F0;          /* primary text, warm white */
  --steel:#A6AAB0;         /* secondary */
  --slate:#7C8189;         /* tertiary, labels — 4.8:1 on void */

  /* ---- the one accent ---- */
  --signal:#D5121F;
  --signal-hi:#F0212E;
  --signal-dim:rgba(213,18,31,.14);

  /* ---- type ---- */
  --display:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ---- metrics ---- */
  --gut:clamp(1.25rem,4vw,3rem);
  --stack:clamp(4.5rem,9vw,8rem);
  --max:78rem;
  --bar:3.75rem;           /* nav height */
  --ease:cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 1.5rem)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.35vw + .92rem,1.09rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* clip rather than hidden: hidden would make body a scroll container and
   break every position:sticky inside it. */
html,body{overflow-x:clip}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--signal-hi);outline-offset:3px;border-radius:1px}

/* ───────────────────────── layout ───────────────────────── */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:96rem;margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:var(--stack);position:relative}
.rule{border:0;border-top:1px solid var(--hair);margin:0}

/* A section opens with a hairline carrying a short signal tick — the one
   piece of ornament, and it doubles as a scroll landmark. */
.tick{position:relative;border-top:1px solid var(--hair);padding-top:2.25rem}
.tick::before{
  content:"";position:absolute;top:-1px;left:0;width:3.25rem;height:2px;
  background:var(--signal);
}

/* ───────────────────────── type ───────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:112%;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,5.5vw,4.65rem);font-weight:800;letter-spacing:-.038em;line-height:.95}
h2{font-size:clamp(1.85rem,3.9vw,3.05rem);line-height:1.04}
h3{font-size:clamp(1.1rem,1vw + .85rem,1.35rem);font-stretch:106%;letter-spacing:-.02em;line-height:1.2}
h4{font-size:1rem;font-stretch:104%;letter-spacing:-.01em}

p{margin:0 0 1.1rem;max-width:62ch}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--bone)}

.lede{
  font-size:clamp(1.08rem,.7vw + .95rem,1.32rem);
  line-height:1.5;color:var(--steel);max-width:54ch;
}
.lede strong{color:var(--bone);font-weight:500}

/* Mono spec label. Used sparingly — this is not a subtitle. */
.spec{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
  margin:0 0 1.25rem;
}
.spec--signal{color:var(--signal-hi)}

.mono{font-family:var(--mono)}
/* inline code in prose: tinted, not boxed */
:where(p,li,td,cite) code{font-family:var(--mono);font-size:.88em;color:#8FB4D9}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ───────────────────────── controls ───────────────────────── */
.btn{
  --btn-bg:transparent;--btn-fg:var(--bone);--btn-line:var(--hair-2);
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:700;font-stretch:106%;
  font-size:.9rem;letter-spacing:.01em;
  padding:.9rem 1.5rem;border:1px solid var(--btn-line);
  background:var(--btn-bg);color:var(--btn-fg);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{--btn-bg:var(--signal);--btn-fg:#fff;--btn-line:var(--signal)}
.btn--primary:hover{--btn-bg:var(--signal-hi);--btn-line:var(--signal-hi)}
.btn--ghost:hover{--btn-line:var(--hair-3);--btn-bg:var(--shell-2)}
.btn--sm{padding:.55rem 1rem;font-size:.8rem}
.btn .arrow{
  width:.7rem;height:.7rem;border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;transform:rotate(45deg);
  transition:transform .18s var(--ease);flex:none;
}
.btn:hover .arrow{transform:rotate(45deg) translate(2px,-2px)}

.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.actions .fine{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;
  color:var(--slate);padding-left:.4rem;
}

/* ───────────────────────── nav ───────────────────────── */
.masthead{
  position:sticky;top:0;z-index:80;
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.masthead.is-stuck{
  background:rgba(8,9,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--hair);
}
.masthead .bar{
  height:var(--bar);display:flex;align-items:center;gap:2rem;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
}
.wordmark{
  display:inline-flex;align-items:center;gap:.62rem;text-decoration:none;
  color:var(--bone);flex:none;
}
.wordmark svg{width:1.35rem;height:1.35rem;flex:none}
.wordmark b{
  font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:.83rem;letter-spacing:.17em;text-transform:uppercase;
}
.masthead nav{
  display:flex;align-items:center;gap:1.75rem;margin-left:auto;
  font-size:.86rem;
}
.masthead nav a{
  color:var(--steel);text-decoration:none;position:relative;padding-block:.25rem;
  transition:color .18s var(--ease);
}
.masthead nav a:hover{color:var(--bone)}
.masthead nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.masthead nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav-toggle{display:none}
@media(max-width:860px){
  /* Section links go; the documentation link stays, because on this
     product the manual is part of the sale. */
  .masthead nav a:not(.btn):not(.keep){display:none}
  .masthead nav{gap:1rem}
  .masthead nav a.keep{font-size:.82rem}
}
@media(max-width:400px){.masthead nav a.keep{display:none}}

/* scroll telemetry */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;
  transform:scaleX(var(--p,0));transform-origin:left;
  background:var(--signal);pointer-events:none;
}

/* ───────────────────────── surfaces ───────────────────────── */
.panel{background:var(--shell);border:1px solid var(--hair)}
.well{
  background:var(--shell-2);border:1px solid var(--hair);
  font-family:var(--mono);font-size:.795rem;line-height:1.72;
  padding:1.15rem 1.25rem;overflow-x:auto;margin:0;color:var(--bone);
  -webkit-overflow-scrolling:touch;
}
.well code{font-family:inherit}
pre{margin:0}
.t-key{color:#8FB4D9}      /* keys, keywords */
.t-str{color:#E2A45C}      /* strings */
.t-com{color:#666B72}      /* comments */
.t-hit{color:var(--signal-hi)}

/* Ledger: a label column and a prose column, ruled. Used instead of
   card grids so the page reads like a technical document. */
.ledger{border-top:1px solid var(--hair)}
.ledger-row{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.5rem 3rem;padding-block:1.65rem;border-bottom:1px solid var(--hair);
  transition:background .2s var(--ease);
}
.ledger-row:hover{background:var(--shell)}
.ledger-row p{margin:0;color:var(--steel);font-size:.97rem}
.ledger-row .k{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);padding-top:.35rem;
}
@media(max-width:760px){
  .ledger-row{grid-template-columns:1fr;gap:.6rem}
  .ledger-row .k{padding-top:0}
}

/* Spec strip: the technical-data band under a hero. */
.strip{
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.strip div{
  padding:1.5rem;border-left:1px solid var(--hair);
}
.strip div:first-child{border-left:0;padding-left:0}
.strip dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin:0 0 .45rem;
}
.strip dd{
  margin:0;font-family:var(--display);font-weight:700;font-stretch:108%;
  font-size:clamp(.98rem,1.1vw,1.15rem);letter-spacing:-.015em;line-height:1.25;
}
@media(max-width:820px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(3){border-left:0}
  .strip div:nth-child(n+3){border-top:1px solid var(--hair)}
}

/* ───────────────────────── image placeholders ───────────────────────── */
/* Deliberate, labelled slots. Replace the whole .plate with an <img>. */
.plate{
  position:relative;background:var(--shell);
  border:1px solid var(--hair);
  display:grid;place-items:center;overflow:hidden;
  aspect-ratio:16/9;
}
.plate::before,.plate::after{
  content:"";position:absolute;inset:.75rem;pointer-events:none;
  border:1px dashed var(--hair-2);
}
.plate::after{
  inset:auto .75rem .75rem;height:0;border:0;border-top:1px solid var(--signal);
  width:2.5rem;
}
.plate-label{
  position:relative;text-align:center;padding:1.5rem;max-width:34rem;
  font-family:var(--mono);font-size:.74rem;line-height:1.85;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
}
.plate-label b{display:block;color:var(--signal-hi);font-weight:500;letter-spacing:.16em;
  margin-bottom:.5rem}
.plate-label span{text-transform:none;letter-spacing:.01em;color:var(--slate);
  display:block;margin-top:.5rem;font-size:.72rem}
.plate--tall{aspect-ratio:4/5}
.plate--wide{aspect-ratio:21/9}

/* ───────────────────────── scroll behaviour ───────────────────────── */
[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 70ms);
}
[data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}
.parallax{will-change:transform}

/* ───────────────────────── footer ───────────────────────── */
.colophon{border-top:1px solid var(--hair);padding-block:3.25rem 2.5rem}
.colophon .grid{
  display:grid;gap:2.5rem;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
}
@media(max-width:820px){.colophon .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.colophon .grid{grid-template-columns:1fr}}
.colophon h5{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin:0 0 1rem;
}
.colophon ul{list-style:none;margin:0;padding:0;font-size:.88rem}
.colophon li{margin-bottom:.55rem}
.colophon a{color:var(--steel);text-decoration:none;transition:color .16s var(--ease)}
.colophon a:hover{color:var(--bone)}
.colophon .base{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--slate);
}

/* ───────────────────────── webgl canvas ───────────────────────── */
.flow{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.flow.is-live{opacity:1}
.flow-host{position:relative;isolation:isolate}
.flow-host > :not(.flow):not(.flow-fallback){position:relative;z-index:1}
/* Scrim. The streamlines are atmosphere, not content — they get quieter
   under the text column and louder in the empty right-hand air. */
.flow-host::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(8,9,10,.96) 4%,rgba(8,9,10,.74) 28%,
                    rgba(8,9,10,.30) 58%,rgba(8,9,10,.02) 88%),
    linear-gradient(to bottom,var(--void),rgba(8,9,10,0) 18%,
                    rgba(8,9,10,0) 74%,var(--void));
}
/* If WebGL is unavailable the shader never paints, so the ground below
   still has to carry the section on its own. */
.flow-fallback{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at 78% 30%,rgba(213,18,31,.10),transparent 60%),
    radial-gradient(90% 70% at 20% 90%,rgba(120,140,170,.07),transparent 65%);
}