/* 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); }
.sub-list { list-style: none; margin: 0 0 1.2rem; padding: 0; color: var(--dim); }
.sub-list li { padding: .15rem 0 .15rem 1.1rem; position: relative; }
.sub-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.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; }

/* ── the workshop waitlist (2026-10-11; redesigned the same day) ── */
/* hidden means hidden: the grid rules below would otherwise override the hidden attribute
   and show every state at once (found by him, 2026-10-11). */
.wl [hidden], .wl[hidden] { display: none !important; }
.wl { max-width: 44rem; margin: 2.2rem 0 3rem; display: grid; gap: 1.6rem; }
.wl > div { display: grid; gap: 1.6rem; }
.wl h1 { margin: 0; font-size: 2rem; font-weight: 400; line-height: 1.15; text-wrap: balance; }
.wl-head { display: grid; gap: .5rem; }
.wl-eyebrow { margin: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.wl-blurb { margin: 0; font-size: 1.12rem; line-height: 1.45; color: var(--dim); max-width: 36rem; }

.wl-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); background: var(--panel); }
.wl-term { display: grid; gap: .2rem; padding: 1rem 1.1rem; align-content: start; min-width: 0; }
.wl-term + .wl-term { border-left: 1px solid var(--rule); }
.wl-k { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.wl-v { font-size: 1.55rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wl-term-key .wl-v { color: var(--accent); }
.wl-s { font-size: .82rem; color: var(--dim); }
@media (max-width: 640px) {
  .wl-terms { grid-template-columns: 1fr; }
  .wl-term + .wl-term { border-left: 0; border-top: 1px solid var(--rule); }
}

.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.wl-steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 11rem) minmax(0, 1fr); gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.wl-steps li::before { content: counter(step); color: var(--accent); font-size: .85rem; }
.wl-when { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 640px) { .wl-steps li { grid-template-columns: 2rem minmax(0, 1fr); } .wl-steps li > span:last-child { grid-column: 2; } }

.wl-more { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .2rem 0; }
.wl-more summary { cursor: pointer; padding: .6rem 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.wl-more[open] { padding-bottom: 1rem; }
.wl-more > * + * { margin-top: .8rem; }
.wl-more > summary + * { margin-top: .2rem; }
.wl-more p { margin-bottom: 0; max-width: 36rem; line-height: 1.55; }
.wl-more .wl-k { display: block; margin-top: 1.2rem; }
.wl-more-steps { margin-bottom: 0; padding-left: 1.9rem; display: grid; gap: .45rem; max-width: 36rem; line-height: 1.5; }
.wl-more-steps li::marker { color: var(--accent); }

.wl-note { margin: 0; padding: .7rem 1rem; border-left: 3px solid var(--accent); background: var(--panel); }
.wl-panel { border: 1px solid var(--rule); background: var(--panel); padding: 1.3rem 1.4rem; display: grid; gap: .6rem; }
.wl-panel.recform { margin: 0; max-width: none; }
.wl-panel p { margin: 0; }
.wl-big { font-size: 1.25rem; }
.wl-or { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); text-align: center; margin: .2rem 0 !important; }
.wl-hint { font-size: .85rem; color: var(--dim); }
.recform .w-check { display: flex; gap: .55rem; align-items: center; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); margin-top: .6rem; }
.recform .w-check input { width: auto; accent-color: var(--accent); }
#w-koha-box { display: grid; gap: .5rem; border-left: 2px solid var(--accent); padding-left: 1rem; }
#w-koha-box label { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); }
#w-estimate { max-width: 10rem; }
.wl-disclaimer { font-size: .82rem; color: var(--dim); border-top: 1px dashed var(--rule); padding-top: .7rem; margin-top: .4rem !important; }
.wl-err { color: var(--accent); font-size: .9rem; }
.wl-link code { overflow-wrap: anywhere; font-size: .85rem; }
.wl-ask { margin: 0; font-size: .92rem; color: var(--dim); }
.wl a { color: var(--accent); text-underline-offset: .15em; }
.wl-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.2rem; margin: .4rem 0; }
.wl-facts dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding-top: .15rem; }
.wl-facts dd { margin: 0; }
.wl-price { font-size: 1.1rem; }
.wl-code-box { display: grid; gap: .25rem; padding: .9rem 1rem; border: 1px dashed var(--accent); }
.wl-code { font-size: 1.6rem; letter-spacing: .12em; color: var(--accent); font-variant-numeric: tabular-nums; }
#w-amount-row { margin: .4rem 0 0; max-width: 12rem; }
.wl-pay { margin: .2rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; overflow-wrap: anywhere; }
.linkish { font: inherit; color: var(--dim); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── membership: the way in (2026-10-11) ───────────────────────── */
#members[data-mode="request"] #m-door { display: none !important; }
#members .wl { margin: 1rem 0 2rem; }
.m-gets { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; max-width: 40rem; }
.mx-route { border: 0; padding: 0; margin: .6rem 0 0; display: grid; gap: .3rem; }
.mx-route legend { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .2rem; }
#mx-apply { display: grid; gap: .5rem; border-left: 2px solid var(--accent); padding-left: 1rem; }
#mx-apply label { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); }
#mx-estimate { max-width: 10rem; }

/* ── 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 */
/* The three crafts (rebrand 2026-10-11): personal development, AI integration, magic. */
.crafts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 3.4rem; }
.craft { display: grid; gap: .3rem; align-content: start; border-top: 1px solid var(--rule); padding-top: .8rem; color: inherit; text-decoration: none; min-width: 0; }
.craft:hover h2, .craft:focus-visible h2 { color: var(--accent); }
.craft .n { color: var(--accent); font-size: .82rem; }
.craft .what { color: var(--dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; }
.craft h2 { font-size: 1.1rem; font-weight: 400; margin: 0; }
.craft p { margin: 0; font-size: .92rem; }
@media (max-width: 640px) { .crafts { grid-template-columns: 1fr; } }
.close-line { margin: 2.4rem 0 0; }
.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. */
.walkthrough {
  counter-reset: walk; list-style: none; margin: 0 0 2rem; padding: 0;
  border-top: 1px solid var(--rule);
}
.walkthrough li {
  counter-increment: walk; position: relative; padding: .85rem 0 .85rem 2.2rem;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.walkthrough li::before {
  content: counter(walk); position: absolute; left: 0; top: .85rem;
  color: var(--accent); font-size: .9rem;
}

.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; display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .78rem; color: var(--dim);
}
.formats .meta span::before { content: "· "; opacity: .5; }
.formats .meta span:first-child::before { content: ""; }
.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; }
}

/* The rules page (2026-09-08): two columns under each rule, shown together — the seam is the
   teaching. Collapses to one column on a narrow screen, myth first. */
.rule { margin: 2.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.rule .rule-head { font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: inherit; margin: 0 0 .4rem; }
.rule .rule-head .n { color: var(--accent); font-size: .9rem; margin-right: .6rem; }
.seam { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; max-width: 62rem; margin-top: .8rem; }
.seam-col p { margin: 0 0 .9rem; }
.seam-label { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.seam-myth p:not(.seam-label) { font-style: italic; }
.cites { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .82rem; color: var(--dim); }
.cites li { margin: .15rem 0; }
.cites a { color: var(--dim); }
@media (max-width: 44rem) { .seam { grid-template-columns: 1fr; } }

/* ── gatherings (/g/) — the door to a private room ─────────────
   Same instrument, two additions: the date as a readout, and the seats as a row of
   cells you can count. Nothing here that is not already a token above. Built 2026-09-09. */
.gather .field {
  width: 100%; font: inherit; background: none; border: 0; border-bottom: 1px solid var(--rule);
  color: inherit; padding: .5em 0; border-radius: 0;
}
.gather select.field { appearance: none; -webkit-appearance: none; }
.gather .field:focus { outline: none; border-bottom-color: var(--accent); }
.g-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; margin: .4rem 0 1.4rem; padding-bottom: .9rem; border-bottom: 1px solid var(--ink); }
.g-day { font-size: 1.35rem; line-height: 1.3; }
.g-hours { color: var(--accent); font-size: .95rem; letter-spacing: .04em; }
.g-tz { flex-basis: 100%; font-size: .82rem; }
.g-place { margin: 0 0 1.6rem; color: var(--dim); }
.g-place::before { content: "√"; color: var(--accent); margin-right: .5em; }
.g-shape { list-style: none; margin: 0 0 1rem; padding: 0; }
.g-shape li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 .6rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.g-shape .g-n { color: var(--accent); font-size: .78rem; letter-spacing: .12em; padding-top: .15rem; }
.g-shape b { font-weight: 600; }
.g-shape .g-line { grid-column: 2; color: var(--dim); font-size: .92rem; }
.g-seatrow { display: flex; gap: .3rem; margin: .2rem 0 .5rem; }
.g-seatrow span { width: 1.1rem; height: 1.1rem; border: 1px solid var(--rule); background: var(--panel); }
.g-seatrow span.taken { background: var(--accent); border-color: var(--accent); }
.g-details .g-address { font-size: 1.15rem; line-height: 1.4; color: var(--ink); font-weight: 600; }

/* the kicker above the title — his note 2026-09-09: more visible, in the accent, aligned with
   the title rather than floating under the masthead, and it names the page in one breath */
.gather .g-kind {
  margin: 2.8rem 0 0; padding: 0; border: 0;
  color: var(--accent); font-size: .9rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
}
.gather .g-kind::before { content: "√"; margin-right: .55em; }
.gather .g-kind + h1 { margin-top: .35rem; }

/* ── events index — the date needs a touch more room than a two-digit sequence number ── */
#ev-upcoming .entry, #ev-past .entry { grid-template-columns: 4.4rem 1fr auto; }
#ev-upcoming .entry .n, #ev-past .entry .n { line-height: 1.3; }

/* ── what people said ──────────────────────────────────────────
   Built 2026-09-10 with nothing in it. Someone else's words are the only
   prose on the property that is not his, so they get the one visual marker
   the site otherwise reserves for the accent: a rule down the left edge,
   and no quotation marks. The attribution sits at .78rem in --dim, the same
   weight as .formats .meta, because who spoke is a fact about the quote
   rather than a second claim beside it. */
.said { list-style: none; margin: 0 0 2rem; padding: 0; }
.said li { padding: 0; margin: 1.4rem 0; }
.said blockquote {
  margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--accent);
}
.said blockquote p { margin: 0; color: var(--ink); }
.said .attr {
  margin: .5rem 0 0 1.1rem; font-size: .78rem; color: var(--dim);
}

/* ── listings: where an app can be got, one badge per route ────────────────── */
.listings { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
.listing { display: grid; grid-template-columns: 1.6rem 1fr; grid-template-rows: auto auto; column-gap: .7rem;
  align-items: center; padding: .75rem .9rem; border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink); text-decoration: none; }
.listing:hover, .listing:focus-visible { border-color: var(--accent); color: var(--accent); }
.listing-glyph { grid-row: 1 / span 2; display: inline-flex; }
.listing-glyph svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.listing-name { font-size: .92rem; letter-spacing: .02em; }
.listing-sub { color: var(--dim); font-size: .78rem; }
.listing:hover .listing-sub { color: inherit; }

/* /events/ → The Wheel (2026-10-20): one panel under his own events */
.ev-wheel { max-width: 44rem; margin: 2.4rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); background: var(--panel); }
.ev-wheel a { color: var(--accent); text-underline-offset: .2em; }