/* enhancements.css - James Hansen
   Glossy, professional styling for the new landing and bio areas.
   Layered on top of style.css; matches the existing dark / serif / green look. */

:root {
    --accent:        #5fbf95;
    --accent-deep:   #2e8b57;
    --panel:         rgba(12, 16, 14, 0.72);
    --panel-edge:    rgba(255, 255, 255, 0.14);
    --sheen:         rgba(255, 255, 255, 0.06);
    --text-soft:     rgba(255, 255, 255, 0.82);
}

/* ---- Per-page accent colours. Each section pane recolours --accent (and its
        deeper shade), so the header rule, section labels, card borders, links
        and buttons on that page all share one hue that matches its home-page
        dashboard card. The masthead and nav sit outside the panes and stay
        green. ---- */
.pane-work      { --accent: #5fbf95; --accent-deep: #2e8b57; }
.pane-skills    { --accent: #4a90d9; --accent-deep: #2f6dab; }
.pane-projects  { --accent: #a06cd5; --accent-deep: #6f42a3; }
.pane-ai        { --accent: #f0a24b; --accent-deep: #c8792a; }
.pane-policy    { --accent: #2bb6a3; --accent-deep: #1c8576; }
.pane-community { --accent: #f0b429; --accent-deep: #b8880f; }
.pane-bio       { --accent: #e8729c; --accent-deep: #b84e77; }
.pane-cloud     { --accent: #2563c9; --accent-deep: #1c4a99; }

/* ---- Header: social buttons (GitHub / LinkedIn / Email) ---- */
#social-bubbles {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.bubble-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 27px;
    margin-right: 5px;
    border-radius: 7px;
    color: var(--accent);
    border: 1px solid var(--panel-edge);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}
.bubble-btn:last-child { margin-right: 0; }
.bubble-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bubble-btn svg { display: block; width: 17px; height: 17px; }

/* ---- Tab bar: flex row so every pill (including the taller StashPop one
        with its warp-circle icon) shares the same vertical centre line ---- */
#tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#body .title {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Each pill carries its section colour, so it matches its page when active and
   hints at it on hover (the colour cascade below matches the pane accents). */
.tab-home      { --tab-c: #5fbf95; }
.tab-work      { --tab-c: #5fbf95; }
.tab-skills    { --tab-c: #4a90d9; }
.tab-projects  { --tab-c: #a06cd5; }
.tab-ai        { --tab-c: #f0a24b; }
.tab-cloud     { --tab-c: #2563c9; }
.tab-policy    { --tab-c: #2bb6a3; }
.tab-community { --tab-c: #f0b429; }
.tab-bio       { --tab-c: #e8729c; }
#body .title:not(.active):hover { border-color: var(--tab-c, var(--accent)); }

/* =====================  LANDING / HOME  ===================== */
.landing {
    padding: 24px 10px 14px 10px;
}

/* ---- Glossy buttons (shared by landing + contact) ---- */
.glossy-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    font-family: var(--font-body);
    font-size: 12pt;
    color: #fff !important;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--panel-edge);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        rgba(255, 255, 255, 0.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, background 0.2s ease;
}
.glossy-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.glossy-btn svg { display: block; opacity: 0.92; }

.glossy-btn-accent {
    border-color: rgba(95, 191, 149, 0.55);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
}
.glossy-btn-accent:hover { border-color: #fff; }

/* =====================  HOME DASHBOARD  ===================== */
/* Hero banner over the workspace photo, with a dark left-to-right wash so the
   welcome text stays readable. */
.home-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    margin-bottom: 18px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--panel-edge);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    background-image:
        linear-gradient(90deg, rgba(6,10,8,0.94) 0%, rgba(6,10,8,0.75) 42%, rgba(6,10,8,0.28) 100%),
        url('img/workspace.jpg');
    background-size: cover;
    background-position: center 40%;
}
.home-hero-inner { padding: 26px 30px; max-width: 620px; }
.home-hero-title {
    font-family: var(--font-display);
    font-size: 40pt;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1;
}
.home-hero-lead {
    font-size: 12.5pt;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 18px;
}
.home-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Bento grid of section cards, each with its own accent colour (--c). */
.home-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.hcard-span3 { grid-column: span 3; }
.hcard-span2 { grid-column: span 2; }

.hcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 22px;
    border-radius: 12px;
    border: 1px solid var(--panel-edge);
    border-top: 3px solid var(--c);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* soft colour wash in the top-right corner, tinted to the card's accent */
.hcard::before {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 68%);
    pointer-events: none;
}
.hcard:hover {
    transform: translateY(-4px);
    border-color: var(--c);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

.hcard-work      { --c: #5fbf95; }
.hcard-skills    { --c: #4a90d9; }
.hcard-projects  { --c: #a06cd5; }
.hcard-ai        { --c: #f0a24b; }
.hcard-policy    { --c: #2bb6a3; }
.hcard-community { --c: #f0b429; }
.hcard-contact   { --c: #e8729c; }

.hcard-kicker {
    font: 600 9.5pt var(--font-body);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c);
    margin: 0 0 4px;
}
.hcard-title {
    font: 600 15pt var(--font-body);
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.hcard-blurb {
    font-size: 10.5pt;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0;
    padding-right: 42px;    /* keep text clear of the arrow */
}

/* logo / icon strip (work, skills, projects) */
.hcard-media { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.hcard-logo {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.hcard-logo img { width: 22px; height: 22px; object-fit: contain; }
.hcard-logo-dark { background: #1b1f23; border-color: rgba(255, 255, 255, 0.18); }
.hcard-logo-dark i { color: #fff; font-size: 18px; }

/* single glyph tile (policy, contact) */
.hcard-glyph {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 22px;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}

/* image / gif thumb (community, top of card) */
.hcard-img {
    width: 100%;
    height: 124px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 14px;
    border: 1px solid var(--panel-edge);
    background: #000;
}

/* Projects and AI: media on the left, text on the right. The gif (4:3) and the
   short (9:16) are both pinned to the SHARED_MEDIA_HEIGHT (160px) so they line
   up exactly, with their widths following each aspect ratio. */
.hcard-projects,
.hcard-ai {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}
.hcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hcard-side-media { flex: 0 0 auto; margin: 0; }

.hcard-projects .hcard-side-media {
    box-sizing: border-box;
    height: 160px;
    width: auto;                /* 4:3 gif -> ~213px wide, uncropped */
    border-radius: 8px;
    border: 1px solid var(--panel-edge);
    background: #000;
}
/* The 9:16 short fills the full height of the card from the start (matching the
   text column beside it), with its width following from the 9:16 ratio. It sits
   above the stretched card link so the video stays clickable. */
.hcard-ai .short-figure {
    position: relative;
    z-index: 2;
    float: none;
    margin: 0;
    align-self: stretch;
    min-height: 160px;
    width: auto;
    aspect-ratio: 9 / 16;
}
.hcard-ai .short-tile { box-sizing: border-box; width: 100%; height: 100%; aspect-ratio: auto; }
/* Keep the same size while playing (overrides the old .short-figure.playing
   width:300px from the original StashPop short styles). */
.hcard-ai .short-figure.playing { width: auto; }

/* While a video is playing, the card's cover link is disabled so clicks around
   the video do not navigate; only the arrow (re-enabled) still links out. */
.hcard.is-playing .hcard-link { pointer-events: none; }
.hcard.is-playing .hcard-arrow { pointer-events: auto; }

/* stretched arrow link — the whole card is clickable, arrow shown bottom-right */
.hcard-link { position: absolute; inset: 0; z-index: 1; text-decoration: none; }
.hcard-arrow {
    position: absolute;
    right: 16px; bottom: 16px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.hcard:hover .hcard-arrow { background: var(--c); color: #0b1410; transform: translateX(3px); }

@media (max-width: 760px) {
    .home-grid { grid-template-columns: 1fr; }
    .hcard-span3, .hcard-span2 { grid-column: span 1; }
    .home-hero { min-height: 210px; }
    .home-hero-title { font-size: 30pt; }
    .home-hero-inner { padding: 20px 20px; }
}

/* =====================  BIO  ===================== */
.bio { padding: 24px 10px 14px 10px; }

.bio-panel {
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 40%),
        var(--panel);
    border: 1px solid var(--panel-edge);
    border-top: 2px solid var(--accent);
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.bio-heading {
    font-family: var(--font-display);
    font-size: 26pt;
    color: #fff;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bio-body { font-size: 12pt; line-height: 1.7; color: var(--text-soft); }
.bio-body p { margin: 0 0 16px 0; }
.bio-body a { color: var(--accent); }
.bio-body a:hover { color: #fff; }

/* ---- Bio figures / placeholder images ---- */
.bio-figure {
    width: 230px;
    margin: 4px 0 16px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--panel-edge);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    background: #000;
}
.bio-figure-right { float: right; margin-left: 24px; }
.bio-figure-left  { float: left;  margin-right: 24px; }
.bio-figure img { display: block; width: 100%; height: auto; cursor: zoom-in; }

/* Larger variant for the landing page Jane's Walk photo. */
.bio-figure-lg { width: 360px; max-width: 100%; }
.bio-figure figcaption {
    font-size: 8.5pt;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    padding: 7px 10px;
    text-align: center;
}
/* When the suggested image is missing, this renders a tidy labelled
   placeholder instead of a broken image. */
.bio-figure.placeholder {
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 12px, rgba(255,255,255,0.06) 12px 24px),
        linear-gradient(160deg, var(--accent-deep) 0%, #14241c 100%);
}
.bio-figure.placeholder figcaption {
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-style: normal;
}

@media (max-width: 640px) {
    .bio-figure-left, .bio-figure-right { float: none; margin: 0 auto 18px auto; }
}

/* =====================  CONTACT FORM  ===================== */
.bio-contact-intro { font-size: 11.5pt; color: var(--text-soft); margin-bottom: 18px; }
.bio-contact-intro a { color: var(--accent); }

.contact-form { max-width: 620px; }
.form-row { margin-bottom: 14px; }
.form-row label {
    display: block;
    font-size: 10.5pt;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 11.5pt;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-edge);
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(95, 191, 149, 0.18);
}
.contact-form textarea { resize: vertical; }

.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.contact-form .glossy-btn { border: none; }
.contact-form button[disabled] { opacity: 0.6; cursor: default; }

.contact-status { font-size: 10.5pt; }
.contact-status.success { color: var(--accent); }
.contact-status.error   { color: #ff8a7a; }

/* Honeypot: invisible to humans, present for bots to trip over. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =====================  WORK HISTORY NOTE  ===================== */
.resume-note {
    background:
        linear-gradient(180deg, rgba(95,191,149,0.12) 0%, rgba(95,191,149,0.04) 100%);
    border: 1px solid rgba(95, 191, 149, 0.4);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px;
    font-size: 11pt;
    color: var(--text-soft);
}
.resume-note a { color: var(--accent); }
.resume-note a:hover { color: #fff; }

/* =====================  PROJECT / DATA CARDS  ===================== */
/* Light-on-dark cards shared by Projects, Work History, Skills and the
   Community projects, matching the glossy bio panels used elsewhere. */
.item {
    border: 1px solid var(--panel-edge);
    border-top: 2px solid var(--accent);
    border-radius: 10px;
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 40%),
        var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--text-soft);
    padding: 18px 22px;
    margin: 14px 0;
    font-size: 10.5pt;
    line-height: 1.6;
}
.item a { color: var(--accent); }
.item a:hover { color: #fff; }

/* Card header: the icon in a rounded wrapper beside the title block, so the
   name and date no longer wrap awkwardly around a floated image. */
.item-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.item-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.item-icon img { width: 34px; height: 34px; object-fit: contain; }
.item-icon i { font-size: 24px; }
.item-headtext { min-width: 0; }
.item-name {
    font-size: 15pt;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.item-subheader { font-size: 11pt; color: var(--text-soft); margin-top: 2px; }
.item-role { font-size: 11pt; font-weight: 600; color: var(--accent); margin-top: 2px; }

/* Bold <b> lines inside a description read as sub-section headings (the groups
   in Work History). Accent-coloured so they stand out on the dark card. */
.item b {
    display: block;
    font-size: 11.5pt;
    font-weight: 600;
    color: var(--accent);
    margin: 14px 0 4px;
    letter-spacing: 0.3px;
}
/* Each description line is its own block <div>, so the per-line <br> is
   redundant; hiding it keeps the lines tightly spaced. */
.item br { display: none; }
.item-body > div { margin-bottom: 3px; }

/* ---- Demo credentials box ---- */
.demo-box {
    clear: both;
    margin: 16px 0 4px 0;
    padding: 14px 16px 16px 16px;
    border: 1px solid rgba(95, 191, 149, 0.30);
    border-left: 4px solid var(--accent);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(95, 191, 149, 0.12) 0%, rgba(95, 191, 149, 0.04) 100%),
        rgba(255, 255, 255, 0.03);
}
.demo-box-title {
    font-family: var(--font-display);
    font-size: 14pt;
    color: var(--accent);
    margin-bottom: 6px;
}
.demo-box-title i { margin-right: 6px; }
.demo-box-intro {
    font-size: 11pt;
    line-height: 1.55;
    color: var(--text-soft);
    margin-bottom: 12px;
}
.demo-media {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.demo-accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.demo-account {
    flex: 1 1 240px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    padding: 12px 14px;
}
.demo-account-role {
    font-weight: 600;
    font-size: 11pt;
    color: #fff;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-edge);
}
.demo-cred {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.demo-cred-key {
    flex: 0 0 74px;
    font-size: 9.5pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-soft);
}
.demo-cred-val {
    font-family: 'Consolas', 'SFMono-Regular', Menlo, monospace;
    font-size: 10.5pt;
    color: #eaf3ee;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--panel-edge);
    border-radius: 5px;
    padding: 2px 8px;
    user-select: all;
}
.demo-account-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 9.5pt;
    word-break: break-all;
}

/* ---- Action buttons (Live Demo / View Source Code) ---- */
.item-actions {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.item-actions > span { display: contents; }
.proj-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-family: var(--font-body);
    font-size: 11.5pt;
    line-height: 1;
    text-decoration: none !important;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.proj-btn i { font-size: 11pt; }
.proj-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28); }
.proj-btn-primary {
    color: #fff !important;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    border-color: rgba(0, 0, 0, 0.08);
}
.proj-btn-primary:hover { filter: brightness(1.06); color: #fff !important; }
.proj-btn-source {
    color: #fff !important;
    background: linear-gradient(180deg, #3b4250 0%, #23272f 100%);
    border-color: rgba(0, 0, 0, 0.15);
}
.proj-btn-source:hover { filter: brightness(1.14); color: #fff !important; }

/* ---- "Built with" libraries box ---- */
.item-tools {
    clear: both;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
}
.item-tools-label {
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-soft);
    margin-right: 2px;
}
.item-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5pt;
    font-style: normal;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-edge);
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
}
.item-tool img,
.item-tool .icon_16 { width: 16px; height: 16px; vertical-align: middle; }
/* Font Awesome fallback glyph for tools without a bitmap icon, sized and
   coloured to sit alongside the 16px PNG icons in the chip. */
.item-tool .tool-fa {
    width: 16px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: var(--accent);
}

@media (max-width: 600px) {
    .demo-account { flex: 1 1 100%; }
    .proj-btn { flex: 1 1 100%; justify-content: center; }
}

/* =====================  PUBLIC POLICY PANELS  ===================== */
.policy-kicker {
    font-family: var(--font-body);
    font-size: 9.5pt;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

/* Logo (e.g. the LUS logo) scaled down and floated neatly into the panel. */
.policy-logo {
    float: right;
    width: 96px;
    height: auto;
    max-height: 96px;
    margin: 0 0 12px 20px;
    border-radius: 8px;
}
/* Left-floated variant, used on the Community page so the logo and the
   Jane's Walk photo sit on opposite sides instead of crowding together. */
.policy-logo-left {
    float: left;
    margin: 0 20px 12px 0;
}

.policy-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* Every content pane shares the same padding, so all pages start their header
   and content at the same place. This is what makes Work / Projects / Skills /
   AI line up with Home / Cloud / Policy / Community / Bio. (Cloud keeps its own
   #cloud-page rule with identical values.) */
.tab-pane { padding: 24px 10px 14px 10px; }

/* =====================  PAGE HEADER (every tab)  ===================== */
/* One consistent header at the top of each page: a display title with a left
   accent rule, above the content. Pages that used to carry their title inside
   the first glossy panel now use this instead, so every tab opens the same
   way. Zero horizontal margin so the accent rule lines up with the left edge
   of the panels and cards below it. */
.page-header {
    margin: 4px 0 22px 0;
    border-left: 3px solid var(--accent);
    padding-left: 16px;
}
.page-title {
    font-family: var(--font-display);
    font-size: 30pt;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.page-intro {
    font-family: var(--font-body);
    font-size: 12pt;
    color: var(--text-soft);
    margin: 8px 0 0;
    max-width: 72ch;
    line-height: 1.6;
}

/* =====================  SECTION LABELS  ===================== */
/* Lighter, uppercase accent labels that group cards (Projects, Community, and
   the Skills categories). Deliberately quieter than the page title so the two
   never read as competing headings. */
.section-title {
    font-family: var(--font-body);
    font-size: 11pt;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 22px 0 10px 0;
    padding: 0;
    border: 0;
}

/* Font-library icon for skill cards (analytical skills), sized and aligned to
   match the 48x48 image icons on the other cards. Cards have a light
   background, so the icon uses a dark accent colour. */
.skill-faicon {
    float: left;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 30px;
    padding: 5px;
    color: #2e8b57;
}

/* =====================  KEY SKILLS (headline credentials)  ===================== */
/* Featured cards at the top of the Skills and AI pages. They reuse the exact
   same layout and Inter typography as the regular .item cards (icon bubble +
   title + subtitle), and only swap the background for a distinctive green
   (Skills) or orange (AI) gradient so they read as headline credentials. */
.key-skills {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0 14px 0;
}
.key-skills .item { margin: 0; }               /* the flex gap controls spacing */
.item-key {
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-top: 2px solid var(--accent);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(135deg, var(--accent-deep) 0%, #16271e 100%);
}
.item-key .item-head { margin-bottom: 0; }     /* no description body beneath */
.item-key .item-subheader { color: rgba(255, 255, 255, 0.85); }
.item-key .item-subheader a { color: #fff; text-decoration: underline; }
.item-key .item-subheader a:hover { opacity: 0.85; }

/* Orange variant, used on the AI page. */
.item-key--orange {
    border-color: rgba(240, 162, 75, 0.6);
    border-top-color: #f0a24b;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(135deg, #d2772a 0%, #2a1a0c 100%);
}
.item-key--orange .item-icon i { }

/* Responsive 16:9 video embed (e.g. the YouTube clip on the AI page). */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 4px 0 20px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--panel-edge);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    background: #000;
}
.video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Orange accent for the AI essay panel, so it matches the cards above instead
   of using the site-wide green accent. */
.bio-panel--orange { border-top-color: #f0a24b; }
.bio-panel--orange .bio-body a { color: #f0a24b; }
.bio-panel--orange .bio-body a:hover { color: #fff; }

/* =====================  CASE STUDY BOXES (Public Policy)  ===================== */
.case-study-grid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.case-study-box {
    display: block;
    text-decoration: none;
    color: var(--text-soft) !important;
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 60%),
        rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-edge);
    border-top: 2px solid var(--accent);
    border-radius: 10px;
    padding: 14px 16px;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
}
.case-study-box:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 11px 24px rgba(0, 0, 0, 0.55);
}
.case-study-region {
    font-family: var(--font-display);
    font-size: 15pt;
    color: #fff;
    margin-bottom: 5px;
}
.case-study-blurb {
    font-size: 10pt;
    line-height: 1.5;
}

/* =====================  MOBILE / RESPONSIVE  ===================== */
/* The original layout assumed a fixed 1000px desktop width with a floated
   header. These rules let it reflow down to a phone screen. */

/* Stop any stray wide element from forcing horizontal scroll. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Tablet / small-laptop: keep the header on one line but let it breathe. */
@media (max-width: 800px) {
    #header { height: auto; }
    #header #title #name { font-size: 38pt; }
}

/* Phones: stack the header, centre it, and shrink the oversized type. */
@media (max-width: 600px) {
    #header {
        height: auto;
        text-align: center;
    }
    #header #profile,
    #header #title,
    #header #location {
        float: none;
        display: block;
        padding: 8px 0;
        line-height: 1.25;
    }
    #header #title #name { font-size: 30pt; }
    #header #title #subheader { font-size: 14pt; text-align: center; }
    #header #location { font-size: 12pt; text-align: center; }
    #social-bubbles { justify-content: center; }

    /* Media-left cards (Projects, AI) stack on phones so a wide gif or tall
       video does not crush the text into a thin column beside it. */
    .hcard-projects, .hcard-ai { flex-direction: column; }
    .hcard-projects .hcard-side-media { width: 100%; height: auto; }
    .hcard-ai .short-figure {
        align-self: flex-start;
        width: auto;
        height: 240px;
        min-height: 0;
    }

    /* Tab bar: tighter, wraps onto multiple lines instead of overflowing. */
    #body .title {
        font-size: 13pt;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 5px 9px;
    }

    /* Panels and headings scale down so nothing clips the edges. */
    .bio, .policy, .landing, .tab-pane { padding: 14px 4px 10px 4px; }
    .bio-panel { padding: 16px 16px; }
    .bio-heading { font-size: 20pt; }
    .bio-body { font-size: 11.5pt; }

    /* Data / skill cards sit flush to the narrow viewport. */
    .item { margin: 8px 0; }
    .section-title { margin: 18px 0 8px 0; }

    .page-header { margin: 4px 0 18px 0; padding-left: 12px; }
    .page-title { font-size: 22pt; }
    .page-intro { font-size: 11pt; }

    .key-skills { margin: 10px 0 14px 0; }

    .form-actions { flex-wrap: wrap; }
}

/* Very small phones. */
@media (max-width: 380px) {
    #header #title #name { font-size: 24pt; }
    #header #title #subheader { font-size: 12pt; }
    #body .title { font-size: 11pt; padding: 4px 7px; }
}

/* =====================  IMAGE LIGHTBOX (bio / landing figures)  ===================== */
/* A lightweight modal overlay. Created once in script.js and reused; clicking
   any .bio-figure image opens it here at a larger size. */
#img-lightbox {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}
#img-lightbox.open { display: flex; }
#img-lightbox figure {
    margin: 0;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#img-lightbox img {
    max-width: 92vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--panel-edge);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
}
#img-lightbox figcaption {
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 11pt;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}
#img-lightbox .lightbox-close {
    position: absolute;
    top: 14px;
    right: 22px;
    font-size: 34px;
    line-height: 1;
    color: #fff;
    opacity: 0.8;
    cursor: pointer;
    user-select: none;
}
#img-lightbox .lightbox-close:hover { opacity: 1; }

@media (max-width: 600px) {
    #img-lightbox .lightbox-close { top: 8px; right: 14px; font-size: 30px; }
}

/* =====================  CLOUD EXPLAINER PAGE  =====================
   Three stacked, collapsible, colour-coded Mermaid flowcharts. The colour
   language is defined once here and carried into every chart, both via the
   Mermaid classDef (var() resolves on the inline SVG) and reinforced with CSS
   below so it holds regardless of Mermaid version quirks.
     blue   = npm / JavaScript world
     purple = pip / Python world
     teal   = infrastructure (belongs to neither)                              */
:root {
    --c-npm:        #2563c9;   --c-npm-fill:   #dbe7fb;
    --c-pip:        #7c3aed;   --c-pip-fill:   #e9ddfb;
    --c-infra:      #0e8a8a;   --c-infra-fill: #d6efef;
}

#cloud-page { padding: 24px 10px 14px 10px; }

/* "How it fits together" reuses the standard .bio-heading style so the page
   carries no one-off heading of its own. */

/* ---- Shared colour legend (one definition for all three charts) ---- */
.cloud-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 11pt;
    color: var(--text-soft);
}
.cloud-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.cloud-legend-item strong { color: #fff; }
.cloud-swatch {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 2px solid;
    flex: 0 0 auto;
}
.cloud-swatch--npm   { background: var(--c-npm-fill);   border-color: var(--c-npm); }
.cloud-swatch--pip   { background: var(--c-pip-fill);   border-color: var(--c-pip); }
.cloud-swatch--infra { background: var(--c-infra-fill); border-color: var(--c-infra); }

/* Green "step complete" chip, shown in the legend and inside build-step nodes.
   The check glyph means colour is never the only signal. */
.step-done {
    display: inline-block;
    min-width: 16px; height: 16px; line-height: 16px;
    padding: 0 3px;
    border-radius: 3px;
    background: var(--accent-deep);
    color: #fff !important;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

/* ---- Collapsible chart panels ---- */
.cloud-chart { padding: 0; overflow: hidden; }

.cloud-chart-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
}
.cloud-chart-head:hover .cloud-chart-title { color: var(--accent); }
.cloud-chart-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.cloud-chart-headtext { flex: 1 1 auto; min-width: 0; }
.cloud-chart-title {
    font-family: var(--font-display);
    font-size: 17pt;
    color: #fff;
    margin: 0;
    transition: color 0.2s ease;
}
.cloud-chart-sub {
    font-size: 10.5pt;
    color: var(--text-soft);
    margin-top: 3px;
}
.cloud-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--panel-edge);
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--font-body);
    font-size: 8.5pt;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Static, representative header numbers; stay visible when collapsed. */
.cloud-stats { display: flex; gap: 18px; flex: 0 0 auto; }
.cloud-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cloud-stat b { font-size: 15pt; color: var(--accent); }
.cloud-stat span {
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-soft);
    margin-top: 2px;
}

.cloud-caret {
    flex: 0 0 auto;
    color: var(--text-soft);
    transition: transform 0.2s ease;
}
.cloud-chart.collapsed .cloud-caret { transform: rotate(-90deg); }

/* ---- Chart body: light card behind the diagram, with a spinner until ready ---- */
.cloud-chart-body { position: relative; padding: 0 20px 20px 20px; }

.cloud-scroll {
    position: relative;
    min-height: 170px;
    padding: 18px;
    border-radius: 10px;
    background: #f3f6f5;
    border: 1px solid #d9d9d9;
    overflow-x: auto;          /* scroll on narrow screens, never shrink to unreadable */
    text-align: center;
}
#cloud-page .mmd svg { display: block; margin: 0 auto; max-width: none; height: auto; }

/* Reinforce the ecosystem colours on the rendered SVG nodes (CSS wins with
   !important even if a Mermaid build ignores the var() classDef). */
#cloud-page .node.npm rect, #cloud-page .node.npm polygon,
#cloud-page .node.npm path, #cloud-page .node.npm circle,
#cloud-page .node.npm ellipse {
    fill: var(--c-npm-fill) !important; stroke: var(--c-npm) !important;
}
#cloud-page .node.pip rect, #cloud-page .node.pip polygon,
#cloud-page .node.pip path, #cloud-page .node.pip circle,
#cloud-page .node.pip ellipse {
    fill: var(--c-pip-fill) !important; stroke: var(--c-pip) !important;
}
#cloud-page .node.infra rect, #cloud-page .node.infra polygon,
#cloud-page .node.infra path, #cloud-page .node.infra circle,
#cloud-page .node.infra ellipse {
    fill: var(--c-infra-fill) !important; stroke: var(--c-infra) !important;
}
#cloud-page .node .nodeLabel { color: #111 !important; }

/* Keep the raw diagram source hidden (and out of the layout) until Mermaid has
   turned it into an SVG, so no pre-rendered text ever flashes. */
.cloud-chart:not(.rendered) .mmd { visibility: hidden; height: 0; overflow: hidden; }
.cloud-chart.rendered .mmd { visibility: visible; height: auto; }
.cloud-chart.rendered .cloud-spinner { display: none; }

.cloud-spinner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #4a5d57;
}
.cloud-spinner-ring {
    width: 34px; height: 34px;
    border: 3px solid rgba(46, 139, 87, 0.25);
    border-top-color: var(--accent-deep);
    border-radius: 50%;
    animation: cloud-spin 0.8s linear infinite;
}
.cloud-spinner-text { font-size: 10.5pt; }

@keyframes cloud-spin { to { transform: rotate(360deg); } }

.cloud-illustrative-note {
    margin: 12px 2px 0 2px;
    font-size: 10pt;
    color: var(--text-soft);
}
.cloud-illustrative-note i { color: var(--accent); margin-right: 6px; }

/* No decorative motion anywhere in Part 1: drop the spinner spin too. */
@media (prefers-reduced-motion: reduce) {
    .cloud-spinner-ring { animation: none; }
    .cloud-caret { transition: none; }
}

@media (max-width: 600px) {
    #cloud-page { padding: 14px 4px 10px 4px; }
    .cloud-chart-head { flex-wrap: wrap; padding: 14px 16px; position: relative; }
    .cloud-chart-headtext { flex: 1 1 100%; padding-right: 28px; }
    .cloud-chart-title { font-size: 15pt; }
    .cloud-stats { flex: 1 1 100%; gap: 22px; margin-top: 4px; }
    .cloud-stat { align-items: flex-start; }
    .cloud-caret { position: absolute; top: 16px; right: 16px; }
    .cloud-chart-body { padding: 0 12px 16px 12px; }
    .cloud-scroll { padding: 12px; }
}

/* ---- StashPop link in the header social row: a small labelled pill (the
        animated warp circle + "stashpop"), matching the bubble styling of the
        GitHub / LinkedIn / Email icons beside it ---- */
.stashpop-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 27px;
    padding: 0 12px;
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 11pt;
    border: 1px solid var(--panel-edge);
    background:
        linear-gradient(180deg, var(--sheen) 0%, rgba(255,255,255,0) 55%),
        rgba(255, 255, 255, 0.06);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
}
.stashpop-link:hover {
    transform: translateY(-2px);
    color: #F7C146;
    border-color: #F7C146;
}
.stashpop-link .wp-classic { --size: 16px; flex: 0 0 auto; }

.stashpop-link {
    color: var(--accent)
}

.stashpop-link:visited {
    color: var(--accent)
}

/* The classic warp logo (flicker-free), lifted from the StashPop blog. */
.wp-classic {
    --c1: #995ECE; --c2: #F7C146; --dur: 2.4s;
    inline-size: var(--size, 60px); aspect-ratio: 1; border-radius: 50%;
    position: relative; overflow: hidden; display: inline-block;
    background: var(--c1); isolation: isolate;
}
.wp-classic::before, .wp-classic::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; transform: scale(0);
}
.wp-classic::before { background: var(--c2); z-index: 1; animation: wpk-classic-a var(--dur) linear infinite; }
.wp-classic::after  { background: var(--c1); z-index: 2; animation: wpk-classic-b var(--dur) linear infinite; }
@keyframes wpk-classic-a { 0%{transform:scale(0)} 50%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes wpk-classic-b { 0%,45%{transform:scale(0)} 95%{transform:scale(1)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) {
    .wp-classic::before, .wp-classic::after { animation: none !important; }
}

/* ---- StashPop article callout on the AI page ---- */
.stashpop-callout {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 4px solid #995ECE;
    background: rgba(153, 94, 206, 0.12);
    border-radius: 4px;
}
.stashpop-callout a { color: #F7C146; }

/* =====================  SERVER-RENDERED PANES  ===================== */
/* All tab content is in the initial HTML now (render.php). Angular manages
   .ng-hide once it boots; this rule covers the pre-bootstrap moment (and
   crawlers without JS) so only the active tab's pane shows. */
.ng-hide { display: none !important; }

/* Staggered card reveal, replacing the old JS $timeout stagger. It replays
   whenever a pane is shown again, because display:none -> visible restarts
   CSS animations. --i is set per card by render.php. */
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.reveal {
    animation: reveal-up 0.45s ease both;
    animation-delay: calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; }
}

/* Card headings (server-rendered h3/divs replacing the old inline styles). */
.item-name { font-size: 18pt; font-weight: bold; margin: 0; }
.item-subheader { font-size: 14pt; }
.item-role { font-size: 14pt; font-weight: bold; }

/* Landing quick-link cards are real <a> links now. */
a.landing-card { display: block; text-decoration: none; color: inherit; }

/* Keyboard focus that matches the accent (nav pills, buttons, links). */
a:focus-visible, .title:focus-visible, .glossy-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection { background: var(--accent-deep); color: #fff; }

/* =====================  STASHPOP SHORT (landing page)  ===================== */
/* A vertical 9:16 tile that plays the YouTube short inline on click, the same
   interaction as the StashPop blog. Floated right in the Welcome panel; the
   click handler in script.js swaps the thumbnail for the embed. */
.short-figure {
    float: right;
    width: 200px;
    margin: 4px 0 16px 24px;
}
.short-tile {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.short-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
.short-tile-thumb {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.short-tile-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.15s ease;
}
.short-tile:hover .short-tile-play { transform: translate(-50%, -50%) scale(1.12); }
.short-tile-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 9px;
    font-family: var(--font-body);
    font-size: 8.5pt;
    letter-spacing: 0.4px;
    color: #fff;
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 100%);
}
/* Grows modestly once the embed is playing, matching the StashPop behaviour. */
.short-figure.playing { width: 300px; }
.short-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.short-caption {
    font-size: 8.5pt;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 8px 4px 0;
}
.short-caption a { color: var(--accent); }
.short-caption a:hover { color: #fff; }

@media (max-width: 640px) {
    .short-figure, .short-figure.playing {
        float: none;
        width: 220px;
        margin: 0 auto 18px auto;
    }
}

/* ============================================================
   ASK jameshansen.ai — first-load Q&A overlay (see script.js / ask.php)
   ============================================================ */
#ask-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000; /* above DHTMLX windows */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.55), rgba(79, 70, 229, 0.65) 45%, rgba(37, 21, 88, 0.85));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#ask-overlay.open { display: flex; }

.ask-card {
    position: relative;
    width: 100%;
    max-width: 540px;
    padding: 34px 30px 26px;
    border-radius: 18px;
    background: rgba(23, 20, 48, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 60px rgba(20, 12, 60, 0.55);
    color: #f4f3ff;
    font-family: 'Inter', system-ui, sans-serif;
    animation: ask-pop 0.28s ease;
}
@keyframes ask-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.ask-close {
    position: absolute;
    top: 12px; right: 14px;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #d9d7ff;
    font-size: 22px; line-height: 1;
    cursor: pointer;
}
.ask-close:hover { background: rgba(255, 255, 255, 0.18); }

.ask-brand {
    font-size: 33px; font-weight: 800; letter-spacing: -0.03em;
    background: linear-gradient(90deg, #e0e7ff, #c7d2fe);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ".ai" gets its own brighter gradient + glow so it pops off the wordmark. */
.ask-brand-ai {
    background: linear-gradient(90deg, #22d3ee, #818cf8 55%, #e879f9);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(129, 140, 248, 0.55));
}
.ask-prompt { margin: 8px 0 18px; font-size: 17px; color: #d7d5f5; }

.ask-form { display: flex; gap: 8px; }
.ask-input {
    flex: 1;
    padding: 13px 16px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff; font-size: 15px;
    outline: none;
}
.ask-input::placeholder { color: rgba(230, 228, 255, 0.5); }
.ask-input:focus { border-color: #a5b4fc; background: rgba(255, 255, 255, 0.1); }
.ask-send {
    width: 48px; border: 0; border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 20px; cursor: pointer;
}
.ask-send:hover { filter: brightness(1.1); }

.ask-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask-sample {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(165, 180, 252, 0.4);
    background: rgba(255, 255, 255, 0.04);
    color: #d7d5f5; font-size: 13px; cursor: pointer;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.ask-sample:hover { background: rgba(165, 180, 252, 0.18); color: #fff; }
.ask-sample.swapping { opacity: 0; filter: blur(4px); transform: scale(0.92); }

/* Spinner + cycling "runs locally" fact, shown while the model thinks. */
.ask-loading { display: none; align-items: center; gap: 11px; margin-top: 18px; }
.ask-loading.show { display: flex; }
.ask-spinner {
    width: 18px; height: 18px; flex: none;
    border: 2px solid rgba(165, 180, 252, 0.25);
    border-top-color: #a5b4fc;
    border-radius: 50%;
    animation: ask-spin 0.8s linear infinite;
}
@keyframes ask-spin { to { transform: rotate(360deg); } }
.ask-fact {
    font-size: 12.5px; font-style: italic;
    color: rgba(199, 197, 240, 0.75);
    opacity: 0; transition: opacity 0.5s ease;
}
.ask-fact.show { opacity: 1; }

.ask-answer {
    margin-top: 18px;
    font-size: 15px; line-height: 1.55;
    color: #efeeff;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;                                  /* Firefox */
    scrollbar-color: rgba(139, 92, 246, 0.6) transparent;
}
.ask-answer:empty { display: none; }
.ask-answer.error { color: #fca5a5; }
.ask-answer::-webkit-scrollbar { width: 8px; }
.ask-answer::-webkit-scrollbar-track { background: transparent; }
.ask-answer::-webkit-scrollbar-thumb {
    background: linear-gradient(#6366f1, #8b5cf6);
    border-radius: 999px;
}
.ask-answer::-webkit-scrollbar-thumb:hover { background: linear-gradient(#7c7ff5, #9d6cf0); }

/* Markdown formatting inside a streamed answer. */
.ask-answer > *:first-child { margin-top: 0; }
.ask-answer > *:last-child { margin-bottom: 0; }
.ask-answer p { margin: 0 0 10px; }
.ask-answer ul, .ask-answer ol { margin: 0 0 10px; padding-left: 20px; }
.ask-answer li { margin: 3px 0; }
.ask-answer a { color: #a5b4fc; text-decoration: underline; }
.ask-answer h1, .ask-answer h2, .ask-answer h3 {
    font-size: 15px; font-weight: 700; color: #fff; margin: 12px 0 6px;
}
.ask-answer code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 5px; border-radius: 5px;
}
.ask-answer pre {
    margin: 0 0 10px;
    padding: 12px 14px;
    background: rgba(10, 8, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    overflow-x: auto;
}
.ask-answer pre code { background: none; padding: 0; line-height: 1.5; }
.ask-answer blockquote {
    margin: 0 0 10px; padding-left: 12px;
    border-left: 3px solid rgba(165, 180, 252, 0.5);
    color: #cfceec;
}

/* Streamed words: already-shown ones are static; only new ones fade/unblur in. */
.ask-word-new { animation: ask-word-in 0.4s ease backwards; }
@keyframes ask-word-in {
    from { opacity: 0; filter: blur(4px); }
    to   { opacity: 1; filter: blur(0); }
}

.ask-browse {
    display: block;
    margin: 20px auto 0;
    padding: 6px 4px;
    border: 0; background: none;
    color: rgba(215, 213, 245, 0.7);
    font-size: 13px; text-decoration: underline; cursor: pointer;
}
.ask-browse:hover { color: #fff; }

/* Special "Ask AI" nav pill — a gradient stand-out among the section tabs. */
.tab-ask {
    border: 0;
    background: linear-gradient(135deg, #22d3ee, #6366f1 55%, #a855f7);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}
.tab-ask:hover { filter: brightness(1.08); }
.tab-ask i { margin-right: 5px; }

/* Model name, italic, top-right of the overlay card (left of the close X). */
.ask-model {
    position: absolute;
    top: 18px; right: 52px;
    font-size: 11px; font-style: italic;
    color: rgba(199, 197, 240, 0.6);
    pointer-events: none;
}

@media (max-width: 560px) {
    .ask-card { padding: 30px 20px 22px; }
    .ask-brand { font-size: 23px; }
}