/* About Me / Portfolio page — "Field Dossier" theme, a deliberately standalone page.
   Unlike every other page on the site, about.html does NOT load style.css or carry the
   shared wine/gold masthead+footer — it's Ganzorig's personal portfolio, not a Khan Japanese
   tool, so it gets its own quiet identity (warm stone ground, forest-teal primary accent,
   dusty-plum secondary accent, sticky left "index rail" layout) and only links back to Khan
   Japanese as one line in the rail, the way a resume site might list a side project.
   Because nothing here is shared with another page, tokens live on a real :root (not scoped
   to .about-main) — safe since this stylesheet is only ever loaded by about.html. */

:root {
    --bg-page: #f3f0e7;
    --surface: #fbf9f2;
    --surface-edge: #e2dac4;
    --ink: #232f2b;
    --ink-soft: #5f6b64;
    --ink-faint: #8b9590;
    --rule: #ddd3ba;
    --accent: #3d6b58;
    --accent-light: #6b9a84;
    --accent-dark: #274d3e;
    --accent-tint: rgba(61, 107, 88, 0.09);
    --warm: #8a5570;
    --warm-tint: rgba(138, 85, 112, 0.10);
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'IBM Plex Sans', -apple-system, sans-serif;

    /* Type scale: every font-size below pulls from one of these six steps. Deliberately
       avoids one-off in-between values (0.72rem vs 0.78rem vs 0.85rem etc.) since near-
       duplicate sizes read as uneven/jittery rather than as intentional hierarchy. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.5rem;
    --text-xl: 2rem;
    --text-display: clamp(2.25rem, 4vw, 3.4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.hidden { display: none !important; }

body {
    margin: 0; min-height: 100vh;
    background: var(--bg-page); color: var(--ink);
    font-family: var(--font-body);
}

.about-main { display: block; }
.about-main a { color: inherit; }

/* ---- shell: sticky index rail + main column ---- */
.about-shell { display: grid; grid-template-columns: 240px 1fr; max-width: 1180px; margin: 0 auto; }

.about-rail {
    position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
    padding: 40px 20px 40px 4px; display: flex; flex-direction: column; gap: 26px;
    border-right: 1px solid var(--rule);
}
.about-rail-id { display: flex; align-items: center; gap: 12px; }
.about-rail-seal {
    flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent);
    color: var(--bg-page); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
}
.about-rail-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; margin: 0; line-height: 1.2; }
.about-rail-role { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 2px; }
.about-rail-index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.about-rail-index li { border-bottom: 1px dashed var(--rule); }
.about-rail-index a {
    display: flex; align-items: baseline; gap: 10px; padding: 10px 0;
    text-decoration: none; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600;
    transition: color 0.2s ease;
}
.about-rail-index a:hover { color: var(--accent-dark); }
.about-rail-index .num { font-family: var(--font-display); font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.about-rail-index a.current { color: var(--accent-dark); }
.about-rail-index a.current .num { color: var(--accent); }
.about-rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.about-back-link { font-size: var(--text-xs); color: var(--ink-faint); }
.about-back-link a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.about-back-link a:hover { text-decoration: underline; }

/* ---- minimal account control, replacing the site's masthead account menu ---- */
.about-account { position: relative; border-top: 1px solid var(--rule); padding-top: 14px; }
.about-account-trigger {
    display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
    cursor: pointer; padding: 0; font-family: inherit; font-size: var(--text-xs); color: var(--ink-soft); font-weight: 600;
}
.about-account-trigger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.about-account-trigger:hover { color: var(--accent-dark); }
.about-account-panel {
    position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 220px;
    background: var(--surface); border: 1px solid var(--surface-edge); box-shadow: 0 16px 34px -14px rgba(35,47,43,0.35);
    padding: 14px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: all 0.2s ease; z-index: 20;
}
.about-account.open .about-account-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.about-account-note { margin: 0 0 10px; font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.5; }
#auth-authed { display: flex; flex-direction: column; align-items: stretch; }

.about-account-profile { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px dashed var(--rule); }
.about-account-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--bg-page);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
}
.auth-user-email {
    display: block; min-width: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}

.about-account-nav { display: flex; flex-direction: column; }
.about-account-nav a, .about-account-nav button {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 7px 0; margin: 0; font-family: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft);
    text-decoration: none;
}
.about-account-nav a:hover, .about-account-nav button:hover { color: var(--accent-dark); }

#auth-logout-btn {
    display: block; width: 100%; text-align: left; background: none; border: none; border-top: 1px dashed var(--rule);
    padding: 8px 0 0; margin-top: 6px; color: var(--ink-faint); font-weight: 600; font-size: var(--text-xs); cursor: pointer;
}
#auth-logout-btn:hover { color: var(--accent-dark); }

.modal-label { margin: 0 0 4px; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }

.about-content { padding: 0 40px 100px 32px; min-width: 0; }

/* ---- hero (entry 01) ---- */
.about-hero {
    padding: 56px 0 48px; display: grid; grid-template-columns: 1fr 220px; gap: 44px; align-items: start;
    border-bottom: 1px solid var(--rule);
}
.about-hero-eyebrow { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 14px; }
.about-hero h1 { font-family: var(--font-display); font-size: var(--text-display); line-height: 1.08; margin: 0 0 18px; text-wrap: balance; }
.about-hero h1 em { font-style: normal; color: var(--accent); }
.about-hero .lede { font-size: var(--text-md); color: var(--ink-soft); max-width: 56ch; margin: 0 0 26px; line-height: 1.65; }
.about-hero-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.about-hero-stat b { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.about-hero-stat span { font-size: var(--text-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.about-hero-portrait {
    width: 220px; height: 264px; border-radius: 4px; overflow: hidden; position: relative;
    box-shadow: 0 24px 50px -24px rgba(35,47,43,0.4); border: 1px solid var(--surface-edge);
}
.about-hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* profile notes: short labeled paragraphs replacing the old click-through tab widget --
   everything is readable at once instead of hidden behind tab state, matching the dossier's
   "always-open ledger" feel. */
.about-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin-top: 8px; }
.about-note dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 700; margin: 0 0 6px; }
.about-note dd { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6; }

/* ---- shared entry chrome (entries 02-09) ---- */
.about-entry { padding: 48px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 20px; }
.about-entry:last-child { border-bottom: none; }
.about-entry-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.about-entry-num { font-family: var(--font-display); font-size: var(--text-sm); color: var(--accent); font-weight: 700; }
.about-entry h2 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.about-entry-lede { font-size: var(--text-sm); color: var(--ink-soft); max-width: 60ch; margin: -12px 0 24px; line-height: 1.65; }

/* ---- 02 hobbies: card row + accent photo ---- */
.about-hobbies-layout { display: grid; grid-template-columns: 1fr 180px; gap: 32px; align-items: start; }
.hobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hobby-card { border: 1px solid var(--surface-edge); background: var(--surface); border-radius: 6px; padding: 16px; }
.hobby-card .icon { font-size: var(--text-lg); margin-bottom: 8px; display: block; }
.hobby-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 4px; }
.hobby-card p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }
.about-accent-photo {
    width: 180px; height: 220px; border-radius: 4px; overflow: hidden; border: 1px solid var(--surface-edge);
    box-shadow: 0 16px 34px -20px rgba(35,47,43,0.35); transform: rotate(-1.4deg);
}
.about-accent-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 03 skills: ledger rows with dot ratings instead of progress bars ---- */
.skill-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.skill-group h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 10px; }
.skill-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--rule); }
.skill-row .name { flex: 1; font-weight: 600; font-size: var(--text-base); }
.skill-dots { display: flex; gap: 4px; flex: none; }
.skill-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); display: block; }
.skill-dots span.filled { background: var(--accent); }
.skill-row .tag { font-size: var(--text-xs); color: var(--warm); font-weight: 700; flex: none; width: 6.5em; text-align: right; }

/* ---- 04 projects & learning: ledger cards, same interactive hooks as before (comments,
   bookmarks) -- only the visual container changed, supabase-app.js still targets
   .comments-block/.bookmark-btn/[data-project-id] unmodified. ---- */
.project-list { display: flex; flex-direction: column; gap: 14px; }
.project-item {
    border: 1px solid var(--surface-edge); background: var(--surface); border-radius: 6px; padding: 18px 20px;
}
.project-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.project-item h4 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 6px; }
.project-item > p { margin: 0 0 10px; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }
.project-tech { font-size: var(--text-xs); color: var(--accent-dark); font-weight: 700; letter-spacing: 0.02em; }
.bookmark-btn { background: none; border: none; cursor: pointer; font-size: var(--text-md); line-height: 1; padding: 2px; opacity: 0.55; transition: opacity 0.2s ease; }
.bookmark-btn:hover, .bookmark-btn.bookmarked { opacity: 1; }
.comments-block { margin-top: 14px; border-top: 1px dashed var(--rule); padding-top: 12px; }
.comments-toggle { background: none; border: none; cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--accent-dark); padding: 0; }
.comments-panel { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.35s ease-out; }
.comments-panel.show { opacity: 1; margin-top: 10px; } /* max-height set inline by supabase-app.js */
.comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.comment-item { background: var(--bg-page); border: 1px solid var(--surface-edge); border-radius: 4px; padding: 8px 12px; }
.comment-author { font-weight: 600; font-size: var(--text-sm); margin-right: 8px; }
.comment-date { font-size: var(--text-xs); color: var(--ink-faint); }
.comment-content { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--text-sm); }
.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-form textarea {
    font-family: inherit; font-size: var(--text-sm); padding: 8px 10px; border: 1px solid var(--surface-edge);
    border-radius: 4px; background: var(--bg-page); color: var(--ink); resize: vertical;
}
.comment-form button, .about-btn {
    align-self: flex-start; font-family: inherit; font-size: var(--text-sm); font-weight: 700;
    padding: 8px 16px; border-radius: 4px; border: none; background: var(--accent); color: var(--bg-page);
    cursor: pointer; transition: background 0.2s ease;
}
.comment-form button:hover, .about-btn:hover { background: var(--accent-dark); }
.auth-btn {
    display: inline-block; padding: 10px 20px; background: var(--accent); border: 1px solid var(--accent-dark);
    border-radius: 4px; color: var(--bg-page); font-family: inherit; font-weight: 600; font-size: var(--text-sm);
    cursor: pointer; transition: background 0.2s ease;
}
.auth-btn:hover { background: var(--accent-dark); }
.comment-login-prompt, #contact-login-prompt { font-size: var(--text-sm); color: var(--ink-faint); font-style: italic; }

/* ---- 05 qualifications: stamped cards ---- */
.stamp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stamp { border: 1px solid var(--surface-edge); background: var(--surface); border-radius: 6px; padding: 18px 14px; text-align: center; position: relative; }
.stamp::before { content: ''; position: absolute; inset: 5px; border: 1px dashed var(--accent-light); border-radius: 3px; opacity: 0.5; pointer-events: none; }
.stamp .title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 6px; }
.stamp .score { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent-dark); font-weight: 700; }
.stamp .meta { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }

/* ---- 06 academic history: ledger rows with an accent photo, not a graphic timeline ---- */
.about-academic-layout { display: grid; grid-template-columns: 1fr 180px; gap: 32px; align-items: start; }
.ledger-item { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--rule); }
.ledger-item:first-child { padding-top: 0; }
.ledger-item:last-child { border-bottom: none; }
.ledger-item .when { font-family: var(--font-display); font-size: var(--text-sm); color: var(--accent-dark); }
.ledger-item h4 { margin: 0 0 4px; font-size: var(--text-md); font-family: var(--font-display); }
.ledger-item p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.ledger-item .score { display: inline-block; margin-top: 8px; font-size: var(--text-xs); font-weight: 700; color: var(--warm); background: var(--warm-tint); padding: 3px 9px; border-radius: 3px; }

/* ---- 07 writing & creativity ---- */
.writing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.writing-card { border: 1px solid var(--surface-edge); background: var(--surface); border-radius: 6px; padding: 18px; }
.writing-card .icon { font-size: var(--text-lg); margin-bottom: 8px; display: block; }
.writing-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 6px; }
.writing-card p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.55; }

/* ---- 08 resume ---- */
.about-resume-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.resume-stats { display: flex; gap: 28px; margin-top: 18px; }
.resume-stats .about-hero-stat b { font-size: var(--text-lg); }
.resume-cards { display: flex; flex-direction: column; gap: 12px; }
.download-card { border: 1px solid var(--surface-edge); background: var(--surface); border-radius: 6px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.download-icon { font-size: var(--text-xl); flex: none; }
.download-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 2px; }
.download-card p { margin: 0 0 8px; font-size: var(--text-xs); color: var(--ink-faint); }
.download-btn {
    display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700;
    color: var(--accent-dark); text-decoration: none; border-bottom: 1px solid var(--accent-light);
}
.download-btn:hover { color: var(--accent); }
.download-btn-disabled { color: var(--ink-faint); border-bottom-color: var(--rule); cursor: default; }
.download-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* ---- 09 contact ---- */
.about-contact-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.about-contact-chip {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--surface-edge);
    border-radius: 999px; font-size: var(--text-sm); font-weight: 600; text-decoration: none; background: var(--surface);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.about-contact-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.about-contact-form-card { border: 1px solid var(--surface-edge); background: var(--surface); border-radius: 6px; padding: 22px; max-width: 46ch; }
.about-contact-form-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 6px; }
.about-contact-form-card > p { margin: 0 0 14px; font-size: var(--text-xs); color: var(--ink-faint); }
.about-contact-form-card textarea {
    width: 100%; font-family: inherit; font-size: var(--text-sm); padding: 10px 12px; border: 1px solid var(--surface-edge);
    border-radius: 4px; background: var(--bg-page); color: var(--ink); resize: vertical; margin-bottom: 10px;
}

@media (max-width: 980px) {
    .about-shell { grid-template-columns: 1fr; }
    .about-rail {
        position: static; max-height: none; overflow: visible; border-right: none; border-bottom: 1px solid var(--rule);
        flex-direction: row; align-items: center; flex-wrap: wrap; padding: 20px; gap: 16px;
    }
    .about-rail-index { display: none; }
    .about-rail-foot { margin-top: 0; flex-direction: row; align-items: center; gap: 20px; margin-left: auto; }
    .about-account { border-top: none; padding-top: 0; }
    /* The rail turns into a right-aligned row here, so a panel anchored left:0 with a 220px
       min-width hangs off the side of the page -- and an absolutely positioned box still
       counts toward scroll width even while closed, so it made the whole document scroll
       sideways. Anchor it to the right edge and cap it to the viewport instead. */
    .about-account-panel {
        left: auto;
        right: 0;
        max-width: calc(100vw - 40px);
    }
    .about-content { padding: 0 20px 80px; }
    .about-hero, .about-hobbies-layout, .about-academic-layout, .about-resume-layout { grid-template-columns: 1fr; }
    .about-hero-portrait, .about-accent-photo { justify-self: start; }
    .about-notes, .skill-groups, .hobby-grid { grid-template-columns: 1fr; }
    .stamp-grid, .writing-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .stamp-grid, .writing-grid { grid-template-columns: 1fr; }
    .about-hero-stats, .resume-stats { gap: 22px; }
}

/* ---- auth / account modals (#auth-modal, #account-modal) — re-themed in this page's own
   palette instead of style.css's burgundy tokens, since this page never loads style.css. ---- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(35,47,43,0.45); display: flex;
    align-items: center; justify-content: center; z-index: 2000; padding: 20px;
}
.modal-card {
    position: relative; width: 100%; max-width: 400px; background: var(--surface);
    border: 1px solid var(--surface-edge); box-shadow: 0 24px 60px -20px rgba(35,47,43,0.4);
    border-radius: 6px; padding: 40px 30px 30px;
}
.modal-close {
    position: absolute; top: 4px; right: 8px; background: none; border: none; font-size: var(--text-lg);
    line-height: 1; color: var(--ink-faint); cursor: pointer; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.modal-card h3 { margin: 0 0 20px; font-family: var(--font-display); color: var(--ink); font-size: var(--text-lg); }
#auth-form { display: flex; flex-direction: column; gap: 6px; }
#auth-form label { font-size: var(--text-sm); color: var(--ink-soft); margin-top: 8px; }
#auth-form input {
    padding: 10px 14px; border: 1px solid var(--surface-edge); border-radius: 4px;
    font-family: inherit; font-size: var(--text-base); color: var(--ink); background: var(--bg-page);
}
#auth-form input:focus { outline: none; border-color: var(--accent); }
#auth-form .auth-btn { margin-top: 16px; text-align: center; }
.auth-error { color: #b23b3b; font-size: var(--text-sm); margin: 4px 0 0; }
/* See style.css: success must not resolve to a wine token that reads as an error. */
.auth-error.auth-info { color: #1a7f4b; }
.auth-forgot-link {
    align-self: flex-end; background: none; border: none; padding: 0; margin-top: 6px;
    color: var(--accent); font-size: var(--text-xs); cursor: pointer; font-family: inherit;
}
.auth-forgot-link:hover { color: var(--accent-dark); text-decoration: underline; }
.auth-terms-row { margin-top: 10px; }
.auth-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.4; cursor: pointer; }
.auth-checkbox-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.auth-checkbox-label a { color: var(--accent); }
.auth-mode-toggle {
    display: block; width: 100%; text-align: center; background: none; border: none; margin-top: 16px;
    color: var(--accent-dark); font-size: var(--text-sm); cursor: pointer; font-family: inherit;
}
.auth-mode-toggle:hover { text-decoration: underline; }
.account-email { color: var(--ink-soft); margin: 0 0 24px; word-break: break-all; }
.account-danger-zone { border: 1px solid #e6b3b3; background: #fff5f5; padding: 16px 18px; border-radius: 4px; }
.account-danger-zone h4 { margin: 0 0 8px; color: #b23b3b; font-size: var(--text-sm); }
.account-danger-zone p { margin: 0 0 14px; font-size: var(--text-sm); color: var(--ink-soft); }
.account-delete-btn { background: #b23b3b !important; border-color: #922f2f !important; }
.account-delete-confirm { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.account-delete-confirm label { font-size: var(--text-xs); color: var(--ink-soft); }
.account-delete-confirm input {
    padding: 8px 12px; border: 1px solid var(--surface-edge); border-radius: 4px; font-family: inherit;
}
.account-delete-status { font-size: var(--text-sm); margin-top: 10px; }

/* ---- standalone footer — a plain sign-off, not the site's 4-column brand grid ---- */
.about-footer {
    max-width: 1180px; margin: 0 auto; padding: 32px 40px 60px 32px;
    border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-faint);
}
.about-footer a { color: var(--ink-faint); text-decoration: none; }
.about-footer a:hover { color: var(--accent-dark); }
.about-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 980px) {
    .about-footer { padding: 24px 20px 50px; }
}