/* ==========================================================================
   prime — landing page styles
   Hand-authored. No build step, no external requests, no web fonts.
   Restyle the whole page by editing the tokens in :root below.
   ========================================================================== */

/* --- design tokens ------------------------------------------------------ */
:root {
  --bg:        #faf9f7;
  --surface:   #ffffff;
  --surface-2: #f3f1ed;
  --ink:       #17191d;
  --ink-2:     #3d434b;
  --muted:     #6b727c;
  --muted-2:   #5a616b;   /* AA-safe on --surface-2 */
  --rule:      #e3ded6;
  --accent:    #9a5423;   /* muted burnt orange */
  --accent-in: #ffffff;
  --ok:        #2f6f4e;
  --wip:       #3f6382;
  --priv:      #5f6873;

  /* --serif carries the whole page. --mono is reserved for exactly two things:
     the masthead kicker and the section numbers. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  /* unused */
  --mono:  ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;   /* comfortable reading width for prose */
  --page:    78rem;   /* outer container width (two panes) */
  --radius:  4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14161a;
    --surface:   #1a1d22;
    --surface-2: #21252b;
    --ink:       #e9e7e2;
    --ink-2:     #c4c8ce;
    --muted:     #939aa4;
    --muted-2:   #939aa4;
    --rule:      #2c3037;
    --accent:    #dfa06e;   /* muted burnt orange, dark theme */
    --accent-in: #14161a;
    --ok:        #7fc79f;
    --wip:       #8fb0cf;
    --priv:      #97a0ab;
  }
}

/* --- reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clears the ~46px sticky subnav so an anchored heading is never parked under it */
  scroll-padding-top: 4rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -0.015em; margin: 0; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); margin: 0 0 0.35em; letter-spacing: -0.01em; }
h3 { font-size: 1.08rem; margin: 0 0 0.25em; }
p  { margin: 0 0 1em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

ul { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: 0.3em; }

/* --- layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.prose { max-width: var(--measure); }
.section { padding-block: clamp(2.4rem, 5vw, 3.5rem); border-top: 1px solid var(--accent); }

/* --- two panes ----------------------------------------------------------- */
.panes { display: grid; grid-template-columns: minmax(0, 1fr); }
.pane > .section:first-child { padding-top: clamp(2rem, 4vw, 2.75rem); }
/* The left pane opens directly under the nav rule, so it needs no rule of its
   own. Stacked on narrow screens the right pane DOES keep its rule, which is
   what separates the CV from Projects. */
.pane--left > .section:first-child { border-top: 0; }

/* px, not rem: a rem breakpoint scales with the reader's default font size, which
   could hold a perfectly wide window in one column. */
@media (min-width: 900px) {
  .panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pane--left  { padding-right: clamp(1.75rem, 3.5vw, 3rem); border-right: 1px solid var(--accent); }
  .pane--right { padding-left:  clamp(1.75rem, 3.5vw, 3rem); }
  .pane--right > .section:first-child { border-top: 0; }
}

.section-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.section-head .eyebrow {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-in);
  padding: 0.6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --- masthead ----------------------------------------------------------- */
.masthead { padding-block: clamp(2.6rem, 7vw, 4.5rem) clamp(1.8rem, 4vw, 2.75rem); text-align: center; }
.masthead .kicker {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem;
}
.masthead .credentials {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--ink-2); max-width: 46rem; margin: 0.9rem auto 0; line-height: 1.5;
}
.masthead .credentials span { display: block; }
.masthead .email {
  font-family: var(--serif); font-size: 0.92rem;
  margin: 0.65rem 0 1.6rem; letter-spacing: -0.01em;
}
.masthead .email a { text-decoration: none; }
.masthead .email a:hover { text-decoration: underline; }

.meta-line {
  font-size: 0.9rem; color: var(--muted); margin: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.85rem;
}
.meta-line .sep { color: var(--accent); }

.contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.contact-row li { margin: 0; }
.contact-row a {
  display: inline-block; padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  font-size: 0.86rem; text-decoration: none; color: var(--ink-2);
}
.contact-row a:hover { border-color: var(--accent); color: var(--accent); }
/* used only by the 404 recovery link */
.contact-row a.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-in); }
.contact-row a.primary:hover { opacity: 0.9; color: var(--accent-in); }

/* --- sticky nav --------------------------------------------------------- */
.subnav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
}
/* The rules ride on the <ul>, not on .subnav, so they end where the panes end
   instead of running the full width of the window. */
.subnav .container > ul { border-block: 1px solid var(--accent); }
@supports (backdrop-filter: blur(8px)) {
  .subnav {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
  }
}
.subnav ul {
  display: flex; gap: clamp(0.9rem, 3vw, 2rem); list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { margin: 0; }
.subnav a {
  display: block; padding: 0.7rem 0; font-size: 0.82rem; letter-spacing: 0.03em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.subnav a:hover, .subnav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* --- documents (PDF cards) ---------------------------------------------- */
.doc-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.doc {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.doc:hover { border-color: var(--accent); }
.doc .doc-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accent); margin-top: 0.15rem; }
.doc strong { display: block; font-family: var(--serif); font-size: 0.95rem; font-weight: 600; }
.doc span { display: block; font-size: 0.82rem; color: var(--muted); }

/* --- timeline ------------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--accent); }
.timeline > li { position: relative; padding: 0 0 1.4rem 1.5rem; margin: 0; }
.timeline > li::before {
  content: ""; position: absolute; left: -6px; top: 0.5rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline .when {
  font-family: var(--serif); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase;
}
.timeline .what { font-family: var(--serif); font-size: 0.98rem; font-weight: 600; margin: 0.1rem 0 0.15rem; }
.timeline .where { font-size: 0.9rem; color: var(--ink-2); margin: 0; }

.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list > li { padding: 0.7rem 0; border-bottom: 1px solid var(--accent); margin: 0; }
.fact-list > li:last-child { border-bottom: 0; }
.fact-list .label {
  font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.15rem;
}
.fact-list .value { display: block; color: var(--ink-2); }

/* --- project cards ------------------------------------------------------- */
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.card--linked:hover { border-color: var(--accent); }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.card h3 {
  font-family: var(--serif); font-size: 0.95rem; font-weight: 600;
  letter-spacing: -0.01em; margin: 0;
}
.card h3 a { text-decoration: none; color: var(--ink); }
.card--linked:hover h3 a { color: var(--accent); text-decoration: underline; }
.card .hook { font-size: 0.92rem; color: var(--ink-2); margin: 0; flex: 1 1 auto; }
.card .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.card .tags li {
  font-family: var(--serif); font-size: 0.68rem; letter-spacing: 0.03em;
  color: var(--muted-2); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: 3px; padding: 0.1rem 0.4rem; margin: 0;
}

.badge {
  flex: none; font-family: var(--serif); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
  padding: 0.15rem 0.45rem; border-radius: 3px; border: 1px solid currentColor;
}
.badge--public   { color: var(--ok); }
.badge--progress { color: var(--wip); }
.badge--private  { color: var(--priv); }

.subhead {
  font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin: 2.25rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--accent);
}
.subhead--first { margin-top: 0; padding-top: 0; border-top: 0; }

.note {
  font-size: 0.86rem; color: var(--muted);
  border-left: 2px solid var(--accent); padding-left: 0.9rem;
  margin: 1.5rem 0 0; max-width: var(--measure);
}

/* --- toolkit strip ------------------------------------------------------- */
.toolkit { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.toolkit h3 {
  font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem;
}
.toolkit p { font-size: 0.9rem; color: var(--ink-2); margin: 0; }

/* --- footer -------------------------------------------------------------- */
.site-footer { padding-block: 0 2.75rem; font-size: 0.85rem; color: var(--muted); }
.footer-inner { border-top: 1px solid var(--accent); padding-top: 1.9rem; }
.site-footer p { margin: 0 0 0.4rem; }

/* --- print --------------------------------------------------------------- */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #fff;
    --ink: #000; --ink-2: #222; --muted: #555; --rule: #bbb; --accent: #000;
  }
  body { font-size: 11pt; }
  .subnav, .skip-link { display: none !important; }
  .section { padding-block: 1.1rem; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
.panes { display: block; }
  .pane--left  { padding-right: 0; border-right: 0; }
  .pane--right { padding-left: 0; }
  .pane--right > .section:first-child { border-top: 1px solid var(--accent); }
  .card, .doc { break-inside: avoid; border-color: #ccc; }
}