/* ============================================================================
   Samantha Lee — BASE + SHARED COMPONENTS
   Reset, document defaults, and the site nav. Linked after tokens.css.
   Page layouts + reading furniture live in each page's own <style>.
   ============================================================================ */

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--grey50);
  font-family:var(--f-primary);
  font-size:var(--t-body); line-height:var(--baseline); letter-spacing:var(--ls-l);
}
a{ color:inherit; }

/* ============ SITE NAV (shared component, scroll-fade) ============ */
.site-nav{
  position:fixed; top:var(--s16); left:var(--s16); z-index:41; width:120px;
  font-size:var(--t-nav); line-height:var(--lh-nav); letter-spacing:var(--ls-s);
}
.nav-header{ width:fit-content; overflow:clip; background:var(--lavender); padding:1px var(--s2); }
.nav-header p{ margin:0; color:var(--black); }
.nav-header a{ color:var(--black); text-decoration:none; }
.nav-group{
  margin-top:var(--s2); display:flex; flex-direction:column; gap:var(--s2);
}
.nav-group.is-hidden{ pointer-events:none; }
.nav-item{
  width:fit-content; padding:1px var(--s2); background:var(--grey10);
  transition:opacity var(--nav-dur) ease, transform var(--nav-dur) ease;
}
.nav-group.is-hidden .nav-item{ opacity:0; transform:translateY(-6px); }   /* reveal drops in top → bottom */
/* reveal stagger — items appear one by one, quickly */
.nav-group:not(.is-hidden) .nav-item:nth-child(1){ transition-delay:0ms; }
.nav-group:not(.is-hidden) .nav-item:nth-child(2){ transition-delay:45ms; }
.nav-group:not(.is-hidden) .nav-item:nth-child(3){ transition-delay:90ms; }
.nav-group:not(.is-hidden) .nav-item:nth-child(4){ transition-delay:135ms; }
/* disappear stacks too — same top→bottom rhythm */
.nav-group.is-hidden .nav-item:nth-child(1){ transition-delay:0ms; }
.nav-group.is-hidden .nav-item:nth-child(2){ transition-delay:45ms; }
.nav-group.is-hidden .nav-item:nth-child(3){ transition-delay:90ms; }
.nav-group.is-hidden .nav-item:nth-child(4){ transition-delay:135ms; }
.nav-item a{ display:block; padding:0 var(--s2); color:var(--grey50); text-decoration:none; }
.nav-item a:hover{ color:var(--black); }
.nav-item.is-current{ background:var(--lavender); }
.nav-item.is-current a{ color:var(--black); }

/* ============ WRITING FEED (shared component — index listing + article "related") ============
   One flat type style per row: Basel Grotesk 28 / 44, underlined, on the 22 baseline.
   On hover, js/coords.js scrambles the row text (brand-colour flash) and swaps the
   family to Ernest serif (.is-serif, 2px smaller) — the scramble resolves into the serif. */
.feed{ list-style:none; margin:0; padding:0; }
.feed li{ margin:0; }
.feed-row{
  display:block; width:fit-content; max-width:100%;
  color:var(--black);
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
  font-size:var(--t-h2); line-height:calc(var(--baseline) * 2);   /* 28 / 44 — title + date share one style */
  letter-spacing:var(--ls-s);
  transition:text-underline-offset 150ms ease;
}
.feed-row:hover{ text-underline-offset:4px; }                 /* only the offset moves — no thickening */
.feed-row:focus-visible{ outline:2px solid var(--lavender); outline-offset:3px; }
.feed-row.is-serif{ font-family:var(--f-secondary); font-size:calc(var(--t-h2) - 3px); letter-spacing:0.04em; position:relative; top:2px; }   /* Ernest, 3px smaller, +4% tracking, nudged 2px down so it lands on the Basel baseline; min-width locked in js so the box doesn't resize */
.feed-sub{ list-style:none; margin:0; padding:0; }
.feed-sub .feed-row{ padding-left:var(--s24); }
@media (prefers-reduced-motion: reduce){ .feed-row{ transition:none; } }

/* ============ CURSOR COORDINATES (shared, top-right) ============ */
.coords{
  position:fixed; top:var(--s16); right:var(--s16); z-index:41;   /* same top + edge inset as the nav (--s16) */
  display:inline-flex; align-items:baseline; gap:var(--s16);      /* gap between the X and Y blocks */
  font-size:var(--t-nav); line-height:var(--lh-nav); letter-spacing:var(--ls-s);   /* match the nav's type so the two corners pair */
  color:var(--grey50); white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  pointer-events:none; user-select:none;
}
@media (pointer:coarse){ .coords{ display:none; } }   /* hide on touch devices — no cursor */

/* ============ BASELINE-GRID OVERLAY (dev aid — press "g") ============ */
.baseline-grid{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:0;
  background-image:repeating-linear-gradient(to bottom,
    rgba(5,165,233,0.30) 0, rgba(5,165,233,0.30) 1px, transparent 1px, transparent var(--baseline));
}
body.baseline-on .baseline-grid{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .nav-item{ transition:none; }
}

/* (Page transition removed — pages navigate with a plain cut.) */