/* radix — technical / instrument.
   One file, no webfonts, no imported anything. The type and the grid carry it.
   Deliberately shares nothing with the anon property: no Atkinson, no IBM Plex,
   no navy/warm-paper, no teal, no gold. */

:root {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --ground: #F2F1EE;
  --panel:  #FFFFFF;
  --ink:    #17191A;
  --dim:    #6A6F71;
  --rule:   #D6D4CE;
  --accent: #A55231;   /* 4.83:1 on ground, 5.45:1 on panel. Was #C2603A = 3.70:1, which failed AA for every prose link. Hue and saturation unchanged. */

  --w: 62rem;
  --gap: clamp(1.4rem, 4vw, 3rem);
}

/* Three theme states, and the guard is what makes the toggle work in BOTH directions:
   - bare :root            light, and the default
   - OS dark, unless he has explicitly asked for light
   - explicit dark, which must beat a light OS
   Written 2026-08-25 after shipping a theme button that set an attribute no rule read. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121415;
    --panel:  #171A1B;
    --ink:    #E7E5E0;
    --dim:    #8B918F;
    --rule:   #262A2B;
    --accent: #D9764E;
  }
}
:root[data-theme="dark"] {
    --ground: #121415;
    --panel:  #171A1B;
    --ink:    #E7E5E0;
    --dim:    #8B918F;
    --rule:   #262A2B;
    --accent: #D9764E;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.9375rem;   /* was 15px hard -- that overrode the reader's own browser text-size setting */
  line-height: 1.65;
}

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gap); }

/* ── masthead ─────────────────────────────────────────────── */
.mast {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 2.4rem 0 1.1rem;
  border-bottom: 1px solid var(--ink);
}
.mast a { color: inherit; text-decoration: none; }
.mast .name { font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; }
.mast nav { display: flex; gap: 1.4rem; font-size: .82rem; }
.mast nav a { color: var(--dim); }
.mast nav a:hover, .mast nav a[aria-current="page"] { color: var(--accent); }

/* ── the index of work ────────────────────────────────────── */
.lede { max-width: 42rem; margin: 2.6rem 0 3.4rem; font-size: 1.05rem; }
.lede .big { font-size: 1.5rem; line-height: 1.35; margin: 0 0 1rem; font-weight: 400; }

.section-label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
  margin: 0 0 .2rem;
}

.entry {
  display: grid; grid-template-columns: 3.2rem 1fr auto;
  gap: 0 1rem; align-items: baseline;
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.entry:hover { background: var(--panel); }
.entry .n { color: var(--accent); font-size: .9rem; }
.entry h2, .entry h3 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: .01em; }
.entry .line { grid-column: 2; color: var(--dim); margin: .35rem 0 .5rem; }
.entry .meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem; color: var(--dim); }
.entry .meta span::before { content: "· "; opacity: .5; }
.entry .meta span:first-child::before { content: ""; }
.entry .state { grid-column: 3; grid-row: 1; font-size: .78rem; color: var(--dim); white-space: nowrap; }

/* ── prose ────────────────────────────────────────────────── */
.prose { max-width: 40rem; }
.prose h1 { font-size: 1.6rem; line-height: 1.3; margin: 2.6rem 0 .4rem; }
.prose h2 { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
            margin: 2.8rem 0 .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
.prose p { margin: 0 0 1.1rem; }
.prose .sub { color: var(--dim); }
.prose a { color: var(--accent); }
.tools { list-style: none; margin: 0; padding: 0; }
.tools li { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.tools .t { display: block; }
.tools .d { color: var(--dim); font-size: .92rem; }

.spec { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 1.4rem 0; }
.spec th, .spec td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec th { color: var(--dim); font-weight: 400; width: 11rem; }

.cta {
  display: inline-block; margin: 1.6rem 0 0; padding: .8em 1.6em;
  border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
}
.cta:hover { background: var(--accent); color: var(--ground); }

/* ── foot ─────────────────────────────────────────────────── */
.foot {
  margin: 5rem 0 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--dim);
}
.foot a { color: var(--dim); }

/* ── the mark ─────────────────────────────────────────────────
   radix is the name of the √ sign itself: the radical sign, over the radicand.
   So the site's device is its own name in one glyph, present in every system
   font, costing nothing to load. Used twice and nowhere else — the masthead,
   and the marker on a claim you can check. */
.mast .name::before {
  content: "√";
  color: var(--accent);
  margin-right: .5em;
  font-size: 1.15em;
  line-height: 1;
}

/* ── the check block — the page showing its own working ──────── */
.check {
  border-left: 2px solid var(--accent);
  background: var(--panel);
  padding: 1.1rem 1.3rem .4rem;
  margin: .9rem 0 3rem;
  max-width: 46rem;
}
.check > p:first-child { margin-top: 0; }
.check p { margin: 0 0 .9rem; }
.check ul { list-style: none; margin: 0 0 .9rem; padding: 0; }
.check li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .8rem;
  color: var(--dim);
}
.check li::before {
  content: "√";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
}
.check li b, .check li strong { color: var(--ink); font-weight: 600; }

.fine { font-size: .82rem; color: var(--dim); }
.check .fine { margin-bottom: .9rem; }
.byline { font-size: .82rem; color: var(--dim); margin: .8rem 0 0; }

/* ── the closing ask ─────────────────────────────────────────── */
.ask { margin: .9rem 0 1rem; max-width: 46rem; }
.ask p { margin: 0 0 .8rem; }
.ask a { color: var(--accent); }

/* ── install routes ──────────────────────────────────────────── */
.route { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.route-head { margin: 0 0 .35rem; }
.route-head .n { color: var(--accent); font-size: .9rem; margin-right: .8rem; }
.route-name { font-size: 1.05rem; font-weight: 600; }
.route-line { margin: 0 0 .5rem; }
.route-url { margin: 0 0 .6rem; font-size: .88rem; }
.route .fine { margin: .5rem 0 0; }

.fp { margin: 0; font-size: .78rem; }
.fp-label {
  display: block; color: var(--dim);
  letter-spacing: .12em; text-transform: uppercase; font-size: .68rem;
  margin-bottom: .2rem;
}
.fp code {
  display: block; word-break: break-all; line-height: 1.5;
  color: var(--ink); background: var(--panel);
  padding: .5rem .6rem; border: 1px solid var(--rule);
}
.spec code { font-size: .92em; }

/* ── the floor: focus, motion, selection ─────────────────────── */
a:focus-visible, .cta:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: var(--ground); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── offers, practice, exchange ──────────────────────────────── */
.his {
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  margin: 1.4rem 0;
  color: var(--ink);
}
.lead-line { font-size: 1.12rem; line-height: 1.45; margin: 1.4rem 0 1.6rem; }
.after-list { margin: 1rem 0 3rem; }

.entry-static { cursor: default; }
.entry-static:hover { background: transparent; }
.entry-static .detail { grid-column: 2; margin-top: .6rem; }
.entry-static .detail p { margin: 0 0 .8rem; color: var(--dim); }
.entry-static .detail .fp-label { margin-top: 1rem; }

.route .fp-label { margin-bottom: .4rem; }

/* ── UX floor: bypass, landmark, backlink ────────────────────── */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--ground);
  padding: .7em 1.2em; z-index: 10; text-decoration: none;
}
.skip:focus {
  left: 0; top: 0;
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.backlink { font-size: .82rem; margin: 2.4rem 0 0; }
.backlink a { color: var(--dim); text-decoration: none; }
.backlink a:hover { color: var(--accent); }
.prose .backlink + h1 { margin-top: .4rem; }

/* an entry is a link; say so on hover and on focus rather than only tinting */
.entry:hover h2, .entry:hover h3, .entry:focus-visible h2, .entry:focus-visible h3 { color: var(--accent); }
.entry { transition: background .12s ease; }
.state-head { font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--ink);
              border-bottom: 0; margin: 2.4rem 0 .4rem; padding-bottom: 0; }

/* ── the plain-terms toggle ───────────────────────────────────
   radix/peer and radix/plain are the same voice at two glossary settings.
   This hands that setting to the reader. Default is the denser one, so a
   page with JS switched off shows the full text rather than a gap. */
[data-when="plain"] { display: none; }
html[data-reg="plain"] [data-when="plain"] { display: revert; }
html[data-reg="plain"] [data-when="dense"] { display: none; }

.regtoggle {
  font: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); background: none; cursor: pointer;
  border: 1px solid var(--rule); padding: .4em .8em;
}
.regtoggle:hover { color: var(--accent); border-color: var(--accent); }
.regtoggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.regtoggle .regstate { margin-left: .5em; opacity: .8; }
.mast { align-items: center; }

.chan { font-size: 1.05rem; margin: 0 0 .4rem; }
.chan a, .chan code { color: var(--accent); }

/* ── the reading list ────────────────────────────────────────── */
.booklist { list-style: none; margin: 0 0 2.4rem; padding: 0; }
.booklist li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0 1rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.booklist .bt { color: var(--ink); }
.booklist .ba { color: var(--dim); font-size: .86rem; text-align: right; }
.booklist .bs { color: var(--accent); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

/* ── the portrait ──────────────────────────────────────────────
   His call 2026-08-26: small, to the right of the text. The hover
   pop-out was built and then removed on his word -- it read as a
   gimmick beside copy this plain. Small and still is the whole of it. */
.about-head {
  display: grid; grid-template-columns: minmax(0, 40rem) 13rem;
  gap: 2.4rem; align-items: start; margin-bottom: 1rem;
}
.portrait { margin: 2.6rem 0 0; max-width: 13rem; }
.portrait img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1100 / 1414;      /* holds the box before the file arrives */
  border: 1px solid var(--rule);
  background: var(--panel);
}
.portrait figcaption { margin-top: .5rem; }

/* ── the recommendation box ──────────────────────────────────── */
.recform { display: flex; flex-direction: column; gap: .5rem; max-width: 42rem; margin: 1.4rem 0 2rem; }
.recform label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.recform input, .recform textarea {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule); padding: .6rem .7rem; width: 100%;
}
.recform input:focus-visible, .recform textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.recform .cta { align-self: flex-start; margin-top: .6rem; }

/* ── masthead: grouped nav, and the two reading controls ─────── */
.mast { flex-wrap: wrap; gap: .8rem 1.4rem; }
.mast nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem; font-size: .82rem; }
.navgroup { display: flex; gap: 1.1rem; }
.navgroup + .navgroup { padding-left: 1.1rem; border-left: 1px solid var(--rule); }
.nav-cta { color: var(--accent); }
.controls { display: flex; gap: .5rem; }

/* ── bands ─────────────────────────────────────────────────────
   His correction 2026-08-26: the old .section-label at .72rem was
   "small unseeable and the difference is kinda unclear". A band is
   now a real heading at readable size, plus a frame line saying what
   KIND of thing follows and how you get it. The label alone was
   asking the reader to infer a taxonomy; the frame states it. */
.band { margin: 0 0 4.2rem; }
.band-head {
  font-size: 1.5rem; font-weight: 600; letter-spacing: .01em;
  text-transform: none; color: var(--ink);
  margin: 3.4rem 0 .5rem; padding-top: 1.1rem;
  border-top: 2px solid var(--ink); border-bottom: 0;
}
.band-frame {
  max-width: 44rem; color: var(--dim);
  margin: 0 0 1.8rem;
}

/* the ladder — answers "the order of topics is not so obvious" up front */
.ladder { max-width: 44rem; margin: 0 0 3.4rem; padding: 1.2rem 1.4rem; border: 1px solid var(--rule); background: var(--panel); }
.ladder-head { margin: 0 0 .7rem; color: var(--dim); }
.ladder ol { margin: 0; padding-left: 1.4rem; }
.ladder li { margin: .3rem 0; }
.ladder a { color: var(--ink); text-decoration: none; }
.ladder a:hover b { color: var(--accent); }

/* the row's own affordance. Every catalogue row is a link now, and it says so
   in words rather than relying on a hover that was almost invisible. */
.entry { position: relative; }
.entry .go {
  grid-column: 2; margin-top: .6rem;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.entry::before {
  content: ""; position: absolute; left: -.9rem; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: 0; transition: opacity .18s ease;
}
.entry:hover::before, .entry:focus-visible::before { opacity: 1; }
.entry:hover .go { text-decoration: underline; }

.tag-proposed {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  padding: .15em .5em; margin-left: .5em; vertical-align: .18em;
  font-weight: 400; white-space: nowrap;
}

/* ── the evidence strip ────────────────────────────────────────
   Deliberately NOT .entry styling. These are not for sale, and a row
   that looks gettable is what blurred the old "Systems I run" band
   into the offers above it. Different shape = different kind. */
.strip { margin: 0 0 4.2rem; }
.striplist {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.striplist li {
  border: 1px dashed var(--rule); color: var(--dim);
  padding: .45rem .8rem; font-size: .84rem;
}

.when { color: var(--accent); margin: 0 0 1.4rem; font-size: .92rem; }

/* ── mobile masthead height ────────────────────────────────────
   The 46rem block gave every .navgroup width:100% and a border-top,
   so the grouping that tidied the desktop top turned into three full
   rows on a phone — roughly 8–10rem of chrome before the lede.
   Groups now flow inline and wrap on their own, separated by a rule
   rather than by a line break. */

/* ── the workshop format ladder ────────────────────────────────
   His ruling 2026-08-26: Re-Authoring is modular, 30 minutes to a
   multi-day intensive, with a different subtitle per length. Rows
   are a ladder rather than a catalogue -- none of them is separately
   bookable, they are one workshop at five sizes. */
.formats { list-style: none; margin: 0 0 1rem; padding: 0; }
.formats li {
  display: grid; grid-template-columns: 3.2rem 10rem 1fr; gap: .2rem 1rem;
  align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.formats .n { color: var(--accent); font-size: .9rem; }
.formats .f-len { color: var(--ink); font-weight: 600; }
.formats .f-sub { color: var(--ink); }
.formats .f-line { grid-column: 2 / -1; color: var(--dim); margin: .3rem 0 .4rem; }
.formats .meta { grid-column: 2 / -1; }
.f-booked {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  padding: .15em .5em; margin-left: .4em; white-space: nowrap;
}



/* ═══ MOBILE — EVERY responsive rule lives here, and nowhere else ═══
   Consolidated 2026-08-26. Before this there were THREE separate
   (max-width: 46rem) blocks, and the last one silently undid the nav
   bracketing the first one set up -- which is exactly the bug he
   reported. One block per breakpoint, so a later edit cannot quietly
   overrule an earlier one from across the file. Add mobile rules HERE. */

@media (max-width: 60rem) {
  /* the about head stops being two columns before the portrait would crush */
  .about-head { grid-template-columns: 1fr; gap: 0; }
  .portrait { max-width: 17rem; margin: 2rem auto .5rem; }
  .portrait figcaption { text-align: center; }
}

@media (max-width: 46rem) {
  /* masthead — the grouping stays (he asked for it back), but three
     full-width rules and three 44px rows were eating ~270px before any
     content. The bracket is now a SHORT rule set in the group's own
     left margin, which reads as separation without three heavy lines,
     and the rows are exactly 44px rather than 44px plus padding. */
  .mast { padding: 1rem 0 .7rem; gap: .35rem .8rem; }
  .mast .name { width: 100%; font-size: .92rem; }
  .mast nav { width: 100%; gap: 0; }
  .navgroup { width: 100%; flex-wrap: wrap; gap: 0 1.3rem; position: relative; }
  .navgroup + .navgroup { width: 100%; border-left: 0; padding-left: 0; border-top: 0; }
  .navgroup + .navgroup::before {
    content: ""; position: absolute; left: 0; top: 0;
    width: 2.2rem; height: 1px; background: var(--rule);
  }
  .mast nav a {
    display: flex; align-items: center;
    min-height: 40px; padding: 0;      /* 40px + the 1.3rem column gap stays tappable */
  }
  .controls { width: 100%; gap: .5rem; margin-top: .15rem; }
  .regtoggle {
    flex: 1; text-align: center; min-height: 40px;
    padding: 0 .6em; font-size: .66rem;
    display: flex; align-items: center; justify-content: center;
  }

  /* type and rhythm */
  .lede .big { font-size: 1.28rem; }
  .band-head { font-size: 1.25rem; margin-top: 2.6rem; }
  .band { margin-bottom: 3rem; }
  .ladder { padding: 1rem; }
  .striplist { flex-direction: column; }
  .foot { flex-direction: column; gap: .4rem; }

  /* the workshop ladder */
  .formats li { grid-template-columns: 2.4rem 1fr; }
  .formats .f-sub, .formats .f-line, .formats .meta { grid-column: 2 / -1; }
}

@media (max-width: 34rem) {
  .entry { grid-template-columns: 2.4rem 1fr; }
  .entry .state { grid-column: 2; grid-row: auto; margin-top: .4rem; }
  .entry-static .detail { grid-column: 1 / -1; }
  .booklist li { grid-template-columns: 1fr; }
  .booklist .ba { text-align: left; }
}