/* ==========================================================================
   assumednormal — website layout
   Brand tokens and base type live in theme.css.
   ========================================================================== */

@import url("theme.css?v=2026110901");

.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--s4);
}

.narrow { max-width: 760px; }

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: var(--s3);
    top: var(--s3);
    background: var(--ink);
    color: var(--paper);
    padding: var(--s2) var(--s3);
    z-index: 100;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--rule);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: var(--fs-base);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.site-nav {
    display: flex;
    gap: var(--s4);
}

.site-nav a {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: var(--ink); }

.site-nav a.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 12px 22px;
    border: 1px solid var(--ink);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--paper); color: var(--ink); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--paper); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
}

.arrow-link {
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* ---------- Hero ---------- */
.hero {
    padding: var(--s7) 0 var(--s6);
}

.hero h1 {
    max-width: 880px;
    margin-bottom: var(--s4);
}

.lead {
    font-size: var(--fs-md);
    color: var(--ink-2);
    max-width: 680px;
    margin-bottom: var(--s5);
}

.hero-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--s6);
    border-top: 1px solid var(--rule-strong);
}

.hero-meta div {
    padding: var(--s3) var(--s3) 0 0;
}

.hero-meta strong {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.hero-meta span {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

/* ---------- Sections ---------- */
.section {
    padding: var(--s6) 0;
    border-top: 1px solid var(--rule);
}

.section-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--s5);
    margin-bottom: var(--s5);
}

.section-head > * { min-width: 0; }

.section-head > :first-child h2 { margin: 0; }

.section-head > p {
    color: var(--ink-2);
    margin: 0;
}

.section-head > div > p:last-child { margin-bottom: 0; }

.section.wash { background: var(--wash); }

.section.ink {
    background: var(--ink);
    color: var(--paper);
    border-top: 0;
}

.section.ink .label,
.section.ink .muted { color: #9a9a9a; }
.section.ink a { color: var(--paper); }
.section.ink .btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section.ink .btn.primary:hover { background: transparent; color: var(--paper); }
.section.ink .btn.secondary { border-color: var(--paper); color: var(--paper); }
.section.ink .btn.secondary:hover { background: var(--paper); color: var(--ink); }

.page-header {
    padding: var(--s6) 0 var(--s5);
}

.page-header h1 { margin-bottom: var(--s3); }
.page-header .lead { margin-bottom: 0; }

/* ---------- Grid of cells (ruled, no rounded cards) ---------- */
.cells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--rule-strong);
}

.cells.two { grid-template-columns: repeat(2, 1fr); }
.cells.four { grid-template-columns: repeat(4, 1fr); }

.cell {
    padding: var(--s4) var(--s4) var(--s4) 0;
    border-bottom: 1px solid var(--rule);
}

.cell + .cell {
    padding-left: var(--s4);
    border-left: 1px solid var(--rule);
}

.cells.two .cell:nth-child(2n + 1),
.cells:not(.two):not(.four) .cell:nth-child(3n + 1),
.cells.four .cell:nth-child(4n + 1) {
    padding-left: 0;
    border-left: 0;
}

.cell .num {
    display: block;
    font-size: var(--fs-xs);
    color: var(--ink-3);
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--s3);
}

.cell h3 { margin-bottom: var(--s2); }

.cell p,
.cell li {
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.cell p:last-child,
.cell ul:last-child { margin-bottom: 0; }

.section.ink .cells { border-top-color: var(--paper); }
.section.ink .cell { border-color: #333; }
.section.ink .cell p,
.section.ink .cell li { color: #c8c8c8; }
.section.ink ul.dash li::before { background: var(--paper); }

/* ---------- Feature (AI on-ramp) ---------- */
.feature {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s6);
    align-items: start;
}

.feature h2 { font-size: var(--fs-xl); }

.feature .lead { margin-bottom: var(--s4); }

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--paper);
    counter-reset: step;
}

.steps li {
    display: grid;
    grid-template-columns: 56px 1fr;
    padding: var(--s4) 0;
    border-bottom: 1px solid #333;
    counter-increment: step;
}

.steps li::before {
    content: "0" counter(step);
    font-size: var(--fs-sm);
    color: #9a9a9a;
}

.steps h3 { margin-bottom: var(--s1); }

.steps p {
    margin: 0;
    font-size: var(--fs-sm);
    color: #c8c8c8;
}

/* light variant of steps */
.steps.light { border-top-color: var(--rule-strong); }
.steps.light li { border-bottom-color: var(--rule); }
.steps.light li::before { color: var(--ink-3); }
.steps.light p { color: var(--ink-2); }

/* ---------- Selected work ---------- */
.work {
    border-top: 1px solid var(--rule-strong);
}

.work-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--s4);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule);
}

.work-item .org {
    font-weight: 600;
    font-size: var(--fs-sm);
}

.work-item .org span {
    display: block;
    font-weight: 400;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-top: 2px;
}

.work-item h3 { margin-bottom: var(--s1); }

.work-item p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

/* ---------- Logos / employer strip ---------- */
.employers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    font-weight: 500;
}

/* ---------- Fit list ---------- */
.fit {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule-strong);
}

.fit li {
    display: grid;
    grid-template-columns: 40px 1fr;
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule);
}

.fit li::before {
    content: "→";
    color: var(--ink-3);
}

/* ---------- Timeline (About) ---------- */
.timeline {
    border-top: 1px solid var(--rule-strong);
}

.role {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: var(--s4);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule);
}

.role .when {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    letter-spacing: 0.04em;
    padding-top: 3px;
}

.role h3 { margin-bottom: 2px; }

.role .title {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    margin-bottom: var(--s2);
}

.role ul.dash li {
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.role ul.dash:last-child { margin-bottom: 0; }

/* ---------- Bio block ---------- */
.bio {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--s5);
    align-items: start;
}

.bio img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    border: 1px solid var(--rule);
}

.bio-facts {
    margin: var(--s4) 0 0;
    border-top: 1px solid var(--rule-strong);
    font-size: var(--fs-sm);
}

.bio-facts div {
    display: grid;
    grid-template-columns: 120px 1fr;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--rule);
}

.bio-facts dt {
    color: var(--ink-3);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    padding-top: 2px;
}

.bio-facts dd { margin: 0; }

/* ---------- Contact ---------- */
.contact-panel {
    border: 1px solid var(--ink);
    padding: var(--s4);
    margin-bottom: var(--s5);
}

.contact-panel .email {
    display: inline-block;
    font-size: clamp(0.8125rem, 4.4vw, var(--fs-md));
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--s3);
    white-space: nowrap;
}

/* ---------- CTA band ---------- */
.cta-band {
    padding: var(--s6) 0;
}

.cta-band .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s5);
}

.cta-band h2 { margin-bottom: var(--s2); }
.cta-band p { margin: 0; max-width: 560px; }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--rule-strong);
    padding: var(--s5) 0;
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

.site-footer a {
    color: var(--ink-3);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.footer-links {
    display: flex;
    gap: var(--s4);
    flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    :root {
        --fs-xxl: 2rem;
        --fs-xl: 1.5rem;
        --s6: 48px;
        --s7: 64px;
    }

    .section-head,
    .feature,
    .bio { grid-template-columns: 1fr; gap: var(--s4); }

    .bio img { max-width: 160px; }

    .hero-meta { grid-template-columns: repeat(2, 1fr); }
    .hero-meta div:nth-child(n + 3) { padding-top: var(--s4); }

    .cells,
    .cells.two,
    .cells.four { grid-template-columns: 1fr; }

    .cell,
    .cell + .cell {
        padding: var(--s4) 0;
        border-left: 0;
    }

    .work-item,
    .role { grid-template-columns: 1fr; gap: var(--s2); }

    .cta-band .container {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .container { padding: 0 var(--s3); }

    .site-header .container {
        height: auto;
        padding-top: 14px;
        padding-bottom: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .site-header { position: static; }

    .site-nav { gap: var(--s3); }

    .contact-panel { padding: var(--s4); }

    .bio-facts div { grid-template-columns: 1fr; }
}

.section.ink .cell .num { color: #9a9a9a; }