/* Totipote site kit — the SHARED stylesheet of the three-site family
 * (totipote_com / totipote_org / totipote_net experiment faces).
 *
 * EXPERIMENT TISSUE (2026-08-24, untracked): lives under /ui/ because that is
 * the one asset root every vhost mounts, so the same file can serve the family
 * at /n/{site}/ today and at three domain roots later. Layers over
 * /ui/styles/platform.css and /ui/sitekit/site.css (linked first by each page);
 * this file only adds the family's own components: the site switcher, shelf
 * rows, the twin sidebar layout, the login card, the refusal toast. Same
 * tokens, same voice, no new palette. */

/* ── The family sections (the batch-1 contract) ──────────────────────
 * The totipote.com homepage look — colored full-width bands with generous
 * vertical rhythm — is already a shared vocabulary, and every face page
 * loads it (platform.css + ui/sitekit/site.css precede this sheet). A site
 * page is a stack of bands:
 *
 *   <section class="t-section">                 white band
 *   <section class="t-section t-section-alt">   grey band
 *   <section class="t-section t-section-dark">  dark band (inverted text)
 *
 * each holding <div class="t-container"> and usually
 *   <div class="section-header"><h2>…</h2><p>…</p></div>
 * Code sits in <pre class="code-block"> (its own deeper dark). A page's top
 * is <section class="hero hero--page"> (below); a page's end mirrors the
 * hero with <section class="cta family-close">. Nothing here redefines the
 * band values — the tokens are the single source; this comment is the map. */

/* ── THE PAGE HERO — the first pane of every top-level sub-page ───────
 * (Round 3 ruling S1: one page-hero, everywhere, across com / org / net.)
 *
 *   <section class="hero hero--page">
 *     <div class="t-container">
 *       <h1 class="hero-brand">Networks</h1>
 *       <p class="hero-tagline">One short sentence.</p>
 *       <!-- optional --> <div class="hero-actions">…</div>
 *     </div>
 *   </section>
 *
 * That is the WHOLE contract: three elements, no page-local CSS, no
 * variants. `about-hero` (black title, 140/80 rhythm, `.lead` instead of
 * `.hero-tagline`) is RETIRED from the family faces — it was the defect
 * Nathan named on com/spec.
 *
 * The lede is one short sentence in the register of com/networks (S2);
 * longer framing belongs in the first band below, not up here.
 *
 * Placement: a direct child of <main>, ABOVE any .spec-page-layout — that
 * wrapper is display:flex and would make the hero a flex item.
 *
 * The facet canvas is compatible: /ui/sitekit/hero-facets.js paints into the
 * first .hero on the page, and .hero--page is position:relative +
 * overflow:hidden so the canvas is contained (this is how net's splash
 * gets the animation, S5). */

/* ── THE BOOK-LEAF CAROUSEL — one implementation, every page ──────────
 * (Round 3 ruling S3: "the pages of a book", never a per-page copy.)
 *
 *   <div class="leaf-carousel">
 *     <div class="leaf-nav">
 *       <button type="button" class="leaf-arrow" data-dir="-1" aria-label="Previous">‹</button>
 *       <span class="leaf-count" aria-live="polite"></span>
 *       <button type="button" class="leaf-arrow" data-dir="1"  aria-label="Next">›</button>
 *     </div>
 *     <div class="leaf-stage" tabindex="0" role="group" aria-roledescription="carousel">
 *       <article class="leaf-card" style="--la:#1a5f9c"> … </article>
 *       …
 *     </div>
 *   </div>
 *
 * Fill .leaf-stage with .leaf-card elements (any source — rows, static
 * markup), then hand the CONTAINER to the initializer:
 *
 *   TP.carousel(document.querySelector('.leaf-carousel'));
 *
 * Card interior, so two carousels on two pages are the same object:
 *   <div class="leaf-preview" data-mono="…"><img …></div>   (optional 16:9)
 *   <div class="leaf-body">
 *     <h3>Title</h3>
 *     <p class="leaf-text">One line.</p>
 *     <p class="leaf-note">A quieter second line.</p>
 *     …any kit rows (.shelf-card-meta, .shelf-card-actions)…
 *   </div>
 * `--la` on the card is its accent (the top rule and the monogram).
 *
 * The look: the current card centred, its neighbours peeking FLAT at the
 * left and right edges — no rotation, no tilt, no scale. Advancing slides
 * one card sideways, like turning a leaf, and wraps at both ends.
 * Arrows, click-a-leaf and ←/→ all step; prefers-reduced-motion gets the
 * same states with no animation. Card width is one knob, --leaf-w, set on
 * the container when a page wants a wider or narrower book. */

/* ── Site switcher: com / org / net under the wordmark ───────────────
 * Constraint (Nathan): the two blocks must be the SAME WIDTH. Solved by
 * construction: the locator is a one-column grid whose track is sized by the
 * wordmark alone (the switcher opts out of sizing via width:0/min-width:100%,
 * then stretches to the track). Three equal thirds inside. Whatever the
 * wordmark measures — any font, any zoom — the switcher measures exactly.
 * row-gap 0 + line-height 1 keep the switcher TIGHT against the wordmark
 * (Nathan, 2026-08-27 review, com item 1). */
.t-nav-locator {
  display: grid;
  grid-template-columns: max-content;
  justify-items: start;
  row-gap: 0;
}
.t-nav-locator .t-nav-brand,
.t-nav-locator .footer-brand { width: max-content; line-height: 1; text-decoration: none; }
.site-switcher {
  width: max-content;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* design · research · admin */
  gap: 2px;
  line-height: 1;
}
.site-switcher a {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 2px 0 2.5px;
  border-radius: 3px;
  color: var(--t-text-3);
  text-decoration: none;
  font-weight: 600;
}
.site-switcher a:hover { color: var(--t-blue); background: var(--t-blue-tint); }
.site-switcher a.current { background: var(--t-blue); color: #fff; }
.site-switcher a.current:hover { background: var(--t-blue-dark); color: #fff; }

.t-nav-link.current { color: var(--t-blue); font-weight: 600; }

/* [hidden] wins over any author display (.t-btn and .hero-actions are display:flex),
   on every page the kit is loaded on: a thing marked hidden is never painted. */
[hidden] { display: none !important; }

/* ── Shelf rows (net: origin shelves) ─────────────────────────────── */
.shelf-row { margin: 0 0 40px; }

.shelf-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; scrollbar-width: thin;
}
.shelf-card {
  scroll-snap-align: start;
  flex: 0 0 250px;
  border: 1px solid var(--t-border);
  border-radius: 8px;
  background: var(--t-bg);
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.shelf-card h3 { margin: 0; font-size: 1.05rem; }
.shelf-card .shelf-tagline { color: var(--t-text-2); font-size: 0.9rem; margin: 0; flex: 1; }
.shelf-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.shelf-chip {
  font-size: 11px; padding: 1px 8px 2px; border-radius: 10px;
  background: var(--t-bg-alt); color: var(--t-text-2); border: 1px solid var(--t-border);
}
.shelf-chip.designing { background: var(--t-yellow-tint); color: var(--t-yellow-dark); border-color: transparent; }
.shelf-card-actions { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; }
.shelf-card-actions a { color: var(--t-blue); text-decoration: none; }
.shelf-card-actions a:hover { text-decoration: underline; }
.shelf-card-actions .shelf-noDoor { color: var(--t-text-3); }
.star-btn {
  margin-inline-start: auto; border: 1px solid var(--t-border); background: var(--t-bg);
  border-radius: 12px; padding: 1px 9px 2px; font-size: 0.85rem; cursor: pointer;
  color: var(--t-text-2);
}
.star-btn:hover { border-color: var(--t-blue); color: var(--t-blue); }
.star-btn[disabled] { cursor: default; opacity: 0.6; }

/* ── Twin layout: sidebar + article (experience, cases) ────────────── */
.twin { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding-bottom: 64px; }
.twin-side { position: sticky; top: 76px; align-self: start; }
.twin-side-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-text-3); margin: 0 0 8px; font-weight: 700;
}
.twin-side nav { display: flex; flex-direction: column; gap: 2px; }
.twin-side a {
  color: var(--t-text-2); text-decoration: none; font-size: 0.92rem;
  padding: 5px 10px; border-inline-start: 2px solid var(--t-divider); border-radius: 0 4px 4px 0;
}
.twin-side a:hover { color: var(--t-blue); background: var(--t-blue-tint); }
.twin-side a.active { color: var(--t-blue); border-inline-start-color: var(--t-blue); background: var(--t-blue-tint); font-weight: 600; }
.twin-article { max-width: 660px; }
.twin-article .twin-persona {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-text-3); font-weight: 700; margin: 0 0 4px;
}
.twin-article h2 { margin: 0 0 6px; font-size: 1.6rem; }
.twin-article .twin-summary { color: var(--t-text-2); font-style: italic; margin: 0 0 20px; }
.twin-article p { line-height: 1.65; color: var(--t-text); margin: 0 0 16px; }
.twin-nav { display: flex; justify-content: space-between; margin-top: 40px; gap: 12px; }
.twin-nav a { color: var(--t-blue); text-decoration: none; font-size: 0.92rem; }
.twin-nav a:hover { text-decoration: underline; }
.twin-jump { display: none; margin: 0 0 20px; }
.twin-jump select {
  font: inherit; padding: 6px 10px; border: 1px solid var(--t-border);
  border-radius: 6px; background: var(--t-bg); color: var(--t-text); width: 100%;
}
@media (max-width: 760px) {
  .twin { grid-template-columns: 1fr; gap: 0; }
  .twin-side { display: none; }
  .twin-jump { display: block; }
}

/* ── Login card ────────────────────────────────────────────────────── */
.login-card {
  border: 1px solid var(--t-border); border-radius: 8px; padding: 28px;
  background: var(--t-bg); box-shadow: 0 1px 3px rgba(20, 30, 39, 0.06);
}
.login-card h1 { margin: 0 0 4px; font-size: 1.4rem; }
.login-card .login-sub { color: var(--t-text-2); font-size: 0.9rem; margin: 0 0 20px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 0.85rem; color: var(--t-text-2); margin-bottom: 4px; }
.login-field input {
  width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--t-border);
  border-radius: 6px; background: var(--t-bg); color: var(--t-text); box-sizing: border-box;
}
.login-field input:focus { outline: 2px solid var(--t-blue-tint-2); border-color: var(--t-blue); }
.login-error {
  display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: 6px;
  background: var(--t-error-tint); color: var(--t-error); font-size: 0.88rem;
}
.login-error.show { display: block; }
.login-note { color: var(--t-text-3); font-size: 0.85rem; margin-top: 16px; }
.login-note a { color: var(--t-blue); }
.login-hint { color: var(--t-text-3); font-size: 0.8rem; margin: 4px 0 0; }
.login-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; color: var(--t-text-2); line-height: 1.4; margin: 2px 0 16px; cursor: pointer; }
.login-consent input { margin-top: 3px; flex-shrink: 0; }
.login-consent a { color: var(--t-blue); }

/* ── Refusal toast (the network answering in its own voice) ────────── */
.tp-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  max-width: 440px; background: var(--t-dark-bg, #1a2530); color: #fff;
  padding: 12px 16px; border-radius: 8px; font-size: 0.88rem; line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); z-index: 60; display: none;
}
.tp-toast.show { display: block; }
.tp-toast .tp-toast-rule { color: var(--t-yellow); font-size: 0.78rem; margin-top: 4px; }

/* ── Footer additions ──────────────────────────────────────────────── */
.footer-meta { color: var(--t-text-3); font-size: 0.8rem; margin-top: 6px; }
.footer-meta a { color: var(--t-text-2); }
.footer-sites a { color: inherit; text-decoration: none; }
.footer-sites a:hover { color: var(--t-blue); }

/* ── Shelf blurb (quiet second paragraph on a card, when present) ──── */
.shelf-card .shelf-blurb { color: var(--t-text-3); font-size: 0.82rem; margin: 0; }

/* ── The spec book (org) ───────────────────────────────────────────── */
.spec-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
.spec-norm {
  font-size: 0.78rem; color: var(--t-blue-dark); background: var(--t-blue-tint);
  padding: 2px 10px 3px; border-radius: 10px;
}
.spec-cited {
  font-size: 0.78rem; color: var(--t-green-dark); background: var(--t-green-tint);
  padding: 2px 10px 3px; border-radius: 10px;
}
.spec-cites { font-size: 0.78rem; color: var(--t-text-3); }
.spec-cites a { color: var(--t-blue); text-decoration: none; margin-inline-end: 2px; }
.spec-pre {
  background: var(--t-bg-alt); border: 1px solid var(--t-border); border-radius: 6px;
  padding: 10px 14px; font-family: ui-monospace, monospace; font-size: 0.82rem;
  overflow-x: auto; margin: 0 0 16px; line-height: 1.5;
}
.spec-tablewrap { overflow-x: auto; margin: 0 0 16px; }
.spec-table { border-collapse: collapse; font-size: 0.88rem; min-width: 50%; }
.spec-table th, .spec-table td {
  border: 1px solid var(--t-border); padding: 6px 12px; text-align: left;
  vertical-align: top; line-height: 1.5;
}
.spec-table th { background: var(--t-bg-alt); font-weight: 600; }
.spec-quote {
  border-inline-start: 3px solid var(--t-border-strong); margin: 0 0 16px; padding: 4px 14px;
  color: var(--t-text-2);
}
.twin-article h3.spec-sub { margin: 34px 0 6px; font-size: 1.2rem; }
.twin-article h4 { margin: 20px 0 6px; font-size: 1.0rem; }
.twin-article ul { margin: 0 0 16px; padding-inline-start: 22px; }
.twin-article li { line-height: 1.6; margin-bottom: 4px; }
.twin-article code {
  background: var(--t-bg-alt); border: 1px solid var(--t-divider); border-radius: 4px;
  padding: 0 5px; font-size: 0.85em;
}

/* ── The married book (spec/schema): the old /spec page's look ───────
 * The plain opener in full ink before the contract voice, entries separated
 * like chapters, and the worked example as code-beside-walkthrough. */
.vs-body { max-width: 720px; margin: 0 auto; }
.vs-body p { line-height: 1.7; color: var(--t-text-2); margin: 0 0 14px; text-align: center; }
.vs-body a { color: var(--t-blue); }
.g-graph a.active { color: var(--t-blue); border-inline-start-color: var(--t-blue); }
.g-orch a.active {
  color: var(--t-green-dark); border-inline-start-color: var(--t-green-dark);
  background: var(--t-green-tint);
}
.g-conf a.active {
  color: var(--t-yellow-dark); border-inline-start-color: var(--t-yellow-dark);
  background: var(--t-yellow-tint);
}
.book-sec {
  border-bottom: 1px solid var(--t-divider);
  padding-bottom: 40px; margin-bottom: 40px;
}
.book-sec:last-child { border-bottom: none; }
.spec-plain { margin: 0 0 14px; }
.spec-plain p {
  font-size: 1.02rem; color: var(--t-text); line-height: 1.7; margin: 0 0 12px;
}
.example-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; margin: 18px 0 4px; align-items: start;
}
.example-pair .example-code { margin: 0; }
.example-desc h4 { margin: 0 0 8px; font-size: 0.95rem; }
.example-desc p {
  font-size: 0.92rem; color: var(--t-text-2); line-height: 1.65; margin: 0 0 10px;
}
@media (max-width: 768px) { .example-pair { grid-template-columns: 1fr; } }

/* ── Independently scrollable rails + spy affordances ──────────────── */
.twin-side {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-inline-end: 4px;
}
.book-sec { scroll-margin-top: 84px; }
.book-sec h3, .twin-article .spec-sub { scroll-margin-top: 84px; }
.schema-req {
  font-size: 0.72rem; color: var(--t-yellow-dark); background: var(--t-yellow-tint);
  padding: 1px 6px 2px; border-radius: 8px; margin-inline-start: 4px; vertical-align: middle;
}
.passage-missing { color: var(--t-error); background: var(--t-error-tint); padding: 0 6px; border-radius: 4px; font-size: 0.85em; }

/* ── The family hero, page-sized ─────────────────────────────────────
 * The homepage hero's look for any other page top: same centered column,
 * same type, a shorter share of the screen (an interior page should not
 * spend 88vh saying its own name). Markup contract at the head of this file.
 *
 * SELF-SUFFICIENT ON PURPOSE (round 3, S1). Every declaration the component
 * needs is written here at .hero--page scope rather than inherited from
 * /ui/sitekit/site.css's .hero / .hero-brand / .hero-tagline. Two things follow,
 * and both are the ruling: the hero renders identically on a page that loads
 * only platform.css + this sheet, and a later sheet's single-class rule
 * (0,1,0) — specbook.css is linked AFTER this one on the spec, schema and
 * directory faces — cannot reach past these (0,2,0) selectors. The base rules
 * stay where they are for the two homepages, which use bare .hero. */
.hero--page {
  min-height: min(420px, 58vh);
  padding: 110px 0 64px;
  display: grid;
  align-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero--page .hero-brand {
  font-family: var(--t-font);
  font-size: 44px;
  font-weight: 800;
  /* Totiblue, not ink: the black title was the defect Nathan named. */
  color: var(--t-blue);
  letter-spacing: -0.03em;
  text-transform: lowercase;
  line-height: 1;
  margin: 0 0 20px;
}
.hero--page .hero-tagline {
  font-size: var(--t-text-lg);
  line-height: 36px;
  font-weight: var(--t-weight-normal);
  color: var(--t-text-2);
  margin: 0 0 16px;
}
/* No max-width here, deliberately. .t-container's `margin: 0 auto` disables
 * grid stretch, so the hero's column shrink-wraps to its longest line and the
 * auto margins centre it — the same construction as the homepage hero. A
 * max-width on the tagline would cap that column and narrow the whole block
 * on any page whose lede is long. Ledes are short by ruling S2 instead. */
.hero--page .hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* The two type steps, at .hero--page scope for the same reason as the rest:
 * the component carries its own responsive behavior rather than borrowing
 * ui/sitekit/site.css's. A page hero drops to 36px one breakpoint earlier than
 * the homepage's does — an interior title has less room to spend. */
@media (max-width: 768px) {
  .hero--page { padding: 96px 0 48px; }
  .hero--page .hero-brand { font-size: 36px; }
  .hero--page .hero-tagline { font-size: var(--t-text-md); line-height: 28px; }
}
@media (max-width: 480px) {
  .hero--page .hero-tagline { font-size: var(--t-text-base); line-height: 24px; }
}

/* ── The closing band: the hero's vertical mirror ────────────────────
 * (Nathan, com item 13: "Try it out" mirrors the first section.) Same
 * centered grid, same presence, at the foot of the page. Compose with the
 * existing .cta type classes: <section class="cta family-close">. The
 * .hero-graph svg may sit inside it; the mirror flips it upside down. */
.family-close {
  position: relative;
  overflow: hidden;
  min-height: min(420px, 55vh);
  display: grid;
  align-content: center;
}
.family-close .hero-graph { transform: translate(-50%, -50%) rotate(180deg); animation: none; }
.family-close .cta-title { font-family: var(--t-font); font-size: 40px; letter-spacing: -0.03em; }
@media (max-width: 768px) {
  .family-close .cta-title { font-size: 30px; }
}

/* ── The book-leaf carousel ──────────────────────────────────────────
 * Markup contract at the head of this file; behavior in sitekit.js
 * (TP.carousel). Lifted out of com/networks' page-local <style> block so
 * there is exactly one of these in the family (round 3, S3).
 *
 * WHY THE LEAVES ARE FLAT. The lifted version tilted the neighbours
 * — rotate(±8deg) scale(.94) — and Nathan read that as spin: "this
 * on-the-globe thing". A book does not rotate its pages. The neighbours
 * are now the same size, the same plane and the same top edge as the card
 * on stage, sitting under it and showing only their outer margin: a sheaf
 * of leaves seen face-on. Do not reintroduce a transform here that is not
 * a translation — the whole ruling is that the motion is sideways. */
.leaf-carousel { --leaf-w: min(400px, 86vw); }
.leaf-nav {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 8px; margin: 0 0 14px;
}
.leaf-nav[hidden] { display: none; }
.leaf-arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--t-border);
  background: var(--t-bg); color: var(--t-text-2); font-size: 20px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.leaf-arrow:hover { border-color: var(--t-blue); color: var(--t-blue); }
.leaf-count {
  min-width: 3.5em; text-align: center; font-size: 0.85rem;
  color: var(--t-text-3); font-variant-numeric: tabular-nums;
}

.leaf-stage { position: relative; overflow: hidden; }
.leaf-stage:focus-visible { outline: 2px solid var(--t-blue); outline-offset: 4px; border-radius: 8px; }
.leaf-card {
  --la: var(--t-blue);
  position: absolute; top: 4px; left: 0;
  width: var(--leaf-w);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--t-border); border-top: 4px solid var(--la);
  border-radius: 8px; background: var(--t-bg);
}
.leaf-card.is-current { z-index: 3; box-shadow: 0 12px 32px rgba(16, 42, 67, 0.12); }
/* The leaves: under the stage card, and inert to the pointer so a click on
 * one lands on the stage and turns the page. Same paper as the card on stage
 * — no dimming, only a lighter shadow and the stage's clip. What separates
 * the current card is that it is centred and lifted, which is what separates
 * the page you are reading from the ones under your thumb. */
.leaf-card.is-prev, .leaf-card.is-next {
  z-index: 2; pointer-events: none;
  box-shadow: 0 6px 18px rgba(16, 42, 67, 0.08);
}
.leaf-card.is-off { z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; }
/* Motion is opt-in: reduced-motion users get the same states, applied
 * instantly — the leaves still show, nothing animates. */
@media (prefers-reduced-motion: no-preference) {
  .leaf-card {
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
                opacity 0.45s ease, visibility 0.45s ease;
  }
  .leaf-stage { transition: height 0.3s ease; }
}
/* The FIRST layout is instant, always. Cards start life at transform:none —
 * a stack at the stage's left edge — so an animated first pass shows the
 * whole deck sliding in from the left on page load, which is not a page
 * being turned. The initializer sets this for one frame and drops it. */
.leaf-carousel.leaf-instant .leaf-card,
.leaf-carousel.leaf-instant .leaf-stage { transition: none; }

/* Card interior — the same object wherever a carousel appears. */
.leaf-preview {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--t-border); background: var(--t-bg-alt);
}
.leaf-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.leaf-mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--t-font); font-size: 64px; font-weight: 800; color: var(--la);
  background: linear-gradient(160deg, var(--t-bg-alt), var(--t-bg));
}
.leaf-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.leaf-body h3 { margin: 0; font-size: 1.15rem; color: var(--t-text); }
.leaf-text { color: var(--t-text-2); font-size: 0.92rem; margin: 0; }
.leaf-note { color: var(--t-text-3); font-size: 0.84rem; margin: 0; flex: 1; }
/* A card keeps its own colors on a dark band. `.t-section-dark p` (0,1,1) in
   platform.css outspecifies the two rules above (0,1,0), so a leaf card on a
   dark section rendered its body text in the band's light-on-dark color while
   the card itself stayed white — measured 2.1:1, failing AA, on com's root
   page. The card is a self-contained object: its surface does not change with
   the band, so its text must not either. Two-class selectors win without
   !important, and they are no-ops on every light band. */
.leaf-body .leaf-text { color: var(--t-text-2); }
.leaf-body .leaf-note { color: var(--t-text-3); }

/* ── The auth control (header) ───────────────────────────────────────
 * Signed out: a Sign in button that opens the pane below. Signed in: a
 * button reading the person's name, opening a dropdown (platform.css's
 * .nav-dropdown skin — hover, focus AND click all open it). Always the
 * platform's language: one identity everywhere. */
.nav-auth .nav-dropdown { left: auto; right: 0; }
/* The door holds Sign out: it opens on a click or a key, never because the pointer
   passed over your name, and its ARIA state is the truth. */
.nav-auth:not(.is-open) .nav-dropdown { display: none; }
.nav-auth.is-open .nav-dropdown { display: flex; }
.nav-user-btn .nav-caret { margin-inline-start: 4px; }
.nav-dropdown .nav-dropdown-divider { border: 0; border-top: 1px solid var(--t-divider); margin: 4px 0; }
.nav-dropdown .nav-dropdown-signout {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--t-divider); margin-top: 4px; padding: 10px 16px 8px;
  font: inherit; font-size: var(--t-text-sm); color: var(--t-text-2); cursor: pointer;
}
.nav-dropdown .nav-dropdown-signout:hover { background: var(--t-blue-tint); color: var(--t-blue); }
.nav-mobile-divider { border: 0; border-top: 1px solid var(--t-divider); margin: 6px 0; }
#nav-mobile-door { border-top: 1px solid var(--t-divider); margin-top: 6px; padding-top: 6px; }
.nav-mobile-auth {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: var(--t-space-2) 0; font: inherit; font-size: var(--t-text-base);
  font-weight: var(--t-weight-medium); color: var(--t-text-2); cursor: pointer;
}
.nav-mobile-auth:hover { color: var(--t-blue); }

/* ── The sign-in pane ────────────────────────────────────────────────
 * A dialog on the current page — signing in and out both leave you exactly
 * where you were (Nathan, com item 2). The card reuses the .login-* rules
 * above, which now exist for this pane (the login PAGE retired into it). */
.auth-pane {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: start center;
  padding: 96px 16px 32px;
  background: rgba(20, 30, 39, 0.45);
  overflow-y: auto;
}
.auth-pane[hidden] { display: none; }
.auth-pane .login-card { position: relative; width: min(380px, 92vw); box-shadow: var(--t-shadow-lg); }
.auth-pane-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: var(--t-text-3); cursor: pointer; padding: 4px;
}
.auth-pane-close:hover { color: var(--t-text); }

/* ── The footer, mirroring the header ────────────────────────────────
 * (Nathan, com item 14.) Same locator block — wordmark with the switcher
 * tight under it — same links, plus the copyright, minus any auth control.
 * The switcher's site links replace the old footer-sites row. */
.site-footer .footer-brand { font-size: 18px; }
.site-footer .site-switcher a { font-size: 8.5px; }