/*! nss 3.0.0 · classless CSS · no JavaScript · MIT · https://gitlab.com/niharokz/nss */
/* ── tokens ──────────────────────────────────────────────
   Every colour, font and size lives here. Override any of them
   in your own stylesheet:  :root{ --nss-accent:#c2410c }      */
:root{
  /* surfaces */
  --nss-bg:#070b0f; --nss-surface:#0f161b; --nss-surface-2:#152027; --nss-line:#1f2c33;
  /* text */
  --nss-fg:#e6ecec; --nss-muted:#8b979a;
  /* accent: --nss-accent fills and borders, --nss-ink is the readable text tint of it */
  --nss-accent:#3a807a; --nss-ink:#66bdb3; --nss-accent-2:#a9b8ff; --nss-on-accent:#fff;
  /* states */
  --nss-ok:#3fb27f; --nss-warn:#e0a63a; --nss-bad:#ff6b6b;
  /* background: grid lines and a corner glow (set them to transparent to turn them off) */
  --nss-grid:rgba(58,128,122,.09); --nss-grid-size:32px; --nss-glow:rgba(58,128,122,.22);
  /* type */
  --nss-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --nss-mono:ui-monospace,"JetBrains Mono","Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --nss-size:16px; --nss-leading:1.7;
  /* shape and layout */
  --nss-radius:12px; --nss-gutter:1rem; --nss-width:46rem; --nss-wide:72rem;
  /* the logo in the header bar: "~/site_" */
  --nss-logo-prefix:"~/"; --nss-logo-suffix:"_";
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --nss-bg:#f6f8f8; --nss-surface:#fff; --nss-surface-2:#eaf1f0; --nss-line:#d7e2e0;
  --nss-fg:#14201f; --nss-muted:#5c6b6a; --nss-ink:#2c6a64; --nss-accent-2:#4b5bb5;
  --nss-ok:#1f8a5a; --nss-warn:#a86a00; --nss-bad:#d63c3c;
  --nss-grid:rgba(58,128,122,.10); --nss-glow:rgba(58,128,122,.12);
  color-scheme:light;
}}
@media (min-width:40rem){:root{--nss-gutter:1.5rem; --nss-size:17px; --nss-grid-size:48px}}

/* ── base ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem;tab-size:2}
body{
  display:flex;flex-direction:column;margin:0;min-height:100vh;min-height:100dvh;color:var(--nss-fg);
  font:var(--nss-size)/var(--nss-leading) var(--nss-sans);overflow-wrap:break-word;
  background:radial-gradient(45rem 28rem at 105% -10%,var(--nss-glow),transparent 70%),
    linear-gradient(var(--nss-grid) 1px,transparent 1px),linear-gradient(90deg,var(--nss-grid) 1px,transparent 1px) var(--nss-bg);
  background-size:auto,var(--nss-grid-size) var(--nss-grid-size),var(--nss-grid-size) var(--nss-grid-size);
  background-attachment:fixed;
}
/* every direct child of body is a centred column; main can hold its own sections */
body>*{width:100%;max-width:var(--nss-width);margin-inline:auto;padding-inline:var(--nss-gutter)}
main{flex:1 0 auto}
main>*:first-child{margin-top:0}
[hidden]{display:none!important}
::selection{background:var(--nss-accent);color:var(--nss-on-accent)}
:focus-visible{outline:2px solid var(--nss-accent);outline-offset:3px;border-radius:4px}

/* ── typography ────────────────────────────────────────── */
a{color:inherit;text-decoration:underline 2px var(--nss-accent);text-underline-offset:.22em;transition:color .2s}
a:hover{color:var(--nss-ink)}
h1,h2,h3,h4,h5,h6{line-height:1.25;letter-spacing:-.02em;margin:2.2em 0 .6em;text-wrap:balance}
h1{font-size:2em}
h2{font-size:1.35rem}h3{font-size:1.12rem}h4{font-size:1rem}h5,h6{font-size:.9rem}
h4,h5,h6{color:var(--nss-muted)}
h6{text-transform:uppercase;letter-spacing:.08em}
:is(h1,h2,h3,h4)>small{margin-left:.4rem;padding:.1rem .5rem;border-radius:999px;background:var(--nss-surface-2);vertical-align:.25em;font-size:.62rem;letter-spacing:.04em}
p,ul,ol,dl,pre,table,blockquote,figure,details,fieldset,address{margin:0 0 1.2em}
ul,ol{padding-left:1.25rem}
li{margin:.3em 0}
li::marker{color:var(--nss-accent)}
ol>li::marker{font:600 .85em var(--nss-mono)}
:is(ul,ol) :is(ul,ol){margin:.3em 0 0}
dl{display:grid;gap:.15rem 1rem}
dt{font:600 .9em var(--nss-mono);color:var(--nss-ink)}
dd{margin:0 0 .6rem;color:var(--nss-muted)}
hr{border:0;height:1px;margin:2.5rem 0;background:linear-gradient(90deg,transparent,var(--nss-line) 15%,var(--nss-accent) 50%,var(--nss-line) 85%,transparent)}
small{font:.78rem var(--nss-mono);color:var(--nss-muted)}
time,data{font-family:var(--nss-mono);font-variant-numeric:tabular-nums}
mark{padding:0 .25em;border-radius:4px;background:var(--nss-accent);color:var(--nss-on-accent)}
abbr[title]{text-decoration:underline dotted var(--nss-muted);text-underline-offset:.2em;cursor:help}
del{color:var(--nss-muted);text-decoration-color:var(--nss-bad)}
ins{text-decoration:none;background:color-mix(in srgb,var(--nss-ok) 22%,transparent);border-radius:3px;padding:0 .15em}
sub,sup{font-size:.72em;line-height:0}
q{font-style:italic}
cite,dfn{font-style:italic;color:var(--nss-muted)}
address{font-style:normal;color:var(--nss-muted)}
blockquote{margin-inline:0;padding:.8rem 1rem;border-left:3px solid var(--nss-accent);background:var(--nss-surface);border-radius:0 var(--nss-radius) var(--nss-radius) 0;color:var(--nss-muted)}
blockquote>:last-child{margin-bottom:0}
blockquote>footer,blockquote cite{display:block;margin-top:.5rem;font:.82rem var(--nss-mono);font-style:normal}
hgroup>*{margin:0}
hgroup>p{margin-top:.4rem;color:var(--nss-muted);font-size:1.05rem}
center>:first-child{margin-top:2rem}

/* ── code ──────────────────────────────────────────────── */
code,kbd,samp,var{font:.87em/1.5 var(--nss-mono)}
var{font-style:italic;color:var(--nss-ink)}
:not(pre)>:is(code,samp){padding:.12em .4em;border-radius:6px;background:var(--nss-surface-2);border:1px solid var(--nss-line);color:var(--nss-ink);white-space:break-spaces}
kbd{padding:.1em .45em;border-radius:6px;background:var(--nss-surface);border:1px solid var(--nss-line);border-bottom-width:3px;color:var(--nss-fg)}
/* a code block looks like a terminal window */
pre{
  overflow-x:auto;margin-inline:calc(var(--nss-gutter)*-1);padding:2.3rem var(--nss-gutter) 1rem;font-size:.85rem;line-height:1.6;
  border-block:1px solid var(--nss-line);background:var(--nss-surface) no-repeat;background-size:12px 12px;
  background-image:radial-gradient(circle,var(--nss-bad) 4px,transparent 4.5px),radial-gradient(circle,var(--nss-accent) 4px,transparent 4.5px),radial-gradient(circle,var(--nss-accent-2) 4px,transparent 4.5px);
  background-position:var(--nss-gutter) .8rem,calc(var(--nss-gutter) + 18px) .8rem,calc(var(--nss-gutter) + 36px) .8rem;
}
pre code{font-size:inherit;color:var(--nss-fg)}
pre:has(>samp){background-image:none;padding-top:1rem}
@media (min-width:40rem){pre{margin-inline:0;border:1px solid var(--nss-line);border-radius:var(--nss-radius)}}

/* ── media ─────────────────────────────────────────────── */
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
img,video{margin-inline:auto;border-radius:var(--nss-radius)}
p>img{margin-block:.5rem;border:1px solid var(--nss-line)}
p>img:only-child{margin-inline:auto}
audio{width:100%}
iframe{width:100%;border:1px solid var(--nss-line);border-radius:var(--nss-radius);aspect-ratio:16/9;height:auto}
figure{margin-inline:0}
figure>:is(img,video,picture){margin-bottom:.5rem}
figcaption{font:.8rem var(--nss-mono);color:var(--nss-muted);text-align:center}
/* a figure holding figures is a gallery:  <figure><figure>…</figure><figure>…</figure><figcaption>…</figcaption></figure> */
figure:has(>figure){display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,40%),1fr));gap:.75rem;align-items:start}
figure:has(>figure)>figure{margin:0}
figure:has(>figure)>figcaption{grid-column:1/-1}

/* ── tables ────────────────────────────────────────────── */
table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.9rem;border:1px solid var(--nss-line);border-radius:var(--nss-radius)}
caption{padding:.6rem .85rem;text-align:left;font:600 .8rem var(--nss-mono);color:var(--nss-muted)}
th,td{padding:.6rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--nss-line)}
thead th,tr:first-child>th:only-of-type{font:600 .72rem var(--nss-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--nss-muted);background:var(--nss-surface)}
tbody th{font-weight:600}
tbody tr:hover{background:color-mix(in srgb,var(--nss-surface-2) 60%,transparent)}
tbody tr:last-child>*{border-bottom:0}
tfoot{font-weight:600;background:var(--nss-surface)}
tfoot tr>*{border-top:2px solid var(--nss-line);border-bottom:0}
td:has(>:is(data,time):only-child){font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:40rem){table{display:table;width:100%}}

/* ── forms ─────────────────────────────────────────────── */
form{margin:0 0 1.5rem}
/* a form of labelled fields stacks; a lone field + button (a search box) sits on one row */
form:has(>label,>fieldset,>p){display:grid;gap:1rem;max-width:36rem}
form:not(:has(>label,>fieldset,>p,>textarea)){display:flex;flex-wrap:wrap;gap:.5rem}
form:not(:has(>label,>fieldset,>p,>textarea))>input:not([type=submit],[type=reset],[type=button],[type=hidden],[type=checkbox],[type=radio]){flex:1 1 12rem;min-width:0}
search{display:block;margin:0 0 1.5rem}
label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
label:has(>:is([type=checkbox],[type=radio])){display:flex;align-items:center;gap:.5rem;font-weight:400}
label>small,fieldset>small,form>small{font-weight:400}
fieldset{display:grid;gap:.75rem;padding:1rem 1.1rem;border:1px solid var(--nss-line);border-radius:var(--nss-radius);background:var(--nss-surface)}
legend{padding:0 .4rem;font:600 .8rem var(--nss-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--nss-ink)}
:is(input,select,textarea,button){font:inherit;line-height:1.4;color:inherit}
:is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=reset],[type=button],[type=image]),select,textarea){
  width:100%;max-width:100%;padding:.55rem .75rem;border:1px solid var(--nss-line);border-radius:8px;background:var(--nss-surface);
  transition:border-color .2s,box-shadow .2s;
}
form:not(:has(>label,>fieldset,>p,>textarea))>input{width:auto}
:is(input,select,textarea):hover{border-color:color-mix(in srgb,var(--nss-accent) 50%,var(--nss-line))}
:is(input,select,textarea):focus{outline:none;border-color:var(--nss-accent);box-shadow:0 0 0 3px var(--nss-glow)}
::placeholder{color:var(--nss-muted);opacity:.8}
textarea{min-height:7rem;resize:vertical}
select{appearance:none;padding-right:2.2rem;cursor:pointer;
  background:var(--nss-surface) no-repeat right .8rem center/.7rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--nss-muted) 50%),linear-gradient(135deg,var(--nss-muted) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .85rem) 55%;background-size:.35rem .35rem,.35rem .35rem}
select[multiple],select[size]{background-image:none;padding-right:.75rem}
:is(input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
:is(input,select,textarea):user-invalid{border-color:var(--nss-bad)}
:is(input,select,textarea)[aria-invalid=true]{border-color:var(--nss-bad)}
[type=checkbox],[type=radio]{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--nss-accent);cursor:pointer}
/* <input type="checkbox" role="switch"> draws as a toggle */
[type=checkbox][role=switch]{appearance:none;width:2.3rem;height:1.3rem;border-radius:999px;background:var(--nss-surface-2);border:1px solid var(--nss-line);position:relative;transition:background .2s}
[type=checkbox][role=switch]::before{content:"";position:absolute;top:2px;left:2px;width:calc(1.3rem - 6px);height:calc(1.3rem - 6px);border-radius:50%;background:var(--nss-muted);transition:transform .2s,background .2s}
[type=checkbox][role=switch]:checked{background:var(--nss-accent);border-color:var(--nss-accent)}
[type=checkbox][role=switch]:checked::before{transform:translateX(1rem);background:var(--nss-on-accent)}
[type=range]{width:100%;height:1.4rem;margin:0;-webkit-appearance:none;appearance:none;background:none;accent-color:var(--nss-accent);cursor:pointer}
[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--nss-surface-2);border:1px solid var(--nss-line)}
[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--nss-surface-2);border:1px solid var(--nss-line)}
[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--nss-accent)}
[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.1rem;height:1.1rem;margin-top:calc(-.55rem + 2px);border-radius:50%;background:var(--nss-accent);border:2px solid var(--nss-bg)}
[type=range]::-moz-range-thumb{width:1rem;height:1rem;border-radius:50%;background:var(--nss-accent);border:2px solid var(--nss-bg)}
[type=color]{width:3rem;height:2.4rem;padding:.2rem;border:1px solid var(--nss-line);border-radius:8px;background:var(--nss-surface);cursor:pointer}
[type=file]{font-size:.9rem;color:var(--nss-muted)}
::file-selector-button{margin-right:.75rem;padding:.45rem .8rem;border:1px solid var(--nss-line);border-radius:8px;background:var(--nss-surface-2);color:var(--nss-fg);font:inherit;cursor:pointer}
/* buttons: submit is primary, reset and plain buttons are secondary */
:is(button,[type=submit],[type=reset],[type=button]){
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1rem;
  border:1px solid var(--nss-accent);border-radius:8px;background:var(--nss-accent);color:var(--nss-on-accent);
  font-weight:600;cursor:pointer;transition:filter .2s,transform .1s,background .2s
}
:is(button,[type=submit],[type=reset],[type=button]):hover{filter:brightness(1.12)}
:is(button,[type=submit],[type=reset],[type=button]):active{transform:translateY(1px)}
:is(button[type=reset],button[type=button],[type=reset],[type=button]){background:transparent;color:var(--nss-ink)}
:is(button[type=reset],button[type=button],[type=reset],[type=button]):hover{background:var(--nss-surface-2);filter:none}
:is(button,[type=submit],[type=reset],[type=button]):disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
form>:is(button,[type=submit]):last-child{justify-self:start}
output{font:600 .95em var(--nss-mono);color:var(--nss-ink)}
/* bars */
progress,meter{width:100%;height:.55rem;border:0;border-radius:999px;background:var(--nss-surface-2);overflow:hidden;appearance:none;vertical-align:middle}
progress::-webkit-progress-bar{background:var(--nss-surface-2)}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--nss-accent),var(--nss-ink))}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--nss-accent),var(--nss-ink))}
progress:indeterminate{background:linear-gradient(90deg,var(--nss-surface-2) 30%,var(--nss-accent) 50%,var(--nss-surface-2) 70%) 0 0/300% 100%;animation:nss-slide 1.4s linear infinite}
progress:indeterminate::-webkit-progress-bar{background:transparent}
meter::-webkit-meter-bar{background:var(--nss-surface-2);border:0;border-radius:999px;height:.55rem}
meter::-webkit-meter-optimum-value{background:var(--nss-ok);border-radius:999px}
meter::-webkit-meter-suboptimum-value{background:var(--nss-warn);border-radius:999px}
meter::-webkit-meter-even-less-good-value{background:var(--nss-bad);border-radius:999px}
meter:-moz-meter-optimum::-moz-meter-bar{background:var(--nss-ok)}
meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--nss-warn)}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--nss-bad)}

/* ── details, dialog, menu ─────────────────────────────── */
details{border:1px solid var(--nss-line);border-radius:var(--nss-radius);background:var(--nss-surface);padding:0 1rem}
summary{cursor:pointer;padding:.8rem 0;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";display:inline-block;margin-right:.55rem;color:var(--nss-ink);transition:transform .2s}
details[open]>summary::before{transform:rotate(90deg)}
details[open]{padding-bottom:.6rem}
details[open]>summary{border-bottom:1px dashed var(--nss-line);margin-bottom:.8rem}
/* consecutive details join into one accordion */
details+details{margin-top:-1.2em;border-top:0;border-radius:0}
details:has(+details){border-bottom-left-radius:0;border-bottom-right-radius:0}
details+details:not(:has(+details)){border-radius:0 0 var(--nss-radius) var(--nss-radius)}
dialog{max-width:min(36rem,calc(100vw - 2rem));padding:1.5rem;border:1px solid var(--nss-line);border-radius:var(--nss-radius);background:var(--nss-surface);color:var(--nss-fg);box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
dialog>:first-child{margin-top:0}
dialog>:last-child{margin-bottom:0}
dialog form[method=dialog]{display:flex;justify-content:flex-end;gap:.5rem;margin:1rem 0 0}
menu{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none}
menu>li{margin:0}

/* ── page layout ───────────────────────────────────────────
   header  → a sticky bar: <h1><a>logo</a></h1> + <nav>
             (if the h1 holds the page title instead of a link, the nav becomes the bar
              and the title drops below it as the page heading)
   main / section / article → the reading column
   aside next to main → a sidebar on wide screens
   footer  → a quiet row of links                                           */
:is(header:has(>h1>a),header:not(:has(>h1>a))>nav){
  position:sticky;top:0;z-index:10;order:-1;display:flex;align-items:center;gap:.1rem;
  max-width:none;min-height:3.4rem;margin:0;padding:.55rem max(var(--nss-gutter),calc((100% - var(--nss-width))/2 + var(--nss-gutter)));
  background:color-mix(in srgb,var(--nss-bg) 80%,transparent);backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--nss-line);
}
header:not(:has(>h1>a)){display:contents}
header>h1:has(>a){flex:none;margin:0 .4rem 0 0;font-size:1.1rem;line-height:1}
header>nav{display:flex;flex:1;min-width:0;justify-content:safe flex-end;overflow-x:auto;scrollbar-width:none}
header>nav::-webkit-scrollbar{display:none}
header>nav>ul{display:flex;margin:0;padding:0;list-style:none}
header>nav>ul>li{margin:0}
header:not(:has(>h1>a))>nav{flex:none;justify-content:flex-start}
header a{flex:none;white-space:nowrap;text-decoration:none;font:500 .85rem/1 var(--nss-mono);color:var(--nss-muted);padding:.55rem .5rem;border-radius:999px}
header a:hover,header a[aria-current]{color:var(--nss-fg);background:var(--nss-surface)}
:is(header>h1>a,header:not(:has(>h1>a))>nav>a:first-child){
  display:inline-flex;align-items:baseline;margin-right:auto;padding:0;background:none!important;
  font:700 1.1rem/1 var(--nss-mono);letter-spacing:-.02em;color:var(--nss-fg)!important;
}
:is(header>h1>a,header:not(:has(>h1>a))>nav>a:first-child)::before{content:var(--nss-logo-prefix);color:var(--nss-ink)}
:is(header>h1>a,header:not(:has(>h1>a))>nav>a:first-child)::after{content:var(--nss-logo-suffix);color:var(--nss-ink);animation:nss-blink 1.1s steps(1) infinite}
/* the logo already goes home, so a separate "home" link next to it is hidden */
header:has(>h1>a)>nav>a:first-child[href="/"]{display:none}
header>h1:not(:has(a)){
  width:100%;max-width:var(--nss-width);margin:2rem auto .25rem;padding-inline:var(--nss-gutter);
  font:800 clamp(1.75rem,7vw,2.8rem)/1.15 var(--nss-sans);letter-spacing:-.035em;
  background:linear-gradient(100deg,var(--nss-fg) 45%,var(--nss-ink));-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (min-width:40rem){header a{padding:.55rem .75rem}}

/* breadcrumbs:  <nav><ol><li><a>…</a></li>…</ol></nav> */
nav>ol{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.5rem 0 0;padding:0;list-style:none;font:.82rem var(--nss-mono);color:var(--nss-muted)}
nav>ol>li{margin:0}
nav>ol>li+li::before{content:"/";margin-right:.4rem;color:var(--nss-line)}
nav>ol a{text-decoration:none;color:var(--nss-muted)}
nav>ol a:hover{color:var(--nss-ink)}
nav>ol [aria-current]{color:var(--nss-fg)}

/* sidebar: <main>…</main><aside>…</aside> as siblings */
body:has(>main+aside,>aside+main){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
@media (min-width:64rem){
  body:has(>main+aside,>aside+main){grid-template-columns:minmax(0,1fr) minmax(0,var(--nss-width)) 16rem minmax(0,1fr);column-gap:2rem;align-content:start}
  body:has(>main+aside,>aside+main)>*{grid-column:1/-1}
  body:has(>main+aside,>aside+main)>main{grid-column:2;max-width:none}
  body:has(>main+aside,>aside+main)>aside{grid-column:3;max-width:none;padding:0;align-self:start;position:sticky;top:5rem;margin-top:2rem}
}
body>aside{font-size:.92rem;color:var(--nss-muted)}
body>aside>:is(h2,h3){margin-top:0;font:700 .78rem/1 var(--nss-mono);text-transform:uppercase;letter-spacing:.16em;color:var(--nss-muted)}

/* footer */
body>footer{margin-top:3rem;padding-block:1.5rem 2.5rem;background:linear-gradient(var(--nss-line),var(--nss-line)) center top/calc(100% - 2*var(--nss-gutter)) 1px no-repeat}
body>footer>nav{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
body>footer a{padding:.3rem 0;font:.86rem var(--nss-mono);color:var(--nss-muted);text-decoration:none}
body>footer a:hover,body>footer a[href^="mailto"]{color:var(--nss-ink)}
body>footer a[href^="mailto"]::before{content:"✉ "}
body>footer>p{font-size:.86rem;color:var(--nss-muted)}

/* ── patterns ──────────────────────────────────────────────
   Plain HTML structures that nss recognises and draws as components.
   Nothing to add: write the structure, get the component.            */

/* hero: the first paragraph of the first section is the big intro line */
body>section:first-of-type>p:first-of-type,body>main>section:first-child>p:first-child{margin:2.75rem 0 1rem;font-size:clamp(1.5rem,5.2vw + .6rem,2.75rem);font-weight:750;line-height:1.18;letter-spacing:-.035em;text-wrap:balance}
:is(body>section:first-of-type>p:first-of-type,body>main>section:first-child>p:first-child) a{text-decoration:none;background:linear-gradient(100deg,var(--nss-ink),color-mix(in srgb,var(--nss-ink) 40%,#fff) 50%,var(--nss-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
:is(body>section:first-of-type,body>main>section:first-child)>p~p{color:var(--nss-muted);font-size:1.02rem}
:is(body>section:first-of-type,body>main>section:first-child)>p~p a{color:var(--nss-fg);font-weight:600}
/* hero with a heading:  <hgroup><h1>…</h1><p>…</p></hgroup> */
body>:is(hgroup,main>hgroup:first-child),body>section>hgroup:first-child{margin:3rem 0 2rem}
:is(body,main,section)>hgroup>h1{font-size:clamp(2rem,7vw,3.2rem);letter-spacing:-.04em}

/* section labels on the home section: small mono caps with a rule */
:is(body>section:first-of-type,body>main>section:first-child)>h2{margin:3rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--nss-line);font:700 .78rem/1 var(--nss-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--nss-muted)}
:is(body>section:first-of-type,body>main>section:first-child)>h2::first-letter{color:var(--nss-ink);font-size:1.25em}

/* article headings get a markdown-style marker */
article h2::before{content:"## ";font:600 .8em var(--nss-mono);color:var(--nss-ink)}
article h3::before{content:"### ";font:600 .8em var(--nss-mono);color:var(--nss-accent-2)}
article{padding-block:1rem 0}
/* "last updated" line closing an article */
article>p:last-child:has(time){margin-top:3rem;padding-top:1rem;border-top:1px dashed var(--nss-line);font:500 .8rem/1.5 var(--nss-mono);color:var(--nss-muted)}
/* an aside inside an article is a callout box */
article aside{margin:0 0 1.2em;padding:.9rem 1.1rem;border:1px solid color-mix(in srgb,var(--nss-accent) 45%,var(--nss-line));border-radius:var(--nss-radius);background:color-mix(in srgb,var(--nss-accent) 9%,var(--nss-surface))}
article aside>:last-child{margin-bottom:0}
article aside>:first-child:is(strong,h4){display:block;margin:0 0 .35rem;color:var(--nss-ink)}

/* cards: lists in the home section, and a section of articles */
:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type){display:grid;gap:.75rem;padding:0;list-style:none}
:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type)>li{padding:1rem 1.1rem;color:var(--nss-muted);font-size:.93rem;line-height:1.5}
:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type)>li>a:first-child{font:700 1.02rem var(--nss-mono);color:var(--nss-fg);text-decoration:none}
:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type)>li>a:first-child::before{content:"→ ";color:var(--nss-ink)}
@media (min-width:40rem){:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:56rem){
  :is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type){grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
  body>section:first-of-type>p:first-of-type,body>main>section:first-child>p:first-child{margin-top:5rem}
}
section:has(>article+article){display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;align-items:stretch}
section:has(>article+article)>:not(article){grid-column:1/-1;margin-bottom:0}
section:has(>article+article)>article{display:flex;flex-direction:column;padding:1.1rem 1.2rem;margin:0}
section:has(>article+article)>article>:is(h2,h3){margin-top:0;font-size:1.05rem}
section:has(>article+article)>article>:is(h2,h3)::before{content:none}
section:has(>article+article)>article>:last-child{margin-bottom:0}
section:has(>article+article)>article>footer{margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--nss-line);font:.8rem var(--nss-mono);color:var(--nss-muted)}

/* tiles: a list where every item is just a link (link pages, service lists) */
:is(article,body>section:not(:first-of-type),main>section:not(:first-child)) ul:has(>li>a:first-child):not(:has(>li>:first-child:not(a))){display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.5rem;padding:0;list-style:none}
:is(article,body>section:not(:first-of-type),main>section:not(:first-child)) ul:has(>li>a:first-child):not(:has(>li>:first-child:not(a)))>li{margin:0;padding:.7rem .85rem;font-size:.92rem;line-height:1.4;color:var(--nss-muted)}
:is(article,body>section:not(:first-of-type),main>section:not(:first-child)) ul:has(>li>a:first-child):not(:has(>li>:first-child:not(a)))>li>a{color:var(--nss-fg);font-weight:600;text-decoration:none}

/* the shared card surface: cards, tiles, article cards */
:is(:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type)>li,:is(article,body>section:not(:first-of-type),main>section:not(:first-child)) ul:has(>li>a:first-child):not(:has(>li>:first-child:not(a)))>li,section:has(>article+article)>article){
  position:relative;margin:0;background:var(--nss-surface);border:1px solid var(--nss-line);border-radius:var(--nss-radius);transition:border-color .2s,transform .2s,background .2s
}
:is(:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type)>li,:is(article,body>section:not(:first-of-type),main>section:not(:first-child)) ul:has(>li>a:first-child):not(:has(>li>:first-child:not(a)))>li):hover,section:has(>article+article)>article:has(a):hover{border-color:var(--nss-accent);background:var(--nss-surface-2);transform:translateY(-2px)}
/* the whole card is clickable through its first link */
:is(:is(body>section:first-of-type,body>main>section:first-child)>ul:not(:last-of-type),:is(article,body>section:not(:first-of-type),main>section:not(:first-child)) ul:has(>li>a:first-child):not(:has(>li>:first-child:not(a))))>li>a:first-child::after{content:"";position:absolute;inset:0;border-radius:var(--nss-radius)}

/* timeline: a list whose items start with a <time> */
ul:has(>li:first-child>time:first-child){list-style:none;padding:0 0 0 1rem;border-left:1px solid var(--nss-line)}
ul:has(>li:first-child>time:first-child)>li{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .45rem;margin:0;padding:.6rem 0 .6rem .9rem;font:.78rem/1.6 var(--nss-mono);color:var(--nss-muted)}
ul:has(>li:first-child>time:first-child)>li::before{content:"";position:absolute;left:-1.33rem;top:.95rem;width:9px;height:9px;border-radius:50%;background:var(--nss-bg);border:2px solid var(--nss-muted);transition:.2s}
ul:has(>li:first-child>time:first-child)>li:hover::before{background:var(--nss-accent);border-color:var(--nss-accent)}
ul:has(>li:first-child>time:first-child)>li>a{flex:1 1 100%;font:500 1rem/1.45 var(--nss-sans);color:var(--nss-fg);text-decoration:none}
ul:has(>li:first-child>time:first-child)>li>a:hover{color:var(--nss-ink)}
/* on the home section the newest entry is highlighted */
:is(body>section:first-of-type,body>main>section:first-child)>ul:has(>li:first-child>time:first-child)>li:first-child::before{background:var(--nss-ink);border-color:var(--nss-ink);box-shadow:0 0 0 4px var(--nss-glow)}
:is(body>section:first-of-type,body>main>section:first-child)>ul:has(>li:first-child>time:first-child)>li:first-child>a::after{content:"new";display:inline-block;margin-left:.5rem;padding:.12rem .45rem;border-radius:999px;vertical-align:.12em;font:700 .62rem/1.2 var(--nss-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--nss-bg);background:var(--nss-ink)}
@media (min-width:40rem){
  ul:has(>li:first-child>time:first-child)>li{flex-wrap:nowrap;gap:.6rem}
  ul:has(>li:first-child>time:first-child)>li>a{flex:1 1 auto;min-width:0;margin-left:.4rem}
  ul:has(>li:first-child>time:first-child)>li>time{flex:none}
}

/* key–value rows: list items that start with <strong> (specs, stats, "uses" pages) */
ul:has(>li>strong:first-child){list-style:none;padding:0}
ul:has(>li>strong:first-child)>li{margin:0;padding:.5rem 0;border-bottom:1px dashed var(--nss-line)}
ul:has(>li>strong:first-child)>li:last-child{border-bottom:0}
li>strong:first-child{font:600 .92em var(--nss-mono);color:var(--nss-ink)}
li>small{margin-left:.35rem}
li>progress,li>meter{width:6rem;margin:0 .4rem}
@media (min-width:40rem){
  ul:has(>li>strong:first-child)>li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.45rem}
  ul:has(>li>strong:first-child)>li>strong:first-child{flex:0 0 11rem}
  li:has(>small:last-child){display:flex;justify-content:space-between;gap:1rem}
  dl{grid-template-columns:max-content 1fr}
  dd{margin:0 0 .4rem}
}

/* badge strip: a later section holding a single paragraph of links ("Member of …") */
body>section:not(:first-of-type):has(>p:only-child){margin-top:3.5rem;padding-top:1.5rem;font:500 .82rem/2.4 var(--nss-mono);color:var(--nss-muted);background:linear-gradient(var(--nss-line),var(--nss-line)) center top/calc(100% - 2*var(--nss-gutter)) 1px no-repeat}
body>section:not(:first-of-type):has(>p:only-child)>p{margin:0}
body>section:not(:first-of-type):has(>p:only-child)>p::first-letter{color:var(--nss-ink)}
body>section:not(:first-of-type):has(>p:only-child) a{padding:.05rem .65rem;line-height:1.9;border:1px dashed var(--nss-line);border-radius:999px;text-decoration:none;color:var(--nss-fg);transition:.2s}
body>section:not(:first-of-type):has(>p:only-child) a:hover{border:1px solid var(--nss-accent);color:var(--nss-ink)}

/* stat tiles: a <dl> whose terms are grouped in <div>s → a row of tiles
   <dl><div><dt>Uptime</dt><dd><data value="99.9">99.9%</data></dd></div>…</dl> */
dl:has(>div){grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem}
dl>div{padding:.85rem 1rem;background:var(--nss-surface);border:1px solid var(--nss-line);border-radius:var(--nss-radius)}
dl>div>dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--nss-muted)}
dl>div>dd{margin:.15rem 0 0;color:var(--nss-fg)}
dl>div>dd:has(>:is(data,output):only-child){font:700 1.6rem/1.2 var(--nss-sans)}
dl>div>dd>small{display:block;margin-top:.2rem}

/* ── preferences and print ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){
  :is(header>h1>a,header>nav>a:first-child)::before{forced-color-adjust:auto}
  header>h1:not(:has(a)),body>section:first-of-type>p:first-of-type a{background:none;color:CanvasText}
}
@media print{
  body{background:none;color:#000;font-size:11pt}
  header>nav,body>footer,body>aside,dialog{display:none}
  a{text-decoration:underline}
  article a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  pre{white-space:pre-wrap;background-image:none;padding-top:1rem}
  :is(section,article) *{break-inside:avoid}
}
@keyframes nss-blink{50%{opacity:0}}
@keyframes nss-slide{to{background-position:-300% 0}}