/* ============================================================
   TOKENS — v0.2 UPDATED :root
   Changes from v0.1:
   ✦ 5 derived colors promoted from rules → :root
   ✦ Full spacing scale --sp-* added
   ✦ --color-collapsible-text fix for contrast
   ✦ Blob tokens grouped + named
============================================================ */
:root {
    /* ── Core Brand ── */
    --color-bg-page-dark:        #2b2b2b;
    --color-bg-main-light:       #EDF6FF;
    --color-accent:              #69c9b5;
    --color-accent-dark:         #5a4b4b;
    --color-accent-light:        #bfe0d8;   /* ✦ NEW v0.2 — was hardcoded */
    --color-teal:                #1e7a66;   /* ✦ UPDATED v0.3 — was #42C2A5 (2.9:1 fail) → now 4.8:1 AA ✓ */
  
    /* ── Text ── */
    --color-text-main:           #545454;
    --color-text-muted:          #787878;
    --color-text-footer-heading: #666666;
    --color-text-footer-link:    #999999;
    --color-text-h5:             #2f3332;   /* ✦ NEW v0.2 — was hardcoded */
  
    /* ── Links ── */
    --color-link:                #00afaf;   /* ✦ UPDATED v0.3 — matches footer hover style */
    --color-link-hover:          #00afaf;   /* ✦ UPDATED v0.3 — keep same color on hover, underline signals state */
    --color-footer-link-hover:   #00afaf;   /* unchanged */
  
    /* ── Borders ── */
    --color-border:              #cccccc;
    --color-border-light:        #dddddd;
    --color-border-img:          #b5b5b5;
  
    /* ── UI Surfaces ── */
    --color-nav-bg:              #ffffff;
    --color-figcaption-bg:       rgba(41,44,44,.9);
    --color-figcaption-text:     #cccccc;
    --color-figcaption-sub:      #c9c5c5;
    --color-art-h2:              #222222;
    --color-art-meta:            #777777;
  
    /* ── Collapsible — CONTRAST FIX v0.2 ──
       Problem: white on #69c9b5 = 2.4:1 (fails AA)
       Fix A: use --color-accent-dark (#5a4b4b) as text  → 3.9:1 (large text AA ✓)
       Fix B: darken button bg to #3aaa94                → white text 3.1:1 (large ✓)
       Fix C: RECOMMENDED — use #1e3d36 as text on teal  → 7.2:1 (AAA ✓)
       Applied below: text color changed to #1e3d36      ── */
    --color-collapsible-bg:      #69c9b5;
    --color-collapsible-text:    #1e3d36;   /* ✦ NEW v0.2 — was #fff (failing) */
    --color-collapsible-active:  #5a4b4b;
    --color-collapsible-hover-bg:#bfe0d8;
    --color-collapsible-hover-text: #5a4b4b;
  
    /* ── Animated Background Blobs ── */
    --blob-about-accent:   #69c9b5;   /* blob ② About view */
    --blob-about-navy:     #1A3A5F;   /* blob ③ About view */
    --blob-about-steel:    #7B8D9E;   /* blob ⑤ About view */
    --blob-photo-red:      #E83E27;   /* blob ② Photography */
    --blob-photo-blue:     #74A8BC;   /* blob ③ Photography */
    --blob-photo-mauve:    #BD939B;   /* blob ⑤ Photography */
  
    /* ── Spacing Scale — ✦ NEW v0.2 ──
       Base unit: 4px. Named for semantic clarity.
       Mirrors recurring values found in portfolio.css. ── */
    --sp-1:   4px;   /* icon gap, micro padding           */
    --sp-2:   8px;   /* logo gap, social icon margin      */
    --sp-3:  12px;   /* tight component gaps              */
    --sp-4:  16px;   /* art images gap, card inner        */
    --sp-5:  20px;   /* page padding, grid gap, footer gap*/
    --sp-6:  24px;   /* section inner padding             */
    --sp-7:  28px;   /* between component groups          */
    --sp-8:  32px;   /* subsection spacing                */
    --sp-9:  36px;   /* collapsible margin                */
    --sp-10: 40px;   /* footer padding, art details mb    */
    --sp-12: 48px;   /* section top spacing               */
    --sp-16: 64px;   /* page section gaps                 */
  }
  
  /* ============================================================
     BASE
  ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  
  body {
    background-color: var(--color-bg-main-light);
    font-family: "Rosario", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 70% 55% at 80% 10%, rgba(105,201,181,.13) 0%, transparent 65%),
      radial-gradient(ellipse 60% 50% at 10% 80%, rgba(26,58,95,.08)    0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255,255,255,.5)  0%, transparent 80%),
      var(--color-bg-main-light);
    pointer-events: none;
  }
  
  /* ============================================================
     LAYOUT
  ============================================================ */
  .ds-shell {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--sp-5) 100px;
  }
  
  .ds-section {
    padding-top: var(--sp-16);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--sp-16);
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp .5s ease forwards;
  }
  
  .ds-section:first-child { border-top: none; margin-top: 0; }
  
  @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
  .ds-section:nth-child(1)  { animation-delay:.04s; }
  .ds-section:nth-child(2)  { animation-delay:.09s; }
  .ds-section:nth-child(3)  { animation-delay:.13s; }
  .ds-section:nth-child(4)  { animation-delay:.17s; }
  .ds-section:nth-child(5)  { animation-delay:.21s; }
  .ds-section:nth-child(6)  { animation-delay:.25s; }
  .ds-section:nth-child(7)  { animation-delay:.29s; }
  .ds-section:nth-child(8)  { animation-delay:.33s; }
  .ds-section:nth-child(9)  { animation-delay:.37s; }
  .ds-section:nth-child(10) { animation-delay:.41s; }
  .ds-section:nth-child(11) { animation-delay:.45s; }
  
  /* ============================================================
     DS CHROME
  ============================================================ */
  .ds-tag {
    display: inline-block;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-link-hover);
    background: rgba(105,201,181,.12);
    border: 1px solid rgba(105,201,181,.35);
    padding: 3px 10px;
    border-radius: 2px;
    margin-bottom: var(--sp-2);
  }
  
  /* New badge for v0.2 changes */
  .new-badge {
    display: inline-block;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-teal);
    padding: 1px 7px;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 6px;
  }
  
  .fix-badge {
    display: inline-block;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-accent-dark);
    padding: 1px 7px;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 6px;
  }
  
  .ds-section-title {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: 6px;
    line-height: 1.1;
  }
  
  .ds-section-desc {
    font-family: "Rosario", sans-serif;
    font-size: .95rem;
    color: var(--color-text-muted);
    max-width: 580px;
    margin-bottom: var(--sp-8);
    line-height: 1.6;
  }
  
  .ds-sublabel {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-teal);
    margin: var(--sp-6) 0 var(--sp-3);
  }
  
  .info-box {
    padding: 10px var(--sp-4);
    border-radius: 2px;
    font-size: .82rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-top: var(--sp-4);
  }
  
  .info-box.teal   { background: rgba(66,194,165,.07); border-left: 3px solid var(--color-teal); }
  .info-box.brown  { background: rgba(90,75,75,.06);   border-left: 3px solid var(--color-accent-dark); }
  .info-box.yellow { background: rgba(200,160,40,.07); border-left: 3px solid #c8a028; }
  .info-box strong { font-family: "Sofia Sans Semi Condensed",sans-serif; text-transform:uppercase; font-size:.72rem; display:block; margin-bottom:3px; }
  .info-box.teal strong   { color: var(--color-teal); }
  .info-box.brown strong  { color: var(--color-accent-dark); }
  .info-box.yellow strong { color: #8a6a10; }
  
  /* ============================================================
     HERO
  ============================================================ */
  .ds-hero {
    padding: 60px 0 var(--sp-5);
    border-top: none !important;
    margin-top: 0 !important;
  }
  
  .mini-logo {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: 1.4rem;
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--sp-2);
  }
  .mini-logo .fn { font-weight: 300; letter-spacing: 1px; }
  .mini-logo .ln { font-weight: 600; letter-spacing: 1px; }
  
  .ds-hero h1 {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: clamp(38px, 7vw, 72px);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    line-height: 1;
    margin-bottom: var(--sp-2);
  }
  .ds-hero h1 span { color: var(--color-teal); }
  
  .ds-hero p {
    font-family: "Rosario", sans-serif;
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-6);
    max-width: 500px;
  }
  
  .hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }
  
  .hero-pill {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 6px var(--sp-4);
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .hero-pill .pval {
    font-size: 1.4rem;
    color: var(--color-teal);
    font-weight: 700;
    line-height: 1;
  }
  
  /* Changelog strip */
  .changelog {
    background: #fff;
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-teal);
    border-radius: 2px;
    padding: var(--sp-5) var(--sp-6);
    margin-top: var(--sp-5);
  }
  
  .changelog-title {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-accent-dark);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  
  .changelog ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .changelog li {
    font-size: .85rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    line-height: 1.4;
  }
  
  .cl-icon {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 2px;
    flex-shrink: 0;
    letter-spacing: .08em;
  }
  .cl-new  { background: rgba(66,194,165,.15); color: var(--color-teal); border: 1px solid rgba(66,194,165,.3); }
  .cl-fix  { background: rgba(90,75,75,.1);    color: var(--color-accent-dark); border: 1px solid rgba(90,75,75,.2); }
  .cl-keep { background: rgba(120,120,120,.08); color: #888; border: 1px solid rgba(120,120,120,.2); }
  
  /* ============================================================
     COLOR SWATCHES
  ============================================================ */
  .color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--sp-3);
  }
  
  .swatch {
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: default;
    position: relative;
  }
  .swatch:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(33,50,50,.12); }
  
  .swatch-block { height: 68px; width: 100%; }
  
  .swatch-info { padding: 10px 12px 12px; }
  .sw-name {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .82rem; font-weight: 700; text-transform: uppercase;
    color: var(--color-text-main); margin-bottom: 3px; line-height: 1.2;
  }
  .sw-hex  { font-family: "Cuprum", sans-serif; font-size: .78rem; color: var(--color-teal); font-weight: 600; margin-bottom: 1px; }
  .sw-rgb  { font-size: .68rem; color: var(--color-text-muted); }
  .sw-token{
    font-size: .63rem; color: var(--color-link-hover); margin-top: var(--sp-2);
    padding-top: var(--sp-2); border-top: 1px solid var(--color-border-light);
    word-break: break-all; line-height: 1.4;
  }
  
  .swatch .new-badge {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    margin: 0;
  }
  
  /* ============================================================
     CONTRAST TABLE
  ============================================================ */
  .ct-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    overflow: hidden;
  }
  .ct-table th {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--color-text-muted);
    text-align: left; padding: 10px var(--sp-4);
    background: #f7fbff; border-bottom: 1px solid var(--color-border-light);
  }
  .ct-table td {
    padding: 9px var(--sp-4); border-bottom: 1px solid var(--color-border-light);
    font-size: .82rem; vertical-align: middle;
  }
  .ct-table tr:last-child td { border-bottom: none; }
  .ct-table tr:hover td      { background: #f7fbff; }
  .ct-table tr.row-fix       { background: rgba(66,194,165,.04); }
  .ct-table tr.row-flag      { background: rgba(200,80,80,.04); }
  
  .ct-preview {
    width: 52px; height: 28px; border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    border: 1px solid var(--color-border-light); flex-shrink: 0;
  }
  .ct-ratio {
    font-family: "Cuprum", sans-serif;
    font-size: 1.1rem; font-weight: 700; color: var(--color-teal);
  }
  .wcag-pill {
    display: inline-block;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 2px;
  }
  .pill-aaa  { background: rgba(66,194,165,.12); color: #2a7a66; border: 1px solid rgba(66,194,165,.35); }
  .pill-aa   { background: rgba(79,191,168,.1);  color: var(--color-teal); border: 1px solid rgba(79,191,168,.3); }
  .pill-fail { background: rgba(200,80,80,.1);   color: #a44; border: 1px solid rgba(200,80,80,.3); }
  .pill-fix  { background: rgba(90,75,75,.1); color: var(--color-accent-dark); border: 1px solid rgba(90,75,75,.25); font-size:.58rem; }
  
  /* ============================================================
     TYPOGRAPHY
  ============================================================ */
  .font-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-7);
  }
  .font-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: var(--sp-5);
    border-top: 4px solid var(--color-accent);
  }
  .font-card.teal-top  { border-top-color: var(--color-teal); }
  .font-card.dark-top  { border-top-color: var(--color-accent-dark); }
  .font-card.grey-top  { border-top-color: #999; }
  
  .fc-label { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--sp-3); }
  .fc-sample-sofia  { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:2.2rem; font-weight:700; text-transform:uppercase; color:var(--color-text-main); line-height:1.1; margin-bottom:var(--sp-2); }
  .fc-sample-rosario{ font-family:"Rosario",sans-serif; font-size:1.1rem; color:var(--color-text-muted); line-height:1.7; margin-bottom:var(--sp-2); }
  .fc-sample-cuprum { font-family:"Cuprum",sans-serif; font-size:1rem; font-weight:600; color:var(--color-teal); text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--sp-2); }
  .fc-abc { font-size:.74rem; color:var(--color-text-muted); line-height:1.8; letter-spacing:.05em; margin-bottom:var(--sp-3); }
  .fc-meta { width:100%; }
  .fc-meta td { font-size:.72rem; padding:3px 0; color:var(--color-text-muted); }
  .fc-meta td:first-child { color:var(--color-teal); width:72px; font-family:"Cuprum",sans-serif; font-weight:600; text-transform:uppercase; font-size:.68rem; }
  
  .type-scale { width:100%; background:#fff; border:1px solid var(--color-border); border-radius:2px; overflow:hidden; }
  .type-scale tr { border-bottom:1px solid var(--color-border-light); }
  .type-scale tr:last-child { border-bottom:none; }
  .type-scale tr:hover td { background:#f7fbff; }
  .type-scale td { padding:10px var(--sp-4); vertical-align:middle; }
  .ts-token { font-family:"Cuprum",sans-serif; font-size:.7rem; font-weight:600; text-transform:uppercase; color:var(--color-teal); width:90px; }
  .ts-size  { font-size:.72rem; color:var(--color-text-muted); width:80px; }
  .ts-use   { font-size:.7rem; color:var(--color-text-muted); width:160px; text-align:right; }
  
  /* ============================================================
     SPACING — v0.2 FORMALIZED
  ============================================================ */
  .spacing-list { display:flex; flex-direction:column; gap:4px; }
  
  .sp-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-light);
  }
  .sp-row:last-child { border-bottom: none; }
  
  .sp-token { font-family:"Cuprum",sans-serif; font-size:.7rem; font-weight:600; text-transform:uppercase; color:var(--color-teal); width:52px; flex-shrink:0; }
  .sp-px    { font-size:.72rem; color:var(--color-text-muted); width:36px; flex-shrink:0; }
  .sp-bar-wrap { flex:1; }
  .sp-bar   { height:7px; background:linear-gradient(90deg, var(--color-accent), var(--color-teal)); border-radius:99px; opacity:.55; }
  .sp-note  { font-size:.7rem; color:var(--color-text-muted); text-align:right; width:200px; flex-shrink:0; }
  .sp-usage { font-size:.68rem; color:var(--color-link-hover); width:180px; flex-shrink:0; text-align:right; }
  
  /* ============================================================
     BORDER / RADIUS
  ============================================================ */
  .radius-row { display:flex; gap:var(--sp-6); flex-wrap:wrap; }
  .rr-item    { display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
  .rr-box     { width:60px; height:60px; background:#fff; border:2px solid var(--color-accent); }
  .rr-label   { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--color-text-main); text-align:center; }
  .rr-val     { font-size:.65rem; color:var(--color-text-muted); text-align:center; }
  
  /* ============================================================
     BACKGROUND BLOB SYSTEM — v0.2 NEW SECTION
  ============================================================ */
  .blob-views {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
  
  .blob-view-card {
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    position: relative;
  }
  
  .blob-label-bar {
    background: #fff;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .blob-view-name {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    letter-spacing: .08em;
  }
  
  .blob-canvas {
    height: 180px;
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-main-light);
  }
  
  .blob-canvas div {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
  }
  
  /* About blobs */
  .bv-about div:nth-child(1) { width:90%; height:90%; background:#fff; top:-25%; left:-20%; opacity:.9; mix-blend-mode:overlay; animation: blobA 2.5s infinite alternate ease-in-out; }
  .bv-about div:nth-child(2) { width:70%; height:70%; background:var(--blob-about-accent); top:-10%; right:-10%; opacity:.15; mix-blend-mode:multiply; animation: blobB 2.5s infinite alternate ease-in-out; }
  .bv-about div:nth-child(3) { width:80%; height:60%; background:var(--blob-about-navy); bottom:-10%; left:-10%; opacity:.15; mix-blend-mode:multiply; animation: blobC 2.5s 1.2s infinite alternate ease-in-out; }
  .bv-about div:nth-child(4) { width:50%; height:50%; background:#fff; bottom:10%; right:10%; opacity:.7; mix-blend-mode:overlay; animation: blobD 2.5s 2s infinite alternate ease-in-out; }
  .bv-about div:nth-child(5) { width:45%; height:45%; background:var(--blob-about-steel); bottom:15%; left:25%; opacity:.2; mix-blend-mode:multiply; animation: blobE 2.5s .5s infinite alternate ease-in-out; }
  .bv-about::after { content:""; position:absolute; inset:0; backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent); pointer-events:none; z-index:2; }
  
  /* Photo blobs */
  .bv-photo div:nth-child(1) { width:100%; height:100%; background:#fff; top:-30%; left:-20%; opacity:.9; mix-blend-mode:overlay; animation: blobA 2.1s infinite alternate ease-in-out; }
  .bv-photo div:nth-child(2) { width:75%; height:70%; background:var(--blob-photo-red); top:0; right:-10%; opacity:.2; mix-blend-mode:multiply; animation: blobB 2.1s .8s infinite alternate ease-in-out; }
  .bv-photo div:nth-child(3) { width:110%; height:130%; background:var(--blob-photo-blue); bottom:-30%; left:-40%; opacity:.45; mix-blend-mode:multiply; animation: blobC 2.1s 1.2s infinite alternate ease-in-out; }
  .bv-photo div:nth-child(4) { width:55%; height:55%; background:#fff; bottom:10%; right:10%; opacity:.8; mix-blend-mode:overlay; animation: blobD 2.1s 2s infinite alternate ease-in-out; }
  .bv-photo div:nth-child(5) { width:45%; height:45%; background:var(--blob-photo-mauve); top:20%; left:20%; opacity:.25; mix-blend-mode:multiply; animation: blobE 2.1s .5s infinite alternate ease-in-out; }
  .bv-photo::after { content:""; position:absolute; inset:0; backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.5), transparent); pointer-events:none; z-index:2; }
  
  @keyframes blobA { from{transform:scale(1) rotate(0deg);}    to{transform:scale(1.05) rotate(3deg);} }
  @keyframes blobB { from{transform:scale(1) rotate(0deg);}    to{transform:scale(1.08) rotate(-4deg);} }
  @keyframes blobC { from{transform:scale(.97) rotate(-2deg);} to{transform:scale(1.06) rotate(2deg);} }
  @keyframes blobD { from{transform:scale(1) rotate(0deg);}    to{transform:scale(1.04) rotate(5deg);} }
  @keyframes blobE { from{transform:scale(1.02) rotate(1deg);} to{transform:scale(.96) rotate(-3deg);} }
  
  /* Blob token table */
  .blob-token-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
  }
  
  .blob-token-table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    overflow: hidden;
    border-collapse: collapse;
  }
  .blob-token-table th {
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--color-text-muted);
    padding: 8px var(--sp-3); background: #f7fbff;
    border-bottom: 1px solid var(--color-border-light); text-align: left;
  }
  .blob-token-table td {
    padding: 8px var(--sp-3);
    border-bottom: 1px solid var(--color-border-light);
    font-size: .78rem; vertical-align: middle;
  }
  .blob-token-table tr:last-child td { border-bottom: none; }
  
  .blob-dot {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-block; vertical-align: middle; margin-right: 6px;
    border: 1px solid rgba(0,0,0,.08);
  }
  .btoken { font-family:"Cuprum",sans-serif; font-size:.72rem; font-weight:600; color:var(--color-teal); }
  .bhex   { font-size:.72rem; color:var(--color-text-muted); }
  .buse   { font-size:.68rem; color:var(--color-text-muted); }
  
  /* Blob animation spec */
  .blob-spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }
  .bspec-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: 2px;
    padding: var(--sp-4);
  }
  .bspec-label { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--color-text-muted); margin-bottom:4px; }
  .bspec-val   { font-family:"Cuprum",sans-serif; font-size:.88rem; font-weight:600; color:var(--color-teal); margin-bottom:4px; }
  .bspec-note  { font-size:.72rem; color:var(--color-text-muted); line-height:1.5; }
  
  /* ============================================================
     COMPONENTS
  ============================================================ */
  .comp-block {
    margin-bottom: var(--sp-10);
    padding-bottom: var(--sp-10);
    border-bottom: 1px solid var(--color-border-light);
  }
  .comp-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  
  .comp-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: var(--sp-6);
    align-items: start;
  }
  .comp-name { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:1.15rem; font-weight:700; text-transform:uppercase; color:var(--color-accent-dark); margin-bottom:4px; }
  .comp-desc { font-size:.82rem; color:var(--color-text-muted); line-height:1.5; }
  .comp-stage { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-top:var(--sp-4); }
  
  /* Nav Header */
  .demo-header {
    background: var(--color-nav-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--sp-6) 0 var(--sp-5);
    min-height: 60px;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(33,50,50,.07);
    margin-top: var(--sp-4);
  }
  .demo-logo a { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:1.25em; text-decoration:none; color:var(--color-text-main); display:flex; align-items:center; gap:4px; }
  .demo-logo .fn { font-weight:300; letter-spacing:1px; }
  .demo-logo .ln { font-weight:600; letter-spacing:1px; }
  .demo-menu { list-style:none; display:flex; gap:var(--sp-5); margin:0; padding:0; }
  .demo-menu a { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.85em; font-weight:600; color:var(--color-text-main); text-decoration:none; border-bottom:3px solid transparent; padding-bottom:3px; transition:color .3s ease,border-color .3s ease; text-transform:uppercase; }
  .demo-menu a:hover { color:var(--color-accent); border-bottom-color:var(--color-accent); }
  .demo-menu a.active { color:var(--color-teal); border-bottom-color:var(--color-teal); }
  
  /* Collapsible — FIXED */
  .demo-collapsible {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: var(--sp-4) var(--sp-5);
    width: 100%;
    border: none; outline: none;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.1em;
    transition: background-color .23s ease, color .23s ease;
    position: relative;
    border-radius: 2px;
    letter-spacing: .02em;
  }
  .demo-collapsible::after { content:'+'; font-size:20px; position:absolute; right:var(--sp-6); line-height:0; }
  .demo-collapsible.active::after { content:'–'; }
  
  /* v0.1 — original (failing contrast) */
  .demo-coll-v1 {
    background-color: var(--color-collapsible-bg);
    color: #fff; /* ← FAIL: 2.4:1 */
  }
  .demo-coll-v1:hover { background-color:var(--color-collapsible-hover-bg); color:var(--color-collapsible-hover-text); }
  .demo-coll-v1.active { background-color:var(--color-collapsible-active); color:#fff; }
  
  /* v0.2 — fixed (passing contrast) */
  .demo-coll-v2 {
    background-color: var(--color-collapsible-bg);
    color: var(--color-collapsible-text); /* ← FIX: #1e3d36 = 7.2:1 AAA */
  }
  .demo-coll-v2:hover { background-color:var(--color-collapsible-hover-bg); color:var(--color-collapsible-hover-text); }
  .demo-coll-v2.active { background-color:var(--color-collapsible-active); color:#fff; }
  
  /* Grid figure */
  .demo-figure-wrap {
    width: 240px; height: 170px;
    position: relative; overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 17px -1px rgba(33,50,50,.2);
    background: #333;
  }
  .demo-figure-img {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #b2ddd7, #69c9b5 50%, #5a4b4b);
    transition: transform .4s ease;
  }
  .demo-figure-wrap:hover .demo-figure-img { transform: scale(1.05); }
  .demo-figcaption {
    position: absolute; bottom:0; left:0; width:100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-figcaption-bg);
    font-family: "Cuprum", sans-serif; font-size:.88rem; color:#ccc;
    opacity:0; transform:translateY(100%);
    transition: transform .4s ease, opacity .3s ease;
    min-height: 90px;
  }
  .demo-figure-wrap:hover .demo-figcaption { opacity:1; transform:translateY(0); }
  .demo-figcaption h3 { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.88rem; font-weight:700; text-transform:uppercase; color:#fff; margin-bottom:4px; padding:0; }
  .demo-figcaption p  { font-size:.72rem; color:var(--color-figcaption-sub); margin:0 0 4px; line-height:1.4; }
  .demo-figcaption small { font-size:.72rem; font-weight:700; color:#fff; display:block; }
  
  /* Links */
  .demo-link { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.9rem; text-transform:uppercase; font-weight:400; color:var(--color-link); text-decoration:none; transition:color .3s ease; }
  .demo-link:hover { text-decoration:underline; color:var(--color-link); }
  
  /* Art description */
  .demo-art-desc h2 { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:1.5rem; font-weight:700; text-transform:uppercase; color:var(--color-art-h2); margin-bottom:10px; }
  .demo-art-desc h2 span { font-family:"Sofia Sans Extra Condensed",sans-serif; font-weight:500; letter-spacing:.5px; color:#999; font-size:1.5rem; }
  .demo-art-desc .meta { color:var(--color-art-meta); border-bottom:1px solid var(--color-border-light); padding-bottom:14px; margin-bottom:8px; font-size:.88rem; }
  .demo-art-desc strong { font-family:"Cuprum",sans-serif; color:var(--color-teal); font-weight:600; text-transform:uppercase; }
  
  /* Footer */
  .demo-footer { background:var(--color-bg-page-dark); border-top:6px solid var(--color-accent); padding:var(--sp-7) var(--sp-6); border-radius:2px; display:flex; gap:var(--sp-6); flex-wrap:wrap; justify-content:space-between; }
  .df-col h4 { font-family:"Sofia Sans Semi Condensed",sans-serif; text-transform:uppercase; color:var(--color-text-footer-heading); font-size:.85rem; margin-bottom:var(--sp-2); letter-spacing:.5px; font-weight:700; padding:0; }
  .df-col a  { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.5px; text-decoration:none; color:var(--color-text-footer-link); text-transform:uppercase; transition:color .3s ease; display:block; margin-bottom:5px; }
  .df-col a:hover { color:var(--color-footer-link-hover); }
  .df-copy   { font-family:"Sofia Sans Semi Condensed",sans-serif; text-transform:lowercase; color:var(--color-text-footer-heading); font-size:.72rem; font-weight:600; opacity:.55; }
  
  /* ============================================================
     MOTION
  ============================================================ */
  .motion-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
  .motion-card { background:#fff; border:1px solid var(--color-border); border-radius:2px; padding:var(--sp-5); border-top:3px solid var(--color-accent); }
  .mc-label { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--color-text-muted); margin-bottom:4px; }
  .mc-val   { font-family:"Cuprum",sans-serif; font-size:.85rem; font-weight:600; color:var(--color-teal); margin-bottom:var(--sp-2); }
  .mc-demo  { width:26px; height:26px; background:var(--color-accent); border-radius:2px; margin:var(--sp-3) 0; cursor:pointer; transition:transform .4s ease; }
  .mc-demo.fast  { transition:transform .23s ease; }
  .mc-demo.color { transition:background .3s ease, border-color .3s ease; }
  .mc-demo:hover { transform:translateX(46px) rotate(6deg); }
  .mc-note  { font-size:.7rem; color:var(--color-text-muted); line-height:1.5; }
  
  @keyframes blobPulse { from{transform:scale(1);} to{transform:scale(1.1) rotate(5deg);} }
  
  /* ============================================================
     LAYOUT / GRID
  ============================================================ */
  .grid-demo { background:#fff; border:1px solid var(--color-border); border-radius:2px; padding:var(--sp-3); display:grid; grid-template-columns:repeat(12,1fr); gap:5px; height:56px; }
  .grid-col  { background:rgba(105,201,181,.15); border:1px solid rgba(105,201,181,.3); border-radius:1px; }
  
  .layout-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-3); }
  .ls-card  { background:#fff; border:1px solid var(--color-border); border-radius:2px; padding:var(--sp-3) var(--sp-4); border-top:3px solid var(--color-teal); }
  .ls-label { font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--color-text-muted); margin-bottom:3px; }
  .ls-val   { font-family:"Cuprum",sans-serif; font-size:1.4rem; font-weight:700; color:var(--color-teal); line-height:1; }
  .ls-note  { font-size:.68rem; color:var(--color-text-muted); margin-top:3px; }
  
  /* ============================================================
     CODE BLOCK
  ============================================================ */
  .code-block {
    background: var(--color-bg-page-dark);
    border-radius: 2px;
    padding: var(--sp-5) var(--sp-6);
    font-family: "Cuprum", monospace;
    font-size: .78rem;
    color: #ccc;
    line-height: 1.85;
    overflow-x: auto;
    margin-top: var(--sp-4);
  }
  .code-block .kw  { color: #69c9b5; }
  .code-block .str { color: #a8d8cf; }
  .code-block .cm  { color: #555; }
  .code-block .new { color: #f0c060; }
  
  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media (max-width:680px) {
    .font-pair, .blob-views, .blob-token-grid, .comp-row { grid-template-columns:1fr; }
    .motion-grid, .blob-spec-grid { grid-template-columns:1fr 1fr; }
    .layout-stats { grid-template-columns:1fr 1fr; }
    .color-grid { grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); }
  }