/* ── Full-Bleed Section Canvas & Tactical Dot-Matrix Texture ─────────── */
.experience-main {
    width: 100%;
    min-height: calc(100vh - 12rem);
    background-color: var(--color-bg-secondary);
    background-image: 
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 40%, transparent) 1px, transparent 0);
    background-size: 28px 28px;
    padding-top: clamp(2rem, 4vh, 3.5rem);
    padding-bottom: 5rem;
}

.experience-page-shell {
    width: min(100% - (2 * var(--page-padding, 1.25rem)), 78rem);
    margin-inline: auto;
}

/* ── Page Hero Header (Spacious About Spacing) ───────────── */
.experience-hero {
    padding-top: clamp(4.5rem, 9vh, 8rem);
    padding-bottom: 0;
}

.page-hero__header {
    max-width: 44rem;
    margin-bottom: clamp(3rem, 6vh, 5.5rem);
}

.page-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-bright);
    margin-bottom: 0.75rem;
}

.page-hero__title {
    font-size: clamp(3.25rem, 7vw, 4.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0 0 1.25rem 0;
}

.page-hero__lead {
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0;
}

.experience-stat-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.experience-stat-badge {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-badge-num {
    font-weight: 700;
    color: var(--color-accent-bright);
}

.experience-stat-badge--active {
    color: var(--color-accent-bright);
    font-weight: 600;
}

.stat-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent-bright);
    box-shadow: 0 0 8px var(--color-accent-bright);
}

/* ------------------------------------------------------------
   Controls bar (aligned with Projects filter UI)
   ------------------------------------------------------------ */

.exp-controls {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.projects-filter-groups {
    display: grid;
    gap: 1rem;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.filter-group__title,
.exp-controls-label {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-right: 0.4rem;
    min-width: 4rem;
}

/* Filter / Match / Sort pill & chip buttons */
.filter-btn,
.exp-filter-btn,
.exp-match-btn,
.exp-sort-btn {
    padding: 0.35rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.4;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
    white-space: nowrap;
    text-decoration: none;
}

.filter-btn:hover,
.exp-filter-btn:hover,
.exp-match-btn:hover,
.exp-sort-btn:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-accent) 20%);
}

.filter-btn[aria-pressed="true"],
.exp-filter-btn[aria-pressed="true"],
.exp-match-btn[aria-pressed="true"],
.exp-sort-btn[aria-pressed="true"] {
    color: var(--color-accent-bright);
    background: color-mix(in srgb, var(--color-accent-deep) 15%, transparent);
    border-color: var(--color-accent);
    font-weight: 600;
}

.projects-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.25rem;
}

.result-count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.clear-filters-btn {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-accent);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.clear-filters-btn:hover {
    color: var(--color-text);
}

/* ------------------------------------------------------------
   Mobile filter disclosure
   ------------------------------------------------------------ */

.exp-mobile-filter {
    display: none;
    position: relative;
}

.exp-mobile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}

.exp-mobile-trigger:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-bright);
}

.exp-mobile-trigger[aria-expanded="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent-bright);
}

.exp-mobile-trigger__arrow {
    font-size: 0.68rem;
    transition: transform 200ms ease;
}

.exp-mobile-trigger[aria-expanded="true"] .exp-mobile-trigger__arrow {
    transform: rotate(180deg);
}

.exp-mobile-panel {
    display: none;
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 14rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.exp-mobile-panel[aria-hidden="false"] {
    display: block;
}

.exp-mobile-panel__heading {
    margin: 0 0 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.exp-mobile-checkboxes {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.exp-mobile-checkboxes label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
}

.exp-mobile-checkboxes input[type="checkbox"] {
    accent-color: var(--color-accent-bright);
    width: 0.95rem;
    height: 0.95rem;
    cursor: pointer;
    flex-shrink: 0;
}

.exp-mobile-panel__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.8rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border);
}

.exp-mobile-clear {
    padding: 0.15rem 0.35rem;
    background: transparent;
    border: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 140ms ease;
}

.exp-mobile-clear:hover {
    color: var(--color-accent-bright);
}

/* ------------------------------------------------------------
   Timeline + experience list
   ------------------------------------------------------------ */

.exp-list-section {
    margin-top: 2.5rem;
}

.exp-timeline {
    position: relative;
    display: grid;
    gap: 2rem;
}

/* Subtle vertical line running through the timeline */
.exp-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5.5rem;
    width: 1px;
    background: var(--color-border);
    pointer-events: none;
}

/* Year group */
.exp-year-group {
    display: grid;
    gap: 1.25rem;
}

/* Year marker row */
.exp-year-marker {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exp-year-label {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    width: 4rem;
    flex-shrink: 0;
    text-align: right;
}

.exp-year-line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    opacity: 0.6;
}

/* ------------------------------------------------------------
   Experience cards
   ------------------------------------------------------------ */

.exp-card {
    position: relative;
    display: block;
    margin-left: 7rem; /* offset to the right of the year label + timeline line */
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
    min-height: 9.5rem;
    transform-origin: center;
    transition: transform 200ms ease, border-color 200ms ease;
    will-change: transform;
}

.exp-card--current {
    border-left: 3px solid var(--color-accent-bright);
}

.exp-card__current-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--color-accent-bright) 35%, transparent);
    background: color-mix(in srgb, var(--color-accent-bright) 10%, transparent);
    color: var(--color-accent-bright);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
}

.exp-card__pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent-bright);
    box-shadow: 0 0 6px var(--color-accent-bright);
}

.exp-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-bright);
    border-left-color: var(--color-accent-bright);
    background: color-mix(in srgb, var(--color-surface) 90%, var(--color-accent-deep) 10%);
    box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--color-accent-bright) 35%, transparent),
                0 12px 24px -6px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 10;
}

/* Bottom layer (Z-1): Right 1/3 illustration with sharp slant left slice + extra width */
.exp-card__illustration {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44%; /* 1/3 + extra width so slant slice doesn't reveal empty background */
    z-index: 1;
    overflow: hidden;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    background: color-mix(in srgb, var(--color-bg-secondary) 75%, var(--color-surface) 25%);
    pointer-events: none;
}

.exp-card__illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Top content layer (Z-3): 2/5 visible surface, 3/5 transparent with smooth transition in between */
.exp-card__content {
    position: relative;
    z-index: 3;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 9.5rem;
    background: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-surface) 38%,
        color-mix(in srgb, var(--color-surface) 80%, transparent) 46%,
        color-mix(in srgb, var(--color-surface) 30%, transparent) 55%,
        transparent 65%
    );
}

.exp-card__role {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--color-text);
}

.exp-card__company {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.exp-card__period {
    color: var(--color-text-muted);
    opacity: 0.85;
}

/* Tags row */
.exp-card__tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.exp-card__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.exp-card__tag + .exp-card__tag::before {
    content: "·";
    margin-right: 0.5rem;
    color: var(--color-border);
}

.exp-card__tag-overflow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.65;
    white-space: nowrap;
}

/* Card actions */
.exp-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

.exp-quickview-btn {
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    cursor: pointer;
    transition: color 140ms ease, text-decoration-color 140ms ease;
}

.exp-quickview-btn:hover {
    color: var(--color-accent-bright);
    text-decoration-color: var(--color-accent-bright);
}

.exp-detail-link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: color 140ms ease, text-decoration-color 140ms ease;
}

.exp-detail-link:hover {
    color: var(--color-accent-bright);
    text-decoration-color: currentColor;
}

/* Under construction action - visually disabled */
.exp-detail-construction {
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.42;
    cursor: default;
    text-decoration: none;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Middle layer (Z-2): Under-construction overlay
   Shows in z-middle over the right illustration strip only
   ------------------------------------------------------------ */

.exp-card--construction .exp-card__construction-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44%;
    z-index: 2;
    overflow: hidden;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 1.25rem; /* account for slant slice offset */
    gap: 0.4rem;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.exp-card--construction:hover .exp-card__construction-overlay {
    opacity: 1;
}

.exp-card__construction-overlay img {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    opacity: 0.7;
}


.exp-card__construction-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: center;
}

.exp-card__construction-sub {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    opacity: 0.7;
    text-align: center;
}

/* ------------------------------------------------------------
   Empty filter state
   ------------------------------------------------------------ */

.exp-empty {
    padding: 3rem 0;
    border-top: 1px solid var(--color-border);
}

.exp-empty[hidden] {
    display: none;
}

.exp-empty__message {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 0.45rem;
}

.exp-empty__hint {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    opacity: 0.7;
    margin: 0;
}

/* Hide individual cards when filtered out */
.exp-card[data-hidden="true"] {
    display: none;
}

.exp-year-group[data-hidden="true"] {
    display: none;
}

/* ------------------------------------------------------------
   Quick View modal
   ------------------------------------------------------------ */

/* Custom backdrop - accent-tinted gradient with blur */
.exp-qv-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent-deep) 25%, transparent) 0%,
        color-mix(in srgb, var(--color-bg) 65%, var(--color-accent-deep) 35%) 50%,
        color-mix(in srgb, var(--color-bg) 45%, var(--color-accent) 55%) 100%
    );
    backdrop-filter: blur(5px);
    display: none;
}

.exp-qv-backdrop[data-visible="true"] {
    display: block;
}

/* Dialog element */
.exp-qv-dialog {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(38rem, calc(100vw - 2rem));
    max-height: min(90vh, 44rem);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    padding: 0;
    margin: 0;
}

/* Native backdrop styling using accent tint */
.exp-qv-dialog::backdrop {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent-deep) 25%, transparent) 0%,
        color-mix(in srgb, var(--color-bg) 65%, var(--color-accent-deep) 35%) 50%,
        color-mix(in srgb, var(--color-bg) 45%, var(--color-accent) 55%) 100%
    );
    backdrop-filter: blur(5px);
}

/* Native dialog reset + animation */
.exp-qv-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: exp-qv-enter 220ms ease forwards;
}

/* Animation: slide up + scale in */
@keyframes exp-qv-enter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 1.2rem)) scale(0.975);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* Dialog inner structure */
.exp-qv-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    flex: 1;
}

/* Close button */
.exp-qv-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    padding: 0.25rem 0.45rem;
    background: transparent;
    border: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 140ms ease;
}

.exp-qv-close:hover {
    color: var(--color-accent-bright);
}

/* Header */
.exp-qv-header {
    padding-right: 2rem; /* avoid overlap with × button */
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
}

.exp-qv-role {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--color-text);
}

.exp-qv-company {
    margin: 0.3rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.exp-qv-company a {
    color: var(--color-text-muted);
    text-decoration-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
}

.exp-qv-company a:hover {
    color: var(--color-accent-bright);
}

.exp-qv-date {
    margin: 0.2rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    opacity: 0.72;
}

/* Context */
.exp-qv-context {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

/* Contributions */
.exp-qv-section-label {
    margin: 0 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.exp-qv-contributions {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exp-qv-contributions li {
    display: flex;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.55;
}

.exp-qv-contributions li::before {
    content: "-";
    color: var(--color-accent);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    margin-top: 0.1em;
}

/* Evidence rows */
.exp-qv-evidence {
    border-top: 1px solid var(--color-border);
    padding-top: 0.85rem;
    display: grid;
    gap: 0.55rem;
}

.exp-qv-evidence-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
}

.exp-qv-evidence-type {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.exp-qv-evidence-detail {
    font-size: 0.87rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.exp-qv-evidence-detail strong {
    color: var(--color-text);
    font-weight: 500;
}

/* ------------------------------------------------------------
   Responsive - Tablet (≤ 900px)
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    .exp-card {
        margin-left: 4rem;
    }

    .exp-timeline::before {
        left: 3.2rem;
    }

    .exp-year-label {
        width: 2.8rem;
        font-size: 0.72rem;
    }
}

/* ------------------------------------------------------------
   Responsive - Mobile (≤ 760px)
   ------------------------------------------------------------ */

@media (max-width: 760px) {
    /* Controls: hide desktop filters, show mobile disclosure */
    .exp-controls-group--desktop-filters {
        display: none;
    }

    .exp-mobile-filter {
        display: block;
    }

    /* Stack match/sort on their own row */
    .exp-controls {
        gap: 0.65rem 1.25rem;
    }

    /* Timeline: remove vertical line + year offset */
    .exp-timeline::before {
        display: none;
    }

    .exp-card {
        margin-left: 0;
    }

    .exp-year-group {
        gap: 0.9rem;
    }

    .exp-year-marker {
        gap: 0.6rem;
    }

    .exp-year-label {
        width: auto;
        text-align: left;
    }

    .exp-card__illustration {
        width: 50%;
        opacity: 0.35;
        clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    }

    /* Hide construction overlay on mobile (touch) */
    .exp-card--construction .exp-card__construction-overlay {
        display: none;
    }

    /* Quick View dialog full-width on mobile */
    .exp-qv-dialog {
        width: calc(100vw - 1.5rem);
        max-height: 90vh;
    }

    .exp-qv-inner {
        padding: 1.2rem;
    }

    .exp-qv-evidence-row {
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------
   Light mode compatibility
   All values inherit from CSS custom properties automatically.
   These overrides handle any surface/shadow adjustments.
   ------------------------------------------------------------ */

html[data-theme="light"] .exp-mobile-panel {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .exp-qv-backdrop {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 28%,
        rgba(0, 0, 0, 0.18) 58%,
        rgba(0, 0, 0, 0.34) 100%
    );
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .exp-card {
        transition: border-color 0.01ms !important;
    }

    .exp-card:hover {
        transform: none;
    }

    .exp-card--construction .exp-card__construction-overlay {
        transition: none !important;
    }

    .exp-qv-dialog[open] {
        animation: none;
    }

    .exp-mobile-trigger__arrow {
        transition: none !important;
    }
}

/* ============================================================
   Experience detail pages
   Used by: /pages/experience/[slug]/index.html
   These pages are one level deeper than the index.
   ============================================================ */

/* ── Breadcrumb / back navigation ────────────────────────── */

.exp-detail-nav {
    padding: 1.4rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.exp-detail-nav a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 140ms ease;
}

.exp-detail-nav a:hover {
    color: var(--color-accent-bright);
}

.exp-detail-nav span {
    color: var(--color-text);
}

/* ── Role header ─────────────────────────────────────────── */

.exp-detail-header {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.exp-detail-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 1rem;
}

.exp-detail-role {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.exp-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.5rem;
}

.exp-detail-period {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0;
}

.exp-detail-company {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0;
}

.exp-detail-company a {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 140ms ease;
}

.exp-detail-company a:hover {
    color: var(--color-accent-bright);
}

.exp-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
}

.exp-detail-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 0.15rem 0.55rem;
    border-radius: 2px;
}

/* ── Illustration frame ──────────────────────────────────── */

.exp-detail-illustration {
    margin: 2.5rem 0;
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.exp-detail-illustration img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.exp-detail-section,
.exp-detail-contrib-list,
.exp-detail-evidence-block {
    min-width: 0;
}

/* ── Content sections ─────────────────────────────────────── */

.exp-detail-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.exp-detail-section {
    padding: 2rem 0;
    border-bottom: 1px solid var(--color-border);
}

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

.exp-detail-section-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 1rem;
}

.exp-detail-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0 0 0.85rem;
    line-height: 1.25;
}

.experience-page .exp-detail-section .exp-section-title {
    font-size: clamp(2rem, 3.8vw, 4.25rem);
    line-height: 1;
    letter-spacing: 0;
}

.exp-detail-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0 0 0.65rem;
    max-width: 68ch;
}

.exp-detail-section p:last-child {
    margin-bottom: 0;
}

/* ── Contribution list ───────────────────────────────────── */

.exp-detail-contrib-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 68ch;
}

.exp-detail-contrib-list li {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    padding-left: 1.25rem;
    position: relative;
}

.exp-detail-contrib-list li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 600;
}

/* ── Technology grid ─────────────────────────────────────── */

.exp-detail-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 3rem;
    margin-top: 0.5rem;
}

.exp-detail-tech-category-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 0.65rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
}

.exp-detail-tech-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.exp-detail-tech-list li {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.exp-detail-tech-list li abbr {
    border-bottom: 1px dotted var(--color-border);
    cursor: help;
    text-decoration: none;
}

/* ── Tooling list (simple, inline) ──────────────────────── */

.exp-detail-tooling {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.exp-detail-tooling li {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* ── Evidence summary block ──────────────────────────────── */

.exp-detail-evidence-block {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.exp-detail-evidence-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
}

.exp-detail-evidence-type {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.exp-detail-evidence-detail {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

/* ── Outcome metric (Argon performance score) ────────────── */

.exp-detail-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-top: 0.65rem;
}

.exp-detail-metric__value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

.exp-detail-metric__arrow {
    color: var(--color-accent);
    font-size: 0.9rem;
}

/* ── Note (placeholder note) ─────────────────────────────── */

.exp-detail-note {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--color-text-muted);
    margin: 0.5rem 0 0;
    opacity: 0.7;
}

/* ── Responsive - tablet ─────────────────────────────────── */

@media (max-width: 760px) {
    .exp-detail-nav {
        overflow-x: auto;
        white-space: nowrap;
    }

    .exp-detail-tech-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .exp-detail-role {
        font-size: 1.75rem;
    }

    .exp-detail-evidence-row {
        grid-template-columns: 6rem minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .exp-detail-meta {
        flex-direction: column;
        gap: 0.25rem;
    }

    .exp-detail-metric {
        flex-direction: column;
        gap: 0.15rem;
    }
}

/* ============================================================
   Experience presentation system
   Scoped toolkit for Experience detail pages.
   ============================================================ */

.experience-page {
    --exp-content-max: 86rem;
    --exp-wide-max: 108rem;
    --exp-reading-max: 64rem;
    --exp-section-space: clamp(4.75rem, 7vw, 7.5rem);
    --exp-section-space-sm: clamp(3.5rem, 5vw, 5rem);
    --exp-gutter: clamp(1.25rem, 4vw, 4rem);
    --exp-radius-sm: 2px;
    --exp-radius-md: 4px;
    --exp-radius-lg: 8px;
    --exp-border: var(--color-border);
    --exp-surface: var(--color-bg);
    --exp-surface-raised: var(--color-surface);
    --exp-surface-muted: var(--color-bg-secondary);
    --exp-text: var(--color-text);
    --exp-text-muted: var(--color-text-muted);
    --exp-accent: var(--color-accent);
    --exp-accent-soft: color-mix(in srgb, var(--exp-accent) 12%, transparent);
    --exp-accent-strong: var(--color-accent-bright);
    --exp-hero-bg: var(--color-bg);
    --exp-section-tint: color-mix(in srgb, var(--exp-accent) 8%, var(--color-bg));
    --exp-grid-color: color-mix(in srgb, var(--exp-accent) 22%, transparent);
    width: 100%;
    overflow-x: clip;
    background: var(--exp-surface);
    color: var(--exp-text);
}

.experience-page .exp-detail-nav,
.experience-page .exp-detail-header,
.experience-page .exp-detail-body,
.experience-page .exp-detail-section {
    border: 0;
}

.experience-page .exp-detail-nav {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
    margin-inline: auto;
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

.experience-page > .exp-section {
    grid-column: 1 / -1;
}

.exp-detail-hero {
    display: grid;
    grid-template-columns:
        minmax(var(--exp-gutter), 1fr)
        minmax(0, calc(var(--exp-content-max) * 0.52))
        minmax(0, calc(var(--exp-content-max) * 0.48))
        minmax(var(--exp-gutter), 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.exp-detail-hero > .exp-detail-header {
    grid-column: 2 / 3;
    width: 100%;
    margin: 0;
    padding: 0;
}

.exp-detail-hero > .exp-detail-illustration {
    grid-column: 3 / 4;
    width: 100%;
    margin: 0;
}

.exp-section--gradient > .exp-split--text-heavy {
    --exp-left: 1.15fr;
    --exp-right: 0.85fr;
}

.experience-page .exp-detail-header {
    padding: 0;
}

.experience-page .exp-detail-meta,
.experience-page .exp-detail-tags {
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

.experience-page .exp-detail-illustration {
    margin-block: 0;
}

.experience-page .exp-detail-illustration.exp-media-frame {
    display: flex;
    min-height: clamp(18rem, 28vw, 30rem);
    padding: clamp(0.75rem, 1.4vw, 1.25rem);
}

.experience-page .exp-detail-illustration.exp-media-frame img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    aspect-ratio: auto;
    object-fit: cover;
}

.experience-page .exp-detail-body {
    display: block;
}

.experience-page .exp-detail-section {
    padding: 0;
}

.experience-page .exp-detail-section.exp-section {
    padding-block: var(--exp-section-space);
}

.experience-page .exp-detail-section.exp-section--compact {
    padding-block: var(--exp-section-space-sm);
}

.experience-page > .exp-detail-header,
.experience-page > .exp-detail-illustration {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
    margin-inline: auto;
}

.experience-page > .exp-detail-header {
    padding-block: var(--exp-section-space-sm) clamp(1.25rem, 3vw, 2.5rem);
}

.experience-page > .exp-detail-illustration {
    margin-block: 0 var(--exp-section-space);
}

.experience-page > .exp-detail-header + .exp-detail-illustration {
    margin-top: 0;
}

.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) {
    padding-block: var(--exp-section-space-sm);
    background: var(--exp-surface);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > :not(.exp-container):not(.exp-reading):not(.exp-wide):not(.exp-full) {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
    margin-inline: auto;
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-eyebrow,
.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-section-title {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
    margin-inline: auto;
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-section-title {
    margin-bottom: clamp(1.35rem, 2.5vw, 2.25rem);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > p {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-reading-max));
    margin-inline: auto;
    color: var(--exp-text-muted);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.75;
    margin-block: 0 clamp(1rem, 2vw, 1.4rem);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-wide-max));
    max-width: var(--exp-wide-max);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list:not(.exp-stack):not(.exp-numbered-story) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list:not(.exp-stack):not(.exp-numbered-story) > li {
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--exp-border);
    background: color-mix(in srgb, var(--exp-surface-muted) 84%, var(--exp-surface-raised) 16%);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-tech-grid,
.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-evidence-block,
.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-architecture {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
    max-width: var(--exp-content-max);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-evidence-block {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-tooling {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
    max-width: var(--exp-content-max);
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    padding-top: 1rem;
    border-top: 1px solid var(--exp-border);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section--contrast > .exp-detail-contrib-list {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section):nth-of-type(even) {
    background: color-mix(in srgb, var(--exp-surface-muted) 55%, var(--exp-surface) 45%);
}

.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) + .exp-detail-section:not(.exp-section) {
    border-top: 1px solid color-mix(in srgb, var(--exp-border) 58%, transparent);
}

.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) h2 {
    max-width: var(--exp-reading-max);
    margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
}

.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) p,
.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) ul,
.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) ol,
.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) .exp-detail-tech-grid,
.experience-page .exp-detail-body > .exp-detail-section:not(.exp-section) .exp-detail-evidence-block {
    max-width: var(--exp-reading-max);
}

.experience-page .exp-detail-section p,
.experience-page .exp-detail-contrib-list {
    max-width: none;
}

.experience-page .exp-detail-contrib-list {
    list-style: none;
    padding: 0;
}

.experience-page .exp-detail-contrib-list li {
    padding-left: 0;
}

.experience-page .exp-detail-contrib-list li::before {
    content: none;
}

.experience-page .exp-artifact-row {
    display: grid;
    flex-direction: initial;
}

.experience-page .exp-artifact-row > li {
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--exp-border);
    background: color-mix(in srgb, var(--exp-surface-muted) 84%, var(--exp-surface-raised) 16%);
    line-height: 1.65;
}

.experience-page .exp-numbered-story {
    display: flex;
    flex-direction: column;
    counter-reset: exp-story;
    gap: clamp(1.25rem, 2.4vw, 2rem);
}

.experience-page .exp-numbered-story > li {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 1.5vw, 1.1rem);
    align-items: start;
    padding-block: clamp(1.3rem, 2.6vw, 2.2rem);
    border-top: 1px solid var(--exp-border);
    line-height: 1.65;
}

.experience-page .exp-numbered-story > li::before {
    counter-increment: exp-story;
    content: counter(exp-story, decimal-leading-zero);
    position: static;
    color: color-mix(in srgb, var(--exp-accent) 78%, var(--exp-text));
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 5vw, 5.25rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: 0;
}

.experience-page .exp-detail-evidence-block {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.experience-page .exp-detail-evidence-row {
    padding-top: 0.8rem;
    border-top: 1px solid var(--exp-border);
}

.exp-container,
.exp-reading,
.exp-wide {
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
    margin-inline: auto;
}

.exp-reading {
    max-width: var(--exp-reading-max);
}

.exp-wide {
    max-width: var(--exp-wide-max);
}

.exp-full {
    width: 100%;
}

.exp-section {
    position: relative;
    padding-block: var(--exp-section-space);
    overflow: visible;
}

.exp-section--compact {
    padding-block: var(--exp-section-space-sm);
}

.exp-section--plain {
    background: var(--exp-surface);
}

.exp-section--subtle {
    background: color-mix(in srgb, var(--exp-surface-muted) 62%, var(--exp-surface) 38%);
}

.exp-section--raised {
    background: var(--exp-surface-raised);
}

.exp-section--tinted {
    background: var(--exp-section-tint);
}

.exp-section--contrast {
    background: color-mix(in srgb, var(--color-bg-secondary) 78%, #000 22%);
}

html[data-theme="light"] .exp-section--contrast {
    background: color-mix(in srgb, var(--color-bg-secondary) 70%, #fff 30%);
}

.exp-section--gradient {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--exp-accent) 12%, transparent), transparent 42%),
        linear-gradient(180deg, var(--exp-surface-muted), var(--exp-surface));
}

.exp-section--grid {
    background-color: var(--exp-surface);
    background-image:
        linear-gradient(var(--exp-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--exp-grid-color) 1px, transparent 1px);
    background-size: 42px 42px;
}

.exp-section--noise {
    background:
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--exp-text) 5%, transparent) 0 1px, transparent 1px),
        var(--exp-surface-muted);
    background-size: 9px 9px;
}

.exp-section--paper {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--exp-border) 55%, transparent) 1px, transparent 1px) 0 0 / 100% 2.1rem,
        color-mix(in srgb, var(--exp-surface-muted) 82%, var(--exp-surface) 18%);
}

.exp-section--terminal {
    background:
        linear-gradient(180deg, color-mix(in srgb, #000 14%, transparent), transparent),
        color-mix(in srgb, var(--color-bg) 88%, var(--exp-accent) 12%);
}

.exp-display {
    margin: 0;
    font-size: clamp(3rem, 8vw, 7.6rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: 0;
    max-width: 11ch;
}

.exp-section-title {
    margin: 0;
    font-size: clamp(2.25rem, 4vw, 4.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.exp-section-title + :where(p, ul, ol, div) {
    margin-top: clamp(1.35rem, 2.5vw, 2.25rem);
}

.exp-eyebrow,
.exp-meta {
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.exp-eyebrow {
    margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
    color: var(--exp-accent-strong);
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    font-weight: 600;
}

.exp-meta {
    margin: 0;
    color: var(--exp-text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.exp-prose {
    max-width: var(--exp-reading-max);
    color: var(--exp-text-muted);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.75;
}

.exp-prose p {
    margin-block: 0 clamp(1rem, 2vw, 1.4rem);
}

.exp-prose > *:first-child {
    margin-top: 0;
}

.exp-prose > *:last-child {
    margin-bottom: 0;
}

.exp-statement {
    margin: 0;
    font-size: clamp(2.6rem, 9vw, 8.5rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
}

.exp-number {
    color: color-mix(in srgb, var(--exp-accent) 46%, transparent);
    font-family: var(--font-mono);
    font-size: clamp(3rem, 9vw, 7.5rem);
    font-weight: 600;
    line-height: 0.8;
}

.exp-split,
.exp-asymmetric {
    display: grid;
    grid-template-columns: minmax(0, var(--exp-left, 1fr)) minmax(0, var(--exp-right, 1fr));
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: var(--exp-align, start);
}

.exp-split--text-heavy {
    --exp-left: 0.72fr;
    --exp-right: 1.28fr;
}

.exp-split--media-heavy {
    --exp-left: 0.75fr;
    --exp-right: 1.25fr;
}

.exp-asymmetric--40-60 {
    --exp-left: 0.8fr;
    --exp-right: 1.2fr;
}

.exp-asymmetric--35-65 {
    --exp-left: 0.7fr;
    --exp-right: 1.3fr;
}

.exp-asymmetric--65-35 {
    --exp-left: 1.3fr;
    --exp-right: 0.7fr;
}

.exp-stack {
    display: grid;
    gap: var(--exp-stack-gap, clamp(1rem, 2.5vw, 2rem));
}

.exp-stack > .exp-section-title + .exp-detail-contrib-list,
.exp-stack > .exp-section-title + .exp-artifact-row {
    margin-top: clamp(1.25rem, 3vw, 2.5rem);
}

.exp-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.exp-stage {
    position: relative;
    min-height: auto;
    padding: clamp(1rem, 3vw, 2rem);
    overflow: clip;
}

.exp-overlap {
    position: relative;
    margin-top: var(--exp-overlap-y, 0);
    z-index: 1;
}

.exp-offset-left {
    transform: translateX(clamp(-4rem, -4vw, -1.5rem));
}

.exp-offset-right {
    transform: translateX(clamp(0rem, 1.5vw, 1.5rem));
}

.exp-media,
.exp-media-frame,
.exp-illustration,
.exp-screenshot,
.exp-artifact,
.exp-figure {
    min-width: 0;
}

.exp-media img,
.exp-media-frame img,
.exp-illustration img,
.exp-screenshot img,
.exp-artifact img,
.exp-figure img {
    width: 100%;
    height: auto;
}

.exp-media-frame,
.exp-screenshot,
.exp-artifact {
    border: 1px solid var(--exp-border);
    background: color-mix(in srgb, var(--exp-surface-muted) 78%, var(--exp-surface-raised) 22%);
    overflow: hidden;
}

.exp-media-frame {
    border-radius: var(--exp-media-radius, var(--exp-radius-md));
    padding: var(--exp-media-padding, 0.75rem);
}

.exp-media-frame--square {
    --exp-media-radius: 0;
}

.exp-media-frame--rounded {
    --exp-media-radius: var(--exp-radius-lg);
}

.exp-illustration {
    overflow: visible;
}

.exp-illustration img {
    transform: translate(var(--exp-offset-x, 0), var(--exp-offset-y, 0)) rotate(var(--exp-rotate, 0)) scale(var(--exp-scale, 1));
    transform-origin: center;
}

.exp-screenshot {
    border-radius: var(--exp-radius-sm);
    padding: 0.5rem;
}

.exp-artifact {
    border-radius: var(--exp-radius-sm);
    padding: clamp(0.85rem, 2vw, 1.35rem);
}

.exp-collage {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
    align-items: center;
}

.exp-collage-item {
    grid-column: span var(--exp-span, 3);
    transform: translate(var(--exp-offset-x, 0), var(--exp-offset-y, 0)) rotate(var(--exp-rotate, 0)) scale(var(--exp-scale, 1));
}

.exp-collage-item--dominant {
    --exp-span: 4;
}

.exp-figure {
    margin: 0;
}

.exp-figure-caption {
    margin-top: 0.65rem;
    color: var(--exp-text-muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.exp-card {
    border-radius: var(--exp-radius-sm);
}

.experience-page .exp-card {
    border: 1px solid var(--exp-border);
    background: var(--exp-surface-raised);
    box-shadow: none;
}

.exp-card--quiet {
    border-color: transparent;
    background: transparent;
}

.exp-card--visual {
    padding: 0;
    overflow: hidden;
}

.exp-card--technical {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--exp-grid-color) 42%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--exp-surface-raised);
}

.exp-card--artifact {
    background: color-mix(in srgb, var(--exp-surface-muted) 84%, var(--exp-surface-raised) 16%);
}

.exp-card--floating {
    box-shadow: 0 1rem 2.5rem color-mix(in srgb, #000 18%, transparent);
}

.exp-numbered-story {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.exp-story-index {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
    padding-block: clamp(1.2rem, 3vw, 2rem);
    border-top: 1px solid var(--exp-border);
}

.exp-flow {
    display: grid;
    gap: 0.85rem;
    align-content: center;
    max-width: 34rem;
}

.exp-flow-node {
    padding: 0.9rem 1rem;
    border: 1px solid var(--exp-border);
    background: var(--exp-surface-raised);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.exp-flow-line {
    width: 1px;
    min-height: 2rem;
    margin-inline: 1rem;
    background: var(--exp-border);
}

.experience-page .exp-timeline {
    display: grid;
    gap: 1.25rem;
}

.experience-page .exp-timeline-item {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 1rem;
    border-top: 1px solid var(--exp-border);
}

.exp-metric {
    display: grid;
    gap: 0.15rem;
}

.exp-metric-value {
    color: var(--exp-text);
    font-family: var(--font-mono);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1;
}

.exp-metric-label {
    color: var(--exp-text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.exp-terminal-block {
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid color-mix(in srgb, var(--exp-accent) 28%, var(--exp-border));
    background: color-mix(in srgb, #000 22%, var(--exp-surface-raised));
    color: var(--exp-text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    overflow-x: auto;
}

html[data-theme="light"] .exp-terminal-block {
    background: color-mix(in srgb, var(--exp-surface-muted) 88%, #000 12%);
}

.exp-quote-block {
    margin: 0;
    padding-left: clamp(1rem, 3vw, 2rem);
    border-left: 3px solid var(--exp-accent);
    color: var(--exp-text);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.35;
}

.exp-artifact-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-block: 0;
}

.experience-page .exp-section + .exp-section {
    margin-top: 0;
}

@media (min-width: 901px) {
    .experience-page .exp-numbered-story {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 0;
    }

    .experience-page .exp-numbered-story > li {
        width: min(82%, 64rem);
        min-height: 0;
        transform: none;
    }

    .experience-page .exp-numbered-story > li:nth-child(odd) {
        margin-left: 0;
        margin-right: auto;
    }

    .experience-page .exp-numbered-story > li:nth-child(even) {
        margin-left: auto;
        margin-right: 0;
    }
}

@media (max-width: 900px) {
    .exp-detail-hero {
        grid-template-columns: minmax(var(--exp-gutter), 1fr) minmax(0, var(--exp-content-max)) minmax(var(--exp-gutter), 1fr);
    }

    .exp-detail-hero > .exp-detail-header,
    .exp-detail-hero > .exp-detail-illustration {
        grid-column: 2 / 3;
    }

    .exp-detail-hero > .exp-detail-illustration {
        margin-top: clamp(1rem, 4vw, 2rem);
    }

    .exp-split,
    .exp-asymmetric,
    .experience-page .exp-timeline-item {
        grid-template-columns: 1fr;
    }

    .exp-offset-left,
    .exp-offset-right,
    .exp-illustration img,
    .exp-collage-item,
    .experience-page .exp-numbered-story > li {
        transform: none;
    }

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

    .exp-collage-item,
    .exp-collage-item--dominant {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .experience-page {
        --exp-gutter: clamp(1.25rem, 6vw, 1.75rem);
        --exp-section-space: clamp(3rem, 12vw, 4.5rem);
        --exp-section-space-sm: clamp(2.25rem, 9vw, 3rem);
    }

    .exp-display,
    .exp-section-title,
    .exp-statement {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .exp-stage {
        min-height: auto;
        padding: 1rem;
    }

    .exp-overlap {
        margin-top: 0;
    }

    .exp-illustration {
        overflow: clip;
    }

    .exp-collage {
        grid-template-columns: 1fr;
    }

    .exp-story-index {
        grid-template-columns: 1fr;
    }

    .experience-page .exp-numbered-story > li,
    .experience-page .exp-detail-evidence-row {
        grid-template-columns: 1fr;
    }

    .experience-page .exp-numbered-story > li {
        gap: 0.75rem;
    }
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story > li {
    grid-template-columns: auto minmax(0, 1fr);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    width: min(100% - (2 * var(--exp-gutter)), var(--exp-reading-max));
    max-width: var(--exp-reading-max);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    gap: clamp(0.65rem, 1.5vw, 1.25rem) clamp(1rem, 2.5vw, 2rem);
    margin-inline: 0;
    transform: none;
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-section-title + .exp-detail-contrib-list.exp-numbered-story {
    margin-top: clamp(2rem, 4vw, 3.75rem);
}

.experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story > li::before {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: baseline;
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    line-height: 1;
}

.experience-page .exp-story-title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    color: var(--exp-text);
    font-size: clamp(1.45rem, 2.6vw, 2.85rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: 0;
}

.experience-page .exp-story-copy {
    grid-column: 1 / -1;
    color: var(--exp-text-muted);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.75;
}

@media (min-width: 901px) {
    .experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story {
        width: min(100% - (2 * var(--exp-gutter)), var(--exp-content-max));
        max-width: var(--exp-content-max);
    }

    .experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story > li {
        width: min(78%, 62rem);
    }

    .experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story > li:nth-child(odd) {
        margin-left: 0;
        margin-right: auto;
    }

    .experience-page .exp-detail-body > .exp-detail-section.exp-section > .exp-detail-contrib-list.exp-numbered-story > li:nth-child(even) {
        margin-left: auto;
        margin-right: 0;
    }
}