:root{
  /* A serif to read in and a quiet sans for furniture: the pairing a reference
     work uses, and the fastest one available because both are already on the
     machine. No webfont is requested at all. */
  --serif:"Iowan Old Style",Charter,"Bitstream Charter","Source Serif 4",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --paper:#fbfaf7;
  --ink:#1a1917;
  --ink2:#413e38;
  --muted:#6d6961;
  --accent:#21445f;
  --rule:rgba(26,25,23,.17);
  --hair:rgba(26,25,23,.085);

  --measure:44rem;
  --gap:1.5rem;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#121211;
    --ink:#ece9e2;
    --ink2:#c6c2b9;
    --muted:#9d988e;
    --accent:#9dc2dc;
    --rule:rgba(255,255,255,.2);
    --hair:rgba(255,255,255,.1);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:.055em}
a:hover{text-decoration-thickness:.11em}

/* One column, one measure, everywhere. A reference reads down, not across. */
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding:0 var(--gap)}

/* ---------- masthead ---------- */
/* No sticky bar and no backdrop blur: that is app chrome, and it follows the
   reader down a page they are trying to read. */
.site-head{border-bottom:1px solid var(--rule);padding:1.15rem 0;margin-bottom:3rem}
.head-in{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 1.25rem;flex-wrap:wrap}
.brand{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.015em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .tm{font-size:.6em;vertical-align:.45em;font-weight:400}
.brand .sub{font-weight:400;color:var(--muted);margin-left:.3em}
.head-nav{display:flex;gap:1.25rem;font-family:var(--sans);font-size:.85rem;flex-wrap:wrap}
.head-nav a{color:var(--muted);text-decoration:none}
.head-nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}

/* ---------- the reading column ---------- */
main.article,main{max-width:var(--measure);margin:0 auto;padding:0 var(--gap) 3.5rem}
main.article .wrap,main .wrap{max-width:none;padding:0;margin:0}
section{padding:0}

.meta{font-family:var(--sans);font-size:.78rem;letter-spacing:.03em;color:var(--muted);margin:0 0 .9rem}
.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--muted);margin:0 0 .9rem}

h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.8rem,1.3rem + 2.1vw,2.55rem);
  line-height:1.17;letter-spacing:-.006em;
  margin:0 0 1.05rem;text-wrap:balance;
}
h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.28rem,1.1rem + .72vw,1.5rem);
  line-height:1.3;margin:2.9rem 0 .8rem;padding-top:1.05rem;
  border-top:1px solid var(--hair);text-wrap:balance;
}
h3{font-family:var(--serif);font-weight:600;font-size:1.08rem;line-height:1.42;margin:1.9rem 0 .45rem;text-wrap:balance}
h4{font-family:var(--sans);font-weight:600;font-size:.85rem;letter-spacing:.015em;margin:1.5rem 0 .3rem;text-wrap:balance}

p{margin:0 0 1.1rem;text-wrap:pretty}
strong{font-weight:600}

/* Display type is balanced rather than merely pretty: `pretty` only protects
   the last line, `balance` evens every line, which is what stops a two-word
   tail on a lede at phone widths. Measured at 360/390/414. */
.lede{font-size:1.22rem;line-height:1.58;color:var(--ink2);margin:0 0 1.4rem;text-wrap:balance}
.lede strong{color:var(--ink)}
.sub-lede,.section-lede{font-size:1.05rem;line-height:1.62;color:var(--muted);margin:0 0 1.6rem;text-wrap:balance}
.verdict dt,.spec .k,.limits strong,.steps>li strong{text-wrap:balance}

/* The operator disclosure under the headline. Quiet, never hidden: the voice
   is third person and carries no byline, which is only honest while the page
   says plainly who runs it. */
.disclose{
  display:block;font-family:var(--sans);font-size:.86rem;line-height:1.6;
  color:var(--muted);border-left:2px solid var(--rule);
  padding:.1rem 0 .1rem 1rem;margin:0 0 2.4rem;text-wrap:pretty;
}

/* ---------- the short version ---------- */
/* Was a rounded, shadowed card. A reference states its summary; it does not
   package it. Rules and space carry it instead. */
.verdict{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.4rem 0 .35rem;margin:0 0 2.4rem}
.verdict h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.045em;color:var(--muted);border-top:0;padding-top:0;margin:0 0 1.05rem}
.verdict dl{margin:0}
.verdict dt{font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--ink);margin:0 0 .18rem;text-wrap:pretty}
.verdict dd{margin:0 0 1.1rem;color:var(--ink2);font-size:1.02rem;line-height:1.62;text-wrap:pretty}

/* ---------- procedure steps ---------- */
/* Hanging numerals, not badges. */
.steps{list-style:none;margin:0 0 2rem;padding:0;counter-reset:step}
.steps>li{counter-increment:step;position:relative;padding:0 0 0 2.3rem;margin:0 0 1.4rem}
.steps>li::before{
  content:counter(step) ".";position:absolute;left:0;top:0;
  font-family:var(--sans);font-size:.88rem;color:var(--muted);
}
.steps>li strong{display:block;font-weight:600;color:var(--ink);margin-bottom:.15rem}
.steps>li span{display:block;color:var(--ink2);text-wrap:pretty}

/* ---------- requirements / what it needs ---------- */

.limits{margin:0 0 2rem}
.limits h2{margin-top:2.9rem}
.limits ul{list-style:none;margin:0;padding:0}
.limits>ul>li{border-top:1px solid var(--hair);padding:.9rem 0;margin:0;color:var(--ink2);text-wrap:pretty}
.limits>ul>li:last-child{border-bottom:1px solid var(--hair)}
.limits strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.1rem}

/* ---------- fact table ---------- */
/* A datasheet, which is what it is. Never monospaced, never tabular figures. */
.spec{margin:0 0 2rem;border-top:1px solid var(--rule)}
.spec .row{display:grid;grid-template-columns:11rem 1fr;gap:.2rem 1.5rem;padding:.8rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.spec .k{font-family:var(--sans);font-size:.83rem;font-weight:600;color:var(--muted);line-height:1.55;text-wrap:pretty}
.spec .v{color:var(--ink2);font-size:1.02rem;line-height:1.6;text-wrap:pretty}
@media (max-width:34rem){.spec .row{grid-template-columns:1fr;gap:.1rem}}

/* ---------- how the pages are written ---------- */
.method{margin:0 0 2rem;counter-reset:mrule}
.method .rule{display:flex;gap:1rem;padding:.9rem 0;border-top:1px solid var(--hair);margin:0}
.method .rule:first-child{border-top:0;padding-top:0}
.method .rule .n{flex:0 0 auto;font-family:var(--sans);font-size:.83rem;color:var(--muted);padding-top:.28rem}
.method .rule p{margin:0;color:var(--ink2);text-wrap:pretty}
.method .rule p strong{color:var(--ink)}

/* ---------- body lists ---------- */
main ul,main ol{padding-left:1.25rem;margin:0 0 1.25rem}
main li{margin:0 0 .5rem;text-wrap:pretty}

/* ---------- sources ---------- */
.sources{margin:2.9rem 0 0;padding-top:1.15rem;border-top:1px solid var(--rule)}
.sources h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.045em;color:var(--muted);border-top:0;padding-top:0;margin:0 0 .85rem}
.sources ol{padding-left:1.2rem;margin:0}
.sources li{font-size:.93rem;line-height:1.6;color:var(--muted);margin:0 0 .65rem}

/* ---------- related ---------- */
.rel{margin:2.6rem 0 0;padding-top:1.15rem;border-top:1px solid var(--rule)}
.rel h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.045em;color:var(--muted);border-top:0;padding-top:0;margin:0 0 .5rem}
.rel-grid{list-style:none;margin:0;padding:0;display:block}
.rel-grid li{margin:0;border-bottom:1px solid var(--hair)}
.rel-grid li:first-child{border-top:1px solid var(--hair)}
.rel-grid a{display:block;padding:.78rem 0;text-decoration:none;color:var(--ink);font-size:1.01rem;line-height:1.45;text-wrap:pretty}
.rel-grid a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}

/* ---------- index ---------- */
/* A reference index is a list, not a grid of equal-weight boxes: the reader is
   scanning for their own question, and a list scans faster. */
.hero{padding:0 0 2.2rem}
.idx{margin:0 0 2.6rem}
.idx:last-child{margin-bottom:0}
.idx h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.045em;color:var(--muted);border-top:0;padding-top:0;margin:0 0 .25rem}
.idx .idx-note{font-family:var(--sans);font-size:.85rem;line-height:1.6;color:var(--muted);margin:0 0 .9rem;text-wrap:pretty}
.idx ul{list-style:none;margin:0;padding:0}
.idx li{margin:0;border-bottom:1px solid var(--hair)}
.idx li:first-child{border-top:1px solid var(--hair)}
.idx li a{display:block;padding:.95rem 0;text-decoration:none;color:var(--ink);font-size:1.06rem;line-height:1.45;text-wrap:pretty}
.idx li a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.idx li a .say{display:block;font-size:.93rem;color:var(--muted);margin-top:.15rem;line-height:1.55}
.idx li a:hover .say{color:var(--muted);text-decoration:none}
.say{color:var(--ink2)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);margin-top:3.5rem;padding:2.1rem 0 3rem;font-family:var(--sans);font-size:.85rem;line-height:1.65;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem 2rem;margin-bottom:1.6rem}
@media (max-width:34rem){.foot-grid{grid-template-columns:1fr;gap:1.3rem}}
.foot-col h4{font-family:var(--sans);font-size:.77rem;font-weight:600;letter-spacing:.035em;color:var(--ink);margin:0 0 .45rem}
.foot-col a{display:block;color:var(--muted);text-decoration:none;padding:.16rem 0}
.foot-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.addr{font-style:normal;line-height:1.6;margin:0 0 .9rem;color:var(--muted)}
.addr .name{display:block;color:var(--ink2);font-weight:600}

/* The disclosure line. Same place on every page, always readable. */
.operator{color:var(--ink2);margin:0 0 .5rem;padding-top:1.2rem;border-top:1px solid var(--hair);text-wrap:pretty}
.operator strong{color:var(--ink);font-weight:600}
.legal{color:var(--muted);text-wrap:pretty}
.legal p{margin:0 0 .35rem}

/* ---------- what we make: the two product blocks and the buy path ---------- */
.made{margin:0 0 2.9rem;border-top:1px solid var(--rule)}
.made h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.045em;color:var(--muted);border-top:0;padding-top:1.15rem;margin:0 0 1.5rem}
.prod{padding:0 0 1.9rem;margin:0 0 1.9rem;border-bottom:1px solid var(--hair)}
.prod:last-child{border-bottom:0;padding-bottom:.4rem;margin-bottom:0}
.prod h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.22;letter-spacing:-.008em;color:var(--ink);margin:0 0 .5rem;text-wrap:balance}
.prod .pitch{font-size:1.08rem;line-height:1.6;color:var(--ink2);margin:0 0 .7rem;text-wrap:pretty}
.prod .terms{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--muted);margin:0 0 1.1rem;text-wrap:pretty}
.prod .terms strong{color:var(--ink2);font-weight:600}
.cta{display:inline-block;font-family:var(--sans);font-size:.92rem;font-weight:600;line-height:1;color:var(--paper);background:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:.85rem 1.35rem;text-decoration:none}
.cta:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cta.quiet{color:var(--accent);background:transparent}
.cta.quiet:hover{color:var(--paper);background:var(--accent);border-color:var(--accent)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem .8rem}
.cta-note{font-family:var(--sans);font-size:.85rem;line-height:1.55;color:var(--muted);margin:.75rem 0 0;text-wrap:pretty}

.hide-sm{display:inline}
@media (max-width:30rem){.hide-sm{display:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}