/* tenzin.com.au/thoughts — generated pages share this stylesheet.
   Palette and type follow site/ and hub/ so all three read as one family.
   Tag accents are the four moment accents from site/site.js plus the hub's
   terracotta, so nothing new was invented for this section.

   NOTE: this file is served with Cache-Control: no-cache via the filename rule
   in site/.htaccess (`^(site|hub|…|thoughts)\.(js|css)$`). If you rename it,
   rename it there too or browsers will pair fresh markup with a stale sheet. */

:root {
  --bg: #100e0c;
  --ink: #e8e0d6;
  --ink-bright: #f2ebe2;
  --ink-dim: #a99c8c;
  --ink-faint: #7a6e63;
  --line: #2a2320;
  --panel: #1a1410;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;

  --tag-mind: #c98b6b;
  --tag-tools: #d4a94a;
  --tag-inquiry: #ef9563;
  --tag-systems: #93a67c;
  --tag-culture: #4bbd68;
  --tag-ethics: #cf7a6a;
  --tag-none: #7a6e63;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: #d6d0c6; color: #16130f; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── masthead, shared ─────────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 26px clamp(22px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.top__home {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .3s ease;
}

.top__home:hover { color: var(--ink); }
.top__here { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }

/* ── index: graph + library ───────────────────────────────────────────── */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(34px, 7vh, 64px) clamp(22px, 5vw, 64px) 96px;
}

h1.page-title {
  margin: 14px 0 0;
  font-size: clamp(38px, 7vw, 74px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.page-sub {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

.views {
  display: flex;
  gap: 8px;
  margin: clamp(30px, 5vh, 46px) 0 20px;
  padding-bottom: 0;
}

.views__btn {
  padding: 9px 18px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.views__btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.views__btn[aria-selected="true"] { background: var(--panel); border-color: var(--ink-faint); color: var(--ink-bright); }

/* graph */

.graph {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0c0a09;
  overflow: hidden;
}

.graph__canvas { display: block; width: 100%; height: clamp(380px, 58vh, 620px); touch-action: none; cursor: grab; }
.graph__canvas:active { cursor: grabbing; }

.graph__tip {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  max-width: 280px;
  padding: 11px 14px;
  background: #1a1410f2;
  border: 1px solid var(--line);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.graph__tip[data-on="1"] { opacity: 1; transform: none; }
.graph__tip-title { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink-bright); }
.graph__tip-sum { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-dim); }
.graph__tip-meta { margin-top: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

.graph__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 14px clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.legend__item { display: flex; align-items: center; gap: 7px; }
.legend__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tag-none); }
.legend__dot--hollow { background: none; border: 1px solid var(--ink-faint); }

.graph__hint {
  padding: 0 clamp(14px, 2vw, 20px) 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5d554d;
}

/* library */

.search {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-bottom: 22px;
  padding: 12px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 16px avoids the iOS zoom-on-focus */
}

.search:focus { outline: none; border-color: var(--ink-faint); }

.lib { display: grid; gap: 12px; }

.lib__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px 24px;
  padding: 20px clamp(18px, 2.4vw, 26px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s ease, transform .2s ease;
}

.lib__row:hover { transform: translateY(-2px); border-color: var(--ink-faint); }
.lib__title { font-size: clamp(19px, 2.6vw, 25px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--ink-bright); }
.lib__sum { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); max-width: 60ch; }
.lib__meta { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.lib__seed { color: var(--ink-faint); }
.lib__empty { padding: 30px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── reading view ─────────────────────────────────────────────────────── */

.read { max-width: 660px; margin: 0 auto; padding: clamp(40px, 9vh, 92px) clamp(22px, 6vw, 40px) 110px; }

.read__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }

h1.read__title {
  margin: 20px 0 0;
  font-size: clamp(31px, 5.4vw, 50px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink-bright);
  text-wrap: balance;
}

.read__sum { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-dim); font-style: italic; }

.read__body { margin-top: clamp(34px, 6vh, 52px); font-size: 17.5px; line-height: 1.78; color: var(--ink); }
/* `.read__body p { margin: 0 }` was here and silently won: a class+type selector
   outranks `.read__body > * + *` (class only), so it zeroed the paragraph gap and
   the essay ran together as one block. Zero the margin on the child selector at
   the same specificity instead, and let the later rule add the gap back. */
.read__body > * { margin: 0; }
.read__body > * + * { margin-top: 1.35em; }
.read__body h2 { margin: 2em 0 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--ink-bright); }
.read__body h3 { margin: 1.7em 0 0; font-size: 14px; font-weight: 600; color: var(--ink-dim); }
.read__body strong { color: var(--ink-bright); font-weight: 600; }
.read__body em { font-style: italic; }
.read__body ul, .read__body ol { margin: 0; padding-left: 1.3em; }
.read__body li + li { margin-top: .5em; }
.read__body blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--line); color: var(--ink-dim); font-style: italic; }
.read__body code { font-family: var(--mono); font-size: .88em; background: var(--panel); padding: 2px 5px; border-radius: 4px; }
.read__body pre { margin: 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.read__body pre code { background: none; padding: 0; }
.read__body a[href^="http"] { color: var(--ink-bright); border-bottom: 1px solid var(--ink-faint); }

/* A wikilink to a written thought is solid; to an unwritten one it is dotted
   and dimmed, so the prose tells you the difference before you click. */
.wl { color: var(--tag-tools); border-bottom: 1px solid #d4a94a55; transition: border-color .2s ease; }
.wl:hover { border-bottom-color: var(--tag-tools); }
.wl--unwritten { color: var(--ink-dim); border-bottom: 1px dotted var(--ink-faint); }

.seed-note {
  margin-top: clamp(30px, 5vh, 44px);
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-faint);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.backlinks { margin-top: clamp(48px, 8vh, 76px); padding-top: 26px; border-top: 1px solid var(--line); }
.backlinks__list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.backlinks__list a { font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.backlinks__list a:hover { border-color: var(--ink-faint); }

.foot { margin-top: clamp(40px, 6vh, 60px); display: flex; flex-wrap: wrap; gap: 12px 26px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.foot a:hover { color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .lib__row:hover { transform: none; }
}

/* ── references in the graph ──────────────────────────────────────────────
   A source is a square, not a dot: colour is already carrying two meanings
   (fill vs stroke is written vs unwritten, and the fill itself is the tag), so
   shape is the only axis left. Deliberately outside the six-tag palette. */
.legend__dot--ref {
  border-radius: 2px;
  background: #7c8aa8;
}

/* The toggle sits with the hint rather than the legend: the legend describes
   what you are looking at, this changes it. */
.graph__toggle {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8d8177;
  background: #17130f;
  border: 1px solid #2f2823;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.graph__toggle:hover { color: #d8cbbc; border-color: #4a4038; }
.graph__toggle[aria-pressed="false"] { color: #6b6057; }