/* RPGMotor Works brand guide styles (Hallmark base, re-themed for the RPG demo brand) */
@import url("./tokens.css");
@import url("./base.css");

/* ============================================================ shell */
.pr { min-height: 100dvh; }
.pr-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100dvh;
}
.pr-rail {
  position: fixed; top: 0; left: 0; width: var(--rail-w); height: 100dvh; overflow-y: auto;
  scrollbar-width: thin;
  background: var(--color-paper-2);
  border-right: var(--rule-hair) solid var(--color-rule);
  display: flex; flex-direction: column;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  z-index: var(--z-sticky);
}
/* the rail is fixed, so the page column holds its place beside it */
.pr-main { grid-column: 2; }
.pr-brand {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: 0 var(--space-xs) var(--space-lg);
  text-decoration: none; color: var(--color-ink);
}
.pr-logo { width: 100%; max-width: 208px; height: auto; }
.pr-sub { font-size: var(--text-sm); color: var(--color-muted); }

.pr-search { position: relative; margin: 0 0 var(--space-md); }
.pr-search svg {
  position: absolute; left: var(--space-sm); top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--color-muted); pointer-events: none;
}
.pr-search input {
  width: 100%; height: 36px;
  border: var(--rule-hair) solid var(--color-field-edge);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  padding: 0 var(--space-sm) 0 var(--space-xl);
  font-size: var(--text-sm); color: var(--color-ink);
}
.pr-search input::placeholder { color: var(--color-muted); }
.pr-search input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }

.pn { display: flex; flex-direction: column; }
.pn-h {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-ink);
  padding: var(--space-md) var(--space-xs) var(--space-2xs);
}
.pn a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline; gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-control);
  font-size: var(--text-sm); line-height: 1.35;
  color: var(--color-ink-2); text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.pn a > svg { display: none; }
.pn a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.pn a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.pn a.on {
  color: var(--color-accent);
  font-weight: 700;
  background: var(--color-accent-wash);
}
.pn-n { color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: var(--text-xs); text-align: right; }
.pn a.on .pn-n { color: var(--color-accent); }
.pn a.pn-home { grid-template-columns: minmax(0, 1fr); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-xs); }
.pn a.pn-home.on { color: var(--color-accent); }

.pr-foot {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-xs) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.pr-who { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.45; overflow-wrap: anywhere; }
.pr-who:empty { display: none; }
.pr-who a { color: var(--color-ink-2); }
.pr-amp { display: inline-flex; }
.pr-amp img { height: 20px; width: auto; }

.pr-main { min-width: 0; }
.pr-top { display: none; }
.pr-page {
  max-width: 2000px;
  padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
}
/* 3. at 1500px and up a long page has a contents column on the right */
@media (min-width: 1500px) {
  .pr-page.has-toc {
    display: grid; grid-template-columns: minmax(0, 1fr) 232px;
    column-gap: var(--space-2xl); align-items: start;
  }
}
.toc { display: none; }
@media (min-width: 1500px) {
  .has-toc .toc {
    display: block; position: sticky; top: var(--space-xl);
    max-height: calc(100dvh - var(--space-2xl)); overflow-y: auto;
    padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule);
    scrollbar-width: thin;
  }
}
.toc-h { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-xs); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: var(--space-2xs) 0; font-size: var(--text-sm); line-height: 1.35;
  white-space: normal; overflow-wrap: break-word;
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.toc a:hover { color: var(--color-ink); }
.toc a.on { color: var(--color-accent); font-weight: 700; }
.toc a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* very wide screens: more room between the columns, a step up in body size */
@media (min-width: 2200px) {
  .pr-page { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
  .pr-page.has-toc { grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--space-3xl); }
}

/* ============================================================ page head */
.as-panel { font-family: var(--font-body); }
.as-panel > h1 {
  font-size: var(--text-3xl);
  font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.08;
  max-width: 24ch;
  margin: 0 0 var(--space-lg);
  color: var(--color-ink);
}
.page-n {
  display: block; margin: 0 0 var(--space-xs);
  font-size: var(--text-sm); color: var(--color-muted); font-weight: 400;
}
.as-panel h2 {
  font-size: var(--text-section); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.012em; max-width: 48ch;
  margin: var(--space-2xl) 0 var(--space-md);
}
.as-panel h3 {
  font-size: var(--text-title); font-weight: 700; line-height: 1.3;
  max-width: 72ch; margin: var(--space-2xl) 0 var(--space-xs);
}
.as-panel h4 { font-size: var(--text-md); font-weight: 700; margin: var(--space-lg) 0 var(--space-2xs); }
/* Body measure.
   The body rule styles PLAIN paragraphs only: as `.as-panel p` it outranked
   every captioned <p> (.figcap, .sw-note, the specimen lines) and set them all
   at body size. specificity_audit.cjs checks this stays true. */
.as-panel p { font-size: 1.0625rem; line-height: 1.65; color: var(--color-ink-2); max-width: 88ch; margin: 0 0 var(--space-sm); }
.as-panel p.figcap, .as-panel p.sw-note, .as-panel p.pg-more, .as-panel p.photolib-note,
.as-panel p.tm-source, .as-panel p.cfg-hint, .as-panel p.pv-intro {
  font-size: var(--text-sm); color: var(--color-muted); max-width: none;
}
.as-panel ul, .as-panel ol { max-width: 88ch; margin: 0 0 var(--space-md); padding-left: var(--space-lg); color: var(--color-ink-2); }
.as-panel li { font-size: 1.0625rem; }
/* wide screens: text fills its column, so it steps up a size to keep lines readable */
@media (min-width: 1500px) {
  .as-panel p, .as-panel li { font-size: 1.125rem; line-height: 1.65; }
  .as-panel .sec-open-lede { font-size: 1.25rem; }
}
@media (min-width: 2200px) {
  .as-panel p, .as-panel li { font-size: 1.1875rem; }
}
.as-panel li { line-height: 1.6; margin-bottom: var(--space-2xs); }
.as-panel li::marker { color: var(--color-muted); }
.as-panel a { color: var(--color-accent); }
.as-panel a:hover { color: var(--color-accent-2); }
.as-panel b, .as-panel strong { color: var(--color-ink); font-weight: 700; }

/* the lede: the section's opening paragraph, set larger; the file count sits
   on its own line under it as plain text */
.sec-open { margin: 0 0 var(--space-xl); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.as-panel .sec-open-lede { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink); max-width: 80ch; margin: 0; }
.as-panel .sec-stat { display: block; margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.sec-stat b { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }

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

/* ============================================================ guidance prose
   One column, hairlines between rules, no boxes. A subsection is a heading and
   its text; nothing is carded. */
.rules { display: block; margin: 0 0 var(--space-lg); }
.rules.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
.rule { padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.rule-t { font-size: var(--text-title); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-2xs); }
.rule-b p:last-child { margin-bottom: 0; }
.subpanel { margin: var(--space-xl) 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.subpanel-h { margin-top: 0 !important; }
.docsub { font-weight: 700 !important; color: var(--color-ink) !important; margin: var(--space-md) 0 var(--space-2xs) !important; }
.as-doc-start {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: var(--text-sm); color: var(--color-muted);
}
.doc-h2 { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.docblock { margin: 0 0 var(--space-xl); }

.spec-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 var(--space-lg); margin: 0 0 var(--space-lg); }
.spec-card { padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.spec-card .k { font-size: var(--text-sm); color: var(--color-muted); }
.spec-card .v { font-size: var(--text-md); font-weight: 700; color: var(--color-ink); margin-top: var(--space-3xs); }

.as-flag {
  margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg);
  background: var(--color-paper-2);
  border-left: 2px solid var(--color-warn);
}
.as-flag b { display: block; color: var(--color-ink); font-weight: 700; margin-bottom: var(--space-2xs); }
.as-flag p { margin: 0; }

/* tables: horizontal rules only, sentence-case heads */
.as-table-scroll { overflow-x: auto; margin: 0 0 var(--space-lg); }
table.as-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.as-table th {
  text-align: left; font-weight: 700; color: var(--color-ink);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  white-space: nowrap; background: var(--color-paper);
}
table.as-table td {
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: top; line-height: 1.5; color: var(--color-ink-2);
}
.tm-reg { color: var(--color-good); font-weight: 700; }
.tm-pend { color: var(--color-warn); font-weight: 700; }

/* the extracted-document layouts */
.pillar { margin: var(--space-lg) 0; border-top: 2px solid var(--color-ink); }
.pillar-name { font-size: var(--text-title); font-weight: 700; padding: var(--space-sm) 0; }
.pillar-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-lg); }
.pcat-h { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.pcat ul { padding-left: var(--space-md); margin: 0; }
.pcat li { font-size: var(--text-sm); }

.ladder { margin: var(--space-lg) 0; }
.ladder-name { font-size: var(--text-title); font-weight: 700; padding: 0 0 var(--space-xs); border-bottom: 2px solid var(--color-ink); }
.lvl { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.lvl-n { font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.lvl-t { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2); }

.sysblk { margin: var(--space-xl) 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0 var(--space-sm); }
.chip { font-size: var(--text-sm); padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-control); color: var(--color-ink-2); }

.scripts { display: grid; gap: 0; margin: var(--space-md) 0 var(--space-lg); }
.script { padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.script-b { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.script blockquote { margin: 0; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); max-width: 60ch; }

.figrow + h3, .figcap + h3, .sysblk h3 { margin-top: var(--space-2xl); }
.figrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-md); margin: var(--space-md) 0 var(--space-xs); }
.fig { margin: 0; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.figcap { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-xs) 0 var(--space-lg); }

/* image-first page strips */
.pgstrip { display: grid; gap: var(--space-md); margin: 0 0 var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.pgstrip[data-count="1"] { grid-template-columns: minmax(0, 640px); }
.pgstrip[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; }
.pgshot {
  display: block; padding: 0; cursor: zoom-in;
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card);
  background: var(--color-paper); overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.pgshot:hover { border-color: var(--color-ink-2); }
.pgshot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pg-more { font-size: var(--text-sm); color: var(--color-muted); }

/* ---- finish-review fixes (2026-10-28) ---- */
/* 2: one rule under the page opener, not two. In a two-column set the whole
   first row sits under the opener's rule, so both cells drop theirs. */
.sec-open + .rules > .rule:first-child,
.sec-open + .rules.two > .rule:nth-child(2),
.sec-open + .sr-only + .rules > .rule:first-child,
.sec-open + .sr-only + .rules.two > .rule:nth-child(2),
.sec-open + .sr-only + .sr-only + .rules > .rule:first-child,
.sec-open + .sr-only + .sr-only + .rules.two > .rule:nth-child(2),
.sec-open + .subpanel,
.sec-open + .sr-only + .subpanel,
.sec-open + h2 + .subpanel { border-top: 0; padding-top: 0; }
/* 3: a heading's own content is never cut off from it by a rule */
.as-panel h2 + .subpanel { border-top: 0; padding-top: 0; margin-top: var(--space-sm); }
.as-panel h2 + .rules > .rule:first-child { border-top: 0; padding-top: 0; }
/* 5: an odd last rule in a two-column set takes the full width */
.rules.two > .rule:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* the zip bar after a group of marks: the last mark's bottom rule is the bar's
   top edge, so the bar draws none of its own */
.mark + .bulk { border-top: 0; margin-top: 0; }
/* 1: the jump row on Logos */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-top: var(--space-md); }
.jump a { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.jump a:hover { text-decoration: underline; }
.jump a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
#quiz, #tm-register, #logo-library, .as-panel h2[id] { scroll-margin-top: var(--space-xl); }

/* ============================================================ assets */
.as-panel h2.sec-h { margin-top: var(--space-3xl); }
.shelf-h { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-2xl) 0 var(--space-sm); }
.shelf-h h3 { margin: 0 !important; }
.shelf-trail { font-size: var(--text-sm); color: var(--color-muted); }
.shelf-n { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }

.grid {
  display: grid; gap: var(--space-lg) var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin: 0 0 var(--space-lg);
}
.card { display: flex; flex-direction: column; min-width: 0; }
.card-img {
  aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.card-img[data-full] { cursor: zoom-in; }
.card-img[data-full]:hover { border-color: var(--color-ink-2); }
.card-img.dark, .mark-thumb.dark, .modal-img.dark { background: var(--color-ink); color: var(--color-paper); }
.card-img img { max-width: 88%; max-height: 84%; object-fit: contain; }
.card-body { padding: var(--space-xs) 0 0; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.card-name { font-size: var(--text-sm); font-weight: 700; line-height: 1.35; color: var(--color-ink); overflow-wrap: break-word; }
.card-sub { font-size: var(--text-xs); color: var(--color-muted); }
.card-dl { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); margin-top: auto; }
.noprev { font-size: var(--text-sm); color: var(--color-muted); }

.ftile { display: grid; justify-items: center; gap: var(--space-2xs); color: var(--color-muted); }
.ftile-i { display: none; }
.ftile-x { font-size: var(--text-xl); font-weight: 700; color: var(--color-ink-2); letter-spacing: 0; }

/* file links: a quiet text link with its size; never a coloured pill */
.dl {
  display: inline-flex; align-items: baseline; gap: var(--space-2xs);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);
  text-decoration: none; background: none; border: 0; padding: 0;
  cursor: pointer; white-space: nowrap;
}
/* a button-element file action (View, the zip) gets a 32px hit target */
button.dl:not(.big) { min-height: 32px; align-items: center; }
.dl:hover { color: var(--color-accent-2); text-decoration: underline; }
.dl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-control); }
.dl:active { color: var(--color-ink); }
.dl:disabled { opacity: 0.55; cursor: not-allowed; }
.dl-size { font-weight: 400; color: var(--color-muted); }
.dl abbr { text-decoration: none; }
.dl.view { color: var(--color-ink); }

/* the one filled button recipe on a page, used for primary actions */
.dl.big {
  height: 40px; min-height: 40px; padding: 0 var(--space-md); align-items: center;
  background: var(--color-accent); color: var(--color-accent-ink);
  border-radius: var(--radius-control); font-size: var(--text-sm);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.dl.big:hover { background: var(--color-accent-2); color: var(--color-accent-ink); text-decoration: none; }
.dl.big:active { background: var(--color-ink); }
.dl.big.ghost {
  background: none; color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-2);
}
.dl.big.ghost:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.dl.big[data-bulk] {
  background: none; color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-2);
}
.dl.big[data-bulk]:hover { border-color: var(--color-ink-2); color: var(--color-ink); }

.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin: var(--space-md) 0 var(--space-xl); padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.bulk-label { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.bulk-note { font-size: var(--text-sm); color: var(--color-muted); }

/* ============================================================ media */
.media-grid { display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0 0 var(--space-lg); }
.media { min-width: 0; }
.media video { width: 100%; aspect-ratio: 16 / 9; background: var(--color-ink); border-radius: var(--radius-card); }
.media audio { width: 100%; }
.media-meta { padding-top: var(--space-xs); font-size: var(--text-sm); }

/* ============================================================ logos */
.logo-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) 0; margin: 0 0 var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.tool-label { font-size: var(--text-sm); color: var(--color-muted); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); }
.seg button {
  height: 32px; padding: 0 var(--space-sm); white-space: nowrap;
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-control);
  background: var(--color-paper); color: var(--color-ink-2);
  font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.seg button:hover { border-color: var(--color-ink-2); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.seg button:active { background: var(--color-paper-3); }
.seg button.on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.ip-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }

#logo-list > h3 { margin-top: var(--space-2xl); }
.mark { border-bottom: var(--rule-hair) solid var(--color-rule); }
.mark:first-of-type { border-top: var(--rule-hair) solid var(--color-rule); }
.mark-head {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0; cursor: pointer; user-select: none;
}
.mark-thumb {
  width: 140px; height: 52px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-paper-2); border-radius: var(--radius-control);
}
.mark-thumb img { max-width: 90%; max-height: 80%; object-fit: contain; }
.mark-title { font-size: var(--text-md); font-weight: 700; color: var(--color-ink); }
.mark-title abbr { text-decoration: none; }
.mark-meta { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
.mark-chev { margin-left: var(--space-xs); color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.mark.open .mark-chev { transform: rotate(90deg); }
.mark-head:hover .mark-title { color: var(--color-accent); }
.mark-body { display: none; padding: 0 0 var(--space-md) 156px; }
.mark.open .mark-body { display: block; }

.cw-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.cw-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.cw-use { font-size: var(--text-xs); color: var(--color-muted); }
.cw-files { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }

.sym-pill { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); margin-left: var(--space-2xs); }

.tmbadge {
  margin-left: auto; flex: none; display: grid; justify-items: start;
  background: none; border: 0; padding: var(--space-2xs) 0; cursor: pointer; text-align: left;
  font-size: var(--text-sm);
}
.tmbadge b { font-weight: 700; }
.tmbadge span { font-size: var(--text-xs); color: var(--color-muted); }
.tmbadge:hover b { text-decoration: underline; }
.tmbadge:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tmb-reg b { color: var(--color-good); }
.tmb-pend b { color: var(--color-warn); }

.copylink {
  flex: none; background: none; border: 0; padding: var(--space-2xs) 0;
  font-size: var(--text-sm); color: var(--color-muted); cursor: pointer;
  opacity: 0; transition: opacity var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.mark-head:hover .copylink, .sw:hover .copylink, .doc-h2:hover .copylink, .copylink:focus-visible { opacity: 1; }
.copylink:hover { color: var(--color-ink); text-decoration: underline; }
.copylink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.copylink.ok { opacity: 1; color: var(--color-good); }
.copylink.sm { margin-top: var(--space-xs); }

.link-flash { animation: linkflash 2.4s var(--ease-out); outline-offset: 4px; }
@keyframes linkflash { 0%, 60% { outline: 2px solid var(--color-accent); } 100% { outline: 2px solid transparent; } }

/* ============================================================ logo configurator */
.quiz { margin: var(--space-xl) 0 var(--space-2xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.quiz-head h3 { margin: 0 0 var(--space-2xs) !important; font-size: var(--text-section) !important; }
.quiz-head p { color: var(--color-muted); }
.cfg-rail { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; padding: 0; margin: var(--space-md) 0 0; }
.cfg-rail li { display: flex; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); padding-bottom: var(--space-2xs); border-bottom: 2px solid transparent; }
.cfg-rail li span { font-variant-numeric: tabular-nums; font-weight: 700; }
.cfg-rail li.on { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: 700; }
.cfg-rail li.done { color: var(--color-ink-2); }
.cfg-rail li.done span { color: var(--color-good); }
.cfg .quiz-step { display: none; margin-top: var(--space-lg); }
.cfg .quiz-step.on { display: block; }
.quiz-q { font-size: var(--text-md); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-sm); }
.quiz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-xs); }
.qopt {
  min-height: 44px; max-height: 52px; padding: var(--space-xs) var(--space-md); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-control);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.qopt:hover { border-color: var(--color-ink-2); }
.qopt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.qopt:active { background: var(--color-paper-3); }
.qopt.on { border-color: var(--color-accent); background: var(--color-accent-wash); color: var(--color-ink); font-weight: 700; }
.qopt small { display: block; font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; margin-top: 0; overflow: hidden; text-overflow: ellipsis; }
.cfg-hint { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.cfg-nav { display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.cfg-back, .cfg-reset, .quiz-reset {
  background: none; border: 0; padding: var(--space-2xs) 0; cursor: pointer;
  font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);
}
.cfg-back:hover, .cfg-reset:hover, .quiz-reset:hover { text-decoration: underline; }
.cfg-back:focus-visible, .cfg-reset:focus-visible, .quiz-reset:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.quiz-result { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); }
.quiz-result.empty { display: none; }
.qr-mark { margin-bottom: var(--space-md); }
.qr-name { font-size: var(--text-md); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-xs); }
.quiz-why { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.quiz-why ul { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); }

/* ============================================================ colours */
.sw-grid { display: grid; gap: var(--space-xl) var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-lg) 0; }
.sw { min-width: 0; }
.sw-chip { height: 112px; border-radius: var(--radius-card); cursor: copy; position: relative; border: var(--rule-hair) solid var(--color-rule); }
.sw-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sw-chip.copied { outline: 2px solid var(--color-good); outline-offset: 2px; }
.sw-black { background: var(--swatch-black); }
.sw-meta { padding-top: var(--space-sm); }
.sw-name { font-size: var(--text-md); font-weight: 700; color: var(--color-ink); }
.sw-vals { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.7; font-variant-numeric: tabular-nums; }
.sw-vals b { color: var(--color-ink); }
.sw-note { font-size: var(--text-sm); color: var(--color-muted); }

/* ============================================================ type specimen */
.spec { padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.as-panel .spec-label { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-sm); max-width: none; }
.as-panel .spec-line { font-family: var(--font-display); color: var(--color-ink); line-height: 1.15; overflow-wrap: break-word; min-width: 0; margin: 0; max-width: none; }
.as-panel .spec-display { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.as-panel .spec-sub { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.015em; }
.as-panel .spec-body { font-size: 1.125rem; font-weight: 300; line-height: 1.6; max-width: none; }
.as-panel .spec-small { font-size: var(--text-sm); font-weight: 400; line-height: 1.55; max-width: none; }
.as-panel .spec-set { font-size: var(--text-2xl); font-weight: 700; line-height: 1.3; }
.spec-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.spec-weights div { font-size: var(--text-2xl); color: var(--color-ink); }
.spec-weights small { display: block; font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; margin-top: var(--space-2xs); }

/* ============================================================ tone table */
.tone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); margin: var(--space-xl) 0; }
.as-panel .tone-g h3 { margin: 0 0 var(--space-2xs); }
.tone-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.tone-row .lo { text-align: right; color: var(--color-muted); }
.tone-row .hi { font-weight: 700; color: var(--color-ink); }
.tone-row .bar { height: 2px; background: var(--color-accent); }
.tone-key { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); padding-bottom: var(--space-2xs); }
.tone-key span:first-child { text-align: right; }

/* ============================================================ home */
.home-head { margin: 0 0 var(--space-xl); }
.home-head h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.06; max-width: 18ch; margin: 0 0 var(--space-sm); }

.ask-hero { max-width: none; margin: 0 0 var(--space-2xl); }
.ask-label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-xs); }
.ask-shell { display: flex; gap: var(--space-xs); }
.ask-shell input {
  flex: 1; min-width: 0; height: 48px; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-field-edge); border-radius: var(--radius-control);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md);
}
.ask-shell input::placeholder { color: var(--color-muted); }
.ask-shell input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.ask-send {
  flex: none; height: 48px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-control);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: var(--text-md); font-weight: 700; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.ask-send:hover { background: var(--color-accent-2); }
.ask-send:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ask-send:active { background: var(--color-ink); }
.ask-send:disabled { opacity: 0.55; cursor: not-allowed; }
.ask-exs { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-sm); font-size: var(--text-sm); }
.ask-exs-h { color: var(--color-muted); }
.ask-ex {
  background: none; border: 0; padding: 0; cursor: pointer;
  min-height: 32px; display: inline-flex; align-items: center;
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: underline;
  text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em;
}
.ask-ex:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
.ask-ex:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ask-out { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); color: var(--color-ink); line-height: 1.6; }
.ask-out.empty { display: none; }
.ask-out.thinking { color: var(--color-muted); }
.ask-out.err { border-left: 2px solid var(--color-warn); }
.ask-text { margin: 0; max-width: none; }
.rr { display: grid; margin-top: var(--space-md); }
.rr-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-sm); align-items: center;
  padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule-2);
  text-decoration: none; color: var(--color-ink);
}
.rr-card:hover .rr-t { color: var(--color-accent); text-decoration: underline; }
.rr-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rr-art { width: 56px; height: 40px; display: grid; place-items: center; overflow: hidden; background: var(--color-paper); border-radius: var(--radius-control); font-size: var(--text-xs); color: var(--color-muted); }
.rr-art img { max-width: 48px; max-height: 32px; object-fit: contain; }
.rr-txt { display: flex; flex-direction: column; min-width: 0; }
.rr-t { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-s { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.home-list h2 { margin-top: 0 !important; }
.as-panel .idx { list-style: none; padding: 0; margin: 0; max-width: none; }
.idx li { margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.idx li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.idx a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-xs); align-items: baseline;
  padding: var(--space-xs) 0; text-decoration: none; color: var(--color-ink);
  transition: color var(--dur-micro) var(--ease-out);
}
.idx a:hover .idx-t { color: var(--color-accent); text-decoration: underline; }
.idx a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.idx-n { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.idx-t { font-weight: 700; font-size: var(--text-md); }
.idx-c { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.idx-d { grid-column: 2 / -1; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
/* The "Most used" rows have no number or count: a title over its line. Set the
   description in the SAME single column, or it spills into an implicit second
   track and lands on top of the title (seen at 430px). */
.quick a { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding: var(--space-sm) 0; }
.quick .idx-d { grid-column: 1; margin-top: 0; }

.home-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.home-groups h3 { margin: 0 0 var(--space-xs) !important; font-size: var(--text-md) !important; }

/* ============================================================ photo library */
.photolib { margin: var(--space-lg) 0 var(--space-2xl); }
.photolib-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); }
.photolib-t { font-size: var(--text-title); font-weight: 700; color: var(--color-ink); }
.photolib-s { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
.photolib-btns { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.photolib-frame { margin-top: var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); overflow: hidden; }
.photolib-frame iframe { display: block; width: 100%; height: 78dvh; min-height: 560px; border: 0; }
.photolib-note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }

/* ============================================================ modal + viewer */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; background: var(--color-scrim); padding: var(--space-xl) var(--space-lg); overflow-y: auto; }
.modal.on { display: block; }
.modal-inner { max-width: 1100px; margin: 0 auto; background: var(--color-paper); border-radius: var(--radius-card); overflow: hidden; }
.modal-head { position: sticky; top: var(--space-3xs); z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
/* The register's table scrolls inside its own box under the modal head, so its
   sticky row sits at the top of THAT box, never under the head (gate 56). */
.pv-scroll, .tm-scroll { position: relative; }
.modal-head h3 { margin: 0; font-size: var(--text-title); }
.modal-close { margin-left: auto; width: 36px; height: 36px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-lg); line-height: 1; cursor: pointer; }
.modal-close:hover { border-color: var(--color-ink-2); }
.modal-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.modal-body { padding: var(--space-lg); }
.modal-img { display: grid; place-items: center; padding: var(--space-lg); }
.modal-img img { max-height: 74dvh; object-fit: contain; }
.ip-tools { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-md); }
.ip-tools input, .ip-tools select { height: 36px; padding: 0 var(--space-sm); font-size: var(--text-sm); border: var(--rule-hair) solid var(--color-field-edge); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); }
.ip-tools input:focus-visible, .ip-tools select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.ip-tools input { min-width: 250px; }
.tm-scroll { max-height: 56dvh; overflow-y: auto; }
.tm-source { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }

.pv-bar { font-size: var(--text-sm); color: var(--color-muted); padding-bottom: var(--space-xs); margin-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pv-pages { display: grid; gap: var(--space-lg); }
.pv-page { margin: 0; }
.pv-page img { width: 100%; border: var(--rule-hair) solid var(--color-rule); }
.pv-page figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }
.pv-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.pv-tab { height: 32px; padding: 0 var(--space-sm); font-size: var(--text-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink-2); cursor: pointer; }
.pv-tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.pv-tab.on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.pv-sheet { display: none; }
.pv-sheet.on { display: block; }
.pv-scroll { max-height: 58dvh; overflow: auto; }
.pv-table th { position: sticky; top: var(--space-3xs); z-index: var(--z-raised); }
.pv-table td, .pv-table th { white-space: nowrap; }
.pv-slides { display: grid; gap: 0; }
.pv-slide { padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.pv-slide-n { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-2xs); }
.pv-slide-t { font-size: var(--text-md); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.pv-intro { font-size: var(--text-sm); color: var(--color-muted); }

/* ============================================================ phones */
.pr-scrim { display: none; }
@media (max-width: 60rem) {
  .pr-shell { grid-template-columns: minmax(0, 1fr); }
  .pr-main { grid-column: 1; }
  .pr-rail {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100dvh;
    translate: -102% 0; transition: translate var(--dur-short) var(--ease-out);
    z-index: var(--z-modal);
  }
  .pr-rail.open { translate: 0 0; }
  .pr-top {
    display: flex; align-items: center; gap: var(--space-sm);
    position: sticky; top: 0; z-index: var(--z-sticky-nav);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .pr-menu {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center;
    background: none; border: 0; color: var(--color-ink); cursor: pointer; border-radius: var(--radius-control);
  }
  .pr-menu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
  .pr-menu svg { width: 22px; height: 22px; }
  .pr-top-logo { height: 24px; width: auto; min-width: 0; }
  .pr-page { padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .pr-scrim { position: fixed; inset: 0; background: var(--color-scrim); z-index: calc(var(--z-modal) - 1); }
  .pr-scrim.show { display: block; }
  .rules.two, .home-cols, .home-groups, .tone, .spec-weights { grid-template-columns: minmax(0, 1fr); }
  .sw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mark-body { padding-left: 0; }
  .cw-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .copylink, .tmbadge { display: none; }
  .mark-thumb { width: 96px; height: 40px; }
  .ip-count { margin-left: 0; }
  .ip-tools input { min-width: 0; width: 100%; }
  .ask-shell { flex-direction: column; }
  .ask-shell input { height: 48px; min-height: 48px; flex: none; width: 100%; }
  .ask-send { width: 100%; }
}
@media (max-width: 30rem) {
  .sw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .link-flash { animation: none; outline: 2px solid var(--color-accent); }
  .pr-rail { transition: none; }
}

/* ============================================================ document flow
   The archive's documents, structured the way their author built them
   (build_data.py). Structured devices:
   and i need more tables and visual helper devices generally like dividers".
   Devices: a full-width rule before each section, a two-column table for the
   author's tab-aligned and "Label: value" lines, a definition grid for term
   lists, a tag row for short sets, a ruled callout for quoted examples. */
.docflow { max-width: 110ch; }
.docflow > :first-child { margin-top: 0; }
.as-panel .docflow hr.sec-rule, .as-panel hr.sec-rule {
  border: 0; border-top: 2px solid var(--color-ink);
  margin: var(--space-2xl) 0 var(--space-lg);
}
.as-panel .docflow h2.dh2 { margin: 0 0 var(--space-md); font-size: var(--text-section); }
.as-panel .docflow h2.doc-title {
  font-size: var(--text-2xl); margin: 0 0 var(--space-lg); letter-spacing: var(--tracking-display);
}
.as-panel .docflow h3.dh3 {
  font-size: var(--text-title); margin: var(--space-xl) 0 var(--space-xs);
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule);
}
.as-panel .docflow h4.dh4 { font-size: var(--text-md); margin: var(--space-lg) 0 var(--space-2xs); }
.as-panel .docflow .doc-kicker {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); margin: 0 0 var(--space-2xs);
}
.as-panel .docflow .standfirst {
  font-size: var(--text-lead); font-weight: 700; color: var(--color-ink); line-height: 1.45;
  margin: 0 0 var(--space-sm);
}

/* supporting document on the same page */
.docflow .doc-band {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md);
  margin: var(--space-3xl) 0 var(--space-lg); padding: var(--space-md) 0;
  border-top: 2px solid var(--color-accent); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.docflow .doc-band-k { font-size: var(--text-sm); color: var(--color-muted); }
.docflow .doc-band-t { font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); }

/* key / value table: the author's tab-aligned lines */
.docflow .kv-wrap { margin: var(--space-sm) 0 var(--space-lg); overflow-x: auto; }
.docflow table.kv { border-collapse: collapse; width: 100%; font-size: var(--text-md); }
.docflow table.kv th, .docflow table.kv td {
  text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule); line-height: 1.5;
}
.docflow table.kv tr:first-child > * { border-top: var(--rule-hair) solid var(--color-rule-2); }
.docflow table.kv th {
  width: 28%; min-width: 9rem; font-weight: 700; color: var(--color-ink); white-space: normal;
}
.docflow table.kv td { color: var(--color-ink-2); }

/* term / definition grid: PNG EPS SVG, RGB CMYK PMS RAL, voice principles */
.docflow dl.terms { margin: var(--space-sm) 0 var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.docflow dl.terms .term {
  display: grid; grid-template-columns: minmax(7rem, 22%) minmax(0, 1fr); gap: var(--space-md);
  padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule);
}
.docflow dl.terms dt { font-weight: 700; color: var(--color-ink); font-size: var(--text-lg); line-height: 1.3; }
.docflow dl.terms.principles dt { color: var(--color-accent); }
.docflow dl.terms dd { margin: 0; }
.docflow dl.terms dd p { margin: 0 0 var(--space-xs); }
.docflow dl.terms dd p:last-child { margin-bottom: 0; }
.docflow dl.terms .term > dd:only-child { grid-column: 1 / -1; }

/* short indented set: the registered marks */
.docflow ul.tagset {
  list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-lg);
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.docflow ul.tagset li {
  margin: 0; padding: var(--space-2xs) var(--space-sm); font-weight: 700; color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2);
}

/* worked examples, quoted in the source */
.docflow blockquote.example {
  margin: var(--space-xs) 0 var(--space-md); padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  border-left: 3px solid var(--color-accent); color: var(--color-ink); font-size: var(--text-md);
}
.docflow p.example-strong {
  margin: var(--space-xs) 0; padding: var(--space-xs) var(--space-md);
  background: var(--color-accent-wash); font-weight: 700; color: var(--color-ink);
}
.docflow ul { margin: var(--space-xs) 0 var(--space-lg); }
.docflow ul ul { margin: var(--space-2xs) 0 var(--space-xs); }
.docflow li { margin: 0 0 var(--space-2xs); }
.docflow .as-table-scroll { margin: var(--space-sm) 0 var(--space-lg); }

@media (max-width: 40rem) {
  .docflow dl.terms .term { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .docflow table.kv th { width: auto; min-width: 0; }
  .docflow table.kv tr { display: grid; }
  .docflow table.kv th { border-bottom: 0; padding-bottom: 0; }
  .docflow table.kv tr:first-child > td { border-top: 0; }
}

/* ============================================================ photo library
   The product photo library, built into section 8 (photo-library.js). Square
   edges and hairlines like the rest of the guide. */
.plib { margin: var(--space-2xl) 0 var(--space-2xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.plib-head h2 { margin: 0 0 var(--space-2xs); }
.as-panel .plib-sub { margin: 0 0 var(--space-md); color: var(--color-ink-2); }
.plib-bar {
  position: static; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center;
  padding: var(--space-sm) 0; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.plib-search { flex: 1 1 18rem; }
.plib-search input, .plib-bar select {
  width: 100%; min-height: 44px; padding: 0 var(--space-sm); font: inherit; font-size: var(--text-sm);
  color: var(--color-ink); background: var(--color-paper); border: var(--rule-hair) solid var(--color-field-edge); border-radius: 0;
}
.plib-bar select { width: auto; min-width: 9rem; }
.plib-search input:focus-visible, .plib-bar select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.plib-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.plib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-md);
  margin: var(--space-md) 0 0;
}
.plib-card {
  display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer; font: inherit;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: 0; color: inherit;
}
.plib-card:hover { border-color: var(--color-ink); }
.plib-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.plib-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--color-paper-2); overflow: hidden; }
.plib-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plib-cap { display: block; padding: var(--space-xs) var(--space-sm) var(--space-sm); }
.plib-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); line-height: 1.35; }
.plib-me { display: block; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.plib-more { display: block; margin: var(--space-lg) auto 0; }
.as-panel .plib-empty, .as-panel .plib-alt { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); }
.plib-lb[hidden] { display: none; }
.plib-lb { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 10); display: flex; flex-direction: column; background: var(--viewer-bg); color: var(--viewer-ink); }
.plib-lb-bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--viewer-line); }
.plib-lb-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.plib-lb-ix { font-size: var(--text-sm); color: var(--viewer-muted); font-variant-numeric: tabular-nums; }
.plib-lb .plib-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md);
  font: inherit; font-size: var(--text-sm); font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid var(--viewer-line-2); background: transparent; color: var(--viewer-ink);
}
.plib-lb .plib-btn.solid { background: var(--viewer-ink); color: var(--color-ink); border-color: var(--viewer-ink); }
.plib-lb .plib-btn:hover { border-color: var(--viewer-ink); text-decoration: underline; }
.plib-lb .plib-btn:focus-visible { outline: 2px solid var(--viewer-ink); outline-offset: 2px; }
.plib-lb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem 20rem; align-items: center; }
.plib-lb-body img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; justify-self: center; }
.plib-nav { width: 2.75rem; height: 2.75rem; border: 1px solid var(--viewer-line-2); background: transparent; color: var(--viewer-ink); font-size: 1.5rem; cursor: pointer; justify-self: center; }
.plib-nav:focus-visible { outline: 2px solid var(--viewer-ink); outline-offset: 2px; }
.plib-lb-side { align-self: stretch; overflow: auto; padding: var(--space-md); border-left: 1px solid var(--viewer-line); font-size: var(--text-sm); }
.plib-lb-side table.kv { width: 100%; border-collapse: collapse; }
.plib-lb-side table.kv th, .plib-lb-side table.kv td { text-align: left; padding: var(--space-2xs) 0; border-bottom: 1px solid var(--viewer-line); }
.plib-lb-side table.kv th { color: var(--viewer-muted); font-weight: 400; width: 40%; }
.plib-lb-side .plib-tags span { display: inline-block; margin: 0 var(--space-2xs) var(--space-2xs) 0; padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--viewer-line-2); }
.plib-lb-side ul { list-style: none; padding: 0; margin: var(--space-2xs) 0 0; }
.plib-lb-side li { padding: var(--space-2xs) 0; border-bottom: 1px solid var(--viewer-line); }
.plib-lb-side a { color: var(--viewer-link); }
@media (max-width: 60rem) {
  .plib-lb-body { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
  .plib-lb-side { display: none; }
  .plib-count { margin-left: 0; width: 100%; }
  .plib-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-sm); }
}
/* no double rule where a ruled block meets another ruled block */
.as-panel .docflow > dl.terms:first-child { border-top: 0; }
.as-panel .docflow dl.terms + h3.dh3, .as-panel .docflow table.kv + h3.dh3,
.as-panel .docflow .kv-wrap + h3.dh3 { border-top: 0; padding-top: 0; }
.plib-bar { border-top: 0; }

@media (min-width: 60.01rem) {
  /* wide screens only: no top bar there (.pr-top shows below 60rem) */
  .plib-bar { position: sticky; top: var(--space-3xs); }
}
/* the viewer image before a photo is opened */
#plib-lb-img:not([src]), #plib-lb-img[src=""] { visibility: hidden; }
/* Brand Foundation: label, headline, copy; the document's own headline in ink */
.as-panel .docflow h2.doc-title { color: var(--color-ink); }
.as-panel .docflow p.sec-label {
  margin: 0 0 var(--space-2xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);
}
.as-panel .docflow h2.sec-headline { margin: 0 0 var(--space-md); }

/* Powered by Fulcrum, and the connector link */
/* "Search powered by" line under the ask box */
.pr-powered, .ask-powered {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-xs); color: var(--color-muted); text-decoration: none;
}
.pr-powered { margin: var(--space-xs) 0 0; }
.ask-powered { margin: var(--space-sm) 0 0; }
.pr-powered:hover span, .ask-powered:hover span { color: var(--color-ink); text-decoration: underline; }
.fx-logo { display: block; height: 13px; width: auto; }
.ask-powered .fx-logo { height: 16px; }
.ask-powered:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pr-connect {
  display: block; margin: var(--space-sm) 0 0; padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); text-decoration: none;
  border: var(--rule-hair) solid var(--color-accent);
}
.pr-connect:hover { background: var(--color-accent-wash); }
.pr-connect:focus-visible, .pr-powered:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.as-panel .home-connect { margin: var(--space-md) 0 0; }

/* connect.html */
.cx-open { margin: 0 0 var(--space-lg); }
.cx-addr { margin: 0 0 var(--space-2xl); padding: var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.as-panel .cx-k { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
.cx-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.cx-row code { flex: 1 1 22rem; padding: var(--space-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-md); overflow-wrap: anywhere; }
.as-panel .cx-note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.cx-steps { margin: var(--space-sm) 0 var(--space-lg); padding-left: 1.4em; }
.cx-steps li { margin: 0 0 var(--space-xs); }
.cx-code { margin: var(--space-sm) 0; padding: var(--space-md); background: var(--color-ink); color: var(--color-paper); overflow-x: auto; font-size: var(--text-sm); }
.cx-asks li { margin: 0 0 var(--space-2xs); }

.as-panel a.ask-powered, .as-panel a.ask-powered:hover { color: var(--color-muted); text-decoration: none; }
.pr-connect { margin-bottom: var(--space-md); }
/* the brand hierarchy chart, in place under "Our brands" (10/30) */
.docflow figure.doc-figure { margin: var(--space-sm) 0 var(--space-lg); }
.docflow .doc-figure-img { aspect-ratio: auto; padding: var(--space-lg); background: #fff; cursor: zoom-in; }
.docflow .doc-figure-img img { max-width: 100%; max-height: none; width: 100%; height: auto; object-fit: contain; }
.docflow .doc-figure figcaption {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: baseline;
  margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted);
}

/* ============================================================ RPG additions */
.as-panel > h1 { font-weight: 800; }
.as-panel .spec-caps { font-family: var(--font-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: var(--text-lg); }
.pr-logo { max-width: 220px; }
.as-panel .docflow p.sec-label { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.demo-note { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.45; }
.home-head h1 { font-weight: 800; }
.home-head h1::after { content: ""; display: block; width: 96px; height: 6px; background: var(--color-accent); margin-top: var(--space-md); }