@font-face {
      font-family: "Ogg Display";
      src: url("/assets/fonts/Ogg-Regular.woff?v=licensed-20260511") format("woff");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Ogg";
      src: url("/assets/fonts/Ogg-Regular.woff?v=licensed-20260511") format("woff");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }

    /* Same values as colorists.html: this page sat on the older, lighter
       palette and read washed out next to the rest of the archive. */
    :root {
      --cream: #f5f0e8;
      --ivory: #faf7f2;
      --ink: #1a1714;
      --ink-soft: #3d3830;
      --ink-muted: #7a7268;
      --ink-faint: #b8b0a4;
      --rule: #d4cdc4;
      --accent: #8b3a2a;
      --btn: #1a1714;
      --btn-text: #faf7f2;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body {
      background: var(--ivory);
      color: var(--ink);
      font-family: var(--mic-main-font, 'Sorts Mill Goudy', Georgia, serif);
      font-weight: 400;
      line-height: 1.7;
      overflow-x: hidden;
      /* No font smoothing override: antialiased renders the same Goudy
         Bookletter noticeably lighter than the rest of the site, which read
         as a different typeface next to the Colorist Archive. Every other
         page leaves this to the browser, and so does this one. */
    }
    /* Paper grain, as on every other page. */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 1000; opacity: 0.35;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; justify-content: space-between; align-items: center;
      padding: 0 3rem; height: 64px;
      border-bottom: 1px solid var(--rule);
      background: rgba(250,247,242,0.93);
      backdrop-filter: blur(8px);
    }
    .nav-wordmark {
      display: flex; align-items: center; gap: 0.85rem;
      text-decoration: none; color: var(--ink); flex-shrink: 0;
    }
    #navMiniCanvas {
      width: 36px; height: 36px; display: block; flex-shrink: 0;
      image-rendering: pixelated; border: 1px solid var(--rule);
    }
    .nav-title-stack { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1; }
    .nav-title-main {
      font-weight: 400; font-size: 1rem; letter-spacing: 0.04em;
      color: var(--ink); font-style: normal; white-space: nowrap;
    }
    .nav-title-sub {
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace); font-weight: 300;
      font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--ink-faint); white-space: nowrap;
    }
    .nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin-left: auto; }
    .nav-links a {
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace); font-size: 0.69rem;
      font-weight: 500; letter-spacing: 0.12em; color: var(--ink-muted); text-decoration: none;
      text-transform: uppercase; transition: color 0.2s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--ink); }

    .nav-palette { display: flex; gap: 6px; align-items: center; margin-left: 1.2rem; }
    .nav-swatch {
      width: 12px; height: 12px; display: block; border: 0; border-radius: 1px;
      padding: 0; cursor: pointer;
      transition: background-color 0.4s ease, transform 0.15s ease;
    }
    .nav-swatch.active { transform: scale(1.35); }

    .nav-hamburger {
      display: none; background: none; border: none; cursor: pointer;
      padding: 0.4rem; flex-direction: column; gap: 4px;
    }
    .nav-hamburger span {
      display: block; width: 18px; height: 1.5px; background: var(--ink-muted);
      transition: transform 0.2s, opacity 0.2s;
    }

    /* ── PAGE WRAPPER ── */
    .page { padding-top: 64px; }

    /* ── HEADER — the directory header, same grid as the Colorist Archive ── */
    .dir-header {
      max-width: 1200px; margin: 0 auto;
      padding: 4rem 3rem 2.5rem;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0;
      align-items: center;
    }
    .dir-header-left { padding-right: 3rem; }
    .dir-header-right {
      border-left: 1px solid var(--rule);
      padding-left: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 0;
    }
    .dir-title {
      font-family: var(--mic-main-font, 'Sorts Mill Goudy', Georgia, serif); font-weight: 400;
      font-size: clamp(2.15rem, 3.9vw, 3.2rem); line-height: 0.92;
      letter-spacing: -0.012em; color: var(--ink); margin: 0;
    }
    .dir-title em { font-style: italic; color: var(--accent); }
    .dir-subtitle {
      font-family: var(--mic-main-font, 'Sorts Mill Goudy', Georgia, serif); font-weight: 400;
      font-size: clamp(1.02rem, 2vw, 1.22rem); line-height: 1.52;
      color: var(--ink-soft);
    }
    .dir-home-note {
      margin-top: 0.95rem;
      max-width: 48rem;
      font-family: var(--mic-main-font, 'Sorts Mill Goudy', Georgia, serif);
      font-size: 1.03rem;
      line-height: 1.55;
      color: var(--ink);
    }
    .dir-home-inline-link {
      color: var(--btn);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid currentColor;
      transition: color 0.15s, border-color 0.15s;
    }
    .dir-stats-inline {
      display: inline;
      margin-left: 0.45rem;
      font-style: italic;
      font-weight: 700;
      font-size: 1em;
      line-height: inherit;
      color: var(--btn);
      white-space: nowrap;
    }
    /* Only shown when ?by= narrows the wall to one collector. */
    .dir-filter-note {
      display: none;
      margin-top: 0.85rem;
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .dir-filter-note.is-active { display: block; }
    .dir-filter-note a {
      color: var(--btn);
      text-decoration: none;
      border-bottom: 1px solid currentColor;
    }


    .section-rule {
      max-width: 1200px; margin: 0 auto; padding: 0 3rem;
      border: none; border-top: 1px solid var(--rule);
    }

    /* ── THE WALL ── */
    .archive-body {
      max-width: 1200px; margin: 0 auto;
      /* No top padding: the controls row above owns the gap. */
      padding: 0 3rem 4rem;
    }
    /* The same card the room uses. Kept in step with the block in
       palette-studio.html: one visual language across both surfaces. */
    /* The wall borrows the colorist grid's hairline: a 1px gap over the rule
       color, so the rule itself shows through as the edge between cards.
       Cream sheets on a cream page had nothing to end against, and the wall
       read as one continuous field rather than as a row of works. */
    .palette-ledger-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
    }
    .palette-ledger-list .palette-ledger-card {
      background: var(--ivory);
      padding: 1.1rem;
    }
    /* Each reading wants a different column. A sheet is 3:4 and sits happily
       at 220px; a band is a wide strip and needs room to read as one; a
       field is 9:16 and would tower at that width. */
    .palette-ledger-list[data-view-mode="bands"],
    .palette-ledger-list[data-view-mode="proportion"] {
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    /* Four to a row. At 168px the wall fitted six, and a 9:16 field that
       narrow cannot hold its own labels. */
    .palette-ledger-list[data-view-mode="field"] {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .palette-ledger-empty { background: var(--ivory); }
    /* The wall opens on one page. Everything filed is still here and the
       count says so; this fetches the next hundred rather than making a
       visitor's browser hold the whole archive at once. */
    .archive-more-row { display: flex; justify-content: center; padding: 2rem 0 0; }
    .archive-more {
      background: none; cursor: pointer;
      border: 1px solid var(--rule); padding: 0.7rem 1.6rem;
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace);
      font-size: 0.66rem; font-weight: 500;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-muted);
      transition: border-color 0.15s, color 0.15s;
    }
    .archive-more:hover { border-color: var(--ink-muted); color: var(--ink); }
    .archive-more[disabled] { cursor: default; color: var(--ink-faint); }

    /* ── WAYS OF SEEING ──
       Four words under the subtitle. The site already steers by type
       elsewhere, so this adds no new control vocabulary. */
    /* The four readings sit at the right end of the rule that closes the
       header, so they land where the eye finishes the intro rather than
       trailing off the bottom of the paragraph in the faintest ink on the
       page, which is where they were unreadable. */
    /* The names switch sits opposite the four readings, both on the line
       above the rule: what the wall is showing on the right, what it is
       saying on the left. */
    /* Eleven words of state spread over two lines, each carrying its
       setting in an underline, asked a visitor to read the whole line to
       find out what the wall was showing. The same four choices as the
       colorist archive's own controls instead: one line of boxes, each
       naming itself and its setting, in the house dropdown. */
    .archive-views-row {
      /* Below the rule now, so it needs air above it as well as below: it
         reads as the head of the wall rather than the tail of the header.
         The row's own margins carry both gaps, and the wall below adds no
         top padding of its own, so the controls sit the same distance from
         the rule above them as from the first card beneath. */
      max-width: 1200px; margin: 2rem auto;
      padding: 0 3rem;
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 0.6rem;
    }
    .archive-toggle,
    .archive-views-row .csel-face {
      height: 2.5rem; box-sizing: border-box;
      padding: 0.5rem 0.7rem;
      background: var(--cream); border: 1px solid var(--rule);
      display: flex; align-items: center;
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace);
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em;
      color: var(--ink); cursor: pointer; white-space: nowrap;
      transition: border-color 0.15s, color 0.15s;
    }
    .archive-toggle:hover,
    .archive-views-row .csel-face:hover { border-color: var(--ink-muted); }
    /* The bands draw no labels, so the switch has nothing to switch. It is
       held rather than dropped: the line must not reshuffle underneath a
       visitor moving between readings. */
    .archive-toggle:disabled {
      cursor: default; color: var(--ink-faint); border-color: var(--rule);
    }
    /* On and Off are not the same width, so the button grew and shrank as it
       was pressed and shoved the rest of the line along with it. Both labels
       sit in one grid cell with the longer one held invisible, so the button
       is always as wide as its widest state and never moves under the
       cursor that is clicking it. */
    .archive-toggle-slot { display: grid; }
    .archive-toggle-slot > span { grid-area: 1 / 1; white-space: nowrap; }
    .archive-toggle-ghost { visibility: hidden; }
    .csel-wrap { position: relative; display: inline-block; }
    .csel-wrap select {
      opacity: 0; position: absolute; inset: 0;
      width: 100%; height: 100%; z-index: 2; pointer-events: none;
    }
    .csel-face {
      position: relative; min-width: 170px;
      padding-right: 2.2rem; user-select: none;
    }
    .csel-face::after {
      content: '\25BE'; position: absolute; right: 0.6rem; top: 50%;
      transform: translateY(-50%); font-size: 0.68rem; color: var(--ink);
    }
    .csel-list {
      display: none; position: absolute; top: 100%; left: 0; right: 0;
      background: var(--ivory, #FAF7F2); border: 1px solid var(--rule);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); z-index: 100;
      max-height: 240px; overflow-y: auto;
    }
    .csel-wrap.open .csel-list { display: block; }
    .csel-item {
      padding: 0.45rem 0.7rem; cursor: pointer;
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace);
      font-size: 0.74rem; font-weight: 500; letter-spacing: 0.05em;
      color: var(--ink); transition: background 0.1s;
    }
    .csel-item:hover { background: var(--cream); }
    .csel-item.active { background: var(--btn); color: var(--btn-text); }
    .palette-ledger-empty {
      grid-column: 1 / -1;
      margin: 0;
      padding: 3rem 0;
      font-style: italic;
      font-size: 1.02rem;
      color: var(--ink-muted);
    }
    /* The work and the line under it are one caption, so they close up on
       each other and the caption as a whole stands further off the sheet
       above it. Two words a hair apart under a clear gap read as a pair;
       evenly spaced they read as two unrelated lines. */
    .palette-ledger-card {
      display: flex;
      flex-direction: column;
      gap: 0.88rem;
    }
    /* The sheet itself is painted by MicPaletteLedger.paintClassicSheet and
       carries its own box; see mic-palette-ledger.js. */
    .palette-ledger-body {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }
    .palette-ledger-source {
      margin: 0;
      font-family: var(--mic-main-font, 'Sorts Mill Goudy', Georgia, serif);
      font-size: 1.02rem;
      line-height: 1.4;
      color: var(--ink);
    }
    /* Caps at a tenth of an em of tracking, set at nine pixels, is a line
       nobody reads twice. The size comes up and the tracking comes down:
       both of those buy legibility, and the second one costs no width. */
    .palette-ledger-meta {
      margin: 0;
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace);
      font-size: 0.66rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }
    .palette-ledger-drawn-by {
      color: var(--btn);
      text-decoration: none;
      border-bottom: 1px solid currentColor;
    }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid var(--rule);
      padding: 1.5rem 5rem 2.25rem;
      margin: 0 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    footer p {
      font-family: var(--mic-ui-font, Spline Sans Mono, monospace);
      font-size: 0.58rem;
      letter-spacing: 0.1em;
      color: var(--ink-faint);
    }
    footer a { text-decoration: none; }
    footer a:hover { color: var(--ink); }
    .footer-meta {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      color: var(--btn);
    }
    .footer-site-link,
    .footer-social { color: var(--btn); }
    .footer-social-links { display: inline-flex; align-items: center; gap: 0.55rem; }
    .footer-social { display: inline-flex; align-items: center; justify-content: center; }
    .footer-social svg { width: 12px; height: 12px; display: block; }


    /* ══════════════════════════════════════════════════════════
       RESPONSIVE — TABLET (≤ 768px)
       ══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      nav {
        padding: 0 1rem;
        height: 56px;
        min-height: 56px;
        position: relative;
        flex-wrap: nowrap;
      }
      .nav-hamburger { display: flex; order: 3; }
      .nav-palette { display: flex; order: 2; margin-left: auto; margin-right: 0.45rem; gap: 5px; }
      .nav-swatch { width: 11px; height: 11px; }
      .nav-links { order: 4; }
      .nav-links {
        display: none; position: absolute; top: 100%; right: 1rem;
        flex-direction: column; gap: 0; width: auto;
        margin-left: 0; margin-top: 0; background: var(--ivory);
        border: 1px solid var(--rule);
        padding: 0.6rem 0; min-width: 160px; z-index: 100;
      }
      .nav-links.open { display: flex; }
      .nav-links li { list-style: none; }
      .nav-links a {
        font-family: var(--mic-ui-font, Spline Sans Mono, monospace);
        font-weight: 600; font-size: 0.58rem; letter-spacing: 0.14em;
        padding: 0.5rem 1.2rem; display: block; text-transform: uppercase;
      }
      .nav-title-sub { display: block; font-size: 0.45rem; }
      .page { padding-top: 56px; }

      .dir-header { padding: 1.35rem 1.5rem 1.25rem; display: block; }
      .dir-header-left { padding-right: 0; padding-bottom: 0; }
      .dir-header-right { border-left: none; padding-left: 0; margin-top: 0.75rem; display: block; }
      .dir-title {
        font-size: clamp(1.55rem, 7.2vw, 2.9rem);
        line-height: 1;
        white-space: nowrap;
      }
      .dir-title br { display: none; }
      .dir-subtitle { font-size: clamp(1.02rem, 2vw, 1.22rem); line-height: 1.52; }
      .dir-home-note { margin-top: 0.95rem; font-size: 1.03rem; line-height: 1.55; }
      .dir-stats-inline {
        display: inline;
        margin-left: 0.32rem;
        white-space: nowrap;
        line-height: inherit;
        font-size: 1em;
      }



      /* Four boxes will not sit on one line on a phone, so they fall into
         two columns of two rather than a ragged wrap, and each one gives up
         its fixed width to fill the half it is given. */
      .archive-views-row {
        padding: 0 1.5rem; margin: 1.4rem auto;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
      }
      .archive-views-row .csel-wrap { display: block; }
      .archive-toggle,
      .archive-views-row .csel-face {
        height: 2.65rem; min-width: 0; font-size: 0.68rem;
      }
      .section-rule { padding: 0 1.5rem; }
      .archive-body { padding: 0 1.5rem 3rem; }
      .palette-ledger-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      }
      .palette-ledger-list .palette-ledger-card { padding: 0.8rem; }
      .palette-ledger-list[data-view-mode="bands"],
      .palette-ledger-list[data-view-mode="proportion"] {
        grid-template-columns: 1fr;
      }
      .palette-ledger-list[data-view-mode="field"] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      }

      footer {
        margin: 0 1rem;
        padding: 1rem 0 1.5rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
      }
      .footer-meta { justify-content: center; flex-wrap: wrap; }
    }

    @media (max-width: 480px) {
      nav { padding: 0 0.75rem; height: 48px; min-height: 48px; }
      .nav-palette { margin-right: 0.3rem; gap: 4px; }
      .nav-swatch { width: 10px; height: 10px; }
      #navMiniCanvas { width: 28px; height: 28px; }
      .nav-title-main { font-size: 0.85rem; }
      .page { padding-top: 48px; }
    }
  
.seo-body{max-width:1200px;margin:0 auto;padding:0 3rem 4rem}
.seo-label{font-family:var(--mic-ui-font,"Space Grotesk",sans-serif);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:2.4rem 0 .9rem}
.seo-swatches{display:flex;flex-wrap:wrap;gap:10px}
.seo-sw{display:flex;flex-direction:column;gap:6px}
.seo-sw i{display:block;width:72px;height:72px;border:1px solid var(--rule)}
.seo-hex{font-family:var(--mic-ui-font,"Space Grotesk",sans-serif);font-size:.6rem;letter-spacing:.08em;color:var(--ink-muted)}
.seo-work{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;padding:1.1rem 0;border-top:1px solid var(--rule)}
.seo-work-title{font-size:1.12rem;color:var(--ink)}
.seo-work-year{font-family:var(--mic-ui-font,"Space Grotesk",sans-serif);font-size:.62rem;letter-spacing:.12em;color:var(--ink-muted)}
.seo-work .seo-swatches{grid-column:1/-1}
.seo-work .seo-sw i{width:40px;height:40px}
.seo-letters{columns:4 220px;column-gap:2.4rem;padding-top:1rem}
.seo-letters h2{font-family:var(--mic-ui-font,"Space Grotesk",sans-serif);font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--ink-muted);margin:1.4rem 0 .4rem;break-after:avoid}
.seo-letters ul{list-style:none}
.seo-letters li{break-inside:avoid;line-height:1.6}
.seo-letters a{color:var(--ink);text-decoration:none}
.seo-letters a:hover{color:var(--accent)}
@media (max-width:768px){.seo-body{padding:0 1.5rem 3rem}.seo-sw i{width:56px;height:56px}}