/* ==========================================================================
   Joseph Stevenson, research site
   Warm near-black ground, one amber accent, plus a five-color signal set that
   deliberately mirrors the pens in the original notebook pages (black = flow,
   red = issue, orange = clarification, green = done, blue = note, purple =
   self-improvement). Type is Newsreader for display, Inter for reading,
   JetBrains Mono for anything the machine names: files, signals, agents.
   Dark-only on purpose. This is one committed look, not a theme.
   ========================================================================== */

:root {
  --bg:         #0c0a08;
  --bg-2:       #110e0a;
  --surface:    #17130d;
  --surface-2:  #1e1a12;
  --line:       #2a2418;
  --line-2:     #3a3122;

  --text-hi:    #f6f1e7;
  --text:       #ddd5c6;
  --text-2:     #a99e8b;   /*  7.5:1 on --bg  */
  --text-3:     #968c78;   /*  5.9:1 on --bg  */

  --accent:      #e0a458;  /*  9.0:1 on --bg  */
  --accent-deep: #c98a3e;
  --accent-soft: rgba(224, 164, 88, 0.09);
  --accent-edge: rgba(224, 164, 88, 0.30);

  /* Signal palette, used in diagrams and legends, matched to the notebook. */
  --sig-flow:    #e8e2d6;
  --sig-issue:   #e2574a;
  --sig-clarify: #e89a3c;
  --sig-done:    #6fbf73;
  --sig-note:    #7b9ce0;
  --sig-improve: #b487d8;

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
  --read: 720px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 12% -4%, rgba(224, 164, 88, 0.055), transparent 44%),
    radial-gradient(circle at 94% 102%, rgba(224, 164, 88, 0.03), transparent 40%);
  background-attachment: scroll;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-hi); font-weight: 600; letter-spacing: -0.012em; }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
h3, h4 { font-family: var(--body); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
strong { color: var(--text-hi); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: rgba(224, 164, 88, 0.26); color: var(--text-hi); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 34px; }
.read { max-width: var(--read); }
@media (max-width: 700px) { .wrap { padding: 0 20px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #17120a; padding: 12px 18px;
  font: 600 14px/1 var(--body); border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------- shared atoms ------------------------------------------------ */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow--quiet { color: var(--text-3); }

.mono { font-family: var(--mono); font-size: 0.86em; letter-spacing: -0.01em; }

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5px 5px;
  color: var(--text-hi);
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
}
.tag--live   { color: var(--sig-done);    border-color: rgba(111, 191, 115, 0.35); }
.tag--build  { color: var(--sig-clarify); border-color: rgba(232, 154, 60, 0.35); }
.tag--paper  { color: var(--sig-note);    border-color: rgba(123, 156, 224, 0.35); }
.tag--closed { color: var(--text-3);      border-color: var(--line); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.lnk {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-edge);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
  font-weight: 500;
}
.lnk:hover { border-bottom-color: var(--accent); color: #f0bb75; }

.lede { font-size: 20px; line-height: 1.6; color: var(--text-2); }
.lede strong { color: var(--text); }

/* ---------- nav --------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12, 10, 8, 0.86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 60px;
}
.nav-brand {
  font-family: var(--display); font-size: 18px; font-weight: 500;
  color: var(--text-hi); text-decoration: none; letter-spacing: -0.015em;
  white-space: nowrap;
}
.nav-brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 14px; color: var(--text-2); text-decoration: none;
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-hi); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-2); border-radius: 6px;
  color: var(--text); padding: 7px 12px; font: 500 13px/1 var(--body); cursor: pointer;
}
@media (max-width: 780px) {
  .nav-links {
    display: none; position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 6px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 20px; font-size: 15px; }
  .nav-toggle { display: block; }
}

/* ---------- hero -------------------------------------------------------- */

.hero { padding: 92px 0 64px; border-bottom: 1px solid var(--line); }
.hero h1 {
  font-size: clamp(36px, 5.6vw, 62px);
  line-height: 1.06;
  max-width: 17ch;
  margin: 0 0 26px;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-lede { max-width: 62ch; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  letter-spacing: 0.05em; margin: 0 0 22px;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-deep);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 700px) { .hero { padding: 60px 0 46px; } }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 14.5px/1 var(--body); text-decoration: none;
  padding: 13px 20px; border-radius: 7px; transition: all 0.15s ease;
}
.btn--solid { background: var(--accent); color: #1a1409; font-weight: 600; }
.btn--solid:hover { background: #f0bb75; }
.btn--ghost { border: 1px solid var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent-edge); color: var(--text-hi); background: var(--accent-soft); }

/* ---------- identity block (hub hero) ----------------------------------- */

.id {
  padding: 78px 0 66px;
  border-bottom: 1px solid var(--line);
}
.id-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: center;
}
.id-name {
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.id-role {
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 22px;
  max-width: 30ch;
}
.id-role b { color: var(--accent); font-weight: 500; }
.id-bio { max-width: 60ch; color: var(--text-2); font-size: 17px; margin-bottom: 26px; }
.id-bio strong { color: var(--text); }
.id-facts {
  display: flex; flex-wrap: wrap; gap: 9px 20px;
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  letter-spacing: 0.04em; margin: 0 0 26px;
}
.id-facts span { display: inline-flex; align-items: center; gap: 8px; }
.id-facts span::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-deep);
}
.id-links { display: flex; flex-wrap: wrap; gap: 10px; }
/* The desk photo (joseph-desk.jpg, 768x1024) is exactly 3:4, so the frame
   matches the image and nothing is cropped. The pixel portrait alternative
   (joseph-pixel.png, square) needs aspect-ratio 1 / 1 if it comes back. */
.id-portrait {
  margin: 0;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); aspect-ratio: 3 / 4;
}
.id-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 860px) {
  .id { padding: 52px 0 44px; }
  .id-in { grid-template-columns: 1fr; gap: 28px; }
  .id-portrait { width: 132px; order: -1; }
}

/* ---------- work grid --------------------------------------------------- */

.work { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
@media (max-width: 820px) { .work { grid-template-columns: 1fr; gap: 22px; } }

.wk {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
a.wk:hover { border-color: var(--accent-edge); background: var(--surface-2); transform: translateY(-3px); }
.wk-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.wk-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.wk-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.wk-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
}
.wk h3 { font-size: 21px; margin-bottom: 9px; letter-spacing: -0.015em; }
.wk-desc { font-size: 15.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.wk-meta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.wk-stack {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); margin: 0;
}
.wk-more { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--accent); margin-left: auto; }

/* ---------- section scaffolding ---------------------------------------- */

.sec { padding: 84px 0; border-bottom: 1px solid var(--line); }
.sec--tight { padding: 60px 0; }
.sec-head { max-width: 68ch; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.14; margin-bottom: 18px; }
.sec-head p { color: var(--text-2); font-size: 17.5px; }
@media (max-width: 700px) { .sec { padding: 58px 0; } .sec-head { margin-bottom: 36px; } }

/* ---------- the generation rail ---------------------------------------- */

.rail { display: grid; gap: 0; }
.gen {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 34px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.gen:last-child { border-bottom: 1px solid var(--line); }
.gen-mark { position: relative; }
.gen-no {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 7px;
}
.gen-when { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); letter-spacing: 0.03em; }
.gen-body h3 { font-size: 23px; margin-bottom: 4px; letter-spacing: -0.015em; }
.gen-body h3 a { text-decoration: none; }
.gen-body h3 a:hover { color: var(--accent); }
.gen-q {
  font-family: var(--display); font-style: italic; font-size: 19px;
  color: var(--accent); margin: 0 0 14px; line-height: 1.45;
}
.gen-body p { color: var(--text-2); max-width: 66ch; font-size: 16px; }
.gen-limit {
  margin-top: 14px; padding-left: 15px; border-left: 2px solid var(--line-2);
  font-size: 15px; color: var(--text-3);
}
.gen-limit b { color: var(--text-2); font-weight: 600; }
.gen-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
@media (max-width: 760px) {
  .gen { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .gen-mark { display: flex; align-items: baseline; gap: 14px; }
  .gen-no { margin-bottom: 0; }
}

/* ---------- cards ------------------------------------------------------- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Compact card for the secondary work row: cover art sits inside the padded
   card rather than bleeding to the edge, so it reads as lighter than a .wk. */
.card--mini { padding: 16px 18px 18px; }
.card--mini h3 { font-size: 17px; margin-bottom: 7px; }
.card--mini p { font-size: 14.5px; }
.card--mini .card-foot { padding-top: 14px; }
.mini-cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 7px; border: 1px solid var(--line); margin-bottom: 15px;
}

.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 26px 26px 24px;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
a.card:hover { border-color: var(--accent-edge); background: var(--surface-2); transform: translateY(-2px); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.card h3 { font-size: 20px; margin-bottom: 9px; letter-spacing: -0.015em; }
.card p { font-size: 15.5px; color: var(--text-2); line-height: 1.6; }
.card-foot { margin-top: auto; padding-top: 18px; }
/* Declared after `.card p` and matched with equal specificity so the kicker keeps
   its 11px. A bare `.card-kicker` loses to `.card p` and renders at body size. */
.card-kicker, .card p.card-kicker {
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.card-more { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--accent); }

/* ---------- open problems ---------------------------------------------- */

.prob {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  display: grid; grid-template-columns: 42px 1fr; gap: 22px;
}
.prob:last-of-type { border-bottom: 1px solid var(--line); }
.prob-no { font-family: var(--mono); font-size: 13px; color: var(--text-3); padding-top: 3px; }
.prob h3 { font-size: 18.5px; margin-bottom: 8px; }
.prob p { font-size: 15.5px; color: var(--text-2); max-width: 70ch; }
.prob-src {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  margin-top: 10px; padding-left: 13px; border-left: 2px solid var(--line-2);
}
@media (max-width: 620px) { .prob { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- index rows -------------------------------------------------- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: start;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.row-name { font-size: 18px; font-weight: 600; color: var(--text-hi); letter-spacing: -0.01em; }
.row-desc { font-size: 15.5px; color: var(--text-2); margin: 6px 0 0; max-width: 74ch; }
.row-meta {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3); letter-spacing: 0.05em;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px; white-space: nowrap;
  padding-top: 3px;
}
.row-meta a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-edge); padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.row-meta a:hover { border-bottom-color: var(--accent); color: #f0bb75; }
@media (max-width: 700px) {
  .row { grid-template-columns: 1fr; gap: 12px; }
  .row-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding-top: 0; }
}

/* ---------- figures & diagrams ----------------------------------------- */

.fig { margin: 40px 0; }
.fig-frame {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 26px;
  overflow-x: auto;
}
.fig-frame svg { min-width: 560px; margin: 0 auto; }
/* Below ~760px the diagram cannot shrink far enough to stay legible, so the
   frame scrolls. Without a hint that scroll is invisible and the figure just
   looks cropped. */
.fig-hint { display: none; }
@media (max-width: 760px) {
  .fig-hint {
    display: block; font-family: var(--mono); font-size: 11px; color: var(--text-3);
    letter-spacing: 0.06em; margin: 0 0 9px;
  }
  .fig-frame { padding: 18px; }
}
.fig figcaption {
  font-size: 14px; color: var(--text-3); margin-top: 14px; line-height: 1.55;
  max-width: 74ch;
}
.fig figcaption b { color: var(--text-2); font-weight: 600; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.legend span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-2); letter-spacing: 0.04em;
}
.legend i { width: 18px; height: 2px; border-radius: 2px; display: block; }

/* ---------- file tree --------------------------------------------------- */

.tree {
  font-family: var(--mono); font-size: 13px; line-height: 1.95;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 22px 24px; overflow-x: auto; color: var(--text-2);
  white-space: pre; margin: 0;
}
.tree b { color: var(--text-hi); font-weight: 500; }
.tree i { color: var(--text-3); font-style: normal; }

/* ---------- prose (deep pages) ----------------------------------------- */

.prose { max-width: var(--read); }
.prose h2 { font-size: 28px; margin: 54px 0 16px; letter-spacing: -0.018em; }
.prose h3 { font-size: 18.5px; margin: 34px 0 10px; }
.prose p, .prose li { color: var(--text-2); font-size: 17px; }
.prose > p:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--accent-deep); }
.prose blockquote {
  margin: 26px 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--accent-edge);
  font-family: var(--display); font-size: 20px; font-style: italic; color: var(--text);
  line-height: 1.5;
}
.prose blockquote cite {
  display: block; font: 500 12px/1.5 var(--mono); font-style: normal;
  color: var(--text-3); margin-top: 12px; letter-spacing: 0.04em;
}

.spec { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; }
.spec th, .spec td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500; padding-top: 0;
}
.spec td { color: var(--text-2); }
.spec td:first-child { color: var(--text-hi); font-weight: 500; white-space: nowrap; padding-right: 26px; }
.table-scroll { overflow-x: auto; }

.callout {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: 0 9px 9px 0;
  padding: 20px 22px; margin: 30px 0;
  /* Inside .prose this is already capped at --read; on the hub it is a direct
     child of .wrap, where an uncapped line runs to ~100 characters. */
  max-width: 820px;
}
.callout p { font-size: 15.5px; margin-bottom: 0.7em; }
.callout p:last-child { margin-bottom: 0; }
.callout .eyebrow { margin-bottom: 10px; }

/* ---------- deep-page header ------------------------------------------- */

.dh { padding: 66px 0 44px; border-bottom: 1px solid var(--line); }
.dh-back {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-3);
  margin-bottom: 30px; transition: color 0.15s ease;
}
.dh-back:hover { color: var(--accent); }
.dh h1 { font-size: clamp(31px, 4.6vw, 50px); line-height: 1.08; max-width: 19ch; margin-bottom: 22px; }
.dh-q {
  font-family: var(--display); font-style: italic; font-size: clamp(19px, 2.4vw, 23px);
  color: var(--accent); max-width: 46ch; line-height: 1.45; margin: 0 0 26px;
}
.dh-meta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) { .dh { padding: 44px 0 34px; } }

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 44px 0 0;
}
.pager a {
  border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px;
  text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.pager a:hover { border-color: var(--accent-edge); background: var(--surface); }
.pager .dir { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 7px; }
.pager .ttl { font-size: 16.5px; font-weight: 600; color: var(--text-hi); }
.pager a:last-child { text-align: right; }
.pager a:only-child { grid-column: 1 / -1; }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr; } .pager a:last-child { text-align: left; } }

/* ---------- media ------------------------------------------------------- */

.shots {
  display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);
  margin: 34px 0; align-items: start;
}
.shots--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .shots, .shots--3 { grid-template-columns: 1fr; } }
.shot {
  margin: 0;
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface);
  cursor: zoom-in; transition: border-color 0.15s ease;
}
.shot:hover { border-color: var(--accent-edge); }
/* Sources range from 1400x875 to 2560x1600. Normalising the tile keeps the grid
   even; without it the tallest image sets the row height and every shorter
   sibling renders as a bordered box with dead space under the picture. */
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
/* Tall phone-frame captures: show the whole frame, never crop. */
.shots--phone .shot img { aspect-ratio: auto; object-fit: unset; object-position: unset; }

/* ---------- contact / follow ------------------------------------------- */

.follow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 680px) { .follow { grid-template-columns: 1fr; } }
.follow a {
  display: block; border: 1px solid var(--line); border-radius: 11px; padding: 26px;
  text-decoration: none; background: var(--surface); transition: border-color 0.15s ease, background 0.15s ease;
}
.follow a:hover { border-color: var(--accent-edge); background: var(--surface-2); }
.follow h3 { font-size: 18px; margin-bottom: 7px; }
.follow p { font-size: 15px; color: var(--text-2); margin-bottom: 0; }

/* ---------- footer ------------------------------------------------------ */

.foot { padding: 54px 0 64px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 26px; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.foot-links a { font-size: 14px; color: var(--text-2); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.foot-note { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); letter-spacing: 0.04em; }

/* ---------- work buckets (hub) ------------------------------------------ */

.bucket { margin-top: 64px; }
.bucket:first-of-type { margin-top: 0; }
.bucket-head {
  display: grid; grid-template-columns: 132px 1fr; gap: 34px;
  border-top: 1px solid var(--line);
  padding: 28px 0 30px;
}
.bucket-mark { display: flex; flex-direction: column; gap: 7px; }
.bucket-no {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
}
.bucket-count { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); letter-spacing: 0.03em; }
.bucket-head h3 {
  font-family: var(--display); font-size: clamp(24px, 3vw, 31px);
  font-weight: 500; letter-spacing: -0.018em; margin: 0 0 10px;
}
.bucket-def { color: var(--text-2); font-size: 16.5px; max-width: 66ch; margin: 0; }
@media (max-width: 760px) {
  .bucket { margin-top: 46px; }
  .bucket-head { grid-template-columns: 1fr; gap: 12px; padding: 22px 0 24px; }
  .bucket-mark { flex-direction: row; align-items: baseline; gap: 14px; }
}

/* Card titles inside a bucket are h4 (sec h2 > bucket h3 > card h4) but keep
   the visual weight the old h3 cards had. */
.wk h4 { font-size: 21px; margin-bottom: 9px; letter-spacing: -0.015em; }

/* ---------- schematic covers -------------------------------------------- */
/* Replaces the generated cover art. Each card opens with an inline SVG drawn
   from how that system actually runs. Amber is the live path, dim strokes are
   structure, and the signal colors keep their notebook meanings. */

.wk-sch {
  display: block; width: 100%;
  aspect-ratio: 1100 / 460;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.wk-sch svg { display: block; width: 100%; height: 100%; }
a.wk:hover .wk-sch { background: #14100b; }

.sch-dim     { stroke: var(--line-2); }
.sch-mid     { stroke: #6b4d22; }
.sch-amber   { stroke: var(--accent); }
.sch-issue   { stroke: var(--sig-issue); }
.sch-done    { stroke: var(--sig-done); }
.sch-clarify { stroke: var(--sig-clarify); }
.sch-note    { stroke: var(--sig-note); }
.sch-f-dim     { fill: #3a3122; }
.sch-f-mid     { fill: #6b4d22; }
.sch-f-amber   { fill: var(--accent); }
.sch-f-halo    { fill: rgba(224, 164, 88, 0.14); }
.sch-f-issue   { fill: var(--sig-issue); }
.sch-f-done    { fill: var(--sig-done); }
.sch-f-clarify { fill: var(--sig-clarify); }
.sch-f-note    { fill: var(--sig-note); }
.sch-f-surface { fill: var(--surface-2); }
.sch-f-none    { fill: none; }
.sch-lbl { font-family: var(--mono); font-size: 23px; letter-spacing: 2.6px; fill: var(--text-3); }
.sch-lbl--hi { fill: var(--accent); }
.sch-lbl--issue { fill: var(--sig-issue); }

/* ---------- lightbox ---------------------------------------------------- */

.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(6, 5, 4, 0.94); padding: 5vh 5vw;
  align-items: center; justify-content: center;
}
.lb.open { display: flex; }
.lb img { max-width: 100%; max-height: 90vh; width: auto; border-radius: 8px; }
.lb button {
  position: absolute; background: rgba(30, 26, 18, 0.9); border: 1px solid var(--line-2);
  color: var(--text-hi); border-radius: 8px; cursor: pointer;
  font: 400 22px/1 var(--body); width: 44px; height: 44px;
}
.lb button:hover { border-color: var(--accent-edge); }
#lb-close { top: 20px; right: 20px; }
#lb-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
#lb-next  { right: 20px; top: 50%; transform: translateY(-50%); }
#lb-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.08em;
}