/* Shared base styling on the design tokens (Phase 3a). Per-surface styling
   (sidenotes/width selector = 3b, search modal = 3c, cards/CV = 3d) lives with
   those sub-projects. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus {
  left: var(--space-2); top: var(--space-1); z-index: 10;
  background: var(--bg-alt); color: var(--fg);
  padding: var(--space-1) var(--space-2); border-radius: 6px;
}

/* primary nav / sticky header */
nav[aria-label="Primary"] {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 1rem; align-items: center;
  padding: 0.55rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
nav[aria-label="Primary"] a { color: var(--fg-muted); text-decoration: none; }
nav[aria-label="Primary"] a:hover { color: var(--link); }

.theme-toggle {
  margin-left: auto; font: inherit;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--fg); padding: 0.3rem 0.55rem; cursor: pointer;
}

/* reading container: text column + reserved right note gutter (Tufte layout) */
main {
  max-width: calc(var(--text-w) + var(--gutter));
  margin-inline: auto;
  padding: var(--space-3) var(--space-2);
}
.prose { width: calc(100% - var(--gutter)); }

/* ---- Tufte sidenotes (Phase 3b) ---- */
.sidenote {
  float: right; clear: right;
  width: var(--note-w);
  margin: 0.15rem calc(-1 * var(--gutter)) 1rem 0;
  font-size: 0.84rem; line-height: 1.45; color: var(--fg-muted);
}
.sn-num { font-family: var(--mono); font-size: 0.72em; color: var(--link); margin-right: 0.3em; vertical-align: super; line-height: 0; }
.sn-toggle { font-family: var(--mono); font-size: 0.68em; color: var(--link); vertical-align: super; line-height: 0; cursor: pointer; padding: 0 0.12em; }
.sn-toggle-input { display: none; }
.sn-ref a { font-family: var(--mono); font-size: 0.68em; color: var(--link); vertical-align: super; line-height: 0; }

/* Collapsed single-column state — note hidden, revealed inline on toggle.
   Applies when JS is off and the viewport is narrow, or when JS measures that
   the notes don't fit ("take notes away only when we have to"). */
/* Collapsed note: visually hidden but kept in the accessibility tree (screen
   readers read it in flow); its own checkbox reveals it inline at the
   reference. `+` (adjacent sibling), not `~`, so a checkbox reveals ONLY its
   own note, not every later note in the paragraph.
   Known gap (a11y fast-follow, Jim's call): the checkbox is display:none, so a
   sighted keyboard-only reader can't trigger the visual reveal. */
@media (max-width: 60rem) {
  :root:not(.js) main { max-width: var(--text-w); }
  :root:not(.js) .prose { width: 100%; }
  :root:not(.js) .sidenote {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); float: none; margin: 0;
  }
  :root:not(.js) .sn-toggle-input:checked + .sidenote {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; float: none;
    margin: 0.6rem 0; padding-left: 0.8rem; border-left: 2px solid var(--border);
  }
  /* keyboard-operable collapsed toggle (Phase 3e): focusable (not display:none),
     with a focus ring surfaced on the visible marker via :has(). */
  :root:not(.js) .sn-toggle-input {
    display: inline-block; position: absolute; opacity: 0; width: 1px; height: 1px;
  }
  :root:not(.js) .sn-toggle:has(+ .sn-toggle-input:focus-visible) {
    outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px;
  }
}
:root.js[data-notes="nofit"] main { max-width: var(--text-w); }
:root.js[data-notes="nofit"] .prose { width: 100%; }
:root.js[data-notes="nofit"] .sidenote {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); float: none; margin: 0;
}
:root.js[data-notes="nofit"] .sn-toggle-input:checked + .sidenote {
  position: static; width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none; float: none;
  margin: 0.6rem 0; padding-left: 0.8rem; border-left: 2px solid var(--border);
}
:root.js[data-notes="nofit"] .sn-toggle-input {
  display: inline-block; position: absolute; opacity: 0; width: 1px; height: 1px;
}
:root.js[data-notes="nofit"] .sn-toggle:has(+ .sn-toggle-input:focus-visible) {
  outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px;
}

/* width selector (header; JS-only enhancement) */
.width-select { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-family: var(--mono); }
.width-select button { font: inherit; font-size: 0.72rem; background: transparent; color: var(--fg-muted); border: 0; padding: 0.28rem 0.5rem; cursor: pointer; }
.width-select button[aria-pressed="true"] { background: var(--link); color: var(--bg); }
:root:not(.js) .width-select { display: none; }

/* ---- search command palette (Phase 3c) ---- */
.search-open { font: inherit; font-family: var(--mono); font-size: 0.8rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; color: var(--fg-muted); padding: 0.3rem 0.6rem; cursor: pointer; display: inline-flex; gap: 0.4rem; align-items: center; }
.search-open kbd { font-family: var(--mono); font-size: 0.72rem; background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.02rem 0.3rem; }
:root:not(.js) .search-open { display: none; }

.scrim { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 35%, rgba(0, 0, 0, 0.6)); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem 1rem; }
.scrim[hidden] { display: none; }
.palette { width: min(42rem, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); }
.pbar { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); }
.pmag { color: var(--fg-muted); font-size: 1.1rem; }
.pbar input { flex: 1; font: inherit; font-size: 1.1rem; background: transparent; border: 0; color: var(--fg); outline: none; }
.pesc { font-family: var(--mono); font-size: 0.7rem; color: var(--fg-muted); border: 1px solid var(--border); border-radius: 5px; padding: 0.1rem 0.4rem; }
.sr-results { overflow-y: auto; padding: 0.4rem 0; }
.sr-group { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-muted); padding: 0.6rem 1.1rem 0.25rem; }
.sr-row { display: block; padding: 0.5rem 1.1rem; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; color: inherit; }
.sr-row[aria-selected="true"] { background: var(--code-bg); border-left-color: var(--link); }
.sr-title { font-weight: 600; font-size: 1.02rem; }
.sr-crumb { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-muted); margin-top: 0.05rem; }
.sr-snip { font-size: 0.9rem; color: var(--fg-muted); margin-top: 0.2rem; line-height: 1.4; }
.sr-row mark { background: transparent; color: var(--marker); font-weight: 700; }
.sr-empty { padding: 1.6rem 1.1rem; color: var(--fg-muted); font-family: var(--mono); font-size: 0.85rem; }
.pfoot { display: flex; gap: 0.5rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.68rem; color: var(--fg-muted); }
.pfoot kbd { font-family: var(--mono); background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.02rem 0.3rem; }

h1 { font-size: 2.4rem; line-height: 1.12; margin: 0.2rem 0 0.6rem; letter-spacing: -0.01em; }
h2 { font-style: italic; font-weight: 600; font-size: 1.6rem; margin: 2.2rem 0 0.6rem; }
h3 { font-size: 1.3rem; margin: 1.6rem 0 0.5rem; }
p { margin: 0 0 1.15rem; }

/* heading deep-link anchor (Phase 3e): decorative # revealed on hover; the
   renderer emits it aria-hidden + tabindex=-1, so screen readers skip it and it
   is not a keyboard tab stop. */
.heading-anchor {
  margin-left: 0.35em; font-family: var(--mono); font-size: 0.7em;
  color: var(--fg-muted); text-decoration: none; opacity: 0; transition: opacity 0.12s;
}
.prose :is(h2, h3, h4, h5, h6):hover .heading-anchor { opacity: 1; }
.heading-anchor:hover { color: var(--link); }
@media (hover: none) { .heading-anchor { opacity: 0.55; } }

blockquote {
  margin: 1.4rem 0; padding: 0.1rem 0 0.1rem 1.2rem;
  border-left: 3px solid var(--marker);
  color: var(--fg-muted); font-style: italic;
}

code { font-family: var(--mono); font-size: 0.86em; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
pre {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem 1.1rem; overflow-x: auto; font-size: 0.84rem; line-height: 1.5; margin: 1.4rem 0;
}
pre code { background: none; padding: 0; }

/* build-time preview banner (Phase 2) */
.preview-banner {
  background: var(--marker); color: var(--bg);
  padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.8rem; text-align: center;
}

/* Phase-2 layout classes; post-card/recent treatment completed in 3d */
.post-meta { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--fg-muted); font-size: 0.9rem; }
.post-list { margin-top: var(--space-2); }

.post-card {
  padding: var(--space-2) 0 calc(var(--space-2) + var(--space-1));
  border-top: 1px solid var(--border);
}
.post-card h2 {
  margin: 0 0 calc(var(--space-1) * 0.25);
  font-size: 1.22rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
}
.post-card h2 a {
  color: var(--fg);
  text-decoration: none;
}
.post-card h2 a:hover,
.post-card h2 a:focus-visible {
  color: var(--link);
  text-decoration: underline;
}
.post-card time {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.45;
}
.post-card p {
  margin: 0 0 var(--space-1);
  color: var(--fg-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.post-card .tags { margin-top: calc(var(--space-1) * 1.25); }

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-1) * 0.75);
  margin: var(--space-1) 0 0;
  padding: 0;
}
.tags li {
  padding: calc(var(--space-1) * 0.12) calc(var(--space-1) * 0.8);
  border-radius: 999px;
  background: var(--code-bg);
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.55;
}

/* CV scaffold: restrained rhythm for placeholder content until the real CV
   lands. NOTE: the renderer wraps each heading's content in a <section>, so the
   CV DOM is `.prose > h1` then `.prose > section > (h2, p, ul, …)`. Reach that
   content with a DESCENDANT combinator — `.prose > ul` / `.prose > p` match
   nothing (same combinator-vs-structure trap as the .recent > h2 fix). */
[data-page="cv"] .prose > section:first-of-type p:first-of-type {
  color: var(--fg);
  font-size: 1.26rem;
  line-height: 1.6;
}

[data-page="cv"] h2 {
  margin: var(--space-3) 0 var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--fg);
  font-size: 1.28rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
}

[data-page="cv"] .prose > section:first-of-type h2 {
  margin-top: var(--space-2);
}

[data-page="cv"] h3 {
  margin: var(--space-2) 0 calc(var(--space-1) * 0.4);
  color: var(--fg);
  font-size: 1.12rem;
  line-height: 1.35;
}

[data-page="cv"] .prose ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.2rem;
}

[data-page="cv"] .prose ul li {
  margin: 0.35rem 0;
  padding-left: 0.15rem;
}

[data-page="cv"] .prose ul li::marker {
  color: var(--fg-muted);
}

.recent {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
/* direct child only — a descendant `.recent h2` would bleed onto the nested
   post-card titles (same specificity, later in file), rendering them mono +
   uppercase on the landing. */
.recent > h2 {
  margin: 0 0 var(--space-1);
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.recent-all {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--link);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
}
.recent-all:hover,
.recent-all:focus-visible { text-decoration: underline; }