:root {
    --ink: #f1f0e9;
    --muted: #989b94;
    --faint: #686b67;
    --ground: #0b0d0c;
    --surface: #121513;
    --surface-raised: #171b18;
    --line: #2a302b;
    --signal: #c8ff62;
    --signal-deep: #9bd83b;
    --mono: 'DM Mono', monospace;
    --sans: 'Manrope', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(241,240,233,.12); background: rgba(11,13,12,.92); backdrop-filter: blur(18px); }
.nav-inner, main, .footer-inner { max-width: 1120px; margin: 0 auto; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 2rem; }
.nav-logo, .nav-links a, .eyebrow, .hero-meta, .section-label, .signal-kicker, .project-topline, .principle-number, .essay-index, .case-block-label, .case-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .075em; text-transform: uppercase; }
.nav-logo { font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-logo span { color: var(--signal); margin: 0 .22rem; }
.nav-links { display: flex; gap: 1.7rem; list-style: none; }
.nav-links a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
.nav-links a:hover { color: var(--signal); }

main { padding: 0 2rem; }
.hero { position: relative; isolation: isolate; padding: 8.5rem 0 5rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid { position: absolute; z-index: -1; inset: 0 -16vw 0 43%; opacity: .43; background-image: linear-gradient(rgba(200,255,98,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(200,255,98,.1) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, #000 24%, transparent 100%); }
.hero-grid::before { content: ''; position: absolute; width: 340px; height: 340px; border: 1px solid rgba(200,255,98,.32); border-radius: 50%; top: 76px; left: 20%; box-shadow: 0 0 0 42px rgba(200,255,98,.04), 0 0 0 84px rgba(200,255,98,.025); }
.eyebrow { display: inline-flex; align-items: center; gap: .65rem; color: var(--signal); margin-bottom: 1.15rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px rgba(200,255,98,.8); }
.hero-meta { color: var(--muted); margin-bottom: 1.75rem; }
.hero-meta span { color: var(--signal); padding: 0 .2rem; }
.hero h1 { max-width: 790px; font-size: clamp(3.3rem, 8vw, 6.7rem); font-weight: 800; letter-spacing: -.07em; line-height: .93; }
.accent { color: var(--signal); }
.hero-sub { max-width: 620px; margin: 2rem 0 2.3rem; color: var(--muted); font-size: 1.08rem; line-height: 1.8; }
.hero-actions, .social-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: .65rem; padding: .78rem 1rem; background: var(--signal); border: 1px solid var(--signal); color: #10140d; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .035em; text-decoration: none; text-transform: uppercase; transition: background .18s ease, transform .18s ease; }
.btn-primary:hover { background: #dcff9d; transform: translateY(-2px); }
.btn-secondary, .text-link { color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-decoration: none; transition: color .18s ease; }
.btn-secondary:hover, .text-link:hover { color: var(--signal); }
.hero-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 770px; margin-top: 5.5rem; border-top: 1px solid var(--line); }
.hero-readout div { padding: 1.15rem 1rem 0 0; }
.hero-readout div + div { border-left: 1px solid var(--line); padding-left: 1rem; }
.hero-readout span { display: block; color: var(--faint); font-family: var(--mono); font-size: .59rem; letter-spacing: .08em; margin-bottom: .42rem; }
.hero-readout strong { color: var(--ink); font-size: .78rem; font-weight: 500; }

.section { padding: 5.5rem 0; border-bottom: 1px solid var(--line); }
.section-heading { max-width: 780px; margin-bottom: 2.5rem; }
.section-heading > p { max-width: 570px; color: var(--muted); font-size: 1.1rem; line-height: 1.75; }
.section-heading h2, .connect-section h2 { max-width: 670px; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.05em; line-height: 1.04; }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; max-width: none; }
.section-label { color: var(--signal); margin-bottom: 1.1rem; }
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.principle-card { min-height: 250px; padding: 1.5rem; background: var(--surface); }
.principle-card + .principle-card { border-left: 1px solid var(--line); }
.principle-number { color: var(--signal); }
.principle-card h2 { margin: 3.4rem 0 .75rem; font-size: 1.1rem; letter-spacing: -.03em; line-height: 1.15; }
.principle-card p { color: var(--muted); font-size: .86rem; line-height: 1.65; }

.signal-panel { position: relative; display: grid; grid-template-columns: .75fr 2fr .8fr; gap: 2rem; align-items: start; padding: 2.3rem; border: 1px solid rgba(200,255,98,.45); background: linear-gradient(120deg, rgba(200,255,98,.075), transparent 55%), var(--surface); }
.signal-kicker { color: var(--signal); }
.signal-copy h2 { max-width: 620px; font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -.045em; line-height: 1.1; }
.signal-copy p { max-width: 650px; margin-top: 1rem; color: var(--muted); font-size: .94rem; line-height: 1.75; }
.signal-link { align-self: end; color: var(--ink); font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; line-height: 1.7; text-decoration: none; }
.signal-link span, .text-link span { color: var(--signal); }

.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); }
.project-card { min-height: 290px; padding: 1.75rem; background: var(--surface); color: var(--ink); text-decoration: none; transition: background .18s ease; }
.project-card:nth-child(2n) { border-left: 1px solid var(--line); }
.project-card:nth-child(n+3) { border-top: 1px solid var(--line); }
.project-card:hover { background: var(--surface-raised); }
.project-topline { display: flex; justify-content: space-between; color: var(--signal); }
.project-card h3 { max-width: 370px; margin: 4.5rem 0 .75rem; font-size: 1.4rem; letter-spacing: -.04em; line-height: 1.13; }
.project-card p { max-width: 390px; color: var(--muted); font-size: .9rem; }
.card-arrow { display: block; margin-top: 1.5rem; color: var(--signal); font-family: var(--mono); font-size: .67rem; letter-spacing: .03em; }

.essay-list { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.essay-card { min-height: 255px; padding: 1.5rem; background: var(--surface); color: var(--ink); text-decoration: none; transition: background .18s ease; }
.essay-card + .essay-card { border-left: 1px solid var(--line); }
.essay-card:hover { background: var(--surface-raised); }
.essay-index { color: var(--signal); }
.essay-card h3 { margin: 3.6rem 0 .6rem; font-size: 1.13rem; letter-spacing: -.03em; line-height: 1.18; }
.essay-card p { color: var(--muted); font-size: .86rem; line-height: 1.65; }
.essay-link { display: block; margin-top: 1.5rem; color: var(--signal); font-family: var(--mono); font-size: .65rem; letter-spacing: .03em; }
.connect-section { padding-bottom: 6.5rem; }
.connect-section > p:not(.section-label) { max-width: 620px; margin: 1rem 0 2rem; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.social-row > a:not(.btn-primary) { color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-decoration: none; }
.social-row > a:not(.btn-primary):hover { color: var(--signal); }
footer { padding: 1.55rem 2rem; }
.footer-inner { display: flex; justify-content: space-between; color: var(--faint); font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }

/* Interior pages */
.page-hero { padding: 5.5rem 0 4rem; border-bottom: 1px solid var(--line); }
.page-hero .section-label { margin-bottom: 1.1rem; }
.page-hero h1, .contact-section h1 { max-width: 780px; font-size: clamp(3rem, 7vw, 5.8rem); font-weight: 800; letter-spacing: -.07em; line-height: .94; }
.page-hero > p:not(.section-label), .writing-page-intro, .contact-section .lead { max-width: 610px; margin-top: 1.55rem; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.case-study { padding: 4rem 0; border-bottom: 1px solid var(--line); }
.case-study-header { display: flex; justify-content: space-between; gap: 2rem; align-items: start; margin-bottom: 2rem; }
.case-study h2 { max-width: 650px; font-size: clamp(1.7rem, 4vw, 3rem); letter-spacing: -.05em; line-height: 1.05; }
.case-tag { flex: 0 0 auto; padding: .45rem .55rem; color: var(--signal); border: 1px solid rgba(200,255,98,.35); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.case-block { min-height: 205px; padding: 1.4rem; background: var(--surface); }
.case-block + .case-block { border-left: 1px solid var(--line); }
.case-block-label { color: var(--signal); }
.case-block p { margin-top: 3rem; color: var(--muted); font-size: .86rem; line-height: 1.68; }
.impact-line { margin-top: 1rem; padding: 1rem 1.15rem; border-left: 2px solid var(--signal); background: var(--surface); color: var(--muted); font-size: .91rem; line-height: 1.65; }
.impact-line strong { color: var(--ink); }
.case-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.25rem; flex-wrap: wrap; }
.case-actions > span { color: var(--faint); font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.lab-section { margin: 5rem 0 1rem; padding: 3rem; border: 1px solid rgba(200,255,98,.35); background: linear-gradient(120deg, rgba(200,255,98,.055), transparent 55%), var(--surface); }
.lab-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: start; margin-bottom: 2rem; }
.lab-heading h2 { max-width: 650px; font-size: clamp(1.7rem, 4vw, 3rem); letter-spacing: -.05em; line-height: 1.05; }
.lab-subtitle { max-width: 620px; margin-top: .8rem; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.substack-cta { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color .18s ease; }
.substack-cta:hover { border-color: var(--signal); }
.substack-icon { color: var(--signal); font-size: 1.8rem; }
.substack-cta-text h3 { font-size: 1rem; }
.substack-cta-text p { margin-top: .25rem; color: var(--muted); font-size: .86rem; }
.contact-section { padding: 5.5rem 0 6rem; }
.contact-links { max-width: 620px; margin-top: 2.5rem; border: 1px solid var(--line); }
.contact-link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--surface); color: var(--ink); text-decoration: none; transition: background .18s ease; }
.contact-link + .contact-link { border-top: 1px solid var(--line); }
.contact-link:hover { background: var(--surface-raised); }
.contact-link-label { font-size: .9rem; font-weight: 600; }
.contact-link-handle { color: var(--muted); font-family: var(--mono); font-size: .68rem; }

@media (max-width: 760px) {
    .nav-inner, main { padding-left: 1.25rem; padding-right: 1.25rem; }
    .nav-logo { font-size: .59rem; }
    .nav-links { gap: .85rem; }
    .hero { padding-top: 5.5rem; }
    .hero h1 { letter-spacing: -.06em; }
    .hero-readout, .principles-grid, .case-grid { grid-template-columns: 1fr; }
    .hero-readout div + div, .principle-card + .principle-card, .case-block + .case-block { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
    .hero-readout div + div { padding-top: 1rem; }
    .principle-card { min-height: auto; }
    .principle-card h2, .case-block p { margin-top: 1.6rem; }
    .signal-panel, .projects-grid, .essay-list { grid-template-columns: 1fr; }
    .project-card:nth-child(2n), .essay-card + .essay-card { border-left: 0; border-top: 1px solid var(--line); }
    .project-card:nth-child(n+3) { border-top: 1px solid var(--line); }
    .project-card { min-height: 245px; }
    .project-card h3, .essay-card h3 { margin-top: 2.7rem; }
    .section-heading-row, .case-study-header, .lab-heading { display: block; }
    .section-heading-row .text-link { display: inline-block; margin-top: 1rem; }
    .case-tag { display: inline-block; margin-top: 1rem; }
    .lab-section { margin-top: 3.5rem; padding: 1.5rem; }
    .footer-inner { flex-direction: column; gap: .45rem; }
}

/* Motion layer — gated on .js-motion so no-JS and reduced-motion visitors get the static site */
.hero-field { position: absolute; z-index: -2; inset: 0; display: block; pointer-events: none; mask-image: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.65) 45%, #000 75%); }
.js-motion .hero-grid { background-image: none; }
.js-motion .hero::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(200,255,98,.07), transparent 70%); opacity: 0; transition: opacity .4s ease; }
.js-motion .hero.is-tracking::after { opacity: 1; }
.hero-invite { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; padding: .5rem .75rem; border: 1px dashed rgba(200,255,98,.35); background: rgba(11,13,12,.6); color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.hero-invite:hover { border-style: solid; border-color: var(--signal); color: var(--ink); background: rgba(200,255,98,.06); }
.hero-invite:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.hero-invite-prompt, .hero-invite-cmd { color: var(--signal); }
.hero-invite-caret { width: .5rem; height: .95rem; background: var(--signal); }
.js-motion .hero-invite-caret { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.js-motion .hero-invite { animation: rise .8s cubic-bezier(.2,.7,.2,1) .48s both; }
.js-motion .status-dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(200,255,98,0), 0 0 18px rgba(200,255,98,.9); opacity: .65; } }

.hero-ticker { max-width: 770px; margin-top: 2.2rem; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hero-ticker-track { display: flex; width: max-content; padding: .62rem 0; }
.hero-ticker span { padding-right: 2.4rem; color: var(--faint); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; white-space: nowrap; }
.hero-ticker span::before { content: '◆'; margin-right: 2.4rem; color: var(--signal); font-size: .45rem; vertical-align: middle; }
.js-motion .hero-ticker-track { animation: ticker 38s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }

.js-motion .hero .eyebrow, .js-motion .hero-meta, .js-motion .hero h1, .js-motion .hero-sub, .js-motion .hero-actions, .js-motion .hero-readout, .js-motion .hero-ticker { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.js-motion .hero-meta { animation-delay: .08s; }
.js-motion .hero h1 { animation-delay: .16s; }
.js-motion .hero-sub { animation-delay: .3s; }
.js-motion .hero-actions { animation-delay: .4s; }
.js-motion .hero-readout { animation-delay: .55s; }
.js-motion .hero-ticker { animation-delay: .7s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), background .18s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.js-motion .project-card, .js-motion .essay-card { position: relative; }
.js-motion .project-card::after, .js-motion .essay-card::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--signal); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.js-motion .project-card:hover::after, .js-motion .essay-card:hover::after { width: 100%; }

/* Hidden terminal */
.term-launch { padding: .2rem .45rem; border: 1px solid var(--line); background: transparent; color: var(--signal); font-family: var(--mono); font-size: .68rem; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.term-launch:hover { border-color: var(--signal); background: rgba(200,255,98,.08); }
.term-launch:focus-visible, .term button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.term-hint { color: var(--faint); }
.term-hint kbd { padding: 0 .3rem; border: 1px solid var(--line); color: var(--signal); font-family: var(--mono); }
.term { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(5,6,6,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.term[hidden] { display: none; }
.term.is-open { opacity: 1; }
.term-window { display: flex; flex-direction: column; width: min(760px, 100%); height: min(520px, 80vh); border: 1px solid rgba(200,255,98,.45); background: #080a09; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(200,255,98,.06), 0 0 60px rgba(200,255,98,.06); transform: translateY(10px) scale(.985); transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.term.is-open .term-window { transform: none; }
.term-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); color: var(--faint); font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; }
.term-controls { display: flex; gap: .6rem; }
.term-controls button { border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--mono); font-size: .62rem; padding: .15rem .45rem; cursor: pointer; }
.term-controls button:hover { color: var(--signal); border-color: var(--signal); }
.term-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem .4rem; font-family: var(--mono); font-size: .8rem; line-height: 1.6; color: var(--ink); }
.term-out { white-space: pre-wrap; word-break: break-word; }
.term-echo { color: var(--signal); margin-top: .5rem; }
.term-dim { color: var(--muted); }
.term-err { color: #ff8a6a; }
.term-line { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem 1rem; font-family: var(--mono); font-size: .8rem; }
.term-prompt { color: var(--signal); }
.term-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; caret-color: var(--signal); }

@media (max-width: 760px) {
    .term-body, .term-line { font-size: .74rem; }
    .term-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .term, .term-window { transition: none; }
}