/* ============================================================================
   AKA : Mud - site design system.
   Mirrors the app's own tokens (src/MudClient.App/App.axaml + Ui.cs):
   deep greys, violet primary accent, gold/teal/green/blue secondaries,
   7-8px radii (cards 10-12), Inter/Segoe UI stack.

   Markup patterns are documented in DESIGN.md. Every page copies the same
   topbar / footer blocks; sections use .section + .kicker; cards use
   .grid.cols-N > .card; code samples are baked with site-tools/highlight.py.
   ==========================================================================*/

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
    /* surfaces */
    --bg0: #16151c;          /* page / workbench */
    --bg1: #17161c;          /* panel */
    --bg2: #232230;          /* raised control */
    --bg-side: #0f0f13;      /* darkest chrome (top bar, footer) */
    --bg-field: #1c1b24;     /* inputs, inline code */
    --bg-code: #101014;      /* editor / code blocks */
    --bg-selected: #1a1922;

    /* lines */
    --border-lo: #26242e;
    --border-hi: #35323f;
    --border-ctl: #45424f;

    /* text */
    --text-hi: #eceaf2;
    --text-body: #d6d4de;
    --text-mid: #908da0;
    --text-lo: #5c5968;

    /* accents */
    --accent: #9d8cf0;
    --accent-hi: #b5a7ef;
    --accent-bg: rgba(157, 140, 240, 0.08);
    --accent-border: rgba(157, 140, 240, 0.30);
    --gold: #edc97a;
    --teal: #5ad6c0;
    --green: #7ed6a8;
    --blue: #8fb5f2;
    --pink: #ef9ab8;
    --bad: #ef8a8a;

    /* shape + type */
    --radius: 8px;
    --radius-sm: 7px;
    --radius-card: 10px;
    --sans: Inter, "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", "Cascadia Code", "Cascadia Mono", Consolas, monospace;

    /* depth */
    --shadow-deep: 0 18px 48px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.35);
    --glow-accent: 0 0 0 1px rgba(157, 140, 240, 0.18), 0 8px 28px rgba(157, 140, 240, 0.10);
}

/* ---------- 2. Base ------------------------------------------------------ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg0);
    color: var(--text-body);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent-hi); text-decoration: none; }
a:hover { color: #c8bdf4; text-decoration: underline; }

::selection { background: rgba(157, 140, 240, 0.28); color: var(--text-hi); }

img, svg { max-width: 100%; }

code, kbd.key {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--bg-field);
    border: 1px solid var(--border-lo);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text-hi);
}
kbd, .ui-word { color: var(--text-hi); font-weight: 600; }

/* Type scale */
h1, h2, h3, h4 { color: var(--text-hi); line-height: 1.22; font-weight: 700; }
h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 10px; letter-spacing: 0.01em; }
h2 { font-size: clamp(23px, 3.2vw, 28px); margin: 0 0 14px; }
h3 { font-size: 17px; margin: 0 0 6px; }
h4 { font-size: 14.5px; margin: 0 0 4px; }

.muted { color: var(--text-mid); }
.small { font-size: 13.5px; }
.lead { font-size: 18.5px; color: var(--text-body); max-width: 36em; }

hr { border: 0; border-top: 1px solid var(--border-lo); margin: 28px 0; }

/* ---------- 3. Layout ---------------------------------------------------- */

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}
.wrap-narrow { max-width: 820px; }

.prose { max-width: 46em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 10px 0; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--text-lo); }

/* Responsive grid helpers: .grid.cols-N > children */
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Two-column feature row (text + art/shot), collapses on mobile */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.split.rev > :first-child { order: 2; }

/* ---------- 4. Top nav bar ----------------------------------------------- */

.topbar {
    background: rgba(15, 15, 19, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-lo);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-hi);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--text-hi); }
.brand img { width: 24px; height: 24px; display: block; }
.brand .colon, .colon { color: var(--accent); font-weight: 700; }

.topbar nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.topbar nav a {
    color: var(--text-mid);
    font-size: 13.5px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: var(--radius-sm);
}
.topbar nav a:hover {
    color: var(--text-body);
    background: var(--bg2);
    text-decoration: none;
}
.topbar nav a.active { color: var(--text-hi); background: var(--bg-selected); }

/* The violet Download button lives inside nav as the last link */
.topbar nav a.btn-nav {
    margin-left: 8px;
    background: var(--accent);
    color: var(--bg0);
    padding: 7px 15px;
    border-radius: var(--radius-sm);
    font-weight: 700;
}
.topbar nav a.btn-nav:hover { background: var(--accent-hi); color: var(--bg0); }
/* Current-page marker for the Download button (the accent bg hides .active's grey) */
.topbar nav a.btn-nav.active { background: var(--accent-hi); color: var(--bg0); }

/* ---------- 5. Buttons --------------------------------------------------- */

.btn {
    display: inline-block;
    border-radius: var(--radius);
    padding: 11px 22px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

.btn-accent { background: var(--accent); color: var(--bg0); }
.btn-accent:hover {
    background: var(--accent-hi);
    color: var(--bg0);
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(157, 140, 240, 0.28);
}

.btn-ghost {
    background: var(--accent-bg);
    color: var(--accent-hi);
    border-color: var(--accent-border);
    font-weight: 600;
}
.btn-ghost:hover {
    background: rgba(157, 140, 240, 0.15);
    color: #c8bdf4;
    text-decoration: none;
}

.btn-subtle {
    background: var(--bg2);
    color: var(--text-body);
    border-color: var(--border-hi);
    font-weight: 600;
}
.btn-subtle:hover {
    background: #2c2a36;
    border-color: var(--border-ctl);
    color: var(--text-body);
    text-decoration: none;
}

.btn-lg { padding: 13px 28px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: var(--radius-sm); }

/* ---------- 6. Sections + kickers ---------------------------------------- */

.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--border-lo); }
.section-tight { padding: 40px 0; }

/* Uppercase letter-spaced kicker, as in the app's group headers.
   .section-label kept as an alias for older markup. */
.kicker, .section-label {
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 10px;
    display: block;
}
.kicker-dim { color: var(--text-lo); }

/* ---------- 7. Cards + panels -------------------------------------------- */

.card {
    background: var(--bg1);
    border: 1px solid var(--border-lo);
    border-radius: var(--radius-card);
    padding: 20px 20px 18px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: border-color 120ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.card:hover {
    border-color: var(--accent-border);
    box-shadow: var(--glow-accent);
    transform: translateY(-1px);
}
.card h3 { font-size: 15.5px; }
.card p { margin: 0; font-size: 14px; color: var(--text-mid); }
.card .kicker { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 7px; }

/* Card with a decorative SVG on top (assets/art/*.svg) */
.card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-field);
    border: 1px solid var(--border-lo);
    border-radius: var(--radius-sm);
    padding: 14px 10px;
    margin-bottom: 14px;
}
.card-art img, .card-art svg { display: block; height: 88px; width: auto; max-width: 100%; }

/* Larger standalone art (in .split rows) */
.art-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(157, 140, 240, 0.07), transparent 70%), var(--bg1);
    border: 1px solid var(--border-lo);
    border-radius: var(--radius-card);
    padding: 34px 20px;
}
.art-frame img, .art-frame svg { display: block; width: min(100%, 340px); height: auto; }

.panel {
    background: var(--bg1);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-card);
    padding: 26px 28px;
}
.panel-accent { border-color: var(--accent-border); box-shadow: var(--glow-accent); }

/* Callout strip (notes, SmartScreen guidance, warnings) */
.callout {
    background: var(--bg-field);
    border: 1px solid var(--border-lo);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 13px 18px;
    font-size: 14px;
    color: var(--text-body);
    margin: 18px 0;
}
.callout.gold { border-left-color: var(--gold); }
.callout.teal { border-left-color: var(--teal); }

/* ---------- 8. Code blocks (the app's editor look) ------------------------
   Bake samples with:  python site-tools/highlight.py <lua|script|output> file
   which emits  <pre class="code code-lua" data-lang="Lua"><code>…</code></pre>
   Token colours match the in-app help palette exactly. */

pre.code {
    position: relative;
    background: var(--bg-code);
    border: 1px solid var(--border-lo);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 32px 18px 15px;
    margin: 16px 0;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--text-body);
}
pre.code code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

/* Corner language label */
pre.code::before {
    content: attr(data-lang);
    position: absolute;
    top: 9px;
    right: 13px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-lo);
    pointer-events: none;
}

pre.code.code-lua { border-left-color: var(--blue); }
pre.code.code-lua::before { color: var(--blue); }
pre.code.code-script { border-left-color: var(--gold); }
pre.code.code-script::before { color: var(--gold); }
pre.code.code-output { border-left-color: #3c4456; }
pre.code.code-output code { color: #b3bac6; }

/* Token colours - identical to the in-app help (docs/help/build-help-html.py) */
.tk-prompt { color: #7e8798; }
/* Lua */
.tk-kw  { color: #b48ce8; }
.tk-str { color: #9dce7c; }
.tk-com { color: #6e7787; font-style: italic; }
.tk-num { color: #e0aa6e; }
.tk-api { color: #5f9de8; }
/* Classic scripting (#ALIAS / #TRIGGER style) */
.tk-cmd   { color: #d4af58; font-weight: 600; }
.tk-fn    { color: #5f9de8; }
.tk-param { color: #e0aa6e; }
.tk-var   { color: #66c5b3; }
.tk-brace { color: #94a0b5; }
.tk-sep   { color: #94a0b5; }

/* Legacy hand-marked block (older pages) */
.codeblock {
    background: var(--bg-code);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius);
    padding: 16px 18px;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--text-body);
}
.codeblock .cmd { color: var(--accent-hi); font-weight: 700; }
.codeblock .str { color: var(--gold); }
.codeblock .cmt { color: var(--text-lo); }

/* ---------- 9. Screenshot frame ------------------------------------------ */

figure.shot {
    margin: 0;
    background: var(--bg1);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-deep), 0 0 0 1px rgba(157, 140, 240, 0.05);
}
.shot img { display: block; width: 100%; height: auto; }

/* Plain window-style top bar (no traffic lights): optional */
.shot-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    background: var(--bg-side);
    border-bottom: 1px solid var(--border-lo);
    color: var(--text-mid);
    font-size: 12px;
    font-weight: 600;
}
.shot-bar::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.7;
}
.shot figcaption {
    padding: 9px 14px;
    border-top: 1px solid var(--border-lo);
    color: var(--text-mid);
    font-size: 13px;
}

/* ---------- 10. Hero ------------------------------------------------------
   Radial violet glow + a faint grid (data-URI, no requests).
   Add .hero-stars instead of the grid for a sparser starfield. */

.hero {
    position: relative;
    padding: 84px 0 68px;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -12%, rgba(157, 140, 240, 0.16), transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 0H0v44' fill='none' stroke='%239d8cf0' stroke-opacity='0.055'/%3E%3C/svg%3E");
}
.hero::after {  /* fade the grid out toward the bottom of the hero */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, var(--bg0));
    pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

/* ---- home hero upgrade: lockup, type hierarchy, layered tilted shots ---- */
.hero-home { padding: 72px 0 96px; }
.hero-lockup { display: flex; align-items: center; gap: 16px; }
.hero-emblem {
    width: 52px; height: 52px; border-radius: 12px;
    box-shadow: 0 0 26px rgba(157, 140, 240, 0.45), 0 0 2px rgba(157, 140, 240, 0.8);
}
.hero-home h1 {
    font-size: clamp(40px, 5vw, 54px);
    letter-spacing: 0.5px;
    line-height: 1.05;
    margin: 0;
}
.tagline-lede {
    font-size: 22px;
    color: var(--text-hi);
    font-weight: 600;
    margin: 20px 0 10px;
    max-width: 30em;
}
.hero-home p.tagline-story {
    font-size: 16px;
    color: var(--text-mid);
    margin: 0 0 26px;
    max-width: 36em;
}
.hero-meta-row { margin: 12px 0 0; }
.hero-shots { position: relative; min-width: 0; perspective: 1200px; }
.hero-shots .shot-tilt {
    transform: rotateY(-7deg) rotateX(1.5deg);
    transition: transform 0.45s ease;
    box-shadow: var(--shadow-deep), 0 0 90px rgba(157, 140, 240, 0.22);
}
.hero-shots:hover .shot-tilt { transform: rotateY(0deg) rotateX(0deg); }
.hero-shots .shot-mini {
    position: absolute;
    width: 44%;
    left: -26px;
    bottom: -34px;
    transform: rotate(-3deg);
    border-color: var(--border-hi);
    box-shadow: var(--shadow-deep), 0 0 40px rgba(157, 140, 240, 0.16);
    transition: transform 0.45s ease;
}
.hero-shots:hover .shot-mini { transform: rotate(-1deg) translateY(-4px); }
@media (max-width: 900px) {
    .hero-home { padding: 48px 0 60px; }
    .hero-home h1 { font-size: 36px; }
    .tagline-lede { font-size: 19px; }
    .hero-shots .shot-tilt { transform: none; }
    .hero-shots .shot-mini { display: none; }
}

.hero-stars {
    background-image:
        radial-gradient(ellipse 90% 60% at 50% -12%, rgba(157, 140, 240, 0.16), transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='%23b5a7ef'%3E%3Ccircle cx='16' cy='34' r='1' opacity='.30'/%3E%3Ccircle cx='72' cy='12' r='1.3' opacity='.20'/%3E%3Ccircle cx='128' cy='46' r='1' opacity='.32'/%3E%3Ccircle cx='170' cy='20' r='1' opacity='.18'/%3E%3Ccircle cx='44' cy='84' r='1.2' opacity='.24'/%3E%3Ccircle cx='104' cy='96' r='1' opacity='.16'/%3E%3Ccircle cx='152' cy='118' r='1.3' opacity='.28'/%3E%3Ccircle cx='24' cy='142' r='1' opacity='.20'/%3E%3Ccircle cx='84' cy='160' r='1' opacity='.30'/%3E%3Ccircle cx='178' cy='168' r='1' opacity='.16'/%3E%3C/g%3E%3C/svg%3E");
}

.hero h1 .colon { color: var(--accent); }
.hero .tagline {
    font-size: 18.5px;
    color: var(--text-body);
    margin: 14px 0 26px;
    max-width: 34em;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-meta { color: var(--text-mid); font-size: 13.5px; }
.hero-meta .dot { color: var(--text-lo); padding: 0 6px; }

/* ---------- 11. Fake terminal (CSS-drawn, used in heroes) ----------------- */

.terminal {
    background: var(--bg-code);
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-deep);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.55;
}

.terminal-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-side);
    border-bottom: 1px solid var(--border-lo);
    padding: 8px 12px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-mid);
}
.terminal-titlebar .dots { display: flex; gap: 6px; }
.terminal-titlebar .dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bg2);
    border: 1px solid var(--border-hi);
    display: block;
}

.terminal-body { padding: 14px 16px 16px; overflow-x: auto; }
.terminal-body .line { white-space: pre-wrap; }
.terminal-body .room   { color: var(--gold); font-weight: 700; }
.terminal-body .desc   { color: var(--text-mid); }
.terminal-body .exits  { color: var(--teal); }
.terminal-body .say    { color: var(--blue); }
.terminal-body .combat { color: var(--bad); }
.terminal-body .sys    { color: var(--green); }
.terminal-body .plain  { color: var(--text-body); }
.terminal-body .prompt { color: var(--accent); font-weight: 700; }
.terminal-body .input  { color: var(--text-hi); }
.terminal-body .caret {
    display: inline-block;
    width: 7px; height: 15px;
    background: var(--accent);
    vertical-align: text-bottom;
    animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 12. Release box / hashes (download page) ---------------------- */

.release-box { box-shadow: var(--shadow-soft); }

.release-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.release-head h2 { margin: 0; }

.version-pill {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-hi);
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
}

.release-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
}

.hash-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-mid);
}
.hash-row .hash {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-body);
    background: var(--bg-code);
    border: 1px solid var(--border-lo);
    border-radius: 5px;
    padding: 3px 8px;
    word-break: break-all;
}
.copy-btn {
    background: var(--bg2);
    color: var(--text-mid);
    border: 1px solid var(--border-hi);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.copy-btn:hover { background: #2c2a36; color: var(--text-body); border-color: var(--border-ctl); }
.copy-btn.copied { color: var(--teal); border-color: rgba(90, 214, 192, 0.4); }

/* ---------- 13. Tables ---------------------------------------------------- */

table.tbl {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
    font-size: 14px;
}
.tbl th, .tbl td {
    border: 1px solid var(--border-lo);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.tbl th {
    background: var(--bg1);
    color: var(--text-hi);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tbl tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

/* ---------- 14. Footer ----------------------------------------------------
   Pattern: support links row, LICENSE + © line, Zugg non-affiliation line. */

footer {
    border-top: 1px solid var(--border-lo);
    background: var(--bg-side);
    padding: 32px 0 38px;
    margin-top: 64px;
    font-size: 13px;
    color: var(--text-mid);
}
footer p { margin: 5px 0; }
footer nav {
    display: flex;
    gap: 6px 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
footer nav a { color: var(--text-mid); font-weight: 600; }
footer nav a:hover { color: var(--text-body); }
footer .legal { color: var(--text-lo); font-size: 12.5px; }

/* ---------- 15. Misc helpers ---------------------------------------------- */

.support-grid {  /* legacy alias, prefer .grid.cols-2 */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
    max-width: 700px;
}
.support-grid .card p { margin-top: 4px; }

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Legacy alias for older markup */
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

/* ---------- 16. Responsive ------------------------------------------------ */

@media (max-width: 900px) {
    .hero { padding: 52px 0 44px; }
    .hero-grid, .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .split.rev > :first-child { order: 0; }
    .cols-3, .cols-4, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    body { font-size: 15px; }
    .section { padding: 44px 0; }
    .panel { padding: 20px 18px; }
    .cols-2, .cols-3, .cols-4, .cards, .support-grid { grid-template-columns: 1fr; }
    .topbar .wrap { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
    .topbar nav { gap: 2px; }
    .topbar nav a { padding: 6px 8px; }
    .topbar nav a.btn-nav { margin-left: 2px; }
    pre.code { font-size: 12.5px; }
}

/* ---------- 17. Fantasy flourishes ----------------------------------------
   Decoration only: everything here is a background or an aria-hidden img,
   absolutely positioned with pointer-events: none, sitting behind the copy.
   Palette colours only; art is baked as data-URI SVGs (no requests). */

/* City skyline along the hero's bottom edge: distant peaks, a walled town,
   a thin crescent moon, two violet-lit windows and a gold beacon.
   Markup: <div class="hero-skyline" aria-hidden="true"></div> as the FIRST
   child of .hero (before .wrap, so the copy paints above it).
   Sub-pages use .hero-skyline-sm on the same div plus .hero-town on the
   hero, which reserves bottom padding so the town sits below the copy. */
.hero-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* The scene is 1600x240 (15% aspect), cover-anchored at the bottom: any height under
       15vw crops the TOP of the scene (beheading the spire and moon). Track the aspect. */
    height: max(15vw, 120px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 240' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23b5a7ef'%3E%3Ccircle cx='70' cy='38' r='1.2' opacity='.22'/%3E%3Ccircle cx='215' cy='72' r='1' opacity='.15'/%3E%3Ccircle cx='388' cy='26' r='1.3' opacity='.26'/%3E%3Ccircle cx='545' cy='60' r='1' opacity='.14'/%3E%3Ccircle cx='702' cy='18' r='1' opacity='.2'/%3E%3Ccircle cx='905' cy='46' r='1.2' opacity='.24'/%3E%3Ccircle cx='1122' cy='26' r='1' opacity='.16'/%3E%3Ccircle cx='1258' cy='64' r='1' opacity='.14'/%3E%3Ccircle cx='1372' cy='30' r='1.2' opacity='.22'/%3E%3Ccircle cx='1548' cy='44' r='1' opacity='.18'/%3E%3C/g%3E%3Cpath d='M1456 42A24 24 0 1 1 1433 82A24 24 0 0 0 1456 42Z' fill='%23b5a7ef' fill-opacity='.13' stroke='%23b5a7ef' stroke-opacity='.4' stroke-width='1.5'/%3E%3Cpath fill='%23191822' d='M0 240V156L110 104 228 158 356 94 478 152 616 80 748 144 872 88 1010 150 1136 82 1258 138 1386 76 1500 128 1600 84V240Z'/%3E%3Cpath fill='%231c1b26' d='M0 240V186H12V178H22V186H34V178H44V186H70V148H76V140H102V148H108V190H120V182H130V190H150V182H160V190H190V166L215 148 240 166V192H268V132H272L282 100 292 132H296V192H320V184H330V192H350V184H360V192H390V184H400V192H420V138H424L440 112 456 138H460V170H500V138H504L520 112 536 138H540V192H556V184H566V192H590V184H600V192H640V172L662 156 684 172V178H700V162L720 148 740 162V192H804V152H810V80L828 44 846 80V152H852V192H872V184H882V192H906V184H916V192H944V184H954V192H984V160A22 22 0 0 1 1028 160V192H1076V184H1086V192H1110V184H1120V192H1140V142H1146L1165 118 1184 142H1190V192H1210V184H1220V192H1250V184H1260V192H1290V166L1320 150 1350 166V192H1370V184H1380V192H1410V184H1420V192H1440V148H1444L1465 124 1486 148H1490V186H1510V178H1520V186H1550V178H1560V186H1600V240Z'/%3E%3Cg fill='%239d8cf0'%3E%3Crect x='821' y='104' width='4' height='7' opacity='.5'/%3E%3Crect x='831' y='122' width='4' height='7' opacity='.45'/%3E%3Crect x='84' y='158' width='4' height='6' opacity='.4'/%3E%3Crect x='1160' y='150' width='4' height='6' opacity='.4'/%3E%3C/g%3E%3Cg fill='%23edc97a'%3E%3Ccircle cx='828' cy='38' r='7' opacity='.1'/%3E%3Ccircle cx='828' cy='38' r='2.2' opacity='.85'/%3E%3Ccircle cx='480' cy='177' r='1.6' opacity='.5'/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat;
    pointer-events: none;
    z-index: 1;
}
.hero-skyline-sm { height: max(15vw, 96px); }
.hero-town { padding-bottom: max(calc(15vw + 48px), 150px); }
@media (max-width: 900px) {
    .hero-town { padding-bottom: max(calc(15vw + 34px), 130px); }
}

/* Old-chart band decorations (compass rose, serpent coil, quill vignette).
   Add .band-chart to the section. The compass and serpent live inside a
   .chart-frame wrapper around the screenshot figure, tucked behind its
   image corners (the max() keeps them inside the viewport at narrow
   widths); the quill anchors to the section's top-right, beside the
   heading. All vanish below 960px so they never touch copy. */
.band-chart { position: relative; overflow: hidden; }
.band-chart > .wrap { position: relative; z-index: 1; }
.chart-frame { position: relative; }
.chart-frame > .shot { position: relative; z-index: 1; }
.band-art {
    position: absolute;
    pointer-events: none;
    user-select: none;
}
.band-compass { top: -78px; right: max(-62px, calc(520px - 50vw)); width: 150px; opacity: .5; }
.band-serpent { bottom: 56px; left: max(-58px, calc(520px - 50vw)); width: 175px; opacity: .55; }
.band-quill   { top: 48px; right: max(26px, calc(50% - 620px)); width: 168px; opacity: .75; }
@media (max-width: 960px) {
    .band-art { display: none; }
}

/* Ornate divider: interrupts the .section + .section hairline with a small
   violet diamond flanked by gold points. Add .section-ornate to a section
   that already has the hairline above it. */
.section-ornate { position: relative; }
.section-ornate::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 14px;
    background: var(--bg0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cg stroke='%2326242e'%3E%3Cpath d='M0 7H57'/%3E%3Cpath d='M103 7H160'/%3E%3C/g%3E%3Cpath d='M80 1.8 85.2 7 80 12.2 74.8 7Z' fill='%239d8cf0' fill-opacity='.1' stroke='%239d8cf0' stroke-opacity='.55' stroke-width='1.2'/%3E%3Ccircle cx='65' cy='7' r='1.5' fill='%23edc97a' fill-opacity='.45'/%3E%3Ccircle cx='95' cy='7' r='1.5' fill='%23edc97a' fill-opacity='.45'/%3E%3C/svg%3E") center / 160px 14px no-repeat;
    pointer-events: none;
}

/* Download page: the platform statement at readable size (was lost in small print). */
.platform-line {
    font-size: 16.5px;
    color: var(--text-body);
    margin: 6px 0 6px;
}
.platform-line strong { color: var(--text-hi); }