@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root{
  --bg:#f7f6f2;
  --surface:#ffffff;
  --border:#e2ddd0;
  --fg:#1c1a15;
  --muted:#726c5c;
  --accent:#8a6d3b;

  --c-featured:#1f9d52;
  --c-progress:#b9822a;
  --c-failed:#c23b30;
  --c-nonprofit:#7c5cc9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e0d0b;
    --surface:#161512;
    --border:#2b2822;
    --fg:#efece2;
    --muted:#948d7a;
    --accent:#d3b273;

    --c-featured:#3ec97a;
    --c-progress:#e3ac52;
    --c-failed:#e2574c;
    --c-nonprofit:#a98be8;
  }
}
:root[data-theme="dark"]{
  --bg:#0e0d0b;
  --surface:#161512;
  --border:#2b2822;
  --fg:#efece2;
  --muted:#948d7a;
  --accent:#d3b273;

  --c-featured:#3ec97a;
  --c-progress:#e3ac52;
  --c-failed:#e2574c;
  --c-nonprofit:#a98be8;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  padding:0 20px;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--bg); }
.mono{ font-family:"JetBrains Mono", ui-monospace, monospace; }
a{ color:inherit; }

.wrap{
  max-width:680px;
  margin:0 auto;
  padding-block:44px 80px;
}

/* ---------- sub-page nav ---------- */
.subnav{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  letter-spacing:.03em;
  margin-bottom:40px;
}
.subnav a{
  text-decoration:none;
  color:var(--muted);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.subnav a:hover, .subnav a[aria-current="page"]{ color:var(--fg); border-color:var(--border); }
.subnav a[aria-current="page"]{ color:var(--accent); border-color:var(--accent); }

/* ---------- header (front page) ---------- */
header.hero{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.avatar{
  width:88px; height:88px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--fg);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:26px;
  flex:none;
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-id .name{ font-size:24px; font-weight:700; margin-bottom:4px; }
.hero-id .tagline{ font-size:13.5px; color:var(--muted); margin-bottom:10px; }
.contact{
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
}
.contact a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; }
.contact a:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- section heads ---------- */
.section-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:20px;
}
.section-head h1, .section-head h2{
  font-size:21px;
  margin:0;
  font-weight:700;
  text-wrap:balance;
}
.section-head .count{ color:var(--muted); font-weight:500; font-size:16px; }
.section-sub{
  color:var(--muted);
  font-size:13.5px;
  margin:0 0 22px;
  max-width:56ch;
}
section{ margin-bottom:56px; }
h1.page-title{ font-size:26px; margin:0 0 6px; font-weight:700; }

/* ---------- ribbon (hot projects) ---------- */
.ribbon{
  overflow:hidden;
  margin-bottom:2px;
}
.ribbon-track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:ribbon-scroll 32s linear infinite;
}
.ribbon:hover .ribbon-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .ribbon-track{ animation:none; } }
@keyframes ribbon-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.rcard{
  flex:none;
  display:inline-block;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  padding:10px 22px;
  font-size:14.5px;
  font-weight:700;
  white-space:nowrap;
  color:var(--fg);
  text-decoration:none;
}
a.rcard:hover{ border-color:var(--accent); color:var(--accent); }
.rcard.hot{ border-color:var(--accent); color:var(--accent); }

/* ---------- failure streak (donut + legend) ---------- */
.streak{
  display:flex;
  align-items:center;
  gap:12px 28px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  padding:22px 24px;
  flex-wrap:wrap;
  text-decoration:none;
  color:var(--fg);
}
.streak:hover{ border-color:var(--accent); }
.streak-go{
  width:100%;
  font-size:12px;
  color:var(--accent);
}
.donut{
  flex:none;
  width:120px; height:120px;
  border-radius:50%;
  position:relative;
}
.donut::after{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width:70px; height:70px;
  border-radius:50%;
  background:var(--surface);
}
.donut-label{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-family:"JetBrains Mono", monospace;
}
.donut-label .n{ font-size:22px; font-weight:700; line-height:1; }
.donut-label .k{ font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }
.legend{
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
  min-width:180px;
}
.legend-row{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px;
}
.legend-row .dot{ width:9px; height:9px; border-radius:2px; flex:none; }
.legend-row .v{ font-family:"JetBrains Mono", monospace; color:var(--muted); }

/* ---------- discovery cards ---------- */
.discover{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
@media (max-width:560px){ .discover{ grid-template-columns:1fr; } }
.dcard{
  display:block;
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 18px 16px;
  text-decoration:none;
  color:var(--fg);
}
.dcard:hover{ border-color:var(--accent); }
.dcard h3{ font-size:15.5px; margin:0 0 6px; font-weight:700; }
.dcard p{ font-size:12.5px; color:var(--muted); margin:0 0 10px; }
.dcard .go{ font-family:"JetBrains Mono", monospace; font-size:11.5px; color:var(--accent); }

/* ---------- project rows ---------- */
.tline{
  position:relative;
  padding-left:78px;
}
.tline::before{
  content:"";
  position:absolute;
  left:52px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--border);
}
.trow{
  position:relative;
  padding:16px 0;
  border-top:1px solid var(--border);
}
.trow:last-child{ border-bottom:1px solid var(--border); }
.tyear{
  position:absolute;
  left:-78px;
  top:18px;
  width:40px;
  text-align:right;
  font-size:12px;
  color:var(--muted);
}
.tdot{
  position:absolute;
  left:-26px;
  top:21px;
  transform:translateX(-50%);
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--border);
}
.tconnect{
  position:absolute;
  left:-26px;
  top:25px;
  width:26px;
  height:1px;
  background:var(--border);
}
.prow-line{ margin:0; font-size:15px; line-height:1.75; }
.prow-line b{ font-weight:700; }
.prow-line .status{ font-weight:700; }
.prow-line .status.failed{ color:var(--c-failed); }
.prow-line .status.nonprofit{ color:var(--c-nonprofit); }
.prow-line .status.featured{ color:var(--c-featured); }
.prow-line .status.progress{ color:var(--c-progress); }
.prow-line .plink{
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--border);
  margin-right:2px;
}
.prow-line .plink:hover{ border-color:var(--accent); color:var(--accent); }
.prow-line .psub{ font-weight:400; color:var(--muted); }
.ptags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.ptag{
  font-family:"JetBrains Mono", monospace;
  font-size:9px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:4px;
  padding:3px 7px;
  white-space:nowrap;
}
a.ptag.ptag-link{
  color:var(--accent);
  border-color:var(--accent);
  text-decoration:none;
}
a.ptag.ptag-link:hover{ background:var(--accent); color:var(--bg); }
@media (max-width:480px){
  .tline{ padding-left:56px; }
  .tline::before{ left:34px; }
  .tyear{ left:-56px; width:26px; font-size:10.5px; }
  .tdot{ left:-22px; }
}

/* ---------- hackathon photo gallery ---------- */
.photogrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
  margin-top:40px;
}
.photogrid img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  display:block;
}

/* ---------- books ---------- */
blockquote{
  margin:0 0 40px;
  padding:0 0 0 20px;
  border-left:3px solid var(--accent);
}
blockquote p{
  margin:0 0 8px;
  font-size:clamp(22px, 4vw, 28px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
}
blockquote cite{ font-style:normal; font-family:"JetBrains Mono", monospace; font-size:12.5px; color:var(--muted); }

.brow{
  display:flex;
  align-items:center;
  gap:14px;
}
.bcover{
  width:46px;
  height:66px;
  object-fit:cover;
  border-radius:4px;
  border:1px solid var(--border);
  flex:none;
}
.btitle{ font-size:15.5px; font-weight:700; }
.bauthor{ color:var(--muted); font-size:13px; margin-top:1px; }
.brow .status{ display:inline-block; margin-top:4px; font-size:11px; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--border);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
footer p{ font-size:12px; color:var(--muted); margin:0; }
.theme-toggle{
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:7px;
  padding:7px 11px;
  cursor:pointer;
}
.theme-toggle:hover{ color:var(--fg); }