:root {
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-wheel: Georgia, serif;
  --font-article: "Newsreader", Georgia, serif;

  --site-bg: #0d0d0d;
  --text-on-dark: #e8e4dc;
  --text-soft-on-dark: #b8b2a8;
  --text-muted-on-dark: #9a968e;
  --rule-on-dark: #34322e;
  --rule-on-dark-subtle: #24221f;

  --article-surface: #f3f0e8;
  --article-title-light: #171512;
  --article-text-light: #24211d;
  --article-muted-light: #6f6a62;
  --article-rule-light: #d8d1c5;

  --economics-on-dark: #c59a32;
  --culture-on-dark: #d27a52;
  --governance-on-dark: #6f9ac7;

  --economics-on-light: #6b520f;
  --culture-on-light: #7c3f22;
  --governance-on-light: #16293f;

  --wheel-economics: #8a6a14;
  --wheel-culture: #a0522d;
  --wheel-governance: #1e3a5f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body { background: var(--site-bg); }
#app { font-family: var(--font-ui); background: var(--site-bg); color: var(--text-soft-on-dark); min-height: 760px; }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 21px 34px; border-bottom: 0.5px solid var(--rule-on-dark); background: var(--site-bg); }
.nav-logo {
  font-size: 22px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  cursor: pointer;
  font-weight: 400;
}
.nav-links {
  display: flex;
  gap: clamp(26px, 4.4vw, 64px);   /* spread across the bar, not bunched */
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-links span { cursor: pointer; } .nav-links span:hover { opacity: 0.75; }
#home { display: flex; flex-direction: column; align-items: center; padding: 24px 12px; background: var(--site-bg); }
.wheel-stage { width: 100%; max-width: 700px; aspect-ratio: 1; }
#wheelRoot { transition: transform 560ms cubic-bezier(0.22,1,0.36,1); transform-origin: 310px 310px; }
#wheelRoot text { transition: fill 200ms ease, stroke-opacity 200ms ease; }
/* Labels recolor quickly on hover for responsive feedback. Higher
   specificity than the rule above so hover feels immediate; a fast
   recolor during rotation reads crisp, not broken. */
#wheelRoot .branch-label, #wheelRoot .parent-label { transition: fill 0.16s ease; }
#selectionLight { pointer-events: none; opacity: 0.48; mix-blend-mode: screen; }

/* ============================================================
   WHEEL INTERACTIVITY — hover affordance + rotation hints
   ============================================================ */

/* Wedges are filled with the marble gradient, so we don't recolor
   them on hover (that would fight the stone look). Instead we lift
   them with a soft warm brightening and a firmer edge, which reads
   as "this is a button" without breaking the carved aesthetic.

   Highlighting is coordinated in JS: hovering any wedge adds the
   `.hot` class to every wedge in that branch, so the whole third
   lights up together to signal it will rotate. Labels are
   pointer-events:none so the cursor never leaves the wedge beneath
   (which would make the hover flicker as you cross a letter). */


.page-wrap { padding: 40px 28px; max-width: 800px; margin: 0 auto; }
.page-eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; color: var(--text-muted-on-dark); }
.page-title { font-size: 28px; font-weight: 400; color: var(--text-on-dark); letter-spacing: 0.05em; text-transform: uppercase; }
.page-rule { height: 0.5px; background: var(--rule-on-dark); margin: 20px 0; }
.page-body { font-size: 15px; line-height: 1.9; color: var(--text-soft-on-dark); max-width: 620px; } .page-body p { margin-bottom: 16px; }
.children-section { margin-top: 44px; } .children-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted-on-dark); margin-bottom: 18px; }
.children-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.child-card { border: 0.5px solid var(--rule-on-dark); padding: 18px 16px; cursor: pointer; transition: border-color 0.2s; }
.child-card:hover { border-color: var(--text-muted-on-dark); }
.child-card-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.child-card-title { font-size: 13px; color: var(--text-soft-on-dark); text-transform: uppercase; letter-spacing: 0.07em; }
.principles { list-style: none; } .principles li { padding: 15px 0; border-bottom: 0.5px solid var(--rule-on-dark-subtle); font-size: 14px; color: var(--text-soft-on-dark); line-height: 1.75; }
.principles li span { color: var(--text-on-dark); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.breadcrumb { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted-on-dark); margin-bottom: 26px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb span { cursor: pointer; } .breadcrumb span:hover { color: var(--text-on-dark); } .breadcrumb .sep { color: #7b766f; cursor: default; }
.back-btn { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted-on-dark); cursor: pointer; margin-bottom: 26px; display: inline-block; } .back-btn:hover { color: var(--text-on-dark); }
.feed-item { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 0.5px solid var(--rule-on-dark-subtle); cursor: pointer; }
.feed-item:hover .feed-title { color: var(--text-on-dark); }
.feed-date { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted-on-dark); white-space: nowrap; width: 112px; flex-shrink: 0; }
.feed-cat { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; width: 130px; flex-shrink: 0; }
.feed-title { font-size: 16px; color: var(--text-soft-on-dark); transition: color 0.15s; }

.principles-heading { margin-top: 2px; margin-bottom: 10px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted-on-dark); }
.branch-principles { list-style: none; max-width: 680px; margin-top: 4px; }
.branch-principles li { padding: 17px 0; border-bottom: 0.5px solid var(--rule-on-dark-subtle); font-size: 15px; line-height: 1.75; color: var(--text-soft-on-dark); }
.section-block { margin-top: 46px; }
.section-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted-on-dark); margin-bottom: 14px; }
.article-list { border-top: 0.5px solid var(--rule-on-dark-subtle); }
.article-row { display: grid; grid-template-columns: 118px 142px 1fr; gap: 16px; padding: 20px 0; border-bottom: 0.5px solid var(--rule-on-dark-subtle); cursor: pointer; align-items: baseline; }
.article-row:hover .article-list-title { color: var(--text-on-dark); }
.article-date { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted-on-dark); white-space: nowrap; }
.article-meta { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.article-list-title { font-size: 17px; color: var(--text-soft-on-dark); transition: color 0.15s; line-height: 1.35; }
.article-dek { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--text-muted-on-dark); max-width: 560px; }
.empty-state { padding: 20px 0; border-top: 0.5px solid var(--rule-on-dark-subtle); border-bottom: 0.5px solid var(--rule-on-dark-subtle); color: var(--text-muted-on-dark); font-size: 13px; line-height: 1.7; }

/* Full-width warm reading surface for long-form articles and essays. */
.article-view,
.longform-view {
  background: var(--article-surface);
  color: var(--article-text-light);
  min-height: calc(100vh - 47px);
  border-top: 1px solid var(--article-rule-light);
}

.article-shell,
.longform-shell {
  max-width: 760px;
  padding-top: 46px;
  padding-bottom: 72px;
}

.article-view .breadcrumb,
.article-view .page-eyebrow,
.longform-view .breadcrumb,
.longform-view .page-eyebrow {
  color: var(--article-muted-light);
}

.article-view .breadcrumb span:hover,
.longform-view .breadcrumb span:hover {
  color: var(--article-title-light);
}

.article-view .breadcrumb .sep,
.longform-view .breadcrumb .sep {
  color: #aaa297;
}

.article-view .page-rule,
.longform-view .page-rule {
  background: var(--article-rule-light);
}

.article-title-display,
.longform-title {
  font-family: var(--font-article);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--article-title-light);
  text-transform: none;
  text-align: left;
  max-width: 700px;
}

.article-subtitle-display,
.longform-subtitle {
  display: none;
  max-width: 700px;
  margin-top: 10px;
  font-family: var(--font-article);
  font-weight: 400;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--article-muted-light);
  text-align: left;
}

.article-content,
.longform-content {
  margin-top: 28px;
  max-width: 700px;
  font-family: var(--font-article);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.66;
  color: var(--article-text-light);
  text-align: left;
}

.article-content p,
.longform-content p {
  margin: 0 0 0.95em 0;
  text-indent: 0;
}

.article-content em,
.article-content i,
.longform-content em,
.longform-content i {
  font-style: italic;
  font-weight: 400;
}

.article-content strong,
.longform-content strong {
  font-weight: 600;
}

.article-content blockquote,
.longform-content blockquote {
  margin: 1.35em 0;
  padding-left: 1.15em;
  border-left: 1px solid var(--article-rule-light);
  color: #3a342e;
  font-style: italic;
}

.article-content blockquote p,
.longform-content blockquote p {
  margin-bottom: 0.8em;
}

.article-content h2,
.longform-content h2 {
  margin: 2.1em 0 0.8em;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--article-muted-light);
}

.article-content ol,
.longform-content ol {
  margin: 0.5em 0 0 1.3em;
  padding: 0;
  color: var(--article-muted-light);
}

.article-content li,
.longform-content li {
  margin-bottom: 0.7em;
  padding-left: 0.2em;
}

/* Footnote styling — added to support Markdown-generated footnotes.
   Keeps reference markers small and the notes block visually quiet. */
.article-content sup,
.longform-content sup {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}
.article-content .footnotes,
.longform-content .footnotes {
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--article-rule-light);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--article-muted-light);
}
.article-content .footnotes ol,
.longform-content .footnotes ol {
  margin-left: 1.1em;
}
.article-content .footnotes li,
.longform-content .footnotes li {
  margin-bottom: 0.55em;
}
.article-content .footnotes a,
.longform-content .footnotes a {
  color: var(--article-muted-light);
  text-decoration: none;
}

@media (max-width: 760px) {
  .page-wrap { padding: 34px 22px; }
  .article-shell, .longform-shell { max-width: 100%; padding-top: 40px; padding-bottom: 64px; }
  .article-title-display, .longform-title { max-width: 100%; letter-spacing: -0.02em; }
  .article-content, .longform-content { max-width: 100%; line-height: 1.64; }

  /* Give the wheel more room on phones. The wheel and its labels scale
     together, so a physically larger wheel means larger, legible labels.
     Reclaim side padding and let the wheel grow toward the viewport width. */
  #home { padding: 12px 6px 20px; }
  .wheel-stage { width: min(100%, 96vw); }
}

@media (max-width: 640px) {
  /* The wordmark and links stay on ONE line at every width — the
     clamp-based .nav rules further down handle the shrink. No stacking. */
  .article-row, .feed-item { display: block; }
  .article-meta, .feed-cat { margin-top: 8px; }
  .article-list-title, .feed-title { margin-top: 8px; }
}

@media (max-width: 420px) {
  .page-wrap { padding: 30px 18px; }
  .article-shell, .longform-shell { padding-top: 34px; padding-bottom: 58px; }
  .article-title-display, .longform-title { font-size: clamp(2rem, 11vw, 2.35rem); line-height: 1.08; }
  .article-content, .longform-content { font-size: 1.125rem; line-height: 1.62; }
  .article-subtitle-display, .longform-subtitle { font-size: 1.18rem; line-height: 1.24; }
  .article-content p, .longform-content p { margin-bottom: 0.9em; }
}


/* ============================================================
   PHASE 1 — ROUTING, LINKS, FOCUS
   ============================================================ */

/* Everything that used to be a clickable <div> is now a real <a>.
   Strip the default link chrome so the visual design is unchanged,
   then re-add meaning through focus and hover states. */
a { color: inherit; text-decoration: none; }

.nav-logo, .nav-links a { cursor: pointer; }
.nav-links a:hover { opacity: 0.75; }

/* Wheel wedges are wrapped in <a>. Keep the pointer cursor and make
   keyboard focus visible on the wedge itself. */
.wedge-link, .center-link { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.wedge-link:focus-visible .wedge,
.center-link:focus-visible circle {
  stroke: #f4f1ea;
  stroke-width: 2.5;
  stroke-opacity: 0.9;
}

/* A single, consistent focus ring everywhere else. */
a:focus-visible:not(.wedge-link):not(.center-link),
.article-row:focus-visible,
.child-card:focus-visible {
  outline: 2px solid var(--text-on-dark);
  outline-offset: 3px;
}

/* Headings receive focus when content changes (router moves focus
   here) — don't paint a ring for that programmatic focus. */
h1:focus { outline: none; }

/* Article rows and topic cards are links now: keep them block-level
   so the existing grid/box layout still applies. */
.article-row { display: grid; color: inherit; }
.child-card { display: block; color: inherit; }

/* The semantic hierarchy under the wheel. Present for keyboard and
   screen-reader users; visually hidden until focused. */
.wheel-index {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.wheel-index:focus-within {
  position: static;
  width: auto; height: auto;
  margin: 24px auto 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  max-width: 620px;
  padding: 18px 20px;
  border: 0.5px solid var(--rule-on-dark);
}
.wheel-index ul { list-style: none; margin: 0; padding: 0; }
.wheel-index ul ul { margin-left: 18px; }
.wheel-index li { padding: 4px 0; }
.wheel-index a {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft-on-dark);
}
.wheel-index a:hover { color: var(--text-on-dark); }

/* 404 */
.notfound-links { list-style: none; margin-top: 8px; }
.notfound-links li { padding: 12px 0; border-bottom: 0.5px solid var(--rule-on-dark-subtle); }
.notfound-links a {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft-on-dark);
}
.notfound-links a:hover { color: var(--text-on-dark); }

/* Empty states now use the exact approved wording and carry no link. */
.empty-state { padding: 22px 0; }


/* ============================================================
   PHASE 2 — SURFACE SYSTEM, HOMEPAGE STATES, MOBILE WHEEL
   ============================================================ */

:root {
  /* The warm reading surface, named for use anywhere on the site. */
  --warm-surface: #f3f0e8;
  --warm-title:   #171512;
  --warm-text:    #24211d;
  --warm-muted:   #6f6a62;
  --warm-rule:    #d8d1c5;
}

/* ---- the black / warm split -------------------------------- */
/* Near-black: navigation, structure, headings, the wheel.
   Warm beige: everything you read. The edge between them is a
   clean full-width horizontal line. No cards, no corners, no
   shadows. */
.warm-surface {
  background: var(--warm-surface);
  color: var(--warm-text);
  border-top: 1px solid var(--warm-rule);
  width: 100%;
}
.warm-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 28px 88px;
  transition: opacity 180ms ease;
}
.warm-inner.fading { opacity: 0; }

/* Dark heading strip above a warm section (Recent, 404). */
.page-head { background: var(--site-bg); padding: 40px 0 34px; }
.page-head .page-wrap { padding-top: 0; padding-bottom: 0; }

/* ---- homepage hero ----------------------------------------- */
.wheel-hero {
  text-align: center;
  padding: 44px 24px 40px;
  max-width: 680px;
  margin: 0 auto;
}
.hero-line {
  font-family: var(--font-article);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text-on-dark);
}
.hero-hint {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}

/* The wheel keeps its own scale; the hero adds the breathing room. */
#wheel-view { background: var(--site-bg); }
#wheel-view .wheel-stage { margin: 0 auto 56px; }

/* ---- the centre stone -------------------------------------- */
.center-text { transition: fill 160ms ease; }
.center-text-soft   { fill: #5a564e; }
.center-text-strong { fill: #2b2823; }
.center-link:hover .center-text-soft   { fill: #46423b; }
.center-link:hover .center-text-strong { fill: #14120f; }
.center-link:hover ~ * { }              /* no-op, keeps specificity honest */
#centerHit { transition: none; }
.center-link:hover #centerHit {
  opacity: 0.06;
  fill: #ffffff;
}

/* ---- content states beneath the wheel ---------------------- */
.content-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.content-eyebrow a:hover { text-decoration: underline; }
.content-title {
  font-family: var(--font-article);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--warm-title);
}
.content-section { margin-top: 46px; }
.content-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-muted);
  margin-bottom: 18px;
}

/* Latest-essay / centrepiece feature. No image, no card, no border. */
.feature-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.feature-date {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--warm-muted);
}
.feature-title {
  margin-top: 14px;
  font-family: var(--font-article);
  font-weight: 600;
  font-size: clamp(1.65rem, 3vw, 2.05rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--warm-title);
  max-width: 620px;
}
.feature-dek {
  margin-top: 12px;
  font-family: var(--font-article);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--warm-muted);
  max-width: 600px;
}
.feature-link {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-title);
  border-bottom: 1px solid var(--warm-rule);
  padding-bottom: 3px;
}
.feature-link:hover { border-bottom-color: var(--warm-title); }

/* Branch principles: four bullets, Newsreader, generous air, no boxes. */
.principles-list {
  list-style: none;
  margin-top: 30px;
  max-width: 680px;
}
.principles-list li {
  position: relative;
  padding: 20px 0 20px 22px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: var(--font-article);
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--warm-text);
}
.principles-list li:last-child { border-bottom: none; }
.principles-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 32px;
  width: 7px; height: 1px;
  background: var(--accent, var(--warm-muted));
}

/* Topic links: two columns on desktop, thin rules, no cards. */
.topic-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}
.topic-link {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  color: var(--warm-title);
}
.topic-link-name {
  font-family: var(--font-article);
  font-size: 1.12rem;
  line-height: 1.3;
}
.topic-link:hover .topic-link-name {
  color: var(--accent, var(--warm-title));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Quiet link back to the parent branch. */
.back-link {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-muted);
}
.back-link:hover { color: var(--warm-title); }

/* ---- editorial index on warm surfaces ---------------------- */
.warm-surface .article-list { border-top: 1px solid rgba(0,0,0,0.08); }
.warm-surface .article-row {
  display: grid;
  grid-template-columns: 118px 142px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  align-items: baseline;
  color: inherit;
}
.warm-surface .article-date {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-muted);
  white-space: nowrap;
}
.warm-surface .article-meta {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.warm-surface .article-list-title {
  font-family: var(--font-article);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--warm-title);
}
.warm-surface .article-row:hover .article-list-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.warm-surface .article-dek {
  margin-top: 7px;
  font-family: var(--font-article);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--warm-muted);
  max-width: 560px;
}
.warm-surface .empty-state {
  padding: 24px 0;
  font-family: var(--font-article);
  font-size: 1.05rem;
  color: var(--warm-muted);
  border: none;
}
.warm-surface .notfound-links li { border-bottom: 1px solid rgba(0,0,0,0.08); }
.warm-surface .notfound-links a { color: var(--warm-title); }
.warm-surface .notfound-links a:hover { text-decoration: underline; }

/* Mobile topic links appear after a branch is selected. */
.mobile-topics { display: none; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
  .warm-inner { padding: 48px 22px 64px; }
  .wheel-hero { padding: 30px 20px 26px; }


  /* Editorial index stacks on phones. */
  .warm-surface .article-row { display: block; }
  .warm-surface .article-meta { margin-top: 8px; }
  .warm-surface .article-list-title { margin-top: 8px; }

  .topic-links { grid-template-columns: 1fr; }
}

/* Touch feedback: a brief contrast lift, no hover dependency. */
@media (hover: none) {
  .wedge {
  cursor: pointer;
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 1.2;
  transition: stroke-opacity 150ms ease, stroke-width 150ms ease;
}
  .wedge:active { stroke-opacity: 0.6; stroke-width: 2.2; }
}

@media (prefers-reduced-motion: reduce) {
  #wheelRoot { transition: none; }
  .warm-inner { transition: none; }
}


/* ============================================================
   PHASE 3 — WHEEL LEGIBILITY, HOVER, TOUCH, LOADING
   ============================================================ */

/* ---- the one instruction that earns its place -------------- */
/* A pointer cursor cannot tell you the wheel TURNS, and phones
   have no hover at all. This is the only thing a visitor cannot
   otherwise guess, so it is the only thing we say. */
.wheel-hint {
  text-align: center;
  margin: 6px auto 30px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}

/* ---- §8 LABEL LEGIBILITY ----------------------------------- */
/* The marble runs light at the centre and dark at the rim, so a
   label's background changes as the wheel turns. Measured, the old
   treatment gave 1.0-4.0 contrast depending on position: some
   labels vanished, others shouted.

   Fix: give every glyph its own light halo (a stroke painted behind
   the fill). The letters then sit on a consistent ground no matter
   what marble is underneath, and contrast lands at 6.3-12.6 in every
   resting position. Selection changes ink weight and halo strength,
   not hue — so a selected label gets clearer, never invisible. */
/* The outer labels get EXACTLY what the inner ones get: the branch
   colour on stone, one hairline edge, nothing more. Earlier attempts
   at a thicker halo and a deeper "ink" measured better for contrast
   but read as heavy, muddy, and pasted-on — and they flattened the
   marble's warmth. Same treatment inside and out. */
/* The labels keep their colours and their weight. The only help they get
   is the thinnest white outline that still does something: 0.9px, held
   just visible. Enough to lift a glyph off the marble in any rotation;
   not enough to read as piping stuck on the stone. */
/* The labels are bright branch colours sitting on a gradient that runs
   from pale marble to dark. Measured, the ink lands at almost exactly the
   same LUMINANCE as the mid-tone stone the topic labels cross (contrast
   1.2-1.5). Same-brightness text is the hardest case there is: the eye has
   no edge to lock onto, only a hue shift, which barely registers at 13px.

   A pale halo cannot fix this. It is lighter than the ink, so it only
   creates an edge where the stone is already dark — which is why it had to
   grow thick and started reading as piping stuck on the marble.

   A DARK edge works everywhere. It is darker than the pale stone (8.5),
   the mid stone (5.6), the darker stone (3.1), and darker than the ink
   itself (3.7-4.3). The eye always finds the boundary, in every rotation.
   And it is what a carved letter actually is: the incision sits in shadow.

   A whisper of light on the opposite side completes the carve. */
#wheelRoot .parent-label,
#wheelRoot .branch-label {
  paint-order: stroke fill;
  stroke: #33302a;
  stroke-width: 0.75;
  stroke-opacity: 0.55;
  stroke-linejoin: round;
  transition: stroke-opacity 180ms ease, fill 180ms ease;
}
/* Selection reads as a firmer incision, not brighter text. */
#wheelRoot .parent-label.is-selected,
#wheelRoot .branch-label.is-selected {
  stroke-opacity: 0.68;
}

/* ---- §7 HOVER AND SELECTED STATES -------------------------- */
/* Resting selected state stays QUIETER than hover, so hover always
   reads as "this is what you are about to do". */
.wedge {
  cursor: pointer;
  transition: stroke-opacity 150ms ease, stroke-width 150ms ease;
}
/* One strictly-increasing progression. Declared before the hover rules so
   hover always wins (same specificity, so source order decides).

   Every state must be FIRMER than the one below it. The wedges previously
   carried an inline stroke-width of 1.7 (branch) and 0.95 (topic), while
   .is-selected set 1.5 — so selecting a branch made its outline THINNER than
   an unselected one, and hovering could look like the line was thinning out.
   The inline widths are gone; this is the only ladder.

     rest      1.2 / 0.30
     selected  1.8 / 0.45
     third     2.6 / 0.65
     hovered   4.2 / 0.95   */
.wedge.is-selected {
  stroke-opacity: 0.45;
  stroke-width: 1.8;
}

/* THE WHOLE-THIRD CUE — only on a branch that is NOT selected.
   Clicking there rotates the wheel, and the third is what moves, so the
   third is what lights up. No brightness() filter: filtering an SVG path
   re-rasterises the marble beneath it and washes the stone out. */
.wedge.hot {
  stroke-opacity: 0.65;
  stroke-width: 2.6;
}

/* THE INDIVIDUAL BOX — the one actually under the cursor.
   A firm outline around that box alone, so it is unmistakable which
   piece you are about to click. This reads on the selected third (where
   there is no whole-third cue) and on top of the third cue elsewhere. */
.wedge.hovered {
  /* The resting stroke is pure black at 0.3 opacity. Hover must go DARKER and
     firmer, never lighter — the previous colour here (#241f18) was a brown
     lighter than black, so hovering made the boundary appear to wash out
     instead of firming up. */
  stroke: #000;
  stroke-opacity: 0.95;
  stroke-width: 4.2;
}

/* The hovered box's own label brightens. This is the signal that says
   "this individual piece is clickable", distinct from the third cue.
   CSS wins over the fill attribute the script sets, so this survives
   updateWheelFocus. */
#wheelRoot .parent-label.lit,
#wheelRoot .branch-label.lit {
  fill: #fdf6e6 !important;
  stroke-opacity: 0.85;
}
/* ---- the centre mission stone ------------------------------ */
/* Restrained engraved response: text firms up, the rim deepens. */
#centerRim {
  transition: stroke 160ms ease, stroke-width 160ms ease;
}
.center-link:hover ~ #centerRim,
.center-link:focus-visible ~ #centerRim,
.center-link:active ~ #centerRim {
  stroke: #000;
  stroke-width: 3.4;
}
.center-link:hover #centerHit { opacity: 0.05; fill: #fffdf8; }

/* ---- §32 LOADING STABILITY --------------------------------- */
/* Reserve the wheel's box before the SVG paints, so nothing shifts. */
.wheel-stage {
  width: 100%;
  max-width: 700px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  contain: layout;
}
/* Near-black is painted immediately, never a white flash. */
html { background: #0d0d0d; }

/* ---- §9 TOUCH FEEDBACK ------------------------------------- */
/* Phones have no hover: a tap must confirm itself. A brief contrast
   lift (~170ms) that resolves into the selected state. */
@media (hover: none) {
  .wedge { transition: stroke-opacity 170ms ease, stroke-width 170ms ease; }
  .wedge:active {
    stroke-opacity: 0.6;
    stroke-width: 2.2;
  }
  .wheel-hint { font-size: 10px; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  .wedge, #wheelRoot .parent-label, #wheelRoot .branch-label { transition: none; }
}

/* ---- header on phones -------------------------------------- */
/* All four links stay visible and on one line. No hamburger. */



/* ============================================================
   PHASE 4 — THE READING LAYER
   ============================================================ */

/* ---- §15 the body column ----------------------------------- */
/* Measure is set in `ch`, so it holds 64-70 characters per line no
   matter how the font renders. The title runs slightly wider than
   the body, as a title should. */
.article-content,
.longform-content {
  margin-top: 30px;
  max-width: 68ch;
  font-family: var(--font-article);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.62;
  color: var(--warm-text);
}
.article-title-display { max-width: 76ch; }
.article-subtitle-display { max-width: 64ch; }

/* Short paragraphs are intentional. Never collapse them. */
.article-content p { margin: 0 0 1.05em 0; }

/* ---- §16 metadata line ------------------------------------- */
/* Cornerstone · [date] · [Branch] · [Topic] — branch and topic click. */
.article-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warm-muted);
}
.article-meta-line a { color: inherit; }
.article-meta-line a:hover { text-decoration: underline; text-underline-offset: 3px; }
.meta-author { color: var(--warm-title); }
.meta-sep { color: #b0a89c; }
.meta-updated { font-style: italic; text-transform: none; letter-spacing: 0.02em; }

.article-view .breadcrumb {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

/* ---- §19 inline citations ---------------------------------- */
/* Quiet superscript markers that link to their source. */
.article-content sup a,
.article-content [data-footnote-ref] {
  font-family: var(--font-ui);
  font-size: 0.62em;
  font-weight: 500;
  text-decoration: none;
  color: var(--warm-muted);
  padding: 0 0.1em;
  vertical-align: super;
  line-height: 0;
}
.article-content sup a:hover { color: var(--warm-title); }
.article-content sup a:target,
.sources-list li:target {
  background: rgba(0,0,0,0.05);
}

/* ---- §18 sources ------------------------------------------- */
.article-end {
  max-width: 68ch;
  margin-top: 64px;
}
.sources-block { margin-bottom: 44px; }
.sources-heading {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-muted);
  padding-top: 22px;
  border-top: 1px solid var(--warm-rule);
  margin-bottom: 24px;
}
/* Hanging numerals: the number sits in the margin, the text aligns
   flush. The list numbers itself — nothing is typed by hand. */
.sources-list {
  list-style: none;
  counter-reset: src;
  margin: 0;
  padding: 0;
}
.sources-list li {
  counter-increment: src;
  position: relative;
  padding-left: 2.4em;
  margin-bottom: 1.15em;
  font-family: var(--font-article);
  font-size: 16px;
  line-height: 1.55;
  color: var(--warm-text);
}
.sources-list li::before {
  content: counter(src) ".";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2em;
  text-align: right;
  padding-right: 0.5em;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--warm-muted);
}
.sources-list li p { margin: 0; }
.sources-list a { color: var(--warm-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--warm-rule); }
.sources-list a:hover { text-decoration-color: var(--warm-title); }
/* The back-link to the citation stays small and quiet. */
.sources-list [data-footnote-backref] {
  margin-left: 0.4em;
  font-family: var(--font-ui);
  font-size: 12px;
  text-decoration: none;
  color: var(--warm-muted);
}
.sources-list [data-footnote-backref]:hover { color: var(--warm-title); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- §20-21 endmatter -------------------------------------- */
.end-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--warm-rule);
}
/* A text action. No icon row, no floating rail, no filled button. */
.copy-link {
  background: none;
  border: none;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-muted);
  cursor: pointer;
}
.copy-link:hover { color: var(--warm-title); }
.copy-status {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-muted);
}
.end-back { margin-top: 30px; }
.end-back a {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-muted);
}
.end-back a:hover { color: var(--warm-title); text-decoration: underline; text-underline-offset: 3px; }

.end-related { margin-top: 44px; }
.related-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-muted);
  margin-bottom: 12px;
}
.related-link { display: block; }
.related-title {
  display: block;
  font-family: var(--font-article);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--warm-title);
}
.related-link:hover .related-title { text-decoration: underline; text-underline-offset: 3px; }
.related-dek {
  display: block;
  margin-top: 6px;
  font-family: var(--font-article);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--warm-muted);
}

/* ---- §24 links on warm surfaces ---------------------------- */
/* In body text: underlined, because a reader should see a link.
   In navigation and indexes: bare at rest, underlined on hover/focus. */
.article-content p a,
.article-content li a,
.article-content blockquote a {
  color: var(--warm-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: #b9b1a4;
}
.article-content p a:hover { text-decoration-color: var(--warm-title); }
/* Citation markers are not body links: keep them bare. */
.article-content sup a { text-decoration: none; }

.warm-surface a:focus-visible,
.article-view a:focus-visible,
.copy-link:focus-visible {
  outline: 2px solid var(--warm-title);
  outline-offset: 3px;
}

/* ---- §23 no reading furniture ------------------------------ */
/* No progress bar, no sticky TOC, no floating rail, no sticky header. */
.article-view { position: static; }

@media (max-width: 760px) {
  .article-content, .longform-content { font-size: 18px; line-height: 1.6; max-width: 100%; }
  .article-title-display, .article-subtitle-display { max-width: 100%; }
  .article-end { max-width: 100%; }
  .article-meta-line { font-size: 11px; gap: 6px; }
}


/* ============================================================
   PHASE 5 — FOOTER AND CHROME
   ============================================================ */

/* ---- §27 footer -------------------------------------------- */
/* Restrained. No newsletter, no social clutter, no large mark. */
.site-footer {
  background: var(--site-bg);
  border-top: 0.5px solid var(--rule-on-dark);
  padding: 46px 34px 54px;
}
.footer-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.footer-name {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.footer-line {
  margin-top: 10px;
  max-width: 42ch;
  font-family: var(--font-article);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted-on-dark);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}
.footer-nav a:hover { color: var(--text-on-dark); }
.footer-nav a:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 3px; }

@media (max-width: 640px) {
  .site-footer { padding: 34px 20px 40px; }
  .footer-inner { flex-direction: column; gap: 24px; }
  .footer-nav { gap: 18px; }
}

/* ---- §32 loading stability --------------------------------- */
/* Newsreader swaps in without reflowing the page. */
body { font-display: swap; }


/* ============================================================
   HOMEPAGE — RECENT ESSAYS
   ============================================================ */

.home-recent-heading {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-muted);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--warm-rule);
  margin-bottom: 4px;
}

/* Each row carries a thin rule in its branch colour. That is the branch
   identity — architectural and quiet. The alternative, an outline around
   the letterforms, degrades the type: it thickens strokes unevenly, muddies
   the counters, and reads as decoration stuck on rather than structure. */
.essay-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 26px 0 26px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-left: 2px solid var(--accent);
  color: inherit;
  transition: border-left-width 140ms ease, padding-left 140ms ease;
}
.essay-row:hover {
  border-left-width: 4px;
  padding-left: 16px;
}
.essay-row:last-child { border-bottom: none; }

.essay-row-meta { display: flex; flex-direction: column; gap: 6px; }
.essay-row-date {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-muted);
  white-space: nowrap;
}
.essay-row-branch {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.essay-row-body { display: block; }

/* The title reads as a link: it underlines on hover, in the branch colour.
   Interaction without decorating the letterform. */
.essay-row-title {
  display: block;
  font-family: var(--font-article);
  font-size: 1.42rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--warm-title);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: text-decoration-color 140ms ease;
}
.essay-row:hover .essay-row-title,
.essay-row:focus-visible .essay-row-title {
  text-decoration-color: var(--accent);
}
.essay-row-dek {
  display: block;
  margin-top: 8px;
  font-family: var(--font-article);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--warm-muted);
  max-width: 58ch;
}

.home-all {
  display: inline-block;
  margin-top: 34px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-muted);
}
.home-all:hover { color: var(--warm-title); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .essay-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 14px;
  }
  .essay-row:hover { padding-left: 12px; }
  .essay-row-meta { flex-direction: row; gap: 12px; flex-wrap: wrap; }
  .essay-row-title { font-size: 1.3rem; }
}


/* Keep the complete wheel on phones, matching the desktop and live-site
   design. The SVG scales as one unit, so every label stays aligned with
   its original wedge. */
@media (max-width: 560px) {
  #wheel-view { padding-left: 0; padding-right: 0; }
  .wheel-stage { width: min(100%, 100vw); max-width: 100vw; }
  .wheel-hint { margin-bottom: 14px; }
}


/* All four section links remain visible and readable on one line. */
.nav {
  padding: clamp(10px, 2.2vw, 26px) clamp(8px, 2.8vw, 34px);
  gap: clamp(4px, 1.2vw, 16px);
}
.nav-logo {
  font-size: clamp(11px, 2.05vw, 22px);
  letter-spacing: clamp(0.04em, 0.6vw, 0.2em);
  white-space: nowrap;
}
.nav-links {
  gap: clamp(4px, 1.9vw, 30px);
  font-size: clamp(10.5px, 1.28vw, 15px);
  letter-spacing: clamp(0.01em, 0.28vw, 0.14em);
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* ---- the selected third, lit as one piece of stone ---------- */
/* A translucent warm wash over the whole third — inner wedge and its four
   topic wedges together — so the selection reads as one continuous
   illuminated section rather than five separate pieces.

   Opacity, not filter(): a brightness() filter re-rasterises the marble
   gradient underneath and flattens its warmth. A wash lifts luminance
   while the stone shows through. */
.branch-glow {
  opacity: 0;
  transition: opacity 260ms ease;
  mix-blend-mode: soft-light;
}
.branch-glow.is-selected { opacity: 0.55; }


/* On phones the complete wheel is smaller, so give every label a firmer
   carved edge without changing its geometry or placement. */
@media (max-width: 560px) {
  #wheelRoot .parent-label {
    font-weight: 700;
    letter-spacing: 0.2px;
  }
  #wheelRoot .parent-label,
  #wheelRoot .branch-label {
    font-weight: 700;
    stroke-width: 0.6;
    stroke-opacity: 0.65;
  }
}


/* ---- Cornerstone feature row (home + centre): title, date, read essay ---- */
.center-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  margin-top: 6px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--warm-rule);
}
.center-row-title {
  font-family: var(--font-article);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--warm-title);
}
.center-row-title:hover { text-decoration: underline; }
.center-row-date {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-muted);
}
.center-row-link {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-title);
  border-bottom: 1px solid var(--warm-rule);
  padding-bottom: 3px;
}
.center-row-link:hover { border-bottom-color: var(--warm-title); }