/* ============================================================
   The Montessori Collective — internal document set
   Chrome and tokens for /brand/, /members/ and /internal/.

   The design-system tokens below are the ones the exported
   documents reference. Three of them are deliberately NOT the
   values in the design package: the same three accessibility
   departures already made in css/style.css are repeated here,
   so an internal page cannot quietly reintroduce a contrast
   failure the public site has already corrected.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/archivo-var.woff2) format('woff2-variations'),
       url(../fonts/archivo-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/newsreader-var.woff2) format('woff2-variations'),
       url(../fonts/newsreader-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(../fonts/newsreader-italic.woff2) format('woff2-variations'),
       url(../fonts/newsreader-italic.woff2) format('woff2');
}

:root {
  /* ---- forest greens ---- */
  --mc-forest-900:#17231D;
  --mc-forest-700:#123A2C;
  --mc-forest-500:#2E5646;
  --mc-forest-400:#5C8676;   /* DEPARTURE — package #4A7263 fails 3:1 as a UI boundary */
  --mc-forest-300:#7FA391;
  --mc-forest-200:#A9BFB5;
  --mc-forest-100:#B9CCC2;
  --mc-forest-050:#CFDDD5;

  /* ---- three beads, order fixed ---- */
  --mc-green:#22A657;
  --mc-blue:#1D6FD0;
  --mc-red:#E23A22;
  --mc-blue-100:#F2F7FE;     /* DEPARTURE — package #BCD8F8 reads 3.38:1 on bead blue */

  /* ---- paper neutrals ---- */
  --mc-paper-000:#FFFDF9;
  --mc-paper-100:#F4F1E6;
  --mc-paper-200:#E9E5DA;
  --mc-paper-300:#E2DCCD;
  --mc-paper-400:#D8D2C3;
  --mc-paper-500:#C6C0B0;

  /* ---- greyed greens on paper ---- */
  --mc-slate-600:#5A665F;
  --mc-slate-500:#5A665F;    /* DEPARTURE — package #6E7A72 reads 3.96:1 at label sizes */
  --mc-slate-400:#8C9B93;
  --mc-slate-300:#5E6D65;
  --mc-slate-200:#2B3A33;
  --mc-white:#FFFFFF;

  /* ---- semantic ---- */
  --surface-page:var(--mc-paper-100);
  --surface-canvas:var(--mc-paper-200);
  --surface-card:var(--mc-paper-000);
  --surface-dark:var(--mc-forest-700);
  --surface-darkest:var(--mc-forest-900);
  --surface-blue:var(--mc-blue);
  --text-body:var(--mc-forest-900);
  --text-secondary:var(--mc-slate-600);
  --text-meta:var(--mc-slate-500);
  --text-display:var(--mc-forest-700);
  --text-on-dark:var(--mc-paper-100);
  --text-on-dark-secondary:var(--mc-forest-200);
  --text-on-dark-meta:var(--mc-forest-300);
  --text-on-blue:var(--mc-white);
  --border-section:var(--mc-paper-400);
  --border-card:var(--mc-paper-400);
  --border-hairline:var(--mc-paper-300);
  --border-control:var(--mc-paper-500);
  --border-on-dark:var(--mc-forest-500);
  --border-on-dark-strong:var(--mc-forest-400);
  --action-primary-bg:var(--mc-forest-700);
  --action-primary-fg:var(--mc-paper-100);
  --action-alert-bg:#D8341C;   /* DEPARTURE — bead red darkened to clear 4.5:1 on white */
  --action-alert-fg:var(--mc-white);
  --action-paper-bg:var(--mc-paper-100);
  --action-paper-fg:var(--mc-forest-700);
  --link-color:var(--mc-forest-700);
  --link-hover:var(--mc-red);

  /* ---- type ---- */
  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:'Archivo', Helvetica, Arial, sans-serif;
  --type-hero:74px;    --type-hero-lh:0.98;  --type-hero-ls:-0.035em;
  --type-display:56px; --type-display-lh:1;  --type-display-ls:-0.03em;
  --type-h1:52px;      --type-h1-lh:1.06;    --type-h1-ls:-0.035em;
  --type-h2:44px;      --type-h2-lh:1.05;    --type-h2-ls:-0.03em;
  --type-quote:42px;   --type-quote-lh:1.18; --type-quote-ls:-0.02em;
  --type-h3:38px;      --type-h3-lh:1.08;    --type-h3-ls:-0.03em;
  --type-h4:26px;      --type-h4-lh:1.15;
  --type-h5:24px;      --type-h5-lh:1.15;
  --type-numeral:20px;
  --type-lead:18px;    --type-lead-lh:1.65;
  --type-body-lg:17px; --type-body-lh:1.7;
  --type-body:16px;
  --type-body-sm:15px; --type-body-sm-lh:1.7;
  --type-ui:14px;
  --type-ui-sm:13px;
  --type-eyebrow:12px; --type-eyebrow-ls:0.18em;
  --type-micro:11px;   --type-micro-ls:0.16em;
  --ls-eyebrow:0.18em; --ls-meta:0.14em; --ls-button:0.12em;
  --ls-tag:0.10em;     --ls-nav:0.04em;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  /* ---- spacing ---- */
  --space-1:2px;  --space-2:6px;  --space-3:10px; --space-4:14px;
  --space-5:18px; --space-6:22px; --space-7:26px; --space-8:32px;
  --space-9:40px; --space-10:44px; --space-11:56px; --space-12:72px;
  --space-13:84px; --space-14:96px;
  --page-width:1440px; --page-gutter:56px;
  --section-y:96px; --section-y-dark:88px; --section-y-tight:84px; --section-y-loose:100px;
  --header-height:76px;
  --card-pad:28px; --tile-pad:40px 32px; --panel-pad:34px;
  --button-pad:17px 26px; --button-pad-sm:12px 20px;

  /* ---- borders ---- */
  --radius-none:0; --radius-dot:50%;
  --border-width:1px; --border-width-strong:1.5px;
  --rule-height:14px;
  --dot-sm:10px; --dot-md:15px; --dot-lg:24px; --dot-xl:28px;
  --shadow-none:none;
}

/* ============================================================
   1. Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mc-paper-200);
  color: var(--mc-forest-900);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link-color); text-decoration: none; transition: color 120ms linear; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--mc-green);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--mc-forest-700); color: var(--mc-paper-100);
  padding: 12px 20px; font-size: var(--type-ui-sm);
  letter-spacing: var(--ls-button); text-transform: uppercase; z-index: 100;
}
.skip-link:focus { left: 0; color: var(--mc-paper-100); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ============================================================
   2. Internal chrome — deliberately not the marketing header.
      These pages are a reference set, not part of the funnel.
   ============================================================ */

.ic-bar {
  background: var(--mc-forest-900);
  color: var(--mc-forest-050);
  border-bottom: 1px solid var(--mc-forest-500);
}
.ic-bar__inner {
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
  min-height: 60px; display: flex; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
.ic-mast { display: flex; align-items: center; gap: 12px; color: var(--mc-paper-100); }
.ic-mast:hover { color: var(--mc-paper-100); }
.ic-mast__beads { display: inline-flex; gap: 5px; }
.ic-mast__beads span { width: 9px; height: 9px; border-radius: 50%; display: block; }
.ic-mast__beads span:nth-child(1) { background: var(--mc-green); }
.ic-mast__beads span:nth-child(2) { background: var(--mc-blue); }
.ic-mast__beads span:nth-child(3) { background: var(--mc-red); }
.ic-mast__name {
  font-size: var(--type-ui-sm); letter-spacing: var(--ls-nav);
  font-weight: var(--fw-medium);
}
.ic-bar__nav { display: flex; gap: 24px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.ic-bar__nav a {
  color: var(--mc-forest-050); font-size: var(--type-ui-sm);
  letter-spacing: var(--ls-nav);
}
.ic-bar__nav a:hover { color: var(--mc-red); }
.ic-bar__nav a[aria-current="page"] {
  color: var(--mc-paper-100);
  border-bottom: 1px solid var(--mc-green);
  padding-bottom: 3px;
}
.ic-signout {
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--mc-forest-300);
  background: none; border: 1px solid var(--mc-forest-500);
  padding: 7px 12px; font-family: var(--font-sans); cursor: pointer;
  transition: color 120ms linear, border-color 120ms linear;
}
.ic-signout:hover { color: var(--mc-red); border-color: var(--mc-forest-400); }

/* ---- tier badge ---- */
/* The bead colour is carried by the dot and the rule, not by the label. Bead
   blue and bead red both read under 4:1 on the dark bar, and a tier badge that
   cannot be read is worse than one that is not colourful. */
.ic-tier {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; padding: 6px 10px;
  color: var(--mc-paper-100);
  border: 1px solid var(--tier-accent, var(--mc-forest-400));
  white-space: nowrap;
}
.ic-tier::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tier-accent, var(--mc-forest-400)); flex: 0 0 auto;
}
.ic-tier--public { --tier-accent: var(--mc-green); }
.ic-tier--member { --tier-accent: var(--mc-blue); }
.ic-tier--admin  { --tier-accent: var(--mc-red); }

/* On a paper ground (the hub tier boxes) the label takes the ink colour. */
.ic-tierbox .ic-tier { color: var(--mc-forest-900); }

/* ---- document masthead ---- */
.ic-head {
  background: var(--mc-paper-100);
  border-bottom: 1px solid var(--border-section);
}
.ic-head__inner { max-width: 1440px; margin: 0 auto; padding: 44px 32px 40px; }
.ic-head__crumb {
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--mc-slate-500); margin: 0 0 20px;
}
.ic-head__crumb a { color: var(--mc-slate-500); }
.ic-head__crumb a:hover { color: var(--mc-red); }
.ic-head__row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.ic-head h1 {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: var(--type-h2); line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls); color: var(--text-display);
  margin: 0; flex: 1 1 480px;
}
.ic-head__lead {
  font-size: var(--type-lead); line-height: var(--type-lead-lh);
  color: var(--mc-slate-600); max-width: 720px; margin: 22px 0 0;
}
.ic-head__meta {
  display: flex; gap: 32px; flex-wrap: wrap; margin: 26px 0 0;
  padding-top: 22px; border-top: 1px solid var(--border-hairline);
}
.ic-head__meta div { min-width: 150px; }
.ic-head__meta dt {
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--mc-slate-500); margin: 0 0 6px;
}
.ic-head__meta dd { margin: 0; font-size: var(--type-ui); color: var(--mc-forest-900); }

/* ---- callouts ---- */
.ic-note {
  max-width: 1440px; margin: 0 auto; padding: 22px 32px;
  font-size: var(--type-body-sm); line-height: var(--type-body-sm-lh);
}
.ic-note--warn {
  background: var(--mc-forest-700); color: var(--mc-forest-100);
  max-width: none;
}
.ic-note--warn > span { display: block; max-width: 1376px; margin: 0 auto; }
.ic-note--warn strong {
  display: block; color: var(--mc-paper-100); font-weight: var(--fw-semibold);
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; margin-bottom: 8px;
}
.ic-note--info {
  background: var(--mc-paper-000); border-bottom: 1px solid var(--border-section);
  max-width: none;
}
.ic-note--info > span { display: block; max-width: 1376px; margin: 0 auto; color: var(--mc-slate-600); }

/* ============================================================
   3. The document frame
      Exported documents are drawn at a fixed 1440px. Rather than
      reflow a specification drawing — which would make the stated
      scales lie — the frame scrolls, and offers to fit to width.
   ============================================================ */

.ic-docbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--mc-paper-200);
  border-bottom: 1px solid var(--border-section);
  padding: 10px 32px;
  display: none; gap: 16px; align-items: center;
  font-size: var(--type-ui-sm); color: var(--mc-slate-600);
}
.ic-fit {
  font-family: var(--font-sans); font-size: var(--type-micro);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  background: none; border: 1px solid var(--border-control);
  color: var(--mc-forest-700); padding: 8px 14px; cursor: pointer;
  transition: opacity 120ms linear;
}
.ic-fit:hover { opacity: 0.85; }
.ic-fit[aria-pressed="true"] {
  background: var(--mc-forest-700); color: var(--mc-paper-100);
  border-color: var(--mc-forest-700);
}

.ic-doc { overflow-x: auto; background: var(--mc-paper-200); }
.ic-doc__scale { width: 1440px; transform-origin: top left; }
.ic-doc__scale > div { width: 1440px !important; margin: 0 !important; }

@media (max-width: 1439px) {
  .ic-docbar { display: flex; }
}

/* ============================================================
   4. Hub pages
   ============================================================ */

.ic-main { max-width: 1440px; margin: 0 auto; padding: 0 32px 96px; }

.ic-intro { padding: 56px 0 44px; border-bottom: 1px solid var(--border-section); }
.ic-intro p {
  font-size: var(--type-lead); line-height: var(--type-lead-lh);
  color: var(--mc-slate-600); max-width: 760px; margin: 0;
}

.ic-eyebrow {
  font-size: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--mc-slate-500);
  margin: 56px 0 24px; display: block;
}

/* Hairline grid drawn with per-card borders rather than a gap-and-background
   trick, so a row that does not fill leaves paper behind it and not a stray
   block of rule colour. */
.ic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border-section);
  border-left: 1px solid var(--border-section);
}
.ic-card {
  background: var(--mc-paper-000); padding: 32px 28px 28px;
  border-right: 1px solid var(--border-section);
  border-bottom: 1px solid var(--border-section);
  display: flex; flex-direction: column; gap: 14px;
  transition: background 120ms linear;
}
a.ic-card { color: inherit; }
a.ic-card:hover { background: var(--mc-paper-100); color: inherit; }
a.ic-card:hover .ic-card__go { color: var(--mc-red); }
a.ic-card:hover .ic-card__go span { transform: translateX(4px); }
.ic-card__eyebrow {
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--mc-slate-500); margin: 0;
}
.ic-card h3 {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: var(--type-h4); line-height: var(--type-h4-lh);
  letter-spacing: -0.02em; color: var(--text-display); margin: 0;
}
.ic-card p.ic-card__body {
  font-size: var(--type-body-sm); line-height: var(--type-body-sm-lh);
  color: var(--mc-slate-600); margin: 0; flex: 1;
}
.ic-card__go {
  font-size: var(--type-micro); letter-spacing: var(--ls-button);
  text-transform: uppercase; color: var(--mc-forest-700);
  margin: 8px 0 0; display: inline-flex; align-items: center; gap: 8px;
  transition: color 120ms linear;
}
.ic-card__go span { display: inline-block; transition: transform 120ms linear; }

/* ---- tier switcher on the hubs ---- */
.ic-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.ic-tierbox { border: 1px solid var(--border-section); padding: 24px; background: var(--mc-paper-000); }
.ic-tierbox h4 {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: var(--type-h5); margin: 14px 0 10px; color: var(--text-display);
}
.ic-tierbox p { font-size: var(--type-body-sm); line-height: var(--type-body-sm-lh); color: var(--mc-slate-600); margin: 0 0 14px; }
.ic-tierbox a.ic-card__go { margin: 0; }

/* ============================================================
   5. The unlock screen
   ============================================================ */

.ic-unlock { min-height: 100vh; display: flex; flex-direction: column; background: var(--mc-forest-700); }
.ic-unlock__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 24px; }
.ic-unlock__card { width: 100%; max-width: 460px; background: var(--mc-paper-100); padding: 44px 40px 40px; }
.ic-unlock__card h1 {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: var(--type-h3); line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls); color: var(--text-display); margin: 18px 0 0;
}
.ic-unlock__card p {
  font-size: var(--type-body-sm); line-height: var(--type-body-sm-lh);
  color: var(--mc-slate-600); margin: 16px 0 0;
}
.ic-field { margin: 28px 0 0; }
.ic-field label {
  display: block; font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--mc-slate-500); margin-bottom: 8px;
}
.ic-field input {
  width: 100%; font-family: var(--font-sans); font-size: var(--type-body);
  padding: 15px 16px; border: 1px solid var(--border-control);
  background: var(--mc-paper-000); color: var(--mc-forest-900);
  border-radius: 0; transition: border-color 120ms linear;
}
.ic-field input:focus { border-color: var(--mc-forest-700); outline: 2px solid var(--mc-green); outline-offset: 1px; }
.ic-submit {
  margin-top: 20px; width: 100%; font-family: var(--font-sans);
  font-size: var(--type-ui-sm); letter-spacing: var(--ls-button);
  text-transform: uppercase; font-weight: var(--fw-medium);
  background: var(--action-primary-bg); color: var(--action-primary-fg);
  border: none; padding: 17px 26px; cursor: pointer;
  transition: opacity 120ms linear;
}
.ic-submit:hover { opacity: 0.85; }
.ic-submit:active { opacity: 0.7; }
.ic-error {
  margin: 18px 0 0; padding: 14px 16px; font-size: var(--type-ui-sm);
  color: #8E1F0E; border: 1px solid #E2A79C; background: #FBEFEC;
}
.ic-unlock__foot {
  padding: 22px 24px; text-align: center;
  font-size: var(--type-ui-sm); color: var(--mc-forest-200);
}
.ic-unlock__foot a { color: var(--mc-forest-050); }
.ic-unlock__foot a:hover { color: var(--mc-red); }

/* ============================================================
   6. Foot
   ============================================================ */

.ic-foot {
  background: var(--mc-forest-900); color: var(--mc-slate-400);
  padding: 40px 0; border-top: 1px solid var(--mc-forest-500);
}
.ic-foot__inner {
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
  display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap;
  font-size: var(--type-ui-sm);
}
.ic-foot a { color: var(--mc-forest-050); }
.ic-foot a:hover { color: var(--mc-red); }

@media (max-width: 720px) {
  .ic-head__inner { padding: 32px 20px; }
  .ic-head h1 { font-size: var(--type-h3); }
  .ic-main { padding: 0 20px 64px; }
  .ic-bar__inner { padding: 12px 20px; }
  .ic-foot__inner { padding: 0 20px; }
}

/* ============================================================
   7. Public brand-basics page
   ============================================================ */

.bp-sec { padding: 56px 0; border-bottom: 1px solid var(--border-section); }
.bp-sec:last-child { border-bottom: none; }
.bp-sec .ic-eyebrow { margin-top: 0; }

.bp-lead {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: var(--type-h3); line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls); color: var(--text-display);
  margin: 0 0 26px; max-width: 900px;
}
.bp-body {
  font-size: var(--type-body-lg); line-height: var(--type-body-lh);
  color: var(--mc-slate-600); max-width: 680px; margin: 0 0 18px;
}
.bp-note {
  font-size: var(--type-body-sm); line-height: var(--type-body-sm-lh);
  color: var(--mc-slate-600); max-width: 680px;
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--border-hairline);
}

/* naming table */
.bp-naming { margin: 0; display: grid; gap: 1px; background: var(--border-section);
  border: 1px solid var(--border-section); }
.bp-naming > div {
  background: var(--mc-paper-000); padding: 24px 26px;
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: baseline;
}
.bp-naming dt {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: var(--type-h5); line-height: 1.25; color: var(--text-display);
}
.bp-naming dd {
  margin: 0; font-size: var(--type-body-sm); line-height: var(--type-body-sm-lh);
  color: var(--mc-slate-600);
}
@media (max-width: 760px) { .bp-naming > div { grid-template-columns: 1fr; gap: 10px; } }

/* lockups */
.bp-lockups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 32px; }
.bp-lockup {
  border: 1px solid var(--border-section); background: var(--mc-paper-000);
  padding: 34px; display: flex; flex-direction: column; gap: 22px;
  align-items: flex-start; justify-content: space-between;
}
.bp-lockup--dark { background: var(--mc-forest-700); border-color: var(--mc-forest-700); }
.bp-lockup img { max-width: 100%; height: auto; }
.bp-cap {
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--mc-slate-500);
}
.bp-lockup--dark .bp-cap { color: var(--mc-forest-300); }

/* rule cards */
.bp-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border-section); border: 1px solid var(--border-section); }
.bp-rules--two { grid-template-columns: repeat(2, 1fr); }
.bp-rules > div { background: var(--mc-paper-000); padding: 28px; }
.bp-rules h4 {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: var(--type-h5); color: var(--text-display); margin: 0 0 10px;
}
.bp-rules p { font-size: var(--type-ui); line-height: 1.65; color: var(--mc-slate-600); margin: 0; }
@media (max-width: 900px) { .bp-rules, .bp-rules--two { grid-template-columns: 1fr; } }

/* swatches */
.bp-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border-section); border: 1px solid var(--border-section); }
.sw { background: var(--mc-paper-000); display: flex; flex-direction: column; }
.sw__chip { height: 116px; }
.sw__meta { padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; }
.sw__name { font-size: var(--type-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--mc-forest-900); }
.sw__hex { font-size: var(--type-ui-sm); color: var(--mc-slate-600); letter-spacing: 0.04em; }
.sw__role { font-size: var(--type-ui-sm); color: var(--mc-slate-600); line-height: 1.5; }
@media (max-width: 900px) { .bp-swatches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bp-swatches { grid-template-columns: 1fr; } }

/* type specimen */
.bp-type { border: 1px solid var(--border-section); background: var(--mc-paper-000); }
.bp-type__row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px;
  padding: 28px 30px; border-bottom: 1px solid var(--border-hairline); align-items: baseline;
}
.bp-type__row:last-child { border-bottom: none; }
.bp-type__spec {
  font-size: var(--type-micro); letter-spacing: var(--ls-meta);
  text-transform: uppercase; color: var(--mc-slate-500); line-height: 1.9;
}
.bp-type__sample--display {
  font-family: var(--font-display); font-weight: var(--fw-light);
  font-size: 38px; line-height: 1.1; letter-spacing: -0.03em; color: var(--text-display);
}
.bp-type__sample--quote {
  font-family: var(--font-display); font-weight: var(--fw-light); font-style: italic;
  font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-display);
}
.bp-type__sample--body { font-size: var(--type-body-lg); line-height: var(--type-body-lh); color: var(--mc-forest-900); }
.bp-type__sample--label {
  font-size: var(--type-ui-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--mc-forest-900);
}
@media (max-width: 760px) { .bp-type__row { grid-template-columns: 1fr; gap: 12px; } }

.bp-quote {
  font-family: var(--font-display); font-weight: var(--fw-light); font-style: italic;
  font-size: 30px; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--text-display); margin: 0 0 32px; padding-left: 26px;
  border-left: 2px solid var(--mc-green); max-width: 760px;
}