/* ============================================================
   reset.css
   ============================================================ */
/* Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

body {
  /* Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  /* min body height */
  /* min-height: 100vh; could cause problems */
  font-family: var(--font-family-primary);
}

/* Set shorter line heights on headings 
  and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  max-width: 60ch;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* Remove list styles */
ol,
ul {
  list-style: none;
  max-width: 60ch;
}

/* Remove blockquote defaults */
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* Remove table defaults */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove all animations and transitions for people 
  that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   variables.css
   ============================================================ */
:root {
  /* -------- COLOURS -------- */
  --clr-greyscale-000: #ffffff;
  --clr-greyscale-100: #f5f5f4;
  --clr-greyscale-200: #e7e5e4;
  --clr-greyscale-300: #d6d3d1;
  --clr-greyscale-400: #a8a29e;
  --clr-greyscale-500: #78716c;
  --clr-greyscale-600: #57534e;
  --clr-greyscale-700: #44403c;
  --clr-greyscale-800: #292524;
  --clr-greyscale-900: #1c1917;

  --clr-green-300: #b5b668;
  --clr-green-500: #737438;
  --clr-green-700: #454522;

  --clr-yellow-300: #ffd447;
  --clr-yellow-500: #f5bf18;
  --clr-yellow-700: #b78e2e;

  --clr-orange-300: #e2733a;
  --clr-orange-500: #bf5428;
  --clr-orange-700: #7c3719;

  --clr-cream-300: #faf7eb; /* primary */
  --clr-cream-500: #f3ebce;
  --clr-cream-700: #ebdead;

  --clr-blue-300: #269ad1;
  --clr-blue-500: #1c5c7d;
  --clr-blue-700: #0b3344;

  --clr-pink-300: #e1527b;
  --clr-pink-500: #bf204e;
  --clr-pink-700: #7a1532;

  --clr-purple-300: #8b4c94;
  --clr-purple-500: #59315f;
  --clr-purple-700: #321b36;

  /* -------- FONTS -------- */
  /* Font Family */
  --font-family-primary: "Atkinson Hyperlegible", serif;
  --font-family-secondary: "zenon", serif;
  --font-family-alternate: "interstate", sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Letter Spacing */
  --letter-spacing-tight: -0.05rem;
  --letter-spacing-loose: 0.05rem;

  /* Font Style */
  --font-style-italic: italic;

  /* Font Size */
  --font-size-base: var(--s0);
  --font-size-sm: var(--s-1);
  --font-size-xs: var(--s-2);
  --font-size-lg: var(--s1);
  --font-size-xl: var(--s2);
  --font-size-2xl: var(--s3);
  --font-size-3xl: var(--s4);
  --font-size-4xl: var(--s5);

  /* Text Transform */
  --text-transform-uppercase: uppercase;

  /* -------- SPACING -------- */
  --spacing-ratio: 1.2;
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--spacing-ratio));
  --s2: calc(var(--s1) * var(--spacing-ratio));
  --s3: calc(var(--s2) * var(--spacing-ratio));
  --s4: calc(var(--s3) * var(--spacing-ratio));
  --s5: calc(var(--s4) * var(--spacing-ratio));
  --s6: calc(var(--s5) * var(--spacing-ratio));
  --s7: calc(var(--s6) * var(--spacing-ratio));
  --s8: calc(var(--s7) * var(--spacing-ratio));
  --s-1: calc(var(--s0) / var(--spacing-ratio));
  --s-2: calc(var(--s-1) / var(--spacing-ratio));
  --s-3: calc(var(--s-2) / var(--spacing-ratio));
  --s-4: calc(var(--s-3) / var(--spacing-ratio));
  --s-5: calc(var(--s-4) / var(--spacing-ratio));
}

/* ============================================================
   utilities.css
   ============================================================ */
/* -------- TEXT COLOURS -------- */
.u-greyscale-000 {
  color: var(--clr-greyscale-000);
}

.u-greyscale-100 {
  color: var(--clr-greyscale-100);
}

.u-greyscale-200 {
  color: var(--clr-greyscale-200);
}

.u-greyscale-300 {
  color: var(--clr-greyscale-300);
}

.u-greyscale-400 {
  color: var(--clr-greyscale-400);
}

.u-greyscale-500 {
  color: var(--clr-greyscale-500);
}

.u-greyscale-600 {
  color: var(--clr-greyscale-600);
}

.u-greyscale-700 {
  color: var(--clr-greyscale-700);
}

.u-greyscale-800 {
  color: var(--clr-greyscale-800);
}

.u-greyscale-900 {
  color: var(--clr-greyscale-900);
}

.u-green-300 {
  color: var(--clr-green-300);
}

.u-green-500 {
  color: var(--clr-green-500);
}

.u-green-700 {
  color: var(--clr-green-700);
}

.u-yellow-300 {
  color: var(--clr-yellow-300);
}

.u-yellow-500 {
  color: var(--clr-yellow-500);
}

.u-yellow-700 {
  color: var(--clr-yellow-700);
}

.u-orange-300 {
  color: var(--clr-orange-300);
}

.u-orange-500 {
  color: var(--clr-orange-500);
}

.u-orange-700 {
  color: var(--clr-orange-700);
}

.u-cream-300 {
  color: var(--clr-cream-300);
}

.u-cream-500 {
  color: var(--clr-cream-500);
}

.u-cream-700 {
  color: var(--clr-cream-700);
}

.u-blue-300 {
  color: var(--clr-blue-300);
}

.u-blue-500 {
  color: var(--clr-blue-500);
}

.u-blue-700 {
  color: var(--clr-blue-700);
}

.u-pink-300 {
  color: var(--clr-pink-300);
}

.u-pink-500 {
  color: var(--clr-pink-500);
}

.u-pink-700 {
  color: var(--clr-pink-700);
}

.u-purple-300 {
  color: var(--clr-purple-300);
}

.u-purple-500 {
  color: var(--clr-purple-500);
}

.u-purple-700 {
  color: var(--clr-purple-700);
}

/* -------- BACKGROUND COLOURS -------- */
.u-bg-greyscale-000 {
  background-color: var(--clr-greyscale-000);
}

.u-bg-greyscale-100 {
  background-color: var(--clr-greyscale-100);
}

.u-bg-greyscale-200 {
  background-color: var(--clr-greyscale-200);
}

.u-bg-greyscale-300 {
  background-color: var(--clr-greyscale-300);
}

.u-bg-greyscale-400 {
  background-color: var(--clr-greyscale-400);
}

.u-bg-greyscale-500 {
  background-color: var(--clr-greyscale-500);
}

.u-bg-greyscale-600 {
  background-color: var(--clr-greyscale-600);
}

.u-bg-greyscale-700 {
  background-color: var(--clr-greyscale-700);
}

.u-bg-greyscale-800 {
  background-color: var(--clr-greyscale-800);
}

.u-bg-greyscale-900 {
  background-color: var(--clr-greyscale-900);
}

.u-bg-green-300 {
  background-color: var(--clr-green-300);
}

.u-bg-green-500 {
  background-color: var(--clr-green-500);
}

.u-bg-green-700 {
  background-color: var(--clr-green-700);
}

.u-bg-yellow-300 {
  background-color: var(--clr-yellow-300);
}

.u-bg-yellow-500 {
  background-color: var(--clr-yellow-500);
}

.u-bg-yellow-700 {
  background-color: var(--clr-yellow-700);
}

.u-bg-orange-300 {
  background-color: var(--clr-orange-300);
}

.u-bg-orange-500 {
  background-color: var(--clr-orange-500);
}

.u-bg-orange-700 {
  background-color: var(--clr-orange-700);
}

.u-bg-cream-300 {
  background-color: var(--clr-cream-300);
}

.u-bg-cream-500 {
  background-color: var(--clr-cream-500);
}

.u-bg-cream-700 {
  background-color: var(--clr-cream-700);
}

.u-bg-blue-300 {
  background-color: var(--clr-blue-300);
}

.u-bg-blue-500 {
  background-color: var(--clr-blue-500);
}

.u-bg-blue-700 {
  background-color: var(--clr-blue-700);
}

.u-bg-pink-300 {
  background-color: var(--clr-pink-300);
}

.u-bg-pink-500 {
  background-color: var(--clr-pink-500);
}

.u-bg-pink-700 {
  background-color: var(--clr-pink-700);
}

.u-bg-purple-300 {
  background-color: var(--clr-purple-300);
}

.u-bg-purple-500 {
  background-color: var(--clr-purple-500);
}

.u-bg-purple-700 {
  background-color: var(--clr-purple-700);
}

.u-inherit {
  color: inherit;
}

/* -------- SPACING -------- */
.u-ptb-s-5 {
  padding: var(--s-5) 0;
}

.u-pt-s-1 {
  padding-top: .5rem;
}

.u-pb-s7 {
  padding-bottom: var(--s7);
}

.u-ptb-s0 {
  padding: var(--s0) 0;
}

.u-pt-s0 {
  padding-top: var(--s0);
}

.u-ptb-s1 {
  padding: var(--s1) 0;
}

.u-pt-s1 {
  padding-top: var(--s1);
}

.u-ptb-s2 {
  padding: var(--s2) 0;
}

.u-pt-s2 {
  padding-top: var(--s2);
}

.u-ptb-s3 {
  padding: var(--s3) 0;
}

.u-pt-s3 {
  padding-top: var(--s3);
}

.u-ptb-s4 {
  padding: var(--s4) 0;
}

.u-ptb-s5 {
  padding: var(--s5) 0;
}

.u-pt-s5 {
  padding-top: var(--s5);
}

.u-ptb-s6 {
  padding: var(--s6) 0;
}

.u-pt-s6 {
  padding-top: var(--s6);
}

.u-ptb-s7 {
  padding: var(--s7) 0;
}

.u-pt-s7 {
  padding-top: var(--s7);
}

.u-ptb-s8 {
  padding: var(--s8) 0;
}

.u-pt-s8 {
  padding-top: var(--s8);
}

.u-ptb-big {
  padding: 9.5rem 0;
}

.u-mt-s1 {
  margin-top: var(--s1);
}

/* -------- TEXT -------- */

.u-font-primary {
  font-family: var(--font-family-primary);
}

.u-font-alternate {
  font-family: var(--font-family-alternate);
}

.u-font-secondary {
  font-family: var(--font-family-secondary);
}

.u-letter-spacing-tight {
  letter-spacing: var(--letter-spacing-tight);
} 

.u-letter-spacing-loose {
  letter-spacing: var(--letter-spacing-loose);
}

/* ============================================================
   layout.css
   ============================================================ */
/* -------- FIXED NAVBAR -------- */
.l-fixed {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1;
}

/* ============================================================
   primitives.css
   ============================================================ */
/* -------- THE STACK -------- */
.l-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  /* for large spacing */
  .l-stack-large > * + * {
    /* margin-top: var(--s5); */
    margin-top: var(--s8);
  }
  
  /* for small spacing */
  .l-stack-small > * + * {
    margin-top: var(--s2);
  }
  
 /* -------- THE BOX -------- */
  .l-box {
    padding: var(--s2); 
    border: 2px solid var(--clr-greyscale-400);  
    border-radius: 8px;
  }
  
  /* to support inversion for dark/light modes */
  .l-box * {
    color: inherit;
  }
  
 /* -------- THE CENTER -------- */
  .l-center {
      margin-left: auto;
      margin-right: auto;
    }

    .l-center--content {
        max-width: clamp(200px, 80%, 1024px);
    }

 /* -------- THE CLUSTER -------- */
  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1); 
  }
  
  .l-cluster--inline {
    justify-content: space-between;
    align-items: center;
  }
  
 /* -------- THE SIDEBAR -------- */
  .l-with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s0); 
  }
  
  .l-sidebar {
    flex-basis: 15rem; 
    flex-grow: 1;
    align-self: flex-start;
  }

  @media (min-width: 45rem) {
    .l-sidebar {
      position: sticky;
      top: 6.5rem;
    }
  }
  
  .l-not-sidebar {
    flex-basis: 0;
    flex-grow: 999;
    min-width: 50%; 
  }
  
/* -------- THE GRID -------- */
  .l-grid {
    display: grid;
    gap: var(--s0); /* arbitrary value */
  }

  @supports (width: min(250px, 100%)) { /* arbitrary value for min */
    .l-grid--all {
      grid-template-columns: 
        repeat(auto-fit, 
        minmax(min(250px, 100%), 1fr)); /* arbitrary value for min */
    }
  }

/* ============================================================
   typography.css
   ============================================================ */
/* -------- LINKS -------- */
a {
  color: var(--clr-blue-500);
  letter-spacing: var(--letter-spacing-loose);
  text-decoration: none;
}

a:hover {
  border-bottom: 2px solid var(--clr-blue-500);
  padding-bottom: 2px;
}

a.logo:hover {
  border-bottom: initial;
  padding-bottom: 0;
}

a.inline {
  color: var(--clr-blue-500);
  border-bottom: 1px solid var(--clr-blue-500);
  padding-bottom: .5px;
}

a.inline:hover {
  border-bottom: initial;
  text-decoration: none;
}

.u-nav__links {
  color: var(--clr-blue-500);
  font-weight: var(--font-weight-bold);
}

.u-nav__links--active {
  color: var(--clr-blue-500);
  font-weight: var(--font-weight-bold);
  font-style: italic;
}

a.u-nav__links--active:hover {
  border-bottom: none;
}

/* -------- TEXT -------- */
h1, .h1,
h2, .h2,
h3 {
  letter-spacing: var(--letter-spacing-loose);
  text-transform: var(--text-transform-uppercase);
  color: var(--clr-green-500);
}

h1, .h1 {
  font-size: var(--s4);
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-black);
  
}

h2, .h2 {
  font-size: var(--s0);
  font-family: var(--font-family-alternate);
}

h3 {
  font-size: var(--s0);
}

p {
  color: var(--clr-greyscale-800);
  hyphens: auto;
}

/* ============================================================
   components.css
   ============================================================ */
/* -------- ASSET LOCATION NOTE -------- */
.c-asset-note {
  max-width: 64ch;
  margin-top: var(--s-1);
  padding: var(--s-1) var(--s0);
  font-size: var(--s-1);
  color: var(--clr-greyscale-700);
  background-color: var(--clr-greyscale-100);
  border-left: 3px solid var(--clr-green-500);
  border-radius: 0 6px 6px 0;
}
.c-asset-note strong {
  color: var(--clr-greyscale-900);
  font-weight: var(--font-weight-bold);
}


/* ============================================================
   explorer-css  (moved from colour.html)
   ============================================================ */
.explorer-intro{max-width:65ch;color:var(--clr-greyscale-700);margin-top:var(--s0);}
  .explorer{margin-top:var(--s4);}

  /* swatch grid: two rows of four */
  .swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s0);max-width:620px;}
  .swatch-tile{cursor:pointer;background:none;border:2px solid transparent;border-radius:8px;padding:var(--s-2);display:flex;flex-direction:column;align-items:center;gap:var(--s-3);transition:border-color .2s;}
  .swatch-tile:hover{border-color:var(--clr-greyscale-300);}
  .swatch-tile[aria-selected="true"]{border:2px solid var(--clr-greyscale-400);border-radius:8px;}
  .swatch-tile .leaf-ico{width:100%;aspect-ratio:1/1;}
  .swatch-tile .t-name{font-family:var(--font-family-alternate),sans-serif;font-size:var(--s-1);text-transform:uppercase;letter-spacing:var(--letter-spacing-loose);color:var(--clr-greyscale-700);}

  /* detail panel */
  .detail{min-width:0;margin-top:var(--s3);border:2px solid var(--clr-greyscale-400);border-radius:8px;padding:var(--s2);}
  .detail-head{display:flex;align-items:flex-start;gap:var(--s1);flex-wrap:wrap;}
  .detail-head .leaf-ico{width:88px;height:88px;flex:0 0 auto;}
  .detail-head h2{font-size:var(--s3);margin:0;}

  .detail h3{font-family:var(--font-family-alternate),sans-serif;font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--clr-greyscale-600);margin:var(--s6) 0 var(--s0);}

  /* value cards */
  .val-name{font-family:var(--font-family-alternate),sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:var(--s-1);font-weight:var(--font-weight-bold);color:var(--clr-greyscale-800);}
  .val-list{font-size:var(--s-1);line-height:1.7;color:var(--clr-greyscale-700);font-variant-numeric:tabular-nums;}
  .val-list b{color:var(--clr-greyscale-800);font-weight:var(--font-weight-bold);}
  .hex-row{display:flex;align-items:center;gap:.35em;}
  .copy-btn{font:inherit;background:none;border:0;padding:.05em .3em;margin:0 -.3em;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;border-radius:5px;color:var(--clr-greyscale-700);transition:background-color .15s,color .15s;}
  .copy-btn:hover{background:var(--clr-greyscale-100);color:var(--clr-green-500);}
  .copy-btn:focus-visible{outline:2px solid var(--clr-green-500);outline-offset:1px;}
  .copy-btn .hex-code{font-variant-numeric:tabular-nums;}
  .copy-btn svg{width:14px;height:14px;flex:0 0 auto;}
  .copy-btn .ic-copy{opacity:.5;}
  .copy-btn:hover .ic-copy{opacity:1;}
  .copy-btn .ic-check{display:none;color:var(--clr-green-500);}
  .copy-btn.copied{color:var(--clr-green-500);}
  .copy-btn.copied .ic-copy{display:none;}
  .copy-btn.copied .ic-check{display:block;}

  /* variations */
  .variations{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;background:var(--clr-greyscale-100);border-radius:12px;padding:var(--s1) var(--s2);}
  .split-wrap{width:150px;height:104px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
  .split-leaf{width:104px;height:150px;transform:rotate(90deg);}
  .var-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);flex:1 1 300px;}
  .var-col .val-name{margin-bottom:var(--s-4);}
  .sw{display:inline-block;width:.85em;height:.85em;border-radius:3px;vertical-align:-1px;margin-right:.35em;border:1px solid rgba(0,0,0,.15);}

  /* combinations */
  .combo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s1);}
  .combo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-4);}
  .combo .leaf-ico{width:72px;height:72px;}
  .combo .c-lab{font-size:var(--s-2);color:var(--clr-greyscale-700);line-height:1.25;}
  .combo .c-rate{display:flex;align-items:center;justify-content:center;gap:.4em;flex-wrap:wrap;}
  .combo .c-ratio{font-family:var(--font-family-alternate),sans-serif;font-weight:var(--font-weight-bold);font-size:var(--s-1);color:var(--clr-greyscale-800);font-variant-numeric:tabular-nums;}
  .badge{display:inline-block;font-size:var(--s-3);font-weight:var(--font-weight-bold);letter-spacing:.03em;padding:.12em .5em;border-radius:999px;}
  .b-aaa,.b-aa{background:#eef0dc;color:#5f7d2b;}
  .b-large{background:#f6ecd2;color:#a9791a;}
  .b-fail{background:#f7dde4;color:#bf204f;}
  .empty-note{color:var(--clr-greyscale-500);font-size:var(--s-1);}
  .fail-note{color:#bf204f;font-size:var(--s-2);margin-top:.2em;}

/* ============================================================
   logos-css  (moved from primary-logos.html)
   ============================================================ */
  .sec-head{font-family:var(--font-family-alternate),sans-serif;font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--clr-greyscale-600);margin:var(--s2) 0 var(--s-1);}
  .sec-note{max-width:64ch;color:var(--clr-greyscale-700);font-size:var(--s0);margin-bottom:var(--s1);}

  .mk{fill:currentColor;display:block;height:auto;max-width:100%;}

  /* colour switcher */
  .color-switch{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--clr-greyscale-100);border-radius:10px;padding:var(--s-1) var(--s0);margin-bottom:var(--s1);}
  .cs-label{font-size:var(--s-1);color:var(--clr-greyscale-700);margin-right:.2rem;}
  .cs{width:24px;height:24px;border-radius:50%;border:2px solid var(--clr-greyscale-000);box-shadow:0 0 0 1px var(--clr-greyscale-400);background:var(--c);cursor:pointer;padding:0;transition:transform .12s;}
  .cs:hover{transform:scale(1.12);}
  .cs[aria-pressed="true"]{box-shadow:0 0 0 2px var(--clr-greyscale-900);}

  /* primary logos */
  .primary-grid{display:flex;flex-direction:column;gap:var(--s1);color:var(--logo-color,#737438);}
  .logo-card{border:2px solid var(--clr-greyscale-400);border-radius:8px;padding:var(--s2);display:flex;flex-direction:row;align-items:center;gap:var(--s3);}
  .logo-stage{flex:0 0 auto;width:280px;min-height:170px;display:flex;align-items:center;justify-content:center;padding:var(--s1);border-radius:8px;transition:background-color .2s;}
  .primary-grid.on-dark .logo-stage{background:var(--clr-greyscale-800);}
  .primary-grid.on-dark .loc-variant .mk{background:var(--clr-greyscale-800);border-radius:6px;padding:6px 10px;box-sizing:content-box;}
  .logo-body{flex:1;min-width:0;}
  @media (max-width:640px){.logo-card{flex-direction:column;align-items:stretch;} .logo-stage{width:auto;}}
  .logo-card h3{color:var(--clr-greyscale-800);}
  .logo-card p{font-size:var(--s-1);color:var(--clr-greyscale-700);margin-top:var(--s-2);}
  .loc-variant{margin-top:var(--s0);padding-top:var(--s0);border-top:1px dashed var(--clr-greyscale-300);display:flex;align-items:center;gap:var(--s0);min-height:70px;}
  .loc-label{font-size:var(--s-2);color:var(--clr-greyscale-500);text-transform:uppercase;letter-spacing:.05em;}

  /* badges + icons */
  .badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s1);}
  .badge-card{border:2px solid var(--clr-greyscale-400);border-radius:8px;padding:var(--s1);text-align:center;}
  .badge-stage{display:flex;align-items:center;justify-content:center;padding:var(--s0) 0 var(--s-1);}
  .badge-card h3{font-size:var(--s0);color:var(--clr-greyscale-600);font-weight:var(--font-weight-regular);}
  .badge-card p{font-size:var(--s-1);color:var(--clr-greyscale-700);margin-top:var(--s-3);}
  .usage-note{border-left:3px solid var(--clr-greyscale-400);padding:var(--s-2) 0 var(--s-2) var(--s0);margin-top:var(--s1);font-size:var(--s0);color:var(--clr-greyscale-700);}
  .usage-note b{color:var(--clr-greyscale-800);}

  /* do / don't lists */
  .usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
  @media (max-width:640px){.usage-grid{grid-template-columns:1fr;}}
  .u-col h3{font-size:var(--s1);}
  .u-col.do h3{color:var(--clr-green-500);}
  .u-col.dont h3{color:var(--clr-pink-500);}
  .u-list{margin-top:var(--s0);}
  .u-list li{display:flex;gap:.55rem;align-items:flex-start;padding:.32rem 0;font-size:var(--s0);color:var(--clr-greyscale-800);line-height:1.4;border-bottom:1px solid var(--clr-greyscale-200);}
  .u-list li::before{flex:0 0 auto;width:1.15em;height:1.15em;border-radius:50%;color:#fff;font-size:.72em;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:.15em;}
  .do .u-list li::before{content:"\2713";background:var(--clr-green-500);}
  .dont .u-list li::before{content:"\2717";background:var(--clr-pink-500);}

  /* visual example cards */
  .ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s1);}
  .ex-card{border:2px solid var(--clr-greyscale-300);border-radius:8px;overflow:hidden;}
  .ex-stage{height:118px;display:flex;align-items:center;justify-content:center;padding:var(--s0);overflow:hidden;background:var(--clr-greyscale-100);}
  .ex-cap{display:flex;align-items:center;gap:.4rem;font-size:var(--s-2);padding:.5rem .7rem;line-height:1.3;color:var(--clr-greyscale-700);}
  .ex-cap::before{flex:0 0 auto;width:1.15em;height:1.15em;border-radius:50%;color:#fff;font-size:.7em;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
  .ex-card.bad .ex-cap::before{content:"\2717";background:var(--clr-pink-500);}
  .ex-card.good .ex-cap::before{content:"\2713";background:var(--clr-green-500);}
  .ex-mk{width:150px;color:#737438;}
  .ex-warp .ex-mk{transform:scale(1.5,.7);}
  .ex-rotate .ex-mk{transform:rotate(-13deg);}
  .ex-opacity .ex-mk{opacity:.28;}
  .ex-busy .ex-stage{background:repeating-linear-gradient(48deg,#269ad1,#e1527b 26px,#f5bf18 52px,#737438 78px);}
  .ex-clear .cs-box{border:1px dashed var(--clr-greyscale-500);padding:14px;display:flex;}

/* ============================================================
   variant-css  (moved from variant-logos.html)
   ============================================================ */
.v-intro{max-width:64ch;color:var(--clr-greyscale-700);margin-top:var(--s0);}
  .v-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s0);margin-top:var(--s2);}
  .v-tile{cursor:pointer;background:none;border:2px solid transparent;border-radius:8px;padding:var(--s0) var(--s-2);display:flex;flex-direction:column;align-items:center;gap:var(--s-2);color:var(--clr-green-500);transition:border-color .15s;}
  .v-tile:hover{border-color:var(--clr-greyscale-300);}
  .v-tile[aria-selected="true"]{border-color:var(--clr-greyscale-400);}
  .v-tile-ico{height:88px;display:flex;align-items:center;}
  .v-tile-ico svg{fill:currentColor;}
  .v-tile-name{font-family:var(--font-family-alternate),sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:var(--s-1);color:var(--clr-greyscale-700);}

  .v-detail{margin-top:var(--s2);border:2px solid var(--clr-greyscale-400);border-radius:8px;padding:var(--s2);}
  .v-detail h2{color:var(--clr-greyscale-800);}
  .v-use{color:var(--clr-greyscale-700);font-size:var(--s-1);margin-top:var(--s-3);max-width:60ch;}
  .v-body{display:grid;grid-template-columns:1fr 250px;gap:var(--s2);margin-top:var(--s1);align-items:start;}
  @media (max-width:720px){.v-body{grid-template-columns:1fr;}}
  .v-stage{min-height:320px;display:flex;align-items:center;justify-content:center;border:1px solid var(--clr-greyscale-300);border-radius:8px;padding:var(--s2);background:var(--clr-greyscale-100);transition:background-color .2s;}
  .v-stage.on-dark{background:var(--clr-greyscale-800);}
  .vk{fill:currentColor;display:block;max-width:100%;}

  .v-controls{display:flex;flex-direction:column;gap:var(--s1);}
  .ctl-label{display:block;font-family:var(--font-family-alternate),sans-serif;font-size:var(--s-2);letter-spacing:.06em;text-transform:uppercase;color:var(--clr-greyscale-600);margin-bottom:var(--s-3);}
  .seg{display:inline-flex;border:1px solid var(--clr-greyscale-400);border-radius:8px;overflow:hidden;}
  .seg-btn{background:none;border:0;padding:.4rem .7rem;font:inherit;font-size:var(--s-1);cursor:pointer;color:var(--clr-greyscale-700);border-right:1px solid var(--clr-greyscale-300);}
  .seg-btn:last-child{border-right:0;}
  .seg-btn[aria-pressed="true"]{background:var(--clr-green-500);color:#fff;}
  .v-swatches{display:flex;flex-wrap:wrap;gap:.45rem;}
  .v-foot{margin-top:var(--s1);font-size:var(--s-2);color:var(--clr-greyscale-500);}

/* ============================================================
   text-examples  (typography page)
   ============================================================ */
.te-block{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s2);align-items:flex-start;padding:var(--s1) 0;border-top:1px solid var(--clr-greyscale-200);}
.te-block:first-of-type{border-top:0;padding-top:var(--s0);}
.te-note{flex:0 1 376px;color:var(--clr-greyscale-800);font-size:var(--s0);max-width:60ch;}
.te-media{display:flex;flex-direction:column;gap:var(--s1);align-items:flex-end;max-width:360px;}
.te-catch{flex-direction:column;gap:var(--s0);}
.te-img{max-width:100%;height:auto;border-radius:6px;}
.te-img--poster{width:300px;}
.te-img--diagram{width:360px;}
.te-img--screen{width:300px;border:1px solid var(--clr-greyscale-300);}
.catch{width:270px;max-width:100%;height:auto;display:block;}
.catch text{font-family:var(--font-family-secondary),Georgia,serif;fill:#faf7eb;}
.catch .c-sm{font-size:20px;}
.catch .c-lg{font-size:44px;}

/* ============================================================
   icons-and-graphics page
   ============================================================ */
.ic-sets{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s1);}
  @media (max-width:640px){.ic-sets{grid-template-columns:1fr;}}
.ic-set h3,.ge-group h3{font-family:var(--font-family-alternate),sans-serif;font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--clr-greyscale-600);margin-bottom:var(--s0);}
.ic-grid{display:grid;grid-template-columns:repeat(3,72px);gap:var(--s1);}
.ic-grid img{width:64px;height:64px;object-fit:contain;}
.ge-group{margin-top:var(--s2);}
.ge-items{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;}
.ge-items img{display:block;}
.ge-items--underline{flex-direction:column;align-items:flex-start;gap:var(--s0);}
.ge-items--underline img{width:240px;}
.ge-items--swash img{width:190px;height:auto;}
.ge-items--shape{align-items:flex-end;}
.ge-items--shape img{height:78px;width:auto;}
.ge-items--arrow img{width:76px;height:auto;}

/* ============================================================
   templates page
   ============================================================ */
.tmpl-img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--clr-greyscale-300);}
.tmpl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);margin-top:var(--s0);}
.compare-card{border:2px solid var(--clr-greyscale-400);border-radius:8px;padding:var(--s2);margin-top:var(--s0);}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s0) var(--s2);}
.compare-head{font-family:var(--font-family-alternate),sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:var(--s-1);color:var(--clr-greyscale-600);}


/* Sizing Guidelines */
.size-grid{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s2);margin-top:var(--s1);align-items:flex-start;}
.spec{display:flex;flex-direction:column;}
.spec-label{min-height:5em;max-width:22ch;margin-bottom:var(--s-2);}
.spec-ratio{display:block;font-family:var(--font-family-alternate),sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:var(--s0);color:var(--clr-greyscale-800);margin-bottom:.15rem;}
.spec-use{display:block;font-size:var(--s-1);color:var(--clr-greyscale-600);line-height:1.35;}
.spec-rect{border-radius:4px;}
.spec-dims{margin-top:var(--s-2);font-family:var(--font-family-alternate),sans-serif;font-size:var(--s-1);color:var(--clr-greyscale-600);letter-spacing:.03em;}