/* ============================================================
 * imjustdex.com — /brand/brand.css (brand4)
 *
 * Scope: style guide page scaffolding only.
 *
 * This file is a dependent layer on top of the production stack.
 * Load order on /brand/ is:
 *   1. tokens.css        — all design tokens (single source of truth)
 *   2. shell.css         — page chrome (skip, rulers, masthead, footer)
 *   3. plates.css        — production plate grid components
 *   4. home-augment.css  — homepage-tier components (issue-head, identity-
 *                           hero, lane-index, subscribe-manifesto)
 *   5. article.css       — article-tier components (pull quote, callout,
 *                           scripture, stat, section head, study note)
 *   6. brand.css (this)  — guide-only scaffolding
 *
 * Doctrine: the brand guide IS the design system it documents. No forked
 * tokens live here. No mode system. No chrome duplicates. If the rule
 * isn't in tokens.css, it isn't in the system — and this file will not
 * paper over that.
 * ============================================================ */


/* ── Utility helpers ───────────────────────────────────────── */

.u-span-full      { grid-column: 1 / -1; }
.u-mb-gap         { margin-bottom: var(--space-sm); }
.u-mt-gap         { margin-top: var(--space-sm); }
.u-mb-16          { margin-bottom: var(--space-md); }
.u-mt-32          { margin-top: var(--space-xl); }
.u-pad-y-20       { padding: var(--space-lg) 0; }

.u-flex-row {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
}

.u-flex-row-sm {
  display: flex;
  gap: var(--space-chrome);
  align-items: center;
  flex-wrap: wrap;
}

.u-logo-specimen { width: 80px; height: auto; }

.u-scope-frame {
  margin-bottom: var(--space-2xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.u-plate-texture-title { font-size: var(--text-quote); }
.u-plate-meta-light {
  color: #0a0a0a;
  background: #f5f5f1;
  border-color: #0a0a0a;
}

.u-intro-body {
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  color: var(--body-color);
  margin: 0;
}

.u-mono-meta {
  font-family: var(--mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--body-muted);
  line-height: var(--lh-loose);
  margin: 0;
}

.u-mono-helper {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--body-muted);
  margin: 0;
}


/* ── Guide hero ─────────────────────────────────────────────
 * The page's h1 / deck unit. Lives above all numbered sections.
 * ──────────────────────────────────────────────────────────── */

.guide-hero {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  margin-bottom: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.guide-hero-logo { flex-shrink: 0; }
.guide-hero-logo svg {
  width: 120px;
  height: auto;
  display: block;
}

.guide-hero-text { max-width: 680px; }

.guide-hero h1 {
  font-family: var(--display);
  font-size: var(--text-h1);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0 0 var(--space-sm);
}

.guide-hero .deck {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--body-muted);
  max-width: 500px;
  line-height: var(--lh-normal);
  margin: 0 auto;
}


/* ── Numbered sections ─────────────────────────────────────── */

.section {
  margin-top: var(--space-2xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-chrome);
  margin: 0 0 var(--space-sm);
  background: var(--panel);
  border: var(--border-weight-content) solid var(--border);
  padding: var(--space-md) var(--space-lg);
}

.section-head h2 {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
  margin: 0;
}

.section-head-line {
  flex: 1;
  height: var(--border-weight-content);
  background: var(--accent);
}

.section-body {
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  color: var(--body-color);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  background: var(--panel);
  border: var(--border-weight-content) solid var(--border);
  padding: var(--space-xl) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.section-body p { margin: 0 0 1.4em; }
.section-body p:last-child { margin-bottom: 0; }

.demo-frame .section-body,
.carousel-spec-card .section-body {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  max-width: none;
}


/* ── Logo showcase ─────────────────────────────────────────── */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}

.logo-card {
  border: var(--border-weight-content) solid var(--border);
  overflow: hidden;
}

.logo-card-render {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.logo-card-render svg { width: 120px; height: auto; }
.logo-card-render.on-light  { background: #f4f4f1; }
.logo-card-render.on-dark   { background: #060606; }
.logo-card-render.on-accent { background: var(--accent); }

.logo-card-label {
  padding: var(--space-sm) var(--space-chrome);
  background: var(--panel);
  border-top: var(--border-weight-chrome) solid var(--border);
}

.logo-card-name {
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.logo-card-note {
  font-family: var(--mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-footer);
  color: var(--body-muted);
}

.logo-rules {
  margin-top: var(--space-md);
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-lg);
}

.logo-rules h3,
.logo-download h3 {
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-sm);
}

.logo-rules ul {
  margin: 0;
  padding: 0 0 0 18px;
  font-family: var(--body);
  font-size: var(--text-chrome);
  line-height: var(--lh-loose);
  color: var(--body-color);
}

.logo-rules li { margin-bottom: 4px; }

.logo-download {
  margin-top: var(--space-md);
  border: var(--border-weight-content) solid var(--border);
  background: var(--ink);
  padding: var(--space-lg);
}

.logo-download h3 { color: var(--accent-text); }

.logo-download a {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--text-chrome);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  color: var(--bg);
  text-decoration: none;
  border-bottom: var(--border-weight-chrome) solid var(--accent);
  padding-bottom: 3px;
  transition: color var(--motion-med) var(--ease-default),
              border-color var(--motion-med) var(--ease-default);
}

.logo-download a:hover,
.logo-download a:focus-visible {
  color: var(--accent);
  outline: none;
}

.logo-download p {
  font-family: var(--mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-footer);
  color: var(--bg);
  opacity: .56;
  margin: var(--space-sm) 0 0;
}


/* ── Color swatches ────────────────────────────────────────── */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.swatch {
  border: var(--border-weight-content) solid var(--border);
  overflow: hidden;
}

.swatch-color {
  height: 80px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xs) var(--space-sm);
}

.swatch-label {
  padding: var(--space-sm);
  background: var(--panel);
}

.swatch-name {
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.swatch-value {
  font-family: var(--mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-badge);
  color: var(--body-muted);
}


/* ── Typography specimens ──────────────────────────────────── */

.type-specimen {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-xl) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.type-label {
  font-family: var(--mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body-muted);
  margin-bottom: var(--space-sm);
}

.type-display {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0;
}

.type-body-text {
  font-family: var(--body);
  font-size: var(--text-lede);
  line-height: var(--lh-loose);
  color: var(--body-color);
  margin: 0;
}

.type-mono-text {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  margin: 0;
}

.type-plex-text {
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: var(--lh-snug);
  margin: 0;
}


/* ── Demo frame wrapper ────────────────────────────────────── */

.demo-frame {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.demo-label {
  font-family: var(--mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-md);
}


/* ── Component demos — article tier ────────────────────────
 * Mirrors article.css with demo- prefix so guide samples render
 * without importing article.css's scope rules.
 * ──────────────────────────────────────────────────────────── */

.demo-pull-quote {
  margin: 0;
  padding: var(--space-xl) var(--space-lg);
  border-top: var(--border-weight-content) solid var(--border);
  border-bottom: var(--border-weight-content) solid var(--border);
  background: var(--body-tint);
}

.demo-pull-quote p {
  font-family: var(--display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.demo-callout {
  margin: 0;
  padding: 0 0 0 18px;
  border-left: var(--border-weight-content) solid var(--accent);
  font-family: var(--body);
  font-size: var(--text-quote);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.demo-callout p { margin: 0; }
.demo-callout-emph {
  color: var(--accent-text);
  font-weight: var(--weight-bold);
}

.demo-scripture {
  border: var(--border-weight-chrome) solid var(--body-faint);
  background: var(--body-tint);
  padding: var(--space-lg);
  margin: 0;
}

.demo-scripture p {
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--body-color);
  font-style: italic;
  margin: 0 0 var(--space-sm);
}

.demo-scripture p:last-of-type { margin-bottom: var(--space-sm); }

.demo-scripture cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

.demo-stat {
  display: grid;
  grid-template-columns: var(--border-weight-content) 1fr;
  gap: 0 var(--space-lg);
  margin: 0;
}

.demo-stat-bar { background: var(--accent); }

.demo-stat-text {
  font-family: var(--display);
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--ink);
}

.demo-stat-text span {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--body-muted);
  margin-top: var(--space-xs);
}

.demo-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-chrome);
}

.demo-section-head h3 {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
  margin: 0;
}

.demo-section-head-line {
  flex: 1;
  height: var(--border-weight-content);
  background: var(--accent);
}

.demo-meta-rail {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--meta-bg);
  color: var(--meta-ink);
  border: var(--border-weight-chrome) solid var(--border);
  font-family: var(--body);
  font-size: var(--text-label);
  letter-spacing: var(--track-badge);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.demo-tag {
  display: inline-block;
  padding: var(--space-hairline) var(--space-xs) 3px;
  border: var(--border-weight-chrome) solid var(--border);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

.demo-research-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  gap: var(--space-md);
}

.demo-research-cta-text {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body-muted);
  line-height: var(--lh-snug);
}

.demo-research-cta-link {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  border: var(--border-weight-chrome) solid var(--border);
  background: var(--ink);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
}

.demo-indicator {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-indicator);
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: var(--border-weight-chrome) solid var(--border);
  padding: var(--space-xs) var(--space-sm);
}

.demo-progress-track {
  height: var(--border-weight-content);
  background: var(--rule);
  position: relative;
}

.demo-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 100%;
  background: var(--ink);
}

.demo-ghost {
  border: var(--border-weight-content) dashed var(--border);
  background: transparent;
  padding: var(--space-xl) var(--space-lg);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo-ghost-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--ink);
  opacity: .35;
  margin: 0;
}

.demo-ghost-rule {
  width: 40px;
  height: var(--border-weight-chrome);
  background: var(--ink);
  opacity: .15;
  margin: var(--space-chrome) 0 var(--space-sm);
}

.demo-ghost-date {
  font-family: var(--body);
  font-size: var(--text-citation);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-teaser);
  text-transform: uppercase;
  color: var(--ink);
  opacity: .3;
}

.demo-ghost-meta {
  margin-top: auto;
  padding-top: var(--space-md);
  font-family: var(--body);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-badge);
  text-transform: uppercase;
  color: var(--ink);
  opacity: .25;
  border-top: var(--border-weight-chrome) dashed var(--border);
  align-self: flex-start;
  padding-right: var(--space-sm);
}


/* ── Study note (scripture articles) ───────────────────────
 * Demo wrapper for the expandable footnote pattern used across
 * the nine scripture-backed essays.
 * ──────────────────────────────────────────────────────────── */

.demo-study-note {
  border: var(--border-weight-chrome) solid var(--body-faint);
  background: var(--body-tint);
  margin: 0;
}

.demo-study-note summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-study-note summary::-webkit-details-marker { display: none; }

.demo-study-note summary::after {
  content: "＋";
  font-family: var(--mono);
  font-size: var(--text-label);
  color: var(--body-muted);
  transition: transform var(--motion-med) var(--ease-default);
}

.demo-study-note[open] summary::after { content: "−"; }

.demo-study-note-body {
  padding: 0 var(--space-md) var(--space-md);
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--body-color);
  border-top: 1px solid var(--body-faint);
  padding-top: var(--space-sm);
}


/* ── Plate grid demo ───────────────────────────────────────
 * Guide-scoped demo plates used to show texture classes and
 * the identity plate. Production plates are demoed via the
 * real plates.css in Section 17.
 * ──────────────────────────────────────────────────────────── */

.demo-plates {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-sm);
}

.demo-plate {
  position: relative;
  min-height: 160px;
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--motion-fast) var(--ease-default);
}

.demo-plate:hover { border-color: var(--accent); }

.demo-plate-body {
  padding: var(--space-chrome) var(--space-chrome) var(--space-xs);
  position: relative;
  z-index: 2;
  flex: 1;
}

.demo-plate-title {
  font-family: var(--display);
  font-size: var(--text-h3);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0;
}

.demo-plate-title.inverse {
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.demo-plate-meta {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: auto;
  padding: var(--space-hairline) var(--space-xs);
  background: var(--meta-bg);
  color: var(--meta-ink);
  border-top: var(--border-weight-chrome) solid var(--border);
  border-right: var(--border-weight-chrome) solid var(--border);
  font-size: var(--text-micro);
  letter-spacing: var(--track-badge);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.demo-plate.span4 { grid-column: span 4; }
.demo-plate.span5 { grid-column: span 5; }
.demo-plate.span3 { grid-column: span 3; }

.demo-plate.identity {
  background: var(--ink);
  color: var(--bg);
  min-height: 200px;
}
.demo-plate.identity:hover { border-color: var(--border); }

.demo-plate.img-plate { overflow: hidden; }
.demo-plate.img-plate .demo-plate-body { justify-content: flex-end; }

.demo-plate.img-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: grayscale(1) contrast(1.15);
  z-index: 0;
}

.demo-plate.img-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.78),
    rgba(0,0,0,.08) 55%,
    rgba(0,0,0,.14));
  z-index: 1;
}

.demo-plate.img-plate .demo-plate-meta {
  color: #0a0a0a;
  background: #f5f5f1;
  border-color: #0a0a0a;
}

.demo-plate.concrete::before {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.25)),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.18), transparent 20%),
    linear-gradient(180deg, #c7c7c7 0 18%, #8b8b8b 18% 28%, #5e5e5e 28% 45%, #2e2e2e 45% 100%);
}

.demo-plate.noise::before {
  background-image:
    linear-gradient(90deg, rgba(255,0,90,.18), transparent 18%, transparent 82%, rgba(0,225,255,.14)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 2px, rgba(0,0,0,0) 2px 6px),
    linear-gradient(135deg, #222, #000 44%, #444 58%, #111 100%);
}

.demo-plate.lines::before {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    repeating-linear-gradient(63deg, #d7d7d7 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #9b9b9b, #4d4d4d 72%, #141414);
}


/* ── Accent rules grid ─────────────────────────────────────── */

.accent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.accent-box {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-lg);
}

.accent-box-header {
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: var(--space-chrome);
}

.accent-box-header.permitted  { color: var(--accent-text); }
.accent-box-header.prohibited { color: var(--body-muted); }

.accent-list {
  font-family: var(--body);
  font-size: var(--text-chrome);
  line-height: var(--lh-normal);
  color: var(--body-color);
}

.accent-list-item { margin-bottom: var(--space-hairline); }

.accent-list-item::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: var(--border-weight-content);
  margin-right: var(--space-xs);
  vertical-align: middle;
}

.permitted .accent-list-item::before  { background: var(--accent); }
.prohibited .accent-list-item::before { background: var(--body-faint); }


/* ── Voice examples ────────────────────────────────────────── */

.voice-example {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-xl) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.voice-example blockquote {
  margin: 0;
  font-family: var(--body);
  font-size: var(--text-lede);
  line-height: var(--lh-loose);
  color: var(--body-color);
}

.voice-example .register {
  font-family: var(--mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-sm);
}


/* ── Carousel / platform / slide demos ─────────────────────── */

.carousel-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.carousel-spec-card {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-lg);
}

.carousel-spec-card h4 {
  font-family: var(--mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-teaser);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-xs);
}

.carousel-spec-card p {
  font-family: var(--body);
  font-size: var(--text-nav);
  line-height: var(--lh-normal);
  color: var(--body-color);
  margin: 0;
}

/* Slide demos · thumbnails of actual shipping templates, not schematic
   reconstructions. Source PNGs live in img/social-examples/, generated
   from exports/imjustdex-social-templates/ at 1080×1440 (portrait dark,
   resized to 720×960 for web). When the template system updates, refresh
   the images — the demos stay true to what ships by construction. */
.slide-demo {
  width: 100%;
  aspect-ratio: 3 / 4;          /* matches portrait 1080×1440 */
  background: #060606;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(243,240,232,.16);
}
.slide-demo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.slide-type-label {
  font-family: var(--mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--space-xs);
  text-align: center;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-sm);
}

.platform-card {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  padding: var(--space-md);
}

.platform-card h4 {
  font-family: var(--mono);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
}

.platform-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-hairline) 0;
  border-bottom: 1px solid var(--rule);
}

.platform-row:last-child { border-bottom: 0; }

.platform-type {
  font-family: var(--body);
  font-size: var(--text-label);
  color: var(--body-color);
}

.platform-size {
  font-family: var(--mono);
  font-size: var(--text-meta);
  color: var(--accent-text);
  letter-spacing: var(--track-footer);
}


/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1120px) {
  .demo-plates { grid-template-columns: repeat(8, 1fr); }
  .demo-plate.span4,
  .demo-plate.span5,
  .demo-plate.span3 { grid-column: span 4; }
}

@media (max-width: 760px) {
  .demo-plates { grid-template-columns: 1fr; }
  .demo-plate.span4,
  .demo-plate.span5,
  .demo-plate.span3 { grid-column: span 1; }

  .swatch-grid     { grid-template-columns: repeat(2, 1fr); }
  .accent-grid     { grid-template-columns: 1fr; }
  .demo-research-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Long section labels wrap on mobile — avoid horizontal compression. */
  .section-head h2,
  .demo-section-head h3 {
    white-space: normal;
  }
}


/* ── Print ─────────────────────────────────────────────────
 * Guide governs print-adjacent surfaces; the page itself prints
 * as a clean editorial document.
 * ──────────────────────────────────────────────────────────── */

@media print {
  .section,
  .guide-hero,
  .demo-frame,
  .type-specimen,
  .voice-example,
  .carousel-spec-card,
  .platform-card,
  .swatch,
  .logo-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .section { margin-top: var(--space-lg); }
}