:root{
  --bg:#071015;
  --panel:#0c171d;
  --panel2:#0f1d25;
  --line:#1d313b;
  --text:#e8f1f4;
  --muted:#8ea2ad;
  --accent:#77e3b4;
  --accent2:#8fb9ff;
  --max:1180px;
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 70% 0%, rgba(51,102,126,.18), transparent 38%),
    radial-gradient(circle at 10% 20%, rgba(73,151,112,.09), transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.page-grid{
  position:fixed;inset:0;pointer-events:none;opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(to bottom, #000, transparent 75%);
}
.shell{width:min(var(--max), calc(100% - 40px));margin-inline:auto}
.site-header{
  width:min(var(--max), calc(100% - 40px));margin:0 auto;
  min-height:78px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);position:relative;z-index:10;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.09em;font-size:.84rem}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--accent);
  color:var(--accent);font-size:.72rem;border-radius:10px;background:rgba(119,227,180,.04)
}
.site-nav{display:flex;gap:28px;color:var(--muted);font-size:.9rem}
.site-nav a:hover,.text-link:hover{color:var(--accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:8px 11px}
.hero{padding:110px 0 90px;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.eyebrow,.kicker{font:700 .75rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--accent)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(3.4rem,7vw,6.5rem);line-height:.94;letter-spacing:-.055em;margin-bottom:28px}
h1 span{color:var(--accent)}
h2{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.04;letter-spacing:-.04em}
h3{font-size:1.4rem;letter-spacing:-.02em}
.hero-copy{font-size:1.1rem;color:#a9bbc4;max-width:720px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:10px;font-weight:750;font-size:.88rem}
.btn-primary{background:var(--accent);color:#06100d}
.btn-secondary{border:1px solid var(--line);background:rgba(255,255,255,.02)}
.terminal-card,.feature-project,.project-card,.about-card,.stack-card,.honey-panel,.honesty-card{
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(18,34,42,.9),rgba(8,19,24,.92));
  border-radius:var(--radius);box-shadow:0 18px 60px rgba(0,0,0,.22)
}
.terminal-card{padding:18px;overflow:hidden}
.terminal-topline{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;color:var(--muted);font:700 .7rem ui-monospace,monospace;letter-spacing:.1em}
.status-dot{color:var(--accent)}
.status-dot i{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:6px;box-shadow:0 0 12px var(--accent)}
pre{margin:18px 0 0;white-space:pre-wrap;color:#b8c9d1;font-size:.9rem}
pre span{color:var(--accent)}
.section{padding:90px 0}
.section-heading{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:end;margin-bottom:34px}
.section-heading>p{color:var(--muted);max-width:560px;justify-self:end}
.feature-project{padding:30px}
.project-meta{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:.8rem;margin-bottom:36px}
.pill{display:inline-block;padding:5px 9px;border:1px solid rgba(119,227,180,.35);border-radius:999px;color:var(--accent);font:700 .68rem ui-monospace,monospace;letter-spacing:.08em}
.pill.subtle{color:var(--muted);border-color:var(--line)}
.feature-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px}
.feature-grid h3{font-size:3rem;margin-bottom:16px}
.project-lede{font-size:1.08rem;color:#a9bbc4;max-width:680px}
.project-actions{display:flex;gap:24px;margin-top:24px}
.text-link{font-weight:750;color:var(--accent)}
.project-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.project-stats div,.honey-grid div{padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018)}
.project-stats span,.honey-grid span{display:block;color:var(--muted);font:700 .65rem ui-monospace,monospace;letter-spacing:.09em;margin-bottom:4px}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.project-grid.three{grid-template-columns:repeat(3,1fr)}
.project-card{padding:26px}
.project-card p{color:var(--muted)}
.card-index{font:700 .72rem ui-monospace,monospace;color:var(--accent)!important;letter-spacing:.12em}
.timeline{border-top:1px solid var(--line)}
.timeline-item{display:grid;grid-template-columns:160px 1fr;gap:34px;padding:28px 0;border-bottom:1px solid var(--line)}
.timeline-date{font:700 .72rem ui-monospace,monospace;letter-spacing:.09em;color:var(--accent)}
.timeline-item p{color:var(--muted);margin-bottom:0;max-width:760px}
.mission-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.mission-grid p{color:#a9bbc4}
.about-section{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.about-card,.stack-card{padding:30px}
.about-card p{color:#a9bbc4}
.stack-list{display:flex;flex-wrap:wrap;gap:10px}
.stack-list span{padding:8px 11px;border:1px solid var(--line);border-radius:9px;color:#b8c8cf;font-size:.85rem}
.site-footer{border-top:1px solid var(--line);padding:34px 0 44px;display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:start;color:var(--muted)}
.site-footer p{margin:6px 0 0}
.footer-links{display:flex;gap:20px}
.project-hero{padding:100px 0 60px}
.project-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.project-subtitle{font-size:1.3rem;color:var(--accent);max-width:620px}
.honey-panel{padding:28px;text-align:center}
.honey-face{font:700 3.3rem ui-monospace,monospace;margin:16px 0}
.honey-state{font:800 .85rem ui-monospace,monospace;color:var(--accent);letter-spacing:.13em}
.honey-panel>p{color:#b8c8cf}
.honey-panel>small{display:block;color:var(--muted);margin-top:18px}
.honey-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin-top:20px}
.architecture{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.architecture-flow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0;flex-wrap:wrap}
.arch-node{flex:1;min-width:170px;border:1px solid var(--line);padding:20px;border-radius:12px;background:var(--panel);font-weight:800}
.arch-node small{color:var(--muted);font-weight:500}
.architecture-note{color:var(--muted);max-width:780px}
.roadmap{display:grid;gap:10px}
.roadmap-item{display:grid;grid-template-columns:90px 1fr;gap:18px;border:1px solid var(--line);border-radius:12px;padding:18px;background:rgba(255,255,255,.015)}
.roadmap-item>span{font:800 .8rem ui-monospace,monospace;color:var(--muted)}
.roadmap-item p{color:var(--muted);margin:4px 0 0}
.roadmap-item.current{border-color:rgba(119,227,180,.55);box-shadow:inset 3px 0 0 var(--accent)}
.roadmap-item.current>span,.roadmap-item.done>span{color:var(--accent)}
.honesty-card{padding:34px!important;margin-top:40px;margin-bottom:80px}
.honesty-card p:last-child{color:#a9bbc4;max-width:820px}
@media(max-width:850px){
  .site-nav{display:none;position:absolute;top:68px;right:0;flex-direction:column;background:var(--panel);border:1px solid var(--line);padding:16px;border-radius:12px}
  .site-nav.open{display:flex}
  .nav-toggle{display:block}
  .hero,.feature-grid,.section-heading,.mission-grid,.about-section,.project-hero-grid{grid-template-columns:1fr}
  .hero{padding-top:70px}
  .section-heading>p{justify-self:start}
  .project-grid,.project-grid.three{grid-template-columns:1fr}
  .site-footer{grid-template-columns:1fr}
}
@media(max-width:560px){
  .shell,.site-header{width:min(100% - 24px,var(--max))}
  h1{font-size:3.2rem}
  .project-stats,.honey-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr;gap:8px}
  .architecture-flow>span{display:none}
}


/* Family page */
.family-hero{padding:105px 0 45px;max-width:980px}
.family-hero h1{max-width:900px}
.family-feature{
  display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:center;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(18,34,42,.92),rgba(8,19,24,.95));
  border-radius:var(--radius);padding:42px
}
.family-feature p:last-child{color:#a9bbc4;max-width:720px}
.family-symbol{
  width:180px;height:180px;border-radius:50%;display:grid;place-items:center;
  justify-self:center;font-size:4rem;color:var(--accent);
  border:1px solid rgba(119,227,180,.32);
  background:radial-gradient(circle,rgba(119,227,180,.09),transparent 68%);
  box-shadow:0 0 70px rgba(119,227,180,.08)
}
.family-card{min-height:260px}
.family-note{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:70px
}
.family-note blockquote{
  margin:20px 0 24px;padding-left:24px;border-left:3px solid var(--accent);
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.25;letter-spacing:-.03em;
  max-width:900px
}
.family-note>p:last-child{color:var(--muted);max-width:780px}
@media(max-width:850px){
  .family-feature{grid-template-columns:1fr}
  .family-symbol{justify-self:start;width:120px;height:120px}
}


.family-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.pets-section{border-top:1px solid var(--line)}
.pet-card h3{color:var(--accent)}
@media(max-width:850px){
  .family-grid{grid-template-columns:1fr}
}

.wife-card{
  border-color:rgba(119,227,180,.45);
  box-shadow:inset 3px 0 0 rgba(119,227,180,.7), 0 18px 60px rgba(0,0,0,.18);
}


/* V3 portfolio depth */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:6px;
}
.project-card-link{
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.project-card-link:hover{
  transform:translateY(-3px);
  border-color:rgba(119,227,180,.4);
  background:linear-gradient(180deg,rgba(20,39,48,.96),rgba(9,21,27,.96));
}
.card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}
.principles-section{border-top:1px solid var(--line)}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.principle-card,.scenario-grid article,.evidence-grid article,.research-status{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,34,42,.82),rgba(8,19,24,.9));
  padding:24px;
}
.principle-card>span,.evidence-grid article>span{
  color:var(--accent);
  font:700 .7rem ui-monospace,monospace;
  letter-spacing:.1em;
}
.principle-card h3{margin:14px 0 8px}
.principle-card p,.scenario-grid p,.evidence-grid p{color:var(--muted);margin-bottom:0}
.research-status{display:grid;gap:0}
.research-status>.kicker{margin-bottom:14px}
.status-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.status-row strong{color:var(--text);text-align:right}
.scenario-grid,.evidence-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.scenario-grid article strong,.evidence-grid article strong{display:block;margin-bottom:8px}
@media(max-width:850px){
  .principles-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .principles-grid,.scenario-grid,.evidence-grid{grid-template-columns:1fr}
}