/* Condei — condei.app
   Tokens, type and motion follow ../Condei/docs/design-direction.md.
   Nothing here loads from a third party: the fonts are self-hosted and there
   are no analytics, no cookies and no external requests of any kind. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-display.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Latin only; the wordmark is outlined SVG and never depends on a font. */
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}

@font-face {
  font-family: "Karla";
  src: url("fonts/karla-text.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2026;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* Colour — the light column of design-direction.md. */
  --ground: #FBFAF8;
  --raised: #FFFFFF;
  --ink: #1B2A41;
  --sub: #68625B;
  --line: #E5DACA;
  --accent: #9C7A45;   /* brass, darkened — the only brass that carries text */
  --brass: #B8935B;    /* brass at full strength — surfaces, dots, the nib */
  --brand: #F6EFE4;    /* parchment: brand moments only */
  --sel: rgba(156, 122, 69, 0.12);
  --glow: rgba(184, 147, 91, 0.16);
  --shadow: 0 1px 1px rgba(27, 42, 65, 0.03), 0 12px 32px -14px rgba(27, 42, 65, 0.16);

  /* Type scale — a major third (1.25), fluid between 320px and 1440px. */
  --t-micro: 0.8125rem;                                   /* 13 */
  --t-small: 0.875rem;                                    /* 14 */
  --t-body: 1.0625rem;                                    /* 17 */
  --t-lede: clamp(1.125rem, 1.04rem + 0.42vw, 1.3125rem); /* 18 → 21 */
  --t-h3: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);  /* 17 → 19 */
  --t-h2: clamp(1.75rem, 1.35rem + 2vw, 2.625rem);        /* 28 → 42 */
  --t-display: clamp(1.9375rem, 1.35rem + 2.9vw, 3.25rem);/* 31 → 52 */
  --t-numeral: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24 → 30 */

  /* Space — 4px base, used everywhere so the vertical rhythm is deliberate. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --s-section: clamp(64px, 3rem + 4vw, 120px);

  --gutter: clamp(20px, 1rem + 2.4vw, 64px);
  --measure: 62ch;
  --radius: 14px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141518;
    --raised: #1D1F24;
    --ink: #ECEDEF;
    --sub: #9A9DA4;
    --line: #2A2D34;
    --accent: #C9A366;
    --brass: #C9A366;
    --brand: #1C1A17;   /* warm near-black, so brand moments stay warm */
    --sel: rgba(201, 163, 102, 0.16);
    --glow: rgba(201, 163, 102, 0.10);
    --shadow: 0 0 0 1px var(--line), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

/* ----------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--sel); }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, p, ul, figure { margin: 0; }

ul { padding: 0; list-style: none; }

/* Fraunces is display only. opsz and WONK are what make it feel expensive,
   so they are set per size rather than left to the browser's default (9). */
.display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  letter-spacing: -0.021em;
  line-height: 1.1;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: calc(1240px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 20;
  transform: translateY(-140%);
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  padding: 10px 18px;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus-visible { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------- header */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: clamp(18px, 1rem + 1vw, 30px);
}

.mark-link { display: block; line-height: 0; border-radius: 4px; }
.mark-link svg { height: 26px; width: calc(26px * 4.384); color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 30px); }

.nav a {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--sub);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms linear;
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }

/* Narrow screens: the wordmark takes its own line and the links centre under
   it, rather than four labels crushing against a 20px gutter. */
@media (max-width: 599px) {
  .masthead { flex-direction: column; gap: 14px; }
  .nav { flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
  .nav a { font-size: var(--t-micro); }
}

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

/* The masthead sits on the same parchment as the hero, so the brand band runs
   from the top of the page and the nib has room to write above the wordmark. */
.masthead-outer { background: var(--brand); }

.hero {
  position: relative;
  background: var(--brand);
  border-bottom: 1px solid var(--line);
}

/* A quiet brass glow behind the mark — the only "depth" in the hero.
   No gradient wash, no texture: design-direction.md rules paper texture out. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 52% at 50% 40%, var(--glow), transparent 68%);
  pointer-events: none;
}

.hero > .wrap { position: relative; }

.hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(74vh, 620px);
  padding-block: clamp(44px, 2rem + 5vw, 120px) clamp(56px, 2.5rem + 5vw, 116px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub);
}
/* The brass dot: the wordmark's own full stop, reused as the page's motif. */
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

/* The wordmark, and the stage the nib writes on. */
.hero-figure {
  position: relative;
  --wm-h: clamp(46px, 2rem + 4.2vw, 92px);
  margin-block: clamp(26px, 1rem + 2.4vw, 52px) clamp(24px, 1rem + 2vw, 44px);
}

.hero-figure h1 { margin: 0; line-height: 0; }

.wordmark-svg {
  height: var(--wm-h);
  width: calc(var(--wm-h) * 4.384);
  color: var(--ink);
  overflow: visible;
}

.penstage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--wm-h) * 3.3);
  height: calc(var(--wm-h) * 3.3);
  margin-left: calc(var(--wm-h) * -1.65);
  margin-top: calc(var(--wm-h) * -2.9);
  color: var(--ink);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
.nib-body { fill: var(--brass); }
.nib-cut { stroke: var(--brand); stroke-width: 7; stroke-linecap: round; fill: none; }
.nib-hole { fill: var(--brand); }

/* Sized once and moved with transform alone, so the travelling dot never
   triggers layout. Its centre sits at the hero figure's origin. */
.flydot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: var(--brass);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Optical size stepped with the type size, the way a metal cut would change:
   the display cut's hairlines are too fragile at 31px, so small screens get a
   sturdier one. WONK gives the display line Fraunces' quirked forms. */
.tagline {
  font-size: var(--t-display);
  line-height: 1.14;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
  font-variation-settings: "opsz" 54, "SOFT" 0, "WONK" 1;
}
.opt-break { display: none; }

@media (min-width: 700px) {
  .tagline { font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 1; max-width: none; }
  .opt-break { display: inline; }
}
@media (min-width: 1100px) {
  .tagline { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; }
}

.statement {
  margin-top: clamp(20px, 1rem + 1.2vw, 30px);
  max-width: 48ch;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--sub);
  text-wrap: pretty;
}

/* Availability. Deliberately an object in its own right — a plate with the app
   icon and the platform line — rather than the gap where store badges were. */
.availability {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: clamp(32px, 1.5rem + 2.4vw, 56px);
  padding: 14px clamp(18px, 1.4vw, 26px) 14px 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  text-align: left;
}
.availability img { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.availability span {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
  line-height: 1.4;
}
.availability b {
  display: block;
  margin-top: 2px;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ------------------------------------------------------------ dot rule */

/* A hairline that stops at a brass dot. Derived from the wordmark's full stop;
   it marks the start of a section the way the dot closes the word. */
.dot-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(24px, 1rem + 1.6vw, 40px);
}
.dot-rule::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}
.dot-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

/* ---------------------------------------------------------- how it works */

.how { padding-block: var(--s-section); }

.how-head { max-width: 46ch; }
/* Section headings sit near their true optical size, so the crossbars stay
   sturdy; only the hero line is set from the display cut. */
.how-head h2 { font-size: var(--t-h2); font-weight: 600; font-variation-settings: "opsz" 30, "SOFT" 0, "WONK" 0; }
@media (min-width: 700px) {
  .how-head h2 { font-variation-settings: "opsz" 46, "SOFT" 0, "WONK" 0; }
}
@media (min-width: 1100px) {
  .how-head h2 { font-variation-settings: "opsz" 64, "SOFT" 0, "WONK" 0; }
}
.how-head p {
  margin-top: var(--s-4);
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--sub);
  text-wrap: pretty;
}

/* An editorial grid, not four floating cards: each point opens under its own
   hairline, the way a column opens under a rule. Depth in this brand is a 1px
   line and a warm ground, never a drop shadow.
   The rules are horizontal on purpose — a 1px vertical border between
   fractional-width grid tracks is rounded away by the browser and vanishes. */
.points {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 1.5rem + 1.4vw, 52px) clamp(24px, 1rem + 2.2vw, 56px);
  margin-top: clamp(40px, 2rem + 2.4vw, 72px);
}

.point {
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 0.9rem + 0.7vw, 28px);
  display: flex;
  flex-direction: column;
}

.point .n {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-size: var(--t-numeral);
  line-height: 1;
  letter-spacing: 0.015em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
  margin-bottom: clamp(14px, 0.6rem + 0.7vw, 22px);
}

.point h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin-bottom: var(--s-3);
}

.point p {
  font-size: clamp(0.875rem, 0.83rem + 0.14vw, 0.9375rem);
  line-height: 1.62;
  color: var(--sub);
  max-width: 42ch;
  text-wrap: pretty;
}

@media (min-width: 680px) {
  .points { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .points { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------- privacy */

.privacy {
  background: var(--brand);
  border-block: 1px solid var(--line);
}
.privacy .wrap {
  padding-block: clamp(40px, 2rem + 2vw, 68px);
  display: flex;
  justify-content: center;
}
.privacy p {
  max-width: 58ch;
  text-align: center;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: balance;
}
.privacy b { font-weight: 700; }

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

.site-footer { padding-block: clamp(40px, 2rem + 2vw, 72px) clamp(32px, 2rem + 1vw, 56px); }

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6) var(--s-8);
}

.footer-top svg { height: 24px; width: calc(24px * 4.384); color: var(--ink); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2vw, 32px);
}
.footer-nav a {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--sub);
  text-decoration: none;
  transition: color 120ms linear;
}
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ink); }

.footer-bottom {
  margin-top: clamp(28px, 2rem + 1vw, 44px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  font-size: var(--t-small);
  color: var(--sub);
}
.footer-bottom a {
  color: var(--sub);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms linear, border-color 120ms linear;
}
.footer-bottom a:hover, .footer-bottom a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--line);
}

/* ------------------------------------------------------------------ 404 */

.notfound { min-height: 68vh; display: flex; flex-direction: column; justify-content: center; }
.notfound .wrap { padding-block: var(--s-section); }
.notfound h1 { font-size: var(--t-h2); font-weight: 600; font-variation-settings: "opsz" 64, "SOFT" 0, "WONK" 0; }
.notfound p { margin-top: var(--s-4); max-width: 48ch; font-size: var(--t-lede); color: var(--sub); }
.notfound .back {
  display: inline-block;
  margin-top: var(--s-6);
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--brass);
  color: #1B2A41;              /* ink label on brass — about 5:1, per the brand rules */
  font-weight: 700;
  font-size: var(--t-body);
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .notfound .back { color: #141518; }
}

/* --------------------------------------------------- the launch sequence */

/* Set by the inline head script only when the sequence is about to play, so a
   page with no JavaScript, or a second visit in the same session, renders
   complete and static. Opacity only — nothing here can shift layout. */
html[data-launch] .hero-figure h1 .wm-l,
html[data-launch] .hero-figure h1 #wmC,
html[data-launch] .hero-figure h1 #wmDot,
html[data-launch] .rise {
  opacity: 0;
}

.rise { will-change: transform, opacity; }

.skiphint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2vw, 28px);
  text-align: center;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub);
  opacity: 0;
  pointer-events: none;
}

/* Content below the hero arrives once, the first time it is scrolled into
   view, and never re-animates on a second pass. */
html.js .reveal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- long-form document pages -----------------------------------------
   privacy.html, terms.html, support.html, delete-account.html — all four
   are generated by scripts/build-pages.mjs from docs/*.md. Nothing page-
   specific lives here: nothing below should ever reference a page by name. */

/* The current page's link in the site header/footer nav (see nav()/footer
   nav in build-pages.mjs, which sets aria-current="page"). */
.nav a[aria-current="page"],
.footer-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 0 var(--brass);
}

/* A compact masthead: eyebrow, the document's own <h1>, an optional
   "Effective ..." line, then whatever the Markdown had before its first
   section heading (a draft notice, front-matter fields, an intro line). */
.doc-hero {
  background: var(--brand);
  border-bottom: 1px solid var(--line);
}
.doc-hero .wrap {
  padding-block: clamp(40px, 2rem + 4vw, 84px) clamp(36px, 2rem + 2vw, 56px);
}
.doc-hero .eyebrow { margin-bottom: var(--s-4); }
.doc-hero h1 {
  font-size: var(--t-h2);
  font-weight: 600;
  font-variation-settings: "opsz" 64, "SOFT" 0, "WONK" 0;
  color: var(--ink);
  max-width: 26ch;
}
.doc-updated {
  margin-top: var(--s-4);
  display: inline-flex;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--sub);
}
.doc-updated code {
  margin-left: 6px;
}

.doc-intro {
  margin-top: var(--s-5);
  max-width: 62ch;
}
.doc-intro > :first-child { margin-top: 0; }
.doc-intro p { font-size: var(--t-lede); line-height: 1.55; color: var(--sub); }
.doc-intro strong { color: var(--ink); }

/* The reading layout: a sticky table of contents beside a measured column
   of prose on wide screens; a single inline column, contents first, on
   narrow ones. */
.doc-layout {
  padding-block: clamp(32px, 2rem + 2vw, 56px) var(--s-section);
}

.doc-toc {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.doc-toc-h {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: var(--s-3);
}
.doc-toc ul { display: flex; flex-direction: column; gap: 2px; }
.doc-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--line);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--sub);
  text-decoration: none;
  transition: color 120ms linear, border-color 120ms linear;
}
.doc-toc a:hover, .doc-toc a:focus-visible { color: var(--ink); border-left-color: var(--brass); }
.doc-toc code { font-size: 0.9em; }

.doc-body { max-width: 70ch; }

.doc-body h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-variation-settings: "opsz" 46, "SOFT" 0, "WONK" 0;
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-top: clamp(48px, 2.5rem + 1.4vw, 72px);
  padding-top: clamp(28px, 1.4rem + 1vw, 44px);
  border-top: 1px solid var(--line);
}
.doc-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.doc-body h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin-top: var(--s-7);
}

.doc-body p {
  margin-top: var(--s-4);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.doc-body > p:first-child { margin-top: 0; }

.doc-body ul, .doc-body ol {
  margin-top: var(--s-4);
  padding-left: 1.35em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-body li { font-size: var(--t-body); line-height: 1.65; color: var(--ink); }
.doc-body li::marker { color: var(--accent); font-weight: 700; }
.doc-body strong { font-weight: 700; }
.doc-body em { font-style: italic; }

.doc-body blockquote {
  margin: var(--s-5) 0 0 0;
  padding: var(--s-4) var(--s-5);
  background: var(--raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.doc-body blockquote p { color: var(--sub); font-size: var(--t-small); line-height: 1.6; }
.doc-body blockquote p:first-child { margin-top: 0; }
.doc-body blockquote strong { color: var(--ink); }

.doc-body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
  color: var(--ink);
  background: var(--sel);
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

.doc-body pre {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.doc-body pre code { background: none; padding: 0; }

.doc-hr {
  margin: var(--s-7) 0 0 0;
  border: none;
  border-top: 1px solid var(--line);
}

/* Tables scroll on their own — the page itself never gains horizontal
   scroll, whatever the table's column count. */
.table-scroll {
  margin-top: var(--s-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc-body table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}
.doc-body th {
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  padding: 0 var(--s-4) 10px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.doc-body td {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink);
  padding: 12px var(--s-4) 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.doc-body td.k { font-weight: 700; width: 38%; }
.doc-body tr:last-child td { border-bottom: 0; }

@media (min-width: 900px) {
  .doc-layout { display: flex; align-items: flex-start; gap: clamp(40px, 4vw, 88px); }
  .doc-toc {
    flex: none;
    width: 240px;
    position: sticky;
    top: var(--s-5);
    margin-bottom: 0;
  }
  .doc-body { flex: 1 1 auto; min-width: 0; }
}