/* ==============================================================
   Home — 3 layout variants on data-variant attribute (body).
   Variant A: "Quiet stack"   — single-column, Sam Will faithful
   Variant B: "Editorial"     — asymmetric two-column grid
   Variant C: "Index"         — numbered catalog rows
   ============================================================== */

/* ------------------------------------------------------------------
   1. Shared page shell
   ------------------------------------------------------------------ */

.page{
    min-height:100vh;
    padding-bottom:calc(var(--space-page) * 2 + 3rem);
}

/* ------------------------------------------------------------------
   1a. SOBA field — p5 sketch strip below the topbar
   ------------------------------------------------------------------ */
.terrain{
    position:relative;
    height:70vh;
    height:70dvh;
    background:#0066ff;
    overflow:hidden;
}
.terrain canvas{
    display:block;
    width:100%;
    height:100%;
    cursor:crosshair;
    position:relative;
    z-index:2;
}
/* Iframe embed of the particles experiment (see particles/ branch).
   Same sizing rules as the inline canvas so swapping back to a sketch
   is a one-line change. */
.terrain-frame{
    display:block;
    width:100%;
    height:100%;
    border:0;
    position:relative;
    z-index:2;
}
.terrain-tab{
    position:absolute;
    top:0;
    left:0;
    z-index:4;
    padding:.45rem .75rem .4rem;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.06em;
    text-transform:lowercase;
    color:#000;
    background:rgba(255,255,255,0.92);
    border-bottom-right-radius:4px;
    pointer-events:none;
    user-select:none;
}
.terrain-tab::before{
    content:'● ';
    color:#e27878;
    margin-inline-end:.25em;
}

.shell{
    max-width:var(--col-max);
    margin:0 auto;
    padding:0 var(--space-page);
}

/* ------------------------------------------------------------------
   2. Hero — shared base, variant-specific overrides further down
   ------------------------------------------------------------------ */

.hero{
    padding-top:clamp(4rem, 9vw, 7rem);
    padding-bottom:var(--space-section);
}

/* Hero tagline — `lead` per spec (1.375rem, weight 400). "AI-native"
   is the only italic phrase. */
.hero-display{
    font-family:var(--font-sans);
    font-size:var(--type-lead-size);
    font-weight:var(--weight-regular);
    font-variation-settings:'wght' 400;
    letter-spacing:var(--track-lead);
    line-height:var(--leading-lead);
    color:var(--fg);
    max-width:var(--measure-lead);
    text-wrap:pretty;
}
.hero-display em{
    font-style:italic;
    /* No weight change — italic alone carries the emphasis. */
    color:var(--accent);
}

/* Single 600 on the site — the wordmark "Sophia Bae". */
.hero-display .lede-name,
.wordmark .name{
    font-weight:var(--weight-semibold);
    font-variation-settings:'wght' 600;
}

/* Wordmark morph: Sophia Bae ⇄ soba.
   Letters p, h, i, a, ␣, e collapse to zero width while S↔s and B↔b
   crossfade case. Runs on an idle loop with a long rest at "Sophia Bae". */
.wordmark .name{
    white-space:nowrap;
}
.wordmark .name .lt{
    display:inline-block;
    overflow:hidden;
    line-height:1;
    vertical-align:baseline;
}
.wordmark .name .lt--swap{
    position:relative;
}
.wordmark .name .lt--swap .up,
.wordmark .name .lt--swap .lo{
    display:inline-block;
}
.wordmark .name .lt--swap .lo{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
}
.wordmark .name .lt--drop{
    max-width:1.2em;
}
/* Auto-loop morph removed — the wordmark sits at "Sophia Bae" by
   default and only collapses to the blue "soba" pill on hover.
   Hover behaviour is defined globally below; the @keyframes / reduced-
   motion rules are kept around in case the loop ever comes back. */

@keyframes wm-drop{
    0%, 30%        { font-size:1em; opacity:1; max-width:1.2em; margin-left:0; margin-right:0; }
    35%, 60%       { font-size:0;   opacity:0; max-width:0;     margin-left:0; margin-right:0; }
    65%, 100%      { font-size:1em; opacity:1; max-width:1.2em; margin-left:0; margin-right:0; }
}
@keyframes wm-case-up{
    0%, 30%        { opacity:1; }
    35%, 60%       { opacity:0; }
    65%, 100%      { opacity:1; }
}
@keyframes wm-case-lo{
    0%, 30%        { opacity:0; }
    35%, 60%       { opacity:1; }
    65%, 100%      { opacity:0; }
}
/* Brand-blue highlight pill while the wordmark sits in its "soba" state —
   filled blue background with fixed white text so the pill stays legible
   in both light and dark themes. */
@keyframes wm-color{
    0%, 32%        { background:transparent;    color:var(--fg); padding:0; }
    36%, 58%       { background:var(--accent);  color:#fff;      padding:.25em .25em .15em; }
    62%, 100%      { background:transparent;    color:var(--fg); padding:0; }
}

@media (prefers-reduced-motion: reduce){
    .wordmark .name,
    .wordmark .name .lt--drop,
    .wordmark .name .lt--swap .up,
    .wordmark .name .lt--swap .lo{
        animation:none;
    }
}

/* Wordmark hover behaviour — applies everywhere now (home + case-study +
   thought-page). The wordmark sits at "Sophia Bae" by default and only
   collapses to the blue "soba" pill while the cursor is over it. */

/* Extend the wordmark's hover hit-area to the right so the cursor
   doesn't "fall off" the anchor as letters collapse (which caused a
   flicker loop of hover→shrink→cursor-outside→unhover→grow→hover→…). */
.wordmark{
    padding-right:6em;
    margin-right:-6em;
}
.wordmark .name{
    background:transparent;
    color:var(--fg);
    padding:0;
    transition:background-color 240ms var(--ease),
               color 240ms var(--ease),
               padding 240ms var(--ease);
}
.wordmark .name .lt--drop{
    max-width:1.2em;
    opacity:1;
    font-size:1em;
    transition:max-width 320ms var(--ease),
               opacity 240ms var(--ease),
               font-size 320ms var(--ease);
}
.wordmark .name .lt--swap .up{
    opacity:1;
    transition:opacity 240ms var(--ease);
}
.wordmark .name .lt--swap .lo{
    opacity:0;
    transition:opacity 240ms var(--ease);
}
.wordmark:hover .name{
    background:var(--accent);
    color:#fff;
    padding:.25em .25em .15em;
}
.wordmark:hover .name .lt--drop{
    max-width:0;
    opacity:0;
    font-size:0;
}
.wordmark:hover .name .lt--swap .up{
    opacity:0;
}
.wordmark:hover .name .lt--swap .lo{
    opacity:1;
}

/* Meta labels = mono-meta, values = small/regular per spec. */
.hero-meta{
    margin-top:2.5rem;
    display:flex;
    flex-direction:column;
    gap:.4rem;
    font-size:var(--type-mono-meta-size);
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-mono-meta);
    line-height:var(--leading-mono-meta);
    text-transform:uppercase;
    color:var(--fg-muted);
}
.hero-meta b{
    color:var(--fg);
    font-size:var(--type-small-size);
    font-weight:var(--weight-regular);
    font-variation-settings:'wght' 400;
    letter-spacing:var(--track-small);
    text-transform:none;
}

.hero-blob{
    position:relative;
    width:100%;
    aspect-ratio:1.2 / 1;
    background:var(--accent);
    color:var(--accent-fg);
    overflow:hidden;
}
.hero-blob canvas{
    width:100%;
    height:100%;
    display:block;
}
.hero-blob-tag{
    position:absolute;
    top:1rem;
    left:1rem;
    padding:.35rem .65rem;
    background:var(--bg);
    color:var(--fg);
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:lowercase;
}
.hero-blob-tag::before{
    content:'● ';
    color:#e27878;
}

/* ------------------------------------------------------------------
   3. Section base
   ------------------------------------------------------------------ */

.section{
    padding-block:var(--space-section) 0;
    scroll-margin-top:5rem;
}
.section:last-of-type{
    padding-bottom:var(--space-section);
}

.section + .section{
    padding-top:calc(var(--space-section) * 1.1);
}

.section-head{
    margin-bottom:3rem;
}

/* ------------------------------------------------------------------
   4. About copy
   ------------------------------------------------------------------ */

.about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
    margin-top:1.5rem;
}
/* Per spec: about lead sentence = display-m + weight 300 (the one place
   light weight appears), body paragraphs = lead. The first <p> takes the
   display treatment; subsequent paragraphs are lead. */
.about-grid p{
    color:var(--fg);
    font-size:var(--type-lead-size);
    font-weight:var(--weight-regular);
    font-variation-settings:'wght' 400;
    letter-spacing:var(--track-lead);
    line-height:var(--leading-lead);
    max-width:var(--measure-body);
    text-wrap:pretty;
}
.about-grid p:first-child{
    font-size:var(--type-display-m-size);
    font-weight:var(--weight-light);
    font-variation-settings:'wght' 300;
    letter-spacing:var(--track-display-m);
    line-height:var(--leading-display-m);
    max-width:var(--measure-display);
}
.about-grid p + p{ color:var(--fg-muted); }
.about-grid em{ font-style:italic; }

/* ------------------------------------------------------------------
   5. Works — asymmetric grid (Variant B is canonical; A/C override)
   ------------------------------------------------------------------ */

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

.work{
    position:relative;
    color:var(--fg);
    display:block;
    text-align:center;
}
.work-thumb{
    position:relative;
    max-width:60vw;
    aspect-ratio:16 / 10;
    background:var(--bg-elev);
    overflow:hidden;
    margin:0 auto 1rem;
}
.work-thumb video,
.work-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.5) contrast(1.05);
    transition:filter .5s var(--ease), transform .5s var(--ease);
    pointer-events:none;
}

/* Hide iOS Safari's native media-control overlays so the autoplaying
   cover video reads as a silent loop, not a video player. */
.work-thumb video::-webkit-media-controls,
.work-thumb video::-webkit-media-controls-panel,
.work-thumb video::-webkit-media-controls-overlay-play-button,
.work-thumb video::-webkit-media-controls-start-playback-button{
    display:none !important;
    -webkit-appearance:none;
}
.work:hover .work-thumb video,
.work:hover .work-thumb img{
    filter:saturate(1) contrast(1);
    transform:scale(1.02);
}

.work-num{
    position:absolute;
    top:.85rem;
    left:.95rem;
    font-size:var(--type-mono-meta-size);
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-mono-meta);
    text-transform:uppercase;
    color:var(--bg);
    mix-blend-mode:difference;
    z-index:2;
}
.work-num + .work-num,
.work-tag{
    position:absolute;
    top:.85rem;
    right:.95rem;
    left:auto;
    font-size:var(--type-mono-meta-size);
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-mono-meta);
    text-transform:uppercase;
    color:var(--bg);
    mix-blend-mode:difference;
    z-index:2;
}

.work-title{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:1rem;
    font-family:var(--font-sans);
    font-size:var(--type-h3-size);
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-h3);
    line-height:var(--leading-h3);
}
.work-title em{ font-style:italic; }
.work-year{
    /* Mono-meta treatment per spec for index/year/tag-pill labels. */
    font-size:var(--type-mono-meta-size);
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-mono-meta);
    text-transform:uppercase;
    color:var(--fg-muted);
}
.work-desc{
    margin:.5rem auto 0;
    color:var(--fg-muted);
    max-width:var(--measure-body);
    font-size:var(--type-body-size);
    font-weight:var(--weight-regular);
    font-variation-settings:'wght' 400;
    letter-spacing:var(--track-body);
    line-height:var(--leading-body);
}

/* Role/dates row under the work title — `small` per spec. */
.work-meta{
    display:block;
    margin-top:.35rem;
    font-size:var(--type-small-size);
    font-weight:var(--weight-regular);
    font-variation-settings:'wght' 400;
    letter-spacing:var(--track-small);
    line-height:var(--leading-small);
    color:var(--fg-muted);
}

.work:hover .work-title{ color:var(--accent); }

/* Default grid spans (Variant B) */
.work--lg{ grid-column:span 12; }
.work--lg .work-thumb{ aspect-ratio:21 / 9; }
.work--md{ grid-column:span 7; }
.work--sm{ grid-column:span 5; }
.work--text{ grid-column:span 5; padding-top:.5rem; }
.work--text .work-thumb{ display:none; }

@media (max-width:880px){
    .work--lg,.work--md,.work--sm,.work--text{ grid-column:span 12; }
    .work--text .work-thumb{ display:none; }
}

/* ------------------------------------------------------------------
   6. Experiments — text-led grid
   ------------------------------------------------------------------ */

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

.experiment{
    display:block;
    color:var(--fg);
    padding:1.5rem 0;
    border-top:1px solid var(--rule);
}
.experiment-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    gap:1rem;
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-muted);
}
.experiment-title{
    font-family:var(--font-sans);
    font-size:1.35rem;
    font-weight:480;
    letter-spacing:-0.015em;
    color:var(--fg);
    margin-top:.75rem;
    line-height:1.15;
    text-transform:none;
}
.experiment-title em{ font-style:italic; font-weight:480; }
.experiment-desc{
    margin-top:.5rem;
    color:var(--fg-muted);
    line-height:1.5;
    max-width:42ch;
}
.experiment:hover .experiment-title{ color:var(--accent); }

@media (max-width:680px){
    .experiments{ grid-template-columns:1fr; }
    /* Sandbox is single-column here, so let the project covers fill the
       container too — keeps the visual rhythm consistent on narrow viewports. */
    .work-thumb{ max-width:100%; }
}

/* ------------------------------------------------------------------
   7. Thoughts — list rows
   ------------------------------------------------------------------ */

.thoughts{
    display:flex;
    flex-direction:column;
    margin-top:1.5rem;
    border-top:1px dashed var(--rule);
    font-family:var(--font-mono);
}
.thought{
    display:grid;
    grid-template-columns:1.25rem 8.5rem 1fr auto;
    gap:.85rem;
    align-items:baseline;
    padding:.65rem .25rem;
    border-bottom:1px dashed var(--rule);
    color:var(--fg-muted);
    font-family:var(--font-mono);
    transition:background-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}
/* Terminal prompt prefix — frames each row like a shell entry. */
.thought::before{
    content:"$";
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    color:var(--fg-faint);
}
.thought-date{
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-faint);
}
.thought-title{
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    font-weight:400;
    letter-spacing:var(--ls-mono);
    line-height:1.45;
    text-transform:none;
    text-wrap:pretty;
    color:var(--fg);
}
.thought-title em{ font-style:normal; font-weight:400; }
.thought-arr{
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    color:var(--fg-faint);
    transition:transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Terminal-style hover: prompt brightens like a focused cursor, the
   row picks up a faint highlight band, and the title underlines as if
   the link were selected text in the shell. */
.thought:hover{
    background:color-mix(in srgb, var(--fg) 4%, transparent);
    color:var(--fg);
}
.thought:hover::before{ color:var(--accent); }
.thought:hover .thought-title{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:.25em;
    text-decoration-thickness:1px;
}
.thought:hover .thought-arr{
    color:var(--accent);
    transform:translateX(.3rem);
}

@media (max-width:680px){
    .thought{
        grid-template-columns:1.25rem 1fr;
        grid-template-areas:
            "prompt date"
            "prompt title"
            "prompt arr";
        gap:.25rem .85rem;
        padding:.85rem .25rem;
    }
    .thought::before{ grid-area:prompt; align-self:start; }
    .thought-date{ grid-area:date; }
    .thought-title{ grid-area:title; }
    .thought-arr{ grid-area:arr; justify-self:start; }
}

/* ------------------------------------------------------------------
   8. Info section
   ------------------------------------------------------------------ */

.info-grid{
    display:grid;
    grid-template-columns:12rem 1fr;
    gap:3rem 2rem;
    margin-top:2rem;
}
.info-grid h3{
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-muted);
    font-weight:400;
}
.info-grid .info-body p{
    max-width:54ch;
    margin-bottom:1.2em;
    color:var(--fg);
    line-height:1.55;
}
.info-grid .info-body p:last-child{ margin-bottom:0; }
.info-grid .info-body em{ font-style:italic; }
.info-grid .info-body ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    margin-top:.5rem;
}
.info-grid .info-body ul li{
    padding-left:1.2rem;
    position:relative;
}
.info-grid .info-body ul li::before{
    content:'';
    position:absolute;
    left:0;
    top:.7em;
    width:.5rem;
    height:1px;
    background:var(--fg-muted);
}

.timeline{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    height:1.8rem;
    margin:1rem 0 2.5rem;
    position:relative;
}
.timeline::before{
    content:'';
    position:absolute;
    left:0; right:0;
    top:50%;
    height:1px;
    background:var(--rule);
}
.timeline-tick{
    position:relative;
    width:1px;
    height:.6rem;
    background:var(--rule-strong);
}
.timeline-tick:first-child,
.timeline-tick:last-child{ height:1.4rem; background:var(--fg); }
.timeline-tick[data-year]::after{
    content:attr(data-year);
    position:absolute;
    bottom:-1.4rem;
    left:0;
    font-family:var(--font-mono);
    font-size:.65rem;
    color:var(--fg-faint);
}
.timeline-tick:nth-child(even)[data-year]::after{ display:none; }

@media (max-width:680px){
    .info-grid{ grid-template-columns:1fr; gap:.5rem 0; }
    .info-grid h3{ margin-top:1.5rem; }
}

/* ------------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------------ */

.contact{
    margin-top:var(--space-section);
    padding-top:3rem;
    border-top:1px solid var(--rule);
}
/* Contact headline = display-xl per spec, with one italicized word. */
.contact-display{
    font-family:var(--font-sans);
    font-size:var(--type-display-xl-size);
    font-weight:var(--weight-medium);
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-display-xl);
    line-height:var(--leading-display-xl);
    max-width:var(--measure-display);
    text-wrap:pretty;
}
.contact-display em{ font-style:italic; color:var(--accent); }

.contact-links{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem 2rem;
    margin-top:2.5rem;
}
/* Contact links = h3 weight 400 (lighter than headings) per spec. */
.contact-links a{
    display:inline-flex;
    align-items:baseline;
    gap:.4em;
    font-family:var(--font-sans);
    font-size:var(--type-h3-size);
    font-weight:var(--weight-regular);
    font-variation-settings:'wght' 400;
    letter-spacing:var(--track-h3);
    text-transform:none;
    color:var(--fg);
    border-bottom:1px solid var(--rule-strong);
    padding-bottom:.2em;
    transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-links a:hover{ color:var(--accent); border-color:var(--accent); }
.contact-links a::after{
    content:'↗';
    font-family:var(--font-sans);
}

/* ------------------------------------------------------------------
   ===== VARIANT A — "Quiet Stack" (Sam Will faithful) =====
   Single column, narrow, all-text, decorative blob inline.
   ------------------------------------------------------------------ */

[data-variant="a"] .shell{
    max-width:var(--col-narrow);
    margin:0;
    padding-left:clamp(2.5rem, 8vw, 7rem);
    padding-right:var(--space-page);
}

[data-variant="a"] .hero{
    padding-top:6rem;
}
[data-variant="a"] .hero-display{
    font-size:clamp(1.5rem, 2vw, 1.65rem);
    font-weight:500;
    letter-spacing:-0.005em;
    line-height:1.35;
    max-width:32ch;
}
[data-variant="a"] .hero-display em{ color:var(--fg); font-style:normal; }
[data-variant="a"] .hero-display .lede-name{
    display:block;
    font-size:clamp(1.7rem, 2.5vw, 2rem);
    margin-bottom:1.25rem;
}

[data-variant="a"] .hero-blob{
    width:2.5rem;
    height:2.5rem;
    aspect-ratio:auto;
    border-radius:50%;
    margin-bottom:2.5rem;
    overflow:hidden;
}
[data-variant="a"] .hero-blob canvas{ display:block; }
[data-variant="a"] .hero-blob-tag{ display:none; }
[data-variant="a"] .hero-meta{ display:none; }

[data-variant="a"] .section-label{ display:none; }
[data-variant="a"] .section-head h2{
    font-family:var(--font-sans);
    font-size:1.1rem;
    font-weight:500;
    color:var(--fg);
    letter-spacing:-0.005em;
}
[data-variant="a"] .section-head{ margin-bottom:1.25rem; }
[data-variant="a"] .section{ padding-block:3.25rem 0; }
[data-variant="a"] .section + .section{ padding-top:2.5rem; }

[data-variant="a"] .about-grid p{
    font-size:1rem;
    color:var(--fg-muted);
    max-width:48ch;
}
[data-variant="a"] .about-grid p .link{
    color:var(--fg);
    border-color:var(--rule-strong);
}

[data-variant="a"] .works,
[data-variant="a"] .experiments,
[data-variant="a"] .thoughts{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    margin-top:.5rem;
    border:none;
}
[data-variant="a"] .work,
[data-variant="a"] .experiment,
[data-variant="a"] .thought{
    grid-column:auto;
    padding:.15rem 0;
    border:none;
    display:block;
}
[data-variant="a"] .work-thumb,
[data-variant="a"] .work-tag,
[data-variant="a"] .work-num,
[data-variant="a"] .work-year,
[data-variant="a"] .work-desc,
[data-variant="a"] .experiment-desc,
[data-variant="a"] .experiment-row,
[data-variant="a"] .thought-date,
[data-variant="a"] .thought-arr{
    display:none;
}
[data-variant="a"] .work-title,
[data-variant="a"] .experiment-title,
[data-variant="a"] .thought-title{
    display:inline;
    font-family:var(--font-sans);
    font-size:1rem;
    font-weight:430;
    letter-spacing:-0.005em;
    line-height:1.5;
    color:var(--fg-muted);
    border-bottom:1px solid var(--rule-strong);
    padding-bottom:.05em;
    transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
[data-variant="a"] .work:hover .work-title,
[data-variant="a"] .experiment:hover .experiment-title,
[data-variant="a"] .thought:hover .thought-title{
    color:var(--accent);
    border-color:var(--accent);
}

[data-variant="a"] .info-grid{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}
[data-variant="a"] .info-grid h3{ display:none; }
[data-variant="a"] .info-grid .info-body p{
    font-size:1rem;
    color:var(--fg-muted);
    max-width:48ch;
}
[data-variant="a"] .timeline{ display:none; }

[data-variant="a"] .contact{
    margin-top:3rem;
    padding-top:0;
    border:none;
}
[data-variant="a"] .contact-display{
    font-size:1.1rem;
    font-weight:500;
    color:var(--fg);
    letter-spacing:-0.005em;
    line-height:1.35;
    max-width:none;
    margin-bottom:.75rem;
}
[data-variant="a"] .contact-display em{ color:var(--fg); font-style:normal; }
[data-variant="a"] .contact-links{
    flex-direction:column;
    gap:.15rem;
    margin-top:.25rem;
}
[data-variant="a"] .contact-links a{
    font-family:var(--font-sans);
    font-size:1rem;
    font-weight:430;
    letter-spacing:-0.005em;
    text-transform:none;
    color:var(--fg-muted);
    border-color:var(--rule-strong);
}
[data-variant="a"] .contact-links a::after{ display:none; }
[data-variant="a"] .contact-links a:hover{ color:var(--accent); border-color:var(--accent); }

[data-variant="a"] .topbar-nav,
[data-variant="a"] .wordmark .role,
[data-variant="a"] .wordmark .star{ display:none; }
[data-variant="a"] .wordmark{
    visibility:hidden;
}

/* ------------------------------------------------------------------
   ===== VARIANT B — "Editorial" (asymmetric grid) =====
   Two-col on desktop, big display hero with blob to the side.
   ------------------------------------------------------------------ */

[data-variant="b"] .hero{
    display:flex;
    flex-direction:column;
    gap:3rem;
    padding-top:clamp(5rem, 10vw, 9rem);
}

[data-variant="b"] .hero-top{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:4rem;
    align-items:end;
}

[data-variant="b"] .lede-name{ display:none; }
[data-variant="b"] .hero-display{
    font-size:clamp(2.75rem, 6.5vw, 5.5rem);
    font-weight:460;
    line-height:1.02;
    letter-spacing:-0.025em;
    max-width:none;
}

[data-variant="b"] .hero-blob{
    aspect-ratio:5 / 4;
}

[data-variant="b"] .hero-meta{
    margin-top:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.5rem 2rem;
    padding:1.25rem 0;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
}
[data-variant="b"] .hero-meta > div{
    display:flex;
    flex-direction:column;
    gap:.3rem;
}

[data-variant="b"] .section--blue{
    background:var(--accent);
    color:var(--accent-fg);
    margin:0 calc(-1 * var(--space-page));
    padding:var(--space-section) var(--space-page);
}
[data-variant="b"] .section--blue .section-label{ color:rgba(255,255,255,0.65); }
[data-variant="b"] .section--blue .section-label::after{ background:rgba(255,255,255,0.25); }
[data-variant="b"] .section--blue .experiment{ border-color:rgba(255,255,255,0.18); }
[data-variant="b"] .section--blue .experiment-row,
[data-variant="b"] .section--blue .experiment-desc{ color:rgba(255,255,255,0.75); }
[data-variant="b"] .section--blue .experiment-title{ color:#fff; }
[data-variant="b"] .section--blue .experiment:hover .experiment-title{ color:var(--accent-fg); text-decoration:underline; text-underline-offset:.15em; }

@media (max-width:880px){
    [data-variant="b"] .hero{ grid-template-columns:1fr; gap:2.5rem; }
    [data-variant="b"] .hero-blob{ aspect-ratio:4 / 3; }
}

/* ------------------------------------------------------------------
   ===== VARIANT C — "Index" (catalog rows) =====
   Wide layout, numbered rows, magazine-y. Hero centered with blob.
   ------------------------------------------------------------------ */

[data-variant="c"] .shell{
    max-width:var(--col-max);
}

[data-variant="c"] .hero{
    position:relative;
    text-align:left;
    padding-top:clamp(3rem, 6vw, 5rem);
    padding-bottom:6rem;
    display:grid;
    grid-template-columns:1fr;
    gap:3rem;
}

[data-variant="c"] .hero-top{
    display:grid;
    grid-template-columns:1fr auto;
    gap:2rem;
    align-items:start;
}
[data-variant="c"] .lede-name{ display:none; }
[data-variant="c"] .hero-display{
    font-size:clamp(3rem, 9vw, 8.5rem);
    font-weight:440;
    line-height:0.96;
    letter-spacing:-0.035em;
    max-width:none;
}
[data-variant="c"] .hero-display em{ color:var(--accent); }
[data-variant="c"] .hero-blob{
    width:8rem;
    height:8rem;
    aspect-ratio:1;
    border-radius:50%;
    flex-shrink:0;
    align-self:start;
    margin-top:.5rem;
}
[data-variant="c"] .hero-blob-tag{ display:none; }

[data-variant="c"] .hero-meta{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    padding:1.25rem 0;
    margin-top:1rem;
    gap:0;
}
[data-variant="c"] .hero-meta > div{
    display:flex;
    flex-direction:column;
    gap:.3rem;
}
[data-variant="c"] .hero-meta b{ color:var(--fg); font-weight:400; }

[data-variant="c"] .works{
    display:flex;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--rule-strong);
}
[data-variant="c"] .work{
    grid-column:auto;
    display:grid;
    grid-template-columns:5rem 1fr 12rem 6rem 2rem;
    gap:1.5rem;
    align-items:center;
    padding:1.5rem 0;
    border-bottom:1px solid var(--rule);
    transition:padding-left var(--dur) var(--ease), background var(--dur) var(--ease);
}
[data-variant="c"] .work-thumb{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:18rem;
    aspect-ratio:16/10;
    margin:0;
    opacity:0;
    pointer-events:none;
    z-index:5;
    transition:opacity var(--dur) var(--ease);
    box-shadow:0 14px 40px rgba(0,0,0,0.35);
}
[data-variant="c"] .work{ position:relative; }
[data-variant="c"] .work:hover .work-thumb{ opacity:1; }
[data-variant="c"] .work:hover{ padding-left:.75rem; }
[data-variant="c"] .work-num,
[data-variant="c"] .work-tag{
    position:static;
    mix-blend-mode:normal;
    color:var(--fg-muted);
}
[data-variant="c"] .work-title{
    font-size:clamp(1.75rem, 3vw, 2.5rem);
    font-weight:460;
    letter-spacing:-0.02em;
    line-height:1;
    display:block;
}
[data-variant="c"] .work-desc,
[data-variant="c"] .work-year{ display:none; }
[data-variant="c"] .work-meta{
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-muted);
}
[data-variant="c"] .work-arr{
    font-family:var(--font-sans);
    color:var(--fg-faint);
    transition:transform var(--dur) var(--ease), color var(--dur) var(--ease);
    text-align:right;
}
[data-variant="c"] .work:hover .work-arr{ color:var(--accent); transform:translateX(.4rem); }

@media (max-width:880px){
    [data-variant="c"] .work{
        grid-template-columns:3rem 1fr 1.5rem;
        gap:.75rem;
    }
    [data-variant="c"] .work-meta,
    [data-variant="c"] .work-tag{ display:none; }
    [data-variant="c"] .hero-meta{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
    [data-variant="c"] .hero-top{ grid-template-columns:1fr; }
}

[data-variant="c"] .section--blue{
    background:var(--accent);
    color:var(--accent-fg);
    margin:0 calc(-1 * var(--space-page));
    padding:var(--space-section) var(--space-page);
}
[data-variant="c"] .section--blue .section-label{ color:rgba(255,255,255,0.6); }
[data-variant="c"] .section--blue .section-label::after{ background:rgba(255,255,255,0.2); }
[data-variant="c"] .section--blue .thought,
[data-variant="c"] .section--blue .thoughts{ border-color:rgba(255,255,255,0.18); }
[data-variant="c"] .section--blue .thought-date{ color:rgba(255,255,255,0.65); }
[data-variant="c"] .section--blue .thought-title{ color:#fff; }
[data-variant="c"] .section--blue .thought-arr{ color:rgba(255,255,255,0.5); }

/* ------------------------------------------------------------------
   Responsive base (applies to all variants)
   ------------------------------------------------------------------ */
@media (max-width:680px){
    .hero-display{ max-width:none; }
}


/* ------------------------------------------------------------------
   Video lightbox — full-viewport overlay for sandbox MP4 playback.
   ------------------------------------------------------------------ */
.video-lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0, 0, 0, 0.82);
    padding:clamp(1rem, 4vw, 3rem);
}
.video-lightbox[hidden]{ display:none; }
.video-lightbox__video{
    max-width:min(100%, 1400px);
    max-height:100%;
    width:auto;
    height:auto;
    background:#000;
}
.video-lightbox__close{
    position:absolute;
    top:clamp(.75rem, 2vw, 1.25rem);
    right:clamp(.75rem, 2vw, 1.25rem);
    width:2.25rem;
    height:2.25rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255, 255, 255, 0.35);
    background:transparent;
    color:#fff;
    /* !important beats the universal `* { font-size:1rem !important }` lock. */
    font-size:1.5rem !important;
    line-height:1;
    text-align:center;
    cursor:pointer;
    border-radius:2px;
    transition:background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.video-lightbox__close:hover{
    background:rgba(255, 255, 255, 0.12);
    border-color:rgba(255, 255, 255, 0.7);
}


/* ==============================================================
   Variant D — formerly home-mono.css
   Merged 2026-05-24 so all home-page styles live in one file. The
   rules below are appended AFTER the base/variant-a/variant-b/variant-c
   sections above so cascade/specificity behaves exactly as before
   when both files were loaded in order.
   ============================================================== */

/* ==============================================================
   Variant D — "Mono" / editorial monospace.
   All-mono, all-uppercase, big project plates with generous
   negative space. Inspired by editorial portfolio conventions.
   ============================================================== */

/* ------------------------------------------------------------------
   0. Body tone — variant D uses mono everywhere
   ------------------------------------------------------------------ */

/* Case-study pages also use data-variant="d" for their shared topbar, but
   they keep their own (non-uppercase) body styling. */
[data-variant="d"] body:not(.case-study){
    font-family:var(--font-sans);
    font-size:var(--type-mono-meta-size);
    font-weight:550;
    font-variation-settings:'wght' 550;
    letter-spacing:var(--track-mono-meta);
    line-height:var(--leading-mono-meta);
    text-transform:uppercase;
    color:var(--fg);
}

/* Italic is a signal in this design system — keep it visible even
   inside variant d's uppercase treatment. Per spec it's reserved for
   "AI-native", a single word per section header, and project names
   in running prose. */
[data-variant="d"] em,
[data-variant="d"] i{
    font-style:italic;
    text-transform:none;
}

[data-variant="d"] .shell{
    max-width:none;
    padding:0 var(--space-page);
}

[data-variant="d"] .page{
    /* The terrain band that sits above .page already clears the fixed
       topbar, so the page itself only needs a small breathing gap. */
    padding-top:1.5rem;
    padding-bottom:6rem;
}

/* ------------------------------------------------------------------
   1. Topbar — name (2-line) | time (2-line), nav below
   ------------------------------------------------------------------ */

[data-variant="d"] .topbar{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    column-gap:clamp(2.5rem, 7vw, 6rem);
    row-gap:.75rem;
    /* Equal top/bottom padding so the nav (flex-centered) lines up
       vertically with the absolutely-positioned wordmark and time. */
    padding:clamp(1.25rem, 2.5vw, 2rem) var(--space-page);
    background:var(--bg);
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    transition:row-gap .3s var(--ease), padding-block .3s var(--ease);
}

/* Compressed state — toggled by JS when the page has scrolled */
[data-variant="d"] .topbar.is-scrolled{
    row-gap:.85rem;
    padding-top:1.25rem;
    padding-bottom:1.25rem;
}

[data-variant="d"] .wordmark{
    /* Pinned to the page's left gutter so the logo lines up with the
       hero copy beneath. */
    position:absolute;
    left:var(--space-page);
    top:50%;
    transform:translateY(-50%);
    display:block;
    visibility:visible;
    font-family:var(--font-mono);
    /* !important needed to beat the universal `* { font-size: 1rem !important }`
       lock in type.css — the logo is an intentional exception. */
    font-size:1.5rem !important;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg);
    line-height:1.05;
    max-width:24rem;
}
[data-variant="d"] .wordmark .name{
    display:block;
    font-size:1.5rem !important;
    font-weight:450;
}
/* Letter spans inside the morphing wordmark inherit the universal 1rem
   override; force them up to the wordmark size so the logo reads as one
   piece. */
[data-variant="d"] .wordmark .name .lt,
[data-variant="d"] .wordmark .name .lt .up,
[data-variant="d"] .wordmark .name .lt .lo{
    font-size:1.5rem !important;
}
[data-variant="d"] .wordmark .star,
[data-variant="d"] .wordmark .role{ display:none; }

[data-variant="d"] .topbar-time{
    /* Pin the time to the right edge while logo + nav stay centered as a group. */
    position:absolute;
    right:var(--space-page);
    top:50%;
    transform:translateY(-50%);
    display:block;
    text-align:right;
    font-family:var(--font-mono);
    /* !important beats the universal 1rem lock in type.css. */
    font-size:14px !important;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    line-height:1.25;
}
[data-variant="d"] .topbar-time .topbar-time__label,
[data-variant="d"] .topbar-time .topbar-time__value{
    font-size:14px !important;
}
[data-variant="d"] .topbar-time .topbar-time__label{
    display:block;
    color:var(--fg);
}
[data-variant="d"] .topbar-time .topbar-time__value{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--fg);
    font-weight:500;
    font-variation-settings:'wght' 500;
}
[data-variant="d"] .topbar-time .topbar-time__icon{
    width:.95em;
    height:.95em;
    flex:none;
    color:var(--fg);
    /* Case-study reset.css applies `all: unset` to <svg>, which wipes
       the inline fill="none" / stroke attributes. Restore them here so
       the sun/moon renders with strokes (not a filled bullet). */
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

[data-variant="d"] .topbar-nav{
    display:flex;
    order:1;
    justify-content:center;
    align-items:center;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    gap:clamp(1.75rem, 4vw, 3.25rem);
}
[data-variant="d"] .topbar-nav a{
    color:var(--fg);
    font-weight:500;
    font-variation-settings:'wght' 500;
    padding:.15rem .35rem;
    border:none;
    transition:color var(--dur) var(--ease);
}
[data-variant="d"] .topbar-nav a:not([data-mono]){ display:none; }
[data-variant="d"] .topbar-nav a[data-mono]{
    /* !important needed to win over the universal `* { font-size: 1rem !important }`
       override in type.css — the link's own text is hidden so the ::before
       (rendering data-mono attr) is the only visible label. */
    font-size:0 !important;
    justify-self:auto;
    margin:0;
    padding-left:.35rem;
    padding-right:.35rem;
}
[data-variant="d"] .topbar-nav a[data-mono]::before{
    content:attr(data-mono);
    position:static;
    width:auto;
    height:auto;
    background:transparent;
    border-radius:0;
    transform:none;
    font-size:.78rem;
    font-weight:500;
    font-variation-settings:'wght' 500;
    text-transform:uppercase;
    letter-spacing:var(--ls-mono);
}
[data-variant="d"] .topbar-nav a[data-mono].is-active::before{
    position:static;
    width:auto;
    height:auto;
    background:transparent;
    border-radius:0;
    transform:none;
}
[data-variant="d"] .topbar-nav a[data-mono="work"]     { justify-self:start; }
[data-variant="d"] .topbar-nav a[data-mono="works"]    { justify-self:start; }
[data-variant="d"] .topbar-nav a[data-mono="sandbox"]{ }
[data-variant="d"] .topbar-nav a[data-mono="thoughts"] { }
[data-variant="d"] .topbar-nav a[data-mono="about"]    { }
[data-variant="d"] .topbar-nav a[data-mono="info"]     { justify-self:end; }
[data-variant="d"] .topbar-nav a[data-mono="contact"]  { display:none; }

[data-variant="d"] .topbar-nav a:hover,
[data-variant="d"] .topbar-nav a.is-active{
    border:none;
    color:var(--accent);
}
[data-variant="d"] .topbar-nav a:hover::before,
[data-variant="d"] .topbar-nav a.is-active::before{
    color:var(--accent);
}
[data-variant="d"] .topbar-nav a.is-active::before{ display:inline; }
[data-variant="d"] .topbar-nav a.is-active{ background:transparent; }
[data-variant="d"] .topbar-nav a::before{ /* override outer ::before bullet */ }
[data-variant="d"] .topbar-nav a.is-active{ position:relative; }
[data-variant="d"] .topbar-nav a:not([data-mono]).is-active::before{ display:none; }

/* ------------------------------------------------------------------
   2. Hero — drop the blob, surface intro as quiet meta
   ------------------------------------------------------------------ */

[data-variant="d"] .hero{
    padding-top:1.5rem;
    padding-bottom:0;
    display:block;
}
[data-variant="d"] .hero-top{
    display:block;
}
[data-variant="d"] .hero-blob{ display:none; }
[data-variant="d"] .lede-name{ display:none; }

[data-variant="d"] .hero-display{
    display:block;
    font-family:var(--font-mono);
    /* !important overrides the universal 1rem lock in type.css —
       the hero lede is an intentional exception. */
    font-size:1.7rem !important;
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:var(--ls-mono);
    line-height:1.5;
    /* text-transform:uppercase; */
    color:var(--fg);
    max-width:28ch;
}
[data-variant="d"] .hero-display em{
    font-style:normal;
    /* Match the parent hero size, overriding the universal 1rem lock. */
    font-size:1.7rem !important;
    color:var(--accent);
    font-weight:600;
}

[data-variant="d"] .hero-meta{ display:none; }

/* ------------------------------------------------------------------
   3. Section base
   ------------------------------------------------------------------ */

[data-variant="d"] .section{
    /* Top-only padding — each section's own top is the breathing room
       between it and whatever precedes (hero or another section). */
    padding-block:clamp(7rem, 13vw, 12rem) 0;
    /* Anchor jumps (#works, #sandbox, …): scroll past the section's
       padding-top so the section-label lands ~5rem below the viewport
       top (right under the fixed topbar). Without this override, the
       browser stops at the section's top edge and the visitor sees the
       full padding before the label appears. Negative because we want
       to scroll FURTHER than element_top — by (padding_top − topbar). */
    scroll-margin-top:calc(5rem - clamp(7rem, 13vw, 12rem));
}
[data-variant="d"] .section-head{ margin-bottom:1.25rem; }
[data-variant="d"] .section-label{
    /* Highlighted pill — brand blue block with the page background as the
       text color. */
    display:inline-block;
    padding:.1em .35em;
    background:var(--accent);
    /* Fixed white so the pill stays legible in both light and dark themes. */
    color:#fff;
    font-family:var(--font-mono);
    /* !important beats the universal 1rem lock in type.css. */
    font-size:20px !important;
    font-weight:600;
    font-variation-settings:'wght' 600;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
}
[data-variant="d"] .section-label .mono{ color:#fff; }
[data-variant="d"] .section-label::after{ display:none; }
[data-variant="d"] .section-label .mono{ color:var(--accent); }

/* Sub-section labels (not part of main nav) stay small */
/* Experience — same 20px size as the other section labels, but plain
   accent text instead of the highlight pill. */
[data-variant="d"] #experience .section-label{
    display:block;
    padding:0;
    background:transparent;
    color:var(--accent);
    font-size:20px !important;
    text-transform:none;
}

/* ------------------------------------------------------------------
   4. Works — full-width plates, label-row above each big image
   ------------------------------------------------------------------ */

[data-variant="d"] .works{
    display:flex;
    flex-direction:column;
    gap:clamp(4rem, 8vw, 7rem);
    margin-top:clamp(2rem, 5vw, 4rem);
}

[data-variant="d"] .work{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
        "label"
        "tags"
        "media"
        "title"
        "row"
        "meta"
        "desc";
    gap:0;
    grid-column:auto;
    text-align:center;
    transition:transform var(--dur) var(--ease);
}
[data-variant="d"] .work:hover{ transform:translateY(-2px); }

[data-variant="d"] .work-thumb{
    grid-area:media;
    aspect-ratio:16 / 10;
    display:block;
    width:100%;
    max-width:min(60vw, 1100px);
    margin:0 auto;
    justify-self:stretch;
    background:var(--bg-elev);
    overflow:hidden;
    position:relative;
}
[data-variant="d"] .work--lg .work-thumb,
[data-variant="d"] .work--md .work-thumb{ aspect-ratio:16 / 10; }

[data-variant="d"] .work-thumb video,
[data-variant="d"] .work-thumb img{
    filter:grayscale(1);
    transition:transform .6s var(--ease), filter .6s var(--ease);
}
[data-variant="d"] .work:hover .work-thumb video,
[data-variant="d"] .work:hover .work-thumb img{
    transform:scale(1.015);
    filter:grayscale(0);
}

/* Reposition the corner overlays as plain mono labels at the top */
[data-variant="d"] .work-num{
    position:static;
    grid-area:label;
    mix-blend-mode:normal;
    color:var(--fg);
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
}
[data-variant="d"] .work-tag{
    position:static;
    grid-area:tags;
    mix-blend-mode:normal;
    color:var(--fg);
    justify-self:center;
    text-align:center;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
}

[data-variant="d"] .work-title{
    grid-area:title;
    font-family:var(--font-sans);
    font-size:1.5rem !important;
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:-.015em;
    text-transform:none;
    line-height:1.2;
    color:var(--fg);
    margin:2rem auto 0;
    width:100%;
    max-width:min(60vw, 1100px);
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    text-align:left;
}
[data-variant="d"] .work-title em{ font-style:normal; font-weight:500; font-variation-settings:'wght' 500; }
/* Force descendant spans/ems to inherit the title size — beats the universal
   `* { font-size:1rem !important }` lock in type.css. */
[data-variant="d"] .work-title,
[data-variant="d"] .work-title *{
    font-size:1.5rem !important;
}
[data-variant="d"] .work-title .work-year,
[data-variant="d"] .work-year{
    display:inline;
    color:var(--fg);
    flex-shrink:0;
}
[data-variant="d"] .work:hover .work-year{ color:var(--accent); }

[data-variant="d"] .work-row{
    grid-area:row;
    width:100%;
    max-width:min(60vw, 1100px);
    margin:1rem auto 0;
    display:flex;
    justify-content:flex-start;
    align-items:baseline;
    font-family:var(--font-sans);
    font-size:var(--type-caption-size);
    font-weight:500;
    font-variation-settings:'wght' 500;
    font-style:italic;
    letter-spacing:0;
    text-transform:none;
    color:var(--fg-muted);
    text-align:left;
}

[data-variant="d"] .work-meta{
    grid-area:meta;
    color:var(--fg);
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    justify-self:center;
    text-align:center;
    display:none;
}

[data-variant="d"] .work-desc{
    grid-area:desc;
    color:var(--fg);
    width:100%;
    max-width:min(60vw, 1100px);
    margin:.35rem auto 0;
    font-family:var(--font-sans);
    font-size:var(--type-body-size);
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-body);
    text-transform:none;
    line-height:var(--leading-body);
    text-align:left;
}

[data-variant="d"] .work-arr{ display:none; }

[data-variant="d"] .work:hover .work-title{ color:var(--accent); }
[data-variant="d"] .work:hover .work-num,
[data-variant="d"] .work:hover .work-tag,
[data-variant="d"] .work:hover .work-meta,
[data-variant="d"] .work:hover .work-row,
[data-variant="d"] .work:hover .work-desc{ color:var(--accent); }
[data-variant="d"] .work:hover .work-row .tools{ color:#96AFFF; }

/* Inline text tile (used in B) — drop in D */
[data-variant="d"] .work--text{ display:none; }

/* ------------------------------------------------------------------
   5. Experiments — hide (out of scope for this variant)
   ------------------------------------------------------------------ */

[data-variant="d"] #sandbox{
    display:block;
    margin-block:5rem;
}

/* ------------------------------------------------------------------
   5c. Experiments grid (variant D) — 2-col with video covers
   ------------------------------------------------------------------ */

/* Default: hide experiment thumbs (only variant D uses them) */
.experiment-thumb{ display:none; }
[data-variant="d"] .experiment-thumb{ display:block; }

[data-variant="d"] .experiments{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
    border:none;
    margin-top:clamp(2rem, 4vw, 3rem);
}
[data-variant="d"] .experiment{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    border:none;
    color:var(--fg);
    font-family:var(--font-sans);
    transition:transform var(--dur) var(--ease);
}
[data-variant="d"] .experiment:hover{ padding-left:0; transform:translateY(-2px); }
/* DOM order (thumb → title → row → desc) matches visual order — no flex
   `order` needed. Margins below apply uniformly without reorder side-effects. */

[data-variant="d"] .experiment-thumb{
    position:relative;
    aspect-ratio:16 / 11;
    width:100%;
    margin:0;
    overflow:hidden;
    background:var(--bg-elev);
    /* subtle stripe placeholder for missing video */
    background-image:repeating-linear-gradient(
        135deg,
        rgba(26,26,26,0.05) 0 8px,
        rgba(26,26,26,0.00) 8px 18px
    );
    background-color:var(--bg-elev);
}
[data-variant="d"] .experiment-thumb video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(1);
    transition:transform .6s var(--ease), filter .6s var(--ease);
}
[data-variant="d"] .experiment:hover .experiment-thumb video{
    transform:scale(1.015);
    filter:grayscale(0);
}

[data-variant="d"] .experiment-thumb--live{
    background-image:none;
    background-color:var(--bg-elev);
}
[data-variant="d"] .experiment-thumb iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    pointer-events:none;
    background:var(--bg);
    display:block;
    filter:grayscale(1);
    transition:filter .6s var(--ease);
}
[data-variant="d"] .experiment:hover .experiment-thumb iframe{
    filter:grayscale(0);
}
[data-variant="d"] .experiment-thumb__cap{
    position:absolute;
    bottom:.7rem;
    left:.85rem;
    padding:.25rem .5rem;
    background:var(--bg);
    color:var(--fg);
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    z-index:2;
    pointer-events:none;
    display:inline-flex;
    align-items:center;
    gap:.35em;
    line-height:1;
}
[data-variant="d"] .experiment-thumb__cap-arr{
    font-family:var(--font-sans);
    display:inline-block;
    transform:translateY(-.05em);
}

[data-variant="d"] .experiment-row{
    display:flex;
    justify-content:flex-start;
    align-items:baseline;
    font-family:var(--font-sans);
    font-size:var(--type-caption-size);
    font-style:italic;
    letter-spacing:0;
    text-transform:none;
    color:var(--fg-muted);
    line-height:var(--leading-body);
    margin-top:.8rem;
}
[data-variant="d"] .experiment-row > span:nth-child(2){ display:none; }

[data-variant="d"] .experiment-title{
    font-family:var(--font-sans);
    font-size:1.5rem !important;
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:-.015em;
    text-transform:none;
    color:var(--fg);
    line-height:1.2;
    margin-top:2rem;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
}
[data-variant="d"] .experiment-title em{ font-style:normal; font-weight:500; font-variation-settings:'wght' 500; }
/* Force descendant spans/ems to inherit the title size — beats the universal
   `* { font-size:1rem !important }` lock in type.css. */
[data-variant="d"] .experiment-title,
[data-variant="d"] .experiment-title *{
    font-size:1.5rem !important;
}
.tools{
    text-transform:uppercase;
    font-style:normal;
    font-size:.9rem !important;
}
[data-variant="d"] .experiment-row .tools{
    font-weight:550;
    font-variation-settings:'wght' 550;
}
[data-variant="d"] .experiment-year{
    color:var(--fg);
    flex-shrink:0;
}
[data-variant="d"] .experiment:hover .experiment-year{ color:var(--accent); }

[data-variant="d"] .experiment-desc{
    font-family:var(--font-sans);
    font-size:var(--type-body-size);
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:var(--track-body);
    text-transform:none;
    color:var(--fg);
    line-height:var(--leading-body);
    max-width:62ch;
    margin-top:.35rem;
}

[data-variant="d"] .experiment:hover .experiment-title{
    color:var(--accent);
    text-decoration:none;
}
[data-variant="d"] .experiment:hover .experiment-row,
[data-variant="d"] .experiment:hover .experiment-desc{ color:var(--accent); }
[data-variant="d"] .experiment:hover .experiment-row .tools{ color:#96AFFF; }

/* Variant D never paints experiments section blue */
[data-variant="d"] .section--blue{
    background:transparent;
    color:var(--fg);
    margin:0;
    padding:clamp(7rem, 13vw, 12rem) 0 0;
}

/* ------------------------------------------------------------------
   5b. Thoughts list (variant D)
   ------------------------------------------------------------------ */

[data-variant="d"] #thoughts{ 
    display:block; 
    margin-block:5rem;
}
[data-variant="d"] .thoughts{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:clamp(2rem, 4vw, 3rem);
    border-top:1px dashed rgba(26, 26, 26, 0.35);
    font-family:var(--font-mono);
}
/* Terminal-log row: prompt | date | title | arrow on a dashed divider,
   no card surface, no parallelogram. Hover is a faint highlight band
   plus a brightened prompt and underlined title — reads like a focused
   line in a shell. */
[data-variant="d"] .thought{
    position:relative;
    display:grid;
    grid-template-columns:1.5rem 9rem 1fr auto;
    gap:1rem;
    align-items:baseline;
    padding:.75rem .5rem;
    background:transparent;
    border:0;
    border-bottom:1px dashed rgba(26, 26, 26, 0.25);
    color:#1a1a1a;
    font-family:var(--font-mono);
    font-size:.85rem;
    letter-spacing:var(--ls-mono);
    text-transform:none;
    line-height:1.4;
    transition:background-color var(--dur) var(--ease);
}
[data-variant="d"] .thought::before{
    /* Default prefix — overridden per-nth-of-type below so each row's
       prompt rotates between its keyboard digit and the shifted symbol
       above it (1↔!, 2↔@, 3↔#, …). The base value here is just a
       placeholder for rows beyond the explicit list. */
    content:"$";
    position:static;
    inset:auto;
    background:transparent;
    transform:none;
    z-index:auto;
    font-family:var(--font-mono);
    font-size:.95rem;
    color:rgba(26, 26, 26, 0.45);
    transition:color var(--dur) var(--ease);
}

/* Per-row prompt: rotate between digit and shift-symbol. Each row gets
   its own keyframe + a small staggered delay so the toggles don't all
   flip in sync (reads as a row of blinking cursors). Animation pauses
   on hover so the focused row's symbol holds its current state. */
[data-variant="d"] .thought:nth-of-type(1)::before{ animation:thought-prompt-1 2s steps(1, end) infinite; }
[data-variant="d"] .thought:nth-of-type(2)::before{ animation:thought-prompt-2 2s steps(1, end) infinite; animation-delay:.15s; }
[data-variant="d"] .thought:nth-of-type(3)::before{ animation:thought-prompt-3 2s steps(1, end) infinite; animation-delay:.30s; }
[data-variant="d"] .thought:nth-of-type(4)::before{ animation:thought-prompt-4 2s steps(1, end) infinite; animation-delay:.45s; }
[data-variant="d"] .thought:nth-of-type(5)::before{ animation:thought-prompt-5 2s steps(1, end) infinite; animation-delay:.60s; }
[data-variant="d"] .thought:nth-of-type(6)::before{ animation:thought-prompt-6 2s steps(1, end) infinite; animation-delay:.75s; }
[data-variant="d"] .thought:nth-of-type(7)::before{ animation:thought-prompt-7 2s steps(1, end) infinite; animation-delay:.90s; }
[data-variant="d"] .thought:nth-of-type(8)::before{ animation:thought-prompt-8 2s steps(1, end) infinite; animation-delay:1.05s; }
[data-variant="d"] .thought:nth-of-type(9)::before{ animation:thought-prompt-9 2s steps(1, end) infinite; animation-delay:1.20s; }
[data-variant="d"] .thought:hover::before{ animation-play-state:paused; }

@keyframes thought-prompt-1{ 0%, 49.99%{ content:"1"; } 50%, 100%{ content:"!"; } }
@keyframes thought-prompt-2{ 0%, 49.99%{ content:"2"; } 50%, 100%{ content:"@"; } }
@keyframes thought-prompt-3{ 0%, 49.99%{ content:"3"; } 50%, 100%{ content:"#"; } }
@keyframes thought-prompt-4{ 0%, 49.99%{ content:"4"; } 50%, 100%{ content:"$"; } }
@keyframes thought-prompt-5{ 0%, 49.99%{ content:"5"; } 50%, 100%{ content:"%"; } }
@keyframes thought-prompt-6{ 0%, 49.99%{ content:"6"; } 50%, 100%{ content:"^"; } }
@keyframes thought-prompt-7{ 0%, 49.99%{ content:"7"; } 50%, 100%{ content:"&"; } }
@keyframes thought-prompt-8{ 0%, 49.99%{ content:"8"; } 50%, 100%{ content:"*"; } }
@keyframes thought-prompt-9{ 0%, 49.99%{ content:"9"; } 50%, 100%{ content:"("; } }

@media (prefers-reduced-motion: reduce){
    [data-variant="d"] .thought:nth-of-type(1)::before,
    [data-variant="d"] .thought:nth-of-type(2)::before,
    [data-variant="d"] .thought:nth-of-type(3)::before,
    [data-variant="d"] .thought:nth-of-type(4)::before,
    [data-variant="d"] .thought:nth-of-type(5)::before,
    [data-variant="d"] .thought:nth-of-type(6)::before,
    [data-variant="d"] .thought:nth-of-type(7)::before,
    [data-variant="d"] .thought:nth-of-type(8)::before,
    [data-variant="d"] .thought:nth-of-type(9)::before{ animation:none; }
    [data-variant="d"] .thought:nth-of-type(1)::before{ content:"1"; }
    [data-variant="d"] .thought:nth-of-type(2)::before{ content:"2"; }
    [data-variant="d"] .thought:nth-of-type(3)::before{ content:"3"; }
    [data-variant="d"] .thought:nth-of-type(4)::before{ content:"4"; }
    [data-variant="d"] .thought:nth-of-type(5)::before{ content:"5"; }
    [data-variant="d"] .thought:nth-of-type(6)::before{ content:"6"; }
    [data-variant="d"] .thought:nth-of-type(7)::before{ content:"7"; }
    [data-variant="d"] .thought:nth-of-type(8)::before{ content:"8"; }
    [data-variant="d"] .thought:nth-of-type(9)::before{ content:"9"; }
}
[data-variant="d"] .thought-date{
    color:rgba(26, 26, 26, 0.55);
    font-family:var(--font-mono);
    text-transform:uppercase;
}
[data-variant="d"] .thought-title{
    font-family:var(--font-mono);
    /* !important beats the universal 1rem lock in type.css. */
    font-size:1.25rem !important;
    font-weight:500;
    letter-spacing:var(--ls-mono);
    text-transform:none;
    color:#1a1a1a;
    line-height:1.35;
}
[data-variant="d"] .thought-title em{ font-style:normal; font-weight:400; }
[data-variant="d"] .thought-arr{
    font-family:var(--font-mono);
    color:rgba(26, 26, 26, 0.55);
    transition:transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
[data-variant="d"] .thought:hover{
    background:color-mix(in srgb, var(--accent) 10%, transparent);
}
[data-variant="d"] .thought:hover::before{
    color:var(--accent);
    background:transparent;
    transform:none;
}
[data-variant="d"] .thought:hover .thought-title{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:.25em;
    text-decoration-thickness:1px;
}
[data-variant="d"] .thought:hover .thought-date,
[data-variant="d"] .thought:hover .thought-arr{
    color:var(--accent);
}
[data-variant="d"] .thought:hover .thought-arr{ transform:translateX(.3rem); }

@media (max-width:680px){
    [data-variant="d"] .thought{
        grid-template-columns:1.5rem 1fr;
        grid-template-areas:
            "prompt date"
            "prompt title"
            "prompt arr";
        gap:.25rem 1rem;
    }
    [data-variant="d"] .thought::before{ grid-area:prompt; align-self:start; }
    [data-variant="d"] .thought-date{ grid-area:date; }
    [data-variant="d"] .thought-title{ grid-area:title; }
    [data-variant="d"] .thought-arr{ grid-area:arr; justify-self:start; }
    [data-variant="d"] .experiments{ grid-template-columns:1fr; }
    [data-variant="d"] .hero-display,
    [data-variant="d"] .hero-display em{ font-size:1.45rem !important; }
}

/* ------------------------------------------------------------------
   6. Experience — vertical list of company/role/dates
   ------------------------------------------------------------------ */

[data-variant="d"] .mono-experience{
    display:block;
}
.mono-experience{ display:none; }   /* hide in non-D variants */

/* ASCII timeline — clean monospace grid.
   Two glyphs: ■ work, ░ education. Blank cells outside active periods,
   so each lane reads as a single solid run with no surrounding noise.
   Cursor draws a vertical guide column through every lane for scrub-
   able cross-lane comparison; row hover highlights the lane label. */
[data-variant="d"] .ascii-tl{
    --label-col: clamp(13rem, 22vw, 18rem);
    --cell-w: .9ch;
    position:relative;
    margin-top:clamp(1.5rem, 3vw, 2.5rem);
    color:var(--fg);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size:.85rem;
    line-height:1.4;
}

[data-variant="d"] .ascii-tl__row{
    display:grid;
    grid-template-columns:var(--label-col) 1fr;
    align-items:center;
    gap:1rem;
}
[data-variant="d"] .ascii-tl__row--entry{
    margin-block:1.25rem;
}
[data-variant="d"] .ascii-tl__row--years{
    color:var(--fg);
    margin-bottom:1rem;
    align-items:end;
    font-family:var(--font-numerals);
}

[data-variant="d"] .ascii-tl__label{
    font-family:var(--font-sans);
    font-size:.95rem;
    letter-spacing:-.01em;
    text-transform:none;
    color:var(--fg);
    line-height:1.35;
    display:flex;
    flex-direction:column;
    gap:.1rem;
}
[data-variant="d"] .ascii-tl__label b{
    font-weight:600;
    color:var(--fg);
}
[data-variant="d"] .ascii-tl__role{
    display:block;
    color:var(--fg-muted);
    font-weight:400;
    text-transform:none;
}

[data-variant="d"] .ascii-tl__cells-stack{
    display:flex;
    flex-direction:column;
    gap:.1rem;
}
[data-variant="d"] .ascii-tl__cells{
    display:flex;
    flex-wrap:nowrap;
    overflow:hidden;
    width:100%;
}
[data-variant="d"] .ascii-tl__cell{
    flex:1 1 0;
    min-width:0;
    text-align:center;
    color:var(--fg);
    user-select:none;
}

/* Decorative dot rows above and below the main glyph row — lighter than
   the active glyphs so the lane reads as a dotted band with the data
   drawn through it. The star is sized down to read as a small bullet. */
[data-variant="d"] .ascii-tl__cell.is-decor,
[data-variant="d"] .ascii-tl__cells--main .ascii-tl__cell:not(.is-active){
    color:color-mix(in srgb, var(--fg-muted) 55%, transparent);
    font-size:.6em;
}

/* Education cells render dimmer so the active work lanes lead visually. */
[data-variant="d"] .ascii-tl__row--edu .ascii-tl__cells--main .ascii-tl__cell.is-active{
    color:var(--fg-muted);
}

/* Row hover — decor stars in the lane flip to brand accent; the active
   ASCII lane glyphs use a softer blue-lavender so they read distinctly.
   The JS also freezes the rotation on this row so the user can read it static. */
[data-variant="d"] .ascii-tl__row--entry.is-hot .ascii-tl__cell{
    color:var(--accent);
}
[data-variant="d"] .ascii-tl__row--entry.is-hot .ascii-tl__cell.is-active{
    color:#96AFFF;
}

/* Vertical scrub guide — one continuous accent line on the root,
   positioned by the JS-set --hot-col CSS variable. Drawing this as
   a single absolutely-positioned line (instead of stitched per-cell
   pseudo-elements) keeps it dead straight across rows + row gaps. */
[data-variant="d"] .ascii-tl{
    /* Default --hot-col so the line is offscreen until JS sets it. */
    --hot-col: -100;
}
[data-variant="d"] .ascii-tl::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    /* label column + grid gap + fraction-of-cells-region for the hot col
       center. Cells are 1fr each, so each cell spans
       (100% - label-col - gap) / 72 of the timeline root width. */
    left:calc(var(--label-col) + 1rem + (var(--hot-col) + 0.5) * (100% - var(--label-col) - 1rem) / 72);
    width:1px;
    background:color-mix(in srgb, var(--accent) 35%, transparent);
    pointer-events:none;
    opacity:0;
    transition:opacity 120ms ease;
    z-index:0;
}
[data-variant="d"] .ascii-tl.is-scrubbing::before{
    opacity:1;
}

/* Cells at the hovered column flip glyph color — decor stars in the
   column take brand accent; active lane glyphs use the softer lavender. */
[data-variant="d"] .ascii-tl__cell.is-col-hot{
    color:var(--accent);
}
[data-variant="d"] .ascii-tl__cell.is-col-hot.is-active{
    color:#96AFFF;
}

/* Parsons & Duke (edu) rows swap the two hover colors — active lane glyphs
   read in brand accent and the surrounding stars take the softer lavender. */
[data-variant="d"] .ascii-tl__row--entry.is-hot.ascii-tl__row--edu .ascii-tl__cell{
    color:#96AFFF;
}
[data-variant="d"] .ascii-tl__row--entry.is-hot.ascii-tl__row--edu .ascii-tl__cell.is-active{
    color:var(--accent);
}
[data-variant="d"] .ascii-tl__row--edu .ascii-tl__cell.is-col-hot{
    color:#96AFFF;
}
[data-variant="d"] .ascii-tl__row--edu .ascii-tl__cell.is-col-hot.is-active{
    color:var(--accent);
}

/* Readout line beneath the grid — pinned to the bottom-right. */
[data-variant="d"] .ascii-tl__legend{
    margin-top:1rem;
    padding-top:.6rem;
    border-top:1px solid var(--rule);
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:var(--ls-mono);
    color:var(--fg-muted);
    display:flex;
    justify-content:flex-end;
}
[data-variant="d"] .ascii-tl__readout{
    display:flex;
    gap:.6rem;
    align-items:baseline;
    text-align:right;
}
[data-variant="d"] [data-ascii-readout-month]{
    color:var(--fg);
    min-width:7ch;
    font-family:var(--font-numerals);
    letter-spacing:.04em;
}
/* Wider gap between the bracketed entry range and the role/company text. */
[data-variant="d"] .ascii-tl__readout-range{
    margin-right:1.25rem;
}

/* --------------------------------------------------------------
   Mobile timeline — a compact stacked list of entries (date range,
   rotating glyphs, label) used in place of the structured timeline
   on small screens. */
[data-variant="d"] .ascii-tl__mobile{ display:none; }

@media (max-width:760px){
    /* Hide the structured desktop timeline; mobile list takes over. */
    [data-variant="d"] .ascii-tl__row,
    [data-variant="d"] .ascii-tl__legend,
    [data-variant="d"] .ascii-tl::before{
        display:none;
    }
    [data-variant="d"] .ascii-tl{
        --hot-col:-100;
        margin-top:1.5rem;
    }
    [data-variant="d"] .ascii-tl__mobile{
        display:flex;
        flex-direction:column;
        gap:3.5rem;
        text-transform:none;
    }
    [data-variant="d"] .ascii-tl__m-entry{
        display:flex;
        flex-direction:column;
        gap:.5rem;
    }
    [data-variant="d"] .ascii-tl__m-label{ order:1; }
    [data-variant="d"] .ascii-tl__m-dates{ order:2; }
    [data-variant="d"] .ascii-tl__m-glyphs{ order:3; }
    [data-variant="d"] .ascii-tl__m-dates{
        font-family:var(--font-numerals);
        font-size:.85rem;
        color:var(--fg);
        letter-spacing:.04em;
        text-transform:none;
    }
    [data-variant="d"] .ascii-tl__m-glyphs{
        font-family:var(--font-mono);
        /* Scale font-size to the active-month count (set per-entry via JS).
           Short entries cap at .85rem; long entries (e.g. Duke's 46 months)
           shrink to fit a single line of viewport width. The 1.35 divisor
           accounts for Switzer's wide em-dash fallback of the box-drawing
           rotation glyph; the 4rem subtraction is a buffer for the page's
           horizontal padding. */
        font-size:clamp(.28rem, calc((100vw - 4rem) / var(--glyph-count, 10) / 1.35), .85rem);
        color:var(--fg);
        display:flex;
        flex-wrap:nowrap;
        gap:0;
        line-height:1.2;
        max-width:100%;
        overflow:hidden;
    }
    [data-variant="d"] .ascii-tl__m-glyphs .ascii-tl__cell{
        flex:0 0 auto;
        color:color-mix(in srgb, var(--accent) 55%, transparent);
        width:auto;
        height:auto;
        line-height:1.2;
    }
    [data-variant="d"] .ascii-tl__m-label{
        display:flex;
        flex-direction:column;
        gap:.1rem;
        font-family:var(--font-sans);
    }
    [data-variant="d"] .ascii-tl__m-label b{
        font-weight:600;
        color:var(--fg);
        font-size:1.05rem;
        letter-spacing:-.01em;
        line-height:1.25;
    }
    [data-variant="d"] .ascii-tl__m-label .ascii-tl__role{
        font-weight:400;
        color:var(--fg-muted);
        font-size:1.05rem;
        letter-spacing:-.01em;
        line-height:1.25;
    }
}

/* ------------------------------------------------------------------
   7. Logos / brand mark grid
   ------------------------------------------------------------------ */

[data-variant="d"] .mono-logos{ display:block; }
.mono-logos{ display:none; }

[data-variant="d"] .logo-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(5rem, 9vw, 8rem) 2rem;
    align-items:center;
    justify-items:center;
    margin-top:clamp(3rem, 6vw, 5rem);
    padding-bottom:clamp(2rem, 5vw, 4rem);
}
[data-variant="d"] .logo-mark{
    font-family:var(--font-sans);
    font-size:clamp(2rem, 3.6vw, 3rem);
    font-weight:700;
    letter-spacing:-0.04em;
    color:var(--fg);
    text-transform:none;
    line-height:1;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    text-align:center;
}
[data-variant="d"] .logo-mark[data-style="serif"]{
    font-family:'Times New Roman', Times, serif;
    font-weight:600;
    letter-spacing:-0.02em;
}
[data-variant="d"] .logo-mark[data-style="italic"]{
    font-style:italic;
    font-weight:600;
}
[data-variant="d"] .logo-mark[data-style="mono"]{
    font-family:var(--font-mono);
    font-weight:400;
    font-size:clamp(1.25rem, 2.2vw, 1.8rem);
    letter-spacing:-0.01em;
    text-transform:uppercase;
}
[data-variant="d"] .logo-mark[data-style="rounded"]{
    font-family:var(--font-sans);
    font-weight:800;
    letter-spacing:-0.045em;
}
[data-variant="d"] .logo-mark .dot{
    display:inline-block;
    width:.6em;
    height:.6em;
    background:var(--fg);
    border-radius:50%;
}
[data-variant="d"] .logo-mark .box{
    display:inline-block;
    width:.7em;
    height:.7em;
    background:var(--fg);
}

/* ------------------------------------------------------------------
   8. Info / About long-form
   ------------------------------------------------------------------ */

[data-variant="d"] .info-grid{
    display:block;
    margin-top:clamp(2rem, 4vw, 3rem);
    max-width:none;
}
[data-variant="d"] .info-grid h3{ display:none; }
[data-variant="d"] .info-grid .info-body{ margin-bottom:0; }
[data-variant="d"] .info-grid .info-body p{
    font-family:var(--font-mono);
    font-size:.78rem;
    font-weight:500;
    font-variation-settings:'wght' 500;
    letter-spacing:var(--ls-mono);
    /* text-transform:uppercase; */
    line-height:1.75;
    color:var(--fg);
    max-width:none;
    margin-bottom:1.2em;
}
[data-variant="d"] .info-grid .info-body p:last-child{ margin-bottom:0; }
[data-variant="d"] .info-grid .info-body em{ font-style:normal; }
[data-variant="d"] .info-grid .info-body ul{ display:none; }
[data-variant="d"] .timeline{ display:none; }

/* Show only the long "Practice" paragraph block as the "ABOUT" copy.
   Hide other sub-sections that don't fit the editorial style. */
[data-variant="d"] .info-grid > h3,
[data-variant="d"] .info-grid > .info-body:nth-of-type(1),
[data-variant="d"] .info-grid > .info-body:nth-of-type(3),
[data-variant="d"] .info-grid > .info-body:nth-of-type(4){
    display:none;
}
[data-variant="d"] .info-grid > .info-body:nth-of-type(2){
    display:block;
    max-width:50%;
}

/* "Open to" block — opted out of the hides above so its header + list
   render in variant d. Heading reads as a mono section label like the
   other rails on the page; list items use the same star-prefix style
   as the rest of the site so the bullets feel cohesive. */
[data-variant="d"] .open-to{
    display:block;
    margin-top:clamp(2rem, 4vw, 3rem);
    max-width:50%;
}
[data-variant="d"] .open-to h3{
    display:block;
    font-family:var(--font-mono);
    font-size:.85rem !important;
    font-weight:500;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-muted);
    margin:0 0 .75rem;
}
[data-variant="d"] .open-to .info-body{ margin:0; }
[data-variant="d"] .open-to .info-body ul{
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
[data-variant="d"] .open-to .info-body ul li{
    position:relative;
    padding-left:1.5rem;
    margin:0 0 .5rem;
    font-weight:500;
    /* Variable font lock — variant-d body sets `font-variation-settings:
       'wght' 550` which inherits and overrides plain `font-weight`,
       so pair the two to land at 500. */
    font-variation-settings:'wght' 500;
    font-family:var(--font-mono);
    font-size:1rem;
    line-height:1.5;
    color:var(--fg);
}
[data-variant="d"] .open-to .info-body ul li::before{
    content:"✦";
    position:absolute;
    left:0;
    top:0;
    /* Reset the base `.info-grid .info-body ul li::before` rule, which
       paints a 1px×.5rem bar via width/height/background. Without these
       resets you get both the bar and the star. */
    width:auto;
    height:auto;
    background:none;
    color:var(--accent);
}
@media (max-width:880px){
    [data-variant="d"] .open-to{ max-width:100%; }
}
@media (max-width:880px){
    [data-variant="d"] .info-grid > .info-body:nth-of-type(2){ 
        max-width:100%;
    }
}

/* Hide the original short "About" paragraph block; we use Info as the
   canonical about copy in D. */
[data-variant="d"] #about{ display:none; }

/* ------------------------------------------------------------------
   9. Contact — stacked mono lines, big space above
   ------------------------------------------------------------------ */

/* Full-bleed brand-blue band. `width:100vw` + `margin-left:calc(50%-50vw)`
   breaks the contact section out of every nested container so it spans
   the full viewport. The inner gutter (var(--space-page)) keeps the
   text aligned with the rest of the page content. */
[data-variant="d"] .contact{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-top:clamp(4rem, 8vw, 7rem);
    padding-block:clamp(2.5rem, 3vw, 4rem);
    padding-inline:var(--space-page);
    background:var(--accent);
    color:#fff;
    border:none;
}
[data-variant="d"] .contact-display{ display:none; }
/* Contact heading on the blue band — overrides the .info-grid h3
   blanket-hide above. Selector chained through .contact so its
   specificity (0,3,1) clears the .info-grid h3 (0,2,1) rule
   regardless of source order in the file. Big mono display in white
   so it sits as the anchor of the band. `em` keeps the italic accent
   ("say hello"). */
[data-variant="d"] .contact .contact-title{
    display:block !important;
    font-family:var(--font-mono);
    font-size:18px !important;
    font-weight:700;
    letter-spacing:var(--ls-mono);
    text-transform:none;
    color:#fff;
    line-height:1.2;
    margin:0 0 clamp(1.25rem, 2vw, 1.75rem);
    max-width:min(50rem, 70vw);
}
[data-variant="d"] .contact .contact-title em{
    font-style:italic;
    font-weight:500;
}
[data-variant="d"] .contact-links{
    flex-direction:column;
    gap:.4rem;
    align-items:flex-start;
    margin-top:0;
}
[data-variant="d"] .contact-links a{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:var(--ls-mono);
    text-transform:none;
    font-weight:500;
    /* Pair with font-variation-settings so the variable font actually
       lands at 500 — the body's inherited `'wght' 550` would otherwise
       win over plain font-weight on variable axes. */
    font-variation-settings:'wght' 500;
    /* On the blue band the text is white; hover wipes to the page bg
       so the link reads as a "selection" pulled out of the band. */
    color:#fff;
    background-image:linear-gradient(to right, var(--bg), var(--bg));
    background-size:0% 100%;
    background-repeat:no-repeat;
    background-position:left center;
    border:none;
    padding:.1em 0;
    text-decoration:underline;
    text-decoration-color:rgba(255, 255, 255, 0.7);
    text-underline-offset:3px;
    transition:background-size 320ms var(--ease),
               color 320ms var(--ease),
               text-decoration-color 320ms var(--ease);
}
[data-variant="d"] .contact-links a::after{ display:none; }
[data-variant="d"] .contact-links a:hover{
    background-size:100% 100%;
    color:var(--accent);
    text-decoration:underline;
    text-decoration-color:var(--accent);
}

/* ------------------------------------------------------------------
   10. Bottombar — hide chrome in D for cleanliness
   ------------------------------------------------------------------ */

[data-variant="d"] .bottombar{
    /* Drop the fixed positioning from the base style — in D the copyright
       lives in the normal document flow at the foot of the page. */
    position:static;
    z-index:auto;
    pointer-events:auto;
    padding-top:clamp(4rem, 8vw, 6rem);
    padding-bottom:clamp(1.5rem, 3vw, 2.5rem);
    background:transparent;
    color:var(--fg);
    font-family:var(--font-mono);
    /* !important beats the universal 1rem lock in type.css. */
    font-size:14px !important;
}
[data-variant="d"] .bottombar span,
[data-variant="d"] .bottombar > *{
    font-size:14px !important;
}
[data-variant="d"] .bottombar .theme-toggle{
    background:transparent;
    border:1px solid var(--rule);
}

/* ------------------------------------------------------------------
   11. Selection / link colors quiet in D
   ------------------------------------------------------------------ */

[data-variant="d"] ::selection{
    background:var(--fg);
    color:var(--bg);
}

/* ------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------ */

/* Topbar restructure at narrow viewports — logo + time stay on the
   first row, nav drops to a second row centered below. */
@media (max-width:800px){
    [data-variant="d"] .topbar{
        display:grid;
        grid-template-columns:1fr auto;
        grid-template-areas:
            "logo time"
            "nav  nav";
        align-items:center;
        column-gap:1rem;
        row-gap:.85rem;
    }
    [data-variant="d"] .wordmark{
        position:static;
        transform:none;
        grid-area:logo;
        justify-self:start;
    }
    [data-variant="d"] .topbar-time{
        position:static;
        transform:none;
        grid-area:time;
        justify-self:end;
        text-align:right;
    }
    [data-variant="d"] .topbar-nav{
        grid-area:nav;
        justify-content:space-between;
        flex-wrap:wrap;
        gap:clamp(1rem, 3vw, 2rem);
    }
    /* Strip all padding off the link items so first/last sit flush at the
       page gutters and items don't carry any inset. */
    [data-variant="d"] .topbar-nav a,
    [data-variant="d"] .topbar-nav a[data-mono]{
        padding:0;
    }
    /* Generous breathing room between sections on mobile/narrow viewports. */
    [data-variant="d"] .section{
        padding-block:clamp(9rem, 22vw, 14rem) 0;
    }
    /* Mobile has no hover — show videos/iframes in full color by default. */
    [data-variant="d"] .work-thumb video,
    [data-variant="d"] .work-thumb img,
    [data-variant="d"] .experiment-thumb video,
    [data-variant="d"] .experiment-thumb iframe{
        filter:grayscale(0);
    }
}

@media (max-width:880px){
    [data-variant="d"] .work{
        grid-template-columns:1fr;
        /* grid-template-areas:
            "label"
            "tags"
            "media"
            "title"
            "meta"; */
    }
    [data-variant="d"] .work-tag{ justify-self:center; text-align:center; }
    [data-variant="d"] .work-meta{ justify-self:center; text-align:center; }
    [data-variant="d"] .work-thumb{
        width:100%;
        max-width:none;
        justify-self:stretch;
    }
    /* Match sandbox cover height to the work cover on mobile by sharing
       the 16/10 aspect-ratio (work-thumb default). */
    [data-variant="d"] .experiment-thumb{
        aspect-ratio:16 / 10;
    }
    [data-variant="d"] .work-thumb video,
    [data-variant="d"] .work-thumb img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    [data-variant="d"] .work-title,
    [data-variant="d"] .work-desc,
    [data-variant="d"] .work-row{
        max-width:none;
    }
    [data-variant="d"] .logo-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:4rem 1.5rem;
    }
}

@media (max-width:520px){
    [data-variant="d"] .logo-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }
}

/* --------------------------------------------------------------
   Definitive .work-thumb sizing override — placed last + with
   !important so nothing earlier in the cascade can collapse the
   figure to its video's intrinsic pixel dimensions on mobile.
   -------------------------------------------------------------- */
[data-variant="d"] .work-thumb{
    width:100% !important;
    justify-self:stretch !important;
    display:block !important;
}
[data-variant="d"] .work-thumb > video,
[data-variant="d"] .work-thumb > img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}
@media (max-width:880px){
    [data-variant="d"] .work-thumb{
        max-width:none !important;
    }
}

/* --------------------------------------------------------------
   Liquid reveal-on-scroll
   -------------------------------------------------------------- */
/* Hide each reveal target until the IntersectionObserver in site.js
   adds `.is-in`. Uses translate + blur + opacity together to give
   the elements a soft "crystallizing into focus" feel rather than
   a flat fade. `:where()` keeps specificity low (0,1,0) so existing
   layout rules win. The hero is intentionally excluded — it's the
   first paint and should appear immediately. */
.js-reveal :where(
    /* Home-page targets */
    .section .section-head,
    .about-grid > p,
    .works > .work,
    .experiments > .experiment,
    .thoughts > .thought,
    .info-grid > h3,
    .info-grid > .info-body,
    .contact,
    .open-to,
    .ascii-tl,
    /* Case-study targets — overview block + each section's direct children
       + each decision article's children + nested user/list blocks. The
       hero figure is excluded so the first paint feels instant. */
    .case-study main > h3,
    .case-study main > .about--main,
    .case-study main > .case-header,
    .case-study [data-section] > :where(h3, h4, p, ul, ol, pre, figcaption, figure, article, section, blockquote),
    .case-study .decision > :where(h4, p, figure, figcaption, ul, ol),
    .case-study .users > .user,
    .case-study .resonate-list > li
){
    opacity:0;
    transform:translateY(28px) scale(.985);
    filter:blur(10px);
    transition:opacity 950ms cubic-bezier(.22,1,.36,1),
               transform 950ms cubic-bezier(.22,1,.36,1),
               filter 950ms cubic-bezier(.22,1,.36,1);
    will-change:opacity, transform, filter;
}
.js-reveal :where(
    .section .section-head,
    .about-grid > p,
    .works > .work,
    .experiments > .experiment,
    .thoughts > .thought,
    .info-grid > h3,
    .info-grid > .info-body,
    .contact,
    .open-to,
    .ascii-tl,
    .case-study main > h3,
    .case-study main > .about--main,
    .case-study main > .case-header,
    .case-study [data-section] > :where(h3, h4, p, ul, ol, pre, figcaption, figure, article, section, blockquote),
    .case-study .decision > :where(h4, p, figure, figcaption, ul, ol),
    .case-study .users > .user,
    .case-study .resonate-list > li
).is-in{
    opacity:1;
    transform:none;
    filter:blur(0);
}

/* Media-heavy figures skip the blur + scale parts of the liquid reveal.
   filter:blur creates a GPU composite layer slightly larger than the
   element's bounds, and the soft alpha edge of that layer reads as a
   faint border against the page background. transform:scale also leaves
   subpixel halos at the edge. Keep just opacity + translateY for clean
   fade-in on video/image figures. */
.js-reveal :where(
    .case-study [data-section] > figure,
    .case-study .decision > figure,
    .case-study .users .user figure,
    .case-study .resonate-list > li > figure
){
    transform:translateY(28px);
    filter:none;
}
.js-reveal :where(
    .case-study [data-section] > figure,
    .case-study .decision > figure,
    .case-study .users .user figure,
    .case-study .resonate-list > li > figure
).is-in{
    transform:none;
    filter:none;
}

@media (prefers-reduced-motion: reduce){
    .js-reveal :where(
        .section .section-head,
        .about-grid > p,
        .works > .work,
        .experiments > .experiment,
        .thoughts > .thought,
        .info-grid > h3,
        .info-grid > .info-body,
        .contact,
        .open-to,
        .ascii-tl,
        .case-study main > h3,
        .case-study main > .about--main,
        .case-study main > .case-header,
        .case-study [data-section] > :where(h3, h4, p, ul, ol, pre, figcaption, figure, article, section, blockquote),
        .case-study .decision > :where(h4, p, figure, figcaption, ul, ol),
        .case-study .users > .user,
        .case-study .resonate-list > li
    ){
        opacity:1;
        transform:none;
        filter:none;
        transition:none;
    }
}