:root{
  --ink:#141414;
  --muted:#8a8a8a;
  --rule:#e6e4e0;
  --bg:#fbfaf8;
  --col:640px;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e9e7e3; --muted:#8b8b8b; --rule:#2a2a2a; --bg:#111110; }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:var(--col);
  margin:0 auto;
  padding:88px 24px 120px;
}
@media (max-width:640px){
  .page{ padding:56px 20px 80px; }
  body{ font-size:16px; }
}

/* ---------- intro ---------- */
.intro p{ margin:0 0 20px; }
.intro .signoff{ margin-bottom:44px; }
.intro .ps{ margin-bottom:0; }

.intro p{
  opacity:0;
  transform:translateY(8px);
  filter:blur(4px);
  animation:intro-in 500ms cubic-bezier(0.23,1,0.32,1) forwards;
}
.intro p:nth-of-type(1){ animation-delay:0ms; }
.intro p:nth-of-type(2){ animation-delay:60ms; }
.intro p:nth-of-type(3){ animation-delay:120ms; }
.intro p:nth-of-type(4){ animation-delay:180ms; }
.intro p:nth-of-type(5){ animation-delay:240ms; }
.intro p:nth-of-type(6){ animation-delay:300ms; }

@keyframes intro-in{
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
}

a{ color:inherit; font-weight:600; text-decoration:none; border-bottom:1px solid var(--rule); }
a:hover{ border-bottom-color:currentColor; }
a:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }
strong{ font-weight:600; }

/* ---------- timeline ---------- */
.work{ margin-top:52px; }

.row{
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
  border-top:0;
  font-weight:400;
}
.row:first-child{ border-top:1px solid var(--rule); }
a.row{ text-decoration:none; color:inherit; }
a.row:hover{ background:rgba(0,0,0,.025); }
@media (prefers-color-scheme: dark){
  a.row:hover{ background:rgba(255,255,255,.04); }
}

.year{
  flex:0 0 46px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.body{ flex:1 1 auto; min-width:0; }
.title{ font-weight:600; }
.desc{ color:var(--muted); }
.sticker{
  flex:0 0 40px;
  width:40px;
  height:40px;
  object-fit:contain;
  margin-top:2px;
}
@media (max-width:640px){
  .row{ gap:14px; }
  .year{ flex-basis:40px; font-size:13px; }
  .sticker{ flex-basis:32px; width:32px; height:32px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
  .intro p{ opacity:1; transform:none; filter:none; }
}