:root{
  --ink:#0E1020; --ink2:#15182B; --ink3:#1B1F36; --line:#282D49;
  --paper:#ECEAF6; --muted:#9EA0BE; --faint:#71748f;
  --amber:#F5A524; --amber-soft:#FBBF24; --loop:#7C8AF5; --red:#E06C6C;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;letter-spacing:.005em}
a{color:inherit}
::selection{background:rgba(245,165,36,.28)}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:0 0 18px}
h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;letter-spacing:-.01em;line-height:1.1}
h1{font-size:clamp(2.35rem,6.2vw,3.9rem);margin:0 0 22px}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 18px}
p{margin:0 0 18px;max-width:62ch}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:#D5D3E6}
.muted{color:var(--muted)}

/* top bar */
header.bar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(14,16,32,.82);backdrop-filter:blur(10px)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px 1px rgba(245,165,36,.55)}
.bar nav{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;display:flex;gap:22px}
.bar nav a{color:var(--muted);text-decoration:none}
.bar nav a:hover{color:var(--paper)}

/* hero */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,84px)}
.hero .wrap{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hero-copy{min-width:0}
.hero h1 span{color:var(--amber-soft)}

/* buttons + form */
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;max-width:460px}
.cta input{flex:1 1 220px;min-width:0;background:var(--ink2);border:1px solid var(--line);color:var(--paper);
  font-family:var(--sans);font-size:1rem;padding:14px 16px;border-radius:10px}
.cta input::placeholder{color:var(--faint)}
.cta input:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-color:transparent}
.btn{background:var(--amber);color:#241708;border:none;cursor:pointer;font-family:var(--mono);font-weight:600;
  font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;padding:14px 20px;border-radius:10px;white-space:nowrap;
  transition:transform .12s ease,background .12s ease}
.btn:hover{background:var(--amber-soft);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.cta-note{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-top:12px;letter-spacing:.03em}
.formmsg{font-family:var(--mono);font-size:.78rem;color:var(--red);margin-top:12px;min-height:1em}
.ok{max-width:460px;margin-top:20px;padding:20px 22px;background:var(--ink2);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:12px}
.ok .check{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--amber);color:#241708;font-family:var(--mono);font-weight:700;font-size:.9rem;margin-bottom:12px}
.ok strong{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--paper);margin-bottom:6px}
.ok .sub{color:var(--muted);font-size:.95rem;line-height:1.55}

/* loop signature */
.loop{position:relative;width:210px;height:210px;flex:0 0 auto}
.loop svg{display:block}
.orbit{position:absolute;inset:0;animation:spin 7s linear infinite}
.spark{position:absolute;top:8px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--loop);box-shadow:0 0 10px 2px rgba(124,138,245,.7)}
.loop .cap{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
@keyframes spin{to{transform:rotate(360deg)}}

/* sections */
section{padding:clamp(44px,6vw,74px) 0;border-top:1px solid var(--line)}
.approach p{color:#CFCDE2}

/* field notes ledger */
.ledger{background:var(--ink2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ledger-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ledger-grid{display:grid;grid-template-columns:1fr 1fr}
.col{padding:24px 22px}
.col + .col{border-left:1px solid var(--line)}
.col h3{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.col.works h3{color:var(--amber)}
.col.breaks h3{color:var(--red)}
.col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.col li{font-size:.96rem;line-height:1.5;color:#CFCDE2;padding-left:20px;position:relative}
.col li::before{position:absolute;left:0;top:.05em;font-family:var(--mono)}
.col.works li::before{content:"+";color:var(--amber)}
.col.breaks li::before{content:"\2013";color:var(--red)}

/* follow chips */
.follow-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;color:var(--paper);background:var(--ink2);
  transition:border-color .12s ease,transform .12s ease}
.chip:hover{border-color:var(--amber);transform:translateY(-1px)}
.chip .h{color:var(--muted)}
.chip.soon{color:var(--faint);border-style:dashed}

.signup{background:var(--ink3)}

/* built teaser (home) */
.built-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.built-row{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.built-row:first-child{border-top:none}
.built-row .nm{font-family:var(--serif);font-size:1.12rem;color:var(--paper);flex:0 0 auto;min-width:180px}
.built-row .ds{color:var(--muted);font-size:.95rem}
.textlink{color:var(--amber-soft);font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid rgba(251,191,36,.3)}
.textlink:hover{border-color:var(--amber-soft)}

/* work page: project cards */
.projects{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:1.2rem;margin:0}
.card .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.card p{margin:0;font-size:.96rem;color:#CFCDE2}
.card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.card a.gh{font-family:var(--mono);font-size:.74rem;color:var(--loop);text-decoration:none;margin-top:auto}
.card a.gh:hover{color:var(--amber-soft)}

/* work page: timeline + edu + skills */
.timeline{display:flex;flex-direction:column;gap:0;margin-top:8px}
.tl{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.tl:first-child{border-top:none}
.tl .when{font-family:var(--mono);font-size:.76rem;color:var(--faint);letter-spacing:.03em;padding-top:3px}
.tl .role{font-family:var(--serif);font-size:1.08rem;color:var(--paper)}
.tl .org{color:var(--muted);font-size:.92rem}
.skillgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.skillgroup h3{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin:0 0 12px}
.skillgroup .tags{display:flex;flex-wrap:wrap;gap:7px}

footer{border-top:1px solid var(--line);padding:34px 0 46px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--faint)}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--paper)}

@media (max-width:680px){
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .loop{order:-1;width:150px;height:150px}
  .ledger-grid,.projects,.skillgrid{grid-template-columns:1fr}
  .col + .col{border-left:none;border-top:1px solid var(--line)}
  .built-row{flex-direction:column;gap:4px}
  .built-row .nm{min-width:0}
  .tl{grid-template-columns:1fr;gap:4px}
  .bar nav{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .orbit{animation:none}
  .btn,.chip{transition:none}
  html{scroll-behavior:auto}
}