@font-face { font-family: "Outfit"; src: url("fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root, [data-theme="navy"] { --bg:#1E2A44; --panel:#27365A; --ink:#F6F8F1; --muted:#B4BFD3; --labs:#F2C94C; --link:#F2C94C; --glass:#EEF5E4; --rule:#34456B; }
[data-theme="forest"] { --bg:#12352B; --panel:#1B4638; --ink:#F6F8F1; --muted:#B5CDBF; --labs:#F2C94C; --link:#F2C94C; --glass:#EEF5E4; --rule:#24574A; }
[data-theme="light"] { --bg:#F6F8F1; --panel:#E4EDD9; --ink:#15302A; --muted:#56635C; --labs:#2F7D4A; --link:#1F6B47; --glass:#2F7D4A; --rule:#D5E2C6; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Outfit",system-ui,sans-serif; font-size:1.125rem; line-height:1.6; font-weight:400; }
a { color:var(--link); text-decoration-thickness:2px; text-underline-offset:3px; }
a:focus-visible { outline:3px solid #F2C94C; outline-offset:3px; border-radius:4px; }
.wrap { max-width:68rem; margin:0 auto; padding:0 1.5rem; }
header { padding:1.5rem 0; }
header .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-weight:600; font-size:1.3rem; letter-spacing:-0.01em; }
.brand img { width:2.2rem; height:2.2rem; }
nav a { font-size:1rem; margin-left:1.25rem; text-decoration:none; color:var(--muted); }
nav a:hover { color:var(--ink); text-decoration:underline; }
.hero { padding:2.5rem 0 4rem; }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:2rem; }
.hero h1 { margin:0; font-size:clamp(4rem,12vw,9rem); line-height:.9; font-weight:600; letter-spacing:-0.03em; }
.hero h1 span { display:block; margin-top:1rem; padding-left:.3rem; font-size:clamp(1.1rem,2.2vw,1.6rem); font-weight:500; letter-spacing:.42em; color:var(--labs); line-height:1; }
.lede { max-width:30rem; margin:2rem 0 0; font-size:1.375rem; line-height:1.45; font-weight:300; }
.plant { width:100%; max-width:26rem; justify-self:center; overflow:visible; }
.plant .body { transform-box:fill-box; transform-origin:50% 100%; animation:grow 1s cubic-bezier(.2,.8,.2,1) both; }
.plant .spark { transform-box:fill-box; transform-origin:center; animation:pop .5s .9s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes grow { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
@keyframes pop { from { transform:scale(0); } to { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .plant .body, .plant .spark { animation:none; } }
section { padding:3.5rem 0; }
h2 { margin:0 0 1rem; font-size:2.25rem; line-height:1.1; letter-spacing:-0.02em; font-weight:600; }
.app { background:var(--panel); border-radius:2rem; padding:2.5rem; display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center; }
.app-icon { width:6rem; height:6rem; }
.app h3 { margin:0; font-size:1.75rem; font-weight:600; letter-spacing:-0.01em; }
.app p { margin:.5rem 0 0; max-width:36rem; font-weight:300; }
.status { display:inline-block; margin-top:1rem; padding:.2rem .85rem; border-radius:999px; background:#F2C94C; color:#1E2A44; font-size:.95rem; font-weight:500; }
.about p { max-width:38rem; margin:0 0 1rem; font-weight:300; }
.contact dl { display:grid; grid-template-columns:max-content 1fr; gap:.5rem 2rem; margin:0; }
.contact dt { color:var(--muted); } .contact dd { margin:0; }
footer { padding:2.5rem 0 3rem; font-size:.95rem; color:var(--muted); }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border-top:2px solid var(--rule); padding-top:1.5rem; }
footer a { color:var(--muted); }
.doc { max-width:44rem; } .doc h1 { font-size:2.75rem; line-height:1.05; letter-spacing:-0.03em; font-weight:600; margin:2rem 0 .5rem; }
.doc .updated { color:var(--muted); margin:0 0 2rem; } .doc h2 { font-size:1.35rem; margin:2.25rem 0 .5rem; letter-spacing:0; }
.doc p, .doc li { max-width:40rem; font-weight:300; } .doc ul { padding-left:1.25rem; }
@media (max-width:760px) {
  .hero { padding-top:1rem; } .hero .wrap { grid-template-columns:1fr; }
  .plant { max-width:15rem; grid-row:1; }
  .app { grid-template-columns:1fr; padding:1.75rem; border-radius:1.5rem; }
  nav a { margin-left:.9rem; }
  .contact dl { grid-template-columns:1fr; gap:0; } .contact dd { margin-bottom:.9rem; }
}