:root {
  --ink: #0b1111;
  --panel: #111b1a;
  --paper: #e9eee8;
  --muted: #9aaba6;
  --line: #29413c;
  --mint: #63c6ac;
  --acid: #c6df7b;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  --sans: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  min-height: 72px; padding: 0 4vw;
  background: rgba(11, 17, 17, .9); border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.identity { display: flex; gap: 12px; align-items: center; width: fit-content; font: 700 11px var(--mono); letter-spacing: .12em; }
.sigil { display: grid; width: 34px; height: 34px; place-items: center; color: var(--ink); background: var(--acid); border-radius: 50%; }
.goal-nav { justify-self: center; display: flex; gap: 26px; }
.goal-nav a { padding: 10px 0; color: var(--muted); border-bottom: 1px solid transparent; font-size: 12px; }
.goal-nav a:hover { color: var(--paper); border-bottom-color: var(--mint); }
.project-switcher { display: flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; }
.project-switcher a, .project-switcher span { display: grid; min-width: 36px; height: 30px; padding: 0 10px; place-items: center; border-radius: 999px; font: 700 11px var(--mono); }
.project-switcher a:hover, .project-switcher .active { color: var(--ink); background: var(--mint); }
.project-switcher span { color: #71837e; border: 1px dashed #38514b; }

.hero {
  position: relative; display: grid; grid-template-columns: 1.15fr .85fr; min-height: 760px;
  padding: 11vw 7vw 7vw; overflow: hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(99,198,172,.12), transparent 28%),
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: auto, 5vw 5vw, 5vw 5vw;
}
.coordinate { position: absolute; top: 100px; right: 7vw; color: #50645f; font: 10px var(--mono); letter-spacing: .18em; writing-mode: vertical-rl; }
.hero-copy { align-self: center; max-width: 850px; }
.eyebrow, .section-index { color: var(--mint); font: 11px var(--mono); letter-spacing: .16em; }
h1 { margin: 24px 0 30px; font-size: clamp(56px, 7vw, 112px); font-weight: 500; line-height: .96; letter-spacing: -.055em; }
h1 span { color: var(--acid); }
.lede { max-width: 750px; color: #bdc9c5; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.9; }
.portfolio-status { display: flex; gap: 10px; margin-top: 42px; }
.portfolio-status span { padding: 11px 14px; color: #82948e; border: 1px solid var(--line); font: 9px var(--mono); letter-spacing: .12em; }
.portfolio-status b { margin-right: 7px; color: var(--acid); font-size: 13px; }
.kernel { align-self: end; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: rgba(10,16,16,.72); }
.kernel div { min-height: 180px; padding: 28px; border: 1px solid var(--line); }
.kernel b { color: #536a64; font: 11px var(--mono); }
.kernel span { display: block; margin: 18px 0 10px; color: var(--acid); font-size: 20px; }
.kernel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.manifesto, .branches, .boundary { padding: 110px 7vw; border-top: 1px solid var(--line); }
.manifesto { display: grid; grid-template-columns: .3fr .7fr; gap: 70px; background: #0e1716; }
.manifesto > div:nth-child(2) h2, .branch-heading h2, .boundary h2 { margin: 0; font-size: clamp(34px, 4vw, 66px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.manifesto > div:nth-child(2) p { max-width: 850px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.axioms { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.axioms article { min-height: 210px; padding: 30px; border: 1px solid var(--line); }
.axioms span, .branch small { color: var(--mint); font: 10px var(--mono); letter-spacing: .12em; }
.axioms h3 { margin: 30px 0 12px; font-size: 20px; }
.axioms p { margin: 0; color: var(--muted); line-height: 1.7; }

.branches { background: #dfe6df; color: #101817; }
.branch-heading { display: flex; justify-content: space-between; gap: 60px; align-items: end; margin-bottom: 55px; }
.branch-heading p { max-width: 520px; color: #50605c; line-height: 1.8; }
.branch-grid, .reserve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.branch { display: flex; flex-direction: column; min-height: 520px; padding: 30px; border: 1px solid #aab9b4; background: rgba(255,255,255,.35); transition: transform .2s, background .2s; }
.branch:hover { transform: translateY(-6px); background: white; }
.branch-no { color: #8b9a95; font: 700 56px var(--mono); }
.branch div { margin: auto 0; }
.branch h3 { margin: 12px 0; font-size: 30px; }
.branch p { color: #61716c; line-height: 1.7; }
.branch ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 34px; padding: 0; list-style: none; }
.branch li { padding: 7px 9px; color: #50605c; border: 1px solid #bdc9c5; font: 9px var(--mono); letter-spacing: .04em; }
.branch b { font: 12px var(--mono); letter-spacing: .1em; }
.branch-01 { border-top: 5px solid #3d7569; }
.branch-02 { border-top: 5px solid var(--mint); }
.branch-03 { border-top: 5px solid #8a9d45; }
.capacity-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin: 72px 0 22px; padding-top: 28px; border-top: 1px solid #b6c4bf; }
.capacity-heading span { color: #52635e; font: 10px var(--mono); letter-spacing: .14em; }
.capacity-heading p { max-width: 600px; margin: 0; color: #61716c; font-size: 13px; line-height: 1.7; }
.reserve-grid article { min-height: 170px; padding: 25px; color: #61716c; border: 1px dashed #9caca7; background: rgba(255,255,255,.2); }
.reserve-grid span { display: block; color: #99a7a2; font: 700 28px var(--mono); }
.reserve-grid strong { display: block; margin-top: 22px; font: 10px var(--mono); letter-spacing: .14em; }
.reserve-grid p { margin: 8px 0 0; font-size: 12px; }

.boundary { display: grid; grid-template-columns: .3fr .7fr; gap: 30px 70px; }
.boundary h2, .boundary p, .boundary a { grid-column: 2; }
.boundary p { max-width: 900px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.boundary a { width: fit-content; color: var(--acid); font: 12px var(--mono); letter-spacing: .08em; border-bottom: 1px solid var(--acid); padding-bottom: 6px; }
footer { display: flex; justify-content: space-between; padding: 30px 7vw; color: #71837e; border-top: 1px solid var(--line); font: 10px var(--mono); letter-spacing: .12em; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .goal-nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 70px; padding-top: 130px; }
  .kernel { align-self: auto; }
  .manifesto, .boundary { grid-template-columns: 1fr; gap: 35px; }
  .axioms { grid-template-columns: 1fr 1fr; }
  .boundary h2, .boundary p, .boundary a { grid-column: 1; }
  .branch-grid { grid-template-columns: 1fr; }
  .branch { min-height: 300px; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 18px; }
  .identity span:last-child { display: none; }
  .project-switcher a, .project-switcher span { min-width: 29px; height: 28px; padding: 0 7px; font-size: 9px; }
  .project-switcher a:first-child { min-width: 42px; }
  .hero, .manifesto, .branches, .boundary { padding-left: 22px; padding-right: 22px; }
  .hero { min-height: auto; padding-top: 110px; }
  h1 { font-size: 50px; }
  .kernel, .axioms { grid-template-columns: 1fr; }
  .kernel div { min-height: 145px; }
  .branch-heading { display: block; }
  .portfolio-status { align-items: flex-start; flex-direction: column; }
  .capacity-heading { display: block; }
  .capacity-heading p { margin-top: 12px; }
  .reserve-grid { grid-template-columns: 1fr; }
  footer { gap: 20px; flex-direction: column; padding: 28px 22px; }
}