@font-face {
  font-family: "Meraki";
  src: url("../fonts/Meraki-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-Buch.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-Kraftig.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/Sohne-Halbfett.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
:root {
  --eggshell: #FCFBF7;
  --cream-subtle: #FAF9F5;
  --cream-muted: #F5F4EF;
  --off-black: #1B180E;
  --dark-ground: #131415;
  --dark-ink: #EDEADE;

  --bg: #FFFDF4;
  --card: #FFFFFF;
  --tile: var(--cream-muted);
  --tile-contrast: var(--off-black);
  --ink: var(--off-black);
  --ink-muted: rgba(27, 24, 14, 0.64);
  --ink-faint: rgba(27, 24, 14, 0.42);
  --line: rgba(27, 24, 14, 0.1);
  --line-strong: rgba(27, 24, 14, 0.2);
  --hover-fill: rgba(27, 24, 14, 0.05);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sidebar-w: 236px;
  --col-w: 668px;
  --anno: #C21E3A;
}

html[data-theme="dark"] {
  --bg: var(--dark-ground);
  --card: #1B1C1E;
  --tile: #1B1C1E;
  --tile-contrast: #0E0F10;
  --ink: var(--dark-ink);
  --ink-muted: rgba(237, 234, 222, 0.62);
  --ink-faint: rgba(237, 234, 222, 0.4);
  --line: rgba(237, 234, 222, 0.12);
  --line-strong: rgba(237, 234, 222, 0.24);
  --hover-fill: rgba(237, 234, 222, 0.07);
  --anno: color-mix(in srgb, #C21E3A 58%, var(--dark-ink));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Sohne", -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out);
}

::selection {
  background: rgba(144, 193, 249, 0.45);
}

a {
  color: inherit;
}

/* ---------- sidebar ---------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 44px 36px 36px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.sidebar-logo svg {
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

.sidebar-logo span {
  font-family: "Meraki", serif;
  font-size: 19px;
  letter-spacing: 0.01em;
}

.sidebar-tag {
  margin: 6px 0 0 31px;
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.sidebar nav {
  margin-top: 52px;
  padding-left: 17px;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5.5px 0;
  font-size: 13.5px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}

.sidebar nav a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}

.sidebar nav a:hover {
  color: var(--ink);
}

.sidebar nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

.sidebar nav a[aria-current="page"]::before {
  opacity: 1;
}

.sidebar-foot {
  margin-top: auto;
  padding-left: 9px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.sidebar-foot a,
.sidebar-foot button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.sidebar-foot a:hover,
.sidebar-foot button:hover {
  color: var(--ink);
}

.sidebar-foot a:active,
.sidebar-foot button:active {
  transform: scale(0.97);
}

.sidebar-foot svg {
  width: 14px;
  height: 14px;
}

.sidebar-notice {
  margin: 26px 0 0 17px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 150px;
}

.sidebar-notice a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.sidebar-notice a:hover {
  color: var(--ink);
}

/* ---------- content ---------- */

main {
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
}

.page {
  width: 100%;
  max-width: 780px;
  padding: 72px 56px 80px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  width: 100%;
}

.hero-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 96px 56px 4px;
}

.hero h1 {
  font-family: "Meraki", serif;
  font-weight: 400;
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-lede {
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.66;
  max-width: 560px;
  margin: 26px 0 0;
}


.section {
  margin-bottom: 108px;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.kicker-num {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.kicker-num::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--line-strong);
}

.section h2 {
  font-family: "Meraki", serif;
  font-weight: 400;
  font-size: 27px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 18px;
}

.section h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 40px 0 8px;
}

.section p {
  color: var(--ink-muted);
  max-width: 620px;
  margin: 0 0 16px;
  text-wrap: pretty;
}

.section p strong {
  color: var(--ink);
  font-weight: 500;
}

figcaption,
.caption,
.section p.caption {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 560px;
}

figure {
  margin: 28px 0 0;
}

/* ---------- tiles & asset cards ---------- */

.tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--tile);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tile.on-light {
  background: var(--eggshell);
  color: var(--off-black);
}

.tile.on-dark {
  background: var(--off-black);
  border-color: transparent;
  color: var(--eggshell);
}

.tile img {
  max-width: 62%;
  max-height: 52%;
  display: block;
}

.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.tile-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.tile-grid .tile {
  aspect-ratio: 4 / 3;
}

.tile-grid figure {
  margin: 0;
}

.tile-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-actions,
  .tile:focus-within .tile-actions {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: none) {
  .tile-actions {
    opacity: 1;
    transform: none;
  }
}

.tile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}

.tile.on-dark .tile-btn {
  background: rgba(252, 251, 247, 0.12);
  border-color: rgba(252, 251, 247, 0.2);
  color: var(--eggshell);
}

.tile-btn:hover {
  background: var(--hover-fill);
}

.tile-btn:active {
  transform: scale(0.96);
}

.tile-btn svg {
  width: 13px;
  height: 13px;
}

/* ---------- swatches ---------- */

.swatch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.swatch-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.swatch {
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 18px 18px 14px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
}

.swatch-name,
.section .swatch p {
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
}

.swatch-token {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  opacity: 0.6;
}

.swatch dl {
  margin: auto 0 0;
}

.swatch-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 2px 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
}

.swatch-row dt {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.02em;
  opacity: 0.55;
  width: 30px;
  flex-shrink: 0;
}

.swatch-row dd {
  margin: 0;
  transition: opacity 140ms var(--ease-out);
}

@media (hover: hover) {
  .swatch-row:hover dd {
    opacity: 0.7;
  }
}

.swatch-row:active dd {
  opacity: 0.5;
}

.swatch.is-light {
  color: var(--off-black);
}

.swatch.is-dark {
  color: var(--eggshell);
}

/* ---------- contrast list ---------- */

.contrast-list {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.contrast-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.contrast-chip {
  width: 44px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}

.contrast-row .ratio {
  margin-left: auto;
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-faint);
}

.badge {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--bg);
  flex-shrink: 0;
}

.badge.aa {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
}

/* ---------- do / don't ---------- */

.dont-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.dont-grid figure {
  margin: 0;
}

.dont-grid .tile {
  aspect-ratio: 4 / 3;
}

.dont-grid figcaption {
  margin-top: 10px;
  font-size: 12.5px;
}

.dont-grid figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

.dont-mark {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #C21E3A;
  color: #FCFBF7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}

/* ---------- tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  font-size: 13.5px;
}

th {
  text-align: left;
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line-strong);
}

td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-muted);
}

td:first-child {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- quotes, principles ---------- */

.brief-card {
  margin: 28px 0 0;
}

.brief-scene {
  display: flex;
  aspect-ratio: 16 / 9;
  padding: 26px 32px;
  border-radius: 14px;
  background-position: center;
  background-size: cover;
}

.brief-scene .brief-line {
  margin: 0;
  max-width: 92%;
  font-family: "Meraki", serif;
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-wrap: balance;
}

.brief-card figcaption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  margin-top: 16px;
}

.brief-card figcaption span:first-child {
  max-width: 470px;
}

.brief-card .tile-btn {
  flex-shrink: 0;
}

@container (max-width: 779px) {
  .brief-scene {
    aspect-ratio: auto;
    min-height: 320px;
    padding: 24px;
  }

  .brief-scene .brief-line {
    font-size: 21px;
    max-width: none;
  }
}

.brief {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 40px;
  margin: 28px 0 0;
  background: var(--card);
}

.brief p {
  font-family: "Meraki", serif;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  max-width: none;
  margin: 0;
}

.brief cite {
  display: block;
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin-top: 16px;
}

.principles {
  list-style: none;
  counter-reset: p;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.principles li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.principles li::before {
  content: "0" counter(p);
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-faint);
  padding-top: 3px;
}

.principles h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.principles.is-display h3 {
  font-family: "Meraki", serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.008em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.principles p {
  margin: 0;
  font-size: 13.5px;
}

.attr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.attr-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: var(--card);
}

.attr-card h3 {
  font-family: "Meraki", serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}

.attr-card p {
  font-size: 13px;
  margin: 0;
}

/* ---------- placeholders ---------- */

.placeholder {
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-faint);
}

.placeholder svg {
  width: 22px;
  height: 18px;
  opacity: 0.5;
}

.placeholder span {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* ---------- narrative arc ---------- */

/* The day's fragments on the left; the bird carries them, along a dotted flight path, into one ordered card. */
.arc {
  display: grid;
  grid-template-columns: 1fr 236px;
  gap: 36px;
  align-items: center;
  margin-top: 28px;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-color: var(--tile);
  background-position: center;
  background-size: cover;
  overflow: hidden;
  /* Softens the library image behind the cards; the image is set inline, under this wash. */
  --arc-wash: color-mix(in srgb, var(--bg) 42%, transparent);
}

.arc-scatter {
  position: relative;
  height: 356px;
}

.arc-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 200px;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 6px 18px rgba(12, 30, 60, 0.14);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  opacity: 0;
  transform: translate(var(--sx), var(--sy)) rotate(calc(var(--r) * 3));
  transition: transform 900ms var(--ease-out), opacity 500ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.arc.is-settled .arc-card {
  opacity: 1;
  transform: rotate(var(--r));
}

/* The tabs sit on the card's bottom edge, like browser tabs. */
.arc-card.is-tabs {
  padding-bottom: 0;
}

.arc-card strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: 12.5px;
}

.arc-card .arc-time {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  float: right;
  margin-top: 2px;
}

.arc-line {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--hover-fill);
  margin-top: 7px;
}

.arc-line.w2 {
  width: 72%;
}

.arc-line.w3 {
  width: 46%;
}

.arc-tabs {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

.arc-tabs span {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  background: var(--tile);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

.arc-out {
  position: relative;
}

.arc-path {
  position: absolute;
  right: calc(100% + 4px);
  top: 0;
  width: 64px;
  height: 60px;
  overflow: visible;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0 6.5;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 650ms var(--ease-out) 600ms;
}

.arc.is-settled .arc-path {
  clip-path: inset(0 0 0 0);
}

.arc-result {
  padding: 16px 18px 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 14px 36px rgba(12, 30, 60, 0.2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out) 1050ms, transform 700ms var(--ease-out) 1050ms;
}

.arc.is-settled .arc-result {
  opacity: 1;
  transform: none;
}

.section .arc-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.arc-result-head svg {
  width: 17px;
  height: auto;
}

.arc-result ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arc-result li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.arc-result li strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

@container (max-width: 779px) {
  .arc {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .arc-card {
    width: 176px;
  }

  .arc-path {
    display: none;
  }
}

/* ---------- proportion bar ---------- */

.proportion {
  display: flex;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 28px;
  border: 1px solid var(--line);
}

.proportion span {
  height: 100%;
}

.proportion span + span {
  box-shadow: inset 1px 0 0 var(--line);
}

.proportion-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-muted);
}

.proportion-legend span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--dot);
  border: 1px solid var(--line);
  margin-right: 7px;
  vertical-align: -1px;
}

/* ---------- visual elements ---------- */

.tile.ve-tile {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.ve-tile img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* ---------- social posts ---------- */

.attr-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.swash {
  font-feature-settings: "ss01";
}

/* A headline set over a tile, the way it sits on a post. */
.tile.type-over {
  aspect-ratio: 16 / 9;
  align-items: flex-start;
  justify-content: flex-start;
  background-position: center;
  background-size: cover;
}

.type-over-text {
  font-family: "Meraki", serif;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  padding: 18px 20px;
  max-width: 72%;
  text-align: left;
  text-wrap: balance;
}

.type-over-text.is-flat {
  color: var(--off-black);
}

.type-over-text.is-flat,
.type-over-text.is-marked {
  padding-top: 42px;
}

/* Same breakout width as .canvas, so a post reads at phone size. */
.post-strip {
  --strip-w: min(100cqw - 56px, 1040px);
  width: var(--strip-w);
  margin: 28px 0 0 calc(50% - var(--strip-w) / 2);
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: 12px;
  border-radius: 12px;
}

.post-strip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.post-strip img {
  flex: none;
  height: 400px;
  width: auto;
  border-radius: 12px;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  scroll-snap-align: start;
}

/* ---------- chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.chip {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 3.5px 11px;
}

/* ---------- specimens ---------- */

.specimen {
  border-top: 1px solid var(--line);
  padding: 32px 0 8px;
  margin-top: 28px;
}

.specimen-display {
  font-family: "Meraki", serif;
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 0 0 18px;
  max-width: 620px;
}

.specimen-ui {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 400;
  margin: 0 0 18px;
  max-width: 620px;
}

.specimen-alphabet {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.7;
  word-break: break-all;
  max-width: 560px;
  margin: 0 0 12px;
}

.specimen-alphabet.meraki {
  font-family: "Meraki", serif;
}

.type-scale-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.type-scale-row .label {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  width: 120px;
  flex-shrink: 0;
}

/* ---------- downloads ---------- */

.dl-hero {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 30px 34px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.dl-hero p {
  margin: 0;
  flex: 1;
  min-width: 220px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--bg);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out);
}

.button:hover {
  opacity: 0.88;
}

.button:active {
  transform: scale(0.97);
}

.button svg {
  width: 14px;
  height: 14px;
}

.dl-note {
  font-size: 13px;
  color: var(--ink-muted);
  border-left: 2px solid var(--line-strong);
  padding-left: 16px;
  max-width: 540px;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

footer a {
  color: var(--ink-muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--ink);
}

.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 108px;
}

.pager a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  max-width: 45%;
}

.pager a .label {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.pager a .dest {
  font-family: "Meraki", serif;
  font-size: 19px;
  letter-spacing: -0.005em;
  transition: opacity 160ms var(--ease-out);
}

.pager a:hover .dest {
  opacity: 0.65;
}

.pager .next {
  margin-left: auto;
  text-align: right;
}

/* ---------- intro ---------- */

html.lb-intro .sidebar-logo svg {
  visibility: hidden;
}

html.lb-intro main {
  opacity: 0;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
}

.intro-overlay svg {
  width: clamp(120px, 16vw, 170px);
  height: auto;
  overflow: visible;
  will-change: transform;
}

.intro-overlay .intro-wing {
  transform-box: view-box;
  transform-origin: 13px 7px;
  will-change: transform;
}

.intro-overlay .intro-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.intro-overlay .intro-fill {
  fill: currentColor;
  opacity: 0;
}

/* The hairline stroke closes the anti-aliasing seam where wing meets body. */
.intro-overlay .intro-parts {
  visibility: hidden;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.05;
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay {
    display: none;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .sidebar {
    position: static;
    width: auto;
    padding: 28px 28px 0;
  }

  .sidebar nav {
    margin-top: 28px;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
  }

  .sidebar nav a {
    padding: 4px 0;
  }

  .sidebar-foot {
    margin-top: 18px;
    padding-left: 0;
    flex-direction: row;
    gap: 22px;
  }

  main {
    margin-left: 0;
  }

  .page {
    padding: 48px 28px 60px;
  }

  .hero-inner {
    padding: 48px 28px 4px;
  }

  .sidebar-notice {
    margin-left: 0;
    max-width: none;
  }

  .tile-grid,
  .tile-grid.cols-3,
  .swatch-grid,
  .swatch-grid.cols-3,
  .dont-grid,
  .attr-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- full-bleed demo canvas ---------- */

.canvas {
  --canvas-w: min(100cqw - 56px, 1040px);
  width: var(--canvas-w);
  margin: 28px 0 0 calc(50% - var(--canvas-w) / 2);
  padding: 48px 52px 44px;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.canvas-inner {
  margin: 0;
}

.canvas p.canvas-caption {
  margin: 22px 0 0;
  max-width: 620px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ---------- annotation layer ---------- */

.anno-label {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--anno);
}

.dim-bands {
  display: flex;
  margin-top: 12px;
  padding: 0 1px;
}

.dim-band {
  position: relative;
  padding-top: 16px;
  text-align: center;
}

.dim-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 6px;
  border: 1px solid var(--anno);
  border-bottom: none;
}

/* ---------- accessibility matrix ---------- */

.matrix {
  display: grid;
  gap: 6px;
  margin-top: 28px;
}

.matrix-row {
  display: grid;
  grid-template-columns: minmax(0, 268px) repeat(3, minmax(66px, 104px));
  justify-content: start;
  gap: 6px;
  align-items: center;
}

.matrix-head {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-align: center;
}

.matrix-head:first-child {
  text-align: left;
}

.matrix-ground {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding-right: 12px;
}

.matrix-ground i {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}

.matrix-cell {
  height: 46px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Meraki", serif;
  font-size: 17px;
  line-height: 1;
}

.matrix-cell.is-large {
  font-size: 21px;
}

.matrix-cell.is-large::after {
  content: "LG";
  font-family: "Sohne", -apple-system, sans-serif;
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-left: 4px;
  vertical-align: super;
}

.matrix-cell.is-empty {
  border-style: dashed;
  border-color: var(--line-strong);
  background: none;
}

.matrix-cell.is-self {
  border: none;
}

.matrix-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------- type spec tiles ---------- */

.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}

.spec-tile {
  display: flex;
  flex-direction: column;
  min-height: 236px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 22px 24px 24px;
}

.spec-pill {
  align-self: flex-start;
  background: var(--ink);
  color: var(--bg);
  border-radius: 99px;
  padding: 4px 11px;
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.spec-tile p.spec-line {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--ink-muted);
  max-width: none;
}

.spec-tile p.spec-sample {
  margin: auto 0 0;
  padding-top: 30px;
  color: var(--ink);
  max-width: none;
}

.spec-tile p.spec-note {
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
  max-width: none;
}

.weights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.weight {
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 6px 15px;
  font-size: 13.5px;
}

.weight.is-default {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ---------- we say / we don't say ---------- */

.say {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  margin-top: 28px;
}

.say > * {
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.say-head {
  padding-top: 0;
  border-top: none;
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.say-term {
  display: block;
  font-family: "Meraki", serif;
  font-size: 19px;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}

.say-gloss {
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
}

.is-negative .say-term {
  color: var(--ink-faint);
}

/* ---------- boilerplate panels ---------- */

.boiler {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.boiler-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 22px 28px 28px;
}

.boiler-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.boiler-meta {
  flex: 1;
  font-size: 12px;
  color: var(--ink-muted);
}

.boiler-panel p {
  font-size: 15px;
  color: var(--ink);
  max-width: 60ch;
}

.boiler-panel p:last-child {
  margin-bottom: 0;
}

.boiler-panel p.boiler-lead {
  font-family: "Meraki", serif;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- anatomised statement ---------- */

.section p.statement {
  font-family: "Meraki", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 34px 0 30px;
  max-width: 15ch;
}

.section p.statement.is-wide {
  max-width: 20ch;
}

.clause {
  border-bottom: 1px solid var(--anno);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 3px;
}

.clause sup {
  font-family: "Sohne", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--anno);
  margin-left: 3px;
}

.statement-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
  margin: 38px 0 40px;
}

.statement-notes p.statement-note {
  border-top: 1px solid var(--anno);
  padding-top: 11px;
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-muted);
  max-width: none;
}

.statement-note b {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--anno);
}

/* ---------- cross-references, draft status ---------- */

.principles p.crossref {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

.crossref a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 160ms var(--ease-out);
}

.crossref a:hover {
  color: var(--ink);
}

.draft {
  border: 1px solid var(--anno);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 76px;
  font-size: 13px;
  color: var(--ink-muted);
}

.draft b {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--anno);
}

@media (max-width: 900px) {
  .canvas {
    padding: 44px 28px;
  }

  .spec-grid,
  .boiler {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tile-grid,
  .tile-grid.cols-3,
  .swatch-grid,
  .swatch-grid.cols-3,
  .dont-grid,
  .attr-grid,
  .attr-grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .post-strip img {
    height: 320px;
  }

  .say {
    gap: 0 18px;
  }

  .say-term {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Layout: panels on one 12-column grid
   A flat colour field opens each page (the page's colour, which tells you where you are), then every
   section is a panel on a neutral ground, separated by a thin gutter of page ground. The close is a ruled
   pager and folio, with a dot of the next page's colour. A slim top bar and a full-screen index replace
   the old sidebar. Everything sits inside --edge on 12 columns with --hgap between them; column 7 is the
   main axis. site.js splits sections into head and body, grounds them, and builds the bar and index.
   Each page's <html> carries data-page, which scopes this block and the per-page rules at its end.
   ========================================================================== */

html[data-page] {
  --bar-h: 60px;
  --max: 1840px;
  --gut: clamp(8px, 0.9vw, 14px);
  --hpad: clamp(22px, 3.4vw, 56px);
  --pad-y: clamp(44px, 6.2vw, 108px);
  --r: 4px;

  /* Panel grounds: neutrals carry the page. */
  --d-page: #E8E6DF;
  --g-egg: #FCFBF7;
  --g-cream: #F5F4EF;
  --g-white: #FFFFFF;
  --g-ink: #1B180E;
  --g-mid: #2E1F65;
  --g-emer: #00664E;

  /* One grid for the whole page. Every piece of content (bar, opener, panels, pager, folio) sits inside
     --edge on 12 columns with --hgap between them; panels bleed out to the gutter by --hpad but their content
     stays on the columns. Column 7 is the main axis: the title, the section bodies and "Next" start there. */
  --edge: max(calc(var(--gut) + var(--hpad)), calc((100% - var(--max)) / 2 + var(--gut) + var(--hpad)));
  --hgap: clamp(12px, 1.5vw, 22px);
  --cols: repeat(12, minmax(0, 1fr));
  /* A half panel's background stops a gutter short of column 7, so the next panel's content can start on it. */
  --half-end: calc(var(--hpad) + var(--gut) - var(--hgap));

  /* Field ink. Light fields take Off Black, dark fields Eggshell; muted text never drops below .82. */
  --field-ink: #1B180E;
  --field-muted: rgba(27, 24, 14, 0.82);
  --field-line: rgba(27, 24, 14, 0.2);
  --field-rule: rgba(27, 24, 14, 0.42);

  scroll-padding-top: calc(var(--bar-h) + 24px);

  &[data-theme="dark"] {
    --d-page: #0B0B0C;
    --g-egg: #161719;
    --g-cream: #1B1C1E;
    --g-white: #202124;
    --g-ink: #1E1B12;
  }

  /* Per page (one secondary each): the field, the next page's field (the pager's dot), the numeral, and how
     big the title sets beside it. */
  &[data-page="index"] { --field: #51C878; --next: #90C1F9; --d-num: "01"; --h1-k: 0.19; }
  &[data-page="strategy"] { --field: #7D1734; --next: #90C1F9; --d-num: "00"; --h1-k: 0.27; }
  &[data-page="logo"] { --field: #90C1F9; --next: #FFED8A; --d-num: "02"; --h1-k: 0.38; }
  &[data-page="color"] { --field: #FFED8A; --next: #51C878; --d-num: "03"; --h1-k: 0.36; }
  &[data-page="typography"] { --field: #51C878; --next: #2E1F65; --d-num: "04"; --h1-k: 0.22; }
  &[data-page="imagery"] { --field: #2E1F65; --next: #7D1734; --d-num: "05"; --h1-k: 0.3; }
  &[data-page="voice"] { --field: #7D1734; --next: #00664E; --d-num: "06"; --h1-k: 0.36; }
  &[data-page="downloads"] { --field: #00664E; --next: #1B180E; --d-num: "07"; --h1-k: 0.24; }

  &:is([data-page="strategy"], [data-page="imagery"], [data-page="voice"], [data-page="downloads"]) {
    --field-ink: #FCFBF7;
    --field-muted: rgba(252, 251, 247, 0.84);
    --field-line: rgba(252, 251, 247, 0.2);
    --field-rule: rgba(252, 251, 247, 0.42);
  }

  --g-tint: color-mix(in srgb, var(--field) 13%, #FCFBF7);

  &[data-theme="dark"] {
    --g-tint: color-mix(in srgb, var(--field) 24%, #161719);
  }

  &.d-menu-open {
    overflow: hidden;
  }

  body {
    background: var(--d-page);
  }

  /* ---------- grounds ---------- */

  [data-ground] {
    background-color: var(--gbg);
    color: var(--ink);
    --bg: var(--gbg);
  }

  [data-ground="egg"] { --gbg: var(--g-egg); --tile: var(--g-cream); --card: var(--g-white); }
  [data-ground="cream"] { --gbg: var(--g-cream); --tile: var(--g-egg); --card: var(--g-white); }
  [data-ground="white"] { --gbg: var(--g-white); --tile: var(--g-cream); --card: var(--g-egg); }
  [data-ground="tint"] { --gbg: var(--g-tint); --tile: var(--g-egg); --card: var(--g-egg); }
  [data-ground="ink"] { --gbg: var(--g-ink); }
  [data-ground="mid"] { --gbg: var(--g-mid); }
  [data-ground="emer"] { --gbg: var(--g-emer); }

  /* Muted ink on a tint needs a little more weight to hold AA. */
  &:not([data-theme="dark"]) [data-ground="tint"] {
    --ink-muted: rgba(27, 24, 14, 0.76);
    --ink-faint: rgba(27, 24, 14, 0.6);
    --line: rgba(27, 24, 14, 0.14);
    --line-strong: rgba(27, 24, 14, 0.28);
  }

  /* Dark grounds remap the site tokens, so components inside inherit legible ink. */
  :is([data-ground="ink"], [data-ground="mid"], [data-ground="emer"]) {
    --ink: #FCFBF7;
    --ink-muted: rgba(252, 251, 247, 0.76);
    --ink-faint: rgba(252, 251, 247, 0.62);
    --line: rgba(252, 251, 247, 0.16);
    --line-strong: rgba(252, 251, 247, 0.34);
    --hover-fill: rgba(252, 251, 247, 0.08);
    --card: color-mix(in srgb, var(--gbg), #FCFBF7 8%);
    --tile: color-mix(in srgb, var(--gbg), #FCFBF7 8%);
    --anno: color-mix(in srgb, #C21E3A 40%, #FCFBF7);
    color: var(--ink);
  }

  /* ---------- top bar ---------- */

  .sidebar {
    position: sticky;
    inset: auto;
    top: 0;
    z-index: 60;
    width: auto;
    height: var(--bar-h);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 var(--edge);
    background: var(--d-page);
    transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out);
  }

  /* On the opener the bar is part of the field; past it (or with the index open) it sits on the page ground. */
  &:not(.d-past-hero):not(.d-menu-open) .sidebar {
    --ink: var(--field-ink);
    --ink-muted: var(--field-muted);
    --line-strong: var(--field-rule);
    --bg: var(--field);
    background: var(--field);
    color: var(--ink);
  }

  .sidebar-logo span {
    font-size: 20px;
    letter-spacing: 0;
  }

  .sidebar-tag,
  .d-where {
    margin: 0;
    font-family: "Sohne", -apple-system, sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
    white-space: nowrap;
  }

  .sidebar-tag {
    padding-left: 16px;
    border-left: 1px solid var(--line-strong);
  }

  .d-where {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  .d-where-num {
    transition: border-color 160ms var(--ease-out);
  }

  @media (hover: hover) {
    .d-where:hover .d-where-num {
      border-color: var(--ink);
    }
  }

  .d-where:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .d-where::before {
    content: "";
    width: 20px;
    height: 1px;
    margin-right: 4px;
    background: var(--line-strong);
  }

  .d-where-num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .sidebar-foot {
    margin: 0 0 0 auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 22px;
  }

  .d-index-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 18px 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-family: "Sohne", -apple-system, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out);
  }

  .d-index-btn:hover {
    opacity: 0.86;
  }

  .d-index-btn:active {
    transform: scale(0.97);
  }

  .d-index-btn:focus-visible,
  .sidebar-foot :focus-visible,
  .sidebar-logo:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

  .d-index-icon {
    position: relative;
    width: 14px;
    height: 10px;
  }

  .d-index-icon::before,
  .d-index-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 220ms var(--ease-out);
  }

  .d-index-icon::before { top: 2px; }
  .d-index-icon::after { bottom: 2px; }

  .d-index-btn[aria-expanded="true"] .d-index-icon::before { transform: translateY(2.25px) rotate(45deg); }
  .d-index-btn[aria-expanded="true"] .d-index-icon::after { transform: translateY(-2.25px) rotate(-45deg); }

  /* ---------- index menu ---------- */

  .d-menu {
    position: fixed;
    inset: var(--bar-h) 0 0;
    z-index: 55;
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--gut);
    padding: 0 max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))) var(--gut);
    background: var(--d-page);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 240ms var(--ease-out), translate 240ms var(--ease-out);
  }

  .d-menu[hidden] {
    display: none;
  }

  .d-menu-list {
    display: flex;
    flex-direction: column;
    padding: var(--hpad);
    min-height: 100%;
  }

  .d-menu-kicker {
    margin: 0 0 clamp(20px, 3.4vh, 40px);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
  }

  .d-menu nav {
    margin: 0;
    padding: 0;
    display: block;
    counter-reset: dm;
    border-bottom: 1px solid var(--line);
  }

  .d-menu nav a,
  .d-menu nav a[aria-current="page"] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 0.36em 0 0.4em;
    border-top: 1px solid var(--line);
    /* Navigation, not headlines: the secondary face, Söhne Buch. */
    font-family: "Sohne", -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(24px, min(3vw, 4.4vh), 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    transition: color 180ms var(--ease-out), padding 240ms var(--ease-out);
  }

  .d-menu nav a::before {
    counter-increment: dm;
    content: counter(dm, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: none;
    opacity: 1;
    font-family: "Sohne", -apple-system, sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .d-menu nav a[aria-current="page"]::before {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
  }

  .d-menu nav a[aria-current="page"]::after {
    content: "You are here" / "";
    font-family: "Sohne", -apple-system, sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
  }

  @media (hover: hover) {
    .d-menu nav:hover a:not(:hover) {
      color: var(--ink-faint);
    }

    .d-menu nav a:hover {
      padding-left: 12px;
    }
  }

  .d-menu nav a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
  }

  .d-menu .sidebar-notice {
    margin: auto 0 0;
    padding-top: 28px;
    max-width: 44ch;
    font-size: 13px;
    color: var(--ink-muted);
  }

  .d-menu .sidebar-notice a {
    color: var(--ink);
  }

  .d-menu-art {
    position: relative;
    overflow: hidden;
    background: #FCFBF7 center / cover no-repeat;
  }

  .d-menu[data-art="index"] .d-menu-art { background-image: url(../img/imagery/hand-and-hummingbird.jpg); background-position: 60% 50%; }
  .d-menu[data-art="strategy"] .d-menu-art { background-image: url(../img/imagery/lighthouse.jpg); background-position: 51% 50%; }
  .d-menu[data-art="imagery"] .d-menu-art { background-image: url(../img/imagery/moonlit-coast.jpg); background-position: 44% 50%; }
  .d-menu[data-art="voice"] .d-menu-art { background-image: url(../img/imagery/screen-tunnel.jpg); background-position: 50% 50%; }
  .d-menu[data-art="downloads"] .d-menu-art { background-image: url(../img/imagery/wildflowers.jpg); background-position: 50% 50%; }

  /* Drawn pieces sit over the Eggshell ground and fade in for their page. */
  .d-art {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 240ms var(--ease-out);
  }

  .d-menu[data-art="logo"] .d-art-logo,
  .d-menu[data-art="color"] .d-art-color,
  .d-menu[data-art="typography"] .d-art-typography {
    opacity: 1;
  }

  .d-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Color: the palette's proportion bar, stood on end. */
  .d-art-color {
    display: flex;
    flex-direction: column;
  }

  .d-art-color span {
    position: relative;
    box-shadow: inset 0 1px 0 rgba(27, 24, 14, 0.12);
  }

  .d-art-color span:first-child {
    box-shadow: none;
  }

  .d-art-color b {
    position: absolute;
    left: 24px;
    bottom: 18px;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(27, 24, 14, 0.72);
  }

  .d-art-color .is-dark b {
    color: rgba(252, 251, 247, 0.78);
  }

  /* ---------- page frame ---------- */

  main {
    margin-left: 0;
    display: block;
  }

  .page {
    width: auto;
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--gut) calc(var(--gut) + var(--hpad));
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--hgap);
    row-gap: var(--gut);
  }

  .page > * {
    grid-column: 1 / -1;
  }

  /* Pairs of panels split on column 7: the left one's content starts on column 1, the right one's on column 7. */
  .page > .d-half:has(+ .d-half),
  .d-tiles > :first-child {
    grid-column: 1 / 7;
    margin-left: calc(-1 * var(--hpad));
    margin-right: var(--half-end);
    padding-inline: var(--hpad);
  }

  .page > .d-half + .d-half,
  .d-tiles > :last-child {
    grid-column: 7 / -1;
    margin-inline: calc(-1 * var(--hpad));
    padding-inline: var(--hpad);
  }

  /* ---------- colour-field opener ---------- */

  /* One flat field, running up behind the bar. Top row: kicker, lede, contents, on shared tops.
     Then a rule, and the lockup: the giant numeral with the title set on its baseline. */
  .hero {
    --ink: var(--field-ink);
    --ink-muted: var(--field-muted);
    --line: var(--field-line);
    --line-strong: var(--field-rule);
    --bg: var(--field);
    --num: min(26vw, calc(min(100svh, 920px) * 0.4));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(32px, 1fr) auto auto;
    column-gap: var(--hgap);
    width: auto;
    min-height: min(calc(72svh - var(--bar-h)), 640px);
    padding: clamp(28px, 3vw, 44px) var(--edge) clamp(26px, 2.6vw, 40px);
    background: var(--field);
    color: var(--ink);
  }

  .hero-inner {
    display: contents;
  }

  .hero-lede {
    grid-area: 1 / 1 / 2 / 7;
    max-width: 30em;
    margin: -5px 0 0;
    font-size: clamp(17px, 1.36vw, 20px);
    line-height: 1.5;
    color: var(--ink);
    text-wrap: pretty;
  }

  .d-contents {
    grid-area: 1 / 7 / 2 / 13;
    min-width: 0;
  }

  .d-contents-head {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
  }

  .d-contents ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-strong);
  }

  .d-contents li {
    border-bottom: 1px solid var(--line);
  }

  .d-contents a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 6px 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
    transition: padding-left 220ms var(--ease-out);
  }

  .d-contents-num {
    flex: none;
    min-width: 16px;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
  }

  .d-contents a::after {
    content: "\2193" / "";
    margin-left: auto;
    font-size: 12px;
    opacity: 0;
    transition: opacity 180ms var(--ease-out);
  }

  @media (hover: hover) {
    .d-contents a:hover {
      padding-left: 4px;
    }

    .d-contents a:hover::after {
      opacity: 1;
    }
  }

  .d-contents a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  /* The rule between the top row and the lockup, and the numeral under it, are quiet tones of the field,
     so the title carries the opener. */
  .hero {
    --field-tone: color-mix(in srgb, var(--field-ink) 20%, var(--field));
  }

  .hero-inner::after {
    content: "";
    grid-area: 3 / 1 / 4 / -1;
    height: 1px;
    margin-bottom: clamp(18px, 2vw, 30px);
    background: var(--field-tone);
  }

  /* The giant page numeral. */
  .hero-inner::before {
    color: var(--field-tone);
    content: var(--d-num) / "";
    grid-area: 4 / 1 / 5 / 7;
    align-self: last baseline;
    margin-left: -0.045em;
    font-family: "Meraki", serif;
    font-weight: 400;
    font-size: var(--num);
    line-height: 0.8;
    letter-spacing: -0.035em;
    font-variant-numeric: proportional-nums lining-nums;
    white-space: nowrap;
  }

  /* The title sits on the numeral's baseline, so the two read as one lockup; short titles set bigger. */
  .hero h1 {
    grid-area: 4 / 7 / 5 / 13;
    align-self: last baseline;
    margin: 0;
    font-size: calc(var(--num) * var(--h1-k, 0.24));
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  /* Report furniture: the page count, on the top line of the lockup. */
  .hero::after {
    content: "/ 07" / "";
    grid-area: 4 / 7 / 5 / 13;
    align-self: start;
    margin-top: calc(var(--num) * 0.06);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    /* Quiet like the numeral, a notch stronger so small type still reads. */
    color: color-mix(in srgb, var(--field-ink) 38%, var(--field));
  }

  &[data-page="strategy"] .hero::after {
    content: "Draft" / "";
  }

  /* A quiet entrance: the numeral rises, the title follows. After the index intro, never during it. */
  @media (prefers-reduced-motion: no-preference) {
    &:not(.lb-intro) .hero-inner::before {
      animation: d-rise 700ms var(--ease-out) both;
    }

    &:not(.lb-intro) .hero h1 {
      animation: d-rise 700ms var(--ease-out) 120ms both;
    }

    &.lb-intro .hero-inner::before,
    &.lb-intro .hero h1 {
      opacity: 0;
    }
  }

  /* ---------- section panels ---------- */

  .section {
    margin: 0 calc(-1 * var(--hpad));
    padding: var(--pad-y) var(--hpad);
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--hgap);
    align-items: start;
  }

  .d-head {
    grid-column: 1 / 7;
    align-self: stretch;
    min-width: 0;
  }

  .d-head-in {
    position: sticky;
    top: calc(var(--bar-h) + 40px);
  }

  .d-body {
    grid-column: 7 / -1;
    min-width: 0;
  }

  .section.d-duo {
    padding: 0;
    column-gap: var(--gut);
    align-items: stretch;
    background: none;
  }

  .d-duo > .d-head,
  .d-duo > .d-body {
    padding: var(--pad-y) var(--hpad);
  }

  .section:is(.d-stack, .d-half) > * {
    grid-column: 1 / -1;
  }

  /* A half next to a taller one keeps its title up top and lets its text settle to the foot, like a poster. */
  .section.d-half {
    align-content: space-between;
  }

  :is(.d-stack, .d-half) .d-head-in {
    position: static;
  }

  .section:is(.d-stack, .d-half):not(.d-duo) > .d-head {
    margin-bottom: clamp(32px, 4vw, 64px);
  }

  .section.d-duo:is(.d-stack, .d-half) {
    row-gap: var(--gut);
  }

  /* Lead: title on the left, the intro beside it, then the material runs the full width of the panel. */
  .d-lead > .d-body {
    display: contents;
  }

  .d-lead > .d-head {
    grid-column: 1 / 7;
    grid-row: 1 / span 2;
    margin-bottom: clamp(40px, 4.4vw, 72px);
  }

  .d-lead .d-head-in {
    position: static;
  }

  .d-lead > .d-body > * {
    grid-column: 1 / -1;
  }

  .d-lead > .d-body > p:not([class]):first-child,
  .d-lead > .d-body > p:not([class]):first-child + p:not([class]) {
    grid-column: 7 / -1;
    grid-row: 1;
  }

  .d-lead > .d-body > p:not([class]):first-child {
    margin-top: calc(32px + clamp(22px, 2.4vw, 36px));
  }

  .d-lead > .d-body > p:not([class]):first-child + p:not([class]) {
    grid-row: 2;
    margin-bottom: 0;
  }

  /* Halves are narrow: lists of cards and tiles run one to a row. */
  .d-half :is(.attr-grid, .tile-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Component grids share the page's gutter, so a 2-, 3- or 6-up grid in a body lands on its columns. */
  :is(.tile-grid, .swatch-grid, .dont-grid, .attr-grid, .spec-grid) {
    column-gap: var(--hgap);
  }

  /* Kicker: the number in a small circle, like a mark on a brochure panel. */
  .section .kicker {
    gap: 12px;
    margin: 0 0 clamp(22px, 2.4vw, 36px);
    color: var(--ink-muted);
  }

  .kicker-num {
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    font-size: 11px;
    line-height: 1;
  }

  .kicker-num::after {
    content: none;
  }

  .section h2 {
    margin: 0;
    font-size: clamp(34px, 3.7vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.016em;
    text-wrap: balance;
  }

  .d-body > :first-child {
    margin-top: 0;
  }

  .d-body > :last-child {
    margin-bottom: 0;
  }

  .d-body > p:not([class]) {
    font-size: 16px;
    line-height: 1.62;
    max-width: 60ch;
  }

  .d-body > p:not([class]):first-child {
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.5;
    color: var(--ink);
    max-width: 34em;
    margin-bottom: 22px;
  }

  .section .d-body > h3 {
    margin: clamp(44px, 4.4vw, 72px) 0 10px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: "Meraki", serif;
    font-weight: 400;
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  /* Söhne Halbfett is product UI only; emphasis inside the guidelines stays Kräftig. */
  .dont-grid figcaption strong,
  .swatch-name,
  .section .swatch p {
    font-weight: 500;
  }

  /* Components keep their own styling; corners come in to match the square panels. */
  :is(.tile, .swatch, .attr-card, .spec-tile, .boiler-panel, .dl-hero, .canvas, .brief-scene, .arc, .brief, .proportion, .placeholder, .post-strip, .post-strip img) {
    border-radius: var(--r);
  }

  .canvas,
  .post-strip {
    width: auto;
    margin: 28px 0 0;
  }

  .principles li {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 24px 0;
  }

  .principles li::before {
    content: counter(p, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    font-size: 11px;
    line-height: 1;
    color: var(--ink);
  }

  .principles h3 {
    margin: 3px 0 8px;
    font-family: "Meraki", serif;
    font-weight: 400;
    font-size: clamp(21px, 1.7vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .principles.is-display h3 {
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.015em;
  }

  .principles p {
    font-size: 14.5px;
  }

  .attr-card {
    padding: 26px 26px 28px;
    border: 0;
  }

  .attr-card h3 {
    font-size: clamp(21px, 1.6vw, 25px);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .section p.statement {
    margin: 0 0 36px;
    max-width: 13ch;
    font-size: clamp(38px, 4.6vw, 76px);
    line-height: 1.06;
    letter-spacing: -0.022em;
  }

  .section p.statement.is-wide {
    max-width: 18ch;
  }

  .d-body > .statement:not(:first-child) {
    margin-top: 8px;
  }

  .draft {
    margin: 0 calc(-1 * var(--hpad));
    padding: 22px var(--hpad);
    display: grid;
    grid-template-columns: calc(50% - var(--hgap) / 2) minmax(0, 1fr);
    column-gap: var(--hgap);
    border: 0;
    border-radius: 0;
    background: var(--g-egg);
    font-size: 13.5px;
  }

  .draft b {
    margin: 0;
  }

  /* Downloads opens on two poster tiles instead of a titled section. */
  .section.d-tiles {
    margin: 0;
    padding: 0;
    align-items: stretch;
    background: none;
  }

  .d-tiles > .dl-hero {
    min-height: clamp(260px, 26vw, 400px);
    margin-block: 0;
    padding-block: var(--pad-y);
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 36px;
    border: 0;
    border-radius: 0;
    background: var(--gbg);
  }

  .d-tiles .dl-hero p {
    flex: none;
    max-width: 30em;
    font-size: 16px;
    color: var(--ink-muted);
  }

  .d-tiles .dl-hero p strong {
    display: block;
    margin-bottom: 14px;
    font-family: "Meraki", serif;
    font-weight: 400;
    font-size: clamp(34px, 3.6vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--ink);
  }

  /* Download rows elsewhere sit on the grid: hairlines instead of an inset card, the buttons at the row's end. */
  .dl-hero:not(.d-tiles > *) {
    padding: 18px 0;
    border: 0;
    border-block: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }

  .d-tiles .button {
    padding: 13px 22px;
  }

  /* ---------- pager and folio: a ruled close, straight on the page ground ---------- */

  .pager {
    margin: 0;
    padding: clamp(56px, 6vw, 96px) 0 0;
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--hgap);
  }

  .pager a {
    grid-row: 1;
    grid-column: 1 / 7;
    max-width: none;
    margin: 0;
    gap: 10px;
    color: var(--ink);
    text-align: left;
  }

  .pager a:is(.next, :only-child) {
    grid-column: 7 / -1;
  }

  .pager a .label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-muted);
  }

  /* A dot of the next page's colour: the one colour down here, and it means "this is where you're going". */
  .pager a.next .label::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--next);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .pager a .dest {
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.005em;
  }

  /* Sized so the longest destination ("04 Typography →") holds one line in its column. */
  .pager a:is(.next, :only-child) .dest {
    font-size: clamp(44px, 5.4vw, 96px);
    line-height: 1.05;
    letter-spacing: -0.028em;
    white-space: nowrap;
  }

  .d-pager-num {
    margin-right: 0.28em;
    font-variant-numeric: lining-nums;
  }

  .pager a.next .dest::after,
  .pager a:only-child:not(.next) .dest::before {
    display: inline-block;
    transition: transform 200ms var(--ease-out);
  }

  .pager a.next .dest::after {
    content: "\2192" / "";
    margin-left: 0.2em;
  }

  .pager a:only-child:not(.next) .dest::before {
    content: "\2190" / "";
    margin-right: 0.24em;
  }

  .pager a.next:hover .dest,
  .pager a:only-child:hover .dest {
    opacity: 1;
  }

  .pager a.next:hover .dest::after {
    transform: translateX(0.12em);
  }

  .pager a:only-child:not(.next):hover .dest::before {
    transform: translateX(-0.12em);
  }

  .pager a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 6px;
  }

  /* The folio follows the pager: a hairline, then "03 — Color · Littlebird brand guidelines". */
  footer {
    margin: 0;
    padding: clamp(48px, 5vw, 80px) 0 28px;
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: var(--hgap);
    row-gap: 8px;
    border: 0;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
  }

  footer::before {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    margin-bottom: 6px;
    background: var(--line-strong);
  }

  footer > span:first-child {
    grid-column: 1 / 7;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  footer > a {
    grid-column: 7 / -1;
    justify-self: end;
  }

  /* ---------- type hierarchy: one ruled scale instead of cards ---------- */

  /* Role | specimen at true size | typeface, size, leading, tracking. The specimens step down the page,
     and the values line up in columns, so the hierarchy reads both ways. */
  .spec-grid.d-scale {
    display: grid;
    grid-template-columns: var(--cols);
    gap: 0 var(--hgap);
    margin-top: 14px;
    border-bottom: 1px solid var(--line);
    counter-reset: role;
  }

  .section p.d-scale-note {
    margin: clamp(36px, 3.6vw, 56px) 0 0;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
  }

  .d-scale-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
  }

  .d-scale .spec-tile {
    counter-increment: role;
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
    row-gap: 10px;
    min-height: 0;
    padding: clamp(24px, 2.6vw, 38px) 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }

  .d-scale-head + .spec-tile {
    border-top: 0;
  }

  .d-scale-head > :nth-child(1),
  .d-scale .spec-pill { grid-column: 1 / 3; }
  .d-scale-head > :nth-child(2),
  .spec-tile p.spec-sample,
  .spec-tile p.spec-note { grid-column: 3 / 7; }
  .d-scale-head > :nth-child(3),
  .d-scale-spec > div:nth-child(1) dd { grid-column: 7 / 9; }
  .d-scale-head > :nth-child(4),
  .d-scale-spec > div:nth-child(2) dd { grid-column: 9 / 10; }
  .d-scale-head > :nth-child(5),
  .d-scale-spec > div:nth-child(3) dd { grid-column: 10 / 11; }
  .d-scale-head > :nth-child(6),
  .d-scale-spec > div:nth-child(4) dd { grid-column: 11 / 13; }

  .d-scale .spec-pill {
    grid-row: 1;
    align-self: baseline;
    display: flex;
    gap: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.3;
    letter-spacing: 0;
  }

  .d-scale .spec-pill::before {
    content: counter(role, decimal-leading-zero);
    font-size: 11px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
  }

  .d-scale .spec-line {
    display: none;
  }

  .spec-tile p.spec-sample {
    grid-row: 1;
    margin: 0;
    padding: 0;
    max-width: 30em;
  }

  .spec-tile p.spec-note {
    grid-row: 2;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
  }

  .d-scale-spec,
  .d-scale-spec > div {
    display: contents;
  }

  /* The column heads name the values on wide screens; the dt labels stay for screen readers. */
  .d-scale-spec dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .d-scale-spec dd {
    grid-row: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }


  /* Narrow: each role stacks — label, specimen, note, then the values in one labelled line. */
  @media (max-width: 860px) {
    .spec-grid.d-scale {
      display: block;
    }

    .d-scale-head {
      display: none;
    }

    .d-scale .spec-tile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .d-scale .spec-tile:first-of-type {
      border-top: 1px solid var(--ink);
    }

    .d-scale-spec {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 18px;
      order: 1;
      margin: 0;
    }

    .spec-tile p.spec-sample {
      order: 2;
    }

    .spec-tile p.spec-note {
      order: 3;
    }

    .d-scale-spec > div {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .d-scale-spec dt {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.02em;
      color: var(--ink-muted);
    }

    .d-scale-spec dd {
      font-size: 13px;
    }
  }

  /* ---------- tablet ---------- */

  @media (max-width: 1099px) {
    .section > :is(.d-head, .d-body),
    .d-lead > .d-body > * {
      grid-column: 1 / -1;
    }

    .draft {
      grid-template-columns: minmax(0, 1fr);
    }

    .d-head-in {
      position: static;
    }

    .d-lead > .d-head,
    .d-lead > .d-body > p:not([class]):first-child,
    .d-lead > .d-body > p:not([class]):first-child + p:not([class]) {
      grid-column: 1 / -1;
      grid-row: auto;
    }

    .d-lead > .d-body > p:not([class]):first-child {
      margin-top: 0;
    }

    .d-lead > .d-body > p:not([class]):first-child + p:not([class]) {
      margin-bottom: 16px;
    }

    .section:not(.d-duo) > .d-head {
      margin-bottom: clamp(28px, 4vw, 48px);
    }

    .section.d-duo {
      row-gap: var(--gut);
    }

    .draft b {
      margin-bottom: 6px;
    }

  }

  @media (max-width: 1099px) and (min-width: 700px) {
    .hero {
      --num: min(30vw, calc(min(100svh, 920px) * 0.42));
      grid-template-rows: auto auto minmax(32px, 1fr) auto auto;
    }

    .hero-lede { grid-area: 1 / 1 / 2 / 7; }
    .d-contents { grid-area: 1 / 7 / 2 / 13; }
    .hero-inner::after { grid-area: 4 / 1 / 5 / -1; }
    .hero-inner::before { grid-area: 5 / 1 / 6 / 7; }
    .hero h1,
    .hero::after { grid-area: 5 / 7 / 6 / 13; }
  }

  /* Short landscape screens (1280×720): tighter rows and a smaller numeral keep the lockup on screen. */
  @media (max-height: 820px) and (min-width: 700px) {
    .hero {
      --num: min(26vw, calc(min(100svh, 920px) * 0.38));
      padding-top: 24px;
      padding-bottom: 22px;
    }

    .d-contents a {
      padding: 4px 0;
    }

    .hero-inner::after {
      margin-bottom: 16px;
    }
  }

  @media (max-width: 900px) {
    .sidebar-tag {
      display: none;
    }

    .sidebar-foot {
      margin-top: 0;
      gap: 18px;
    }

    .d-menu {
      grid-template-columns: minmax(0, 1fr);
    }

    .d-menu-art {
      display: none;
    }
  }

  /* ---------- phone ---------- */

  @media (max-width: 699px) {
    --bar-h: 54px;

    .sidebar {
      gap: 12px;
    }

    .sidebar-logo span {
      font-size: 19px;
    }

    .d-where {
      display: none;
    }

    /* Icon-only foot links; the words stay as their accessible names. */
    .sidebar-foot {
      gap: 4px;
    }

    .sidebar-foot a,
    .sidebar-foot button {
      width: 36px;
      height: 36px;
      justify-content: center;
      padding: 0;
      font-size: 0;
      gap: 0;
    }

    .sidebar-foot svg {
      width: 16px;
      height: 16px;
    }

    .d-index-btn {
      height: 36px;
      padding: 0 15px 0 13px;
      margin-left: 4px;
    }

    /* A shorter field: kicker and lede, the rule, then the numeral with the title stacked under it. */
    .hero {
      --num: 36vw;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto minmax(28px, 1fr) auto auto auto;
      min-height: min(calc(52svh - var(--bar-h)), 420px);
      padding-top: 22px;
      padding-bottom: 26px;
    }

    .hero-lede { grid-area: 1 / 1 / 2 / -1; margin: 0; font-size: 16px; }
    .d-contents { display: none; }
    .hero-inner::after { grid-area: 4 / 1 / 5 / -1; margin-bottom: 16px; }
    .hero-inner::before { grid-area: 5 / 1 / 6 / 2; align-self: end; }
    .hero::after { grid-area: 5 / 2 / 6 / 3; margin-top: 4px; }

    .hero h1 {
      grid-area: 6 / 1 / 7 / -1;
      align-self: start;
      margin-top: 14px;
      font-size: calc(var(--num) * var(--h1-k, 0.24) * 1.5);
      line-height: 1.02;
    }

    /* One column of panels: pairs and tiles stack, still bleeding to the gutter. */
    .page > .d-half:has(+ .d-half),
    .page > .d-half + .d-half,
    .d-tiles > :first-child,
    .d-tiles > :last-child {
      grid-column: 1 / -1;
      margin-inline: calc(-1 * var(--hpad));
    }

    .section h2 {
      font-size: clamp(30px, 8.8vw, 38px);
    }

    .section.d-tiles {
      row-gap: var(--gut);
    }

    .d-menu nav a,
    .d-menu nav a[aria-current="page"] {
      grid-template-columns: 46px minmax(0, 1fr);
      font-size: clamp(22px, 6.6vw, 30px);
    }

    .d-menu nav a[aria-current="page"]::after {
      display: none;
    }

    .pager {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 36px;
    }

    /* Next leads on a phone; the way back follows it. */
    .pager a,
    .pager a:is(.next, :only-child) {
      grid-row: auto;
      grid-column: 1;
      order: 2;
    }

    .pager a.next {
      order: 1;
    }

    .pager a:is(.next, :only-child) .dest {
      font-size: clamp(36px, 11vw, 56px);
    }

    footer {
      grid-template-columns: minmax(0, 1fr);
    }

    footer > span:first-child,
    footer > a {
      grid-column: 1;
      justify-self: start;
    }
  }

  /* ---------- page: Foundation ---------- */

  /* A manifesto in five movements, each in the form of its content instead of one title-left, text-right split:
     01 the demo gets the panel's full width; 02 is the page's one statement, on its one accent (Midnight, Jordy
     Blue's dark partner); 03 the idiom, then its three traits as three ruled columns; 04 five theorems, the
     statement big and the proof small beside it on the main axis; 05 closes on the brief, the image at full bleed.
     Everything sits on the page's 12 columns (--cols, --hgap); site.js only names the sections. */
  &[data-page="index"] {
    /* ---------- 01 The input: the demo runs the panel's full width ---------- */

    .section.ix-input > .d-body {
      display: contents;
    }

    .section.ix-input > .d-body > p:first-child {
      grid-column: 7 / 13;
      grid-row: 1;
      align-self: start;
    }

    /* The stage bleeds to the panel's edges; its padding puts its own 12 columns back on the page's. */
    .section.ix-input .arc {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
      align-items: center;
      margin: 0 calc(-1 * var(--hpad));
      padding: clamp(44px, 4.8vw, 84px) var(--hpad);
      border: 0;
      border-radius: 0;
      /* The photo's own bird (mid-frame) is moved to where the flight path starts, so it carries the day across. */
      background-size: cover, 140% auto;
      background-position: 0 0, 13% 54%;
    }

    /* Fragments across eight columns, the flight path through the ninth, the day in order on the last three. */
    .ix-input .arc-scatter {
      grid-column: 1 / 9;
      height: clamp(380px, 33vw, 560px);
    }

    .ix-input .arc-out {
      grid-column: 10 / 13;
    }

    .ix-input .arc-card {
      width: clamp(190px, 15.4vw, 236px);
      font-size: 13px;
    }

    .ix-input .arc-card strong {
      font-size: 13.5px;
    }

    /* Same cards, same order, spread over the room they now have. (A phone keeps the component's own positions.) */
    @media (min-width: 700px) {
      .ix-input .arc-card:nth-child(1) { left: 0; top: 3%; }
      .ix-input .arc-card:nth-child(2) { left: 42%; top: 0; }
      .ix-input .arc-card:nth-child(3) { left: 10%; top: 36%; }
      .ix-input .arc-card:nth-child(4) { left: 56%; top: 42%; }
      .ix-input .arc-card:nth-child(5) { left: 24%; top: 73%; }
    }

    .ix-input .arc-path {
      width: clamp(64px, 7.4vw, 112px);
      height: auto;
      aspect-ratio: 64 / 60;
      top: -8px;
    }

    .ix-input .arc-result {
      padding: 18px 20px 8px;
    }

    .ix-input .arc-result li {
      padding: 12px 0;
      font-size: 12.5px;
    }

    .ix-input .arc-result li strong {
      font-size: 14px;
    }

    .section.ix-input .caption {
      grid-column: 7 / 13;
      max-width: 44ch;
      margin: 20px 0 0;
      font-size: 15px;
      line-height: 1.55;
    }

    /* ---------- 02 What it is: one statement ---------- */

    .ix-what > .d-body {
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
    }

    .section p.ix-statement {
      grid-column: 1 / 12;
      max-width: none;
      margin: 0 0 clamp(40px, 4.8vw, 84px);
      font-family: "Meraki", serif;
      font-weight: 400;
      font-size: clamp(26px, 2.9vw, 46px);
      line-height: 1.14;
      letter-spacing: -0.012em;
      color: var(--ink);
      text-wrap: pretty;
    }

    .ix-statement-does {
      color: var(--ink-muted);
    }

    .ix-what > .d-body > p:not(.ix-statement) {
      grid-column: 7 / 11;
      max-width: none;
      margin: 0;
      font-size: 16px;
      line-height: 1.6;
    }

    /* ---------- 03 Why a bird: the idiom, then three traits in three ruled columns ---------- */

    .ix-bird .principles {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 40px var(--hgap);
      margin: 0;
      border-top: 0;
    }

    .ix-bird .principles li {
      display: block;
      padding: 16px 0 0;
      border-top: 1px solid var(--ink);
      border-bottom: 0;
    }

    /* The list is numbered for assistive tech already; the label is decoration. */
    .ix-bird .principles li::before {
      content: counter(p, decimal-leading-zero) / "";
      display: block;
      width: auto;
      height: auto;
      margin: 0 0 clamp(32px, 4vw, 64px);
      padding: 0;
      border: 0;
      border-radius: 0;
      font-family: "Sohne", -apple-system, sans-serif;
      font-weight: 500;
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }

    .ix-bird .principles h3 {
      margin: 0 0 14px;
      font-size: clamp(26px, 2.5vw, 40px);
      line-height: 1.06;
      letter-spacing: -0.018em;
      text-wrap: balance;
    }

    .ix-bird .principles p {
      max-width: 34ch;
      font-size: 15.5px;
      line-height: 1.6;
    }

    /* ---------- 04 Visual principles: five theorems ---------- */

    /* Each is one ruled row: its number in the first column, the statement big on 2 / 7, the proof small on the
       main axis, all on the statement's first baseline. */
    .ix-theorems .principles {
      margin: 0;
      border-top: 0;
      border-bottom: 1px solid var(--line-strong);
    }

    .ix-theorems .principles li {
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
      align-items: baseline;
      padding: clamp(26px, 2.8vw, 44px) 0 clamp(30px, 3.2vw, 52px);
      border-top: 1px solid var(--line-strong);
      border-bottom: 0;
    }

    .ix-theorems .principles li:first-child {
      border-top-color: var(--ink);
    }

    .ix-theorems .principles li > div {
      display: contents;
    }

    .ix-theorems .principles li::before {
      content: counter(p, decimal-leading-zero) / "";
      grid-column: 1 / 2;
      display: block;
      width: auto;
      height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      font-family: "Sohne", -apple-system, sans-serif;
      font-weight: 500;
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }

    /* Sized so each sentence of a two-sentence theorem holds one line on 2 / 7. */
    .ix-theorems .principles h3 {
      grid-column: 2 / 7;
      margin: 0;
      font-size: clamp(26px, 2.5vw, 40px);
      line-height: 1.08;
      letter-spacing: -0.018em;
      text-wrap: balance;
    }

    .ix-theorems .principles p {
      grid-column: 7 / 11;
      max-width: none;
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
    }

    /* ---------- 05 The brief: the image at full bleed ---------- */

    .ix-brief .brief-card {
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
      margin: 0;
    }

    /* Runs to the panel's edges; the padding puts the line back on the page's columns, up in the sky. */
    .ix-brief .brief-scene {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
      align-content: start;
      aspect-ratio: 16 / 9;
      min-height: 0;
      margin: 0 calc(-1 * var(--hpad));
      padding: clamp(32px, 3.8vw, 64px) var(--hpad);
      border-radius: 0;
      background-position: 50% 50%;
    }

    .ix-brief .brief-scene .brief-line {
      grid-column: 1 / 11;
      max-width: none;
      font-size: clamp(28px, 3.4vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.018em;
    }

    .ix-brief .brief-card figcaption {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
      align-items: start;
      margin: 20px 0 0;
      font-size: 14px;
    }

    .ix-brief .brief-card figcaption span:first-child {
      grid-column: 1 / 6;
      max-width: 48ch;
    }

    /* The copy button is the point of the panel: the one filled element in it. */
    .ix-brief .tile-btn {
      grid-column: 7 / 13;
      justify-self: end;
      height: 40px;
      gap: 8px;
      padding: 0 18px 0 15px;
      border: 0;
      border-radius: 999px;
      background: var(--ink);
      color: var(--gbg);
      font-size: 13px;
      transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
    }

    .ix-brief .tile-btn:hover {
      background: var(--ink);
      opacity: 0.86;
    }

    .ix-brief .tile-btn:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    .ix-brief .tile-btn svg {
      width: 14px;
      height: 14px;
    }

    /* ---------- tablet ---------- */

    @media (max-width: 1099px) {
      .section.ix-input > .d-body > p:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
      }

      .ix-input .arc-scatter {
        grid-column: 1 / 8;
      }

      .ix-input .arc-out {
        grid-column: 9 / 13;
      }

      .section.ix-input .arc {
        background-position: 0 0, 34% 66%;
      }

      .section p.ix-statement {
        grid-column: 1 / -1;
      }

      .ix-what > .d-body > p:not(.ix-statement) {
        grid-column: 7 / 13;
      }

      .ix-theorems .principles li {
        row-gap: 14px;
      }

      .ix-theorems .principles h3 {
        grid-column: 2 / 13;
      }

      .ix-theorems .principles p {
        grid-column: 2 / 10;
      }

      .ix-brief .brief-card figcaption span:first-child {
        grid-column: 1 / 8;
      }
    }

    @media (max-width: 899px) {
      .ix-input .arc-card {
        width: 176px;
      }
    }

    /* ---------- phone ---------- */

    @media (max-width: 699px) {
      /* One column: the stage goes back to the component's own stacked layout and card positions. */
      .section.ix-input .arc {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        padding: 28px var(--hpad);
        background-size: cover;
        background-position: center;
      }

      .ix-input .arc-scatter,
      .ix-input .arc-out {
        grid-column: 1;
      }

      .ix-input .arc-scatter {
        height: 356px;
      }

      .section.ix-input .caption,
      .ix-what > .d-body > p:not(.ix-statement) {
        grid-column: 1 / -1;
      }

      .ix-bird .principles {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
      }

      .ix-bird .principles li::before {
        margin-bottom: 18px;
      }

      .section p.ix-statement {
        font-size: clamp(24px, 6.6vw, 30px);
        line-height: 1.14;
      }

      .ix-theorems .principles li {
        display: block;
      }

      .ix-theorems .principles li::before {
        margin-bottom: 14px;
      }

      .ix-theorems .principles h3 {
        margin-bottom: 12px;
        font-size: clamp(26px, 7.4vw, 30px);
      }

      .ix-brief .brief-scene {
        aspect-ratio: auto;
        min-height: 520px;
        padding: 22px var(--hpad);
      }

      .ix-brief .brief-scene .brief-line {
        grid-column: 1 / -1;
        font-size: 22px;
        line-height: 1.16;
      }

      .ix-brief .brief-card figcaption span:first-child {
        grid-column: 1 / -1;
        margin-bottom: 16px;
      }

      .ix-brief .tile-btn {
        grid-column: 1 / -1;
        justify-self: start;
      }
    }
  }

  /* ---------- page: Imagery ---------- */

  /* A picture magazine: the photographs get the scale and the rhythm, captions hang off them, and everything
     lands on the page's 12 columns (--cols, --hgap). site.js does the regrouping. */
  &[data-page="imagery"] {
    --im-space: clamp(64px, 7vw, 120px);
    --im-rule: 1px solid var(--line-strong);

    .section :is(.tile, .post-strip img) {
      border-radius: var(--r);
    }

    /* Caption type, shared by every spread and row. */
    .im-cap h3 {
      margin: 0 0 10px;
      padding: 0;
      border: 0;
      font-family: "Meraki", serif;
      font-weight: 400;
      font-size: clamp(23px, 1.9vw, 30px);
      line-height: 1.12;
      letter-spacing: -0.012em;
      text-wrap: balance;
    }

    .im-cap p {
      margin: 0;
      max-width: 44ch;
      font-size: 15px;
      line-height: 1.55;
      color: var(--ink-muted);
    }

    .im-cap p + p {
      margin-top: 8px;
    }

    /* ---------- 01 Visual elements: three spreads ---------- */

    .im-spread {
      display: grid;
      grid-template-columns: var(--cols);
      gap: var(--hgap);
      align-items: start;
      margin-top: var(--im-space);
    }

    .im-elements .im-spread:first-of-type {
      margin-top: clamp(32px, 4.4vw, 72px);
    }

    .im-spread .tile-grid {
      display: contents;
    }

    .im-spread .tile {
      aspect-ratio: 16 / 9;
    }

    /* The caption sits on the image it introduces. */
    .im-spread .im-cap {
      grid-row: 1;
      align-self: end;
      padding-bottom: 6px;
    }

    .im-spread .tile.im-lead {
      aspect-ratio: auto;
      align-self: stretch;
    }

    .im-lead img {
      position: absolute;
      inset: 0;
    }

    /* Bird: the lead image across eight columns, three frames down the last four. */
    .im-spread--bird .im-cap { grid-column: 1 / 7; }
    .im-spread--bird .tile:nth-child(1) { grid-column: 1 / 9; grid-row: 2 / 4; }
    .im-spread--bird .tile:nth-child(2) { grid-column: 9 / 13; grid-row: 1; }
    .im-spread--bird .tile:nth-child(3) { grid-column: 9 / 13; grid-row: 2; }
    .im-spread--bird .tile:nth-child(4) { grid-column: 9 / 13; grid-row: 3; }

    /* Rest: the mirror. */
    .im-spread--rest .im-cap { grid-column: 5 / 11; }
    .im-spread--rest .tile:nth-child(1) { grid-column: 5 / 13; grid-row: 2 / 4; }
    .im-spread--rest .tile:nth-child(2) { grid-column: 1 / 5; grid-row: 1; }
    .im-spread--rest .tile:nth-child(3) { grid-column: 1 / 5; grid-row: 2; }
    .im-spread--rest .tile:nth-child(4) { grid-column: 1 / 5; grid-row: 3; }

    /* Vast: one wide scene runs out to the panel's edges, the rest follow as a strip of three. */
    .im-spread--vast .im-cap { grid-column: 1 / 7; }

    .im-spread--vast .tile:nth-child(1) {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: stretch;
      margin-inline: calc(-1 * var(--hpad));
      aspect-ratio: 12 / 5;
      border-inline: 0;
      border-radius: 0;
    }

    .im-spread--vast .tile:nth-child(1) img {
      position: static;
      object-position: 50% 92%;
    }

    .im-spread--vast .tile:nth-child(2) { grid-column: 1 / 5; grid-row: 3; }
    .im-spread--vast .tile:nth-child(3) { grid-column: 5 / 9; grid-row: 3; }
    .im-spread--vast .tile:nth-child(4) { grid-column: 9 / 13; grid-row: 3; }

    /* ---------- 02 Choosing a type: a decision guide ---------- */

    .im-types .attr-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 48px var(--hgap);
      margin-top: 0;
      counter-reset: im-type;
    }

    .im-types .attr-card {
      display: flex;
      flex-direction: column;
      padding: 16px 0 0;
      border: 0;
      border-top: 1px solid var(--ink);
      border-radius: 0;
      background: none;
      counter-increment: im-type;
    }

    .im-types .attr-card::before {
      content: counter(im-type, decimal-leading-zero) / "";
      margin-bottom: clamp(36px, 4.4vw, 72px);
      font-family: "Meraki", serif;
      font-weight: 400;
      font-size: clamp(34px, 3vw, 46px);
      line-height: 1;
      letter-spacing: -0.02em;
      font-variant-numeric: lining-nums;
    }

    .im-types .attr-card h3 {
      margin: 0 0 14px;
      font-size: clamp(24px, 2.1vw, 32px);
      line-height: 1.1;
      letter-spacing: -0.014em;
    }

    .im-types .attr-card p {
      max-width: 38ch;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--ink-muted);
    }

    .im-best {
      display: block;
      margin-bottom: 10px;
      font-size: clamp(16px, 1.25vw, 18px);
      line-height: 1.42;
      color: var(--ink);
    }

    .im-types .chips {
      margin-top: auto;
      padding-top: 22px;
    }

    /* ---------- 03 Applications: a pair at scale ---------- */

    .im-apps .tile-grid {
      grid-template-columns: var(--cols);
      grid-template-rows: auto auto;
      gap: 0 var(--hgap);
      margin-top: 0;
    }

    .im-apps figure {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      margin: 0;
    }

    .im-apps figure:first-child { grid-column: 1 / 9; }
    .im-apps figure:last-child { grid-column: 9 / 13; }

    /* The icon tile takes the share image's height (its inline ratio is only the fallback). */
    .im-apps figure:last-child .tile {
      aspect-ratio: auto !important;
    }

    .im-apps figcaption {
      margin-top: 14px;
    }

    /* ---------- 04 Social ---------- */

    /* Caption rows: a rule, the name on column 1, the note on the main axis. */
    .im-social .im-cap--row {
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
      align-items: baseline;
      margin-top: var(--im-space);
      padding-top: 18px;
      border-top: var(--im-rule);
    }

    /* The first row follows the section head, which already carries its own space. */
    .im-social .d-body > .im-cap--row:first-of-type {
      margin-top: 0;
    }

    .im-cap--row h3 { grid-column: 1 / 7; margin: 0; }
    .im-cap--row p { grid-column: 7 / 13; }

    /* The carousel runs across the whole panel, the way the frame is built: one continuous image. */
    .post-strip.im-carousel {
      width: auto;
      margin: clamp(24px, 2.6vw, 40px) calc(-1 * var(--hpad)) 0;
      padding: 0;
      border-radius: 0;
      overflow-x: auto;
    }

    .im-carousel img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0;
      outline: 0;
    }

    .im-carousel + .caption {
      grid-column: 1 / 7;
      margin-top: 14px;
    }

    /* The four principles: a row of ruled columns. */
    .im-principles.attr-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 36px var(--hgap);
      margin-top: clamp(40px, 4.4vw, 72px);
    }

    .im-principles .attr-card {
      padding: 16px 0 0;
      border: 0;
      border-top: 1px solid var(--ink);
      border-radius: 0;
      background: none;
    }

    .im-principles .attr-card h3 {
      margin: 0 0 10px;
      font-size: clamp(20px, 1.6vw, 24px);
      line-height: 1.15;
    }

    .im-principles .attr-card p {
      max-width: 36ch;
      font-size: 14.5px;
      line-height: 1.55;
    }

    /* Post rows: the caption on the first two columns, five posts on two columns each. */
    .im-postrow {
      display: grid;
      grid-template-columns: var(--cols);
      column-gap: var(--hgap);
      align-items: start;
      margin-top: var(--im-space);
      padding-top: 18px;
      border-top: var(--im-rule);
    }

    .im-postrow + .im-postrow {
      margin-top: clamp(40px, 4.4vw, 72px);
    }

    .im-postrow .im-cap {
      grid-column: 1 / 3;
    }

    .im-postrow .im-cap h3 {
      font-size: clamp(21px, 1.6vw, 26px);
    }

    .im-postrow .im-cap p {
      font-size: 14px;
    }

    .post-strip.im-posts {
      grid-column: 3 / 13;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      column-gap: var(--hgap);
      width: auto;
      margin: 0;
      padding: 0;
      overflow: visible;
      border-radius: 0;
    }

    .im-posts img {
      width: 100%;
      height: auto;
    }

    /* ---------- 05 Composition library: a contact sheet ---------- */

    /* Download-all bar: a ruled row on the section's own columns. */
    .dl-hero.im-dlbar {
      display: grid;
      grid-template-columns: var(--cols);
      gap: 16px var(--hgap);
      align-items: baseline;
      margin: 0;
      padding: 18px 0;
      border: 0;
      border-block: var(--im-rule);
      border-radius: 0;
      background: none;
    }

    .im-dlbar p {
      grid-column: 1 / 7;
      min-width: 0;
      margin: 0;
      font-size: 15px;
    }

    .im-dlbar .button {
      grid-column: 7 / 13;
      justify-self: end;
    }

    .im-sheet.tile-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 22px var(--hgap);
      margin-top: clamp(28px, 3vw, 44px);
    }

    .im-frame .tile {
      aspect-ratio: 16 / 9;
    }

    .section .im-frame-label {
      display: flex;
      gap: 10px;
      max-width: none;
      margin: 9px 0 0;
      font-weight: 500;
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: var(--ink-muted);
    }

    .im-frame-num {
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }

    /* ---------- tablet ---------- */

    @media (max-width: 1099px) {
      .im-spread--bird .im-cap { grid-column: 1 / 9; }
      .im-spread--rest .im-cap { grid-column: 5 / 13; }
      .im-spread--vast .im-cap { grid-column: 1 / 9; }

      .im-social .im-cap--row h3,
      .im-social .im-cap--row p {
        grid-column: 1 / -1;
      }

      .im-cap--row h3 {
        margin-bottom: 8px;
      }

      .im-carousel + .caption {
        grid-column: 1 / -1;
      }

      /* The carousel keeps a readable height and scrolls, like it does on a phone. */
      .post-strip.im-carousel {
        padding: 0 var(--hpad) 10px;
        scroll-padding-inline: var(--hpad);
      }

      .im-carousel img {
        width: auto;
        max-width: none;
        height: clamp(280px, 42vw, 400px);
        border-radius: var(--r);
      }

      .im-principles.attr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .im-postrow .im-cap {
        grid-column: 1 / -1;
        margin-bottom: 20px;
      }

      .post-strip.im-posts {
        grid-column: 1 / -1;
        display: flex;
        gap: var(--hgap);
        margin-inline: calc(-1 * var(--hpad));
        padding: 0 var(--hpad) 10px;
        overflow-x: auto;
        scroll-padding-inline: var(--hpad);
      }

      .im-posts img {
        flex: none;
        width: clamp(220px, 30vw, 280px);
      }
    }

    @media (max-width: 899px) {
      .im-types .attr-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .im-types .attr-card::before {
        margin-bottom: 24px;
      }
    }

    /* ---------- phone ---------- */

    @media (max-width: 699px) {
      .im-spread {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .im-spread .im-cap,
      .im-spread .tile:is(:nth-child(1), :nth-child(4)) {
        grid-column: 1 / -1;
      }

      .im-spread .im-cap { grid-row: 1; }
      .im-spread .tile:nth-child(1) { grid-row: 2; aspect-ratio: 16 / 9; }
      .im-spread .tile:nth-child(2) { grid-column: 1; grid-row: 3; }
      .im-spread .tile:nth-child(3) { grid-column: 2; grid-row: 3; }
      .im-spread .tile:nth-child(4) { grid-row: 4; }

      .im-lead img {
        position: static;
      }

      .im-spread--vast .tile:nth-child(1) {
        aspect-ratio: 16 / 9;
      }

      .im-apps .tile-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
      }

      .im-apps figure:is(:first-child, :last-child) {
        grid-column: 1;
        grid-row: auto;
        display: block;
      }

      .im-principles.attr-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .im-dlbar p,
      .im-dlbar .button {
        grid-column: 1 / -1;
        justify-self: start;
      }

      .im-sheet.tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
      }
    }
  }

  /* ---------- page: Voice ---------- */

  /* A voice page should sound like the brand, so each section takes the form of its content instead of the
     same title-left, text-right split: 01 is the page's one statement, 02 three ruled columns, 03 a 2×2 of
     principles, 04 a ruled comparison, 05 the two boilerplates side by side (the page's one tint), 06 an
     editorial list with each theme in the margin.
     Everything sits on the shared 12-column grid (gap --hgap). A full-width body lays out its own 12 columns,
     which land on the panel's; column 7 is the main axis, so the comparison's second column, the long
     boilerplate and the lines all start where the intro text does. */
  &[data-page="voice"] {
    --v-grid: repeat(12, minmax(0, 1fr));

    /* ---------- 01 · the feeling: one statement ---------- */

    .d-voice-feeling > .d-body {
      display: grid;
      grid-template-columns: var(--v-grid);
      column-gap: var(--hgap);
      align-items: start;
    }

    .section p.d-voice-statement {
      grid-column: 1 / 13;
      max-width: 28ch;
      margin: 0 0 clamp(36px, 4.4vw, 76px);
      font-family: "Meraki", serif;
      font-weight: 400;
      font-size: clamp(36px, 4.2vw, 72px);
      line-height: 1.06;
      letter-spacing: -0.018em;
      color: var(--ink);
      text-wrap: balance;
    }

    .d-voice-feeling > .d-body > p:not([class]) {
      grid-column: 10 / 13;
      max-width: 30em;
      margin: 0;
      font-size: 16.5px;
      line-height: 1.58;
    }

    .d-voice-feeling > .d-body > .d-voice-statement + p {
      grid-column: 7 / 10;
      color: var(--ink);
    }

    /* ---------- 02 · attributes: three ruled columns of four, no cards ---------- */

    .attr-grid {
      counter-reset: attr;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 40px var(--hgap);
      margin: 0;
    }

    .attr-card {
      counter-increment: attr;
      padding: 16px 0 0;
      border: 0;
      border-top: 1px solid var(--ink);
      border-radius: 0;
      background: none;
    }

    .attr-card::before {
      content: counter(attr, decimal-leading-zero) / "";
      display: block;
      margin-bottom: clamp(32px, 4vw, 64px);
      font-family: "Sohne", -apple-system, sans-serif;
      font-weight: 500;
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
      color: var(--ink);
    }

    .attr-card h3 {
      margin: 0 0 16px;
      font-family: "Meraki", serif;
      font-weight: 400;
      font-size: clamp(30px, 3vw, 46px);
      line-height: 1.04;
      letter-spacing: -0.018em;
      text-wrap: balance;
    }

    .attr-card p {
      max-width: 34ch;
      font-size: 15.5px;
      line-height: 1.6;
    }

    /* ---------- 03 · how we sound: a 2×2 of principles, three columns each ---------- */

    .principles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(36px, 3.4vw, 56px) var(--hgap);
      display: grid;
      margin: 0;
      border-top: 0;
    }

    .principles li {
      display: block;
      padding: 16px 0 0;
      border-top: 1px solid var(--line-strong);
      border-bottom: 0;
    }

    /* The list is already numbered for assistive tech; the display numeral is decoration. */
    .principles li::before {
      content: counter(p, decimal-leading-zero) / "";
      display: block;
      width: auto;
      height: auto;
      margin: 0 0 clamp(24px, 2.8vw, 44px);
      padding: 0;
      border: 0;
      border-radius: 0;
      font-family: "Meraki", serif;
      font-weight: 400;
      font-size: clamp(40px, 3.6vw, 60px);
      line-height: 0.9;
      letter-spacing: -0.02em;
      font-variant-numeric: lining-nums;
      color: var(--ink-muted);
    }

    .principles h3 {
      margin: 0 0 10px;
      font-size: clamp(24px, 2vw, 30px);
      line-height: 1.12;
      letter-spacing: -0.012em;
      text-wrap: balance;
    }

    .principles p {
      max-width: 36ch;
      font-size: 15px;
      line-height: 1.6;
    }

    /* ---------- 04 · we say / we don't say: one pair per ruled row, 1 / 7 beside 7 / 13 ---------- */

    .say {
      grid-template-columns: var(--v-grid);
      gap: 0 var(--hgap);
      margin: clamp(8px, 1.4vw, 24px) 0 0;
      border-bottom: 1px solid var(--line-strong);
    }

    .say > * {
      grid-column: 7 / 13;
      padding: clamp(16px, 1.6vw, 22px) 0 clamp(18px, 1.8vw, 24px);
      border-top: 1px solid var(--line);
    }

    /* The left cell reaches across the gutter, so each row's rule runs unbroken; its text still ends on the line. */
    .say > :nth-child(odd) {
      grid-column: 1 / 7;
      margin-right: calc(-1 * var(--hgap));
      padding-right: var(--hgap);
    }

    .say > .say-head {
      padding-top: 0;
      padding-bottom: 12px;
      border-top: 0;
      font-size: 11px;
      line-height: 1.3;
      color: var(--ink);
    }

    .say > .say-head + * + *,
    .say > .say-head + * + * + * {
      border-top-color: var(--line-strong);
    }

    .say-term {
      margin-bottom: 8px;
      font-weight: 400;
      font-size: clamp(26px, 2.3vw, 36px);
      line-height: 1.08;
      letter-spacing: -0.014em;
    }

    .say-gloss {
      max-width: 40ch;
      font-size: 15px;
      line-height: 1.5;
    }

    /* Rejected, not shouted: muted ink and one thin strike. */
    .say > .is-negative:not(.say-head) .say-term {
      color: var(--ink-muted);
      text-decoration: line-through 1px;
      text-decoration-skip-ink: none;
    }

    /* ---------- 05 · boilerplate: short 1 / 7 beside long 7 / 13, the page's one tint ---------- */

    .boiler {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 48px var(--hgap);
      margin: clamp(8px, 1.4vw, 24px) 0 0;
    }

    .boiler-panel {
      padding: 14px 0 0;
      border: 0;
      border-top: 1px solid var(--ink);
      border-radius: 0;
      background: none;
    }

    .boiler-head {
      flex-wrap: wrap;
      gap: 10px 12px;
      margin-bottom: clamp(24px, 2.6vw, 40px);
      padding-bottom: 0;
      border-bottom: 0;
    }

    .boiler .spec-pill {
      align-self: center;
      border: 1px solid var(--line-strong);
      background: none;
      color: var(--ink);
    }

    .boiler-meta {
      font-size: 12.5px;
    }

    /* The copy button is the point of the panel: the one filled element in it. */
    .boiler .tile-btn {
      height: 40px;
      gap: 8px;
      padding: 0 18px 0 15px;
      border: 0;
      border-radius: 999px;
      background: var(--ink);
      color: var(--gbg);
      font-size: 13px;
      transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
    }

    .boiler .tile-btn:hover {
      background: var(--ink);
      opacity: 0.86;
    }

    .boiler .tile-btn:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    .boiler .tile-btn svg {
      width: 14px;
      height: 14px;
    }

    .boiler-panel p {
      max-width: 58ch;
      font-size: 15.5px;
      line-height: 1.6;
    }

    .boiler-panel p.boiler-lead {
      max-width: 28ch;
      font-size: clamp(22px, 1.9vw, 30px);
      line-height: 1.28;
      letter-spacing: -0.01em;
    }

    /* ---------- 06 · lines that sound like us: themes in the margin, lines from column 7 ---------- */

    .d-voice-lines table {
      display: block;
      margin: clamp(8px, 1.4vw, 24px) 0 0;
      border-bottom: 1px solid var(--line-strong);
    }

    .d-voice-lines thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .d-voice-lines tbody {
      display: block;
    }

    .d-voice-lines tr {
      display: grid;
      grid-template-columns: var(--v-grid);
      column-gap: var(--hgap);
      align-items: first baseline;
      padding: clamp(22px, 2.2vw, 34px) 0 clamp(24px, 2.4vw, 38px);
      border-top: 1px solid var(--line);
    }

    .d-voice-lines tbody tr:first-child {
      border-top-color: var(--line-strong);
    }

    .d-voice-lines td {
      display: block;
      grid-column: 7 / 13;
      padding: 0;
      border: 0;
    }

    .d-voice-lines td:first-child {
      grid-column: 1 / 7;
      font-weight: 500;
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: 0.02em;
      white-space: normal;
      color: var(--ink);
    }

    .d-voice-line {
      display: block;
      font-family: "Meraki", serif;
      font-weight: 400;
      font-size: clamp(22px, 2vw, 30px);
      line-height: 1.22;
      letter-spacing: -0.01em;
      color: var(--ink);
      text-wrap: balance;
    }

    .d-voice-line + .d-voice-line {
      margin-top: 0.34em;
    }

    /* ---------- tablet ---------- */

    @media (max-width: 1099px) {
      .d-voice-feeling > .d-body > p:not([class]) {
        grid-column: 7 / 13;
      }

      .d-voice-feeling > .d-body > .d-voice-statement + p {
        grid-column: 1 / 7;
      }

      .d-voice-lines td {
        grid-column: 4 / 13;
      }

      .d-voice-lines td:first-child {
        grid-column: 1 / 4;
      }
    }

    @media (max-width: 859px) {
      .boiler {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ---------- phone ---------- */

    @media (max-width: 699px) {
      .d-voice-feeling > .d-body > p:not([class]),
      .d-voice-feeling > .d-body > .d-voice-statement + p {
        grid-column: 1 / 13;
      }

      .d-voice-feeling > .d-body > p:not([class]) + p:not([class]) {
        margin-top: 14px;
      }

      .section p.d-voice-statement {
        font-size: clamp(28px, 8.2vw, 34px);
        line-height: 1.06;
      }

      .attr-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
      }

      .attr-card::before {
        margin-bottom: 18px;
      }

      .principles {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
      }

      .principles li::before {
        margin-bottom: 18px;
        font-size: 40px;
      }

      .say-term {
        font-size: 21px;
      }

      .say-gloss {
        font-size: 13.5px;
      }

      .d-voice-lines tr {
        row-gap: 12px;
      }

      .d-voice-lines td,
      .d-voice-lines td:first-child {
        grid-column: 1 / 13;
      }
    }
  }
}


@starting-style {
  html[data-page] .d-menu {
    opacity: 0;
    translate: 0 -10px;
  }
}

@keyframes d-rise {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}