/* ═══════════════════════════════════════════════════════════
   CODED NATURE — Thesis site · Landing layer
   Depends on coded-nature/tokens.css + components.css
   ═══════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ── Fullscreen magnetic sections ──────────────────── */
@media (min-width: 900px) and (min-height: 620px) {
    html { scroll-snap-type: y proximity; }
    .hero { scroll-snap-align: start; }
    main > .field {
        min-height: 100svh;
        display: flex; flex-direction: column; justify-content: center;
        scroll-snap-align: start;
    }
    .site-footer { scroll-snap-align: end; }
}

/* ── Scroll-driven section choreography ──────────────── */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        main > .field {
            animation: fieldEnter linear both, fieldExit linear both;
            animation-timeline: view(), view();
            animation-range: entry 0% entry 50%, exit 45% exit 100%;
        }
        main > .field .section-head {
            animation: headEnter linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 55%;
        }
        /* hero: content lifts away, image slowly zooms while leaving */
        .hero-inner {
            animation: heroLift linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 75%;
        }
        .hero-bg {
            animation: heroZoom linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }
        .scroll-cue {
            animation: cueFade linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 25%;
        }
    }
}
@keyframes fieldEnter {
    from { opacity: 0.15; transform: translateY(110px) scale(0.955); }
    to   { opacity: 1; transform: none; }
}
@keyframes fieldExit {
    to { opacity: 0.25; transform: translateY(-60px) scale(0.975); }
}
@keyframes headEnter {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroLift {
    to { opacity: 0; transform: translateY(-70px); }
}
@keyframes heroZoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1.22) translateY(4%); }
}
@keyframes cueFade {
    to { opacity: 0; }
}
a { color: inherit; }

.wrap { max-width: 1280px; margin: 0 auto; }

/* ── Spine / sticky nav ─────────────────────────────────── */
.spine {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s5);
    padding: var(--s4) max(var(--s5), 6vw);
    background: var(--bg-overlay);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--ink-06);
    transition: background var(--t-med) var(--fluid), border-color var(--t-med);
}
.spine.at-top {
    background: transparent;
    border-color: transparent;
    color: #fff;
}
.brand {
    display: inline-flex; align-items: center; gap: var(--s3);
    font-family: var(--font-data);
    font-size: var(--size-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}
.brand-mark {
    width: 26px; height: 26px;
    border-radius: var(--r-round);
    background: var(--accent);
    position: relative;
    flex-shrink: 0;
    transition: border-radius var(--t-med) var(--snap);
    box-shadow: 0 0 0 4px var(--accent-12);
}
.brand-mark::after {
    content: ''; position: absolute; inset: 8px;
    border-radius: var(--r-round);
    background: var(--bg-elevated);
}
.brand:hover .brand-mark { border-radius: var(--r-technical); }

.spine-nav { display: flex; align-items: center; gap: var(--s2); }
.spine-nav a {
    font-family: var(--font-data);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    opacity: 0.62;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-surface);
    transition: all var(--t-med) var(--fluid);
}
.spine-nav a:hover {
    opacity: 1;
    color: var(--accent);
    background: var(--accent-06);
    border-radius: var(--r-technical);
}
.spine.at-top .spine-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.spine-nav a.nav-cta {
    opacity: 1;
    border: 1px solid currentColor;
    color: var(--accent);
}
.spine.at-top .spine-nav a.nav-cta { color: #fff; border-color: rgba(255,255,255,0.55); }
.spine-nav a.nav-cta:hover {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
@media (max-width: 880px) {
    .spine-nav .nav-hide { display: none; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: var(--s9) max(var(--s5), 6vw) var(--s8);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hero-bg {
    position: absolute; inset: 0; z-index: -2;
    background-image: url('../assets/mycoforge.jpg');
    background-size: cover;
    background-position: 60% 42%;
    transform: scale(1.04);
}
.hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(95deg, rgba(8,8,10,0.82) 0%, rgba(8,8,10,0.5) 34%, rgba(8,8,10,0.08) 62%, rgba(8,8,10,0.22) 100%),
      linear-gradient(to top, rgba(8,8,10,0.8) 0%, rgba(8,8,10,0.12) 42%, rgba(8,8,10,0.42) 100%);
}
.hero-inner { max-width: 760px; position: relative; }
.hero-eyebrow {
    font-family: var(--font-data);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: #fff;
    display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
    margin-bottom: var(--s5);
    opacity: 0.9;
}
.hero-eyebrow .pulse {
    width: 7px; height: 7px; border-radius: var(--r-round);
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent);
    animation: pulse 2.4s var(--drift) infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,90,31,0.5); }
    70% { box-shadow: 0 0 0 10px rgba(255,90,31,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); }
}
.hero h1 {
    font-size: clamp(2.6rem, 5.4vw, 5rem);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: #fff;
    text-wrap: balance;
    margin-bottom: var(--s5);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
    max-width: 620px;
    margin-bottom: var(--s6);
    font-weight: 300;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

.btn--hero {
    background: #fff; color: var(--ink); border-color: #fff;
}
.btn--hero:hover {
    border-radius: var(--r-technical);
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}
.btn--hero-ghost {
    border-color: rgba(255,255,255,0.5); color: #fff;
}
.btn--hero-ghost:hover {
    border-radius: var(--r-technical);
    border-color: #fff; background: rgba(255,255,255,0.12);
}

.hero-meta {
    position: absolute;
    right: max(var(--s5), 6vw); bottom: var(--s8);
    display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end;
    font-family: var(--font-data);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
    text-align: right;
}
.hero-meta b { color: #fff; font-weight: 500; }
@media (max-width: 760px) { .hero-meta { display: none; } }

.scroll-cue {
    position: absolute; left: 50%; bottom: var(--s5); transform: translateX(-50%);
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    display: flex; flex-direction: column; align-items: center; gap: var(--s2);
}
.scroll-cue .line {
    width: 1px; height: 34px; background: rgba(255,255,255,0.4);
    animation: cueDrop 2s var(--drift) infinite;
    transform-origin: top;
}
@keyframes cueDrop { 0%,100% { transform: scaleY(0.4); opacity:0.3; } 50% { transform: scaleY(1); opacity:1; } }

/* ── Section scaffolding ────────────────────────────────── */
.section-head { max-width: 920px; margin-bottom: var(--s8); }
.section-head .section-id { margin-bottom: var(--s4); }
.section-head h2 {
    font-size: var(--size-title);
    font-weight: 300; letter-spacing: -0.025em; line-height: 1.1;
    margin-bottom: var(--s4); text-wrap: balance;
}
.section-head p { font-size: var(--size-body); max-width: 680px; }
.lead-big {
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    font-weight: 300; letter-spacing: -0.02em; line-height: 1.32;
    color: var(--ink); max-width: 1000px; text-wrap: balance;
}
.lead-big .muted { color: var(--ink-25); }

/* intro strip */
.field--intro { padding-top: var(--s8); padding-bottom: var(--s8); }

/* ── Two books / findings ───────────────────────────────── */
.books { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 900px) { .books { grid-template-columns: 1fr; } }
.book {
    background: var(--bg-elevated);
    border: 1px solid var(--ink-06);
    border-radius: var(--r-surface);
    padding: var(--s7);
    transition: all var(--t-med) var(--fluid);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
.book:hover { border-radius: var(--r-technical); border-color: var(--accent-25); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.book-tag {
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: var(--accent); margin-bottom: var(--s4);
    display: flex; align-items: center; gap: var(--s3);
}
.book-tag::before { content:''; width: 18px; height: 1px; background: var(--accent); }
.book h3 {
    font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 300;
    letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--s3);
}
.book .book-sub { color: var(--ink-60); margin-bottom: var(--s6); font-size: var(--size-body); }
.findings { list-style: none; display: flex; flex-direction: column; gap: var(--s5); margin-bottom: var(--s6); }
.findings li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.findings .fn {
    font-family: var(--font-data); font-size: var(--size-micro);
    color: var(--accent); padding-top: 3px; letter-spacing: var(--ls-tight);
}
.findings .ft strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.findings .ft span { color: var(--ink-60); font-size: var(--size-small); line-height: 1.5; }
.book-foot { margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--ink-06); display: flex; gap: var(--s3); flex-wrap: wrap; }

/* DDI formula chips */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s7); }
@media (max-width: 760px) { .metric-grid { grid-template-columns: 1fr; } }
.metric {
    border: 1px solid var(--ink-06); border-radius: var(--r-surface);
    padding: var(--s6); background: var(--bg-elevated);
    transition: all var(--t-med) var(--fluid);
}
.metric:hover { border-radius: var(--r-technical); border-color: var(--accent-25); }
.metric .abbr {
    font-family: var(--font-data); font-size: 1.6rem; color: var(--accent);
    letter-spacing: var(--ls-tight); margin-bottom: var(--s3);
}
.metric h4 { font-size: var(--size-body); font-weight: 500; margin-bottom: var(--s2); }
.metric p { font-size: var(--size-small); line-height: 1.5; }
.metric.is-formula { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.metric.is-formula h4 { color: var(--bg); }
.metric.is-formula p { color: rgba(255,255,255,0.6); }
.metric.is-formula .abbr { color: var(--accent); }
.metric.is-formula code {
    display: inline-block; margin-top: var(--s3);
    font-family: var(--font-data); font-size: var(--size-small);
    background: rgba(255,255,255,0.08); color: #fff;
    padding: var(--s2) var(--s3); border-radius: var(--r-technical);
}

/* ── Architecture / numbered grid ───────────────────────── */
.arch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
@media (max-width: 900px) { .arch-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .arch-grid { grid-template-columns: 1fr; } }
.arch {
    border-top: 1px solid var(--ink-12); padding-top: var(--s4);
    transition: border-color var(--t-med);
}
.arch:hover { border-color: var(--accent); }
.arch .num {
    font-family: var(--font-data); font-size: var(--size-micro);
    color: var(--ink-25); letter-spacing: var(--ls-wide); margin-bottom: var(--s4);
}
.arch h3 { font-size: var(--size-heading); font-weight: 500; margin-bottom: var(--s3); }
.arch p { font-size: var(--size-small); line-height: 1.55; }

/* ── Mycoforge components (annotated) ───────────────────── */
.components { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
@media (max-width: 760px) { .components { grid-template-columns: 1fr; } }
.comp {
    border: 1px solid var(--ink-06); border-radius: var(--r-surface);
    padding: var(--s6); background: var(--bg-elevated);
    display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
    transition: all var(--t-med) var(--fluid);
}
.comp:hover { border-radius: var(--r-technical); border-color: var(--accent-25); box-shadow: var(--shadow-md); }
.comp .comp-id {
    width: 44px; height: 44px; border-radius: var(--r-round);
    background: var(--accent-12); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
    transition: all var(--t-med) var(--fluid);
}
.comp:hover .comp-id { border-radius: var(--r-technical); background: var(--accent); color: var(--accent-ink); }
.comp .comp-kicker {
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: var(--ink-25); margin-bottom: var(--s2);
}
.comp h3 { font-size: var(--size-heading); font-weight: 500; margin-bottom: var(--s3); }
.comp p { font-size: var(--size-small); line-height: 1.55; }

/* ── Tools ──────────────────────────────────────────────── */
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
@media (max-width: 760px) { .tools-grid { grid-template-columns: 1fr; } }
.tool {
    border: 1px solid var(--ink-06); border-radius: var(--r-surface);
    padding: var(--s7); background: var(--bg-elevated);
    display: flex; flex-direction: column;
    transition: all var(--t-med) var(--fluid); position: relative; overflow: hidden;
}
.tool::before {
    content:''; position: absolute; top:0; left:0; width:100%; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-med) var(--fluid);
}
.tool:hover { border-radius: var(--r-technical); border-color: var(--accent-25); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tool:hover::before { transform: scaleX(1); }
.tool .tool-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.tool .tool-idx { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-25); }
.tool h3 { font-size: var(--size-heading); font-weight: 500; margin-bottom: var(--s3); }
.tool > p { font-size: var(--size-small); line-height: 1.55; margin-bottom: var(--s5); }
.tool dl { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-bottom: var(--s6); }
.tool dl > div { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: baseline; }
.tool dt { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); }
.tool dd { font-size: var(--size-small); color: var(--ink-60); }
.tool .tool-foot { margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--ink-06); }
.tool-link {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-family: var(--font-data); font-size: var(--size-small);
    letter-spacing: var(--ls-tight); text-transform: uppercase;
    color: var(--accent); text-decoration: none;
    transition: gap var(--t-med) var(--fluid);
}
.tool-link:hover { gap: var(--s4); }
.tool-link .ext { font-size: var(--size-small); }
.tool.is-feature { border-color: var(--accent-25); }

/* ── Claims / matrix table & parts table ────────────────── */
.matrix th:first-child, .matrix td:first-child { width: 38%; }
.matrix .td-claim { color: var(--ink); font-weight: 400; }
.notion-note {
    margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--ink-25);
}
.notion-cta {
    display: flex; align-items: center; gap: var(--s7);
    padding: var(--s8) var(--s7);
    border: 1px solid var(--ink-06);
    border-radius: 2px;
}
.notion-cta > i { font-size: 2rem; color: var(--ink-25); flex-shrink: 0; }
.notion-cta > div { display: flex; flex-direction: column; gap: var(--s4); }
.notion-cta > div > p { font-family: var(--font-data); font-size: var(--size-small); color: var(--ink-60); }

/* ── Status grid ────────────────────────────────────────── */
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
@media (max-width: 760px) { .status-grid { grid-template-columns: 1fr; } }
.status {
    border: 1px solid var(--ink-06); border-radius: var(--r-surface);
    padding: var(--s6); background: var(--bg-elevated);
    transition: all var(--t-med) var(--fluid);
}
.status:hover { border-radius: var(--r-technical); }
.status h3 { font-size: var(--size-heading); font-weight: 500; margin-bottom: var(--s5); display: flex; align-items: center; gap: var(--s3); }
.status h3 .dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--pos); }
.status.is-demo h3 .dot { background: var(--accent); }
.status.is-open h3 .dot { background: var(--warn); }
.status ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.status li { font-size: var(--size-small); color: var(--ink-60); padding-left: var(--s5); position: relative; }
.status li::before { content:'—'; position: absolute; left: 0; color: var(--ink-25); font-family: var(--font-data); }

/* ── Journal CTA band ───────────────────────────────────── */
.journal-cta {
    background: var(--ink); color: var(--bg);
    border-radius: var(--r-surface);
    padding: clamp(var(--s7), 6vw, var(--s9));
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s8); align-items: center;
}
@media (max-width: 860px) { .journal-cta { grid-template-columns: 1fr; gap: var(--s7); } }
.journal-cta .section-id { color: var(--accent); }
.journal-cta h2 { font-size: var(--size-title); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; margin: var(--s4) 0; color: var(--bg); text-wrap: balance; }
.journal-cta p { color: rgba(255,255,255,0.62); margin-bottom: var(--s6); max-width: 460px; }
.journal-cta .btn--fill { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.journal-cta .btn--fill:hover { background: #fff; border-color: #fff; color: var(--ink); }
.journal-cta .btn--ghost { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
.journal-cta .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }

/* mini node constellation */
.constellation { position: relative; aspect-ratio: 1 / 1; min-height: 240px; }
.constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cn-link { stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.cn-link.hot { stroke: var(--accent); stroke-width: 1.6; }
.cn-node { fill: rgba(255,255,255,0.85); }
.cn-node.acc { fill: var(--accent); }
.cn-node.big { }
.cn-pulse { fill: none; stroke: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
    background: var(--bg-sunken);
    border-top: 1px solid var(--ink-06);
    padding: var(--s8) max(var(--s5), 6vw) var(--s7);
}
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); margin-bottom: var(--s8); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { margin-bottom: var(--s4); }
.footer-brand p { font-size: var(--size-small); max-width: 320px; }
.footer-col h4 {
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-wide); text-transform: uppercase;
    color: var(--ink-25); margin-bottom: var(--s4);
}
.footer-col a {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--size-small); color: var(--ink-60); text-decoration: none;
    padding: var(--s2) 0; transition: color var(--t-fast), gap var(--t-med) var(--fluid);
}
.footer-col a:hover { color: var(--accent); gap: var(--s3); }
.footer-bot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    padding-top: var(--s5); border-top: 1px solid var(--ink-06); flex-wrap: wrap;
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--ink-25);
}