/* ============================================================
   Robo Kyle shared stylesheet
   Ability-solutions nonprofit. Accessible by default:
   skip link, visible focus ring, prefers-reduced-motion,
   readable measure on prose, light + dark palettes.
   ============================================================ */

/* ---------- Design tokens (light) ---------- */
:root {
    /* Native chrome (scrollbars, form controls) follows the theme instead of
       defaulting to light: white boxes and white scrollbars on a dark page. */
    color-scheme: light;
    --bg:        #FAF7F2;
    --bg-elev:  #FFFFFF;
    --bg-sunk:  #F1ECE2;
    --ink:       #171B26;
    --ink-soft:  #444B5C;
    --ink-mute:  #6B7280;
    --line:      #E4DCCE;
    --line-soft: #EFE9DC;

    --brand:      #1F5F6E;   /* deep teal */
    --brand-ink:  #FFFFFF;
    --brand-soft: #E4F0F2;
    --accent:     #E36B3E;   /* warm coral */
    --accent-ink: #FFFFFF;

    --ok:      #2E7D57;
    --warn:    #C46A18;

    /* Old-school chrome: the whole site is square-shouldered. */
    --radius-sm: 2px;
    --radius:    2px;
    --radius-lg: 2px;

    /* RS chrome tokens (RuneScape Profile Spec): bevel edges, the gold that
       marks earned numbers, panel and well surfaces. One source, site-wide. */
    --rs-gold: #8C6A1C;
    --rs-bronze: #8B5A2B;
    --rs-lite: #FFFFFF;
    --rs-dark: rgba(23,27,38,.38);
    --rs-panel: color-mix(in oklab, var(--ink) 3%, var(--bg-elev));
    --rs-well:  color-mix(in oklab, var(--ink) 9%, var(--bg-elev));
    --rs-shadow: rgba(255,255,255,.5);
    /* The second bevel step: a 1px inner line that makes outset panels and
       inset wells read as carved, not outlined. */
    --rs-step-out: inset 1px 1px 0 rgba(255,255,255,.9), inset -1px -1px 0 rgba(23,27,38,.12);
    --rs-step-in:  inset 1px 1px 0 rgba(23,27,38,.12), inset -1px -1px 0 rgba(255,255,255,.9);

    --shadow-sm: 0 1px 2px rgba(23,27,38,.06), 0 1px 1px rgba(23,27,38,.04);
    --shadow:    0 6px 18px rgba(23,27,38,.08), 0 2px 4px rgba(23,27,38,.04);
    --shadow-lg: 0 30px 60px -20px rgba(23,27,38,.25), 0 12px 24px -12px rgba(23,27,38,.15);

    --measure: 66ch;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --font-panel: "Alegreya", Georgia, "Times New Roman", serif;
}

/* ---------- Design tokens (dark) ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:        #0E1218;
        --bg-elev:  #171C25;
        --bg-sunk:  #0A0D12;
        --ink:       #F1E9DA;
        --ink-soft:  #C6CBD7;
        --ink-mute:  #8A93A3;
        --line:      #262D3A;
        --line-soft: #1D2330;

        --brand:      #6FBFCB;
        --brand-ink:  #0E1218;
        --brand-soft: #17323A;
        --accent:     #F08556;
        --accent-ink: #1A0E08;

        --ok:      #7BC59A;
        --warn:    #E6A96A;

        --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --shadow:    0 8px 22px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
        --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.55), 0 12px 24px -12px rgba(0,0,0,.4);
        --rs-gold: #E2BE55;
    --rs-bronze: #C98A5A;
        --rs-bronze: #C98A5A;
        --rs-lite: rgba(241,233,218,.30);
        --rs-dark: rgba(0,0,0,.78);
        --rs-panel: color-mix(in oklab, var(--ink) 4%, var(--bg-elev));
        --rs-well:  color-mix(in oklab, black 28%, var(--bg-elev));
        --rs-shadow: rgba(0,0,0,.9);
        --rs-step-out: inset 1px 1px 0 rgba(255,255,255,.07), inset -1px -1px 0 rgba(0,0,0,.4);
        --rs-step-in:  inset 1px 1px 0 rgba(0,0,0,.4), inset -1px -1px 0 rgba(255,255,255,.06);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:        #0E1218;
    --bg-elev:  #171C25;
    --bg-sunk:  #0A0D12;
    --ink:       #F1E9DA;
    --ink-soft:  #C6CBD7;
    --ink-mute:  #8A93A3;
    --line:      #262D3A;
    --line-soft: #1D2330;

    --brand:      #6FBFCB;
    --brand-ink:  #0E1218;
    --brand-soft: #17323A;
    --accent:     #F08556;
    --accent-ink: #1A0E08;

    --ok:      #7BC59A;
    --warn:    #E6A96A;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 8px 22px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.55), 0 12px 24px -12px rgba(0,0,0,.4);

    --rs-gold: #E2BE55;
    --rs-lite: rgba(241,233,218,.30);
    --rs-dark: rgba(0,0,0,.78);
    --rs-panel: color-mix(in oklab, var(--ink) 4%, var(--bg-elev));
    --rs-well:  color-mix(in oklab, black 28%, var(--bg-elev));
    --rs-shadow: rgba(0,0,0,.9);
    --rs-step-out: inset 1px 1px 0 rgba(255,255,255,.07), inset -1px -1px 0 rgba(0,0,0,.4);
    --rs-step-in:  inset 1px 1px 0 rgba(0,0,0,.4), inset -1px -1px 0 rgba(255,255,255,.06);
}

/* Gold numeral: earned numbers only (votes, XP, downloads, produced counts).
   Defined here so the flat pages and the app share one treatment. */
.rs-num {
    color: var(--rs-gold); font-weight: 700; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 var(--rs-shadow);
}

/* RS panel chrome, shared: the flat pages (the title screen) build from the
   same bevel the app does. Its padding also overrides the generic section
   spacing, which otherwise blows the title screen apart. */
.panel {
    background: var(--rs-panel); padding: 1.25rem; border-radius: 2px;
    border: 2px solid; border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    box-shadow: var(--rs-step-out);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Prose measure on long-form pages */
main.page > p,
main.page > ul,
main.page > ol,
main.page > blockquote,
main.page > h2,
main.page > h3 {
    max-width: var(--measure);
}

/* Headings */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 .6em;
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.5vw + 1rem, 2.25rem); margin-top: 2em; }
h3 { font-size: 1.25rem; margin-top: 1.6em; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .15s ease;
}
a:hover { color: var(--accent); }

code {
    font-family: var(--font-mono);
    font-size: .92em;
    background: var(--bg-sunk);
    padding: .12em .38em;
    border-radius: 6px;
    border: 1px solid var(--line-soft);
}
pre {
    background: var(--bg-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}
pre code { background: none; border: 0; padding: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 3rem 0;
}

/* ---------- Focus, accessibility ---------- */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--rs-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    background: var(--ink);
    color: var(--bg);
    padding: .6rem .9rem;
    border-radius: 8px;
    text-decoration: none;
    z-index: 100;
    box-shadow: var(--shadow);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Layout container ---------- */
.wrap {
    width: 100%;
    /* §10 the page frame: ~720px content + 2rem gap + 280px side panel.
       The nav shares it, so every page focuses down the same center. */
    max-width: 1064px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ---------- Site header / nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line-soft);
}
.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: .9rem clamp(1rem, 3vw, 2rem);
}
.site-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    letter-spacing: -0.01em;
}
/* The robot is a transparent PNG of dark line art, so it is drawn as a mask
   filled with the current text colour. That way it stays legible in both the
   light and the dark theme instead of vanishing into one of them. */
.site-logo .logo-mark {
    width: 30px; height: 30px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("/public/logo.png") center / contain no-repeat;
    mask: url("/public/logo.png") center / contain no-repeat;
}
.site-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
}
/* Nav links speak the chrome language: square-shouldered, quiet text, and
   the page you are on sits pressed IN like the active tab of a game client.
   No filled pills, no glow; weight and the well carry all the hierarchy. */
.site-nav a:not(.site-logo) {
    display: inline-block;
    padding: .45rem .85rem;
    border-radius: 2px;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}
.site-nav a:not(.site-logo):hover {
    background: var(--bg-sunk);
    color: var(--ink);
}
/* The section you are in: a muted blue — clearly marked, and it leaves the
   gold alone so earned numbers keep all the shine. */
.site-nav a:not(.site-logo)[aria-current="page"] {
    color: color-mix(in oklab, var(--brand) 80%, var(--ink));
    background: color-mix(in oklab, var(--brand) 12%, var(--rs-well));
    box-shadow: var(--rs-step-in), inset 0 0 0 1px color-mix(in oklab, var(--brand) 32%, transparent);
    font-weight: 600;
}

/* On the home page the logo is the current page, marked with an underline on
   the wordmark, since it is a wordmark and not a nav button. */
.site-logo[aria-current="page"] .logo-word {
    box-shadow: inset 0 -2px 0 var(--brand);
}

/* Works is the point of the site: full ink and full weight, plus a whisper
   of gold around it everywhere except on the works page itself, where the
   pressed-in current state takes over. */
/* The one emphasized destination: gold text, no box — muted toward ink so
   it marks the door without shouting through it. */
.site-nav a.nav-strong { color: color-mix(in oklab, var(--rs-gold) 55%, var(--ink-soft)); font-weight: 700; }

/* ---------- Mobile nav (hamburger) ----------
   The toggle is hidden on desktop; below 860px the link list becomes a
   drop-down panel anchored under the sticky header. Without JS the panel
   is simply always visible and wraps, so nothing becomes unreachable. */
.nav-toggle {
    display: none;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem .8rem;
    border-radius: 10px;
    cursor: pointer;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--bg-sunk); }
.nav-toggle-bars {
    width: 18px;
    height: 13px;
    position: relative;
    display: inline-block;
    flex: none;
}
.nav-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, opacity .15s ease, top .2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5.5px; }
.nav-toggle-bars span:nth-child(3) { top: 11px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
    top: 5.5px; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
    top: 5.5px; transform: rotate(-45deg);
}

@media (max-width: 860px) {
    .site-nav { padding: .7rem clamp(1rem, 4vw, 1.5rem); }
    .nav-toggle { display: inline-flex; }

    /* Only collapse the menu when JS is present to reopen it. */
    html.js .site-nav ul.nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        padding: .5rem clamp(1rem, 4vw, 1.5rem) calc(.9rem + env(safe-area-inset-bottom, 0px));
        background: var(--bg-elev);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        max-height: calc(var(--vh, 1vh) * 100 - 100%);
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    html.js .site-nav ul.nav-links.is-open { display: flex; }

    .site-nav ul.nav-links a:not(.site-logo) {
        display: block;
        width: 100%;
        padding: .8rem .9rem;
        font-size: 1rem;
        border-radius: 10px;
        min-height: 44px;
    }

    /* No-JS fallback: let the row wrap instead of overflowing. */
    html:not(.js) .site-nav { flex-wrap: wrap; }
    html:not(.js) .site-nav ul.nav-links { flex-wrap: wrap; justify-content: flex-start; }
}

/* The dropdown anchors to the nav, so the nav needs a positioning context.
   Note: no body scroll-lock here; that would break the sticky header. */
.site-nav { position: relative; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.25rem;
    border-radius: 2px;
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    background: var(--ink);
    color: var(--bg);
    font: inherit;
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    cursor: pointer;
    /* Pressed state is a swap, not a transition: bevels snap. */
    box-shadow: var(--rs-step-out);
}
.btn:hover { transform: none; }
.btn:active { transform: none; border-color: var(--rs-dark) var(--rs-lite) var(--rs-lite) var(--rs-dark); box-shadow: var(--rs-step-in); }

.btn-primary {
    background: var(--brand);
    color: var(--brand-ink);
}
.btn-primary:hover { background: color-mix(in oklab, var(--brand) 88%, black); color: var(--brand-ink); }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
    box-shadow: none;
}
.btn-ghost:hover { background: var(--bg-sunk); color: var(--ink); }

.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Homepage: the title screen (RS Spec §9) ----------
   Games do not have landing pages, they have title screens: one centered
   column, dense with real state. Logo lockup, the menu panel, live gold
   counters, latest works as inventory slots, the activity ticker. The
   chrome and the gold are the art direction; the only background is a
   whisper of vignette. */
.title-screen {
    padding: clamp(2rem, 6vw, 4rem) 1rem 3rem;
    background: radial-gradient(130% 100% at 50% 0%,
        transparent 55%, color-mix(in oklab, var(--ink) 10%, transparent) 100%);
}
.ts-col { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }
.ts-logo { text-align: center; }
.ts-mark {
    width: 84px; height: 84px; margin: 0 auto; display: block;
    background-color: var(--ink);
    -webkit-mask: url("/public/logo.png") center / contain no-repeat;
    mask: url("/public/logo.png") center / contain no-repeat;
}
.ts-name { font-size: clamp(2.6rem, 8vw, 3.5rem); margin: .35rem 0 .3rem; }
.ts-tagline {
    margin: 0; color: var(--ink-mute);
    font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
}
/* The menu panel: Play / Continue / Multiplayer. Outset chrome that presses
   inset on click, the one state change the doctrine allows. */
.ts-menu { display: flex; flex-direction: column; gap: .65rem; }
.ts-menu-btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 52px; padding: .6rem 1rem;
    font-family: var(--font-panel); font-weight: 700; font-size: 1.2rem;
    color: var(--ink); text-decoration: none; text-align: center;
    background: color-mix(in oklab, var(--ink) 6%, var(--bg-elev));
    border: 2px solid; border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    border-radius: 2px; box-shadow: var(--rs-step-out);
}
.ts-menu-btn:hover, .ts-menu-btn:focus-visible { outline: 1px solid var(--rs-gold); outline-offset: -1px; color: var(--ink); }
.ts-menu-btn:active {
    border-color: var(--rs-dark) var(--rs-lite) var(--rs-lite) var(--rs-dark);
    box-shadow: var(--rs-step-in);
}
.ts-primary { background: color-mix(in oklab, var(--brand) 16%, var(--bg-elev)); }
.ts-menu-btn .ts-sub {
    font-family: var(--font-sans); font-size: .66rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--rs-bronze) 65%, var(--ink-mute));
}
/* The counters row: the "2,000 players online" line. Real numbers only. */
.ts-counters {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: .35rem 1.4rem; padding: .6rem 1rem;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.ts-counters .rs-num { font-size: 1rem; letter-spacing: 0; }
a.ts-counter { color: var(--ink-mute); text-decoration: none; }
a.ts-counter:hover { color: var(--ink); }
.ts-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; }
.ts-panel-head h2 { font-family: var(--font-panel); font-size: 1.15rem; margin: 0; }
.ts-panel-head a { text-decoration: none; font-weight: 600; font-size: .9rem; }
/* Latest works as inventory slots (§3 chrome): items, not brochures. */
/* A real break between the counters strip and the content panels: the strip
   caps the menu block; Latest works starts the world below it. */
.ts-latest { margin-top: 4.4rem; }
.ts-slots { display: flex; flex-wrap: wrap; gap: .5rem; }

.ts-slot {
    width: 44px; height: 44px; position: relative; display: grid; place-items: center;
    background: var(--rs-well); color: var(--ink-soft);
    border: 2px solid; border-color: var(--rs-dark) var(--rs-lite) var(--rs-lite) var(--rs-dark);
    border-radius: 2px; box-shadow: var(--rs-step-in);
}
a.ts-slot { text-decoration: none; }
a.ts-slot:hover, a.ts-slot:focus-visible { outline: 1px solid var(--rs-gold); outline-offset: -1px; }
.ts-slot img { width: 40px; height: 40px; object-fit: cover; border-radius: 1px; display: block; }
.ts-slot svg { width: 24px; height: 24px; opacity: .65; }
.ts-slot .ts-stack { position: absolute; top: 0; left: 2px; font-size: .68rem; line-height: 1.1; }
.ts-empty { background: color-mix(in oklab, var(--rs-well) 65%, var(--bg-elev)); box-shadow: none; }
.ts-slots > .stat { margin: 0; align-self: center; }
/* The ticker: the receipts culture, visible before a word about it. */
.ts-activity { margin-top: .8rem; }
.ts-activity ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }
.ts-activity li { display: flex; gap: .6rem; align-items: baseline; }
.ts-activity .rs-num { min-width: 3.4ch; text-align: right; flex: none; }
.ts-activity .rs-num { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ts-activity a { text-decoration: none; }
.ts-activity a:hover { text-decoration: underline; }
/* Actor names shaded by total level: grey newcomers, gold veterans. */
.ts-activity a.lvl-new { color: var(--ink-mute); }
.ts-activity a.lvl-mid { color: var(--ink); }
.ts-activity a.lvl-high { color: var(--ok); }
.ts-activity a.lvl-gold { color: var(--rs-gold); font-weight: 700; text-shadow: 1px 1px 0 var(--rs-shadow); }
.ts-trust { text-align: center; color: var(--ink-mute); font-size: .85rem; margin: .4rem 0 0; }

/* ---------- Sections ---------- */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}
@media (max-width: 780px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat .n {
    font-family: var(--font-display);
    font-size: clamp(2rem, 2vw + 1.5rem, 3rem);
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -0.02em;
    line-height: 1;
}
.stat .l {
    display: block;
    margin-top: .5rem;
    color: var(--ink-mute);
    font-size: .9rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ---------- Split / feature row ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split .art {
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    background:
        radial-gradient(60% 60% at 30% 30%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 70%),
        linear-gradient(160deg, var(--brand-soft), var(--bg-sunk));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
/* Plain lists, the way the old web did them: square markers, no badges. */
ul.checks {
    list-style: square;
    margin: 1rem 0 0;
    padding: 0 0 0 1.2rem;
    display: grid;
    gap: .6rem;
}
.checks li { color: var(--ink-soft); }
.checks li::marker { color: var(--rs-gold); }

/* ---------- Quote / testimonial ---------- */
.quote {
    background: var(--rs-panel);
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    border-radius: 2px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow);
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--rs-step-out);
}
.quote blockquote {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.quote cite {
    font-style: normal;
    color: var(--ink-mute);
    font-size: .95rem;
}
.cta {
    background: linear-gradient(140deg, var(--brand), color-mix(in oklab, var(--brand) 60%, var(--accent)));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3.5rem);
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.cta::after {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(40% 60% at 90% 10%, rgba(255,255,255,.18), transparent 70%),
      radial-gradient(40% 60% at 5% 90%, rgba(0,0,0,.18), transparent 70%);
    pointer-events: none;
}
.cta h2 { color: #fff; margin: 0 0 .5rem; }
.cta p  { color: rgba(255,255,255,.85); margin: 0 auto 1.5rem; max-width: 38rem; }
.cta .btn-primary { background: #fff; color: var(--brand); }
.cta .btn-primary:hover { background: rgba(255,255,255,.9); color: var(--brand); }
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- Footer ---------- */
main.title-screen + .site-footer,
main:has(.title-screen) + .site-footer { margin-top: 0; }
.site-footer {
    margin-top: 4rem;
    padding: 1.1rem 0 1.25rem;
    border-top: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--ink-mute);
    font-size: .92rem;
}
/* Two rows, nothing more: brand and links on one line, the small print on
   the next. Links never break mid-word. */
.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 2rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line-soft);
}
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.footer-links a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.footer-links a:hover { color: var(--brand); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    padding-top: .9rem;
    color: var(--ink-mute);
}

/* ---------- Long-form page ---------- */
main.page {
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
    max-width: 1120px;
    margin: 0 auto;
}
main.page > h1 {
    max-width: 22ch;
}

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.25rem; }
.prose h2:first-of-type { margin-top: 0; }
/* The story floats on its own warmth: a faint tint of the accent that no other
   surface uses, a deep shadow, and no decorative border. It should feel like a
   note pinned over the page, not another component. */
.story-panel {
    background:
      radial-gradient(120% 120% at 15% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
      var(--rs-panel);
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    border-radius: 2px;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    box-shadow: var(--rs-step-out);
}
.story-panel h2 { margin-top: 0; }
.story-panel p:last-child { margin-bottom: 0; }
.about-doc .story-panel { margin: 2rem 0; }

.prose h3 {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.6rem 0 .4rem;
    color: var(--ink);
}

/* ---------- Two-column page grid (About) ---------- */
/* ---------- About page: a plain document ---------- */
/* One narrow centered column, prose directly on the background. The h1 sits
   at reading scale, not billboard scale; section heads take the panel voice
   (Alegreya) without any panel. */
.about-doc {
    max-width: 640px; margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem) 1rem;
}
.about-doc h1 { font-size: clamp(1.6rem, 2.5vw, 2rem); margin: 0 0 .6rem; }
.about-doc .lede { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 2.2rem; }
.about-doc h2 {
    font-family: var(--font-panel); font-weight: 600;
    font-size: 1.3rem; margin: 2.4rem 0 .7rem;
    border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.about-doc h2:first-of-type { border-top: 0; padding-top: 0; }
/* The story panel's own heading never takes the section rule. */
.about-doc .story-panel h2 { margin-top: 0; padding-top: 0; border-top: 0; }

/* The document pages share the title screen's ground: the same quiet
   vignette, and a small centered mark so the top is not just bare type. */
.page-vignette {
    background: radial-gradient(130% 100% at 50% 0%,
        transparent 55%, color-mix(in oklab, var(--ink) 10%, transparent) 100%);
}
.doc-head { text-align: center; }
.doc-head .lede { margin-left: auto; margin-right: auto; }
.doc-mark {
    width: 56px; height: 56px; margin: 0 auto .7rem; display: block;
    background-color: var(--ink);
    -webkit-mask: url("/public/logo.png") center / contain no-repeat;
    mask: url("/public/logo.png") center / contain no-repeat;
}
.about-doc h3 {
    font-family: var(--font-panel); font-weight: 600;
    font-size: 1.05rem; margin: 1.4rem 0 .35rem;
}
.about-doc p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 1rem; }
.about-doc .about-intro { color: var(--ink-mute); font-size: .95rem; margin-bottom: 1.6rem; }
.about-doc ul.checks { margin: .6rem 0 0; }

.about-hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
}
.about-hero .lede { max-width: 42rem; color: var(--ink-soft); font-size: 1.15rem; }

/* ---------- Guide page (guide.html) ---------- */
/* Long manual. Every section starts with a rule line so you can tell where
   you are while scrolling, and anchors land clear of the sticky header. */
.guide h2 {
    border-top: 1px solid var(--line);
    padding-top: 1.6rem;
    margin-top: 2.6rem;
    scroll-margin-top: 90px;
}
.guide h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.guide-toc {
    background: var(--rs-panel);
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    border-radius: 2px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.75rem;
    box-shadow: var(--rs-step-out);
}
.guide-toc strong {
    display: block;
    font-family: var(--font-sans);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: .6rem;
}
.guide-toc ol {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 2.5rem;
}
.guide-toc li { margin: .25rem 0; break-inside: avoid; }
.guide-toc a { text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
@media (max-width: 560px) { .guide-toc ol { columns: 1; } }

.skill-entry {
    background: var(--rs-panel);
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    border-radius: 2px;
    padding: 1rem 1.25rem;
    margin: .9rem 0;
    box-shadow: var(--rs-step-out);
}
.skill-entry h3 { margin: 0 0 .3rem; font-family: var(--font-panel); font-size: 1.1rem; }
.skill-entry .skill-scope { color: var(--ink-mute); margin: 0 0 .45rem; }
.skill-entry p:last-child { margin-bottom: 0; }

.guide-list { padding-left: 1.25rem; }
.guide-list li { margin: .55rem 0; }
.guide .story-panel { margin: 2.2rem 0; }

.values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}
@media (max-width: 620px) { .values { grid-template-columns: 1fr; } }
.values li {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.values strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: .25rem;
}
.values span { color: var(--ink-soft); font-size: .95rem; }

.timeline {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: .25rem;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 7px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--line);
}
.timeline li {
    position: relative;
    padding: .5rem 0 .8rem 1.75rem;
}
.timeline li::before {
    content: "";
    position: absolute;
    left: 0; top: .85rem;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bg-elev);
    border: 3px solid var(--brand);
}
.timeline strong { color: var(--ink); }

/* ============================================================
   Works: grid, filter bar, cards, detail pages, tutorials
   ============================================================ */

/* ---------- Filter bar ---------- */
/* The same chromed panel the profile uses: one bevel everywhere. */
.filter-bar {
    background: var(--rs-panel);
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    border-radius: 2px;
    box-shadow: var(--rs-step-out);
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
    margin-bottom: 2rem;
}
@media (max-width: 720px) { .filter-bar { grid-template-columns: 1fr; } }

.filter-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.filter-group legend {
    font-family: var(--font-sans);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 0;
    margin-bottom: .55rem;
}
.filter-group .options {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.filter-pill {
    display: inline-block;
    padding: .4rem .8rem;
    border-radius: 2px;
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    box-shadow: var(--rs-step-out);
    background: var(--rs-panel);
    color: var(--ink-soft);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-pill:hover { background: var(--bg-sunk); color: var(--ink); }
.filter-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.filter-group input[type="radio"]:focus-visible + .filter-pill {
    outline: 2px solid var(--rs-gold);
    outline-offset: 2px;
}
/* A selected pill wears the gold outline: chosen, like everything earned.
   Covers radios and checkboxes alike. */
.filter-group input:checked + .filter-pill {
    background: color-mix(in oklab, var(--rs-gold) 14%, var(--bg-elev));
    color: var(--ink);
    border-color: var(--rs-gold);
    font-weight: 600;
} all cards remain visible{ display: none; }

/* ---------- Design cards ---------- */
.design-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) { .design-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .design-grid { grid-template-columns: 1fr; } }

.design-card {
    display: flex;
    flex-direction: column;
    background: var(--rs-panel);
    border: 2px solid;
    border-color: var(--rs-lite) var(--rs-dark) var(--rs-dark) var(--rs-lite);
    border-radius: 2px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--rs-step-out);
}
.design-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
    color: inherit;
}
.design-card:focus-visible {
    outline: 2px solid var(--rs-gold);
    outline-offset: 2px;
}
.design-card .thumb {
    aspect-ratio: 4 / 3;
    background: linear-gradient(140deg, var(--brand-soft), var(--bg-sunk));
    display: grid;
    place-items: center;
    color: var(--brand);
    border-bottom: 1px solid var(--line-soft);
}
.design-card .thumb svg { width: 44%; height: 44%; opacity: .8; }

.design-card .body {
    padding: 1.1rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}
.design-card h3 {
    font-family: var(--font-sans);
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.design-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.design-card .meta {
    margin-top: auto;
    padding-top: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.design-card .thumb.has-photo { padding: 0; }
.design-card .thumb.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Status + needs badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    border-radius: 2px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid transparent;
}
.badge::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.tag {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 2px;
    background: var(--bg-sunk);
    color: var(--ink-soft);
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--line-soft);
}
.btn[aria-disabled="true"],
.btn.is-disabled {
    background: var(--bg-sunk) !important;
    color: var(--ink-mute) !important;
    border-color: var(--line) !important;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}
.btn[aria-disabled="true"] .arrow { display: none; }

.steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.5rem;
}
.steps li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.25rem;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow-sm);
}
.steps li::before {
    counter-increment: step;
    content: counter(step);
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}
.steps h3 {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .35rem;
}
.steps p { margin: 0 0 .75rem; color: var(--ink-soft); }

/* ============================================================
   MOBILE LAYER
   Everything above is the desktop-first design; this block is the
   phone/tablet pass. Ordered last so it wins on equal specificity.
   Breakpoints match site.js: 860px = mobile, 1024px = tablet.
   ============================================================ */

/* --- Never scroll sideways, no matter the content ---
   `clip` rather than `hidden`: `hidden` would turn body into a scroll
   container and break the sticky header. */
html, body { max-width: 100%; }
body { overflow-x: clip; }

/* Long URLs, emails and IDs are the usual culprits for overflow. */
p, li, dd, h1, h2, h3, h4, blockquote, cite, .lede, .meta, .tag {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Wide children scroll inside their own box rather than the page. */
table { display: block; width: 100%; overflow-x: auto; }

/* Respect notches / rounded corners on modern phones. */
.site-footer {
        margin-top: 2rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

@media (max-width: 860px) {
    body { font-size: 16px; }

    /* Tighter vertical rhythm; desktop spacing wastes a phone screen. */
    section { padding: clamp(2.25rem, 8vw, 3.25rem) 0; }
    h2 { margin-top: 1.4em; }

    /* Comfortable thumb targets everywhere (WCAG 2.2 target size). */
    .btn { min-height: 44px; padding: .75rem 1.15rem; }
    .filter-pill { min-height: 44px; display: inline-flex; align-items: center; }
    .site-footer ul a { display: inline-block; padding: .35rem 0; min-height: 32px; }
}

@media (max-width: 620px) {
    /* Decorative panels eat too much of a short viewport. */
    .split .art { aspect-ratio: 16 / 10; }
}

@media (max-width: 420px) {          /* purely decorative, aria-hidden */
    .stats { grid-template-columns: 1fr; }
    .site-logo { font-size: 1.05rem; }
}

/* Coarse pointers get no hover-lift, since it sticks after a tap. */
@media (hover: none) {
    .btn:hover { transform: none; box-shadow: var(--shadow-sm); }
    .btn:hover .arrow { transform: none; }
}