/* ============================================================
   landing.css — the front door. Same tokens as the resume site,
   so both stay visually consistent; load tokens.css first.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  min-height:100vh;      /* fallback for browsers without svh */
  min-height:100svh;
  display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60vw 45vw at 88% -8%, var(--pink) 0%, transparent 62%),
    radial-gradient(55vw 45vw at -12% 8%, var(--antacid) 0%, transparent 58%);
  background-repeat:no-repeat;
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
:focus-visible{outline:2.5px solid var(--blue); outline-offset:4px; border-radius:10px;}

.mono{font-family:var(--font-mono); letter-spacing:.06em;}
.shell{width:100%; max-width:880px; margin:0 auto; padding:0 22px; flex:1;
       display:flex; flex-direction:column; justify-content:center;}

/* ---------- intro ---------- */
.intro{padding:64px 0 34px;}
.eyebrow{font-size:var(--fs-xs); text-transform:uppercase; color:var(--ink-dim); margin:0 0 14px;}
.intro h1{font-family:var(--font-display); font-weight:600; letter-spacing:-.03em;
          font-size:clamp(36px,6.5vw,56px); line-height:1.04; margin:0 0 14px;}
.intro p{font-size:var(--fs-md); color:var(--ink-dim); max-width:46ch; margin:0;}

/* ---------- category grid ---------- */
.cats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);
      padding:0 0 20px; margin:0; list-style:none;}
@media(max-width:640px){ .cats{grid-template-columns:1fr;} }

.cat{
  height:100%;
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; min-height:150px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* colour wash keyed off each card's --tint */
.cat::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, var(--tint, var(--accent-soft)), transparent 62%);
  opacity:.85; pointer-events:none;
}
.cat > *{position:relative;}
.cat:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--accent);}

.cat-index{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-dim);}
.cat-name{font-family:var(--font-display); font-size:26px; letter-spacing:-.02em;}
.cat-desc{font-size:13.5px; color:var(--ink-dim); margin:0;}
.cat-go{
  margin-top:auto; font-family:var(--font-mono); font-size:11.5px;
  text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:6px;
}
.cat:hover .cat-go span{transform:translateX(4px);}
.cat-go span{transition:transform .2s ease; display:inline-block;}

/* not-yet-live categories */
.cat.soon{cursor:default; box-shadow:none; background:transparent;}
.cat.soon::before{opacity:.45;}
.cat.soon:hover{transform:none; border-color:var(--line); box-shadow:none;}
.cat.soon .cat-go{color:var(--ink-dim);}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); margin-top:26px; padding:20px 0 34px;
      display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
      font-size:12px; color:var(--ink-dim);}

/* ---------- entrance ---------- */
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.intro, .cat, .foot{animation:rise .55s var(--ease) backwards;}
.intro{animation-delay:.05s;}
/* Stagger keyed off the list item, so it keeps working as cards are added
   or reordered. Add more lines here only if you go past six. */
.cats li:nth-child(1) .cat{animation-delay:.14s;}
.cats li:nth-child(2) .cat{animation-delay:.20s;}
.cats li:nth-child(3) .cat{animation-delay:.26s;}
.cats li:nth-child(4) .cat{animation-delay:.32s;}
.cats li:nth-child(5) .cat{animation-delay:.38s;}
.cats li:nth-child(6) .cat{animation-delay:.44s;}
.foot{animation-delay:.4s;}