/* ============================================================
   Sub-Etha Press — brand-guide.html page styles.
   Loaded after styles.css; layout only, tokens come from :root.
   ============================================================ */

/* ---------- Header ---------- */
.guide-header { width: 100%; max-width: var(--maxw-wide); padding: 40px 0 0; }
.guide-header .rule { margin: 40px 0; }

.title-row { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin: 48px 0 0; }

/* .title-row__mark, .doc-title, .doc-kicker, .doc-lede: shared, see styles.css */

/* ---------- Sections ---------- */
.doc-section--last { padding-bottom: clamp(64px, 10vh, 104px); }
/* .doc-section, .doc-h2, .tile: shared, see styles.css */
.section-lede {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 620px;
  text-wrap: pretty;
}
.sub-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 40px 0 0;
}
.sub-label--flush { margin: 0; }
.sub-label--demo { margin: 0 0 18px; }

/* ---------- Color swatches ---------- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 18px 0 0;
}
.swatch { background: var(--surface); min-width: 0; }
.swatch__chip { height: 96px; }
.chip--bg        { background: #0F1D16; }
.chip--surface   { background: #16271D; }
.chip--well      { background: #1E3428; }
.chip--border    { background: #2C4A38; }
.chip--text      { background: #F4F7F1; }
.chip--muted     { background: #A6B8AB; }
.chip--dim       { background: #869A8D; }
.chip--gold      { background: #C6A15A; }
.chip--goldhover { background: #D9B872; }
.swatch__info { padding: 14px 16px 16px; }
.swatch__hex { font-size: 13px; font-weight: 600; color: var(--text); }
.swatch__use { font-size: 12px; font-weight: 300; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ---------- Shared tile grids ---------- */
.tile-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 36px 0 0;
}
.tile-grid--duo  { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tile-grid--spec { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* ---------- Typography ---------- */
.type-card { padding: clamp(24px, 3.5vw, 40px); }
.type-card__glyph { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--text); }
.type-card__glyph--sans { font-family: var(--sans); font-size: 60px; font-weight: 500; }
.type-card__name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 22px 0 0;
}
.type-card__weights { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.type-card__weights--serif { font-family: var(--serif); font-style: italic; font-size: 17px; }
.type-card__desc { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--muted); margin: 16px 0 0; text-wrap: pretty; }

/* Type scale */
.scale { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin: 24px 0 0; }
.scale__row {
  background: var(--surface);
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 32px);
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.scale__row + .scale__row { border-top: 1px solid var(--border); }
.scale__sample { flex: 1 1 260px; min-width: 0; }
.sample { line-height: 1.1; color: var(--text); }
.sample--display { font-family: var(--serif); font-weight: 400; font-size: 52px; letter-spacing: 0.005em; }
.sample--h2      { font-family: var(--serif); font-weight: 400; font-size: 34px; }
.sample--quote   { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 24px; }
.sample--body    { font-weight: 300; font-size: 17px; }
.sample--ui      { font-weight: 600; font-size: 15px; }
.sample--eyebrow { font-weight: 600; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; }
.scale__meta { flex: 0 0 auto; text-align: right; font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--dim); }
.scale__name { color: var(--muted); font-weight: 500; }
.scale__spec { margin-top: 2px; }

/* ---------- Spacing & shape ---------- */
.spec-card { padding: clamp(24px, 3.5vw, 36px); }
.radius-list { display: flex; flex-direction: column; gap: 16px; margin: 22px 0 0; }
.radius-item { display: flex; align-items: center; gap: 16px; }
.radius-demo { width: 52px; height: 52px; background: var(--accent-dark); border: 1px solid var(--border); flex: 0 0 auto; }
.radius-demo--6 { border-radius: 6px; }
.radius-demo--4 { border-radius: 4px; }
.radius-demo--3 { border-radius: 3px; }
.spec-value { font-size: 14px; font-weight: 500; color: var(--text); }
.spec-use { font-size: 12.5px; font-weight: 300; color: var(--muted); margin-top: 2px; }

.width-list { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 0; }
.width-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.width-use { font-size: 12.5px; font-weight: 300; color: var(--muted); text-align: right; }
.width-track { height: 6px; background: var(--accent-dark); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.width-bar { height: 100%; background: var(--gold); opacity: 0.7; }
.width-bar--100 { width: 100%; }
.width-bar--82  { width: 82%; }
.width-bar--73  { width: 73%; }

/* ---------- Panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: clamp(24px, 3.5vw, 36px);
  margin: 24px 0 0;
}
.panel .rule { margin: 28px 0 0; }
.rhythm-list { margin: 20px 0 0; padding-left: 20px; }
.rhythm-list li { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--muted); margin-bottom: 8px; }
.rhythm-list li:last-child { margin-bottom: 0; }
.tok { color: var(--text); }

/* ---------- The mark ---------- */
.mark-cell { padding: clamp(28px, 4vw, 44px); display: flex; align-items: center; justify-content: center; }
.mark-cell svg { opacity: 0.5; }
.mark-notes { padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.mark-notes p { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--muted); margin: 0; text-wrap: pretty; }
.mark-notes em { font-family: var(--serif); font-style: italic; color: var(--text); }
.mark-notes ul { margin: 18px 0 0; padding-left: 20px; }
.mark-notes li { font-size: 13.5px; font-weight: 300; line-height: 1.8; color: var(--muted); margin-bottom: 6px; }
.mark-notes li:last-child { margin-bottom: 0; }

/* ---------- Components ---------- */
.components-panel {
  padding: clamp(28px, 4vw, 48px);
  margin: 36px 0 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.panel__divider { width: 100%; height: 1px; background: var(--border); border: 0; margin: 0; }
.demo-row { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.demo-inline { font-size: 15px; font-weight: 300; color: var(--muted); margin: 0; }

/* ---------- Voice ---------- */
.voice-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.8vw, 27px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 640px;
  margin: 32px 0 0;
  text-wrap: pretty;
}
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 24px;
  margin: 44px 0 0;
}
.voice__head { font-size: 13px; font-weight: 600; color: var(--gold); margin: 0; }
.voice__body { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--muted); margin: 10px 0 0; text-wrap: pretty; }