/* ============================================================
   Article pages — /vs, /faq, /manga-server, /changelog
   Loaded AFTER styles.css, which supplies every primitive used here
   (.wrap .btn .glass .grad .eyebrow .mark .wordmark .nav .foot .cmp .fx-*).
   ============================================================ */

/* ⚠️ styles.css:32 is `a{color:inherit;text-decoration:none}`. That is right for a landing page made of
   buttons and cards, and fatal for running prose: without this rule every link in a paragraph below is
   invisible. Do not delete it because "the links look fine" — they look fine because of it. */
.prose a{color:#b9a8ff;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;
  text-decoration-color:rgba(185,168,255,.42);transition:color .2s,text-decoration-color .2s}
.prose a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.6)}

/* ⚠️ And styles.css:97 is `[data-reveal]{opacity:0}`, undone by JS that these pages do not load.
   Article pages must never use data-reveal: the page would simply be blank. */

/* .nav is position:fixed and nothing but .hero's 8rem padding compensates for it on the home page. */
.doc{position:relative;z-index:3;padding:8.5rem 0 5rem}
.doc .wrap{max-width:860px}
.doc--wide .wrap{max-width:1180px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:.7rem 1.1rem;background:#fff;color:#000;border-radius:0 0 10px 0}
.skip:focus{left:0}

.crumbs{font-size:.86rem;color:var(--fog-500);margin-bottom:1.1rem}
.crumbs a{color:var(--fog-400)}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 .45rem;opacity:.5}

.doc h1{font-family:var(--font-brand);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(2.1rem,5.2vw,3.5rem);color:#fff;margin-bottom:1rem}
.doc .lede{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--fog-300);max-width:62ch;line-height:1.55}

.prose{margin-top:2.6rem}
.prose h2{font-family:var(--font-brand);font-weight:700;letter-spacing:-.025em;line-height:1.15;
  font-size:clamp(1.45rem,3vw,2.05rem);color:#fff;margin:3.2rem 0 .9rem;scroll-margin-top:7rem}
.prose h3{font-size:1.16rem;font-weight:700;color:#fff;margin:2rem 0 .6rem;scroll-margin-top:7rem}
.prose p{color:var(--fog-300);margin:0 0 1.05rem;max-width:68ch}
.prose ul,.prose ol{color:var(--fog-300);margin:0 0 1.15rem 1.25rem;max-width:66ch}
.prose li{margin:.4rem 0}
.prose li::marker{color:var(--v)}
.prose strong{color:var(--fog-50);font-weight:600}
.prose code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:.12em .42em;color:#d9d3ff}
.prose figure{margin:1.8rem 0}
.prose figure img{border-radius:14px;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.prose figcaption{font-size:.85rem;color:var(--fog-500);margin-top:.6rem}
.prose hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:2.8rem 0}
.prose blockquote{border-left:2px solid rgb(var(--accent)/.6);padding:.1rem 0 .1rem 1.1rem;margin:1.4rem 0;color:var(--fog-300)}

/* code blocks: same look as the home page's terminal, without its chrome */
.snippet{background:rgba(10,10,14,.8);border:1px solid rgba(255,255,255,.08);border-radius:14px;
  padding:1.05rem 1.2rem;overflow-x:auto;margin:0 0 1.3rem}
.snippet pre{font-family:var(--mono);font-size:.855rem;line-height:1.75;color:#cfc9e8;white-space:pre}
.snippet .c{color:var(--fog-500)}

/* the answer/aside card, used for "the one-line answer" and callouts */
.note{border-radius:16px;padding:1.15rem 1.3rem;margin:1.6rem 0;
  background:rgba(124,92,255,.07);border:1px solid rgba(124,92,255,.22)}
.note p:last-child{margin-bottom:0}
.note strong{color:#fff}

/* FAQ */
.faq{margin-top:2.4rem}
.faq-group{margin:2.6rem 0 0}
.faq-group>h2{margin-top:0}
.faq-q{border-top:1px solid rgba(255,255,255,.08);padding:1.35rem 0}
.faq-q:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.faq-q h3{margin:0 0 .5rem;font-size:1.05rem;font-weight:700;color:#fff;scroll-margin-top:7rem}
.faq-q p{margin:0 0 .7rem}
.faq-q p:last-child{margin-bottom:0}

/* release list */
.rel{list-style:none;margin:2.4rem 0 0;padding:0}
.rel-item{border-top:1px solid rgba(255,255,255,.08);padding:1.5rem 0}
.rel-item:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.rel-tag{font-family:var(--mono);font-size:.82rem;color:#c9bcff;background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.26);border-radius:999px;padding:.18rem .6rem;display:inline-block}
.rel-tag:hover{color:#fff;background:rgba(124,92,255,.22)}
.rel-date{font-size:.82rem;color:var(--fog-500);margin-left:.7rem}
/* .rel-head is an <h2> inside .prose, and `.prose h2` (0,1,1) outranks a bare class (0,1,0) -- without
   the .prose prefix here every release title renders at section-heading size. */
.prose .rel-head{font-family:var(--font-brand);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;
  color:#fff;margin:.7rem 0 .45rem;line-height:1.3}
.rel-teaser{color:var(--fog-400);margin:0 0 .6rem;max-width:72ch;font-size:.96rem}
.rel-more{font-size:.87rem;color:#b9a8ff}
.rel-more:hover{color:#fff}

/* "what you are installing" strip, fed by SSI */
.live{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-size:.88rem;color:var(--fog-400);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.4rem .9rem;margin-bottom:1.4rem}
.live b{color:#fff;font-weight:600}
.live a{color:#c9bcff}
.live .ping{width:7px;height:7px;border-radius:99px;background:#48e39b;box-shadow:0 0 0 4px rgba(72,227,155,.14)}

/* next-steps cards at the foot of an article */
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;margin:2.8rem 0 0}
.next a{display:block;border-radius:14px;padding:1.05rem 1.15rem;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);transition:background .25s,border-color .25s,transform .25s}
.next a:hover{background:rgba(255,255,255,.06);border-color:rgba(124,92,255,.35);transform:translateY(-2px)}
.next b{display:block;color:#fff;font-weight:700;margin-bottom:.25rem}
.next span{font-size:.9rem;color:var(--fog-400)}

/* the comparison table needs a little room to breathe on its own page */
.doc .cmp{margin-top:1.6rem}
.foot--slim{padding-top:4rem}
.foot--slim .foot-wrap{padding-top:0}

/* The mobile nav (burger, stacked links, .nav.open) already lives in styles.css:365-373 under
   @media(max-width:980px) and applies to this markup unchanged. Only the page padding is ours. */
@media(max-width:980px){
  .doc{padding-top:7rem}
  .doc .wrap,.doc--wide .wrap{max-width:100%}
}
@media(max-width:560px){
  .snippet{padding:.9rem .95rem;border-radius:12px}
  .snippet pre{font-size:.8rem}
}

/* ───── additions used by index.html (loaded there too, after styles.css) ───── */
.hero-rel{margin-top:.9rem;font-size:.9rem;color:var(--fog-500)}
.hero-rel a{color:#b9a8ff}
.hero-rel a:hover{color:#fff}
.collapse-note{max-width:60ch;margin:1.2rem auto 0;text-align:center;color:var(--fog-400);font-size:1rem}
.collapse-note b{color:var(--fog-100);font-weight:600}
.collapse-note a{color:#b9a8ff}
.collapse-note a:hover{color:#fff}
/* The new headline is nine characters longer than the one it replaced ("Self-hosted manga server" against
   "A manga library"), which at the old clamp wrapped it to four lines and pushed the call to action below
   the fold on a laptop. Slightly tighter tracking and a lower ceiling bring it back to three. */
.hero-h1{font-size:clamp(2.6rem,6.2vw,4.6rem);letter-spacing:-.05em}
/* A label that breaks mid-word turns the bar into two rows; there is room for all of these on one. */
.nav-links a{white-space:nowrap}