/* Marathon design system review site, site.css.
   Load after assets/tokens.css and assets/icons.css. Every colour, size, and space is a token.
   A hex typed into this file is a defect. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--mc-font);
  font-size: var(--mc-type-body-size);
  font-weight: var(--mc-type-body-weight);
  line-height: var(--mc-type-body-leading);
  color: var(--mc-text-primary);
  background: var(--mc-surface-page);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mc-text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mc-text-link-hover); }
:focus-visible { outline: var(--mc-focus-ring-width) solid var(--mc-border-focus); outline-offset: var(--mc-focus-ring-offset); }
.ds-skip { position: absolute; left: -999px; top: 0; }
.ds-skip:focus { left: var(--mc-space-05); top: var(--mc-space-05); z-index: var(--mc-z-modal); background: var(--mc-surface-page); padding: var(--mc-space-03) var(--mc-space-05); }

/* The approved app header. Navy bar, white lockup 26px, hairline divider, app name. */
.mc-top {
  position: sticky; top: 0; z-index: var(--mc-z-header);
  background: var(--mc-surface-inverse);
  padding: calc(var(--mc-space-05) + var(--mc-safe-top)) 0 var(--mc-space-05);
}
.mc-top .mc-wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--mc-screen-margin-lg);
}
.mc-top .mc-home { display: block; flex: none; }
.mc-logo { height: var(--mc-screen-header-logo); width: auto; display: block; flex: none; }
.mc-appname {
  color: var(--mc-text-inverse); opacity: 0.85;
  font-size: var(--mc-type-appname-size); font-weight: var(--mc-type-appname-weight);
  letter-spacing: var(--mc-type-appname-tracking); text-transform: var(--mc-type-appname-case);
  padding-left: 14px; border-left: var(--mc-border-width-hairline) solid var(--mc-border-inverse);
  line-height: var(--mc-type-appname-leading); white-space: nowrap;
}
.mc-top .mc-actions { margin-left: auto; display: flex; align-items: center; gap: var(--mc-space-04); }
.ds-version { color: var(--mc-text-inverse-tertiary); font-size: var(--mc-type-caption-size); font-weight: var(--mc-weight-semibold); }
.ds-menu-btn {
  display: none; align-items: center; gap: var(--mc-space-03);
  min-height: var(--mc-screen-touch-target); padding: 0 var(--mc-space-04);
  background: transparent; color: var(--mc-text-inverse); font: inherit;
  font-size: var(--mc-type-caption-size); font-weight: var(--mc-weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  border: var(--mc-border-width-hairline) solid var(--mc-border-inverse); border-radius: var(--mc-radius-md);
  cursor: pointer;
}
.ds-menu-btn .ds-close-icon { display: none; }
body.ds-menu-open .ds-menu-btn .ds-open-icon { display: none; }
body.ds-menu-open .ds-menu-btn .ds-close-icon { display: inline-block; }

/* Shell: sidebar nav plus content. */
.ds-shell { display: grid; grid-template-columns: 288px minmax(0, 1fr); min-height: calc(100vh - 58px); }
.ds-side {
  position: sticky; top: 58px; align-self: start; height: calc(100vh - 58px); overflow-y: auto;
  background: var(--mc-surface-subtle); border-right: var(--mc-border-width-hairline) solid var(--mc-border-subtle);
  padding: var(--mc-space-08) var(--mc-space-07) var(--mc-space-10);
}
.ds-nav-group { margin: 0 0 var(--mc-space-07); }
.ds-nav-group h2 {
  margin: 0 0 var(--mc-space-03); color: var(--mc-text-label);
  font-size: var(--mc-type-eyebrow-size); font-weight: var(--mc-type-eyebrow-weight);
  letter-spacing: var(--mc-type-eyebrow-tracking); text-transform: var(--mc-type-eyebrow-case);
  line-height: var(--mc-type-eyebrow-leading);
}
.ds-nav-group ul { list-style: none; margin: 0; padding: 0; }
.ds-nav-group li { margin: 0; }
.ds-nav-link, .ds-nav-idle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mc-space-03);
  min-height: 36px; padding: var(--mc-space-02) var(--mc-space-04); margin: 0 calc(-1 * var(--mc-space-04));
  font-size: var(--mc-type-small-size); line-height: 1.3; text-decoration: none; border-radius: var(--mc-radius-md);
}
.ds-nav-link { color: var(--mc-text-heading); font-weight: var(--mc-weight-semibold); }
.ds-nav-link:hover { background: var(--mc-surface-muted); color: var(--mc-text-heading); }
.ds-nav-link[aria-current="page"] { background: var(--mc-surface-raised); box-shadow: inset var(--mc-border-width-bar) 0 0 var(--mc-border-accent), var(--mc-shadow-1); }
.ds-nav-idle { color: var(--mc-text-tertiary); }
.ds-nav-idle .ds-pill { align-self: center; }
.ds-nav-idle small { font-size: 11px; font-weight: var(--mc-weight-semibold); white-space: nowrap; }

.ds-main { min-width: 0; padding: var(--mc-space-11) var(--mc-space-11) var(--mc-space-13); }
.ds-col { max-width: 1120px; }
.ds-prose { max-width: 760px; }

/* Type, the documented scale. */
.ds-eyebrow {
  display: block; margin: 0 0 var(--mc-space-04); color: var(--mc-text-label);
  font-size: var(--mc-type-eyebrow-size); font-weight: var(--mc-type-eyebrow-weight);
  letter-spacing: var(--mc-type-eyebrow-tracking); text-transform: var(--mc-type-eyebrow-case);
  line-height: var(--mc-type-eyebrow-leading);
}
.ds-h1 {
  margin: 0; color: var(--mc-text-heading); font-size: var(--mc-type-h1-size);
  font-weight: var(--mc-type-h1-weight); line-height: var(--mc-type-h1-leading); letter-spacing: var(--mc-type-h1-tracking);
  text-wrap: balance;
}
.ds-display {
  margin: 0; color: var(--mc-text-heading); font-size: clamp(38px, 3.6vw, 56px);
  font-weight: var(--mc-weight-extrabold); line-height: 1.02; letter-spacing: var(--mc-type-cover-tracking); text-wrap: balance;
}
.ds-h2 {
  margin: 0; color: var(--mc-text-heading); font-size: var(--mc-type-h2-size);
  font-weight: var(--mc-type-h2-weight); line-height: var(--mc-type-h2-leading); letter-spacing: var(--mc-type-h2-tracking);
  text-wrap: balance;
}
.ds-h3 { margin: 0 0 var(--mc-space-03); color: var(--mc-text-heading); font-size: var(--mc-type-h3-size); font-weight: var(--mc-type-h3-weight); line-height: var(--mc-type-h3-leading); }
.ds-lede {
  margin: var(--mc-space-06) 0 0; color: var(--mc-text-secondary); font-size: var(--mc-type-lede-size);
  font-weight: var(--mc-type-lede-weight); line-height: var(--mc-type-lede-leading); max-width: 720px;
}
.ds-small { font-size: var(--mc-type-small-size); color: var(--mc-text-secondary); }
.ds-caption { font-size: var(--mc-type-caption-size); font-weight: var(--mc-type-caption-weight); color: var(--mc-text-tertiary); line-height: var(--mc-type-caption-leading); }
.ds-num { font-variant-numeric: tabular-nums; }

/* Section opener: eyebrow, title, 60 by 3 red divider. */
.ds-section { margin-top: var(--mc-space-13); }
.ds-section:first-child { margin-top: 0; }
.ds-opener { margin-bottom: var(--mc-space-08); }
.ds-divider { display: block; width: var(--mc-border-width-divider-length); height: var(--mc-border-width-bar); background: var(--mc-border-accent); margin-top: var(--mc-space-06); border: 0; }
.ds-opener .ds-lede { margin-top: var(--mc-space-05); font-size: 18px; }

/* Home hero. */
.ds-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--mc-space-11); align-items: center; }
.ds-hero .ds-lede { margin-top: var(--mc-space-07); }
.ds-hero-actions { display: flex; flex-wrap: wrap; gap: var(--mc-space-04); margin-top: var(--mc-space-08); }
.ds-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--mc-space-10); border-top: var(--mc-border-width-hairline) solid var(--mc-border-subtle); }
.ds-stat { padding: var(--mc-space-06) var(--mc-space-05) 0 0; }
.ds-stat b { display: block; color: var(--mc-text-heading); font-size: 40px; font-weight: var(--mc-type-stat-weight); line-height: var(--mc-type-stat-leading); letter-spacing: var(--mc-type-stat-tracking); font-variant-numeric: tabular-nums; }
.ds-stat--key b { color: var(--mc-accent); }
.ds-stat span { display: block; margin-top: var(--mc-space-03); font-size: var(--mc-type-caption-size); font-weight: var(--mc-weight-semibold); color: var(--mc-text-secondary); line-height: 1.35; }

.ds-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-space-04); }
.ds-mosaic a { display: flex; align-items: center; justify-content: center; padding: var(--mc-space-05); aspect-ratio: 4 / 5; overflow: hidden; background: var(--mc-surface-muted); border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); border-radius: var(--mc-radius-md); }
.ds-mosaic a:nth-child(2n) { transform: translateY(var(--mc-space-10)); }
.ds-mosaic img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 1px 2px rgb(var(--mc-navy-100-rgb) / 0.16)); transition: transform var(--mc-duration-moderate) var(--mc-ease-standard); }
.ds-mosaic a:hover img { transform: scale(1.03); }

/* Buttons. */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--mc-space-03); min-height: var(--mc-screen-touch-target);
  padding: 0 var(--mc-space-06); border-radius: var(--mc-radius-md); font: inherit; font-size: var(--mc-type-small-size);
  font-weight: var(--mc-weight-bold); text-decoration: none; cursor: pointer; border: var(--mc-border-width-strong) solid var(--mc-action-secondary-border);
}
.ds-btn--primary { background: var(--mc-action-primary); color: var(--mc-action-primary-text); border-color: var(--mc-action-primary); }
.ds-btn--primary:hover { background: var(--mc-action-primary-hover); color: var(--mc-action-primary-text); }
.ds-btn--secondary { background: var(--mc-surface-raised); color: var(--mc-text-heading); }
.ds-btn--secondary:hover { background: var(--mc-action-secondary-hover); color: var(--mc-text-heading); }

/* Logo panels. */
.ds-logo-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--mc-space-06); }
.ds-panel { border-radius: var(--mc-radius-lg); padding: var(--mc-space-09); display: flex; flex-direction: column; justify-content: space-between; gap: var(--mc-space-08); min-height: 300px; }
.ds-panel--navy { background: var(--mc-surface-inverse); color: var(--mc-text-inverse); }
.ds-panel--light { background: var(--mc-surface-raised); border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); }
.ds-panel--muted { background: var(--mc-surface-muted); }
.ds-clear { align-self: flex-start; padding: 28px; outline: var(--mc-border-width-hairline) dashed var(--mc-border-inverse); }
.ds-clear img { height: 64px; width: auto; }
.ds-panel--light .ds-clear { outline-color: var(--mc-border-strong); }
.ds-panel-meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mc-space-04); }
.ds-panel-meta p { margin: 0; font-size: var(--mc-type-small-size); }
.ds-panel--navy .ds-panel-meta p { color: var(--mc-text-inverse-secondary); }
.ds-panel--navy .ds-eyebrow { color: var(--mc-accent-on-inverse); }
.ds-panel--navy a { color: var(--mc-text-inverse); }
.ds-panel--navy a.ds-copy { background: var(--mc-action-inverse); color: var(--mc-action-inverse-text); border-color: var(--mc-action-inverse); }
.ds-marks { display: flex; align-items: flex-end; gap: var(--mc-space-07); }
.ds-marks figure { margin: 0; text-align: center; }
.ds-marks figcaption { margin-top: var(--mc-space-03); }
.ds-logo-rules { margin-top: var(--mc-space-06); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mc-space-06); }

/* Colour. */
.ds-swatches { display: grid; grid-template-columns: 2fr 1fr; gap: var(--mc-space-06); }
.ds-swatch { border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); border-radius: var(--mc-radius-lg); overflow: hidden; background: var(--mc-surface-raised); }
.ds-swatch-chip { height: 168px; }
.ds-swatch--red .ds-swatch-chip { height: 72px; margin: var(--mc-space-06) var(--mc-space-06) 0; border-radius: var(--mc-radius-md); }
.ds-swatch-body { padding: var(--mc-space-06); }
.ds-specs { display: grid; grid-template-columns: auto 1fr; gap: var(--mc-space-02) var(--mc-space-05); margin: var(--mc-space-04) 0 0; font-size: var(--mc-type-small-size); }
.ds-specs dt { color: var(--mc-text-tertiary); font-weight: var(--mc-weight-semibold); }
.ds-specs dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--mc-text-primary); }
.ds-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mc-space-05); margin-top: var(--mc-space-06); }
.ds-chip-swatch { height: 64px; border-radius: var(--mc-radius-md); border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); position: relative; overflow: hidden; }
.ds-chip-swatch .ds-on-navy { position: absolute; left: var(--mc-space-04); right: var(--mc-space-04); top: 50%; height: var(--mc-border-width-bar); }
.ds-chip p { margin: var(--mc-space-03) 0 0; font-size: var(--mc-type-caption-size); line-height: 1.35; }
.ds-chip b { display: block; color: var(--mc-text-heading); }
.ds-chip span { color: var(--mc-text-tertiary); font-variant-numeric: tabular-nums; }

.ds-ratio { margin-top: var(--mc-space-09); }
.ds-ratio-bar { display: flex; height: 56px; border-radius: var(--mc-radius-md); overflow: hidden; border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); }
.ds-ratio-bar span { display: block; }
.ds-ratio-legend { display: grid; grid-template-columns: 80fr 15fr 5fr; margin-top: var(--mc-space-04); font-size: var(--mc-type-caption-size); font-weight: var(--mc-weight-semibold); color: var(--mc-text-secondary); }
.ds-ratio-legend span { white-space: nowrap; }
.ds-ratio-legend span:last-child { text-align: right; }

/* Type specimen. */
.ds-type-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--mc-space-07); padding: var(--mc-space-06) 0; border-top: var(--mc-border-width-hairline) solid var(--mc-border-subtle); align-items: baseline; }
.ds-type-row:last-child { border-bottom: var(--mc-border-width-hairline) solid var(--mc-border-subtle); }
.ds-type-row .ds-caption b { display: block; color: var(--mc-text-heading); font-size: var(--mc-type-small-size); }
.ds-type-sample { margin: 0; overflow-wrap: anywhere; }

/* Cards. */
.ds-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc-space-06); }
.ds-card { padding: var(--mc-space-07); border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); border-radius: var(--mc-radius-lg); background: var(--mc-surface-raised); }
.ds-card .mc-icon { color: var(--mc-text-heading); margin-bottom: var(--mc-space-06); }
.ds-card p { margin: 0; font-size: var(--mc-type-small-size); color: var(--mc-text-secondary); }
.ds-voice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-space-06); }
.ds-voice ul { margin: 0; padding-left: var(--mc-space-06); font-size: var(--mc-type-small-size); }
.ds-voice li { margin: var(--mc-space-03) 0; }
.ds-callout { background: var(--mc-surface-inverse); color: var(--mc-text-inverse); border-radius: var(--mc-radius-lg); padding: var(--mc-space-08); }
.ds-callout .ds-eyebrow { color: var(--mc-accent-on-inverse); }
.ds-callout p { margin: 0; color: var(--mc-text-inverse-secondary); font-size: var(--mc-type-small-size); }
.ds-callout blockquote { margin: 0 0 var(--mc-space-05); color: var(--mc-text-inverse); font-size: 22px; font-weight: var(--mc-weight-bold); line-height: 1.3; }

/* Piece index. */
.ds-tier { margin-top: var(--mc-space-10); }
.ds-tier:first-of-type { margin-top: 0; }
.ds-tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mc-space-05); border-bottom: var(--mc-border-width-hairline) solid var(--mc-border-subtle); padding-bottom: var(--mc-space-04); margin-bottom: var(--mc-space-06); }
.ds-pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc-space-06); }
.ds-piece { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); border-radius: var(--mc-radius-lg); overflow: hidden; background: var(--mc-surface-raised); }
a.ds-piece:hover { box-shadow: var(--mc-shadow-2); color: inherit; }
.ds-piece-thumb { aspect-ratio: 4 / 3; background: var(--mc-surface-muted); overflow: hidden; padding: var(--mc-space-05); display: flex; align-items: center; justify-content: center; }
.ds-piece-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 1px 2px rgb(var(--mc-navy-100-rgb) / 0.16)); }
.ds-piece-thumb--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mc-space-03); }
.ds-piece-body { padding: var(--mc-space-05) var(--mc-space-05) var(--mc-space-06); display: flex; flex-direction: column; gap: var(--mc-space-03); flex: 1; }
.ds-piece-body b { color: var(--mc-text-heading); font-size: 16px; line-height: 1.3; }
.ds-piece-body span { font-size: var(--mc-type-caption-size); color: var(--mc-text-secondary); line-height: 1.45; }

/* Status pill. Amber and green are for the dot, words stay primary. */
.ds-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: var(--mc-weight-semibold); color: var(--mc-text-primary); white-space: nowrap; }
.ds-pill::before { content: ""; width: 8px; height: 8px; border-radius: var(--mc-radius-pill); background: var(--mc-status-success); }
.ds-pill--review::before { background: var(--mc-status-warning); }
.ds-pill--inverse { color: var(--mc-text-inverse); }

/* Piece page. */
.ds-piece-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--mc-space-06); }
.ds-meta { display: flex; flex-wrap: wrap; gap: var(--mc-space-03) var(--mc-space-07); margin-top: var(--mc-space-06); font-size: var(--mc-type-caption-size); color: var(--mc-text-secondary); }
.ds-meta b { color: var(--mc-text-heading); font-weight: var(--mc-weight-bold); }
.ds-jump { display: flex; flex-wrap: wrap; gap: var(--mc-space-03); margin-top: var(--mc-space-07); }
.ds-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--mc-space-05); border: var(--mc-border-width-hairline) solid var(--mc-border-strong); border-radius: var(--mc-radius-pill); font-size: var(--mc-type-caption-size); font-weight: var(--mc-weight-semibold); text-decoration: none; color: var(--mc-text-heading); }
.ds-jump a:hover { background: var(--mc-surface-muted); }

.ds-stage { margin-top: var(--mc-space-09); background: var(--mc-surface-muted); border-radius: var(--mc-radius-lg); padding: var(--mc-space-09); display: flex; justify-content: center; }
.ds-stage a { display: block; }
.ds-stage img { box-shadow: var(--mc-shadow-3); background: var(--mc-surface-raised); }
.ds-stage--page img { max-height: 1100px; width: auto; }
.ds-stage--tall { padding: 0; }
.ds-stage--tall .ds-scroll { max-height: 86vh; overflow: auto; padding: var(--mc-space-09); width: 100%; }
.ds-stage--tall img { margin: 0 auto; max-width: 760px; width: 100%; }
.ds-stage-cap { margin-top: var(--mc-space-04); }

.ds-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc-space-06); }
.ds-gallery figure { margin: 0; }
.ds-gallery a { display: block; aspect-ratio: 1 / 1; background: var(--mc-surface-muted); border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); border-radius: var(--mc-radius-md); overflow: hidden; padding: var(--mc-space-04); }
.ds-gallery a:hover { border-color: var(--mc-border-strong); }
.ds-gallery img { width: 100%; height: 100%; object-fit: contain; }
.ds-gallery figcaption { margin-top: var(--mc-space-03); }

.ds-video { display: flex; flex-wrap: wrap; gap: var(--mc-space-06); align-items: flex-start; margin-bottom: var(--mc-space-08); }
.ds-video figure { margin: 0; width: min-content; }
.ds-video video { display: block; background: var(--mc-surface-inverse); border-radius: var(--mc-radius-md); height: 400px; }
.ds-video .ds-v-tall { width: 225px; aspect-ratio: 9 / 16; }
.ds-video .ds-v-wide { width: 711px; aspect-ratio: 16 / 9; }

/* README rendering. */
.ds-md { max-width: 820px; }
.ds-md h3 { margin: var(--mc-space-09) 0 var(--mc-space-04); color: var(--mc-text-heading); font-size: var(--mc-type-h3-size); font-weight: var(--mc-weight-bold); }
.ds-md h3:first-child { margin-top: 0; }
.ds-md h4 { margin: var(--mc-space-07) 0 var(--mc-space-03); color: var(--mc-text-heading); font-size: 16px; font-weight: var(--mc-weight-bold); }
.ds-md p, .ds-md li { font-size: 15px; }
.ds-md p { margin: 0 0 var(--mc-space-05); }
.ds-md ul, .ds-md ol { margin: 0 0 var(--mc-space-05); padding-left: var(--mc-space-07); }
.ds-md li { margin: var(--mc-space-02) 0; }
.ds-md code, .ds-code-name code { font-family: var(--mc-font); font-size: 0.9em; font-weight: var(--mc-weight-semibold); background: var(--mc-surface-muted); padding: 1px 5px; border-radius: var(--mc-radius-sm); overflow-wrap: anywhere; }
.ds-md pre { margin: 0 0 var(--mc-space-05); }
.ds-table-wrap { overflow-x: auto; margin: 0 0 var(--mc-space-06); border-radius: var(--mc-radius-md); border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); }
.ds-table { border-collapse: collapse; width: 100%; font-size: var(--mc-type-small-size); }
.ds-table th { background: var(--mc-surface-table-header); color: var(--mc-text-on-accent); text-align: left; font-weight: var(--mc-weight-bold); padding: var(--mc-space-03) var(--mc-space-04); white-space: nowrap; }
.ds-table td { padding: var(--mc-space-03) var(--mc-space-04); border-top: var(--mc-border-width-hairline) solid var(--mc-border-subtle); vertical-align: top; }
.ds-table tr:nth-child(even) td { background: var(--mc-surface-row-alt); }
.ds-table td code { white-space: nowrap; }
.ds-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Code blocks with a copy button. Montserrat only, so code sets in Montserrat at tabular figures. */
.ds-code { margin: 0 0 var(--mc-space-05); border: var(--mc-border-width-hairline) solid var(--mc-border-subtle); border-radius: var(--mc-radius-md); background: var(--mc-surface-subtle); overflow: hidden; }
.ds-code > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--mc-space-04); padding: var(--mc-space-04) var(--mc-space-05); min-height: var(--mc-screen-touch-target); }
.ds-code > summary::-webkit-details-marker { display: none; }
.ds-code > summary .mc-icon { color: var(--mc-text-tertiary); transition: transform var(--mc-duration-base) var(--mc-ease-standard); }
.ds-code[open] > summary .mc-icon { transform: rotate(90deg); }
.ds-code-name { flex: 1; min-width: 0; font-size: var(--mc-type-small-size); font-weight: var(--mc-weight-bold); color: var(--mc-text-heading); overflow-wrap: anywhere; }
.ds-code-name small { display: block; font-weight: var(--mc-weight-regular); color: var(--mc-text-tertiary); font-size: 12px; }
.ds-code-bar { display: flex; justify-content: flex-end; gap: var(--mc-space-03); padding: 0 var(--mc-space-05) var(--mc-space-03); }
.ds-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--mc-space-04); border: var(--mc-border-width-hairline) solid var(--mc-border-strong); border-radius: var(--mc-radius-md); background: var(--mc-surface-raised); color: var(--mc-text-heading); font: inherit; font-size: 12px; font-weight: var(--mc-weight-bold); cursor: pointer; text-decoration: none; }
.ds-copy:hover { background: var(--mc-action-secondary-hover); color: var(--mc-text-heading); }
.ds-copy.is-done { border-color: var(--mc-status-success); }
.ds-code pre { margin: 0; max-height: 520px; overflow: auto; padding: var(--mc-space-05); background: var(--mc-surface-raised); border-top: var(--mc-border-width-hairline) solid var(--mc-border-subtle); font-family: var(--mc-font); font-size: 12.5px; line-height: 1.6; font-variant-numeric: tabular-nums; color: var(--mc-text-primary); tab-size: 2; }
.ds-code pre code { font-family: var(--mc-font); white-space: pre; }

/* Downloads. */
.ds-files { list-style: none; margin: 0 0 var(--mc-space-08); padding: 0; border-top: var(--mc-border-width-hairline) solid var(--mc-border-subtle); }
.ds-files li { display: flex; align-items: center; gap: var(--mc-space-05); padding: var(--mc-space-04) 0; border-bottom: var(--mc-border-width-hairline) solid var(--mc-border-subtle); }
.ds-files .mc-icon { color: var(--mc-text-heading); }
.ds-files div { flex: 1; min-width: 0; }
.ds-files b { display: block; color: var(--mc-text-heading); font-size: var(--mc-type-small-size); overflow-wrap: anywhere; }
.ds-files span { display: block; font-size: 12px; color: var(--mc-text-tertiary); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ds-note { border-left: var(--mc-border-width-bar) solid var(--mc-border-strong); background: var(--mc-surface-subtle); padding: var(--mc-space-05) var(--mc-space-06); font-size: var(--mc-type-small-size); color: var(--mc-text-secondary); margin: 0 0 var(--mc-space-06); }
.ds-note b { color: var(--mc-text-heading); }

.ds-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mc-space-06); margin-top: var(--mc-space-13); border-top: var(--mc-border-width-hairline) solid var(--mc-border-subtle); padding-top: var(--mc-space-07); }
.ds-pager a { display: block; text-decoration: none; padding: var(--mc-space-04) 0; }
.ds-pager a:last-child { text-align: right; }
.ds-pager small { display: block; color: var(--mc-text-tertiary); font-size: 12px; font-weight: var(--mc-weight-semibold); }
.ds-pager b { color: var(--mc-text-heading); }

.ds-foot { margin-top: var(--mc-space-13); padding-top: var(--mc-space-07); border-top: var(--mc-border-width-hairline) solid var(--mc-border-subtle); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mc-space-05); font-size: 12px; color: var(--mc-text-tertiary); }
.ds-foot img { height: 20px; width: auto; }

/* Mid widths. */
@media (max-width: 1280px) {
  .ds-main { padding: var(--mc-space-10) var(--mc-space-09) var(--mc-space-12); }
  .ds-pieces, .ds-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below 1024 the sidebar becomes the phone menu. */
@media (max-width: 1023px) {
  .mc-top { padding: calc(7px + var(--mc-safe-top)) 0 7px; }
  .ds-menu-btn { display: inline-flex; }
  .ds-version { display: none; }
  .ds-shell { display: block; }
  .ds-side {
    display: none; position: static; height: auto; min-height: calc(100vh - 58px); overflow: visible;
    border-right: 0; padding: var(--mc-space-07) var(--mc-screen-margin) var(--mc-space-12);
  }
  body.ds-menu-open .ds-side { display: block; }
  body.ds-menu-open .ds-main { display: none; }
  .ds-nav-idle .ds-pill { align-self: center; }
  .ds-nav-link, .ds-nav-idle { min-height: var(--mc-screen-touch-target); font-size: 15px; }
  .ds-hero { grid-template-columns: 1fr; gap: var(--mc-space-10); }
  .ds-mosaic a:nth-child(2n) { transform: none; }
  .ds-video figure:has(.ds-v-wide) { width: 100%; }
  .ds-video .ds-v-wide { width: 100%; height: auto; }
  .ds-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .mc-top .mc-wrap { padding: 0 var(--mc-screen-margin); gap: 10px; }
  .ds-main { padding: var(--mc-space-09) var(--mc-screen-margin) var(--mc-space-11); }
  .ds-section { margin-top: var(--mc-space-11); }
  .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-stat b { font-size: 34px; }
  .ds-logo-grid, .ds-swatches, .ds-voice, .ds-logo-rules { grid-template-columns: 1fr; }
  .ds-panel { padding: var(--mc-space-07); min-height: 0; }
  .ds-clear { padding: 18px; }
  .ds-clear img { height: 44px; }
  .ds-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cards { grid-template-columns: 1fr; }
  .ds-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-space-04); }
  .ds-piece-body { padding: var(--mc-space-04); }
  .ds-piece-body b { font-size: 14px; }
  .ds-piece-body span { display: none; }
  .ds-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-space-04); }
  .ds-type-row { grid-template-columns: 1fr; gap: var(--mc-space-03); }
  .ds-stage { padding: var(--mc-space-05); margin-left: calc(-1 * var(--mc-screen-margin)); margin-right: calc(-1 * var(--mc-screen-margin)); border-radius: 0; }
  .ds-stage--tall { padding: 0; }
  .ds-stage--tall .ds-scroll { padding: var(--mc-space-05); max-height: 72vh; }
  .ds-stage--page img { max-height: none; width: 100%; }
  .ds-ratio-legend { grid-template-columns: 1fr; gap: var(--mc-space-02); }
  .ds-ratio-legend span:last-child { text-align: left; }
  .ds-pager { grid-template-columns: 1fr; }
  .ds-video { flex-wrap: nowrap; align-items: flex-end; gap: var(--mc-space-04); }
  .ds-video video, .ds-video .ds-v-tall, .ds-video .ds-v-wide { height: auto; width: 100%; }
  .ds-video figure { width: auto; }
  .ds-video figure:has(.ds-v-tall) { flex: 0 0 34%; }
  .ds-video figure:has(.ds-v-wide) { flex: 1 1 auto; }
  .ds-pager a:last-child { text-align: left; }
}

@media (max-width: 420px) {
  .mc-logo { height: var(--mc-screen-header-logo-sm); }
  .mc-appname { font-size: 10px; letter-spacing: 0.2em; padding-left: 10px; }
  .ds-menu-btn { padding: 0 var(--mc-space-03); }
  .ds-menu-btn .ds-menu-word { display: none; }
}

@media print {
  .mc-top, .ds-side, .ds-copy, .ds-jump, .ds-pager { display: none; }
  .ds-shell { display: block; }
  .ds-main { padding: 0; }
}