/* Homelab case-study system */

:root {
    --lab-surface: #0c1420;
    --lab-surface-raised: #111d2c;
    --lab-surface-soft: #162436;
    --lab-line: rgba(148, 163, 184, 0.16);
    --lab-line-bright: rgba(96, 165, 250, 0.32);
    --lab-copy: #c8d4e3;
    --lab-muted: #8290a4;
    --lab-blue: #5ba7ff;
    --lab-cyan: #39d0e7;
    --lab-green: #55d6a6;
    --lab-amber: #f4b95f;
    --lab-violet: #a78bfa;
    --lab-red: #fb7185;
    --lab-accent: var(--lab-blue);
    --lab-accent-rgb: 91, 167, 255;
    --lab-max: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    background: #060b12;
}

body.homelab-site {
    background:
        radial-gradient(circle at 10% 10%, rgba(14, 165, 233, 0.08), transparent 24rem),
        radial-gradient(circle at 90% 30%, rgba(99, 102, 241, 0.06), transparent 26rem),
        #070d15;
    color: #edf4fc;
    min-height: 100vh;
}

.homelab-site[data-accent="amber"] {
    --lab-accent: var(--lab-amber);
    --lab-accent-rgb: 244, 185, 95;
}

.homelab-site[data-accent="green"] {
    --lab-accent: var(--lab-green);
    --lab-accent-rgb: 85, 214, 166;
}

.homelab-site[data-accent="cyan"] {
    --lab-accent: var(--lab-cyan);
    --lab-accent-rgb: 57, 208, 231;
}

.homelab-site[data-accent="violet"] {
    --lab-accent: var(--lab-violet);
    --lab-accent-rgb: 167, 139, 250;
}

.homelab-site[data-accent="red"] {
    --lab-accent: var(--lab-red);
    --lab-accent-rgb: 251, 113, 133;
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #07111e;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.lab-container {
    width: min(calc(100% - 3rem), var(--lab-max));
    margin-inline: auto;
}

.lab-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--lab-line);
    background: rgba(7, 13, 21, 0.88);
    backdrop-filter: blur(18px);
}

.lab-nav-inner {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.lab-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #f8fbff;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.lab-brand:hover {
    color: #fff;
}

.lab-brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(var(--lab-accent-rgb), 0.42);
    border-radius: 0.65rem;
    background: rgba(var(--lab-accent-rgb), 0.11);
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.8rem;
}

.lab-nav-links {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
}

.lab-nav-links a {
    color: #9fb0c4;
    font-size: 0.9rem;
    font-weight: 600;
}

.lab-nav-links a:hover,
.lab-nav-links a[aria-current="page"] {
    color: var(--lab-accent);
}

.lab-nav-cta {
    padding: 0.6rem 0.9rem;
    border: 1px solid rgba(var(--lab-accent-rgb), 0.35);
    border-radius: 0.55rem;
    background: rgba(var(--lab-accent-rgb), 0.08);
}

.lab-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--lab-line);
    border-radius: 0.6rem;
    background: var(--lab-surface);
    color: #edf4fc;
    cursor: pointer;
}

.lab-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: currentColor;
}

.lab-main {
    overflow: clip;
}

.lab-hero {
    position: relative;
    min-height: 620px;
    display: grid;
    align-items: center;
    padding: 7rem 0 5rem;
    isolation: isolate;
}

.lab-hero::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 167, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 167, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
    content: "";
}

.lab-hero::after {
    position: absolute;
    z-index: -1;
    width: 34rem;
    height: 34rem;
    top: 4rem;
    right: -8rem;
    border: 1px solid rgba(var(--lab-accent-rgb), 0.17);
    border-radius: 50%;
    box-shadow:
        0 0 0 7rem rgba(var(--lab-accent-rgb), 0.025),
        0 0 0 14rem rgba(var(--lab-accent-rgb), 0.018);
    content: "";
}

.lab-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.lab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.2rem;
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.lab-eyebrow::before {
    width: 24px;
    height: 1px;
    background: currentColor;
    content: "";
}

.lab-title {
    max-width: 780px;
    margin: 0;
    color: #f8fbff;
    font-size: clamp(3rem, 7vw, 6.2rem);
    font-weight: 760;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.lab-title span {
    color: var(--lab-accent);
}

.lab-lede {
    max-width: 690px;
    margin-top: 1.7rem;
    color: var(--lab-copy);
    font-size: clamp(1.05rem, 1.7vw, 1.27rem);
    line-height: 1.75;
}

.lab-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.lab-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.lab-button-primary {
    background: var(--lab-accent);
    color: #06101b;
    box-shadow: 0 12px 32px rgba(var(--lab-accent-rgb), 0.16);
}

.lab-button-primary:hover {
    color: #06101b;
    filter: brightness(1.08);
}

.lab-button-secondary {
    border-color: var(--lab-line-bright);
    background: rgba(12, 20, 32, 0.65);
    color: #dce9f8;
}

.lab-button-secondary:hover {
    border-color: var(--lab-accent);
    color: var(--lab-accent);
}

.hero-console {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--lab-line-bright);
    border-radius: 1rem;
    background: rgba(7, 13, 21, 0.82);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
}

.console-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--lab-line);
    background: rgba(255, 255, 255, 0.025);
}

.console-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lab-muted);
}

.console-dot:nth-child(1) {
    background: #fb7185;
}

.console-dot:nth-child(2) {
    background: #fbbf24;
}

.console-dot:nth-child(3) {
    background: #4ade80;
}

.console-label {
    margin-left: auto;
    color: #657389;
    font-family: var(--font-code);
    font-size: 0.68rem;
}

.console-body {
    display: grid;
    gap: 1rem;
    padding: 1.4rem;
    font-family: var(--font-code);
    font-size: 0.78rem;
}

.console-line {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    color: #9fb0c4;
}

.console-index {
    color: #506079;
}

.console-value {
    color: var(--lab-accent);
}

.console-rule {
    height: 1px;
    background: var(--lab-line);
}

.console-verdict {
    padding: 0.9rem;
    border: 1px solid rgba(85, 214, 166, 0.24);
    border-radius: 0.55rem;
    background: rgba(85, 214, 166, 0.07);
    color: #8ce7c6;
}

.proof-strip {
    border-block: 1px solid var(--lab-line);
    background: rgba(9, 17, 27, 0.64);
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.proof-item {
    min-height: 112px;
    padding: 1.5rem;
    border-left: 1px solid var(--lab-line);
}

.proof-item:last-child {
    border-right: 1px solid var(--lab-line);
}

.proof-value {
    display: block;
    margin-bottom: 0.25rem;
    color: #f4f8fc;
    font-size: 1.05rem;
    font-weight: 700;
}

.proof-label {
    color: var(--lab-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.lab-section {
    padding: 7rem 0;
}

.lab-section-compact {
    padding: 4.5rem 0;
}

.lab-section-muted {
    border-block: 1px solid var(--lab-line);
    background: rgba(9, 17, 27, 0.66);
}

.lab-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.6rem;
}

.lab-kicker {
    margin-bottom: 0.7rem;
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.lab-heading {
    margin: 0;
    color: #f4f8fc;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.lab-section-intro {
    max-width: 650px;
    color: var(--lab-copy);
    font-size: 1.03rem;
    line-height: 1.75;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.projects-all {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    margin-top: 2.5rem;
    text-align: center;
}

.projects-all p {
    color: var(--lab-muted);
    font-size: 0.86rem;
}

.project-tile {
    --tile-accent: var(--lab-blue);
    --tile-rgb: 91, 167, 255;
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 460px;
    align-content: end;
    border: 1px solid var(--lab-line);
    border-radius: 1rem;
    background: var(--lab-surface);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.project-tile.featured {
    grid-column: 1 / -1;
    min-height: 510px;
}

.project-tile:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--tile-rgb), 0.45);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.project-tile[data-accent="amber"] {
    --tile-accent: var(--lab-amber);
    --tile-rgb: 244, 185, 95;
}

.project-tile[data-accent="green"] {
    --tile-accent: var(--lab-green);
    --tile-rgb: 85, 214, 166;
}

.project-tile[data-accent="cyan"] {
    --tile-accent: var(--lab-cyan);
    --tile-rgb: 57, 208, 231;
}

.project-tile[data-accent="violet"] {
    --tile-accent: var(--lab-violet);
    --tile-rgb: 167, 139, 250;
}

.project-tile[data-accent="red"] {
    --tile-accent: var(--lab-red);
    --tile-rgb: 251, 113, 133;
}

.project-tile-media {
    position: absolute;
    inset: 0;
}

.project-tile-media::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(6, 11, 18, 0.98) 8%, rgba(6, 11, 18, 0.67) 50%, rgba(6, 11, 18, 0.08)),
        linear-gradient(100deg, rgba(var(--tile-rgb), 0.13), transparent 48%);
    content: "";
}

.project-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.62;
    transition: transform 500ms ease;
}

.project-tile:hover .project-tile-media img {
    transform: scale(1.025);
}

.project-tile-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 1rem;
}

.status-badge,
.module-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(var(--tile-rgb), 0.3);
    border-radius: 999px;
    background: rgba(var(--tile-rgb), 0.08);
    color: var(--tile-accent);
    font-family: var(--font-code);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-badge::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    content: "";
}

.module-badge {
    border-color: var(--lab-line);
    background: rgba(255, 255, 255, 0.03);
    color: #95a5b9;
}

.tile-title {
    margin: 0 0 0.65rem;
    color: #f8fbff;
    font-size: clamp(1.8rem, 3.8vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.project-tile:not(.featured) .tile-title {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.tile-copy {
    max-width: 690px;
    color: #bac8d8;
    line-height: 1.7;
}

.tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.tech-chip {
    padding: 0.32rem 0.55rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.025);
    color: #94a5ba;
    font-family: var(--font-code);
    font-size: 0.68rem;
}

.tile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.4rem;
    color: var(--tile-accent);
    font-size: 0.9rem;
    font-weight: 700;
}

.tile-link::after {
    content: "→";
    transition: transform 180ms ease;
}

.project-tile:hover .tile-link::after {
    transform: translateX(4px);
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.principle-card {
    padding: 1.4rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.8rem;
    background: rgba(17, 29, 44, 0.5);
}

.principle-number {
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.75rem;
}

.principle-card h3 {
    margin: 1.2rem 0 0.5rem;
    color: #ecf4fc;
    font-size: 1.05rem;
}

.principle-card p {
    color: var(--lab-muted);
    font-size: 0.86rem;
    line-height: 1.65;
}

.lineage {
    display: grid;
    grid-template-columns: 1fr 70px 1.35fr;
    align-items: center;
    gap: 1.2rem;
}

.lineage-node {
    padding: clamp(1.5rem, 4vw, 2.4rem);
    border: 1px solid var(--lab-line);
    border-radius: 0.9rem;
    background: var(--lab-surface);
}

.lineage-node.current {
    border-color: rgba(var(--lab-accent-rgb), 0.34);
    background:
        linear-gradient(135deg, rgba(var(--lab-accent-rgb), 0.09), transparent 55%),
        var(--lab-surface);
}

.lineage-node h3 {
    margin: 0.4rem 0 0.7rem;
    color: #f2f7fc;
    font-size: 1.6rem;
}

.lineage-node p {
    color: var(--lab-copy);
    line-height: 1.7;
}

.lineage-arrow {
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 2rem;
    text-align: center;
}

.module-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.module-mini {
    padding: 0.9rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.025);
    color: #9fb1c6;
    font-size: 0.78rem;
}

.lab-footer {
    padding: 3.5rem 0;
    border-top: 1px solid var(--lab-line);
    background: #060b12;
}

.lab-footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
}

.lab-footer p {
    color: #6f8096;
    font-size: 0.82rem;
}

.lab-footer-links {
    display: flex;
    gap: 1rem;
}

.lab-footer-links a {
    color: #94a5b9;
    font-size: 0.82rem;
}

/* Case-study pages */

.case-hero {
    position: relative;
    min-height: 640px;
    display: grid;
    align-items: end;
    padding: 8rem 0 5rem;
    isolation: isolate;
}

.case-hero-media {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.case-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.case-hero-media::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, #070d15 2%, rgba(7, 13, 21, 0.77) 48%, rgba(7, 13, 21, 0.5)),
        linear-gradient(90deg, rgba(7, 13, 21, 0.92), transparent 78%);
    content: "";
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.4rem;
    color: #73849a;
    font-family: var(--font-code);
    font-size: 0.72rem;
}

.breadcrumbs a {
    color: #91a2b7;
}

.breadcrumbs span::before {
    margin-right: 0.55rem;
    color: #4e5d70;
    content: "/";
}

.case-title {
    max-width: 920px;
    margin: 0;
    color: #f8fbff;
    font-size: clamp(3.2rem, 8vw, 7rem);
    line-height: 0.93;
    letter-spacing: -0.065em;
}

.case-tagline {
    max-width: 760px;
    margin: 1.5rem 0 0;
    color: #c4d1df;
    font-size: clamp(1.1rem, 2.1vw, 1.38rem);
    line-height: 1.7;
}

.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.7rem;
}

.case-meta .status-badge {
    --tile-rgb: var(--lab-accent-rgb);
    --tile-accent: var(--lab-accent);
}

.case-meta-item {
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--lab-line);
    border-radius: 999px;
    background: rgba(8, 15, 24, 0.7);
    color: #a9b8ca;
    font-family: var(--font-code);
    font-size: 0.68rem;
}

.case-nav {
    position: sticky;
    z-index: 50;
    top: 76px;
    border-block: 1px solid var(--lab-line);
    background: rgba(7, 13, 21, 0.9);
    backdrop-filter: blur(14px);
}

.case-nav-list {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.case-nav-list::-webkit-scrollbar {
    display: none;
}

.case-nav-list a {
    display: block;
    padding: 1rem 0;
    color: #7f90a5;
    font-size: 0.77rem;
    font-weight: 650;
    white-space: nowrap;
}

.case-nav-list a:hover {
    color: var(--lab-accent);
}

.case-section {
    padding: 6rem 0;
    scroll-margin-top: 132px;
}

.case-section + .case-section {
    border-top: 1px solid var(--lab-line);
}

.case-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.case-label {
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.case-side h2 {
    margin: 0.7rem 0 0;
    color: #f3f7fc;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.case-body {
    color: var(--lab-copy);
}

.case-body > p {
    max-width: 760px;
    font-size: 1.03rem;
    line-height: 1.85;
}

.case-body > p + p {
    margin-top: 1.25rem;
}

.case-body strong {
    color: #edf4fb;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.summary-card {
    padding: 1.2rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.7rem;
    background: var(--lab-surface);
}

.summary-card span {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.summary-card strong {
    display: block;
    color: #e9f1fa;
    font-size: 0.95rem;
    line-height: 1.45;
}

.architecture {
    display: grid;
    gap: 0.7rem;
    margin-top: 2rem;
}

.architecture-node {
    position: relative;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.65rem;
    background: var(--lab-surface);
}

.architecture-node:not(:last-child)::after {
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    z-index: 2;
    color: var(--lab-accent);
    font-family: var(--font-code);
    content: "↓";
}

.architecture-node code {
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.72rem;
}

.architecture-node p {
    color: #a7b6c8;
    font-size: 0.86rem;
    line-height: 1.55;
}

.workflow {
    display: grid;
    counter-reset: workflow;
    gap: 0;
    margin-top: 1.8rem;
}

.workflow-step {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1rem;
    padding-bottom: 1.7rem;
    counter-increment: workflow;
}

.workflow-step::before {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(var(--lab-accent-rgb), 0.38);
    border-radius: 50%;
    background: rgba(var(--lab-accent-rgb), 0.08);
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.7rem;
    content: counter(workflow, decimal-leading-zero);
}

.workflow-step:not(:last-child)::after {
    position: absolute;
    width: 1px;
    top: 42px;
    bottom: 4px;
    left: 19px;
    background: var(--lab-line);
    content: "";
}

.workflow-step h3 {
    margin: 0.1rem 0 0.35rem;
    color: #edf4fb;
    font-size: 1rem;
}

.workflow-step p {
    color: #92a2b6;
    font-size: 0.88rem;
    line-height: 1.65;
}

.safety-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 2rem;
}

.safety-item {
    position: relative;
    padding: 1rem 1rem 1rem 2.7rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.65rem;
    background: rgba(17, 29, 44, 0.5);
}

.safety-item::before {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--lab-green);
    font-family: var(--font-code);
    content: "✓";
}

.safety-item strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #e9f1fa;
    font-size: 0.9rem;
}

.safety-item span {
    color: #8798ad;
    font-size: 0.8rem;
    line-height: 1.5;
}

.decision-list {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.decision {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 1rem;
    padding: 1.2rem;
    border-left: 2px solid var(--lab-accent);
    background: rgba(var(--lab-accent-rgb), 0.045);
}

.decision-index {
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.72rem;
}

.decision h3 {
    margin: 0 0 0.35rem;
    color: #edf4fb;
    font-size: 1rem;
}

.decision p {
    color: #91a1b5;
    font-size: 0.86rem;
    line-height: 1.65;
}

.screenshot {
    margin-top: 2.3rem;
}

.screenshot-frame {
    overflow: hidden;
    border: 1px solid var(--lab-line-bright);
    border-radius: 0.85rem;
    background: #060b12;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.screenshot-frame img {
    width: 100%;
    height: auto;
}

.screenshot figcaption {
    margin-top: 0.8rem;
    color: #77889d;
    font-size: 0.78rem;
    line-height: 1.55;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.gallery .screenshot {
    margin-top: 0;
}

.result-callout {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(var(--lab-accent-rgb), 0.28);
    border-radius: 0.75rem;
    background:
        linear-gradient(135deg, rgba(var(--lab-accent-rgb), 0.09), transparent 65%),
        var(--lab-surface);
}

.result-callout strong {
    display: block;
    margin-bottom: 0.55rem;
    color: #eff6fd;
    font-size: 1rem;
}

.result-callout p {
    color: #9bacbf;
    font-size: 0.88rem;
    line-height: 1.65;
}

.limitation-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
    list-style: none;
}

.limitation-list li {
    position: relative;
    padding-left: 1.4rem;
    color: #95a6ba;
    line-height: 1.65;
}

.limitation-list li::before {
    position: absolute;
    left: 0;
    color: var(--lab-accent);
    content: "—";
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.related-card {
    display: block;
    padding: 1.4rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.75rem;
    background: var(--lab-surface);
}

.related-card:hover {
    border-color: rgba(var(--lab-accent-rgb), 0.35);
}

.related-card span {
    color: var(--lab-accent);
    font-family: var(--font-code);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.related-card strong {
    display: block;
    margin-top: 0.65rem;
    color: #eaf2fb;
    font-size: 1.1rem;
}

.related-card p {
    margin-top: 0.45rem;
    color: #8495aa;
    font-size: 0.82rem;
    line-height: 1.55;
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 500ms ease,
        transform 500ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

:focus-visible {
    outline: 2px solid var(--lab-accent);
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .lab-nav-links {
        position: absolute;
        display: none;
        top: calc(100% + 1px);
        right: 1.5rem;
        left: 1.5rem;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 0.6rem;
        border: 1px solid var(--lab-line);
        border-radius: 0.75rem;
        background: #0a121d;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    }

    .lab-nav-links.is-open {
        display: flex;
    }

    .lab-nav-links a {
        display: block;
        padding: 0.8rem;
    }

    .lab-menu-toggle {
        display: block;
    }

    .lab-hero-grid,
    .case-grid {
        grid-template-columns: 1fr;
    }

    .hero-console {
        max-width: 620px;
        transform: none;
    }

    .proof-grid,
    .principle-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .proof-item:nth-child(3) {
        border-top: 1px solid var(--lab-line);
    }

    .proof-item:nth-child(4) {
        border-top: 1px solid var(--lab-line);
    }

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

    .lineage-arrow {
        transform: rotate(90deg);
    }

    .case-grid {
        gap: 2rem;
    }

    .case-side {
        max-width: 620px;
    }
}

@media (max-width: 680px) {
    .lab-container {
        width: min(calc(100% - 2rem), var(--lab-max));
    }

    .lab-hero {
        min-height: 0;
        padding: 5rem 0 4rem;
    }

    .lab-title {
        font-size: clamp(2.7rem, 14vw, 4.3rem);
    }

    .proof-grid,
    .project-grid,
    .principle-grid,
    .summary-cards,
    .safety-grid,
    .gallery,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .project-tile.featured {
        grid-column: auto;
    }

    .project-tile,
    .project-tile.featured {
        min-height: 440px;
    }

    .lab-section {
        padding: 4.8rem 0;
    }

    .lab-section-head,
    .lab-footer-grid {
        align-items: flex-start;
        flex-direction: column;
    }

    .module-row {
        grid-template-columns: 1fr;
    }

    .case-hero {
        min-height: 580px;
        padding-bottom: 3.5rem;
    }

    .case-title {
        font-size: clamp(3rem, 18vw, 5rem);
    }

    .case-section {
        padding: 4.5rem 0;
    }

    .architecture-node {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}

.projects .project-grid {
    margin-top: 3rem;
}


/* Full-size project screenshot viewer */
.screenshot-frame {
    position: relative;
    cursor: zoom-in;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.screenshot-frame::after {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.45rem;
    background: rgba(4, 9, 15, 0.86);
    color: #eaf3fc;
    font-family: var(--font-code);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    content: "↗ View full size";
    pointer-events: none;
}

.screenshot-frame:hover,
.screenshot-frame:focus-visible {
    border-color: var(--lab-accent);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(var(--lab-accent-rgb), 0.12);
    transform: translateY(-2px);
}

.screenshot-frame img {
    transition: transform 240ms ease;
}

.screenshot-frame:hover img {
    transform: scale(1.01);
}

body.lightbox-open {
    overflow: hidden;
}

.image-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: rgba(2, 6, 11, 0.96);
    opacity: 0;
    transition: opacity 180ms ease;
}

.image-lightbox[hidden] {
    display: none;
}

.image-lightbox.is-open {
    opacity: 1;
}

.image-lightbox-toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--lab-line);
    background: rgba(7, 13, 21, 0.94);
}

.image-lightbox-label {
    color: #91a3b8;
    font-family: var(--font-code);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.image-lightbox-actions {
    display: flex;
    gap: 0.6rem;
}

.image-lightbox-button {
    min-height: 40px;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--lab-line-bright);
    border-radius: 0.5rem;
    background: var(--lab-surface);
    color: #dbe8f5;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.image-lightbox-button:hover {
    border-color: var(--lab-accent);
    color: var(--lab-accent);
}

.image-lightbox-close span {
    margin-left: 0.35rem;
    font-size: 1.2rem;
    line-height: 0;
}

.image-lightbox-stage {
    overflow: auto;
    display: grid;
    min-width: 0;
    min-height: 0;
    padding: clamp(1rem, 3vw, 2rem);
    place-items: center;
    overscroll-behavior: contain;
}

.image-lightbox-figure {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    margin: auto;
}

.image-lightbox-image {
    display: block;
    width: auto;
    max-width: min(94vw, 1800px);
    max-height: calc(100vh - 130px);
    border: 1px solid var(--lab-line-bright);
    border-radius: 0.55rem;
    background: #060b12;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    cursor: zoom-in;
}

.image-lightbox.is-actual-size .image-lightbox-stage {
    place-items: start;
}

.image-lightbox.is-actual-size .image-lightbox-image {
    width: auto;
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

.image-lightbox-caption {
    max-width: 900px;
    color: #94a6bb;
    font-size: 0.8rem;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 680px) {
    .image-lightbox-toolbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.7rem 1rem;
    }

    .image-lightbox-actions {
        width: 100%;
    }

    .image-lightbox-button {
        flex: 1;
    }

    .image-lightbox-image {
        max-height: calc(100vh - 180px);
    }
}


/* Personal builder story */
.builder-section {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.builder-story {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(2rem, 6vw, 5rem);
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid var(--lab-line-bright);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--lab-accent) 16%, transparent), transparent 32%),
        linear-gradient(145deg, rgba(16, 29, 44, 0.96), rgba(7, 14, 24, 0.98));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
}

.builder-story-copy > p:not(.lab-kicker) {
    max-width: 68ch;
    color: var(--lab-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.builder-quote strong {
    color: var(--lab-accent);
}

.builder-quote {
    position: relative;
    margin: 2rem 0 0;
    padding: 1.35rem 1.4rem 1.35rem 1.6rem;
    border-left: 3px solid var(--lab-accent);
    border-radius: 0 0.7rem 0.7rem 0;
    background: rgba(3, 10, 18, 0.58);
    color: #dce9f7;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 600;
    line-height: 1.65;
}

.build-loop {
    display: grid;
    align-content: center;
    gap: 0.8rem;
}

.build-loop-step {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--lab-line);
    border-radius: 0.8rem;
    background: rgba(4, 12, 21, 0.72);
}

.build-loop-step > span {
    color: var(--lab-accent);
    font-family: "Fira Code", monospace;
    font-size: 0.78rem;
    font-weight: 600;
}

.build-loop-step strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--lab-text);
}

.build-loop-step p {
    margin: 0;
    color: var(--lab-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.build-note {
    margin: 1.7rem 0;
    padding: 1.2rem 1.3rem;
    border: 1px solid color-mix(in srgb, var(--lab-accent) 36%, var(--lab-line));
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--lab-accent) 7%, rgba(5, 13, 22, 0.88));
}

.build-note span {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--lab-accent);
    font-family: "Fira Code", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.build-note p {
    margin: 0;
    color: #c3d2e3;
    line-height: 1.7;
}

.gallery-featured .screenshot:first-child {
    grid-column: 1 / -1;
}

@media (max-width: 880px) {
    .builder-story {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .gallery-featured .screenshot:first-child {
        grid-column: auto;
    }
}