@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper:#F7F5F0;
  --ink:#1C1B19;
  --muted:#847A6C;
  --accent:#B33A1F;
  --accent-soft:#F0E2DA;
  --line:#DFDACD;
  --sidebar-w:250px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:#fff;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'JetBrains Mono',monospace;}
.serif{font-family:'Fraunces',serif;}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- Layout shell ---------- */
.shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  padding:44px 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:sticky;
  top:0;
  height:100vh;
  border-right:1px solid var(--line);
}
.mark{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:26px;
}
.avatar-wrap{
  position:relative;
  width:42px;
  height:42px;
  margin-bottom:14px;
}
.avatar{
  width:100%; height:100%; border-radius:50%;
  overflow:hidden;
  background:linear-gradient(155deg,var(--accent),#D97E64);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:17px;
}
.status-dot{
  position:absolute;
  bottom:-1px; right:-1px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--muted);
  border:2.5px solid var(--paper);
  opacity:0;
  transition:opacity .3s ease, background .3s ease;
}
.topbar .avatar-wrap{ width:30px; height:30px; margin-bottom:0; }
.topbar .avatar{ font-size:13px; }
.topbar .status-dot{ width:10px; height:10px; }
.topbar-id{ display:flex; align-items:center; gap:9px; }
.tag-line{
  margin-top:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.side-nav{
  margin-top:56px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.side-nav a{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 0;
  font-size:15px;
  color:var(--muted);
  border-bottom:1px solid transparent;
}
.side-nav a .n{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--line);
}
.side-nav a:hover{ color:var(--ink); }
.side-nav a:hover .n{ color:var(--accent); }
.side-nav a.active{ color:var(--ink); }
.side-nav a.active .n{ color:var(--accent); }

.side-foot{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
}
.side-foot a{
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.side-foot a:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Mobile top bar (hidden on desktop) ---------- */
.topbar{ display:none; }

/* ---------- Main ---------- */
main{
  flex:1;
  min-width:0;
  padding:64px 56px 90px;
  max-width:760px;
}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}

/* ---------- Home hero ---------- */
.lede{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(28px,3.6vw,38px);
  line-height:1.28;
  letter-spacing:-.01em;
  max-width:22ch;
}
.lede em{
  font-style:italic;
  color:var(--accent);
}
.sub-copy{
  margin-top:26px;
  max-width:56ch;
  color:var(--ink);
  font-size:16px;
}
.sub-copy + .sub-copy{ margin-top:14px; }

.tags-line{
  margin-top:28px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--muted);
  letter-spacing:.02em;
}
.tags-line b{
  color:var(--ink);
  font-weight:500;
}

/* ---------- Ticker ---------- */
.ticker-shell{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  margin:44px 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:scroll 32s linear infinite;
}
.ticker-track span{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:12px 24px;
  white-space:nowrap;
  border-right:1px solid var(--line);
}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
}

/* ---------- Entry list (used for projects + "currently") ---------- */
.entry{
  padding:30px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:44px 1fr;
  gap:20px;
}
.entry:last-child{ padding-bottom:0; }
.entry-list{ border-bottom:1px solid var(--line); }
.entry .idx{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--muted);
  padding-top:4px;
}
.entry h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:23px;
  margin:0 0 8px;
}
.entry p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:14.5px;
  max-width:52ch;
}
.entry .status{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-left:10px;
}
.entry .go{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.entry a.go:hover{ border-color:var(--accent); color:var(--accent); }

.continue-link{
  margin-top:28px;
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--accent);
  border-bottom:1px solid var(--accent-soft);
  padding-bottom:2px;
}
.continue-link:hover{ border-color:var(--accent); }

/* ---------- Page head (projects / connect) ---------- */
.page-head{ margin-bottom:12px; }
.page-head h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(34px,5vw,46px);
  margin:0;
}
.page-head p{
  margin:14px 0 0;
  color:var(--muted);
  font-size:15.5px;
  max-width:50ch;
}

/* ---------- Directory list (connect page) ---------- */
.directory{ margin-top:40px; }
.dir-row{
  display:grid;
  grid-template-columns:32px 24px 1fr auto;
  align-items:center;
  gap:16px;
  padding:18px 0;
  border-top:1px solid var(--line);
  transition:background .15s ease;
}
.directory .dir-row:last-child{ border-bottom:1px solid var(--line); }
.dir-row .idx{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--muted);
}
.dir-row .icon{
  width:22px;
  height:22px;
  color:var(--muted);
  flex-shrink:0;
  transition:color .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dir-row .icon svg{
  width:100%;
  height:100%;
  display:block;
}
.dir-row:hover .icon{ color:var(--accent); }
.dir-row .name{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:19px;
  align-self:baseline;
}
.dir-row .handle{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--muted);
  margin-left:12px;
}
.live-status{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-left:8px;
  opacity:0;
  transition:opacity .3s ease;
}
.dir-row .arrow{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--line);
  transition:transform .15s ease, color .15s ease;
}
.dir-row:hover{ background:rgba(179,58,31,.035); }
.dir-row:hover .arrow{ color:var(--accent); transform:translateX(3px); }
.dir-row:hover .name{ color:var(--accent); }

/* ---------- Sign-off ---------- */
.signoff{
  margin-top:56px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.signoff .lede{ font-size:clamp(22px,3vw,28px); max-width:26ch; }
.signoff a.mail{
  margin-top:20px;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  color:var(--accent);
  border-bottom:1px solid var(--accent-soft);
  padding-bottom:3px;
}
.signoff a.mail:hover{ border-color:var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .shell{ flex-direction:column; }
  .sidebar{ display:none; }
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:var(--paper);
    z-index:10;
  }
  .topbar .mark{ font-size:20px; }
  .topbar nav{
    display:flex;
    gap:16px;
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .topbar nav a{ color:var(--muted); }
  .topbar nav a.active{ color:var(--accent); }
  main{ padding:44px 24px 70px; max-width:100%; }
  .entry{ grid-template-columns:30px 1fr; gap:14px; }
  .dir-row{ grid-template-columns:24px 20px 1fr auto; gap:10px; }
  .dir-row .icon{ width:19px; height:19px; }
  .dir-row .handle{ display:none; }
}