/* NetLanScan — design variant C
   Light "workshop manual on paper" theme: cream ground, ink text, indigo links,
   coral accents, serif display headings. Dark mode via prefers-color-scheme. */

:root {
  --ink: #23212c;
  --ink-soft: #514d61;
  --ink-faint: #6f6a80;
  --paper: #fdf9f0;
  --paper-edge: #f1e9d8;
  --card: #ffffff;
  --card-edge: #e4dccb;
  --rule: #d8cfba;

  --link: #3b3bb3;
  --link-deep: #2c2c8f;
  --hot: #d95b43;
  --ok: #2f7d4f;

  --head-font: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body-font: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Verdana,
               "Helvetica Neue", Arial, sans-serif;
  --code-font: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --measure: 70ch;
  --pagewrap: 1080px;
  --consent-h: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9e4f2;
    --ink-soft: #b8b0c9;
    --ink-faint: #938aa6;
    --paper: #14131b;
    --paper-edge: #1c1a26;
    --card: #1e1c29;
    --card-edge: #2c2938;
    --rule: #34303f;
    --link: #a9a9ef;
    --link-deep: #c4c4f7;
    --hot: #ef8873;
    --ok: #6fce97;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 17px/1.68 var(--body-font);
  color: var(--ink);
  background: var(--paper);
  padding-bottom: var(--consent-h);
}
h1, h2, h3 { font-family: var(--head-font); line-height: 1.18; margin: 0 0 .5em; }
h1 { font-size: clamp(30px, 5vw, 44px); }
h2 { font-size: clamp(23px, 3.4vw, 30px); margin-top: 1.6em; }
h3 { font-size: 19px; margin-top: 1.4em; }
p, li { max-width: var(--measure); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-deep); }
code { font-family: var(--code-font); font-size: .88em; background: var(--paper-edge);
       padding: 1px 5px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
.pagewrap { max-width: var(--pagewrap); margin: 0 auto; padding: 0 22px; }
.hop { position: absolute; left: -9999px; }
.hop:focus { left: 12px; top: 12px; background: var(--card); padding: 8px 14px;
             z-index: 60; border-radius: 6px; border: 1px solid var(--rule); }

/* header */
.banner { border-bottom: 3px double var(--rule); background: var(--card); }
.banner-row { display: flex; align-items: center; justify-content: space-between;
              gap: 18px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.wordmark { font-family: var(--head-font); font-size: 21px; font-weight: 700;
            color: var(--ink); text-decoration: none; letter-spacing: .2px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
       background: var(--hot); margin-right: 8px; }
.trail { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 15px; }
.trail a { text-decoration: none; color: var(--ink-soft); padding: 4px 2px;
           border-bottom: 2px solid transparent; }
.trail a:hover { color: var(--link); }
.trail a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--hot); }

/* opener */
.opening { border-bottom: 1px solid var(--rule); padding: 46px 0 34px; }
.opening .eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
                    color: var(--hot); font-weight: 600; margin: 0 0 10px; }
.opening .standfirst { font-size: 19px; color: var(--ink-soft); max-width: 62ch; }
.opening .datemark { font-size: 13.5px; color: var(--ink-faint); margin-top: 14px; }

/* sections */
.chapter { padding: 30px 0 8px; }
.chapter > h2 { display: flex; align-items: baseline; gap: 12px; }
.chapter .index { font-family: var(--body-font); font-size: 13px; color: var(--hot);
                  border: 1px solid currentColor; border-radius: 999px;
                  padding: 2px 10px; white-space: nowrap; }

/* download block */
.grabline { margin: 26px 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.push, .quiet {
  font: 600 16px/1 var(--body-font); border-radius: 999px; cursor: pointer;
  padding: 15px 26px; border: 2px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.push { background: var(--hot); color: #fff; box-shadow: 0 6px 18px rgba(217, 91, 67, .35); }
.push:hover { background: #c44b34; color: #fff; }
.push svg { width: 19px; height: 19px; }
.grabline .aside-note { font-size: 14px; color: var(--ink-faint); }

/* panels */
.panels { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
          margin: 24px 0; }
.panel { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px;
         padding: 20px 20px 22px; box-shadow: 0 2px 10px rgba(35, 33, 44, .06); }
.panel h3 { margin-top: 0; }
.panel .whisper { font-size: 15px; color: var(--ink-soft); }
.panel .ledger { display: grid; gap: 6px; margin: 14px 0; font-size: 14px; color: var(--ink-soft); }
.panel .ledger b { color: var(--ink-faint); font-weight: 600; text-transform: uppercase;
                   font-size: 11.5px; letter-spacing: .08em; }

/* steps */
.procedure { list-style: none; counter-reset: op; padding: 0; margin: 22px 0; }
.procedure > li { counter-increment: op; position: relative; padding: 4px 0 20px 56px;
                  max-width: var(--measure); border-left: 2px solid var(--rule);
                  margin-left: 17px; }
.procedure > li::before { content: counter(op, decimal-leading-zero);
  position: absolute; left: -17px; top: 2px; width: 32px; height: 32px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--hot);
  color: var(--hot); font: 700 12px/28px var(--body-font); text-align: center; }
.procedure h3 { margin: 0 0 6px; }

/* figures */
.plate { margin: 26px 0; }
.plate img { border: 1px solid var(--card-edge); border-radius: 10px; display: block; }
.plate figcaption { font-size: 13.5px; color: var(--ink-faint); margin-top: 8px;
                    max-width: var(--measure); }

/* tables */
.sheet { width: 100%; border-collapse: collapse; font-size: 15px; margin: 22px 0;
         background: var(--card); border-radius: 10px; overflow: hidden;
         border: 1px solid var(--card-edge); }
.sheet th, .sheet td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule);
                       vertical-align: top; }
.sheet th { font-family: var(--head-font); font-size: 15px; background: var(--paper-edge); }
.sheet tr:last-child td { border-bottom: none; }

/* faq */
.query { border-top: 1px solid var(--rule); }
.query:last-of-type { border-bottom: 1px solid var(--rule); }
.query summary { cursor: pointer; font-weight: 600; font-family: var(--head-font);
                 font-size: 17.5px; padding: 16px 0; max-width: var(--measure);
                 list-style-position: outside; }
.query summary::marker { color: var(--hot); }
.query p { padding-bottom: 14px; margin-top: -4px; }

/* footer */
.colophon { margin-top: 60px; border-top: 3px double var(--rule); background: var(--card);
            padding: 30px 0 40px; }
.colophon nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.stamp { font-size: 14px; color: var(--ink-faint); margin: 14px 0 4px; }
.disclaimer { font-size: 13px; color: var(--ink-faint); max-width: 76ch; }

/* consent */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
           max-width: 640px; margin: 0 auto; background: var(--card);
           border: 1px solid var(--card-edge); border-left: 5px solid var(--hot);
           border-radius: 10px; padding: 16px 18px; display: flex; gap: 14px;
           align-items: center; flex-wrap: wrap; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.consent p { margin: 0; font-size: 14.5px; max-width: 46ch; }
.quiet { background: transparent; color: var(--ink-soft); border-color: var(--rule); }

@media (max-width: 640px) {
  .banner-row { justify-content: center; }
  .grabline { flex-direction: column; align-items: flex-start; }
}

/* hidden must win over layout display rules */
[hidden]{display:none !important}