/* ═══ Tokens ═══════════════════════════════════════════════ */

:root {
  --bone: #f0eee8;
  --bone-2: #e6e3db;
  --surface: #faf9f6;
  --ink: #0e0e10;
  --ink-2: #1a1a1d;
  --muted: #7a776f;
  --muted-dark: #86837c;
  --accent: #b91c2c;
  --line: rgba(14, 14, 16, 0.14);
  --line-dark: rgba(240, 238, 232, 0.16);

  --display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --gutter: clamp(18px, 4.2vw, 68px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Live theme — flipped by the section observer. */
  --page-bg: var(--bone);
  --page-ink: var(--ink);
  --page-muted: var(--muted);
  --page-line: var(--line);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--page-bg);
  color: var(--page-ink);
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

/* The dark sections paint themselves; the observer only has to flip the
   fixed chrome (header, cursor) so it stays legible over them. */
body.is-dark {
  --page-bg: var(--ink);
  --page-ink: var(--bone);
  --page-muted: var(--muted-dark);
  --page-line: var(--line-dark);
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ═══ Preloader ════════════════════════════════════════════ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter);
  transition: transform 0.65s var(--ease);
}

.preloader.is-done {
  transform: translateY(-101%);
}

.preloader__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.preloader__word {
  font-family: var(--display);
  font-size: clamp(38px, 9vw, 110px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.preloader__count {
  font-family: var(--display);
  font-size: clamp(15px, 2vw, 22px);
  font-variant-numeric: tabular-nums;
  color: var(--muted-dark);
}

.preloader__bar {
  height: 1px;
  background: rgba(240, 238, 232, 0.2);
}

.preloader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--bone);
  transition: width 0.25s linear;
}

/* Never let the preloader trap a no-JS visitor on a blank screen. */
html:not(.has-js) .preloader { display: none; }

/* ═══ Custom cursor ════════════════════════════════════════ */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 450;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--page-ink);
  pointer-events: none;
  will-change: transform;
  transition: width 0.22s var(--ease), height 0.22s var(--ease),
              margin 0.22s var(--ease), background-color 0.3s var(--ease);
}

/* Grows a little and picks up the accent over anything interactive. */
.cursor.is-on {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: var(--accent);
}

/* Touch and coarse pointers keep the native cursor. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  html.has-js, html.has-js a { cursor: none; }
}

/* ═══ Header ═══════════════════════════════════════════════ */

.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--gutter);
  color: var(--page-ink);
  transition: color 0.4s var(--ease);
}

.site-head a { color: inherit; }

.site-head__mark {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-head__nav { display: flex; gap: 22px; }

.site-head__nav a {
  position: relative;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-head__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.site-head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.site-head__progress {
  font-family: var(--display);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ═══ Hero ═════════════════════════════════════════════════ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 34%);
  gap: clamp(24px, 4vw, 60px);
  align-items: stretch;
  /* Exactly one screen: the portrait stretches to fill rather than
     overflowing, so the next section always starts below the fold. */
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(88px, 14vh, 150px) var(--gutter) clamp(30px, 5vh, 56px);
}

.hero__intro {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5.5vh, 56px);
}

.hero__bio {
  max-width: 44ch;
  font-size: clamp(14px, min(1.5vw, 2.9vh), 21px);
  line-height: 1.8;
  letter-spacing: 0.004em;
  opacity: 0.8;
}

.hero__title {
  font-family: var(--display);
  font-size: clamp(40px, min(10vw, 18vh), 168px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hero__line { display: block; }

.hero__word--outline {
  -webkit-text-stroke: 1.5px var(--page-ink);
  color: transparent;
}

/* Split-char rig: each glyph rides up out of a clipped box. */
/* ═══ Portrait ═════════════════════════════════════════════ */

/* Column child: the frame takes whatever height is left after the
   caption, so the picture fills the right side of the hero. */
.portrait {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.portrait__frame {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 595 / 825;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bone-2);
}

.portrait__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Classic image reveal: the frame wipes up while the picture settles
   back from a slight overscale. */
html.has-js .portrait[data-img-reveal] .portrait__frame {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s var(--ease);
}

html.has-js .portrait[data-img-reveal] .portrait__frame img {
  transform: scale(1.14);
  transition: transform 1.1s var(--ease);
}

html.has-js .portrait.is-in .portrait__frame { clip-path: inset(0 0 0 0); }
html.has-js .portrait.is-in .portrait__frame img { transform: scale(1); }

.portrait__cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-muted);
}

/* Stacked: the portrait gets a ratio back once it is no longer
   stretching to a column's height. */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: clamp(26px, 4vh, 44px);
  }
  .hero__title { align-self: start; }
  .portrait__frame { aspect-ratio: 595 / 825; }
}

.char { display: inline-block; overflow: hidden; vertical-align: top; }
.char__in { display: inline-block; will-change: transform; }

html.has-js .is-split .char__in {
  transform: translateY(105%);
}

/* ═══ Sections ═════════════════════════════════════════════ */

section { padding: clamp(54px, 9vh, 104px) var(--gutter); }

/* A full-bleed hairline at each section's top edge — the rule runs past
   the gutter, so the divide reads across the whole page. */
section + section { border-top: 1px solid var(--page-line); }

.contact { background: var(--ink); color: var(--bone); }

.contact { --page-line: var(--line-dark); --page-muted: var(--muted-dark); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: clamp(26px, 4.5vh, 48px);
  border-bottom: 1px solid var(--page-line);
}

.section-head__idx {
  font-family: var(--display);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.section-head__note {
  margin-left: auto;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--page-muted);
}

.section-head__title {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}

/* ═══ Project stack ═══════════════════════════════════════ */

/* Title only — a stack of solid rectangles, tight gap so they read as
   one block rather than six separate cards. */
.project-stack {
  list-style: none;
  display: grid;
  gap: 12px;
}

.project-row__inner {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2vh, 22px) clamp(18px, 2vw, 28px);
  background: var(--surface);
  border: 1px solid rgba(14, 14, 16, 0.06);
  border-radius: 3px;
  color: var(--ink);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
              border-color 0.28s var(--ease);
}

/* The pop. */
.project-row__inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -16px rgba(14, 14, 16, 0.4);
  border-color: rgba(14, 14, 16, 0.14);
}

.project-row__idx {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  opacity: 0.4;
  transition: color 0.28s var(--ease), opacity 0.28s var(--ease);
}

.project-row__inner:hover .project-row__idx {
  color: var(--accent);
  opacity: 1;
}

/* Uppercase display type, same as the hero and the section heads —
   title case in a 600 weight was the odd one out. */
.project-row__name {
  font-family: var(--display);
  font-size: clamp(15px, 1.55vw, 21px);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  line-height: 1.2;
}

.project-row__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Sentence case and unspaced: the line has to stay readable at 12.5px,
   which the uppercase treatment above it would not. */
.project-row__desc {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.5;
  max-width: 82ch;
}

.project-row__arrow {
  font-size: 14px;
  opacity: 0.3;
  text-align: right;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}

.project-row__inner:hover .project-row__arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

@media (max-width: 700px) {
  .project-row__inner {
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    gap: 12px;
  }
}

/* ═══ Stats ═══════════════════════════════════════════════ */

.stats-grid {
  display: grid;
  gap: clamp(34px, 5vw, 76px);
}

@media (min-width: 900px) {
  .stats-grid { grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr); }
}

.section-copy {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.025em;
  max-width: 22ch;
}

/* Stacked, each figure sitting under its own rule. */
.stats {
  list-style: none;
  display: grid;
  gap: 22px;
  align-content: start;
}

.stats li {
  padding-top: 16px;
  border-top: 1px solid var(--page-line);
}

.stats__num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stats__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--page-muted);
}

/* ═══ Quote marquee ═══════════════════════════════════════ */

.quotes {
  margin-top: clamp(34px, 5vh, 60px);
  overflow: hidden;
}

/* The cards are duplicated in the markup, so translating the track by
   exactly half its width lands set two where set one began and the loop
   is seamless. Margin rather than gap keeps that 50% exact. */
.quotes__track {
  display: flex;
  width: max-content;
  animation: quoteScroll 58s linear infinite;
}

.quotes:hover .quotes__track { animation-play-state: paused; }

@keyframes quoteScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Uniform height, width follows each screenshot's own ratio, which run
   from 0.89 to 5.28 and would be crushed by any fixed box. */
.quote {
  flex: 0 0 auto;
  margin-right: 12px;
  height: clamp(180px, 24vh, 240px);
  padding: 10px;
  background: var(--surface);
  border: 1px solid rgba(14, 14, 16, 0.06);
  border-radius: 3px;
}

.quote img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .quotes { overflow-x: auto; }
  .quotes__track { animation: none; }
}

/* ═══ Research list ═══════════════════════════════════════════ */

.research-list { list-style: none; }

.research-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 28px;
  align-items: baseline;
  padding: clamp(16px, 2.8vh, 26px) 2px;
  border-top: 1px solid var(--page-line);
}

.research-list li:last-child { border-bottom: 1px solid var(--page-line); }

.research-list__name {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 29px);
  font-weight: 400;
  letter-spacing: -0.004em;
  line-height: 1.25;
}

/* Each group is a standing heading whose entries go up once the work is
   out, so the row carries a status in place of the names for now. */
.research-list__status,
.research-aside__label {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--page-muted);
}

.research-links {
  list-style: none;
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 16px;
}

/* A button rather than an anchor, because nothing is linked yet and a
   dead href would promise a destination the page cannot deliver. */
.research-link {
  padding: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--page-ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--page-line);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.research-link:hover { color: var(--accent); border-color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  html.has-js .research-link { cursor: none; }
}

.research-grid {
  display: grid;
  gap: clamp(26px, 3.5vw, 60px);
}

@media (min-width: 900px) {
  .research-grid { grid-template-columns: minmax(190px, 0.3fr) minmax(0, 0.7fr); }
}

/* ═══ Toast ════════════════════════════════════════════════ */

.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 5vh, 48px);
  z-index: 450;
  max-width: min(90vw, 400px);
  padding: 13px 22px;
  transform: translate(-50%, 12px);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid rgba(240, 238, 232, 0.16);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-on { transform: translate(-50%, 0); }
}

/* ═══ Contact ══════════════════════════════════════════════ */

.contact__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.copy-btn {
  flex-shrink: 0;
  padding: 11px 22px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: 1px solid rgba(240, 238, 232, 0.32);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

.copy-btn:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}

.copy-btn.is-copied {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  html.has-js .copy-btn { cursor: none; }
}

.contact__link {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 6.2vw, 84px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
  word-break: break-word;
  transition: color 0.35s var(--ease);
}

.contact__link:hover { color: var(--accent); }

.site-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin-top: clamp(48px, 9vh, 92px);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--page-muted);
}

/* ═══ Reveal ═══════════════════════════════════════════════ */

html.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

html.has-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ═══ Responsive ═══════════════════════════════════════════ */

@media (max-width: 700px) {
  .section-head__note { margin-left: 0; width: 100%; }
  .site-head__nav { gap: 14px; }
  .site-head__nav a { font-size: 11px; }
  .site-head__progress { display: none; }
}

/* ═══ Reduced motion ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.has-js [data-reveal] { opacity: 1; transform: none; }
  html.has-js .is-split .char__in { transform: none; }
  .cursor { display: none; }
  html.has-js, html.has-js a { cursor: auto; }
  .preloader { display: none; }
}

/* ═══ Project detail pages ═════════════════════════════════ */

.doc {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(84px, 11vh, 118px) var(--gutter) clamp(48px, 7vh, 80px);
}

.doc__back {
  display: inline-block;
  margin-bottom: clamp(20px, 3vh, 32px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--page-muted);
  transition: color 0.25s ease;
}

.doc__back:hover { color: var(--accent); }

.doc__title {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  text-transform: uppercase;
}

.doc__lead {
  margin-top: 14px;
  max-width: 58ch;
  font-family: var(--serif);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.5;
  opacity: 0.78;
}

.doc__caveat {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--page-muted);
}

/* Metadata as one hairline-divided strip, so the facts sit in a defined
   band instead of drifting down the side of the page. */
.doc__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: clamp(26px, 4vh, 42px) 0 12px;
  background: rgba(14, 14, 16, 0.09);
  border: 1px solid rgba(14, 14, 16, 0.09);
  border-radius: 3px;
  overflow: hidden;
}

.doc__meta div { background: var(--surface); padding: 17px 20px; }

.doc__meta dt {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-muted);
  margin-bottom: 5px;
}

.doc__meta dd { font-size: 12.5px; line-height: 1.45; opacity: 0.85; }

/* Every section is its own solid panel, numbered and ruled, matching the
   project rectangles on the home page. */
.panel {
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--surface);
  border: 1px solid rgba(14, 14, 16, 0.06);
  border-radius: 3px;
}

.panel + .panel { margin-top: 12px; }

.panel__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: clamp(18px, 2.4vh, 24px);
  border-bottom: 1px solid var(--page-line);
}

.panel__idx {
  font-family: var(--display);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.panel__title {
  font-family: var(--display);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.panel p { max-width: 70ch; font-size: 14.5px; line-height: 1.72; opacity: 0.85; }
.panel p + p { margin-top: 12px; }

.doc__list { list-style: none; display: grid; gap: 12px; max-width: 72ch; }

.doc__list li {
  position: relative;
  padding-left: 17px;
  font-size: 14.5px;
  line-height: 1.65;
  opacity: 0.85;
}

.doc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 6px;
  height: 1px;
  background: var(--page-muted);
  opacity: 0.7;
}

.doc__list b { font-weight: 600; opacity: 1; }

.doc__table { width: 100%; border-collapse: collapse; max-width: 70ch; font-size: 14px; }

.doc__table th,
.doc__table td { padding: 11px 14px 11px 0; text-align: left; border-bottom: 1px solid var(--page-line); }

.doc__table tr:last-child td { border-bottom: none; }

.doc__table th {
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-muted);
}

.doc__table td { font-variant-numeric: tabular-nums; }
.doc__table tr td:first-child { opacity: 0.85; }
.doc__table .is-key { font-weight: 600; color: var(--accent); }

.doc__figs { display: grid; gap: 12px; }

@media (min-width: 720px) {
  .doc__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.doc__fig {
  padding: 12px;
  background: var(--bg);
  border: 1px solid rgba(14, 14, 16, 0.07);
  border-radius: 3px;
}

.doc__fig img { display: block; width: 100%; height: auto; border-radius: 2px; }

.doc__fig figcaption {
  margin-top: 9px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--page-muted);
}