/* Primitive → semantic → component layout tokens. Shared by every public page. */
:root {
  --space-5: 20px;
  --space-8: 32px;
  --space-16: 64px;
  --space-page-fluid: clamp(var(--space-5), 4vw, var(--space-16));
  --size-content: 1200px;
  --size-reading: 68ch;
  --layout-content-max: var(--size-content);
  --layout-page-gutter: var(--space-page-fluid);
  --layout-section-space: var(--space-16);
  --layout-grid-gap: var(--space-8);
  --layout-reading-max: var(--size-reading);
  --layout-component-space: var(--space-8);
  --card-padding: var(--layout-component-space);
  --card-gap: var(--layout-grid-gap);
}

@media (max-width: 760px) {
  :root {
    --layout-section-space: var(--space-8);
    --layout-component-space: var(--space-5);
  }
}

body { min-height: 100svh; display: flex; flex-direction: column; }
#tm-main { flex: 1; }

/* Choose either a centered container or a full-width band with aligned content.
   Do not nest these primitives: doing so would apply the page gutter twice. */
.ds-container {
  width: min(var(--layout-content-max), calc(100% - 2 * var(--layout-page-gutter)));
  margin-inline: auto;
}
.ds-band {
  padding-inline: max(var(--layout-page-gutter), calc((100% - var(--layout-content-max)) / 2));
}
.ds-section { padding-block: var(--layout-section-space); }
.ds-page-heading { max-width: var(--layout-reading-max); margin-bottom: var(--layout-grid-gap); }
.ds-page-heading h1 { font-size: clamp(34px, 4vw, 56px); font-weight: 600; line-height: 1.2; letter-spacing: -.05em; }
.ds-page-heading p { color: var(--muted); }
.ds-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-8); color: var(--muted); font-size: 14px; }
.ds-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.ds-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--card-gap); }
.ds-card { display: flex; flex-direction: column; min-width: 0; padding: var(--card-padding); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ds-card h2 { font-size: 24px; line-height: 1.4; letter-spacing: -.03em; }
.ds-card p { color: var(--muted); }
.ds-card .text-link { align-self: flex-start; margin-top: auto; }
.ds-meta { color: var(--muted); font-size: 14px; }
.ds-prose { max-width: var(--layout-reading-max); overflow-wrap: anywhere; font-size: 18px; line-height: 1.85; }
.ds-prose h2 { margin-top: var(--space-8); font-size: 28px; line-height: 1.4; letter-spacing: -.03em; }
.ds-prose p { margin-bottom: var(--space-5); }
.ds-soft { background: var(--soft); }