@layer page {
/* ============================================================
   COLORS
   Color gallery index and color detail pages.
   Ported from webdesign/draft/color.html reference.
   ============================================================ */

/* --- Gallery grid --- */
.color-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  padding: var(--space-8) var(--gutter);
  max-width: 80rem;
  margin-inline: auto;
}
.color-card {
  display: block;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--duration-normal) var(--ease-out-expo);

  &:hover { transform: translateY(-4px); }

  h3 {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-0);
  }
  code {
    font-size: var(--text-xs);
    color: var(--text-2);
  }
}
.color-card-swatch {
  height: 60px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

/* --- Color hero (show page) --- */
.color-hero {
  --color-h: 285;
  position: relative;
  padding: var(--space-24) var(--gutter) var(--space-16);
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 72rem;
  margin: 0 auto;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 70% 80% at 20% 50%,
      oklch(0.12 0.08 var(--color-h) / 0.5),
      transparent 65%);
    pointer-events: none;
  }
}
.color-hero-swatch {
  position: relative;
  width: clamp(140px, 20vw, 220px);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--text-0) 4%, transparent),
    0 20px 60px oklch(0 0 0 / 0.4);
}
.color-hero-info {
  position: relative;

  .hero-category {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: oklch(0.65 0.15 var(--color-h));
    margin-bottom: var(--space-2);
  }
  h1 {
    font-size: clamp(2.5rem, 6vw, var(--text-4xl));
    font-weight: 100;
    color: var(--text-0);
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: var(--space-3);
  }
  .hero-desc {
    font-size: var(--text-lg);
    color: var(--text-2);
    font-weight: 300;
    max-width: 40ch;
    margin-bottom: var(--space-6);
  }
}
.hero-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.hero-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-full);
}

/* --- Section shared --- */
.color-section {
  padding: var(--space-16) var(--gutter);
  max-width: 72rem;
  margin-inline: auto;
}
.color-section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-3);
  margin-bottom: var(--space-4);
}
.color-section-title {
  font-size: var(--text-2xl);
  font-weight: 200;
  color: var(--text-0);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
}

/* --- Values grid --- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.value-cell {
  background: var(--surface-1);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: background var(--duration-fast);
  cursor: pointer;

  &:hover { background: var(--surface-2); }
}
.value-format {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.value-string {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-0);
  word-break: break-all;
}

/* --- Shades strip --- */
.shades-strip {
  display: flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);

  &:hover .strip-swatch { flex: 0.8; }
  &:hover .strip-swatch:hover { flex: 2; }
}
.strip-swatch {
  flex: 1;
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  transition: flex var(--duration-normal) var(--ease-out-expo);

  &.current {
    outline: 2px solid var(--text-0);
    outline-offset: -2px;
    z-index: 1;
  }

  .strip-label {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    right: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 400;
    text-align: center;
    opacity: 0;
    transition: opacity var(--duration-fast);
    pointer-events: none;
  }

  &:hover .strip-label { opacity: 1; }
  &.dark-text .strip-label { color: oklch(0.15 0 0); }
  &.light-text .strip-label { color: oklch(0.95 0 0); text-shadow: 0 1px 3px oklch(0 0 0 / 0.4); }
}

.strip-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.05em;
}

/* --- Harmonies --- */
.harmony-group {
  margin-bottom: var(--space-10);
}
.harmony-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: var(--space-4);
}
.harmony-row {
  display: flex;
  gap: var(--space-3);
}
.harmony-chip {
  flex: 1;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px oklch(0 0 0 / 0.3);
  }

  span {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 400;
    opacity: 0;
    transition: opacity var(--duration-fast);
  }

  &:hover span { opacity: 1; }
  &.dark-text span { color: oklch(0.15 0 0); }
  &.light-text span { color: oklch(0.95 0 0); text-shadow: 0 1px 3px oklch(0 0 0 / 0.4); }
}

/* --- Accessibility grid --- */
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.a11y-card {
  background: var(--surface-1);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.a11y-pair {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.a11y-preview {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-lg);
  flex-shrink: 0;
}
.a11y-ratio {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-0);
  display: block;
}
.a11y-level {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.05em;

  &.pass { color: oklch(0.78 0.26 145); }
  &.fail { color: oklch(0.65 0.22 25); }
}
.a11y-against {
  font-size: var(--text-xs);
  color: var(--text-3);
}

@media (width <= 700px) {
  .color-hero { flex-direction: column; text-align: center; }
  .hero-tags { justify-content: center; }
  .harmony-row { flex-wrap: wrap; }
  .harmony-chip { min-width: calc(50% - var(--space-3)); }
  .strip-swatch { aspect-ratio: auto; min-height: 48px; }
}


/* ============================================================
   TOPIC GRID -- /color hub
   Text-led tiles linking to each color-theory topic. The eyebrow
   color comes from the topic itself (set inline as --topic-c) so
   each card carries its own visual cue without a colored chip.
   ============================================================ */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
  padding-inline: var(--gutter);
  max-width: 84rem;
  margin-inline: auto;
}

.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    background var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo);

  &:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
  }
}

.topic-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--topic-c, var(--text-2));
}

.topic-title {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-0);
  margin: 0;
}

.topic-desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
}

/* ── Index page: grouped color buckets ─────────────────────
   Each family (Reds, Blues, ...) is a section with a heading
   and a dense grid of color swatches. Card uses stretched-link
   so the whole tile is clickable, including hex code. */
.colors-bucket {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vh, 3rem) var(--gutter);
}
.colors-bucket-title {
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-0);
  margin: 0 0 var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast);

    &:hover { color: var(--accent-text, oklch(0.78 0.22 var(--hue-brand))); }
  }
}
.colors-bucket-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.colors-card {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background var(--duration-fast), transform var(--duration-fast);

  &:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
  }
}
.colors-card-swatch {
  height: 5rem;
}
.colors-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.colors-card-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-0);
  margin: 0;
}
.colors-card-hex {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-2);
}

/* Compact variant: the same card at names-index density. */
.colors-card.compact {
  border-radius: var(--radius-md);

  .colors-card-swatch { height: 2.5rem; }
  .colors-card-body { gap: 1px; padding: var(--space-2) var(--space-3) var(--space-3); }
  .colors-card-name { font-size: var(--text-xs); word-break: break-all; }
  .colors-card-hex { font-size: 0.62rem; }
}

/* ── Per-topic visuals on /color cards ───────────────────────
   Each card carries a small CSS-only visual at the top hinting
   at what the topic is about. Visuals are scoped via classes
   only -- no per-slug CSS rules, no JS. */

.topic-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  height: 4rem;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Color spaces card: three space-name chips. */
.tv-space-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  color: oklch(0.08 0 0);
}

/* Formats card: format-name chips, no color. */
.tv-format-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
}

/* Conversion card: nodes with arrows between them. */
.tv-conv-node {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-1);
}
.tv-conv-node--hub {
  background: oklch(from var(--topic-c) calc(l - 0.4) calc(c * 0.6) h);
  color: var(--topic-c);
}
.tv-conv-arrow {
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: 0.7rem;
}

/* ============================================================
   NARRATIVE COLOR DETAIL
   Shared by every curated and CSS named color detail page.
   ============================================================ */

.color-story-hero {
  min-height: calc(var(--space-24) * 6);
  max-width: 80rem;
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--space-16)) var(--gutter) var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  text-align: center;
}

.subnav + .color-story .color-story-hero {
  min-height: 0;
  padding-block-start: var(--space-10);
}

.color-story-hero-copy {
  max-width: 52rem;
  margin-inline: auto;

  .breadcrumb {
    margin-block-end: var(--space-6);
  }

  h1 {
    font-size: clamp(var(--text-7xl), 8vw, var(--text-8xl));
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: var(--text-0);
  }

  > .body-lg {
    margin-block-start: var(--space-6);
    margin-inline: auto;
    text-wrap: balance;
  }
}

.color-story-hero-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  justify-content: center;

  dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-0);
  }
}

.color-story-hero-meta {
  max-width: 52rem;
  margin-inline: auto;
}

.color-story-note {
  max-width: 58ch;
  margin-block-start: var(--space-8);
  color: var(--text-2);
  font-size: var(--text-sm);
  text-wrap: pretty;
  margin-inline: auto;
}

.color-story-hero-visual {
  display: grid;
  place-items: center;
  gap: var(--space-5);
  width: 100%;

  > span {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-2);
  }
}

.color-story-main-swatch {
  width: min(100%, calc(var(--space-24) * 10));
  height: calc(var(--space-24) * 2);
  border-radius: var(--radius-lg);
  background: var(--story-color);
  box-shadow: 0 0 var(--space-24) oklch(from var(--story-color) l c h / 0.2);
}

.color-story-section {
  max-width: 80rem;
  margin-inline: auto;
  padding: var(--space-24) var(--gutter);
}

.color-story-section-tinted {
  background:
    radial-gradient(circle at 75% 45%, var(--accent-bg-subtle), transparent 40%);
}

.color-story-heading {
  max-width: 48rem;
  margin-block-end: var(--space-12);

  .eyebrow { margin-block-end: var(--space-4); }

  h2 {
    font-size: var(--text-4xl);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-0);
    text-wrap: balance;
  }

  > p:last-child {
    max-width: 62ch;
    margin-block-start: var(--space-5);
    color: var(--text-2);
    text-wrap: pretty;
  }
}

.color-story-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-16);

  > .code-block { margin-block: 0; }
}

.color-story-object {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: calc(var(--space-24) * 3);

  code {
    display: block;
    margin-block: var(--space-2);
    font-size: var(--text-xl);
    color: var(--text-0);
    background: none;
    padding: 0;
  }

  p:last-child {
    color: var(--text-2);
    font-size: var(--text-sm);
  }
}

.color-story-object-swatch {
  width: calc(var(--space-24) * 1.5);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--story-color);
  box-shadow: 0 0 var(--space-12) oklch(from var(--story-color) l c h / 0.18);
}

.color-story-output {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);

  li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
  }

  span {
    color: var(--text-3);
    font-size: var(--text-xs);
  }
}

.color-story-harmony {
  display: grid;
  justify-items: center;
  gap: var(--space-6);

  figcaption {
    color: var(--text-2);
    font-size: var(--text-sm);
  }
}

.color-story-harmony-diagram {
  width: calc(var(--space-24) * 3.5);
  aspect-ratio: 1;
  position: relative;
}

.color-story-harmony-circle {
  position: absolute;
  width: calc(var(--space-24) * 1.65);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--circle-color);
  box-shadow: inset 0 0 0 1px oklch(from var(--text-0) l c h / 0.12);

  &.position-0 { inset: 0 auto auto 50%; translate: -50% 0; z-index: 2; }
  &.position-1 { inset: 50% auto auto 0; translate: 0 -50%; }
  &.position-2 { inset: 50% 0 auto auto; translate: 0 -50%; }
  &.position-3 { inset: auto auto 0 50%; translate: -50% 0; z-index: 1; }
}

.color-story-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: var(--space-1);
  margin-block-start: var(--space-10);

  span {
    display: block;
    height: var(--space-20);
    background: var(--step-color);
  }

  code {
    display: block;
    margin-block-start: var(--space-2);
    text-align: center;
    color: var(--text-2);
    background: none;
    padding: 0;
  }
}

.color-story-text-link {
  display: inline-block;
  margin-block-start: var(--space-8);
  color: var(--accent-text);
  font-weight: 500;
  text-decoration: none;
}

.color-story-formats {
  display: grid;
  gap: var(--space-3);

  > div {
    display: grid;
    grid-template-columns: auto minmax(4rem, 0.25fr) 1fr;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
  }

  dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
  }

  dd { margin: 0; }
}

.color-story-format-swatch {
  width: var(--space-6);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--format-color);
}

.collection-story-band {
  display: flex;
  width: min(100%, calc(var(--space-24) * 10));
  height: calc(var(--space-24) * 2);
  overflow: hidden;
  border-radius: var(--radius-lg);

  span {
    flex: 1;
    background: var(--collection-color);
  }
}

.gradient-story-band {
  width: min(100%, calc(var(--space-24) * 10));
  height: calc(var(--space-24) * 2);
  border-radius: var(--radius-lg);
  background: var(--story-gradient);
  box-shadow: 0 0 var(--space-24) var(--accent-glow);
}

.collection-story-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-24) * 1.75), 1fr));
  gap: var(--space-4);

  article {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-1);
  }

  article > span {
    display: block;
    height: var(--space-20);
    background: var(--collection-color);
  }

  code,
  small {
    display: block;
    margin-inline: var(--space-4);
  }

  code {
    margin-block-start: var(--space-4);
    color: var(--text-0);
  }

  small {
    margin-block: var(--space-2) var(--space-4);
    color: var(--text-3);
  }
}

.collection-story-circles {
  display: flex;
  justify-content: center;
  padding-inline-start: var(--space-8);

  span {
    width: calc(var(--space-24) * 1.25);
    aspect-ratio: 1;
    margin-inline-start: calc(var(--space-8) * -1);
    border-radius: var(--radius-full);
    background: var(--collection-color);
    box-shadow: inset 0 0 0 1px oklch(from var(--text-0) l c h / 0.12);
  }
}

@media (width <= 800px) {
  .color-story-split {
    grid-template-columns: 1fr;
  }

  .color-story-hero {
    min-height: 0;
  }

  .color-story-main-swatch {
    height: calc(var(--space-24) * 1.5);
  }

  .color-story-scale {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

}

/* Gamut card: three nested rings. */
.tv-gamut-rings {
  position: relative;
  width: 3rem;
  height: 3rem;
}
.tv-gamut-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.tv-gamut-ring--lg { transform: scale(1); }
.tv-gamut-ring--md { transform: scale(0.75); }
.tv-gamut-ring--sm { transform: scale(0.45); }

/* Harmony card: three dots arranged 120deg on a circle. */
.tv-harmony {
  position: relative;
  width: 3rem;
  height: 3rem;
}
.tv-harmony-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin: -0.425rem 0 0 -0.425rem;
  border-radius: 50%;
  transform: rotate(var(--a)) translateY(-1.1rem);
}

/* Scheme card: light/dark split with text samples. */
.tv-scheme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  gap: 2px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tv-scheme-half {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Naming card: name-on-swatch chips. */
.tv-name-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  color: oklch(0.08 0 0);
}

/* Contrast card: ratio + AAA pass tag. */
.tv-contrast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  height: 100%;
  width: 100%;
  background: oklch(0.20 0.04 240);
  border-radius: var(--radius-sm);
  color: oklch(0.96 0.01 240);
}
.tv-contrast > span:first-child {
  font-size: 1.1rem;
  font-weight: 600;
}
.tv-contrast-ratio {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: auto;
}
.tv-contrast-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: oklch(0.78 0.18 145);
  color: oklch(0.08 0 0);
}

/* Blindness card: two parallel mini strips with labels. */
.tv-vision {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px var(--space-2);
  width: 100%;
}
.tv-vision-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.tv-vision-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 0.85rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* CSS Color 4/5 card: code badges. */
.tv-code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--topic-c);
}

/* /php topic visuals -- DX-flavoured (code chips + checks). */
.tv-code--accent {
  background: oklch(from var(--topic-c) calc(l - 0.4) calc(c * 0.6) h);
  color: var(--topic-c);
}
.tv-check {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}
.tv-check--ok { color: oklch(0.78 0.22 145); }
.tv-check--no { color: var(--text-3); }
.tv-extract {
  display: inline-grid;
  grid-template-columns: repeat(3, 0.75rem);
  gap: 2px;
  height: 0.85rem;

  > span { border-radius: 2px; }
}

/* Family cards on the Families landing. */
.family-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast);

  &:hover { transform: translateY(-2px); }
}
.family-card__strip {
  display: flex;
  block-size: 96px;
  border-radius: var(--radius-lg);
  overflow: hidden;

  span { flex: 1; }
}
.family-card__meta { margin-top: var(--space-4); }

/* Scale ramp on a scale detail page. */
.scale-ramp {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: var(--space-2);
}
.scale-step { text-align: center; }
.scale-step__swatch {
  block-size: 88px;
  border-radius: var(--radius-md);
}
@media (width <= 768px) {
  .scale-ramp { grid-template-columns: repeat(4, 1fr); }
}

/* Semantic collection page: one panel per curated set. Alternating
   sets get a surface tint instead of a divider line, for rhythm
   without borders. */
.semantic-set--alt { background: var(--surface-1); }

.semantic-set__header { margin-bottom: var(--space-8); }

.semantic-role { text-align: center; }
.semantic-role__value {
  color: var(--text-2);
  font-size: var(--text-xs);
}
.colors-spectrum-title {
  font-size: clamp(var(--text-7xl), 10vw, calc(var(--text-8xl) * 1.25));
}

.colors-spectrum-letter {
  color: var(--accent-text);
}
}
@layer page {
/* ============================================================
   GALLERIES
   Shared visual language for the four "entity gallery" pages:
   /palettes, /colors, /color/spaces, /gradients mosaic.

   Each gallery card is a surface-1 tile with a big visual block
   on top and a meta block underneath. Per-page styles (palette
   strip, color swatch, space illustration, gradient preview)
   plug into the `.gallery-card` shell via a variant class.
   ============================================================ */

/* ── Section frame ─────────────────────────────────────────── */

.sec-gallery {
  padding: var(--space-12) var(--gutter) var(--space-24);
  max-width: 84rem;
  margin-inline: auto;
}


/* ── Filter bar ────────────────────────────────────────────── */

.gallery-filters {
  justify-content: center;
  margin-bottom: var(--space-10);
}

.gallery-filter {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-2);
  cursor: pointer;
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast),
    color var(--duration-fast);

  &:hover {
    border-color: var(--text-2);
    color: var(--text-0);
  }
  &.active {
    background: var(--text-0);
    border-color: var(--text-0);
    color: oklch(0.08 0 0);
  }
}


/* ── Grid ──────────────────────────────────────────────────── */

/* Uses auto-fill (not the .grid-auto default of auto-fit) so trailing
   incomplete rows preserve column width instead of stretching. */
.gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 340px), 1fr));
}


/* ── Card shell ────────────────────────────────────────────── */

.gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    background var(--duration-normal) var(--ease-out-expo),
    transform  var(--duration-normal) var(--ease-out-expo);

  &:hover {
    background: var(--surface-2);
    transform: translateY(-3px);
  }
}


/* ── Meta block (shared across all variants) ───────────────── */

.gallery-meta {
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.gallery-card-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-0);
  line-height: 1.2;
  margin: 0;
}

.gallery-card-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.gallery-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
}

.gallery-card-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-2);
  margin-top: var(--space-1);

  /* Mood-driven tag colors. Each reads as a tinted chip, not a
     saturated fill -- the palette strip itself carries the color. */
  &.mood-cool   { color: oklch(0.82 0.14 220); background: oklch(0.82 0.14 220 / 0.12); }
  &.mood-warm   { color: oklch(0.82 0.18  35); background: oklch(0.82 0.18  35 / 0.12); }
  &.mood-vivid  { color: oklch(0.82 0.20 320); background: oklch(0.82 0.20 320 / 0.12); }
  &.mood-earthy { color: oklch(0.82 0.12  90); background: oklch(0.82 0.12  90 / 0.12); }
  &.mood-dark   { color: oklch(0.78 0.06 260); background: oklch(0.78 0.06 260 / 0.12); }
  &.mood-light  { color: oklch(0.85 0.04 180); background: oklch(0.85 0.04 180 / 0.12); }
}


/* ============================================================
   PALETTE CARD
   Big colorful strip that fills the top of the card. On hover
   the card lifts; swatches expand their neighbour on hover and
   reveal their OKLCH values.
   ============================================================ */

.palette-card .palette-strip {
  display: flex;
  height: clamp(140px, 18vw, 200px);
  gap: 0;
}

/* Gradient card thumbnail: full-bleed gradient at the top of the
   card, position-relative so the title's stretched-link cover
   anchors to the card. */
.gradient-card {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background var(--duration-fast), transform var(--duration-fast);

  &:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
  }
}
.gradient-card-strip {
  height: clamp(140px, 18vw, 200px);
}

.palette-swatch {
  flex: 1;
  position: relative;
  background: var(--c);
  transition: flex var(--duration-normal) var(--ease-out-expo);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* When the parent strip is hovered, other swatches shrink a bit;
   the specifically-hovered swatch grows. Gives a subtle sense of
   focus without moving the card outline. */
.palette-card:hover .palette-swatch { flex: 0.85; }
.palette-card .palette-swatch:hover { flex: 2.2; }

.palette-swatch-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: oklch(0.08 0 0);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in oklch, var(--c) 85%, white 15%);
  border-top-right-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--duration-fast),
    transform var(--duration-fast);
  pointer-events: none;
  white-space: nowrap;
}

/* Revealed only on the swatch that's actually being hovered. */
.palette-swatch:hover .palette-swatch-label {
  opacity: 0.95;
  transform: translateY(0);
}

/* Dark-on-light vs light-on-dark label: pick the text color based
   on the perceived lightness of the swatch. Using `oklch(from var(--c) l)`
   exposes the lightness channel we can branch on — but CSS can't
   if-else at parse time, so we use `color-mix` to derive a legible
   label backing regardless of the swatch's own lightness. The
   mix above with white biases toward a tinted pastel the text sits
   on, which reads well across both dark and light source swatches. */


/* ── Responsive ─────────────────────────────────────────────── */

@media (width <= 600px) {
  .palette-card .palette-strip { height: 140px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); }
  .gallery-filter { flex-shrink: 0; }
}


/* ============================================================
   NEIGHBOR NAV
   Prev / next strip at the bottom of every show page in the
   three catalogs (colors, palettes, gradients). Each card is
   the same surface-1 tile as a gallery card, with a label, the
   neighbor's name, and a preview block whose contents vary by
   catalog (single swatch, palette strip, or gradient band).
   ============================================================ */

.neighbor-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.neighbor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    background var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo);

  &:hover {
    background: var(--surface-2);
    transform: translateY(-2px);
  }
  &.next {
    text-align: right;
  }
}

.neighbor-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.neighbor-name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-0);
  line-height: 1.2;
  margin: 0;
}

.neighbor-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
}

.neighbor-preview {
  display: flex;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-2);

  & > span {
    flex: 1;
    display: block;
  }
}

@media (width <= 600px) {
  .neighbor-nav { grid-template-columns: 1fr; }
}
}
@layer page {
/* ============================================================
   GRADIENTS
   Gallery index and gradient detail pages.
   Ported from webdesign/draft/gradients.html reference.
   ============================================================ */

/* --- Gradient strips --- */
.g-strip {
  height: 52px;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo);

  &:hover { transform: scaleY(1.15); }
}
.g-strip-label {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: oklch(0 0 0 / 0.5);
  mix-blend-mode: multiply;

  &.light {
    color: oklch(1 0 0 / 0.4);
    mix-blend-mode: screen;
  }
}

/* --- Gradient river (full-bleed) --- */
.gradient-river {
  padding: clamp(2rem, 4vh, 4rem) 0;

  .river {
    height: clamp(120px, 18vw, 240px);
    display: flex;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);

    span {
      flex: 1;
      transition: flex var(--duration-normal) var(--ease-out-expo);
    }

    &:hover span:nth-child(3n+1) { flex: 2.5; }
    &:hover span:nth-child(3n+2) { flex: 0.5; }
  }
}

/* --- Orb field --- */
.orb-field {
  position: relative;
  aspect-ratio: 1;
  max-width: 420px;
  margin: 0 auto;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: orb-float 12s ease-in-out infinite alternate;

  &:nth-child(2) { animation-delay: -3s; animation-duration: 15s; }
  &:nth-child(3) { animation-delay: -6s; animation-duration: 18s; }
  &:nth-child(4) { animation-delay: -9s; animation-duration: 13s; }
}
@keyframes orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(5%, -8%) scale(1.05); }
  66%  { transform: translate(-3%, 5%) scale(0.95); }
  100% { transform: translate(2%, -3%) scale(1.02); }
}

/* --- Conic wheel --- */
.conic-wrap {
  width: clamp(280px, 100%, 400px);
  aspect-ratio: 1;
  position: relative;
  margin: 0 auto;
}
.conic-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: conic-spin 40s linear infinite;
}
@keyframes conic-spin { to { transform: rotate(360deg); } }
.conic-center {
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: var(--surface-0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-1);

  span {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-2);
    letter-spacing: 0.05em;
  }
  strong {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-0);
  }
}

/* --- Gradient mosaic --- */
.mosaic-section {
  padding: clamp(4rem, 8vh, 8rem) var(--gutter);
  max-width: 80rem;
  margin: 0 auto;
  text-align: center;
}
.mosaic-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 200;
  color: var(--text-0);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);

  strong { font-weight: 600; }
}
.mosaic-sub {
  color: var(--text-2);
  margin-bottom: clamp(3rem, 6vh, 5rem);
  max-width: 32rem;
  margin-inline: auto;
}
.gradient-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, 1fr);
  gap: 4px;
}
.mosaic-cell {
  border-radius: 3px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo);

  &:hover { transform: scale(1.04); z-index: 1; }
  &.wide { grid-column: span 2; }
  &.tall { grid-row: span 2; }
  &.feature { grid-column: span 2; grid-row: span 2; }

  .label {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: oklch(1 0 0 / 0.35);
    mix-blend-mode: screen;

    &.dark {
      color: oklch(0 0 0 / 0.3);
      mix-blend-mode: multiply;
    }
  }
}

/* --- Gradient CTA --- */
.gradient-cta {
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 14vh, 14rem) var(--gutter);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 30% 50%, oklch(0.12 0.06 350 / 0.35) 0%, transparent 55%),
      radial-gradient(ellipse 60% 40% at 70% 50%, oklch(0.12 0.06 145 / 0.35) 0%, transparent 55%);
    pointer-events: none;
  }

  h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 100;
    color: var(--text-0);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);

    strong { font-weight: 600; }
  }

  p {
    font-size: var(--text-lg);
    color: var(--text-2);
    margin-bottom: clamp(2rem, 4vh, 4rem);
  }
}
.gradient-cta-content { position: relative; }
.gradient-cta-bar {
  margin-top: clamp(3rem, 6vh, 5rem);
  width: min(60%, 24rem);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    oklch(0.75 0.28 350), oklch(0.85 0.24 55),
    oklch(0.82 0.28 145), oklch(0.65 0.28 260));
  opacity: 0.5;
}

/* --- Hero gradient bar --- */
.hero-gradient-bar {
  margin-top: clamp(4rem, 8vh, 8rem);
  width: min(80%, 36rem);
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    oklch(0.75 0.28 350), oklch(0.82 0.26 30), oklch(0.88 0.24 60),
    oklch(0.85 0.26 100), oklch(0.80 0.28 145), oklch(0.72 0.26 200),
    oklch(0.65 0.28 260), oklch(0.70 0.28 310), oklch(0.75 0.28 350));
  box-shadow: 0 0 20px oklch(0.60 0.20 260 / 0.3), 0 0 40px oklch(0.50 0.15 350 / 0.15);
}

/* --- Gradient detail page --- */
.gradient-page {
  padding: calc(var(--nav-h) + var(--space-16)) var(--gutter) var(--space-16);
  max-width: 72rem;
  margin-inline: auto;
}
.gradient-header {
  text-align: center;
  margin-bottom: var(--space-8);
}
.gradient-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-2);
}
.gradient-name {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 100;
  color: var(--text-0);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}
.gradient-meta {
  font-size: var(--text-sm);
  color: var(--text-2);
}
.gradient-band {
  height: 120px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

/* Stop markers */
.stop-markers {
  position: relative;
  height: 24px;
  margin-bottom: var(--space-8);
}
.stop-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);

  &::before {
    content: '';
    display: block;
    width: 1px;
    height: 8px;
    background: var(--border-default);
    margin: 0 auto var(--space-1);
  }
}

/* Stops grid */
.stops-grid {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.stop-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.stop-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.stop-position {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
}
.stop-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-1);
}

/* Interpolation info */
.interp-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.interp-card {
  background: var(--surface-1);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.interp-key {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-bottom: var(--space-1);
}
.interp-val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-0);
}

@media (width <= 900px) {
  .gradient-mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic-cell.feature { grid-column: span 2; grid-row: span 1; min-height: 180px; }
}
@media (width <= 600px) {
  .gradient-mosaic { grid-template-columns: 1fr 1fr; }
  .stops-grid { flex-wrap: wrap; }
}
}
@layer page {
/* ============================================================
   NAMES
   Curated resource index for CSS named colors.
   ============================================================ */

.name-card {
  padding: 0;
  overflow: hidden;
}

.name-card-swatch {
  min-height: 11rem;
  background: var(--name-swatch);
  position: relative;
}

.name-card-hex {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: white;
  mix-blend-mode: difference;
}
}
@layer page {
/* /color/spaces: educational overview and text-led reference. Prefix .sp-. */

.sp-directory {
  max-width: 68rem;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-20);
}

.sp-directory-header {
  max-width: calc(var(--space-24) * 6);
  margin-block-end: var(--space-8);

  h2 {
    margin-block: var(--space-2) var(--space-3);
    font-size: var(--text-2xl);
  }

  > p:not(.eyebrow) {
    color: var(--text-2);
  }
}

.sp-directory-list {
  border-block-start: 1px solid var(--border-default);
}

.sp-directory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  color: var(--text-1);
  text-decoration: none;
  border-block-end: 1px solid var(--border-subtle);

  strong {
    color: var(--text-0);
    font-size: var(--text-lg);
  }

  code,
  .sp-directory-category {
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  &:hover {
    strong {
      color: var(--accent-text);
    }
  }
}

@media (width <= 768px) {
  .sp-directory-row {
    grid-template-columns: minmax(0, 1fr) auto;

    code {
      text-align: end;
    }

    .sp-directory-category {
      grid-column: 1;
    }

    .sp-directory-use {
      grid-column: 1 / -1;
    }
  }
}

/* ── Chromaticity atlas ─────────────────────────────────────── */
.sp-atlas {
  max-width: 68rem;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-24);
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr);
  gap: var(--space-16);
  align-items: center;
}
@media (width <= 900px) {
  .sp-atlas { grid-template-columns: 1fr; gap: var(--space-8); }
}

.sp-atlas-side > .eyebrow { color: var(--accent-text); }
.sp-atlas-desc {
  color: var(--text-1);
  max-width: 40ch;
  margin-block: var(--space-3) var(--space-8);
}

.sp-atlas-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sp-atlas-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--text-1);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;

  input { accent-color: var(--accent); }

  &:hover { color: var(--text-0); }
}
.sp-atlas-swatch {
  inline-size: var(--space-4);
  block-size: 3px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* The diagram itself. Everything a human eye can see, faintly lit
   from the white point; each gamut is a stroked triangle. */
.sp-atlas-locus {
  fill: color-mix(in oklch, var(--surface-2) 70%, var(--surface-3));
  stroke: var(--border-default);
  stroke-width: 1.5;
}
.sp-atlas-gamut {
  polygon {
    fill: transparent;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linejoin: round;
    transition: opacity var(--duration-fast);
  }

  text {
    fill: var(--accent-text);
    font-family: var(--font-mono-ui);
    font-size: 24px;
    transition: opacity var(--duration-fast);
  }
}
.sp-atlas-white {
  circle {
    fill: var(--text-0);
    stroke: var(--surface-0);
    stroke-width: 2;
  }

  text {
    fill: var(--text-3);
    font-family: var(--font-mono-ui);
    font-size: 22px;
  }
}

/* Pure-CSS layer toggles: unchecked box hides its layer. */
.sp-atlas:has(input[name="atlas-srgb"]:not(:checked)) [data-atlas-layer="srgb"],
.sp-atlas:has(input[name="atlas-a98-rgb"]:not(:checked)) [data-atlas-layer="a98-rgb"],
.sp-atlas:has(input[name="atlas-display-p3"]:not(:checked)) [data-atlas-layer="display-p3"],
.sp-atlas:has(input[name="atlas-rec2020"]:not(:checked)) [data-atlas-layer="rec2020"],
.sp-atlas:has(input[name="atlas-prophoto-rgb"]:not(:checked)) [data-atlas-layer="prophoto-rgb"] {
  opacity: 0;
}

/* Detail page. */
.sp-detail-header {
  padding-block: calc(var(--nav-h) + var(--space-12)) var(--space-10);

  .eyebrow {
    margin-block: var(--space-8) var(--space-3);
    color: var(--accent-text);
  }

  h1 {
    margin-block-end: var(--space-4);
  }

  .body-lg {
    color: var(--text-1);
  }
}

.sp-facts {
  max-width: 62rem;
  margin-inline: auto;
  padding: var(--space-16) var(--space-6) var(--space-8);
}
.sp-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-8) var(--space-10);
  margin: 0;
}
.sp-fact {
  dt {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-block-end: var(--space-2);
  }

  dd {
    margin: 0;
    color: var(--text-1);

    a { color: var(--accent-text); }
  }
}
.sp-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);

  strong {
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    color: var(--text-0);
    margin-inline-end: var(--space-1);
  }
}
.sp-range {
  color: var(--text-3);
  font-size: var(--text-sm);
  margin-inline-start: var(--space-2);
}

.sp-usage {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-section {
  h2 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    margin-block-end: var(--space-3);
  }

  > p {
    color: var(--text-1);
    margin-block-end: var(--space-6);
  }
}
}