/* Self-hosted IBM Plex (OFL). Files in /fonts/. No external dependency. */
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/SpaceGrotesk-Bold.woff2") format("woff2"); }

:root {
    --bg: #15171c;
    --panel: #1c1f26;
    --panel2: #0f1114;
    --fg: #cdd3da;
    --dim: #868d97;
    --faint: #555c6600;
    --faintc: #555c66;
    --line: #262a31;
    --blue: #e0924a;
    --blue-deep: #c0783a;
    --prompt: #5bc2a8;
    --spark: #e8973f;
    --white: #e9edf2;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    background: var(--bg);
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background:
      radial-gradient(1100px 560px at 50% -14%, #1d2129 0%, transparent 60%),
      linear-gradient(90deg, transparent 0 13%, var(--bg) 22% 78%, transparent 87% 100%),
      repeating-linear-gradient(45deg, rgba(141,150,160,0.06) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(-45deg, rgba(141,150,160,0.06) 0 1px, transparent 1px 30px),
      var(--bg);
    background-attachment: fixed, fixed, fixed, fixed, scroll;
    color: var(--fg);
    font-family: var(--sans);
    font-size: 17px; line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  /* Home / hero: let the lattice run full width, through the hero text too. */
  body.home {
    background:
      radial-gradient(1100px 560px at 50% -14%, #1d2129 0%, transparent 60%),
      repeating-linear-gradient(45deg, rgba(141,150,160,0.05) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(-45deg, rgba(141,150,160,0.05) 0 1px, transparent 1px 30px),
      var(--bg);
    background-attachment: fixed, fixed, fixed, scroll;
    font-family: var(--sans);
    font-size: 17px; line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  .accent-top { height: 3px; background: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--spark)); }

  a { color: var(--blue); text-decoration: none; }

  /* Sticky header */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 16px;
    padding: 12px clamp(16px, 5vw, 40px);
    background: rgba(21, 23, 28, .85);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--line);
  }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 700; letter-spacing: .02em; }
  .brand svg { width: 30px; height: 30px; }
  .brand .f { color: var(--blue); }
  .topbar nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: clamp(10px, 2.4vw, 22px); }
  .topbar nav a { color: var(--dim); font-size: .9rem; }
  .topbar nav a:hover, .topbar nav a:focus-visible { color: var(--white); outline: none; }

  .wrap { max-width: 780px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 32px); }

  /* Hero */
  .hero { padding: clamp(44px, 9vw, 92px) 0 clamp(30px, 5vw, 44px); text-align: center; }
  .hero .emblem { width: clamp(58px, 14vw, 82px); height: auto; display: block; margin: 0 auto 20px; }
  .mark { font-size: clamp(2.9rem, 12vw, 5rem); font-weight: 700; letter-spacing: .005em; line-height: 1; color: var(--white); }
  .mark .f { color: var(--blue); }
  .tagline { color: var(--dim); font-size: clamp(1rem, 3vw, 1.2rem); margin-top: 14px; }
  .tagline .a { color: var(--blue); }
  .pillars { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
  .pillars span { color: var(--dim); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
                  border: 1px solid var(--line); border-radius: 999px; padding: 4px 13px; }
  .lead { color: var(--fg); margin: 26px auto 0; max-width: 60ch; text-align: left; }
  .lead p { margin-bottom: 14px; }
  .lead p:last-child { margin-bottom: 0; }
  .lead em { color: var(--white); font-style: normal; font-weight: 600; }

  /* Sections */
  section { padding: clamp(30px, 6vw, 52px) 0; border-top: 1px solid var(--line); }
  .hero { border-top: none; }
  h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 700; color: var(--white); letter-spacing: .02em; }
  h2 .slash { color: var(--blue); font-weight: 500; }
  .sectlead { color: var(--dim); margin-top: 10px; max-width: 64ch; }
  .statuschip {
    display: inline-block; margin-top: 16px; font-size: .78rem;
    color: var(--spark); border: 1px solid rgba(247,147,30,.4); border-radius: 999px; padding: 3px 12px;
  }
  .statuschip.ok { color: var(--prompt); border-color: rgba(79,209,197,.4); }
  p + p { margin-top: 14px; }
  .muted { color: var(--dim); }

  /* Tool cards */
  .tools { margin-top: 22px; display: grid; gap: 12px; }
  .tool { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
  .tool-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 6px; flex-wrap: wrap; }
  .tool-head .num { color: var(--faintc); font-size: .9rem; }
  .tool-head h3 { font-size: 1.05rem; color: var(--blue); font-weight: 700; }
  .tool-head .meta { color: var(--dim); font-size: .8rem; margin-left: auto; }
  .tool .desc { padding: 0 18px 16px; color: var(--fg); }

  details.fn { border-top: 1px solid var(--line); background: var(--panel2); }
  details.fn > summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: 11px 18px; color: var(--prompt); font-size: .86rem;
    display: flex; align-items: center; gap: 9px;
  }
  details.fn > summary::-webkit-details-marker { display: none; }
  details.fn > summary .tw {
    display: inline-block; transition: transform .18s ease; color: var(--dim);
  }
  @media (prefers-reduced-motion: reduce) { details.fn > summary .tw { transition: none; } }
  details.fn[open] > summary .tw { transform: rotate(90deg); }
  details.fn > summary:hover { color: var(--white); }
  .fnbody { padding: 4px 18px 18px; }
  .fnbody .label { color: var(--white); font-size: .82rem; margin: 10px 0 6px; }
  .cmd {
    display: block; background: #1b2029; border: 1px solid #2d333d; border-left: 3px solid var(--spark);
    border-radius: 7px; padding: 10px 13px 10px 30px; margin: 11px 0;
    color: var(--white); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    font-size: .9rem; text-indent: -17px;
  }
  .cmd + .cmd { margin-top: 6px; }
  .cmd .p { color: var(--spark); margin-right: 8px; -webkit-user-select: none; user-select: none; }
  .cmdnote { color: var(--dim); margin: 2px 0 10px; padding-left: 15px; font-size: .86rem; }
  .fnline { margin: 0 0 7px; padding-left: 20px; text-indent: -20px; }
  .fnline .g { color: var(--spark); }
  .fnbody .how { color: var(--fg); margin: 2px 0 14px; }
  .fnbody b { color: var(--white); }
  .st { color: var(--blue); font-size: .9rem; margin: 16px 0 6px; }
  .sample {
    display: block; border: 1px solid #2d333d;
    border-radius: 7px; padding: 10px 13px 12px; margin: 9px 0 15px;
    color: #aeb6c0; white-space: pre; overflow-x: auto; font-size: .82rem; line-height: 1.55;
    scrollbar-width: thin;
    /* Scroll-shadow affordance: a fade + soft shadow appears on whichever
       edge has more content, and clears itself at the ends. Pure CSS, works
       on every device. The solid colour covers sit over the shadows so they
       only show while there is actually something to scroll to. */
    background:
      linear-gradient(to right, #0b0d11 40%, rgba(11,13,17,0)) left center,
      linear-gradient(to left,  #0b0d11 40%, rgba(11,13,17,0)) right center,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.8), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(232,151,63,.22), rgba(0,0,0,0)) right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 22px 100%, 22px 100%;
    background-attachment: local, local, scroll, scroll;
    background-color: #0b0d11;
    /* Keep the scrollbar visible so a long line is never missed. */
    scrollbar-color: #4a515f #14171d;
  }
  .sample::-webkit-scrollbar { height: 9px; }
  .sample::-webkit-scrollbar-track { background: #14171d; border-radius: 0 0 7px 7px; }
  .sample::-webkit-scrollbar-thumb { background: #4a515f; border-radius: 7px; }
  .sample::-webkit-scrollbar-thumb:hover { background: var(--spark); }
  .sample::before {
    content: "output"; display: block; color: #b0773e;
    font-size: .68rem; letter-spacing: .08em; margin-bottom: 6px;
  }
  /* ASCII schematics: same mono box, no "output" label. */
  .sample.nolabel { padding-top: 12px; }
  .sample.nolabel::before { content: none; }
  .reading { color: var(--fg); margin: 0 0 7px; padding-left: 20px; text-indent: -20px; }
  .reading .g { color: var(--spark); }
  .toc { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 12px 15px; margin: 8px 0 18px; }
  .toc .toch { color: var(--white); font-size: .8rem; margin-bottom: 8px; }
  .toc ol { margin: 0; padding-left: 1.7em; }
  .toc li { margin: 3px 0; }
  .toc li::marker { color: var(--faintc); }
  .toc a { color: var(--blue); font-size: .86rem; }
  .toc .tocgroup { color: var(--dim); font-size: .74rem; font-weight: 700; margin: 13px 0 4px; }
  .toc .tocgroup.first { margin-top: 2px; }
  .sech { color: var(--white); font-weight: 700; font-size: .98rem; margin: 22px 0 8px; scroll-margin-top: 84px; }
  .sech .n { color: var(--faintc); font-weight: 500; margin-right: 10px; }
  .backtoc { margin: 4px 0 10px; }
  .backtoc a { color: var(--faintc); font-size: .74rem; }
  .backtoc a:hover { color: var(--blue); }
  .usenote {
    color: #e6b485; font-size: .84rem; margin-top: 14px;
    background: rgba(232,151,63,.07);
    border-left: 3px solid var(--spark);
    border-radius: 0 7px 7px 0;
    padding: 11px 15px;
  }
  .usenote b { color: #f0c491; }

  /* Slim top-of-page reminder, sits before the commands. Deliberately quiet:
     a single line, muted, with just a thin accent rule, not a filled box. */
  .usetop {
    color: var(--dim); font-size: .8rem; line-height: 1.5;
    margin: 2px 0 20px; padding: 2px 0 2px 12px;
    border-left: 2px solid var(--spark);
  }
  .usetop b { color: #cdd3da; font-weight: 600; }

  /* Authorized-use notice (full block, leads the arsenal page) */
  .authnotice {
    margin: 18px 0 22px; padding: 16px 18px;
    background: rgba(232,151,63,.06);
    border: 1px solid rgba(232,151,63,.28);
    border-left: 3px solid var(--spark);
    border-radius: 0 9px 9px 0;
  }
  .authnotice-h {
    color: var(--spark); font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; margin: 0 0 9px;
  }
  .authnotice p { color: #d8c3ad; font-size: .9rem; margin: 0 0 9px; }
  .authnotice-sub { color: var(--dim) !important; font-size: .82rem !important; }
  .authlaws { margin: 0 0 11px; padding-left: 1.3em; }
  .authlaws li { color: #cdd3da; font-size: .88rem; margin: 3px 0; }
  .authlaws li::marker { color: var(--spark); }
  .authlaws b { color: var(--white); }
  .authnotice-foot { color: var(--dim) !important; font-size: .8rem !important; font-style: italic; margin-bottom: 0 !important; }

  /* Contact */
  .contact-row { margin-top: 14px; }
  .contact-row .k { color: var(--dim); display: inline-block; width: 4.6em; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
  .contact-row .cs { color: var(--spark); }
  .contact-h { color: var(--white); font-size: 1.05rem; font-weight: 700; margin: 36px 0 14px; }

  /* Digital-mode cards */
  .diggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .digcard {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 9px; padding: 15px 17px; display: flex; flex-direction: column;
  }
  .digcard.wide { grid-column: 1 / -1; }
  .diglabel { color: var(--dim); font-size: .78rem; letter-spacing: .04em; }
  .digval { color: var(--spark); font-family: var(--mono); font-size: 1.4rem; font-weight: 600; margin-top: 7px; word-break: break-word; }
  .digval a { color: var(--spark); }
  .dignote { color: var(--dim); font-size: .86rem; line-height: 1.55; margin: 11px 0 0; }
  .pgpval { color: var(--spark); font-family: var(--mono); font-size: 1.02rem; font-weight: 600; letter-spacing: .04em; margin-top: 7px; word-spacing: .15em; line-height: 1.5; word-break: break-word; }
  .pgpdl { margin: 12px 0 0; font-size: .9rem; }
  .pgpdl a { color: var(--spark); font-weight: 600; }

  /* Frequencies table */
  .freqtable { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .92rem; }
  .freqtable th {
    text-align: left; color: var(--dim); font-weight: 600; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .05em; padding: 0 14px 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .freqtable td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg); }
  .freqtable .freqf { color: var(--spark); font-family: var(--mono); font-weight: 600; white-space: nowrap; }
  .freqtable .freqsub { display: block; color: var(--dim); font-size: .82rem; margin-top: 3px; }
  .freqnote { color: var(--dim); font-size: .85rem; font-style: italic; margin-top: 12px; }
  @media (max-width: 560px) {
    .diggrid { grid-template-columns: 1fr; }
    .freqtable, .freqtable thead, .freqtable tbody, .freqtable tr, .freqtable th, .freqtable td { display: block; }
    .freqtable thead { display: none; }
    .freqtable tr { border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; margin-top: 10px; }
    .freqtable td { border: none; padding: 3px 0; }
    .freqtable .freqf { font-size: 1.05rem; margin-bottom: 4px; }
  }

  /* Shell */
  .shellbox { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; margin-top: 18px; }
  .shellbox > summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: 14px 18px; color: var(--blue); font-size: .9rem;
    display: flex; align-items: center; gap: 10px;
  }
  .shellbox > summary::-webkit-details-marker { display: none; }
  .shellbox > summary .dotrow { display: inline-flex; gap: 5px; }
  .shellbox > summary .d { width: 9px; height: 9px; border-radius: 50%; background: var(--faintc); }
  .shellbox > summary .d.b { background: var(--blue); }
  .term { border-top: 1px solid var(--line); background: var(--panel2); }
  .termscreen {
    padding: 16px 18px; max-height: 300px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word; font-size: .92rem;
    scrollbar-width: thin; scrollbar-color: var(--faintc) transparent;
  }
  .termscreen::-webkit-scrollbar { width: 7px; }
  .termscreen::-webkit-scrollbar-thumb { background: var(--faintc); border-radius: 7px; }
  .termline { margin-bottom: 8px; }
  .termline .ps { color: var(--prompt); }
  .termline .ps b { color: var(--spark); font-weight: 500; }
  .termline .typed { color: var(--white); }
  .termout { margin-bottom: 10px; }
  .termout .k { color: var(--blue); }
  .termout .d { color: var(--dim); }
  .terminput { display: flex; align-items: baseline; gap: 9px; padding: 12px 18px; border-top: 1px solid var(--line); }
  .terminput .ps { color: var(--prompt); flex: none; }
  .terminput .ps b { color: var(--spark); }
  .terminput input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--white); font: inherit; font-size: .92rem; caret-color: var(--spark);
  }
  .terminput input::placeholder { color: var(--faintc); }

  footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--faintc); font-size: .78rem; text-align: center; }
  footer .cs { color: var(--dim); }

  :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---- multi-page additions ---- */
.homelinks { margin-top: 30px; display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.homelinks a { color: var(--blue); font-size:1rem; border-bottom:1px solid rgba(108,180,234,.3); padding-bottom:2px; }
.homelinks a:hover { border-bottom-color: var(--blue); }
.breadcrumb { margin: 20px 0 4px; color: var(--dim); font-size: .85rem; }
.breadcrumb a { color: var(--blue); }
.breadcrumb .sep { color: var(--faintc); margin: 0 7px; }
.toolpage-title { font-size: clamp(1.9rem,6vw,2.7rem); font-weight:700; color:var(--white); letter-spacing:.02em; margin: 4px 0 4px; }
.toolpage-meta { color: var(--dim); font-size:.9rem; }
.toolpage-desc { color: var(--fg); margin: 12px 0 22px; max-width:64ch; }
/* category contents nav at the top of the arsenal */
.arstoc { margin:20px 0 12px; border:1px solid var(--line); border-radius:11px; background:var(--panel); padding:15px 17px; }
.arstoc-head { color:var(--dim); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:11px; }
.arstoc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:8px; }
.arstoc-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--fg); }
.arstoc-item:hover { border-color:var(--spark); color:var(--white); background:#1b2029; }
.arstoc-name { font-size:.98rem; }
.arstoc-count { color:var(--faintc); font-size:.78rem; border:1px solid var(--line); border-radius:999px; padding:1px 9px; }

.arsgroup { margin:38px 0 6px; scroll-margin-top:80px; }
.arsgroup:first-of-type { margin-top:26px; }
.arsgrouph {
  color:var(--white); font-size:1.22rem; font-weight:700;
  letter-spacing:.01em;
  padding:0 0 9px 13px; margin-bottom:6px;
  border-bottom:1px solid var(--line);
  border-left:3px solid var(--spark);
  display:flex; align-items:baseline; gap:10px;
}
.arsgrouph-n { color:var(--faintc); font-size:.85rem; font-weight:500; }
.arsgroup-desc { color:var(--dim); font-size:1rem; margin:11px 0 2px; padding-left:13px; max-width:66ch; }
.toollist { display:grid; gap:12px; margin:14px 0 0; }
a.toolcard { display:block; border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:16px 18px; }
a.toolcard:hover { border-color: var(--blue); background:#1b2029; }
a.toolcard .th { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
a.toolcard .num { color:var(--faintc); font-size:.9rem; }
a.toolcard h3 { color:var(--blue); font-size:1.05rem; font-weight:700; }
a.toolcard .meta { color:var(--dim); font-size:.8rem; margin-left:auto; }
a.toolcard .desc { display:block; color:var(--fg); margin-top:6px; }
a.toolcard .st { display:inline-block; margin-top:11px; font-size:.72rem; color:var(--spark); border:1px solid rgba(247,147,30,.4); border-radius:999px; padding:2px 11px; }
a.toolcard .st.ok { color:var(--prompt); border-color:rgba(79,209,197,.4); }
.toolpage-note { color: var(--dim); font-size:.85rem; margin-top:18px; }

/* ---- WarFi Labs brand ---- */
.wm .labs { color: var(--dim); font-weight: 600; }
.mark .labs { color: var(--dim); font-weight: 500; font-size: 1em; letter-spacing: .04em; }
.slogan { color: var(--white); font-weight: 700; font-size: clamp(1.1rem, 3.2vw, 1.35rem); margin-top: 18px; }
.hero .tagline { margin-top: 8px; }
.brand .wm { white-space: nowrap; }

/* ---- type: sans for prose, mono for code and the logotype ---- */
.cmd, .sample { font-family: var(--mono); }
.mark { font-family: var(--display); }
.brand .wm { font-family: var(--mono); }
.topbar nav a, .breadcrumb { font-family: var(--sans); }

/* ---- accessibility: larger, comfortable reading on guide pages ---- */
body.guide .toolpage-desc { font-size: 1.15rem; line-height: 1.65; }
body.guide .how,
body.guide p,
body.guide .reading,
body.guide .fnline,
body.guide .lead,
body.guide .fnbody .how { font-size: 1.15rem; line-height: 1.78; }
body.guide .sech { font-size: 1.3rem; margin: 26px 0 10px; }
body.guide .cmd { font-size: 1.04rem; }
body.guide .sample { font-size: 1rem; line-height: 1.62; }
body.guide .usenote { font-size: 1.04rem; }
body.guide .toc a { font-size: 1rem; }
body.guide .toc .toch { font-size: .9rem; }
body.guide .toc .tocgroup { font-size: .86rem; }
body.guide .toolpage-meta { font-size: 1rem; }

/* arsenal install-convention note */
.installnote { color: var(--dim); font-size: .92rem; margin: 2px 0 6px; max-width: 72ch; }
body.guide .installnote { font-size: 1rem; }

/* hub sub-page navigation */
.subpages { margin: 18px 0 8px; border:1px solid var(--line); border-radius:11px; background:var(--panel); padding:15px 17px; }
.subpages-head { color:var(--dim); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:11px; }
.subpage { display:block; border:1px solid var(--line); border-left:3px solid var(--spark); border-radius:8px; background:var(--panel2); padding:12px 15px; margin:8px 0; }
.subpage:hover { background:#1b2029; border-left-color:var(--white); }
.subpage-name { display:block; color:var(--white); font-weight:600; font-size:1.05rem; }
.subpage-desc { display:block; color:var(--dim); font-size:.95rem; margin-top:3px; }
body.guide .subpage-name { font-size:1.1rem; }
body.guide .subpage-desc { font-size:1rem; }

/* downloads table for project pages */
.dl { width:100%; border-collapse:collapse; margin:8px 0 4px; font-size:.95rem; }
.dl th, .dl td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
.dl th { color:var(--dim); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; }
.dl td { color:var(--fg); }
.dl .pending { color:var(--faintc); font-style:italic; }
body.guide .dl { font-size:1rem; }