/* =====================================================================
   brand.css — the brand pages: /brand/ (ブランドセンター),
   /brand/design-system/, /brand/avatar/ and /brand/avatar/maker/
   ---------------------------------------------------------------------
   The three pages are built on the design system as it is: tokens
   (base.css), the layouts (layout.css), the components (components.css)
   and the reference-guide recipe in eiken.css — its compact hero, the
   目次 rail and the numbered chapters — which every brand page loads.
   Only what none of those has lives here, in source order:

     1. Hero             .brand-meet          the compact hero (eiken.css)
                                              as it is; Mimi opens the
                                              avatar page's first band
     2. Copy & download  .copy-btn            a small control that copies
                                              text (js/brand.js)
                         .brand-file          a download chip: format + size
                         .codeblock           text to copy: a label bar
                                              over a scrolling monospace body
     3. Brand assets     .brand-asset         a card with a preview ground
                                              and its files
                         .brand-swatch        a colour, its values, copy
                         .brand-font          a typeface specimen
     4. Logo rules       .brand-clearspace    the clear-space diagram
                         .brand-rules         OK / NG tiles (.brand-rule)
     5. Concept          .brand-concept       the slogan plate
     6. Person           .brand-person        the founder's photo + profile
     7. Feature link     .brand-feature       a large link card to one of
                                              the brand pages
                         .brand-more          one centred arrow link
     8. Page copy        .brand-md            a page's Markdown in the FAQ
                                              list's disclosure rows
     9. Grid helpers     .brand-grid--center  a 3-up grid whose short last
                                              row is centred (≥1024px)
                         .brand-grid--compact a catalogue that stays 2-up on
                                              phones
    10. Specimens        .ds-*                the sample chrome of the two
                                              system pages

   Every size is a token; every colour is a token or the rabbit's own
   (avatar page). Monospace has no token: the code stack is set once here.
   ===================================================================== */

.page-brand {
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* =====================================================================
   1. HERO — the compact hero of css/eiken.css §1 as it is (breadcrumb,
   title, one line), on all three pages. Nothing else goes in it: the
   brand center's facts live in its first chapter, Mimi opens the avatar
   page's first band.
   ===================================================================== */
/* Mimi, centred between the 「はじめまして」 header and its three columns. */
.brand-meet {
  display: flex;
  justify-content: center;
  margin: calc(var(--sp-section-header) * -0.5) 0 var(--sp-10);
}
@media (max-width: 600px) { .brand-meet .rabbit { width: auto; height: 180px; } }


/* =====================================================================
   2. COPY & DOWNLOAD
   .copy-btn copies text (js/brand.js): data-copy="…" copies that string,
   data-copy-target="#id" the text of that element, data-copy-src="/x"
   the file at that URL. Its label reads 「コピー」 and, for two seconds
   after a copy, 「コピーしました」 with a check; a polite live region says
   the same for a screen reader. Without JS it is hidden — the text is
   still on the page to select.
   .brand-file is a download link set as a chip: the format in bold and
   its size beside it.
   ===================================================================== */
.copy-btn,
.brand-file {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-full);
  background: var(--bg-white);
  font-family: var(--font-ja);
  font-size: var(--fs-body-sm);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--ink-sky);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.copy-btn svg,
.brand-file svg { width: 16px; height: 16px; flex-shrink: 0; }
.copy-btn:hover,
.brand-file:hover { opacity: 1; border-color: var(--primary); background: rgba(0, 174, 239, 0.06); }
.copy-btn:focus-visible,
.brand-file:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.copy-btn-idle,
.copy-btn-done { display: inline-flex; align-items: center; gap: var(--sp-2); }
.copy-btn .copy-btn-done { display: none; }
.copy-btn.is-copied { border-color: var(--primary); background: rgba(0, 174, 239, 0.10); }
.copy-btn.is-copied .copy-btn-idle { display: none; }
.copy-btn.is-copied .copy-btn-done { display: inline-flex; }
/* --icon: the icon alone, in a 36px circle (a swatch's HEX); the label
   stays for a screen reader. */
.copy-btn--icon { width: 36px; min-height: 36px; padding: 0; justify-content: center; }
.copy-btn--icon .copy-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.copy-btn[hidden] { display: none; }
html:not(.brand-js) .copy-btn { display: none; }
.brand-file-size { font-weight: var(--fw-regular); color: var(--ink-quiet); }
/* A chip wider than its column breaks after the format, never outside. */
.brand-file { flex-wrap: wrap; max-width: 100%; padding-block: var(--sp-2); white-space: normal; line-height: 1.3; }
.brand-files { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- Code block: text to copy ----
     <figure class="codeblock">
       <figcaption class="codeblock-head">
         <span class="codeblock-label">llms.txt</span>
         <span class="codeblock-meta">Markdown・約5,800字</span>
         <button class="copy-btn" data-copy-target="#x">…</button>
       </figcaption>
       <pre class="codeblock-body" id="x" tabindex="0"><code>…</code></pre>
     </figure>
   The body wraps (pre-wrap) — copy is prose, not code, and must read on a
   phone — and scrolls inside itself past 22rem (--tall: 32rem). */
.codeblock {
  margin: var(--sp-6) 0 0;
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  background: var(--bg-white);
  overflow: hidden;
}
.codeblock-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border-warm);
}
.codeblock-label {
  font-family: var(--font-code);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
.codeblock-meta {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-quiet);
}
.codeblock-head .copy-btn { margin-left: auto; }
.codeblock-body {
  margin: 0;
  max-height: 22rem;
  padding: var(--sp-5);
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--font-code);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-main);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.codeblock--tall .codeblock-body { max-height: 32rem; }
/* --prose: Japanese copy to paste (an introduction, a note, a prompt) in
   the page's own face — monospace spreads Latin and turns ® full-width. */
.codeblock--prose .codeblock-body {
  font-family: var(--font-ja);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}
.codeblock-body:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.codeblock-body code { font: inherit; }
.eiken-body .codeblock + p,
.eiken-body .codeblock + .note { margin-top: var(--sp-4); }


/* =====================================================================
   3. BRAND ASSETS
   ===================================================================== */
/* ---- A downloadable asset: a .card whose top is the asset on its
   ground (cream for the colour logo, navy for the white one) and whose
   foot is its files. ---- */
.brand-asset { padding: 0; overflow: hidden; }
.brand-asset-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: var(--sp-8);
  background: var(--bg-cream);
  border-bottom: 1px solid var(--border-warm);
}
.brand-asset-preview--navy { background: var(--footer-bg); border-bottom-color: var(--footer-bg); }
.brand-asset-preview--white { background: var(--bg-white); }
.brand-asset-preview img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.brand-asset-preview .brand-asset-logo { width: 88%; }
.brand-asset-preview .brand-asset-icon { width: 46%; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.brand-asset-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--pad-card);
}
.brand-asset-body .card-title,
.brand-asset-body .card-text { margin: 0; }
.brand-asset-body .brand-files { margin-top: auto; padding-top: var(--sp-3); }
.eiken-body .brand-assets { margin-top: var(--sp-6); }
/* --wide: the odd asset of a 2-up grid spans the row, picture beside text */
.brand-asset--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.brand-asset--wide .brand-asset-preview { aspect-ratio: auto; min-height: 13rem; border-bottom: 0; border-right: 1px solid var(--border-warm); }
@media (max-width: 767px) {
  .brand-asset--wide { grid-template-columns: minmax(0, 1fr); }
  .brand-asset--wide .brand-asset-preview { border-right: 0; border-bottom: 1px solid var(--border-warm); }
}
/* The banner set: both sizes side by side at one height — each takes the
   share of the row its aspect ratio asks for (1200/630 : 1). */
.brand-asset-preview--banners {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  aspect-ratio: auto;
  padding: var(--sp-6);
}
.brand-asset-preview--banners img {
  min-width: 0;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
.brand-asset-preview--banners img:first-child { flex: 1.905 1 0; aspect-ratio: 1200 / 630; }
.brand-asset-preview--banners img:last-child { flex: 1 1 0; aspect-ratio: 1 / 1; }
.brand-asset-preview .brand-asset-banner { max-width: none; max-height: none; width: 100%; object-fit: cover; }

/* ---- Colour: the swatch fills the card's top; HEX and RGB below. ---- */
.brand-swatch { padding: 0; overflow: hidden; }
.brand-swatch-chip { height: 88px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.brand-swatch-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.brand-swatch-name { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
.brand-swatch-use { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-light); }
.brand-swatch-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-family: var(--font-code);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-main);
}
.brand-swatch-values span { white-space: nowrap; }
.brand-swatch-values b { font-weight: var(--fw-bold); }

/* ---- Typeface: a large sample in the face, its name and its job. ---- */
.brand-font-sample {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-warm);
  font-size: var(--fs-h1);
  line-height: 1.35;
  color: var(--text-main);
  word-break: auto-phrase;
}
.brand-font-sample.font-en { font-weight: var(--fw-head); letter-spacing: var(--ls-num); }
.brand-font-sample.font-deco { font-size: var(--fs-deco-lg); font-weight: var(--fw-bold); color: var(--primary); }
.brand-font .card-text a { color: var(--ink-sky); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 2px; }


/* =====================================================================
   4. LOGO RULES
   ===================================================================== */
/* ---- Clear space: the logo inside its margin, drawn as an amber dashed
   frame; X = half the logo's height. ---- */
.brand-clearspace {
  display: grid;
  place-items: center;
  margin-top: var(--sp-6);
  padding: var(--sp-10) var(--sp-6);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle, rgba(245, 158, 11, 0.12) 1px, transparent 1.2px) 0 0 / 16px 16px,
    var(--bg-cream);
}
.brand-clearspace-frame {
  --x: 22px;   /* half the logo's 44px height */
  position: relative;
  padding: var(--x);
  background: var(--bg-white);
  outline: 2px dashed rgba(245, 158, 11, 0.7);
  outline-offset: 0;
}
.brand-clearspace-frame img { display: block; height: 44px; width: auto; outline: 1px solid rgba(0, 174, 239, 0.35); }
.brand-clearspace-x {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: var(--x);
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: var(--fs-body-sm);
  line-height: 1;
  font-weight: var(--fw-head);
  color: var(--ink-amber);
}
.brand-clearspace-x--left { top: 50%; left: 0; width: var(--x); height: 28px; transform: translateY(-50%); }

/* ---- OK / NG tiles ----
     <ul class="brand-rules">
       <li class="brand-rule">
         <div class="brand-rule-demo">…the logo, as the rule shows it…</div>
         <p class="brand-rule-caption"><span class="pill">OK</span>…</p>
       </li>
   OK takes the blue pill, NG the amber one; an NG demo is crossed out by
   a thin amber rule so it never reads as an example to copy. */
.brand-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) { .brand-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brand-rule {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
}
.brand-rule-demo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: var(--sp-4);
  overflow: hidden;
  background: var(--bg-cream);
}
.brand-rule-demo img { display: block; width: 78%; height: auto; }
.brand-rule-demo--navy { background: var(--footer-bg); }
.brand-rule-demo--photo { background: center / cover no-repeat url("../assets/image_2-480.webp"); }
.brand-rule--ng .brand-rule-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(164, 79, 10, 0.55) 50%, transparent calc(50% + 1px));
  pointer-events: none;
}
/* A one- or two-line label: phrase breaks, balanced (§2 Type). */
.brand-rule-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-main);
  word-break: auto-phrase;
  text-wrap: balance;
}
/* The misuses, drawn from the real file so nobody has to imagine them. */
.brand-ng-stretch { transform: scale(1.3, 0.75); }
.brand-ng-recolor { filter: hue-rotate(150deg) saturate(1.6); }
.brand-ng-rotate { transform: rotate(-14deg); }
.brand-ng-effect { filter: drop-shadow(3px 3px 0 var(--accent)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
/* Retyped in another face: two centred lines, so it fits the narrowest tile. */
.brand-ng-retype {
  text-align: center;
  line-height: 1.2;
  font-family: var(--font-en);
  font-size: var(--fs-h3);
  font-weight: var(--fw-head);
  color: var(--primary);
  letter-spacing: -0.01em;
}


/* =====================================================================
   5. CONCEPT
   The slogan in the logo's own hand (Caveat), the copy line, the 理念 —
   centred on the cream dotted ground of the compact hero.
   ===================================================================== */
.brand-concept {
  position: relative;
  isolation: isolate;
  margin: var(--sp-8) 0;
  padding: var(--sp-12) var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--bg-cream);
  text-align: center;
  overflow: hidden;
}
.brand-concept::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.14) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.brand-concept-slogan {
  margin: 0;
  font-family: var(--font-deco);
  font-size: var(--fs-deco-lg);
  line-height: 1.1;
  font-weight: var(--fw-bold);
  color: var(--primary);
}
.brand-concept-copy {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-head);
  color: var(--text-main);
  text-wrap: balance;
  word-break: auto-phrase;
}
.brand-concept-rule {
  width: 48px;
  height: 2px;
  margin: var(--sp-6) auto;
  background: var(--accent);
  border: 0;
}
.brand-concept-belief {
  margin: 0 auto;
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-light);
}
.eiken-body .brand-concept p { margin-bottom: 0; }
@media (max-width: 600px) { .brand-concept { padding: var(--sp-10) var(--sp-5); } }


/* =====================================================================
   6. PERSON — the founder, for an article's 代表紹介
   Photo (the about page's portrait, 3 : 2) beside the name, the role, the
   profile list and the files; stacked below 600px.
   ===================================================================== */
.brand-person {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-6);
}
@media (max-width: 600px) { .brand-person { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }
.brand-person-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-cream);
  aspect-ratio: 4 / 5;
}
.brand-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.brand-person-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-head);
  color: var(--text-main);
}
.brand-person-name span {
  font-family: var(--font-en);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
}
.brand-person-role {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-bold);
  color: var(--ink-sky);
}
.brand-person-facts {
  margin: var(--sp-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-warm);
}
.brand-person-facts div {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-warm);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}
.brand-person-facts dt { font-weight: var(--fw-bold); color: var(--text-light); }
.brand-person-facts dd { margin: 0; color: var(--text-main); }
.brand-person .brand-files { margin-top: var(--sp-5); }


/* =====================================================================
   7. FEATURE LINK — a whole .card--link to one of the system pages:
   the page's own picture on the left, title + one line + arrow on the
   right; stacked below 600px.
   ===================================================================== */
.brand-feature {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  padding: 0;
  overflow: hidden;
  margin-top: var(--sp-6);
  text-decoration: none;
}
@media (max-width: 600px) { .brand-feature { grid-template-columns: minmax(0, 1fr); } }
.brand-feature-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--sp-6);
  background: var(--bg-cream);
  border-right: 1px solid var(--border-warm);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.brand-feature-visual--figure { background: #FFF8E6; }   /* the rabbit's card ground */
/* The app: one phone screen, cropped to its top, on the app's own canvas. */
.brand-feature-visual--app { padding: var(--sp-6) var(--sp-6) 0; align-items: end; overflow: hidden; background: #FBF8F4; }
.brand-feature-visual--app img { display: block; width: min(11rem, 70%); height: auto; max-height: 15rem; object-fit: cover; object-position: top; border: 4px solid #23201C; border-bottom: 0; border-radius: 18px 18px 0 0; }
@media (max-width: 600px) {
  .brand-feature-visual { border-right: 0; border-bottom: 1px solid var(--border-warm); border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
.brand-feature-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
}
@media (max-width: 600px) { .brand-feature-body { padding: var(--pad-card); } }
.brand-feature-body .card-title { margin: 0; }
.brand-feature-body .card-text { margin: 0; }
.brand-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.brand-feature-body .link-arrow { margin-top: auto; padding-top: var(--sp-4); align-self: flex-start; }
/* A quieter way to the same place: one centred arrow link closing a
   band (the avatar page's 「はじめまして」 → the maker). */
.brand-more { margin-top: var(--sp-block); text-align: center; }
/* The design system's picture: type, a swatch row and a button, drawn
   in the system itself. */
.brand-mini {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 13rem;
  padding: var(--sp-5);
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.brand-mini-type { margin: 0; font-size: var(--fs-stat); line-height: 1; font-weight: var(--fw-head); color: var(--text-main); }
.brand-mini-type .font-en { color: var(--primary); }
.brand-mini-dots { display: flex; gap: 6px; }
.brand-mini-dots span { flex: 1; height: 14px; border-radius: var(--r-full); }
.brand-mini-line { height: 6px; border-radius: var(--r-full); background: var(--border-warm); }
.brand-mini-line:last-of-type { width: 70%; }
.brand-mini-btn { align-self: flex-start; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-full); background: var(--primary); color: #fff; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-bold); }


/* =====================================================================
   8. PAGE COPY — each page's Markdown, one disclosure row of the FAQ list
   (components.css §5) per page. The row's question is the page's name
   with its URL under it; open, the row shows the actions and the copy.
   ===================================================================== */
.brand-md .faq-item-q-text { display: block; }
.brand-md-url {
  display: block;
  overflow-wrap: anywhere;   /* a URL has no break opportunity of its own */
  margin-top: var(--sp-1);
  font-family: var(--font-code);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-regular);
  color: var(--ink-quiet);
}
.brand-md .faq-answer { padding-bottom: var(--sp-6); }
.brand-md .codeblock { margin-top: 0; }
.brand-md-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-4);
}


/* =====================================================================
   SHARED SMALL PARTS
   ===================================================================== */
/* A link row under a grid or table: the arrow link, left. */
.brand-more { margin-top: var(--sp-5); }
/* URLs inside the page table */
.brand-url {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.brand-url code { justify-self: start; }
.brand-url-path {
  font-family: var(--font-code);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  overflow-wrap: anywhere;
}
.brand-url .copy-btn { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-caption); }
.brand-url-table th[scope="row"] { width: 11em; }
/* Phones: each row stacks — name, then path + copy, then the line on it. */
@media (max-width: 767px) {
  .brand-url-table,
  .brand-url-table tbody,
  .brand-url-table tr,
  .brand-url-table th,
  .brand-url-table td { display: block; width: auto; }
  .brand-url-table thead { display: none; }
  .brand-url-table tr { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-warm); }
  .brand-url-table tr:last-child { border-bottom: 0; }
  .table.brand-url-table tr > th,
  .table.brand-url-table tr > td { position: static; padding: 0; border: 0; background: none; box-shadow: none; }
  .brand-url-table th[scope="row"] { width: auto; margin-bottom: var(--sp-2); }
}
/* Inline code in prose */
.page-brand :not(pre) > code:not([class]) {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--bg-cream);
  border: 1px solid var(--border-warm);
  font-family: var(--font-code);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
/* Visually hidden, still read out: the live region of the copy controls,
   a download chip's asset name. */
.brand-vh,
.brand-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* =====================================================================
   9. GRID HELPERS
   ===================================================================== */
/* A 3-up grid whose last row is short (5 cards: 3 + 2) centres that row
   at ≥1024px, as the 2-up step already does for an odd last card. */
@media (min-width: 1024px) {
  .l-grid--3.brand-grid--center { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .l-grid--3.brand-grid--center > * { grid-column: span 2; }
  .l-grid--3.brand-grid--center > :nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
/* A 4-up grid's odd last card, in its 2-up step, centres too. */
@media (min-width: 521px) and (max-width: 1023px) {
  .page-brand .l-grid--4 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--gap-grid)) / 2);
  }
}
/* A catalogue of small specimens (faces, ear sets, swatches) stays 2-up
   on phones instead of one card per screen. */
@media (max-width: 520px) {
  .l-grid.brand-grid--compact { --cols: 2; }
  .brand-grid--compact .ds-specimen { min-height: 96px; padding: var(--sp-4) var(--sp-2); }
  .brand-grid--compact .brand-swatch-chip { height: 56px; }
}


/* =====================================================================
   10. SPECIMENS — the sample chrome of /brand/design-system/ and
   /brand/avatar/: labels over a specimen, the type and spacing scales,
   the width bands, placeholders, the avatar's specimen grounds.
   ===================================================================== */
.ds-code { font-family: var(--font-code); font-size: var(--fs-body-sm); color: var(--ink-sky); white-space: nowrap; }
.ds-label { display: block; margin-bottom: var(--sp-3); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: var(--fw-bold); color: var(--text-light); }
.ds-desc { max-width: var(--w-measure); margin: calc(var(--sp-2) * -1) 0 var(--sp-5); font-size: var(--fs-body-md); line-height: var(--lh-body-md); color: var(--text-light); }
.ds-block:not(:first-child) { margin-top: var(--sp-block); }
.ds-type-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--sp-6); align-items: baseline; padding: var(--sp-5) 0; border-top: 1px solid var(--border-warm); }
.ds-type-row:last-child { border-bottom: 1px solid var(--border-warm); }
.ds-type-meta { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-light); }
.ds-type-sample { min-width: 0; line-height: 1.4; color: var(--text-main); }
.ds-bar { height: 12px; border-radius: var(--r-full); background: rgba(0, 174, 239, 0.18); }
.ds-bar-row { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--sp-6); align-items: center; padding: var(--sp-2) 0; }
.ds-width { position: relative; padding: var(--sp-4) var(--sp-5); border: 1px dashed var(--primary); border-radius: var(--r-md); text-align: center; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--ink-sky); background: rgba(0, 174, 239, 0.05); }
.ds-width + .ds-width { margin-top: var(--sp-4); }
.ds-width--narrow { max-width: var(--w-narrow); margin-inline: auto; border-color: var(--accent); color: var(--ink-amber); background: rgba(245, 158, 11, 0.06); }
.ds-ph { display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: var(--r-lg); background: var(--bg-warm); border: 1px solid var(--border-warm); color: var(--text-light); font-size: var(--fs-body-sm); }
.ds-row-item { padding: var(--sp-5) var(--sp-6); border: 1px solid var(--border-warm); border-radius: var(--r-md); background: var(--bg-white); font-size: var(--fs-body-md); }
.ds-doc-toc { padding: var(--sp-5); border: 1px solid var(--border-warm); border-radius: var(--r-md); font-size: var(--fs-body-md); line-height: 2; }
.ds-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); }
.ds-ground { padding: var(--sp-6) var(--pad-card) var(--pad-card); border: 1px solid var(--border-warm); border-radius: var(--r-lg); }
.ds-ground > .callout:last-child { margin-bottom: 0; }
.ds-top { align-items: start; }
@media (max-width: 600px) {
  .ds-type-row, .ds-bar-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}
/* The avatar page: rule lists with amber dots, Mimi's specimen grounds,
   the library card's head (name, then slug) and foot (the tier pill). */
.ds-rules { margin: 0; padding: 0; list-style: none; font-size: var(--fs-body-md); line-height: var(--lh-body-md); }
.ds-rules li { position: relative; padding-left: 1.1em; }
.ds-rules li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--accent); }
.ds-rules li + li { margin-top: var(--sp-2); }
.ds-specimen { display: flex; align-items: center; justify-content: center; min-height: 140px; margin: calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) var(--pad-card); padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg) var(--r-lg) 0 0; background: #FFF8E6; border-bottom: 1px solid var(--border-warm); }   /* the rabbit's card ground */
.ds-specimen--navy { background: #1E2340; }   /* the rabbit's navy ground (docs/avatar-system.md §4) */
.ds-card-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-card-head .card-title { margin: 0; }
.ds-card-head .ds-code { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.ds-card-foot { margin-top: auto; padding-top: var(--sp-4); }
/* A pill is a label, as wide as its words: a .card is a flex column, so
   one placed straight in it would otherwise stretch across the card. */
.card > .pill { align-self: flex-start; }
.card > .pill:first-child { margin-bottom: var(--sp-3); }
.ds-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-8); }
.ds-sizes figure { margin: 0; text-align: center; }
.ds-sizes figcaption { margin-top: var(--sp-2); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-light); }