: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;
}

  h2{ 
    margin:0 0 17px; 
    font-size:16px; 
    font-weight:600; 
    line-height:1.65; 
}
.intro h2::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  margin-right:8px;
  border-radius:50%;
  background:#fff;
  vertical-align:middle;
  transform:translateY(-1px);
  box-shadow:0 0 0 0 rgba(255,255,255,0.35);
  animation:
    dot-pulse 2.4s ease-in-out infinite,
    dot-ripple 2.4s ease-out infinite;
}
@keyframes dot-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.45; }
}
@keyframes dot-ripple{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.35); }
  70%,100%{ box-shadow:0 0 0 9px rgba(255,255,255,0); }
}


.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(--muted); 
}

a:hover{ 
  border-bottom-color:currentColor; 
}
a:focus-visible{
  outline:2px solid currentColor; 
  outline-offset:3px;
  border-radius:12px;
}

strong{
  font-weight:600;
}

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

/* Rows reveal as they scroll into view (class set by script in index.html).
   Same motion as the intro paragraphs so the page reads as one system. */
.row.reveal{
  opacity:0;
  transform:translateY(8px);
  filter:blur(4px);
  transition:opacity 500ms cubic-bezier(0.23,1,0.32,1) var(--delay,0ms),
             transform 500ms cubic-bezier(0.23,1,0.32,1) var(--delay,0ms),
             filter 500ms cubic-bezier(0.23,1,0.32,1) var(--delay,0ms);
}
.row.reveal.in{ opacity:1; transform:none; filter:none; }

.row{
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:14px 12px;
  margin:0 -12px;
  border-radius:12px;
  font-weight:400;
}
.row:hover{ background:rgba(0,0,0,.025); }
a.row{ text-decoration:none; color:inherit; border-bottom:0; }
@media (prefers-color-scheme: dark){
  .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 72px;
  width:72px;
  height:72px;
  object-fit:contain;
  margin-top:-6px;
  /* --rx/--ry are set from the cursor position by the script in index.html */
  transform:perspective(600px) rotate(var(--tilt,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--size,1));
  transition:transform 220ms cubic-bezier(0.23,1,0.32,1);
}
/* Two offset cycles (5 tilts x 3 sizes) so no two nearby stickers match */
.row:nth-child(5n+1) .sticker{ --tilt:-7deg; }
.row:nth-child(5n+2) .sticker{ --tilt:5deg; }
.row:nth-child(5n+3) .sticker{ --tilt:-2deg; }
.row:nth-child(5n+4) .sticker{ --tilt:9deg; }
.row:nth-child(5n+5) .sticker{ --tilt:-4deg; }
.row:nth-child(3n+1) .sticker{ --size:1.1; }
.row:nth-child(3n+2) .sticker{ --size:0.85; }
.row:nth-child(3n+3) .sticker{ --size:1; }
/* Per-sticker corrections for logos whose shape makes them read too large */
.row .sticker[src*="graphicssupport"]{ --size:0.8; }
.row:hover .sticker,
.sticker:hover{ transform:perspective(600px) rotate(0deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(calc(var(--size,1) * 1.1)); }
@media (max-width:640px){
  .work{ margin-top:120px; }
  .row{ gap:14px; }
  .year{ flex-basis:40px; font-size:13px; }
  .sticker{ flex-basis:56px; width:56px; height:56px; margin-top:-4px; }
}

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

/* ---------- contact ---------- */
.contact{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:48px;
  text-align:center;
  padding:24px;
}
.contact .dot{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 0 transparent;
  animation:
    dot-pulse 2.4s ease-in-out infinite,
    dot-ripple-lg 2.4s ease-out infinite;
}
.contact p{
  margin:0;
  max-width:30ch;
}
@keyframes dot-ripple-lg{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--ink) 26%, transparent); }
  70%,100%{ box-shadow:0 0 0 26px transparent; }
}