/* ------------------------------------------------------------------ docs
   Shared by /method and /guide. The tokens, base type, header and footer are
   the landing page's own, copied rather than extracted: index.html keeps its
   styles inline so the hero can be tuned without a second file in play, and a
   change to these two long-form pages should not be able to move it. Keep the
   first block in step with the top of index.html. */
:root{
  --bg:#0a0a0a; --bg-2:#0d0d0d; --card:#121212;
  --line:#1a1a1a; --line-2:#2a2a2a;
  --ink:#f2f0eb; --ink-2:#aaaaaa; --muted:#888888; --dim:#7a7a7a;
  --accent:#f2f0eb;
  --new-bg:rgba(91,141,255,.22); --new-line:rgba(91,141,255,.7);
  --l1:rgba(255,196,60,.42); --l2:rgba(255,196,60,.30);
  --l3:rgba(255,196,60,.19); --l4:rgba(255,196,60,.10);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font:300 16.5px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:300;
  line-height:1.05; letter-spacing:-.02em; color:var(--ink);
}
h1{font-size:clamp(2.6rem,6.5vw,5rem); max-width:18ch}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:26ch}
h3{margin:2.2rem 0 .7rem; font:500 1.08rem/1.4 var(--sans); letter-spacing:-.01em; color:var(--ink)}
p{margin:0}
b,strong{color:var(--ink); font-weight:500}
em{color:var(--ink)}
a{color:var(--accent); text-decoration:none}
p a,li a,td a{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:.22em}
p a:hover,li a:hover,td a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:1px solid var(--accent); outline-offset:3px}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
@media (max-width:640px){ .wrap{padding:0 18px} }

/* ------------------------------------------------------------------ header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:28px; min-height:78px}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.05rem; letter-spacing:-.01em; color:var(--ink); opacity:.75;
}
.brand:hover{opacity:1; text-decoration:none}
.brand .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none}
nav{margin-left:auto; display:flex; align-items:center; gap:26px}
nav a:not(.btn){
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font:400 .62rem/1 var(--mono); text-transform:uppercase; letter-spacing:.22em;
  color:var(--muted);
}
nav a:not(.btn)::before{content:""; width:5px; height:5px; border-radius:50%; border:1px solid #444}
nav a:not(.btn)::after{content:""; width:100%; min-width:80px; height:1px; background:#2a2a2a}
nav a:not(.btn):hover{color:var(--ink); text-decoration:none}
nav a:not(.btn):hover::before{background:var(--ink); border-color:var(--ink)}
nav a:not(.btn):hover::after{background:var(--ink)}
/* The page you are on: filled dot, bright rule, no hover needed. */
nav a[aria-current]{color:var(--ink)}
nav a[aria-current]::before{background:var(--ink); border-color:var(--ink)}
nav a[aria-current]::after{background:var(--ink)}
@media (max-width:760px){
  nav{gap:18px}
  nav a.hide-sm{display:none}
  nav a:not(.btn)::after{width:48px}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:4px; border:1px solid transparent;
  font:400 .7rem/1 var(--mono); text-transform:uppercase; letter-spacing:.16em;
  cursor:pointer; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--ink); border-color:var(--ink); color:#0a0a0a}
.btn-primary:hover{filter:brightness(.92)}
.btn-ghost{background:transparent; border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* ------------------------------------------------------------------ footer */
footer{border-top:1px solid var(--line); padding:4rem 0 5rem; margin-top:6rem}
.frow{display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; align-items:center}
.frow .brand{font-size:1.6rem; color:var(--muted); opacity:1}
.frow .brand:hover{color:var(--ink)}
.frow .brand .dot{background:currentColor}
.frow a:not(.brand){
  font:400 .66rem/1 var(--mono); text-transform:uppercase; letter-spacing:.22em;
  color:var(--muted);
}
.frow a:not(.brand):hover{color:var(--ink); text-decoration:none}
.fnote{margin-top:2.4rem; max-width:60ch; font-size:.8rem; line-height:1.7; color:var(--dim)}

/* ------------------------------------------------------------------ the page
   One reading column, the width of a comfortable line. Figures may run wider
   than the text so a screenshot of a whole panel stays legible. */
.doc{counter-reset:sec}
.doc-head{padding:6rem 0 3.5rem; border-bottom:1px solid var(--line)}
@media (max-width:640px){ .doc-head{padding:3.5rem 0 2.5rem} }
.doc-head .lede{margin-top:1.6rem; max-width:58ch; font-size:1.08rem; line-height:1.75; color:var(--muted); text-wrap:pretty}
.eyebrow{
  margin:0 0 1.4rem;
  font:400 .66rem/1 var(--mono); text-transform:uppercase; letter-spacing:.22em;
  color:var(--muted);
}
.doc-head .eyebrow{margin-bottom:1.8rem}

.col{max-width:680px}
.doc section{
  padding:4.5rem 0 1rem; counter-increment:sec; scroll-margin-top:5.5rem;
}
.doc section + section{border-top:1px solid var(--line); margin-top:3.5rem}
@media (max-width:640px){ .doc section{padding:3rem 0 .5rem} .doc section + section{margin-top:2.5rem} }
.doc section .eyebrow::before{content:counter(sec,decimal-leading-zero) " \00B7  "}
.doc section > .col > p, .doc .col > p{margin-top:1.1rem; text-wrap:pretty}
.doc h2 + .col > p:first-child, .doc h2 + p{margin-top:1.4rem}
.doc .col > p:first-child{margin-top:1.4rem}
.doc ul, .doc ol{margin:1.1rem 0 0; padding-left:1.3rem}
.doc li{margin:.45rem 0; text-wrap:pretty}
.doc li::marker{color:var(--dim)}
.doc li b{display:inline}

/* Contents: the section numbers, so the eyebrows and the list agree. */
.toc{margin:2.4rem 0 0; padding:0; list-style:none; columns:2; column-gap:3rem; max-width:760px}
@media (max-width:640px){ .toc{columns:1} }
.toc li{break-inside:avoid; margin:0; padding:.55rem 0; border-top:1px solid var(--line)}
.toc a{display:grid; grid-template-columns:2.4rem 1fr; gap:.6rem; align-items:baseline; text-decoration:none; color:var(--ink-2)}
.toc a::before{content:counter(toc,decimal-leading-zero); counter-increment:toc; font:400 .66rem/1 var(--mono); letter-spacing:.16em; color:var(--dim)}
.toc{counter-reset:toc}
.toc a:hover{color:var(--ink)}

/* A pulled statement: one thought, set like the quote on the landing page. */
.pull{
  margin:2.4rem 0 .4rem; padding:0; border:0; max-width:24ch;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink-2);
}
.pull cite{
  display:block; margin-top:1.1rem; max-width:46ch; font-style:normal;
  font:400 .66rem/1.9 var(--mono); text-transform:uppercase; letter-spacing:.18em;
  color:var(--dim);
}

/* Numbered rows, the landing page's .points. */
.points{list-style:none; padding:0; margin:2.4rem 0 0; counter-reset:row}
.points li{
  display:grid; grid-template-columns:3.5rem 1fr; align-items:start;
  padding:1.3rem 0; margin:0; border-top:1px solid var(--line); counter-increment:row;
}
.points li:last-child{border-bottom:1px solid var(--line)}
.points li::before{
  content:counter(row,decimal-leading-zero); grid-column:1;
  font:400 .66rem/1 var(--mono); letter-spacing:.16em; color:var(--dim); padding-top:.4rem;
}
.points li > div{grid-column:2}
.points b{display:block; margin-bottom:.3rem; font-size:1rem}
.points p{font-size:.95rem; color:var(--muted); max-width:64ch; margin:0}

/* Aside: a fact about Sluka set against the method, or a warning in the guide. */
.note{
  margin:1.6rem 0 0; padding:.2rem 0 .2rem 1.3rem; border-left:2px solid var(--line-2);
  font-size:.95rem; color:var(--muted);
}
.note b{color:var(--ink)}

/* Tables: hairlines, no fills. */
table{border-collapse:collapse; width:100%; margin:1.4rem 0 0; font-size:.95rem}
th,td{text-align:left; vertical-align:top; padding:.65rem .9rem .65rem 0; border-top:1px solid var(--line)}
th{font:400 .66rem/1.6 var(--mono); text-transform:uppercase; letter-spacing:.16em; color:var(--dim); border-top:0; padding-top:0}
tr:last-child td{border-bottom:1px solid var(--line)}
td:first-child{color:var(--ink); white-space:nowrap}
.table-wrap{overflow-x:auto; max-width:100%}
.keys td:first-child{white-space:normal}
/* On a phone the first column gives up its no-wrap, or the table is the one thing wider than the screen. */
@media (max-width:640px){ td:first-child{white-space:normal} th,td{padding-right:.6rem} }
kbd{
  display:inline-block; font:400 .78rem/1 var(--mono); color:var(--ink);
  border:1px solid var(--line-2); border-radius:3px; padding:3px 6px; margin:0 1px;
  vertical-align:baseline; white-space:nowrap;
}
code{font:400 .88em var(--mono); color:var(--ink)}

/* Screenshots: the reader is photographed on a white page, the dashboard on
   its own black. Both sit on a hairline so the edge is visible either way. */
figure{margin:1.8rem 0 0; max-width:900px}
figure img{
  display:block; width:100%; height:auto; border:1px solid var(--line-2); border-radius:6px;
  background:#fff;
}
figure.dark img{background:var(--bg)}
figure.dark{max-width:760px}
figure.narrow{max-width:520px}
figcaption{margin-top:.7rem; font-size:.84rem; line-height:1.6; color:var(--dim); max-width:66ch}

/* Colour legend swatches, the landing page's. */
.sw{width:22px; height:13px; border-radius:3px; display:inline-block; border:1px solid #3a3a3a; vertical-align:-2px; margin-right:6px}

/* The step list in the guide: what to press, then what happens. */
.steps{list-style:none; padding:0; margin:1.4rem 0 0; counter-reset:step}
.steps li{
  position:relative; margin:0; padding:.7rem 0 .7rem 2.2rem;
  border-top:1px solid var(--line); counter-increment:step;
}
.steps li:last-child{border-bottom:1px solid var(--line)}
/* Absolutely placed rather than a grid cell: a grid would put each <b> in the
   step into a cell of its own and scatter the sentence. */
.steps li::before{content:counter(step); position:absolute; left:0; top:.7rem; font:400 .72rem/1.9 var(--mono); color:var(--dim)}

/* Cross-links between the two pages and back to the landing page. */
.next{margin-top:5rem; padding-top:2.4rem; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:12px}

.sources{font-size:.88rem; color:var(--muted)}
.sources li{margin:.4rem 0}
.sources a{color:var(--ink-2)}