/**
 * Global site styles. Paths are relative to this file (under assets/css/).
 *
 * CSS_TOKEN_SYNC — shared brand tokens:
 *   tailwind.config.cjs  →  theme.extend.colors / boxShadow (rebuild: npm run build:css)
 *   This file  →  :root tokens (--color-bg-page, --color-primary, --color-teal-accent, …)
 *
 * When you change brand colors, shadows, or page background for custom CSS
 * (gradients, .header-get-started-btn, .card-surface, etc.), update BOTH:
 *   1. tailwind.config.cjs (utilities: bg-dark, text-primary, …) then rebuild compiled CSS
 *   2. The matching :root variables here so non-Tailwind rules stay aligned.
 */

/* ---------------------------------------------------------------------------
   Design tokens (edit here for broad visual changes)
   --------------------------------------------------------------------------- */
:root {
    --font-sans: "Inter", system-ui, sans-serif;
    --color-bg-page: #0d0d12;
    --color-text-main: #f1f5f9;
    --color-primary: #8b5cf6;
    --color-teal-accent: #14b8a6;
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --card-surface-bg: rgba(45, 27, 105, 0.15);
    --hero-gradient-mid: rgba(45, 27, 105, 0.4);
    --gradient-text-fill: linear-gradient(
        90deg,
        #8b5cf6 0%,
        #3b82f6 50%,
        #14b8a6 100%
    );
    /* Muted body on #0d0d12: ≥4.5:1 for normal text (WCAG AA). Use Tailwind `text-slate-300` for the same in markup. */
    --color-text-muted: #cbd5e1;
    /* Slightly softer labels; still stronger than legacy slate-400 on this bg */
    --color-text-subtle: #b8c4d1;
}

/* Home #values: top = strong primary wash; bottom = same “floor” as #security (dark + 5% primary) */
#values.home-values-gradient {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary) 44%, var(--color-bg-page) 56%) 0%,
        color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-page) 84%) 48%,
        color-mix(in srgb, var(--color-bg-page) 95%, var(--color-primary) 5%) 100%
    );
}

/* Non–Tailwind surfaces: pair with text-sm+ for readability */
.text-body-muted {
    color: var(--color-text-muted);
}

.text-subtle-muted {
    color: var(--color-text-subtle);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background-color: var(--color-bg-page);
    color: var(--color-text-main);
}

/* ---------------------------------------------------------------------------
   Surfaces & hero
   --------------------------------------------------------------------------- */
.glass-card {
    background: rgba(30, 30, 36, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-gradient {
    background: radial-gradient(
        circle at 50% 0%,
        var(--hero-gradient-mid) 0%,
        transparent 70%
    );
}

/* Pill badge status dot in page heroes (index, about, services, etc.) */
@keyframes hero-badge-dot-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
        box-shadow:
            0 0 0 0 rgba(20, 184, 166, 0.45),
            0 0 8px 1px rgba(20, 184, 166, 0.28);
    }
    50% {
        transform: scale(1.32);
        opacity: 0.82;
        filter: brightness(1.12);
        box-shadow:
            0 0 0 7px rgba(20, 184, 166, 0),
            0 0 14px 4px rgba(20, 184, 166, 0.2);
    }
}

.hero-badge-dot {
    display: inline-block;
    flex-shrink: 0;
    animation: hero-badge-dot-pulse 1.95s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hero-badge-dot {
        animation: none;
        box-shadow: none !important;
        filter: none;
        opacity: 1;
        transform: none;
    }
}

/* Contact form validation: same pulse rhythm as .hero-badge-dot — vivid red core + red glow (do not fade opacity on the dot or it reads dark). */
@keyframes contact-field-error-dot-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(248, 113, 113, 0.65),
            0 0 8px 2px rgba(239, 68, 68, 0.55),
            0 0 18px 8px rgba(239, 68, 68, 0.22);
    }
    50% {
        transform: scale(1.28);
        box-shadow:
            0 0 0 9px rgba(248, 113, 113, 0),
            0 0 14px 6px rgba(239, 68, 68, 0.65),
            0 0 26px 12px rgba(239, 68, 68, 0.28);
    }
}

.contact-field-error-dot {
    display: inline-block;
    flex-shrink: 0;
    background-color: #f87171; /* red-400 — stays visibly red at rest */
    box-shadow:
        0 0 0 1px rgba(254, 202, 202, 0.35),
        0 0 10px rgba(239, 68, 68, 0.45);
    animation: contact-field-error-dot-pulse 1.95s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .contact-field-error-dot {
        animation: none;
        transform: none;
        background-color: #f87171;
        box-shadow:
            0 0 0 1px rgba(254, 202, 202, 0.45),
            0 0 12px rgba(239, 68, 68, 0.5);
    }
}

/* Fixed header: isolate compositing layer so backdrop-blur over animated hero canvases does not shimmer (Contacts / Projects / Privacy, etc.). */
#header {
    isolation: isolate;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Mobile nav toggle icons: visibility follows aria-expanded (backup if inline styles are stripped). */
#header [data-mobile-nav-toggle][aria-expanded="true"] [data-mobile-nav-icon-bars] {
    display: none !important;
}
#header [data-mobile-nav-toggle][aria-expanded="false"] [data-mobile-nav-icon-close],
#header [data-mobile-nav-toggle]:not([aria-expanded="true"]) [data-mobile-nav-icon-close] {
    display: none !important;
}
#header [data-mobile-nav-toggle][aria-expanded="true"] [data-mobile-nav-icon-close] {
    display: flex !important;
}

/* About hero: night-sky canvases (see assets/js/about-hero-sky.js) */
.about-hero-sky {
    overflow: hidden;
    /* Limit invalidation bleed from RAF canvas repaints into ancestors (reduces chrome header flicker above). */
    contain: paint;
}

.about-hero-sky-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.about-hero-sky-bg {
    z-index: 1;
    background: radial-gradient(ellipse 120% 80% at 50% 0%, #100826 0%, #060212 45%, #030108 100%);
}

.about-hero-sky-mw {
    z-index: 2;
    background-color: transparent;
}

.about-hero-sky-stars {
    z-index: 3;
    background-color: transparent;
}

.card-surface {
    background: var(--card-surface-bg);
    border: 1px solid var(--color-border-subtle);
}

/* About page lifecycle grid: uniform 10% teal wash + base for all four cards */
body.about-page a.lifecycle-project-card {
    background:
        linear-gradient(0deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.1)),
        rgb(30 30 36 / 0.9);
}

.home-hero {
    position: relative;
    background-color: var(--color-bg-page);
}

/* ---------------------------------------------------------------------------
   Gradient text accents
   --------------------------------------------------------------------------- */
@keyframes gradient-text-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.gradient,
.text-gradient-accent {
    display: inline;
    /* Wider stops so shifting background-position reads as subtle motion */
    background-image: linear-gradient(
        95deg,
        #8b5cf6 0%,
        #6366f1 18%,
        #3b82f6 40%,
        #14b8a6 52%,
        #3b82f6 72%,
        #8b5cf6 100%
    );
    background-size: 200% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation: gradient-text-flow 16s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .gradient,
    .text-gradient-accent {
        animation: none;
        background-image: var(--gradient-text-fill);
        background-size: 100% 100%;
        background-position: 0% 50%;
    }
}

@media (forced-colors: active) {
    .gradient,
    .text-gradient-accent {
        animation: none;
        background-image: none;
        background-size: auto;
        -webkit-background-clip: unset;
        background-clip: unset;
        -webkit-text-fill-color: CanvasText;
        color: CanvasText;
    }
}

/* Header “Get Started”: same gradient + motion as .gradient titles (filled button).
   !important beats Tailwind CDN utilities injected after this stylesheet. */
#header a.header-get-started-btn {
    box-sizing: border-box;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    background-color: transparent !important;
    background-image: linear-gradient(
        95deg,
        #8b5cf6 0%,
        #6366f1 18%,
        #3b82f6 40%,
        #14b8a6 52%,
        #3b82f6 72%,
        #8b5cf6 100%
    ) !important;
    background-size: 200% 100% !important;
    background-position: 0% 50%;
    background-repeat: no-repeat !important;
    /* Match .gradient text: subtle shifting fill */
    animation: gradient-text-flow 16s ease-in-out infinite alternate;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}
#header a.header-get-started-btn:hover {
    filter: brightness(1.08);
}
#header a.header-get-started-btn:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    #header a.header-get-started-btn {
        animation: none;
        background-image: linear-gradient(
            90deg,
            #8b5cf6 0%,
            #3b82f6 50%,
            #14b8a6 100%
        ) !important;
        background-size: 100% 100% !important;
        background-position: 0% 50%;
    }
    #header a.header-get-started-btn:hover {
        filter: brightness(1.06);
    }
}
@media (forced-colors: active) {
    #header a.header-get-started-btn {
        animation: none;
        background-image: none;
        background-color: ButtonFace;
        color: ButtonText;
        filter: none;
    }
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Logo marquee (full-width, looping)
   --------------------------------------------------------------------------- */
.logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 1) 8%,
        rgba(0, 0, 0, 1) 92%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 1) 8%,
        rgba(0, 0, 0, 1) 92%,
        transparent 100%
    );
}

.logo-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 0;
    will-change: transform;
}

.logo-marquee-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3.25rem;
    padding-inline: 1.25rem;
}

.logo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #cbd5e1;
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.logo-chip:hover {
    color: #e2e8f0;
}

.logo-chip:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 6px;
    color: #e2e8f0;
}

.logo-chip .logo-marquee-img {
    height: 1.75rem;
    width: auto;
    max-width: 7rem;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.68;
    transition: opacity 180ms ease;
}

.logo-chip .logo-marquee-img.logo-marquee-img--scale-95 {
    height: 1.579375rem; /* 1.75rem × 0.95² (two 5% reductions) */
    max-width: 6.3175rem;
}

.logo-chip .logo-marquee-img.logo-marquee-img--scale-90 {
    height: 1.575rem; /* 1.75rem × 0.9 */
    max-width: 6.3rem;
}

.logo-chip:hover .logo-marquee-img,
.logo-chip:focus-visible .logo-marquee-img {
    opacity: 0.94;
}

/* ---------------------------------------------------------------------------
   Legal / Privacy TOC scroll spy (assets/js/privacy-toc.js)
   --------------------------------------------------------------------------- */
[data-legal-toc] .privacy-toc-link {
    display: block;
    padding: 6px 0 6px 12px;
    margin-left: -12px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

[data-legal-toc] .privacy-toc-link:not(.privacy-toc-link--active) {
    color: #94a3b8;
}

[data-legal-toc]
    .privacy-toc-link:not(.privacy-toc-link--active):hover {
    color: #c4b5fd;
}

[data-legal-toc] .privacy-toc-link--active {
    color: var(--color-teal-accent);
    font-weight: 600;
    border-left-color: var(--color-teal-accent);
    background-color: rgba(20, 184, 166, 0.07);
}

/* ---------------------------------------------------------------------------
   Scroll reveal cards
   --------------------------------------------------------------------------- */
.reveal-card {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 520ms ease, transform 520ms ease;
    will-change: opacity, transform;
}

.reveal-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------------------------
   Home hero floats
   --------------------------------------------------------------------------- */
@keyframes hero-float-a {
    0% {
        transform: translate3d(0, 0, 0) rotate(-0.4deg);
    }
    28% {
        transform: translate3d(6px, -14px, 0) rotate(0.8deg);
    }
    63% {
        transform: translate3d(-5px, 10px, 0) rotate(-0.6deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(-0.4deg);
    }
}

@keyframes hero-float-b {
    0% {
        transform: translate3d(0, 0, 0) rotate(0.5deg);
    }
    35% {
        transform: translate3d(-8px, -9px, 0) rotate(-0.9deg);
    }
    72% {
        transform: translate3d(7px, 13px, 0) rotate(0.6deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0.5deg);
    }
}

.hero-float-a {
    animation: hero-float-a 5.3s ease-in-out infinite;
}

.hero-float-b {
    animation: hero-float-b 7.1s ease-in-out infinite;
    animation-delay: -2.2s;
}

/* ---------------------------------------------------------------------------
   Featured code terminal (index + projects)
   --------------------------------------------------------------------------- */
.featured-code-terminal {
    box-sizing: border-box;
}

.featured-code-terminal [data-terminal-viewport] {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.featured-code-terminal [data-terminal-viewport]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.featured-code-terminal [data-terminal-mount] {
    --terminal-code-inset: clamp(10px, 2.25vw, 18px);
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    white-space: pre;
    padding-bottom: var(--terminal-code-inset);
    padding-right: var(--terminal-code-inset);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.01em;
    line-height: 1.55;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.featured-code-terminal [data-terminal-mount]::-webkit-scrollbar {
    height: 0;
}

.code-token-keyword {
    color: #c084fc;
}
.code-token-string {
    color: #22d3ee;
}
.code-token-comment {
    color: #94a3b8;
}
.code-token-variable {
    color: #f472b6;
}
.code-token-function {
    color: #facc15;
}
.code-token-number {
    color: #60a5fa;
}
.code-token-operator {
    color: #e2e8f0;
}
.code-token-default {
    color: #e5e7eb;
}

@keyframes featured-terminal-cursor {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

.featured-code-terminal [data-terminal-cursor] {
    animation: featured-terminal-cursor 1s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   About page — compact terminal (trust column typewriter)
   --------------------------------------------------------------------------- */
.about-terminal-window {
    --about-terminal-titlebar-h: 2.6875rem;
    display: flex;
    flex-direction: column;
    max-height: min(26rem, 52vh);
    min-height: 14rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    background: var(--color-bg-page);
}

.about-terminal-titlebar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.85rem;
    flex-shrink: 0;
    min-height: var(--about-terminal-titlebar-h);
    box-sizing: border-box;
    background: rgba(22, 22, 29, 0.97);
    border-bottom: 1px solid var(--color-border-subtle);
    font-family: var(--font-sans);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.about-terminal-dots {
    display: inline-flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.about-terminal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    opacity: 0.88;
}

.about-terminal-dot--red {
    background: #ff5f56;
}

.about-terminal-dot--amber {
    background: #ffbd2e;
}

.about-terminal-dot--green {
    background: #27c93f;
}

.about-terminal-title {
    font-size: 0.7rem;
    color: #94a3b8;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.about-terminal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: calc(-1 * var(--about-terminal-titlebar-h));
    padding: calc(var(--about-terminal-titlebar-h) + 0.75rem) 1.1rem 1.85rem;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.65;
    background: linear-gradient(180deg, #060608 0%, #0a0a10 55%, #08080f 100%);
    color: #94a3b8;
    position: relative;
    /* Same as projects hero terminal: keep typewriter lines start-aligned (Unicode bidi won’t center odd first lines). */
    text-align: left;
}

.about-terminal-tw-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 184, 166, 0.35) rgba(15, 15, 20, 0.5);
    margin: 0;
    padding-bottom: 0.25rem;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: start;
    direction: ltr;
    font-weight: 600;
    color: #6ee7dc;
    color: color-mix(in srgb, var(--color-teal-accent) 58%, rgb(198, 253, 243) 42%);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
        0 0 26px rgba(20, 184, 166, 0.14);
}

.about-terminal-tw-host [data-typewriter-out],
.about-terminal-tw-host [data-typewriter-cursor] {
    vertical-align: bottom;
}

/* Projects page — hero + band case windows: identical typewriter size & teal emphasis */
.about-terminal-tw-typewriter-projects {
    font-size: 13px;
    line-height: 1.65;
    font-weight: 600;
    letter-spacing: normal;
    color: #6ee7dc;
    color: color-mix(in srgb, var(--color-teal-accent) 58%, rgb(198, 253, 243) 42%);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
        0 0 26px rgba(20, 184, 166, 0.14);
}

/* Projects hero terminal: LTR/pre box like case-study strips so ~/… line isn’t visually centered by bidi rules */
.about-terminal-body.about-terminal-body--projects-hero-tw {
    text-align: left;
}

.about-terminal-tw-host.about-terminal-tw-host--projects-hero {
    text-align: start;
    direction: ltr;
    white-space: normal;
}

.about-terminal-tw-host.about-terminal-tw-host--projects-hero pre.about-terminal-hero-typewriter-pre bdo {
    display: block;
    width: 100%;
}

.about-terminal-tw-host.about-terminal-tw-host--projects-hero pre.about-terminal-hero-typewriter-pre {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-shadow: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: start;
    direction: ltr;
    max-width: 100%;
    box-sizing: border-box;
}

@keyframes about-terminal-cursor-blink {
    50% {
        opacity: 0;
    }
}

.about-terminal-window [data-typewriter-cursor] {
    display: inline-block;
    width: 0.55em;
    min-height: 1.2em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background-color: var(--color-teal-accent);
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.35);
    animation: about-terminal-cursor-blink 1.06s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
    .about-terminal-window [data-typewriter-cursor] {
        animation: none;
        opacity: 1;
    }
}

/* Project showcase Mac window: uncapped height so image + transcript never clip inside overflow:hidden */
.about-terminal-window.about-terminal-window--project.about-terminal-window--stretch {
    max-height: none;
}

.about-terminal-window.about-terminal-window--stretch
    .about-terminal-tw-host.about-terminal-tw-host--project-strip {
    flex: 0 0 auto;
    flex-shrink: 0;
    max-height: none;
    min-height: 0;
    overflow-y: visible;
    overflow-x: hidden;
}

/* lg+: fill grid row beside copy; image uses fixed-aspect tile (does not flex-grow and steal transcript space) */
@media (min-width: 1024px) {
    .about-terminal-window.about-terminal-window--stretch {
        height: 100%;
        flex: 1 1 auto;
        min-height: min(28rem, 70vh);
    }

    .about-terminal-window.about-terminal-window--stretch .about-terminal-body--project {
        flex: 1 1 auto;
    }

    .about-terminal-window.about-terminal-window--stretch .about-terminal-project-visual {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 10;
        max-height: min(14rem, 38vh);
        position: relative;
        overflow: hidden;
        align-self: stretch;
        min-height: 0;
    }

    .about-terminal-window.about-terminal-window--stretch .about-terminal-project-visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        aspect-ratio: auto;
        min-height: 0;
        object-fit: cover;
    }
}

/* Small screens: give the window breathing room vs the hero’s 52vh global cap */
@media (max-width: 1023px) {
    .about-terminal-window.about-terminal-window--project.about-terminal-window--stretch {
        min-height: min(36rem, 88vh);
    }

    .about-terminal-window.about-terminal-window--project.about-terminal-window--stretch
        .about-terminal-project-visual
        img {
        max-height: min(260px, 52vh);
    }
}

/* Project bands — mac window with preview image + typed log (hero uses default height cap only) */
.about-terminal-body.about-terminal-body--project {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    padding-top: calc(var(--about-terminal-titlebar-h) + 0.65rem);
    padding-bottom: 0.85rem;
    gap: 0.5rem;
    min-height: 0;
    align-items: stretch;
    text-align: left;
}

.about-terminal-project-visual {
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 22, 0.9);
}

.about-terminal-project-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(7rem, 24vh, 10.75rem);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

.about-terminal-tw-host.about-terminal-tw-host--project-strip {
    flex: 1 1 auto;
    min-height: 5rem;
    max-height: 7.85rem;
    display: block;
    width: 100%;
    text-align: start;
    direction: ltr;
    /* Let <pre> own wrapping so line boxes stay LTR; avoids WebKit reorder on # comment lines */
    white-space: normal;
}

.about-terminal-tw-host.about-terminal-tw-host--project-strip
    pre.about-terminal-project-pre
    bdo {
    display: block;
    width: 100%;
}

.about-terminal-tw-host.about-terminal-tw-host--project-strip
    pre.about-terminal-project-pre {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-shadow: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: start;
    direction: ltr;
    max-width: 100%;
    box-sizing: border-box;
}