/* Manifold Mathematics — house stylesheet.
   Five palettes: light · dark · brown · green · purple.
   Every page uses the same tokens, so a palette is a token block and nothing more.
   The base :root block IS the light palette; the others override it by [data-theme]. */

:root {
  --shadow:    0 1px 2px rgba(60,50,30,.08), 0 8px 28px rgba(60,50,30,.10);
  --radius:    14px;
  --serif:     'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --maxw:      1140px;

  /* light — cream and ink, the original logo colours */
  --bg:        #f4efe3;
  --bg-deep:   #eae3d3;
  --surface:   #fbf8f1;
  --surface-2: #f0ebdd;
  --border:    #ddd4c0;
  --border-2:  #c9c2ae;
  --ink:       #1a1a1a;
  --ink-dim:   #3a3a38;
  --muted:     #5f5e5a;
  --accent:    #534ab7;
  --accent-dim:#7d75d1;
  --gold:      #9a7420;
  color-scheme: light;
}

/* dark — ink ground, cream type, periwinkle accent */
:root[data-theme='dark'] {
  --bg:        #0e1419;
  --bg-deep:   #090d11;
  --surface:   #131b22;
  --surface-2: #1a232c;
  --border:    #26313c;
  --border-2:  #354350;
  --ink:       #f4efe3;
  --ink-dim:   #c9c2b4;
  --muted:     #8d97a1;
  --accent:    #9d92f0;
  --accent-dim:#6b62b8;
  --gold:      #d4a843;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* brown — golden parchment, brown ink, gold accent */
:root[data-theme='brown'] {
  --bg:        #f7f0df;
  --bg-deep:   #eee3c9;
  --surface:   #fdf9ef;
  --surface-2: #f2e9d4;
  --border:    #e2d4b4;
  --border-2:  #cdb98f;
  --ink:       #2f2314;
  --ink-dim:   #4d3a24;
  --muted:     #7d6547;
  --accent:    #8a5d12;
  --accent-dim:#b8933f;
  --gold:      #a9761c;
  --shadow:    0 1px 2px rgba(90,65,20,.10), 0 8px 28px rgba(90,65,20,.12);
  color-scheme: light;
}

/* green — deep forest ground, mint accent */
:root[data-theme='green'] {
  --bg:        #0c1512;
  --bg-deep:   #071009;
  --surface:   #10201a;
  --surface-2: #162a22;
  --border:    #234034;
  --border-2:  #315444;
  --ink:       #eaf3ec;
  --ink-dim:   #c2d6c8;
  --muted:     #86a294;
  --accent:    #59d6a0;
  --accent-dim:#2f8e68;
  --gold:      #d4a843;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* purple — deep aubergine ground, lilac accent */
:root[data-theme='purple'] {
  --bg:        #120e1a;
  --bg-deep:   #0c0812;
  --surface:   #1a1426;
  --surface-2: #221a30;
  --border:    #33284a;
  --border-2:  #45375f;
  --ink:       #f1ecf8;
  --ink-dim:   #d0c6e0;
  --muted:     #9a8fb0;
  --accent:    #c09cff;
  --accent-dim:#7d5fc4;
  --gold:      #d4a843;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.35);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: .005em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.28rem; }

p { margin: 0 0 1rem; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 760px; }

.kicker {
  font-family: var(--mono);
  font-size: .705rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .85rem;
}
.kicker.accent { color: var(--accent); }

.lede { font-size: 1.12rem; color: var(--ink-dim); }

/* ---------- header ---------- */

header.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 106px; max-width: 1400px; }

.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 38px; height: 38px; flex: 0 0 auto; }
.brand .word { display: flex; flex-direction: column; line-height: 1; }
.brand .word b { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: .07em; }
.brand .word span { font-family: var(--mono); font-size: .59rem; letter-spacing: .3em; color: var(--muted); margin-top: 5px; }

/* The banner carries the brand on every page except the front, so it is set
   roughly twice the footer's size. The header gets a wider wrap than the rest of
   the site to buy the room this needs beside the navigation. */
.top .brand { gap: 17px; }
.top .brand .mark { width: 66px; height: 66px; }
.top .brand .word b { font-size: 2.6rem; letter-spacing: .06em; }
.top .brand .word span { font-size: .93rem; letter-spacing: .27em; margin-top: 9px; }

nav.main { margin-left: auto; display: flex; align-items: center; gap: 4px; }
nav.main a {
  color: var(--ink-dim); font-size: .885rem; padding: 7px 12px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
}
nav.main a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
nav.main a[aria-current='page'] { color: var(--accent); background: var(--surface-2); }

/* ---------- display-face picker ---------- */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fontsel { flex: 0 0 auto; display: flex; align-items: center; }
.fontsel select {
  font-family: var(--serif); font-size: .92rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; max-width: 160px;
}
.fontsel select:hover { border-color: var(--accent); }

/* ---------- palette picker ---------- */

.palette { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--border-2); position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.swatch i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
}
.swatch:hover { border-color: var(--accent); transform: scale(1.12); }
.swatch[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }

@media (max-width: 1240px) {
  .top .wrap { flex-wrap: wrap; padding-block: 14px; row-gap: 10px; }
  nav.main { order: 3; margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  nav.main::-webkit-scrollbar { display: none; }
  .fontsel { margin-left: auto; }
  .palette { margin-left: 0; }
}

@media (max-width: 620px) {
  .top .brand .mark { width: 46px; height: 46px; }
  .top .brand .word b { font-size: 1.8rem; }
  .top .brand .word span { font-size: .66rem; margin-top: 6px; }
  .top .wrap { min-height: 0; }
}

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

.hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(56px, 8vw, 96px); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background: radial-gradient(58% 52% at 50% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-center .lede, .hero-center .tagline { margin-inline: auto; }

/* The lockup, at the largest size the viewport allows. It escapes the usual .wrap
   so the wordmark can run edge to edge — that width is the ceiling on how big the
   name can be without being clipped. */
.lockup-bleed {
  position: relative;
  /* half the viewport, not all of it — at full bleed the front page read as a
     poster rather than as the top of a site */
  width: min(calc((100vw - 32px) / 2), 1100px);
  margin: 0 auto clamp(26px, 3.5vw, 46px);
}
.lockup { display: flex; flex-direction: column; align-items: center; }
.lockup .mark {
  width: clamp(40px, 5vw, 76px); height: auto;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
/* Both words run the full width. The mark is deliberately smaller than before —
   the type now carries the lockup, and a mark taller than the letters undercuts it. */
.lockup .wordmark { display: block; width: 100%; height: auto; color: var(--ink); }
.lockup .wordmark-2 { color: var(--accent); margin-top: clamp(2px, .35vw, 6px); }
.lockup .wordmark text { font-family: var(--serif); }

.tagline {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  color: var(--ink-dim); margin: clamp(26px, 3.5vw, 40px) 0 0; max-width: 40ch;
}
.hero .lede { font-size: 1.12rem; max-width: 62ch; margin-top: 1.5rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; justify-content: inherit; }
.hero-center .cta-row { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; font-size: .93rem; font-weight: 500;
  border: 1px solid var(--border-2); color: var(--ink); text-decoration: none;
}
.btn:hover { text-decoration: none; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary:hover { filter: brightness(1.08); }

/* ---------- sections ---------- */

section.band { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--border); }
section.band.tint { background: var(--bg-deep); }
.section-head { max-width: 66ch; margin-bottom: 2.6rem; }
.section-head p { color: var(--muted); margin-top: .8rem; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; position: relative;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .93rem; margin-bottom: 0; }
a.card { color: inherit; display: block; transition: border-color .15s, transform .15s; }
a.card:hover { text-decoration: none; border-color: var(--accent-dim); transform: translateY(-2px); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding: 0; list-style: none; }
.hero-center .chips { justify-content: center; }
.chips li {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-dim);
}

/* ---------- the ladder ---------- */

.ladder { display: grid; gap: 0; position: relative; }
.rung {
  display: grid; grid-template-columns: 172px 1fr; gap: 28px;
  padding: 28px 0; border-top: 1px solid var(--border);
}
.rung:first-child { border-top: 0; }
@media (max-width: 720px) { .rung { grid-template-columns: 1fr; gap: 10px; } }

.rung-index .step {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  color: var(--accent); text-transform: uppercase;
}
.rung-index h3 { font-size: 1.45rem; margin: 6px 0 4px; }
.rung-index .range { font-family: var(--mono); font-size: .73rem; color: var(--muted); }
.rung-body .line { font-family: var(--serif); font-style: italic; font-size: 1.14rem; color: var(--ink-dim); margin-bottom: .55rem; }
.rung-body p { color: var(--muted); font-size: .95rem; }

/* ---------- branch split (pure / applied) ---------- */

.branches { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .branches { grid-template-columns: 1fr; } }
.branch {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(26px, 3.5vw, 40px); background: var(--surface);
  display: flex; flex-direction: column; color: inherit;
}
a.branch:hover { text-decoration: none; border-color: var(--accent-dim); }
.branch .glyph { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--accent); margin-bottom: .6rem; }
.branch h2 { font-size: 1.85rem; }
.branch p { color: var(--muted); font-size: .95rem; margin-top: .7rem; }
.branch .more { margin-top: auto; padding-top: 18px; font-size: .87rem; color: var(--accent); font-weight: 500; }

/* ---------- area list ---------- */

.area {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 24px;
}
.area h3 { display: flex; align-items: baseline; gap: 10px; }
.area h3 .n { font-family: var(--mono); font-size: .7rem; color: var(--accent); }
.area > p { color: var(--muted); font-size: .93rem; margin: .5rem 0 0; }

/* ---------- library items ---------- */

.item {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--border);
}
.item:first-child { border-top: 0; }
@media (max-width: 720px) { .item { grid-template-columns: 1fr; } }
.item .meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.item h3 { margin: 8px 0 2px; font-size: 1.3rem; }
.item .sub { font-family: var(--serif); font-style: italic; color: var(--ink-dim); font-size: 1rem; }
.item p { color: var(--muted); font-size: .93rem; margin: .7rem 0 0; max-width: 68ch; }
.item .side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pagecount { font-family: var(--mono); font-size: .72rem; color: var(--muted); }

/* ---------- tools ---------- */

.tool { display: flex; flex-direction: column; height: 100%; }
.tool .sub { font-family: var(--mono); font-size: .72rem; color: var(--accent); letter-spacing: .06em; }
.tool .actions { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.mini {
  font-size: .8rem; padding: 6px 13px; border-radius: 8px;
  border: 1px solid var(--border-2); color: var(--ink-dim); text-decoration: none;
}
.mini:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.mini.solid { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.mini.locked {
  border-style: dashed; color: var(--muted); cursor: default;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- reader ---------- */

.reader-main { display: flex; flex-direction: column; gap: 22px; padding: 34px 0 56px; }
.reader-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.reader-title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.reader-sub { font-family: var(--serif); font-style: italic; color: var(--ink-dim); margin: 4px 0 0; }
.reader-frame {
  width: min(calc(100vw - 40px), 1280px); margin-inline: auto;
  height: min(78vh, 1000px); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.reader-frame object { width: 100%; height: 100%; display: block; border: 0; }
.reader-fallback { padding: 40px; text-align: center; color: var(--muted); }
.reader-note { max-width: 76ch; }

/* ---------- notice ---------- */

.notice {
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; font-size: .9rem; color: var(--ink-dim);
}
.notice strong { color: var(--ink); }

/* ---------- brand strip ---------- */

.brandfiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.brandfile {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  background: var(--surface); color: inherit; display: block;
}
.brandfile:hover { border-color: var(--accent-dim); text-decoration: none; }
.brandfile b { display: block; font-weight: 500; font-size: .9rem; }
.brandfile span { font-family: var(--mono); font-size: .68rem; color: var(--muted); }

/* the five palettes, each lockup shown in its own colours regardless of the
   palette the page is currently wearing — so they must use literal values */
.palettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 16px; margin-top: 24px; }
.pcard {
  margin: 0; padding: 28px 18px 20px; border: 1px solid; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pcard .mark { width: 78px; height: 78px; }
.pcard-word {
  font-family: var(--serif); font-weight: 600; font-size: 1.42rem;
  letter-spacing: .09em; margin: 20px 0 0; line-height: 1;
}
.pcard-sub {
  font-family: var(--mono); font-size: .52rem; letter-spacing: .34em;
  text-transform: uppercase; margin: 8px 0 0;
}
.pcard figcaption {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; margin-top: 20px;
}


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

footer.bottom { border-top: 1px solid var(--border); padding: 56px 0 44px; background: var(--bg-deep); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 12px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 7px; }
.foot-grid a { color: var(--ink-dim); font-size: .89rem; }
.foot-grid a:hover { color: var(--accent); }
.hits { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hits b { color: var(--ink-dim); font-weight: 500; }

.foot-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* ---------- misc ---------- */

.deflist { display: grid; grid-template-columns: 190px 1fr; gap: 12px 24px; font-size: .93rem; }
@media (max-width: 640px) { .deflist { grid-template-columns: 1fr; gap: 2px 0; } .deflist dt { margin-top: 12px; } }
.deflist dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.deflist dd { margin: 0; color: var(--ink-dim); }

.scroll-x { overflow-x: auto; }

/* ------------------------------------------------------------------ prose --
   Body copy for notes written in Markdown (build/posts.mjs). Everything reads
   the palette tokens, so a note recolours with the theme picker like the rest
   of the site. Wide things scroll inside their own box: a table that widens the
   page turns every paragraph on it into a horizontal scroll. */
.prose { max-width: 68ch; font-family: var(--serif); font-size: 1.03rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-family: var(--sans); font-size: 1.32rem; margin-top: 2.6rem; }
.prose h3 { font-family: var(--sans); font-size: 1.08rem; margin-top: 1.9rem; }
.prose a { color: var(--accent); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.2rem 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .35rem; }
.prose blockquote {
  margin: 0; padding: .15rem 0 .15rem 1.1rem;
  border-left: 2px solid var(--accent); color: var(--muted);
}
.prose pre {
  margin: 0; padding: 14px 16px; overflow-x: auto; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.prose pre code { font-family: var(--mono); font-size: .84rem; line-height: 1.6; }
.prose :not(pre) > code {
  font-family: var(--mono); font-size: .86em; padding: 1px 5px;
  border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border);
}
.prose .table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.prose th { font-weight: 600; color: var(--muted); white-space: nowrap; }

/* Contents, shown only when a note has enough headings to need one. */
.toc {
  margin: 0 0 2.2rem; padding: 1rem 1.2rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.toc ul { list-style: none; margin: .5rem 0 0; padding: 0; font-family: var(--sans); font-size: .9rem; }
.toc li + li { margin-top: .3rem; }
.toc li.lvl3 { padding-left: 1.1rem; }
.toc a { color: var(--ink-dim); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }