/* Shared styles for every page: theme, top nav, footer, guide articles. */

/* One bold purple theme for both light and dark preference. */
:root { --bg:#12062b; --bg2:#2a0b5e; --fg:#ffffff; --text:#e9e3ff; --muted:#b9a6ff; --accent:#a855f7; --hot:#e040fb;
        --line:#5b2bb5; --panel:rgba(255,255,255,.04); --panel-line:rgba(168,85,247,.28); --ok:#4ade80;
        --mono:ui-monospace, Menlo, Consolas, monospace; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--fg);
       background:radial-gradient(ellipse at top, var(--bg2) 0%, var(--bg) 65%) fixed, var(--bg);
       font:clamp(14px, 2.2vw, 16px)/1.6 system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
code { font-family:var(--mono); color:var(--hot); }

/* ---------- Top nav ---------- */
.topbar { width:100%; max-width:1040px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
          gap:12px; padding:clamp(12px, 2.5vw, 20px) clamp(16px, 3vw, 24px); }
.brand { font:600 clamp(15px, 2.4vw, 18px)/1 var(--mono); color:var(--fg); text-decoration:none; letter-spacing:.02em; white-space:nowrap; }
.brand span { color:var(--hot); }
.nav { display:flex; align-items:center; gap:clamp(4px, 1.5vw, 12px); font-size:clamp(13px, 1.8vw, 15px); }
.nav > a, .menu > summary { padding:8px 12px; border-radius:8px; color:var(--muted); text-decoration:none; cursor:pointer;
                            transition:color .2s, background .2s; }
.nav > a:hover, .menu > summary:hover, .menu[open] > summary { color:var(--fg); background:rgba(168,85,247,.12); }
.nav > a[aria-current="page"] { color:var(--fg); }

.menu { position:relative; }
.menu > summary { list-style:none; display:flex; align-items:center; gap:6px; user-select:none; }
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
                         transform:translateY(-2px) rotate(45deg); transition:transform .2s; }
.menu[open] > summary::after { transform:translateY(1px) rotate(-135deg); }
.menu-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:10; width:min(300px, calc(100vw - 32px));
              padding:8px; border-radius:14px; background:#1c0b40; border:1px solid var(--panel-line);
              box-shadow:0 18px 50px rgba(0,0,0,.45); display:flex; flex-direction:column; }
.menu-panel a { padding:9px 12px; border-radius:8px; color:var(--text); text-decoration:none; font-size:14px; line-height:1.35; }
.menu-panel a:hover, .menu-panel a:focus-visible { background:rgba(168,85,247,.16); color:var(--fg); outline:none; }
.menu-panel a[aria-current="page"] { color:var(--hot); }
.menu-panel .all { margin-top:4px; padding-top:11px; border-top:1px solid var(--panel-line); border-radius:0 0 8px 8px; color:var(--hot); font-weight:600; }

/* ---------- Footer ---------- */
.site-footer { padding:clamp(32px, 6vw, 56px) 16px clamp(20px, 4vw, 32px); text-align:center;
               font-size:clamp(11px, 1.5vw, 12px); letter-spacing:.06em; color:var(--muted); }
.site-footer a { color:var(--fg); text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); transition:border-color .2s; }
.site-footer a:hover { border-color:var(--hot); }
.heart { color:var(--hot); }

/* ---------- Guide list (home page + /guides/) ---------- */
.guide-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:clamp(10px, 1.8vw, 14px);
              max-width:880px; margin:0 auto; padding:0; list-style:none; text-align:left; }
.guide-list a { display:block; height:100%; padding:clamp(14px, 2.2vw, 18px); border-radius:12px; text-decoration:none;
                background:var(--panel); border:1px solid var(--panel-line); transition:border-color .2s, background .2s, transform .15s; }
.guide-list a:hover, .guide-list a:focus-visible { border-color:var(--accent); background:rgba(168,85,247,.08); transform:translateY(-1px); outline:none; }
.guide-list strong { display:block; color:var(--fg); font-size:clamp(14px, 1.9vw, 16px); font-weight:600; margin-bottom:4px; }
.guide-list span { display:block; color:var(--muted); font-size:clamp(12px, 1.6vw, 13px); line-height:1.5; }

/* ---------- Guide article ---------- */
.page { flex:1; width:100%; max-width:760px; margin:0 auto; padding:clamp(8px, 3vw, 32px) clamp(16px, 3vw, 24px) 0; }
.page.wide { max-width:960px; }
.crumbs { font-size:13px; color:var(--muted); margin-bottom:clamp(16px, 3vw, 24px); }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--fg); }
.page h1 { margin:0 0 12px; font-size:clamp(28px, 5.5vw, 44px); line-height:1.15; font-weight:700; letter-spacing:-.01em; }
.page h1 em { font-style:normal; background:linear-gradient(90deg, var(--accent), var(--hot)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { margin:0 0 clamp(24px, 5vw, 40px); font-size:clamp(16px, 2.4vw, 19px); color:var(--muted); line-height:1.6; }

.prose { color:var(--text); font-size:clamp(15px, 2.1vw, 17px); line-height:1.75; }
.prose h2 { margin:clamp(36px, 6vw, 52px) 0 12px; color:var(--fg); font-size:clamp(20px, 3.2vw, 26px); line-height:1.3; }
.prose h2::before { content:""; display:block; width:36px; height:2px; border-radius:2px; margin-bottom:14px;
                    background:linear-gradient(90deg, var(--accent), var(--hot)); }
.prose h3 { margin:28px 0 8px; color:var(--fg); font-size:clamp(16px, 2.4vw, 19px); }
.prose p, .prose ul, .prose ol { margin:0 0 16px; }
.prose ul, .prose ol { padding-left:1.4em; }
.prose li { margin-bottom:6px; }
.prose li::marker { color:var(--accent); }
.prose strong { color:var(--fg); }
.prose a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--hot); }
.prose a:hover { color:var(--hot); }
.prose code { font-size:.92em; padding:1px 5px; border-radius:5px; background:rgba(168,85,247,.12); }
.prose pre { margin:0 0 18px; padding:14px 16px; overflow-x:auto; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid var(--panel-line);
             font:clamp(12.5px, 1.8vw, 14px)/1.65 var(--mono); color:var(--fg); }
.prose pre code { padding:0; background:none; color:inherit; font-size:inherit; }
.prose pre .c { color:var(--muted); }
.prose .tbl { margin:0 0 20px; overflow-x:auto; border:1px solid var(--panel-line); border-radius:12px; }
.prose table { width:100%; border-collapse:collapse; font-size:clamp(13px, 1.9vw, 15px); }
.prose th, .prose td { padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(168,85,247,.18); }
.prose tr:last-child td { border-bottom:0; }
.prose th { color:var(--fg); font-weight:600; background:rgba(168,85,247,.10); white-space:nowrap; }
.prose td code { white-space:nowrap; }
.note { margin:0 0 20px; padding:14px 16px; border-radius:12px; border-left:3px solid var(--hot);
        background:rgba(224,64,251,.08); color:var(--text); }
.note strong:first-child { color:var(--hot); }

.cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:clamp(36px, 6vw, 52px) 0 0;
       padding:clamp(16px, 3vw, 22px); border-radius:14px; background:linear-gradient(120deg, rgba(168,85,247,.18), rgba(224,64,251,.12));
       border:1px solid var(--panel-line); }
.cta p { margin:0; color:var(--fg); font-weight:600; }
.btn { display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px; color:#fff; text-decoration:none; font-weight:600; font-size:14px;
       background:linear-gradient(90deg, var(--accent), var(--hot)); box-shadow:0 4px 18px rgba(224,64,251,.35); transition:transform .15s, box-shadow .2s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(224,64,251,.55); }

.related { margin-top:clamp(40px, 7vw, 64px); }
.related h2 { margin:0 0 14px; font-size:13px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.related .guide-list { max-width:none; }

/* Sources list at the end of each guide */
.sources { margin-top:clamp(36px, 6vw, 52px); padding-top:20px; border-top:1px solid var(--panel-line); }
.sources h2 { margin:0 0 10px; font-size:13px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.sources ol { margin:0; padding-left:1.4em; font-size:13px; line-height:1.6; color:var(--muted); }
.sources li { margin-bottom:4px; }
.sources li::marker { color:var(--accent); }
.sources a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--line); word-break:break-word; }
.sources a:hover { color:var(--hot); border-color:var(--hot); }

/* ---------- Large screens ----------
   All sizes above are tuned for phones up to HD (1920px). On wider viewports — e.g. 1440p
   monitors, or 4K at 100% OS scaling — scale the whole layout up so it stays readable.
   Below 2000px nothing changes. Applied to the top-level blocks (not body) so 100vh
   layouts aren't stretched. */
@media (min-width: 2000px) { body > header, body > main, body > footer { zoom: 1.25; } }
@media (min-width: 2800px) { body > header, body > main, body > footer { zoom: 1.5; } }
@media (min-width: 3400px) { body > header, body > main, body > footer { zoom: 1.75; } }

/* ---------- 404 page ---------- */
.nf { text-align:center; padding-top:clamp(24px, 6vw, 64px); }
.nf-code { margin:0 0 8px; font:700 clamp(72px, 16vw, 140px)/1 var(--mono); letter-spacing:-.02em;
           background:linear-gradient(90deg, var(--accent), var(--hot)); -webkit-background-clip:text; background-clip:text; color:transparent;
           text-shadow:0 0 40px rgba(168,85,247,.35); }
.nf .lead { max-width:560px; margin-left:auto; margin-right:auto; }
.nf .related { text-align:left; }

/* ---------- Guides: menu categories, dates, images, grouped index ---------- */
.menu-cat { padding:10px 12px 4px; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); opacity:.75; }
.menu-cat:first-child { padding-top:4px; }
.meta { margin:calc(-1 * clamp(16px, 4vw, 30px)) 0 clamp(24px, 5vw, 40px); font-size:13px; color:var(--muted); opacity:.85; }
.prose img.figure { display:block; max-width:100%; height:auto; margin:8px auto 20px; border-radius:12px; border:1px solid var(--panel-line); }
.prose blockquote { margin:0 0 20px; padding:4px 16px; border-left:3px solid var(--line); color:var(--muted); }
.note p:last-child { margin-bottom:0; }
.prose h2[id], .prose h3[id] { scroll-margin-top:16px; }
.guide-group + .guide-group { margin-top:clamp(28px, 5vw, 44px); }
.guide-group h2 { margin:0 0 14px; font-size:13px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.guide-group .guide-list { max-width:none; }
.more { margin:16px 0 0; text-align:center; font-size:14px; }
.more a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--hot); }