@font-face {
    font-family: 'Departure Mono';
    src: url('fonts/DepartureMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* IBM Plex Mono (OFL, fonts/IBMPlexMono-LICENSE.txt): controls only. Departure Mono stays the
   instrument face for bars, readouts and labels; Plex is the legible one for anything you click. */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Inconsolata';
    src: url('fonts/Inconsolata-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Departure Mono is self-hosted for public navigation and interface labels. */
/* ════════════════════════════════════════════
   NOVACON
   Black · monochrome · mono type · hairline frame
   ════════════════════════════════════════════ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Tokens ── */
/* Headline white: warm off-white, softer than --kb-fg at display sizes. Outside the generated Kilobit block. */
:root { --headline: #ece7de; }
:root {
    /* Kilobit theme. Rewritten by kilobit.setup/theme/apply.js from kilobit-black.json; edit there, not here. */
    --kb-bg: #0e1012; /* kb: bg */
    --kb-fg: #fefefe; /* kb: fg */
    --kb-steel: #798186; /* kb: accent */
    --kb-border: #a8adb0; /* kb: border */
    --kb-warm: #c9c2b4; /* kb: warm */
    --kb-orange: #dd6046; /* kb: redDim */
    --kb-red: #cc4324; /* kb: red */

    --bg: var(--kb-bg);
    --surface: color-mix(in srgb, var(--kb-fg) 3%, var(--kb-bg));
    --text: color-mix(in srgb, var(--kb-fg) 95%, transparent);
    --text-dim: color-mix(in srgb, var(--kb-fg) 55%, transparent);
    --text-faint: color-mix(in srgb, var(--kb-fg) 32%, transparent);
    --line: color-mix(in srgb, var(--kb-fg) 14%, transparent);
    --line-strong: color-mix(in srgb, var(--kb-fg) 34%, transparent);
    --ok: color-mix(in srgb, var(--kb-fg) 95%, transparent);
    --err: var(--kb-red);

    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

    /* Primitive type scale — components consume these steps. */
    /* Type roles: Inter for headlines and reading, Departure Mono for interface + data (11px grid). */
    --font-read: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --read: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
    --read-lg: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    --label: 11px;
    --label-lg: 22px;
    --font-control: 'IBM Plex Mono', var(--font-mono);
    --control: 0.8125rem;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.625rem;

    --text-ui: var(--fs-sm);
    --text-body: var(--fs-sm);
    --text-title: var(--fs-md);
    --text-hero: clamp(1.25rem, 0.875rem + 1.5vw, 2.5rem);
    --leading-ui: 1.25;
    --leading-body: 1.6;
    --leading-tight: 1.15;

    /* One responsive frame controls every outer alignment. */
    /* Wide screens: the frame grows so content sits in a centred 1440px column. */
    --frame-inline: max(clamp(22px, 5.5vw, 75px), calc((100vw - 1440px) / 2));
    --frame-block: clamp(26px, 4.5vh, 75px);
    --measure: 760px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --nav-h: calc(var(--frame-block) + 128px);
    --radius: 4px;
}

/* Section rhythm without leaving black: a hairline, not a lighter panel. */
.paper {
    border-top: 1px solid var(--line);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Paper grain ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 220px 220px;
}

::selection {
    background: color-mix(in srgb, var(--kb-fg) 22%, transparent);
    color: var(--kb-fg);
}

a { color: inherit; text-decoration: none; cursor: pointer; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--kb-fg) 16%, transparent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── Screens (landing / login switching) ── */
.screen {
    display: none;
    min-height: 100vh;
    width: 100%;
}

.screen.active { display: block; }

/* ── Shared primitives ── */
.label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
}

.section {
    padding: clamp(72px, 12vh, 132px) var(--frame-inline);
}

.section-inner {
    max-width: 900px;
    margin: 0 auto;
}

.section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.section-head .rule {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--line-strong);
}

.section-heading {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-title);
    line-height: var(--leading-ui);
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Emphasis reads as a dotted-underlined phrase, never a colour shift. */
.section-heading em,
.hero-title em,
.guarantee-heading em,
.auth-title em {
    font-style: inherit;
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.04em;
    text-underline-offset: 0.16em;
}

.section-sub {
    max-width: var(--measure);
    font-size: var(--text-body);
    color: var(--text-dim);
    margin-bottom: clamp(40px, 6vh, 64px);
}

/* ── Actions: text first, hairline box only for the primary ── */
.btn {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.16em;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.btn:hover { text-decoration: none; }

.btn--solid {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 22px;
    text-decoration: none;
}

.btn--solid:hover {
    border-color: var(--line-strong);
    text-decoration: none;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 1px solid var(--line-strong);
    outline-offset: 4px;
}

/* ── Reveal system ──
   Content is visible by default; only hidden when JS is present
   (html.js) so nothing disappears without JavaScript. */
html.js .rv {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s var(--ease);
}

html.js .rv.in {
    opacity: 1;
    transform: none;
}

html.js .rv-d1 { transition-delay: 0.08s; }
html.js .rv-d2 { transition-delay: 0.16s; }
html.js .rv-d3 { transition-delay: 0.24s; }

html.js .rv-line {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s var(--ease) 0.15s;
}

html.js .rv-line.in { transform: scaleX(1); }

/* ══════════════════════════
   NAV — chrome inside the frame, no bar
   ══════════════════════════ */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: var(--frame-block) var(--frame-inline) 0;
    background: none;
    border: 0;
    pointer-events: none;
}

.site-nav > * { pointer-events: auto; }

.nav-brand img {
    height: 20px;
    width: auto;
    display: block;
    opacity: 0.85;
}

.nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.nav-links a,
.nav-links a.nav-cta {
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text);
    border: 0;
    padding: 0;
    background: none;
    transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.nav-cta:hover {
    color: var(--kb-fg);
    background: none;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.16em;
}

/* The call-to-action sits apart from the wayfinding links. */
.nav-links a.nav-cta { margin-top: 12px; }

/* ══════════════════════════
   HERO
   ══════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 40px) var(--frame-inline) clamp(96px, 16vh, 180px);
    background: var(--bg);
}

.hero-inner { width: 100%; }

.hero-label {
    color: var(--text-dim);
    margin-bottom: 26px;
}

.hero-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-hero);
    line-height: var(--leading-tight);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    max-width: 22ch;
    margin: 0 auto;
    text-wrap: balance;
}

.hero-sub {
    margin: 28px auto 0;
    max-width: 56ch;
    font-size: var(--text-body);
    color: var(--text-dim);
}

.hero-sub strong { font-weight: 400; color: var(--text); }

.hero-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* ══════════════════════════
   LANDING MARK
   ══════════════════════════ */
.mark-stage {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg);
}

.particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.mark {
    position: relative;
    z-index: 1;
    width: min(58vw, 420px);
    opacity: 0.85;
    animation: mark-in 1.2s ease both;
}

@keyframes mark-in {
    from { opacity: 0; }
    to { opacity: 0.85; }
}

/* ══════════════════════════
   CARDS (capabilities / portfolio / add-ons)
   ══════════════════════════ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 48px;
}

.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    padding: 22px 0 0;
}

.card-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--text-faint);
    margin-bottom: 14px;
}

.card h3 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-title);
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: var(--leading-ui);
    margin-bottom: 12px;
}

.card p {
    font-size: var(--text-body);
    color: var(--text-dim);
    line-height: var(--leading-body);
}

/* ══════════════════════════
   CTA BAND (shared)
   ══════════════════════════ */
.cta-band {
    border-top: 1px solid var(--line);
    background: var(--bg);
    text-align: center;
}

.cta-band .section-head { justify-content: center; }
.cta-band .section-heading { margin-bottom: 26px; }

.cta-band .section-sub {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
}

/* ══════════════════════════
   PRIVACY PAGE
   ══════════════════════════ */
.pv-hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + clamp(88px, 16vh, 180px));
    padding-bottom: clamp(72px, 12vh, 140px);
}

.pv-title { max-width: 26ch; }

/* ── Tiers ── */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 28px 30px;
    transition: border-color 0.2s ease;
}

.tier-card:hover,
.tier-card--featured { border-color: var(--line-strong); }

.tier-badge {
    position: absolute;
    top: 0;
    left: 22px;
    transform: translateY(-50%);
    background: var(--bg);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0 8px;
}

.tier-name {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-title);
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: var(--leading-ui);
    margin-bottom: 6px;
}

.tier-for {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-bottom: 26px;
}

.tier-price {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--fs-xl);
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 26px;
}

.tier-price span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-dim);
}

.tier-scope { list-style: none; }

.tier-scope li {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    line-height: var(--leading-body);
    padding: 10px 0 10px 20px;
    border-top: 1px solid var(--line);
    position: relative;
}

.tier-scope li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--text-faint);
}

/* ── Add-ons ── */
.addon-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.addon-head h3 { margin-bottom: 0; }

.addon-price {
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    color: var(--text-dim);
    white-space: nowrap;
}

.addon-price span { font-size: var(--fs-xs); }

/* ── Guarantee band ── */
.guarantee {
    padding: clamp(104px, 18vh, 190px) var(--frame-inline);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    text-align: center;
}

.guarantee-label {
    color: var(--text-dim);
    margin-bottom: 28px;
}

.guarantee-heading {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-hero);
    line-height: var(--leading-tight);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 30px;
    text-wrap: balance;
}

.guarantee-copy {
    max-width: var(--measure);
    margin: 0 auto;
    font-size: var(--text-body);
    color: var(--text-dim);
}

/* ══════════════════════════
   FOOTER
   ══════════════════════════ */
.site-footer {
    border-top: 1px solid var(--line);
    background: var(--bg);
    padding: clamp(56px, 9vh, 90px) var(--frame-inline) var(--frame-block);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 52px;
}

.footer-brand img {
    height: 20px;
    width: auto;
    opacity: 0.85;
    margin-bottom: 20px;
}

.footer-blurb {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    max-width: 34ch;
}

.footer-col .label {
    display: block;
    margin-bottom: 16px;
}

.footer-col a {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-dim);
    padding: 5px 0;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--text);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.16em;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
}

.footer-bottom p {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ══════════════════════════
   LOGIN
   ══════════════════════════ */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--frame-block) var(--frame-inline);
    background: var(--bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    text-align: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 52px 40px 44px;
}

.auth-logo {
    height: 20px;
    width: auto;
    opacity: 0.85;
    margin-bottom: 36px;
}

.auth-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-xl);
    line-height: var(--leading-tight);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 10px;
}

.auth-sub { margin-bottom: 32px; }

.auth-log {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 28px;
    max-height: 180px;
    overflow-y: auto;
}

.log-line {
    font-size: var(--fs-xs);
    letter-spacing: 0;
    color: var(--text-dim);
    line-height: 1.8;
    min-height: 12px;
}

.log-line.success { color: var(--ok); }
.log-line.error { color: var(--err); }

.auth-card .btn {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 22px;
    text-decoration: none;
}

.auth-card .btn:hover { border-color: var(--line-strong); }

.nostr-hint {
    margin-top: 16px;
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.status {
    margin-top: 14px;
    font-size: var(--fs-xs);
    min-height: 18px;
}

.status.success { color: var(--ok); }
.status.error { color: var(--err); }

/* ══════════════════════════
   DASHBOARD
   ══════════════════════════ */
.dashboard-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--frame-block) var(--frame-inline) 96px;
}

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-logo {
    height: 20px;
    width: auto;
    opacity: 0.85;
}

.dash-title {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-ui);
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: var(--leading-ui);
}

.dash-sub {
    font-size: var(--fs-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
}

.dash-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

/* Shared control chrome — one hairline pill for every dashboard control. */
.ghost-btn,
.tool-item,
.terminal-btn,
.tool-toggle {
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 16px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ghost-btn:hover,
.tool-item:hover,
.terminal-btn:hover:not(:disabled),
.tool-toggle:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.tool-item.active,
.tool-toggle.active {
    color: var(--text);
    border-color: var(--line-strong);
}

.terminal-btn { color: var(--text); }

.terminal-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.tool-toggle { font-size: var(--fs-xs); padding: 8px 13px; }

/* ── Tool menu ── */
.tool-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

/* ── Tool panels ── */
.tool-panel {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(22px, 3vw, 34px);
}

.tool-panel.active { display: block; }

.tool-panel h3 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-ui);
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dim { color: var(--text-dim); font-size: var(--fs-xs); }

.tool-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: var(--measure);
    margin-top: 16px;
}

/* ── Upload / gallery ── */
.upload-section {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 22px;
}

.file-input-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 14px;
}

.file-input-wrapper input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-status {
    margin-top: 12px;
    font-size: var(--fs-xs);
    color: var(--text-dim);
    min-height: 16px;
}

.collapsible { cursor: pointer; user-select: none; }
.collapsible:hover { color: var(--kb-fg); }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.5s var(--ease);
}

.gallery-item:hover img { transform: scale(1.04); }

.delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.delete-btn:hover { color: var(--err); border-color: var(--err); }

.gallery-empty {
    color: var(--text-dim);
    font-size: var(--fs-xs);
    padding: 8px 0;
}

/* ── Password generator ── */
.pass-output {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    text-align: center;
}

.pass-output code {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    letter-spacing: 0.02em;
    color: var(--text);
    word-break: break-all;
}

.pass-buttons,
.tool-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Inputs ── */
.tool-textarea,
.tool-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    padding: 13px 15px;
    outline: none;
    transition: border-color 0.2s ease;
}

.tool-textarea { min-height: 110px; resize: vertical; }

.tool-textarea:focus,
.tool-input:focus { border-color: var(--line-strong); }

/* ── Hashing ── */
.hash-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.hash-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: baseline;
}

.hash-row span {
    font-size: var(--fs-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
}

.hash-row code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text);
    word-break: break-all;
}

/* ── Bitcoin ── */
.btc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.btc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.btc-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.btc-stat span {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.btc-stat strong {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--fs-lg);
}

/* Gain/loss must stay legible without colour alone carrying the meaning. */
.btc-stat strong.positive { color: var(--text); }
.btc-stat strong.negative { color: var(--err); }

.btc-chart-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
}

/* ── Lightbox ── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox.active { display: flex; }

.lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border: 1px solid var(--line);
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 28px;
    font-family: var(--font-mono);
    font-size: 30px;
    color: var(--text-dim);
    cursor: pointer;
    line-height: 1;
}

.lightbox-close:hover { color: var(--text); }

/* ══════════════════════════
   RESPONSIVE
   ══════════════════════════ */
@media (max-width: 900px) {
    .card-grid,
    .card-grid--3 { grid-template-columns: 1fr 1fr; }

    .tier-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .nav-links a.nav-hide-sm { display: none; }
    .nav-links a.nav-cta { margin-top: 0; }

    .card-grid,
    .card-grid--3 { grid-template-columns: 1fr; }

    .hero-actions .btn { width: 100%; text-align: center; }

    .addon-head {
        flex-direction: column;
        gap: 6px;
    }

    .auth-card { padding: 40px 24px 36px; }

    .dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .btc-grid { grid-template-columns: 1fr; }

    .hash-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── QA / no-animation mode ── */
html.noanim { scroll-behavior: auto; }
html.noanim .mark { animation: none; }
html.noanim .hero { min-height: 0; }

/* ══════════════════════════
   REDUCED MOTION
   ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    html.js .rv,
    html.js .rv-line {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .mark { animation: none; }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}
/* ══════════════════════════
   PUBLIC HOME — black editorial frame
   ══════════════════════════ */
.home-page {
    --home-paper: var(--kb-fg);
    --home-muted: color-mix(in srgb, var(--kb-fg) 58%, transparent);
    --home-faint: color-mix(in srgb, var(--kb-fg) 28%, transparent);
    --home-line: color-mix(in srgb, var(--kb-fg) 18%, transparent);
    --home-line-strong: color-mix(in srgb, var(--kb-fg) 42%, transparent);
    position: relative;
    overflow: clip; /* not hidden: a scroll container here would swallow the slides' scroll-snap */
    color: var(--home-paper);
    background: var(--kb-bg);
    font-family: var(--font-mono);
}

.home-page a,
.home-page button {
    -webkit-tap-highlight-color: transparent;
}

.home-page a:focus-visible,
.home-page button:focus-visible {
    outline-color: var(--home-paper);
}

.home-header {
    position: fixed;
    inset: var(--frame-block) var(--frame-inline) auto;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}

.home-brand,
.menu-toggle {
    pointer-events: auto;
}

.home-brand img {
    display: block;
    width: auto;
    height: clamp(18px, 2vw, 24px);
    opacity: 0.9;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    color: var(--home-paper);
    background: transparent;
    font: inherit;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}


.site-menu {
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    width: min(290px, calc(100vw - 2 * var(--frame-inline)));
    padding: 22px 24px 20px;
    border: 1px solid var(--home-line);
    background: color-mix(in srgb, var(--kb-bg) 96%, transparent);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
    pointer-events: auto;
}

.site-menu[hidden] { display: none; }

.site-menu nav {
    display: grid;
    gap: 4px;
}

.site-menu nav a,
.menu-member-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border: 0;
    color: var(--home-paper);
    background: transparent;
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
}

.site-menu nav a:hover,
.menu-member-link:hover {
    color: var(--home-muted);
}

.menu-member-link {
    width: 100%;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--home-line);
    color: var(--home-muted);
}

.home-hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--frame-block) + 74px) var(--frame-inline) clamp(34px, 6vh, 72px);
    border-bottom: 1px solid var(--home-line);
}

.home-hero-meta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: var(--home-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-hero-copy {
    width: min(100%, 1120px);
    margin: auto 0;
    padding: clamp(58px, 11vh, 136px) 0;
}

.home-kicker,
.home-section-label {
    color: var(--home-muted);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-kicker { margin-bottom: 28px; }

.home-hero h1 {
    max-width: 9ch;
    color: var(--home-paper);
    font-family: var(--font-serif);
    font-size: clamp(3.4rem, 9vw, 8.8rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.92;
    text-wrap: balance;
}

.home-hero h1 em,
.service-row h2 em,
.home-contact h2 em {
    color: var(--home-muted);
    font-style: italic;
}

.home-intro {
    max-width: 44ch;
    margin-top: 36px;
    color: var(--home-muted);
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.2vw, 1.35rem);
    line-height: 1.45;
}

.home-scroll-link,
.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 42px;
    color: var(--home-paper);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-scroll-link span,
.contact-link span {
    color: var(--home-muted);
    font-size: var(--label-lg);
    transition: transform 0.25s ease;
}

.home-scroll-link:hover span,
.contact-link:hover span {
    transform: translate(3px, -3px);
}

.home-services,
.home-approach,
.home-contact {
    padding: clamp(76px, 12vw, 170px) var(--frame-inline);
    border-bottom: 1px solid var(--home-line);
}

.home-section-label {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(40px, 7vw, 92px);
}

.home-section-label span {
    color: var(--home-faint);
    letter-spacing: 0;
    text-transform: none;
}

.service-list {
    border-top: 1px solid var(--home-line);
}

.service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    padding: clamp(23px, 3vw, 40px) 0;
    border-bottom: 1px solid var(--home-line);
}

.service-row h2 {
    color: var(--home-paper);
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 4.4rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1;
}

.service-row p {
    margin-top: 12px;
    color: var(--home-muted);
    font-size: var(--fs-xs);
}

.service-arrow {
    color: var(--home-muted);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    transition: color 0.25s ease, transform 0.25s ease;
}

.service-row:hover .service-arrow {
    color: var(--home-paper);
    transform: translate(4px, -4px);
}

.home-approach {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr);
    gap: 30px;
}

.home-approach .home-section-label {
    display: block;
    margin-bottom: 0;
}

.home-approach .home-section-label span {
    display: block;
    margin-top: 12px;
}

.approach-copy {
    max-width: 19ch;
    color: var(--home-paper);
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.3vw, 5rem);
    font-style: italic;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.home-contact {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-contact .home-section-label {
    margin-bottom: 70px;
}

.home-contact h2 {
    max-width: 15ch;
    color: var(--home-paper);
    font-family: var(--font-serif);
    font-size: clamp(2.7rem, 7vw, 7.2rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.92;
}

.home-footer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 24px var(--frame-inline) 30px;
    color: var(--home-faint);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-footer a:hover { color: var(--home-paper); }

.back-to-top {
    position: fixed;
    right: var(--frame-inline);
    bottom: calc(var(--frame-block) + 48px);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--home-line);
    color: var(--home-paper);
    background: color-mix(in srgb, var(--kb-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--departure-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease;
}

.back-to-top span { color: var(--home-orange); }

.home-page.intro-passed .back-to-top {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.back-to-top:hover { border-color: var(--home-orange); }

@media (max-width: 600px) {
    .home-hero-meta,
    .home-section-label,
    .home-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .home-hero-copy { padding: 80px 0; }

    .home-intro { margin-top: 28px; }

    .home-scroll-link { margin-top: 34px; }

    .home-section-label span { margin-left: 0; }

    .home-approach { display: block; }

    .home-approach .home-section-label {
        margin-bottom: 54px;
    }

    .approach-copy { max-width: 15ch; }

    .home-contact { min-height: 64vh; }

    .home-contact .home-section-label { margin-bottom: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle-glyph,
    .home-scroll-link span,
    .contact-link span,
    .service-arrow {
        transition: none;
    }
}
/* ══════════════════════════
   SOLITUDE PUBLIC SLIDES
   ══════════════════════════ */
html:has(.home-page) {
    background: var(--kb-bg);
    scroll-padding-top: 0;
    scroll-snap-type: y mandatory;
}

body:has(.home-page) {
    background: var(--kb-bg);
}

.home-page {
    --home-paper: var(--kb-fg);
    --home-muted: color-mix(in srgb, var(--kb-fg) 62%, transparent);
    --home-faint: color-mix(in srgb, var(--kb-fg) 34%, transparent);
    --home-line: color-mix(in srgb, var(--kb-steel) 34%, transparent);
    --home-line-strong: var(--kb-border);
    --home-steel: var(--kb-steel);
    --home-warm: var(--kb-warm);
    --home-orange: var(--kb-orange);
    --home-orange-dim: color-mix(in srgb, var(--kb-orange) 75%, var(--kb-fg));
    --departure-ui: var(--label);
    --menu-ui: var(--label-lg);
    background: var(--kb-bg);
}

/* ff-tracking (MIT, backgrounds/ff-tracking-LICENSE.txt), greyscale + slowed.
   Screen blend: black adds nothing, so the page bg stays --kb-bg. Strongest on the landing slide. */
.ambient-video {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: calc(0.22 - 0.16 * var(--intro-progress, 0));
}

.motion-off .ambient-video { display: none; }

@media (prefers-reduced-motion: reduce) {
    html:not(.motion-on) .ambient-video { display: none; }
}

.slide-scan {
    position: fixed;
    inset: 0 0 auto;
    z-index: 15;
    height: 22vh;
    pointer-events: none;
    opacity: 0;
    border-bottom: 1px solid var(--kb-orange);
    transform: translateY(-22vh);
}

.slide-scan span {
    position: absolute;
    right: var(--frame-inline);
    bottom: 6px;
    font-family: 'Departure Mono', ui-monospace, monospace;
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kb-orange);
}

.slide-scan[data-dir='up'] {
    border-bottom: 0;
    border-top: 1px solid var(--kb-orange);
}

.slide-scan[data-dir='up'] span { bottom: auto; top: 6px; }

/* Option A: the bare 1px line and its label, no glow band, quick. */
.slide-scan.is-scanning { animation: slide-scan-down 0.45s cubic-bezier(0.65, 0, 0.35, 1) both; }
.slide-scan.is-scanning[data-dir='up'] { animation-name: slide-scan-up; }

@keyframes slide-scan-down {
    0% { opacity: 1; transform: translateY(-22vh); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(100vh); }
}

@keyframes slide-scan-up {
    0% { opacity: 1; transform: translateY(100vh); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-22vh); }
}

#ambientCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.82;
}

.home-page > main,
.home-page > footer {
    position: relative;
    z-index: 1;
}

.home-header { z-index: 20 !important; }

.home-brand-target {
    display: none;
}

.home-page.intro-enhanced .home-brand-target {
    display: block;
    width: clamp(110px, 10vw, 147px);
    aspect-ratio: 1200 / 196;
}

.home-page.intro-enhanced .home-brand {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21;
    display: block;
    aspect-ratio: 1200 / 196;
    opacity: 0;
    will-change: width, transform;
}

.home-page.intro-enhanced.intro-positioned .home-brand {
    opacity: 1;
}

.home-page .home-brand .brand-glitch-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-glitch-layer--cyan,
.brand-glitch-layer--red {
    opacity: 0;
    pointer-events: none;
}

.home-page.intro-enhanced:not(.brand-is-moving) .brand-glitch-layer--base {
    animation: brand-glitch 3.4s step-end infinite;
}

.home-page.intro-enhanced:not(.brand-is-moving) .brand-glitch-layer--cyan {
    filter: brightness(0) saturate(100%) invert(63%) sepia(87%) saturate(533%) hue-rotate(139deg) brightness(95%);
    animation: brand-glitch-cyan 3.4s step-end infinite;
}

.home-page.intro-enhanced:not(.brand-is-moving) .brand-glitch-layer--red {
    filter: brightness(0) saturate(100%) invert(47%) sepia(39%) saturate(1792%) hue-rotate(324deg) brightness(97%);
    animation: brand-glitch-red 3.4s step-end infinite;
}

@keyframes brand-glitch {
    0%, 69%, 73%, 91%, 95%, 100% { transform: none; opacity: 0.9; }
    70% { transform: translateX(-2px) skewX(-2deg); opacity: 0.76; }
    71% { transform: translateX(3px); opacity: 1; }
    92% { transform: scaleX(1.008); opacity: 0.82; }
    93% { transform: translateX(-1px); opacity: 1; }
}

@keyframes brand-glitch-cyan {
    0%, 69%, 72%, 91%, 94%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: none; }
    70% { clip-path: inset(12% 0 62% 0); opacity: 0.72; transform: translateX(-7px); }
    71% { clip-path: inset(66% 0 12% 0); opacity: 0.52; transform: translateX(4px); }
    92% { clip-path: inset(38% 0 42% 0); opacity: 0.62; transform: translateX(-5px); }
    93% { clip-path: inset(76% 0 8% 0); opacity: 0.45; transform: translateX(3px); }
}

@keyframes brand-glitch-red {
    0%, 69%, 72%, 91%, 94%, 100% { clip-path: inset(100% 0 0 0); opacity: 0; transform: none; }
    70% { clip-path: inset(58% 0 18% 0); opacity: 0.65; transform: translateX(7px); }
    71% { clip-path: inset(24% 0 58% 0); opacity: 0.46; transform: translateX(-4px); }
    92% { clip-path: inset(8% 0 74% 0); opacity: 0.58; transform: translateX(5px); }
    93% { clip-path: inset(48% 0 34% 0); opacity: 0.4; transform: translateX(-3px); }
}

html.noanim .brand-glitch-layer {
    animation: none !important;
}

/* Orange (kb-orange) dash tracing the big intro logo; hidden once it shrinks into the header. */
.brand-outline {
    display: none;
}

.home-page.intro-enhanced .brand-outline {
    position: absolute;
    /* outline.svg has 4 units of padding around the 1200x196 logo so the stroke isn't clipped */
    top: -2.0408%;
    left: -0.3333%;
    display: block;
    width: 100.6667%;
    height: 104.0816%;
    max-width: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.home-page.intro-enhanced:not(.brand-is-moving) .brand-outline {
    opacity: 1;
}

html.noanim .brand-outline {
    display: none !important;
}

.home-page.intro-enhanced .menu-toggle,
.home-page.intro-enhanced .slide-indicator,
.home-page.intro-enhanced > .home-footer {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.home-page.intro-enhanced.intro-passed .menu-toggle,
.home-page.intro-enhanced.intro-passed .slide-indicator,
.home-page.intro-enhanced.intro-passed > .home-footer {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.landing-hero {
    padding: 0;
}


.site-menu {
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: blur(24px) saturate(0.78);
    backdrop-filter: blur(24px) saturate(0.78);
}

.menu-toggle,
.site-menu,
.slide-indicator,
.home-page .home-hero-meta,
.home-page .home-kicker,
.home-page .home-section-label,
.home-page .home-scroll-link,
.home-page .contact-link,
.home-page .service-next,
.home-page .home-footer {
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--departure-ui);
    text-transform: uppercase;
}

.site-menu nav a,
.menu-member-link {
    font-size: var(--menu-ui);
}

.site-menu nav {
    gap: 8px;
}

.site-menu nav > a,
.menu-group-label {
    color: var(--home-paper);
    font-size: var(--menu-ui);
    text-transform: uppercase;
}

.menu-group-label {
    display: block;
    padding: 9px 0 5px;
}

.menu-submenu {
    display: grid;
    gap: 3px;
    padding: 0 0 9px 14px;
}

.site-menu .menu-submenu a {
    padding: 4px 0;
    color: var(--home-muted);
    font-size: var(--menu-ui);
}

.site-menu nav a:hover,
.site-menu nav a[aria-current="page"] {
    color: var(--home-warm);
}

.menu-toggle,
.site-menu nav a,
.menu-member-link,
.home-page .home-footer,
.home-page .home-hero-meta,
.home-page .home-kicker,
.home-page .home-section-label,
.home-page .home-scroll-link,
.home-page .contact-link,
.home-page .service-next {
    color: var(--home-paper);
}


.home-page .menu-member-link {
    border-top: 0;
    color: var(--home-muted);
    font-size: var(--departure-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slide-deck {
    position: relative;
    z-index: 1;
}

.page-slide {
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    isolation: isolate;
    padding: calc(var(--frame-block) + 78px) var(--frame-inline) clamp(72px, 10vh, 120px);
}

.page-slide > * {
    position: relative;
    z-index: 1;
}

html.js .page-slide .home-hero-copy,

html.js .page-slide .home-index,
html.js .page-slide .service-slide-inner,
html.js .page-slide .home-section-label,
html.js .page-slide .approach-copy,
html.js .page-slide .home-contact h2,
html.js .page-slide .home-contact .contact-link {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.8s var(--ease);
}

html.js .page-slide.is-visible .home-hero-copy,

html.js .page-slide.is-visible .home-index,
html.js .page-slide.is-visible .service-slide-inner,
html.js .page-slide.is-visible .home-section-label,
html.js .page-slide.is-visible .approach-copy,
html.js .page-slide.is-visible .home-contact h2,
html.js .page-slide.is-visible .home-contact .contact-link {
    opacity: 1;
    transform: none;
}

.home-hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: calc(var(--frame-block) + 74px);
    border-bottom: 1px solid var(--home-line);
}

.home-hero-copy {
    width: min(100%, 900px);
    margin: auto 0;
    padding: 0;
}

.home-hero h1,
.service-detail h2,
.home-contact h2 {
    color: var(--headline);
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 800;
    text-transform: lowercase;
}

.home-hero h1 {
    max-width: 9ch;
    font-size: clamp(3.4rem, 9vw, 8.8rem);
    letter-spacing: -0.055em;
    line-height: 0.92;
}

.home-hero h1 em,
.service-detail h2 em,
.home-contact h2 em {
    color: var(--home-warm);
    font-style: inherit;
}

.home-intro {
    max-width: 46ch;
    margin-top: 28px;
    color: var(--home-muted);
    font-family: var(--font-read);
    font-size: var(--read);
    line-height: 1.5;
}

.home-hero .home-scroll-link {
    margin-top: 32px;
}

.service-slide {
    display: grid;
    align-items: center;
    border-bottom: 1px solid var(--home-line);
}

.service-slide-inner {
    width: 100%;
    margin: 0;
}

.service-layout {
    display: grid;
    /* Even split across the frame: copy on the left, the window owns the right half. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(40px, 5vw, 96px);
}

.service-slide .home-section-label {
    justify-content: flex-start;
    gap: clamp(16px, 3vw, 40px);
    margin-bottom: clamp(32px, 6vh, 56px);
}

/* The subtitle names the slide's topic: a reading role, so Inter at reading size, paired with the label. */
.home-page .home-section-label span {
    color: var(--home-muted);
    font-family: var(--font-read);
    font-size: var(--read);
    letter-spacing: 0;
    text-transform: none;
}

/* Label + topic read as one line: same size, weight and tone do the separating. */
.home-page .home-section-label:has(.label-code) {
    justify-content: flex-start;
    column-gap: 0.75em;
}

.service-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-detail h2 {
    max-width: 12ch;
    font-size: clamp(3.2rem, 7vw, 7.5rem);
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.service-detail p {
    max-width: 46ch;
    margin-top: clamp(24px, 4vh, 36px);
    color: var(--home-muted);
    font-family: var(--font-read);
    font-size: var(--read);
    line-height: 1.5;
}

/* Buttons are terminal commands: a hairline chip like TOP, an orange prompt, and on hover the line
   is "selected", inverting to orange the way a terminal highlights a choice. */
.ai-experts-cta,
.frame-button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--kb-steel);
    color: var(--kb-fg);
    background: color-mix(in srgb, var(--kb-bg) 72%, transparent);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.15s steps(2), background 0.15s steps(2), border-color 0.15s steps(2);
}

.ai-experts-cta { margin: 0 clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px); }

.ai-experts-cta::before,
.frame-button::before {
    content: '>';
    color: var(--kb-orange);
}

.ai-experts-cta span,
.frame-button span {
    margin-left: auto;
    padding-left: 8px;
    color: var(--kb-orange);
}

.ai-experts-cta:hover,
.ai-experts-cta:focus-visible,
.frame-button:hover,
.frame-button:focus-visible {
    border-color: var(--kb-orange);
    color: var(--kb-bg);
    background: var(--kb-orange);
}

.ai-experts-cta:hover::before,
.ai-experts-cta:hover span,
.ai-experts-cta:focus-visible::before,
.ai-experts-cta:focus-visible span,
.frame-button:hover::before,
.frame-button:hover span,
.frame-button:focus-visible::before,
.frame-button:focus-visible span {
    color: var(--kb-bg);
}

.service-window {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--home-line);
    background: color-mix(in srgb, var(--kb-bg) 46%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.service-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--home-line);
    color: var(--home-muted);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-window-bar span:first-child {
    color: var(--home-steel);
    font-size: var(--label);
    letter-spacing: 0.1em;
}

.service-window-list {
    display: grid;
    gap: clamp(14px, 2.2vh, 26px);
    margin: 0;
    padding: clamp(24px, 3vw, 48px);
    list-style: none;
    color: var(--home-paper);
    font-family: var(--font-read);
    font-size: var(--read-lg);
    line-height: 1.5;
}

.service-window-list li {
    display: grid;
    grid-template-columns: 1.1em minmax(0, 1fr);
}

.service-window-list li::before {
    content: '>';
    font-family: 'Departure Mono', var(--font-mono);
    color: var(--home-steel);
}

@media (max-width: 820px) {
    .service-slide .home-section-label {
        margin-bottom: clamp(22px, 4vh, 36px);
    }

    .service-layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(20px, 3vh, 28px);
    }

    .service-window {
        width: min(100%, 560px);
    }

    .service-window-bar {
        padding: 8px 11px;
    }

    .service-window-list {
        gap: 10px;
        padding: 16px 16px 18px;
        font-size: 1rem;
    }
}

.service-next {
    align-self: flex-start;
    margin-top: 30px;
    color: var(--home-muted) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-next span {
    display: inline-block;
    margin-left: 13px;
    color: var(--home-orange);
    transition: transform 0.25s ease;
}

.service-next:hover span { transform: translateY(4px); }

.home-approach {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid var(--home-line);
}

.home-approach .home-section-label {
    display: flex;
    justify-content: flex-start;
    gap: clamp(16px, 3vw, 40px);
    margin-bottom: clamp(32px, 6vh, 56px);
}

.home-approach .home-section-label span {
    display: inline;
    margin-top: 0;
    color: var(--home-faint);
}

.approach-copy {
    max-width: 19ch;
    color: var(--home-paper);
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.4rem, 5vw, 6rem);
    font-style: normal;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.96;
    text-transform: lowercase;
}

.home-contact {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid var(--home-line);
}

.home-contact .home-section-label {
    justify-content: flex-start;
    gap: clamp(16px, 3vw, 40px);
    margin-bottom: clamp(32px, 6vh, 56px);
}

.home-contact h2 {
    max-width: 15ch;
    font-size: clamp(3rem, 7vw, 7.2rem);
    letter-spacing: -0.055em;
    line-height: 0.92;
}

.slide-indicator {
    position: fixed;
    right: var(--frame-inline);
    bottom: calc(var(--frame-block) + 6px);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--home-muted);
    font-size: var(--departure-ui);
    letter-spacing: 0.08em;
}

.slide-indicator-track {
    position: relative;
    display: block;
    width: 64px;
    height: 1px;
    background: var(--home-line);
}

#slide-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 14%;
    background: var(--home-orange);
    transition: width 0.5s var(--ease);
}

.home-page > .home-footer {
    position: fixed;
    left: var(--frame-inline);
    bottom: calc(var(--frame-block) + 6px);
    z-index: 15;
    width: auto;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 600px) {
    .page-slide {
        padding-top: calc(var(--frame-block) + 62px);
        padding-bottom: 70px;
    }

    .home-hero-copy { padding: 0; }

    .home-hero-meta { gap: 4px; }

    .service-detail {
        display: flex;
    }

    .service-detail h2 { margin-bottom: 0; }

    .service-next {
        display: inline-block;
        margin-top: 28px;
    }

    .home-approach {
        display: flex;
    }

    .home-approach .home-section-label { margin-bottom: 40px; }

    .approach-copy { max-width: 15ch; }

    .slide-indicator {
        right: var(--frame-inline);
        bottom: 28px;
    }

    .home-page > .home-footer {
        bottom: 28px;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        font-size: 0.6875rem;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:has(.home-page) { scroll-snap-type: none; }

    html.js .page-slide .home-hero-copy,

    html.js .page-slide .home-index,
    html.js .page-slide .service-slide-inner,
    html.js .page-slide .home-section-label,
    html.js .page-slide .approach-copy,
    html.js .page-slide .home-contact h2,
    html.js .page-slide .home-contact .contact-link {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #slide-progress,
    .service-next span {
        transition: none;
    }

    .home-page.intro-enhanced .home-brand,
    .brand-glitch-layer {
        animation: none !important;
        transition: none;
    }

    .brand-outline {
        display: none !important;
    }
}
.page-slide {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
}

.home-hero {
    padding-bottom: 70px;
}

.home-hero-copy {
    padding: 0;
}

@media (max-width: 600px) {
    .home-hero {
        padding-bottom: 52px;
    }
}

/* ══════════════════════════
   FRAMED PUBLIC PAGES
   ══════════════════════════ */
.frame-body {
    height: 100%;
    overflow: hidden;
    background: var(--kb-bg);
}

.frame-page {
    --frame-paper: var(--kb-fg);
    --frame-muted: color-mix(in srgb, var(--kb-fg) 65%, transparent);
    --frame-faint: color-mix(in srgb, var(--kb-fg) 34%, transparent);
    --frame-line: color-mix(in srgb, var(--kb-steel) 34%, transparent);
    --frame-steel: var(--kb-steel);
    --frame-warm: var(--kb-warm);
    --frame-orange: var(--kb-orange);
    --frame-gutter: clamp(20px, 4vw, 76px);
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    color: var(--frame-paper);
    background: var(--kb-bg);
    font-family: var(--font-read);
}

.frame-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('backgrounds/solitude-3.jpg') center / cover no-repeat;
    filter: grayscale(1) contrast(1.15);
    opacity: 0.018;
    pointer-events: none;
}

.frame-header {
    position: absolute;
    top: clamp(22px, 3vh, 30px);
    left: var(--frame-gutter);
    right: var(--frame-gutter);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.frame-brand {
    display: block;
    width: clamp(110px, 10vw, 147px);
}

.frame-brand img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.92;
}

.frame-page-nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 34px);
    color: var(--frame-muted);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.frame-page-nav a {
    transition: color 0.2s ease;
}

.frame-page-nav a:hover,
.frame-page-nav a[aria-current='page'] {
    color: var(--frame-paper);
}

.frame-shell {
    position: absolute;
    top: clamp(72px, 10vh, 96px);
    right: var(--frame-gutter);
    bottom: clamp(18px, 3vh, 30px);
    left: var(--frame-gutter);
    z-index: 2;
    display: grid;
    grid-template:
        'title title' 34px
        'index scroll' minmax(0, 1fr)
        'status status' 30px
        / clamp(190px, 17vw, 250px) minmax(0, 1fr);
    min-height: 0;
    border: 1px solid var(--frame-line);
    background: color-mix(in srgb, var(--kb-bg) 58%, transparent);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.frame-shell::after {
    content: '';
    position: absolute;
    inset: 34px 0 30px;
    z-index: 4;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        color-mix(in srgb, var(--kb-fg) 1.8%, transparent) 4px
    );
    pointer-events: none;
}

.frame-titlebar,
.frame-statusbar {
    position: relative;
    z-index: 5;
    display: grid;
    align-items: center;
    color: var(--frame-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.frame-titlebar {
    grid-area: title;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    padding: 0 12px;
    border-bottom: 1px solid var(--frame-line);
}

.frame-titlebar > :last-child {
    justify-self: end;
}

.frame-controls {
    color: var(--frame-steel);
    font-size: 0.4375rem;
    letter-spacing: 0.35em;
}

.frame-index {
    grid-area: index;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(20px, 4vh, 38px) 0;
    border-right: 1px solid var(--frame-line);
    overflow: auto;
    scrollbar-width: none;
}

.frame-index::-webkit-scrollbar {
    display: none;
}

.frame-index a {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 9px clamp(14px, 1.7vw, 24px);
    color: var(--frame-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    line-height: 1.3;
    text-transform: uppercase;
    transition: color 0.2s ease, background 0.2s ease;
}

.frame-index a span {
    color: var(--frame-steel);
}

.frame-index a:hover,
.frame-index a[aria-current='page'] {
    color: var(--frame-paper);
    background: color-mix(in srgb, var(--kb-steel) 8%, transparent);
}

.frame-index a[aria-current='page'] span {
    color: var(--frame-orange);
}

.frame-scroll {
    grid-area: scroll;
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--frame-steel) transparent;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26px, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}

.frame-scroll:focus-visible {
    outline: 1px solid var(--frame-orange);
    outline-offset: -2px;
}

.frame-scroll::-webkit-scrollbar {
    width: 5px;
}

.frame-scroll::-webkit-scrollbar-thumb {
    background: var(--frame-steel);
}

.frame-scroll-content {
    width: min(100%, 1360px);
    margin: 0 auto;
}

.frame-section {
    min-height: 72vh;
    min-height: 72dvh;
    padding: clamp(54px, 9vh, 100px) clamp(28px, 6vw, 96px);
    border-bottom: 1px solid var(--frame-line);
    scroll-margin-top: 24px;
}

.frame-section:last-child {
    border-bottom: 0;
}

.frame-intro {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.frame-eyebrow,
.frame-tier-code,
.frame-tier-meta,
.resume-entry-meta,
.resume-role,
.resume-capabilities span,
.resume-education span {
    color: var(--frame-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.frame-section h1,
.frame-section h2,
.frame-section h3 {
    color: var(--headline);
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 800;
}

.frame-section h1 {
    max-width: 13ch;
    margin-top: clamp(24px, 5vh, 52px);
    font-size: clamp(3.2rem, 6.2vw, 6.6rem);
    letter-spacing: -0.06em;
    line-height: 0.9;
    text-transform: lowercase;
}

.frame-resume-intro h1 {
    max-width: 12ch;
    font-size: clamp(3.2rem, 7vw, 7.5rem);
}

.frame-section h2 {
    max-width: 13ch;
    margin-top: clamp(18px, 3vh, 32px);
    font-size: clamp(2.7rem, 5.8vw, 6.3rem);
    letter-spacing: -0.055em;
    line-height: 0.92;
    text-transform: lowercase;
}

.frame-section h1 em,
.frame-section h2 em {
    color: var(--frame-warm);
    font-style: inherit;
}

.frame-section h3 {
    font-size: clamp(1.15rem, 1rem + 0.55vw, 1.6rem);
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.frame-section p,
.frame-section li {
    color: var(--frame-muted);
    font-family: var(--font-read);
    font-size: clamp(0.9375rem, 0.88rem + 0.22vw, 1.0625rem);
    line-height: 1.5;
}

.frame-lede {
    max-width: 58ch;
    margin-top: clamp(26px, 4vh, 42px);
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem) !important;
}

.frame-actions,
.frame-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: clamp(26px, 5vh, 44px);
    color: var(--frame-muted);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    text-transform: uppercase;
}






.frame-card-grid,
.frame-tier-grid {
    display: grid;
    gap: 1px;
    margin-top: clamp(38px, 7vh, 72px);
    background: var(--frame-line);
    border: 1px solid var(--frame-line);
}

.frame-card-grid--3,
.frame-tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.frame-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frame-card,
.frame-tier {
    padding: clamp(22px, 3vw, 38px);
    background: color-mix(in srgb, var(--kb-bg) 94%, transparent);
}

.frame-card > span {
    display: block;
    margin-bottom: clamp(36px, 7vh, 72px);
    color: var(--frame-steel);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.frame-card p {
    margin-top: 16px;
}

.frame-records,
.resume-timeline,
.resume-capabilities {
    margin-top: clamp(38px, 7vh, 72px);
    border-top: 1px solid var(--frame-line);
}

.frame-record {
    display: grid;
    grid-template-columns: minmax(170px, 0.35fr) 1fr;
    gap: clamp(28px, 5vw, 80px);
    padding: clamp(24px, 4vh, 42px) 0;
    border-bottom: 1px solid var(--frame-line);
}

.frame-record > span {
    color: var(--frame-paper);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    text-transform: uppercase;
}

.frame-record p {
    max-width: 70ch;
}

.frame-tier {
    position: relative;
}

.frame-tier--active {
    box-shadow: inset 0 2px 0 var(--frame-orange);
}

.frame-tier h3 {
    min-height: 2.2em;
    margin-top: 30px;
}

.frame-tier-meta {
    margin-top: 12px;
    color: var(--frame-warm) !important;
}

.frame-tier ul,
.resume-entry ul {
    margin-top: 26px;
    list-style: none;
}

.frame-tier li,
.resume-entry li {
    position: relative;
    padding-left: 18px;
    margin-top: 9px;
}

.frame-tier li::before,
.resume-entry li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--frame-steel);
}

.frame-statement,
.frame-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.frame-statement > p:last-child,
.frame-contact > p {
    max-width: 66ch;
    margin-top: 28px;
}

.resume-entry {
    display: grid;
    grid-template-columns: minmax(150px, 0.28fr) 1fr;
    gap: clamp(28px, 5vw, 76px);
    padding: clamp(30px, 5vh, 52px) 0;
    border-bottom: 1px solid var(--frame-line);
}

.resume-entry-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resume-entry-meta span:last-child {
    color: var(--frame-faint);
}

.resume-entry h3 {
    font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2.35rem);
}

.resume-role {
    margin-top: 8px;
}

.resume-capabilities > div {
    display: grid;
    grid-template-columns: minmax(160px, 0.3fr) 1fr;
    gap: clamp(24px, 5vw, 70px);
    padding: 24px 0;
    border-bottom: 1px solid var(--frame-line);
}

.resume-education {
    max-width: 760px;
    margin-top: clamp(38px, 7vh, 70px);
    padding: 24px 0;
    border-top: 1px solid var(--frame-line);
    border-bottom: 1px solid var(--frame-line);
}

.resume-education p {
    margin-top: 10px;
}

.frame-statusbar {
    grid-area: status;
    grid-template-columns: 1fr minmax(80px, 180px) 48px;
    gap: 14px;
    padding: 0 12px;
    border-top: 1px solid var(--frame-line);
}

.frame-progress-track {
    position: relative;
    display: block;
    height: 1px;
    background: var(--frame-line);
}

#frame-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--frame-orange);
    transition: width 0.12s linear;
}

.frame-statusbar > :last-child {
    justify-self: end;
}

@media (max-width: 760px) {
    .frame-page {
        --frame-gutter: 10px;
    }

    .frame-header {
        top: 20px;
    }

    .frame-brand {
        width: 110px;
    }

    .frame-page-nav {
        gap: 14px;
        font-size: 0.6875rem;
    }

    .frame-page-nav a:last-child {
        display: none;
    }

    .frame-shell {
        top: 66px;
        bottom: 10px;
        grid-template:
            'title' 32px
            'index' 42px
            'scroll' minmax(0, 1fr)
            'status' 27px
            / minmax(0, 1fr);
    }

    .frame-titlebar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 0 9px;
    }

    .frame-titlebar > :nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    .frame-index {
        flex-direction: row;
        align-items: stretch;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--frame-line);
        overflow-x: auto;
    }

    .frame-index a {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 11px;
        white-space: nowrap;
    }

    .frame-scroll {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    }

    .frame-section {
        min-height: 68vh;
        min-height: 68dvh;
        padding: 44px 18px;
    }

    .frame-intro {
        min-height: 100%;
    }

    .frame-section h1,
    .frame-resume-intro h1 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .frame-section h2 {
        font-size: clamp(2.3rem, 11vw, 3.6rem);
    }

    .frame-card-grid--3,
    .frame-card-grid--2,
    .frame-tier-grid {
        grid-template-columns: 1fr;
    }

    .frame-card > span {
        margin-bottom: 28px;
    }

    .frame-record,
    .resume-entry,
    .resume-capabilities > div {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .frame-tier h3 {
        min-height: 0;
    }

    .frame-statusbar {
        grid-template-columns: minmax(0, 1fr) 80px 40px;
        gap: 8px;
        padding: 0 8px;
        font-size: 0.5625rem;
    }

    .frame-statusbar > :first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frame-scroll {
        scroll-behavior: auto;
    }

    #frame-progress,
    .frame-button,
    .frame-index a {
        transition: none;
    }
}

/* ══════════════════════════
   MEMBER AUTHENTICATION
   ══════════════════════════ */
.auth-screen {
    --auth-paper: var(--kb-fg);
    --auth-muted: color-mix(in srgb, var(--kb-fg) 64%, transparent);
    --auth-faint: color-mix(in srgb, var(--kb-fg) 34%, transparent);
    --auth-line: color-mix(in srgb, var(--kb-steel) 34%, transparent);
    --auth-steel: var(--kb-steel);
    --auth-warm: var(--kb-warm);
    --auth-orange: var(--kb-orange);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--auth-paper);
    background: var(--kb-bg);
}

.auth-screen::before,
.dashboard-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('backgrounds/solitude-5.jpg') center / cover no-repeat;
    filter: grayscale(1) contrast(1.15);
    opacity: 0.018;
    pointer-events: none;
}

.auth-header {
    position: absolute;
    top: clamp(22px, 3vh, 30px);
    left: clamp(20px, 4vw, 76px);
    right: clamp(20px, 4vw, 76px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-brand {
    width: clamp(110px, 10vw, 147px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.auth-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.auth-back,
.auth-statusbar,
.auth-eyebrow,
.auth-console-bar,
.auth-login-button,
.nostr-hint,
.status {
    font-family: 'Departure Mono', var(--font-mono);
    text-transform: uppercase;
}

.auth-back {
    padding: 0;
    border: 0;
    color: var(--auth-muted);
    background: transparent;
    font-size: clamp(0.75rem, 0.7rem + 0.18vw, 0.875rem);
    letter-spacing: 0.06em;
    cursor: pointer;
}

.auth-back:hover {
    color: var(--auth-paper);
}

.auth-layout {
    position: absolute;
    top: clamp(82px, 11vh, 108px);
    right: clamp(20px, 4vw, 76px);
    bottom: clamp(54px, 7vh, 72px);
    left: clamp(20px, 4vw, 76px);
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: clamp(54px, 9vw, 150px);
}

.auth-intro {
    align-self: center;
}

.auth-eyebrow {
    color: var(--auth-faint);
    font-size: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);
    letter-spacing: 0.08em;
}

.auth-intro h1 {
    max-width: 8ch;
    margin-top: clamp(26px, 5vh, 50px);
    color: var(--headline);
    font-family: 'Inter', sans-serif;
    font-size: clamp(4rem, 8vw, 8.4rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.9;
    text-transform: lowercase;
}

.auth-intro h1 em {
    color: var(--auth-warm);
    font-style: inherit;
}

.auth-intro > p:last-child {
    max-width: 54ch;
    margin-top: clamp(26px, 4vh, 40px);
    color: var(--auth-muted);
    font-family: var(--font-read);
    font-size: clamp(1rem, 0.94rem + 0.24vw, 1.1875rem);
    line-height: 1.5;
}

.auth-console {
    width: 100%;
    border: 1px solid var(--auth-line);
    background: color-mix(in srgb, var(--kb-bg) 62%, transparent);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.auth-console-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid var(--auth-line);
    color: var(--auth-faint);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

.auth-console-bar > :first-child {
    color: var(--auth-steel);
    font-size: 0.4375rem;
    letter-spacing: 0.35em;
}

.auth-console-bar > :last-child {
    justify-self: end;
}

.auth-console-body {
    padding: clamp(20px, 3vw, 34px);
}

.auth-console .auth-log {
    height: clamp(210px, 30vh, 310px);
    margin: 0;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid var(--auth-line);
    overflow-y: auto;
    color: var(--auth-muted);
    background: transparent;
    font-family: 'Inconsolata', monospace;
    font-size: clamp(0.875rem, 0.83rem + 0.16vw, 1rem);
    line-height: 1.55;
}

.auth-console .log-line {
    margin: 0 0 6px;
    color: var(--auth-muted);
}

.auth-console .log-line::before {
    content: '>';
    margin-right: 9px;
    color: var(--auth-steel);
}

.auth-console .log-line.error {
    color: var(--auth-orange);
}

.auth-console .log-line.success {
    color: var(--auth-warm);
}

.auth-controls {
    display: grid;
    gap: 13px;
    padding-top: 22px;
}

.auth-login-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--auth-line);
    color: var(--auth-paper);
    background: color-mix(in srgb, var(--kb-steel) 8%, transparent);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.auth-login-button:hover {
    border-color: var(--auth-steel);
    background: color-mix(in srgb, var(--kb-steel) 14%, transparent);
}

.auth-login-button:disabled {
    color: var(--auth-faint);
    cursor: wait;
}

.auth-login-button span {
    color: var(--auth-orange);
}

.auth-console .nostr-hint {
    margin: 0;
    color: var(--auth-faint);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

.auth-console .status {
    min-height: 1.5em;
    margin-top: 14px;
    color: var(--auth-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}

.auth-console .status.error {
    color: var(--auth-orange);
}

.auth-console .status.success {
    color: var(--auth-warm);
}

.auth-statusbar {
    position: absolute;
    right: clamp(20px, 4vw, 76px);
    bottom: clamp(20px, 3vh, 28px);
    left: clamp(20px, 4vw, 76px);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--auth-faint);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

/* ══════════════════════════
   PRIVATE DASHBOARD
   ══════════════════════════ */
.dashboard-body {
    height: 100%;
    overflow: hidden;
    background: var(--kb-bg);
}

.dashboard-page {
    --dash-paper: var(--kb-fg);
    --dash-muted: color-mix(in srgb, var(--kb-fg) 64%, transparent);
    --dash-faint: color-mix(in srgb, var(--kb-fg) 34%, transparent);
    --dash-line: color-mix(in srgb, var(--kb-steel) 34%, transparent);
    --dash-steel: var(--kb-steel);
    --dash-warm: var(--kb-warm);
    --dash-orange: #ff2e88; /* private-area accent: neon pink, never on public pages */
    caret-color: var(--dash-orange);
    --dash-gutter: clamp(20px, 4vw, 76px);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    color: var(--dash-paper);
    background: var(--kb-bg);
    font-family: 'Inconsolata', monospace;
}

.dashboard-header {
    position: absolute;
    top: clamp(22px, 3vh, 30px);
    right: var(--dash-gutter);
    left: var(--dash-gutter);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-brand {
    display: block;
    width: clamp(110px, 10vw, 147px);
}

.dashboard-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.dashboard-session {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--dash-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: clamp(0.6875rem, 0.65rem + 0.14vw, 0.8125rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-session > span::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    background: var(--dash-orange);
}

.dashboard-session .profile-photo {
    width: 28px;
    height: 28px;
    border: 1px solid var(--dash-line);
    border-radius: 0;
    object-fit: cover;
}

.dashboard-logout {
    padding: 0;
    border: 0;
    color: var(--dash-muted);
    background: transparent;
    font-family: 'Departure Mono', var(--font-mono);
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    cursor: pointer;
}

.dashboard-logout:hover {
    color: var(--dash-paper);
}

.dashboard-workspace {
    position: absolute;
    top: clamp(72px, 10vh, 96px);
    right: var(--dash-gutter);
    bottom: clamp(18px, 3vh, 30px);
    left: var(--dash-gutter);
    z-index: 2;
    display: grid;
    grid-template:
        'title title' 34px
        'rail panels' minmax(0, 1fr)
        'status status' 30px
        / clamp(190px, 17vw, 250px) minmax(0, 1fr);
    min-height: 0;
    border: 1px solid var(--dash-line);
    background: color-mix(in srgb, var(--kb-bg) 58%, transparent);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.dashboard-titlebar,
.dashboard-statusbar {
    display: grid;
    align-items: center;
    color: var(--dash-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: clamp(0.625rem, 0.59rem + 0.12vw, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-titlebar {
    grid-area: title;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    padding: 0 12px;
    border-bottom: 1px solid var(--dash-line);
}

.dashboard-titlebar > :first-child {
    color: var(--dash-steel);
    font-size: 0.4375rem;
    letter-spacing: 0.35em;
}

.dashboard-titlebar > :last-child {
    justify-self: end;
}

.dashboard-page .dashboard-tool-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
    padding: clamp(20px, 4vh, 38px) 0;
    border-right: 1px solid var(--dash-line);
    overflow: auto;
}

.dashboard-page .tool-item {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    width: 100%;
    padding: 10px clamp(14px, 1.7vw, 24px);
    border: 0;
    color: var(--dash-faint);
    background: transparent;
    font-family: 'Departure Mono', var(--font-mono);
    font-size: clamp(0.6875rem, 0.65rem + 0.14vw, 0.8125rem);
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.dashboard-page .tool-item::before {
    content: attr(data-key);
    color: var(--dash-steel);
}

.dashboard-page .tool-item:hover,
.dashboard-page .tool-item.active {
    color: var(--dash-paper);
    background: color-mix(in srgb, var(--kb-steel) 8%, transparent);
}

.dashboard-page .tool-item.active::before {
    color: var(--dash-orange);
}

.dashboard-panels {
    grid-area: panels;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dashboard-page .tool-panel {
    display: none;
    height: 100%;
    margin: 0;
    padding: clamp(32px, 5vw, 72px);
    overflow: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-page .tool-panel.active {
    display: block;
}

.dashboard-panel-head {
    margin-bottom: clamp(30px, 6vh, 58px);
}

.dashboard-panel-head > p,
.dashboard-panel-head > span,
.dashboard-card-label,
.dashboard-tool-card label {
    color: var(--dash-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: clamp(0.6875rem, 0.65rem + 0.14vw, 0.8125rem);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dashboard-panel-head h1 {
    margin: clamp(16px, 3vh, 28px) 0 12px;
    color: var(--headline);
    font-family: 'Inter', sans-serif;
    font-size: clamp(3rem, 6vw, 6.4rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.9;
    text-transform: lowercase;
}

.dashboard-panel-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.dashboard-panel-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.4fr) 1fr;
    gap: 1px;
    border: 1px solid var(--dash-line);
    background: var(--dash-line);
}

.dashboard-tool-card {
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid var(--dash-line);
    color: var(--dash-muted);
    background: color-mix(in srgb, var(--kb-bg) 82%, transparent);
}

.dashboard-panel-grid .dashboard-tool-card {
    border: 0;
}

.dashboard-tool-card h3 {
    margin: 18px 0 10px;
    color: var(--dash-paper);
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.7rem);
    font-weight: 600;
}

.dashboard-page .dim {
    color: var(--dash-muted);
    font-family: 'Inconsolata', monospace;
    line-height: 1.45;
}

.dashboard-page .terminal-btn,
.dashboard-page .tool-toggle {
    padding: 11px 13px;
    border: 1px solid var(--dash-line);
    color: var(--dash-paper);
    background: color-mix(in srgb, var(--kb-steel) 8%, transparent);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.dashboard-page .terminal-btn:hover,
.dashboard-page .tool-toggle:hover,
.dashboard-page .tool-toggle.active {
    border-color: var(--dash-steel);
    background: color-mix(in srgb, var(--kb-steel) 15%, transparent);
}

.dashboard-page .file-input-wrapper {
    margin-top: 24px;
}

.dashboard-page .tool-content {
    display: grid;
    gap: 14px;
    max-width: 980px;
}

.dashboard-page .tool-input,
.dashboard-page .tool-textarea {
    width: 100%;
    border: 1px solid var(--dash-line);
    color: var(--dash-paper);
    background: color-mix(in srgb, var(--kb-bg) 50%, transparent);
    font-family: 'Inconsolata', monospace;
    font-size: 1rem;
}

.dashboard-page .tool-input:focus,
.dashboard-page .tool-textarea:focus {
    border-color: var(--dash-steel);
    outline: none;
}

.dashboard-page .pass-output {
    min-height: 120px;
    display: flex;
    align-items: center;
    padding: 22px;
    border: 1px solid var(--dash-line);
    overflow-x: auto;
    background: color-mix(in srgb, var(--kb-bg) 50%, transparent);
}

.dashboard-page .pass-output code {
    color: var(--dash-warm);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: clamp(1rem, 0.8rem + 1vw, 1.8rem);
}

.dashboard-page .pass-buttons,
.dashboard-page .tool-buttons,
.dashboard-page .btc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-page .hash-results {
    display: grid;
    gap: 1px;
    border: 1px solid var(--dash-line);
    background: var(--dash-line);
}

.dashboard-page .hash-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    background: var(--kb-bg);
}

.dashboard-page .hash-row span {
    color: var(--dash-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: 0.6875rem;
}

.dashboard-page .hash-row code {
    overflow-x: auto;
    color: var(--dash-muted);
    font-family: 'Inconsolata', monospace;
}

.dashboard-page .btc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--dash-line);
    background: var(--dash-line);
}

.dashboard-page .btc-stat {
    padding: clamp(18px, 3vw, 30px);
    background: color-mix(in srgb, var(--kb-bg) 90%, transparent);
}

.dashboard-page .btc-stat span {
    color: var(--dash-faint);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
}

.dashboard-page .btc-stat strong {
    display: block;
    margin-top: 12px;
    color: var(--dash-paper);
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.4rem, 1.15rem + 1vw, 2.4rem);
    font-weight: 800;
}

.dashboard-page .btc-chart-wrap {
    margin-top: 1px;
    padding: 20px;
    border: 1px solid var(--dash-line);
    background: color-mix(in srgb, var(--kb-bg) 82%, transparent);
}

.dashboard-statusbar {
    grid-area: status;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 12px;
    border-top: 1px solid var(--dash-line);
}

.dashboard-statusbar > :last-child {
    justify-self: end;
}

@media (max-width: 820px) {
    .auth-layout {
        grid-template-columns: 1fr;
        align-content: center;
        gap: 30px;
    }

    .auth-intro h1 {
        font-size: clamp(3.1rem, 13vw, 5rem);
    }

    .auth-intro > p:last-child {
        display: none;
    }

    .auth-console .auth-log {
        height: min(24vh, 190px);
    }

    .dashboard-page {
        --dash-gutter: 10px;
    }

    .dashboard-header {
        top: 20px;
    }

    .dashboard-brand {
        width: 110px;
    }

    .dashboard-session > span {
        display: none;
    }

    .dashboard-workspace {
        top: 66px;
        bottom: 10px;
        grid-template:
            'title' 32px
            'rail' 44px
            'panels' minmax(0, 1fr)
            'status' 27px
            / minmax(0, 1fr);
    }

    .dashboard-titlebar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 0 9px;
    }

    .dashboard-titlebar > :nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }

    .dashboard-page .dashboard-tool-rail {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--dash-line);
        overflow-x: auto;
    }

    .dashboard-page .tool-item {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 7px;
        width: auto;
        padding: 0 12px;
        white-space: nowrap;
    }

    .dashboard-page .tool-panel {
        padding: 30px 18px;
    }

    .dashboard-panel-head {
        margin-bottom: 28px;
    }

    .dashboard-panel-head h1 {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .dashboard-panel-head--split {
        display: grid;
        align-items: start;
    }

    .dashboard-panel-grid,
    .dashboard-page .btc-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-statusbar {
        padding: 0 8px;
        font-size: 0.5625rem;
    }
}

@media (max-width: 600px) {
    .auth-header {
        top: 20px;
        left: 16px;
        right: 16px;
    }

    .auth-layout {
        top: 72px;
        right: 16px;
        bottom: 54px;
        left: 16px;
    }

    .auth-intro h1 {
        margin-top: 18px;
    }

    .auth-console-body {
        padding: 17px;
    }

    .auth-statusbar {
        right: 16px;
        bottom: 18px;
        left: 16px;
        font-size: 0.5625rem;
    }

    .auth-statusbar > :last-child {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-login-button,
    .dashboard-page .tool-item,
    .dashboard-page .terminal-btn,
    .dashboard-page .tool-toggle {
        transition: none;
    }
}

.dashboard-page ::selection {
    background: color-mix(in srgb, var(--dash-orange) 35%, transparent);
    color: var(--dash-paper);
}

/* Wallpapers off: solid --kb-bg while the palette is being judged. Delete this rule to bring them back. */
.page-slide::before,
.frame-page::before,
.auth-screen::before,
.dashboard-page::before {
    display: none;
}

/* Hero service index: the intro's right column, one line per service, each jumps to its slide. */
.home-hero-layout {
    margin: auto 0;
}

.home-hero-layout .home-hero-copy {
    margin: 0;
}

.home-index a {
    display: block;
    color: var(--home-paper);
    text-decoration: none;
}

.home-index a span {
    display: block;
    margin-bottom: 4px;
    color: var(--home-steel);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.home-index a:hover span,
.home-index a:focus-visible span {
    color: var(--home-warm);
}

/* Phones: the four service slides follow immediately, so the index would only repeat them. */
@media (max-width: 820px) {
    .home-index { display: none; }
}

/* Window readout: the second half of each service window. Rows print in sequence when the slide
   arrives: the label lands, the dotted leader draws left to right, the value lands, then a cursor blinks. */
.window-readout {
    margin: 0 clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px);
    padding-top: clamp(18px, 2.4vh, 26px);
    border-top: 1px solid var(--home-line);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-window-list + .window-readout { margin-top: 0; }
.window-readout + .ai-experts-cta { margin-top: 0; }

.readout-label {
    margin-bottom: 12px;
    color: var(--home-muted);
}

.readout-label::before {
    content: '$ ';
    color: var(--home-steel);
}

.readout-rows {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.readout-rows li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: var(--home-paper);
}

.readout-rows li > span:last-child {
    color: var(--home-muted);
    text-align: right;
}

.readout-rows li i {
    flex: 1;
    min-width: 24px;
    border-bottom: 1px dotted color-mix(in srgb, var(--kb-steel) 70%, transparent);
    transform-origin: left center;
}

.readout-rows li.is-final > span { color: var(--home-warm); }

/* Cursor gets a line of its own under the last row, so every value keeps the right edge. */
.readout-rows li:last-child {
    flex-wrap: wrap;
    row-gap: 9px;
}

.readout-rows li:last-child::after {
    content: '';
    /* Full width forces the wrap; the visible cursor is a 0.6em block painted at the left. */
    flex: 0 0 100%;
    height: 1em;
    background: linear-gradient(var(--home-steel), var(--home-steel)) left center / 0.6em 100% no-repeat;
    animation: readout-cursor 1.1s steps(1) infinite;
}

@keyframes readout-cursor {
    50% { opacity: 0; }
}

/* Printing sequence, keyed to the slide reveal that app.js already sets (.is-visible, once per load). */
html.js .page-slide .readout-rows li > span {
    opacity: 0;
    transition: opacity 0.18s steps(2);
}

html.js .page-slide .readout-rows li i {
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .page-slide .readout-rows li:last-child::after { opacity: 0; animation: none; }

html.js .page-slide.is-visible .readout-rows li > span:first-child {
    opacity: 1;
    transition-delay: calc(0.7s + var(--i) * 0.26s);
}

html.js .page-slide.is-visible .readout-rows li i {
    transform: none;
    transition-delay: calc(0.78s + var(--i) * 0.26s);
}

html.js .page-slide.is-visible .readout-rows li > span:last-child {
    opacity: 1;
    transition-delay: calc(1.05s + var(--i) * 0.26s);
}

/* Cursor arrives after the last value has printed, then blinks. The blink is delayed too:
   a running animation would override the hidden state and show the cursor before the text. */
html.js .page-slide.is-visible .readout-rows li:last-child::after {
    opacity: 1;
    transition: opacity 0s calc(1.4s + var(--i) * 0.26s);
    animation: readout-cursor 1.1s steps(1) calc(1.4s + var(--i) * 0.26s) infinite;
}

@media (prefers-reduced-motion: reduce) {
    html.js .page-slide .readout-rows li > span,
    html.js .page-slide .readout-rows li:last-child::after { opacity: 1; transition: none; }
    html.js .page-slide .readout-rows li i { transform: none; transition: none; }
    .readout-rows li:last-child::after,
    html.js .page-slide.is-visible .readout-rows li:last-child::after { animation: none; }
}

/* Phones: slides snap, so a taller window would push content past the fold. Keep the three lines only. */
@media (max-width: 820px) {
    .window-readout { display: none; }
}

/* Short laptop screens: tighten the window so copy, readout, and CTA fit one slide. */
@media (min-width: 821px) and (max-height: 1000px) {
    .service-slide .home-section-label { margin-bottom: clamp(20px, 4vh, 40px); }
    .service-window-list {
        gap: 10px;
        padding: 20px clamp(24px, 3vw, 48px);
        font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
    }
    .window-readout { padding-top: 14px; padding-bottom: 0; margin-bottom: 20px; }
    .readout-label { margin-bottom: 8px; }
    .readout-rows { gap: 5px; }
    .readout-rows li:last-child { row-gap: 5px; }
    .readout-rows li:last-child::after { height: 0.8em; }
    .window-readout + .ai-experts-cta { margin-bottom: 20px; }
}

/* Open source slide: two repo windows side by side, reusing the service window + readout print. */
.repo-grid {
    display: grid;
    gap: clamp(14px, 2vh, 24px);
}

.repo-window {
    transition: border-color 0.25s ease, transform 0.4s var(--ease);
}

.repo-window:hover {
    border-color: var(--home-steel);
    transform: translateY(-4px);
}

.repo-body {
    padding: clamp(14px, 2.6vh, 32px) clamp(24px, 3vw, 48px);
}

.repo-logo {
    display: block;
    /* Same width for both wordmarks; height follows each logo's own proportions. */
    width: clamp(132px, 10vw, 160px);
    height: auto;
    filter: grayscale(1);
    opacity: 0.78;
    transition: opacity 0.25s ease;
}

.repo-window:hover .repo-logo { opacity: 1; }

.repo-cmd {
    color: var(--home-warm);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    overflow-wrap: anywhere;
}

.repo-cmd span { color: var(--home-steel); }

.repo-pitch {
    margin-top: 14px;
    color: var(--home-paper);
    font-family: var(--font-read);
    font-size: var(--read-lg);
    line-height: 1.5;
}

.repo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: clamp(14px, 2.4vh, 22px);
}

.repo-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.repo-links .ai-experts-cta { margin: 0; }

.repo-site {
    color: var(--home-muted);
    font-family: 'Departure Mono', var(--font-mono);
    font-size: var(--label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.repo-site:hover { color: var(--home-warm); }

@media (max-width: 820px) {
    /* Nobody installs a plugin from a phone; the pitch and links are enough. */
    .repo-cmd { display: none; }
    #work .service-detail p { display: none; }
    /* One row on phones: logo left, GitHub right; the project site is a tap away from GitHub. */
    .repo-head { flex-wrap: nowrap; }
    .repo-site { display: none; }
    .repo-logo { width: 128px; min-width: 0; }
    .repo-pitch { margin-top: 0; }
}

/* Option B: the slide's code label ("02 / Services") is the transition. It decodes on arrival. */
.home-section-label .label-code {
    display: inline-block;
    white-space: nowrap;
    color: var(--home-paper);
    font-family: 'Inter', sans-serif;
    font-size: var(--read);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.home-section-label:has(.label-code) { align-items: baseline; }

/* Reading text: no stranded last word. */
.home-intro,
.service-detail p,
.service-window-list,
.repo-pitch,
.frame-page p {
    text-wrap: pretty;
}

/* Phones: label and subtitle stack; keep them reading as one heading. */
@media (max-width: 820px) {
    .home-page .service-slide .home-section-label { row-gap: 6px; }
}

/* Video switch: a footer chip in the TOP chip's language. The state reads like a terminal flag. */
.home-footer { display: flex; align-items: center; gap: 24px; }

.motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--home-line);
    color: var(--home-muted);
    background: color-mix(in srgb, var(--kb-bg) 72%, transparent);
    font: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.motion-toggle::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--home-steel);
}

.motion-toggle[aria-pressed="true"]::before { background: var(--kb-orange); }
.motion-toggle b { font-weight: 400; color: var(--home-paper); }
.motion-toggle:hover,
.motion-toggle:focus-visible { border-color: var(--kb-orange); color: var(--home-paper); }



.scramble-word { display: inline-block; white-space: nowrap; }

/* Side rail */
.rail {
    position: fixed;
    right: clamp(14px, 1.6vw, 32px);
    top: 50%;
    z-index: 16;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--home-line);
    background: color-mix(in srgb, var(--kb-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: translateY(-50%);
}

.rail a {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-bottom: 1px solid var(--home-line);
    color: var(--home-steel);
    transition: color 0.2s ease, background 0.2s ease;
}

.rail a:last-child { border-bottom: 0; }
.rail a:hover,
.rail a:focus-visible { color: var(--home-paper); background: color-mix(in srgb, var(--kb-fg) 6%, transparent); outline: none; }
.rail a[aria-current="page"] { color: var(--kb-orange); background: color-mix(in srgb, var(--kb-orange) 8%, transparent); }
.rail a[aria-current="page"]::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--kb-orange); }
.rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.rail .n { position: absolute; right: 4px; bottom: 2px; color: var(--home-muted); font: var(--label) 'Departure Mono', var(--font-mono); }
.rail a[aria-current="page"] .n { color: var(--kb-orange); }
.rail .tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    display: flex;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--home-line);
    color: var(--home-paper);
    background: var(--kb-bg);
    font: var(--label) 'Departure Mono', var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(6px, -50%);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.rail .tip b { font-weight: 400; color: var(--kb-orange); }
.rail a:hover .tip,
.rail a:focus-visible .tip { opacity: 1; transform: translate(0, -50%); }

/* Keep slide content clear of the rail where the frame margin is too narrow to hold it. */
@media (min-width: 821px) {
    .page-slide { padding-right: max(var(--frame-inline), 104px); }
}

@media (max-width: 820px) {
    .rail { display: none; }
}

/* Main navigation: the toggle is a chip in the TOP chip's language, and the menu opens as a solid
   terminal window (no blur, no drop shadow): numbered rows, hover selects a row in orange. */
.home-header .menu-toggle {
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--kb-steel);
    color: var(--kb-fg);
    background: color-mix(in srgb, var(--kb-bg) 72%, transparent);
    font: var(--label) 'Departure Mono', var(--font-mono);
    letter-spacing: 0.08em;
    transition: color 0.15s steps(2), background 0.15s steps(2), border-color 0.15s steps(2);
}

.home-header .menu-toggle::before {
    content: '';
    width: 10px;
    height: 7px;
    border-block: 1px solid var(--kb-orange);
    background: linear-gradient(var(--kb-orange), var(--kb-orange)) center / 100% 1px no-repeat;
}

.home-header .menu-toggle:hover,
.home-header .menu-toggle:focus-visible { border-color: var(--kb-orange); }

.home-header .menu-toggle[aria-expanded="true"] {
    border-color: var(--kb-orange);
    color: var(--kb-bg);
    background: var(--kb-orange);
}

.home-header .menu-toggle[aria-expanded="true"]::before {
    border-color: var(--kb-bg);
    background-image: linear-gradient(var(--kb-bg), var(--kb-bg));
}

.home-header .site-menu {
    top: calc(100% + 12px);
    width: min(320px, calc(100vw - 2 * var(--frame-inline)));
    padding: 0;
    border: 1px solid var(--kb-steel);
    background: var(--kb-bg);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.menu-window-bar {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--home-line);
    color: var(--home-muted);
    font: var(--label) 'Departure Mono', var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.menu-window-bar span:first-child { color: var(--home-steel); letter-spacing: 0.1em; }

.home-header .site-menu nav { gap: 0; padding: 6px 0; }

.home-header .site-menu nav a {
    display: flex;
    justify-content: flex-start;
    gap: 14px;
    padding: 11px 14px;
    color: var(--kb-fg);
    font: var(--label) 'Departure Mono', var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-header .site-menu nav a::before {
    content: attr(data-n);
    color: var(--home-muted);
}

.home-header .site-menu .menu-group-label {
    padding: 12px 14px 4px;
    color: var(--home-muted);
    font: var(--label) 'Departure Mono', var(--font-mono);
    letter-spacing: 0.08em;
}

.home-header .site-menu .menu-group-label::before { content: '$ '; color: var(--home-steel); }
.home-header .site-menu .menu-submenu { gap: 0; padding: 0; }
.home-header .site-menu .menu-submenu a { padding: 11px 14px 11px 28px; color: var(--kb-fg); }

.home-header .site-menu nav a[aria-current="page"] { color: var(--kb-orange); }
.home-header .site-menu nav a[aria-current="page"]::before { color: var(--kb-orange); }

.home-header .site-menu nav a:hover,
.home-header .site-menu nav a:focus-visible,
.home-header .menu-member-link:hover,
.home-header .menu-member-link:focus-visible {
    color: var(--kb-bg);
    background: var(--kb-orange);
    outline: none;
}

.home-header .site-menu nav a:hover::before,
.home-header .site-menu nav a:focus-visible::before { color: var(--kb-bg); }

.home-header .menu-member-link {
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--home-line);
    color: var(--home-muted);
    font: var(--label) 'Departure Mono', var(--font-mono);
    letter-spacing: 0.08em;
}

/* Controls: buttons, chips, menu rows and text links share one legible mono. */
.ai-experts-cta,
.frame-button,
.home-header .menu-toggle,
.home-header .site-menu nav a,
.home-header .site-menu .menu-group-label,
.home-header .menu-member-link,
.back-to-top,
.motion-toggle,
.home-page .service-next,
.home-page .home-scroll-link,
.home-page .contact-link,
.repo-site,
.rail .tip,
.frame-page-nav a {
    font-family: var(--font-control);
    font-size: var(--control);
    font-weight: 500;
    letter-spacing: 0.06em;
}

@media (max-width: 820px) {
    .repo-links .ai-experts-cta { padding-block: 10px; }
}

/* Phones: the footer row is too narrow for the chip and the slide counter, so the video chip
   becomes a compact square-and-state chip docked left of TOP, same height and baseline. */
@media (max-width: 820px) {
    .motion-toggle {
        position: fixed;
        right: calc(var(--frame-inline) + 72px);
        bottom: calc(var(--frame-block) + 48px);
        z-index: 15;
        height: 37px;
        padding: 0 10px;
    }
    .motion-toggle .motion-word { display: none; }
}