/* =========================================================================
   MWS ECOSYSTEM DESIGN SYSTEM — v1 (candidate)
   One system, four properties. Derived from the Couch Commons ruled design
   08 "Poster" (residency/DESIGN.md, 2026-08-17): type is the design, no
   cards-with-soft-shadows, one accent, restraint, receipts as documents.

   Structure of this file:
     0. Tokens (:root defaults = Couch Commons Poster)
     1. Reset + base
     2. Type scale
     3. Layout: containers, grid, section
     4. Components (alphabetical-ish, see README component index)
     5. Utilities
     6. Motion + reduced motion + forced colors + print

   Color is a THEME LAYER. themes/*.css override token VALUES only; never
   selectors, never structure. Do not add a color literal below this token
   block — every color in this file resolves through a --ds-* token.
   ========================================================================= */

/* ── 0. Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* ground + ink */
  --ds-ground: #111111;
  --ds-ground-alt: #161616;
  --ds-panel: #181818;
  --ds-panel-deep: #1f1f1f;
  --ds-ink: #f5f2ec;
  --ds-ink-strong: #ece8e0;
  --ds-ink-secondary: #8c8c86;

  /* the one accent + the ink that is legible ON it */
  --ds-accent: #c6f24e;
  --ds-accent-deep: #a9d63e;
  --ds-accent-surface: #1c2410;
  --ds-on-accent: #111111;

  /* hairlines */
  --ds-line: rgba(245, 242, 236, 0.16);
  --ds-line-soft: rgba(245, 242, 236, 0.08);
  --ds-line-strong: var(--ds-ink);

  /* state (never hue-only: every state also carries a text label) */
  --ds-ok: #c6f24e;
  --ds-warn: #e8c46a;
  --ds-error: #ff8f7a;

  /* atmosphere */
  --ds-grain-opacity: 0.035;
  --ds-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --ds-media-filter: grayscale(1) contrast(1.25) brightness(0.72);
  --ds-media-blend: luminosity;
  --ds-media-opacity: 0.55;

  /* typography */
  --ds-font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --ds-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-body: var(--ds-font-ui);
  --ds-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ds-display-transform: uppercase;
  --ds-display-tracking: -0.05em;
  --ds-display-leading: 0.84;

  /* type scale (1.25 ratio, fluid at the top) */
  --ds-text-xs: 0.8rem;
  --ds-text-sm: 0.9rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.25rem;
  --ds-text-xl: 1.563rem;
  --ds-text-2xl: 1.953rem;
  --ds-text-3xl: 2.441rem;
  --ds-display-1: clamp(46px, 11vw, 132px);
  --ds-display-2: clamp(34px, 6vw, 64px);
  --ds-display-3: clamp(24px, 3.4vw, 36px);
  --ds-meta-size: 11.5px;
  --ds-meta-tracking: 0.16em;

  /* spacing (4px base) */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-24: 6rem;

  /* layout */
  --ds-content-max: 70rem;
  --ds-prose-max: 38rem;
  --ds-gutter: var(--ds-space-6);
  --ds-radius: 0px; /* Poster: square. Themes may lift this, sparingly. */

  /* motion */
  --ds-ease: cubic-bezier(0.25, 0.6, 0.3, 1);
  --ds-dur-quick: 140ms;
  --ds-dur-gentle: 260ms;

  /* breakpoints (documentation only — CSS cannot use vars in media queries) */
  --ds-bp-narrow: 28rem;
  --ds-bp-panel: 38rem;
  --ds-bp-wide: 64rem;

  /* a11y floors */
  --ds-touch-min: 44px;
  --ds-focus-ring: 2px solid var(--ds-accent);
  --ds-focus-offset: 3px;
}

/* ── 1. Reset + base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: 1.6;
  color: var(--ds-ink);
  background-color: var(--ds-ground);
  background-image: var(--ds-grain-image);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--ds-accent);
  text-decoration-color: color-mix(in srgb, var(--ds-accent) 55%, transparent);
  text-underline-offset: 3px;
}
a:hover { color: var(--ds-ink); }
a:visited { color: var(--ds-accent-deep); }
.ds-nav a:visited, .ds-footer a:visited, .ds-btn:visited { color: inherit; }

::selection { background: var(--ds-accent-surface); color: var(--ds-ink); }

:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}

hr {
  border: 0;
  border-top: 1px solid var(--ds-line);
  margin: var(--ds-space-12) 0;
}

/* ── 2. Type ───────────────────────────────────────────────────────────── */
.ds-display,
h1.ds-display, h2.ds-display {
  font-family: var(--ds-font-display);
  font-weight: 400;
  text-transform: var(--ds-display-transform);
  letter-spacing: var(--ds-display-tracking);
  line-height: var(--ds-display-leading);
  margin: 0 0 var(--ds-space-4);
  color: var(--ds-ink);
}
.ds-display--1 { font-size: var(--ds-display-1); }
.ds-display--2 { font-size: var(--ds-display-2); }
.ds-display--3 { font-size: var(--ds-display-3); letter-spacing: -0.03em; line-height: 0.94; }
.ds-display--accent { color: var(--ds-accent); }

/* The "second weight": outlined display type. DECORATIVE ONLY — it must never
   carry information not also present as solid type (forced-colors erases it). */
.ds-display--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ds-ink);
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--ds-space-3); }

h1 {
  font-family: var(--ds-font-display);
  font-weight: 400;
  text-transform: var(--ds-display-transform);
  letter-spacing: var(--ds-display-tracking);
  line-height: var(--ds-display-leading);
  font-size: var(--ds-display-2);
  color: var(--ds-accent);
}
h2 {
  font-family: var(--ds-font-display);
  font-weight: 400;
  text-transform: var(--ds-display-transform);
  letter-spacing: -0.03em;
  line-height: 0.94;
  font-size: var(--ds-display-3);
  color: var(--ds-ink);
}
h3, h4, h5, h6 {
  font-family: var(--ds-font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
}
h3 { font-size: var(--ds-text-base); }
h4 { font-size: var(--ds-text-sm); color: var(--ds-ink-secondary); }
h5, h6 { font-size: var(--ds-text-xs); color: var(--ds-ink-secondary); }

p { margin: 0 0 var(--ds-space-4); }
p:last-child { margin-bottom: 0; }

.ds-meta {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ds-ink-secondary);
  margin: 0 0 var(--ds-space-3);
}
.ds-lede { font-size: var(--ds-text-lg); line-height: 1.5; }
.ds-quiet { color: var(--ds-ink-secondary); }
.ds-mono { font-family: var(--ds-font-mono); font-size: 0.95em; }

code, kbd, samp {
  font-family: var(--ds-font-mono);
  font-size: 0.9em;
  background: var(--ds-panel);
  padding: 0.1em 0.35em;
  border: 1px solid var(--ds-line-soft);
}
pre { overflow-x: auto; background: var(--ds-panel); padding: var(--ds-space-4); border: 1px solid var(--ds-line-soft); }
pre code { background: none; border: 0; padding: 0; }

blockquote {
  margin: var(--ds-space-8) 0;
  padding-left: var(--ds-space-6);
  border-left: 2px solid var(--ds-accent);
  font-size: var(--ds-text-lg);
}

/* ── 3. Layout ─────────────────────────────────────────────────────────── */
.ds-container {
  width: 100%;
  max-width: var(--ds-content-max);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}
.ds-container--narrow { max-width: 48rem; }
.ds-container--prose { max-width: var(--ds-prose-max); }

.ds-section { padding-block: var(--ds-space-16); border-top: 1px solid var(--ds-line-soft); }
.ds-section--flush { border-top: 0; }
.ds-section--loud { padding-block: var(--ds-space-24); }
.ds-section__head { margin-bottom: var(--ds-space-8); }

.ds-grid { display: grid; gap: var(--ds-space-6); grid-template-columns: repeat(12, 1fr); }
.ds-grid > .ds-col-4,
.ds-grid > .ds-col-6,
.ds-grid > .ds-col-8,
.ds-grid > .ds-col-12 { grid-column: span 12; }

@media (min-width: 38rem) {
  .ds-grid > .ds-col-4 { grid-column: span 6; }
  .ds-grid > .ds-col-6 { grid-column: span 6; }
}
@media (min-width: 64rem) {
  .ds-grid > .ds-col-4 { grid-column: span 4; }
  .ds-grid > .ds-col-6 { grid-column: span 6; }
  .ds-grid > .ds-col-8 { grid-column: span 8; }
}

.ds-stack > * + * { margin-top: var(--ds-space-4); }
.ds-stack--loose > * + * { margin-top: var(--ds-space-8); }

/* ── 4. Components ─────────────────────────────────────────────────────── */

/* 4.1 skip link */
.ds-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  min-height: var(--ds-touch-min);
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  font: 700 12px/1 var(--ds-font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transform: translateY(-200%);
}
.ds-skip:visited { color: var(--ds-on-accent); }
.ds-skip:focus { transform: translateY(0); }

/* 4.2 header + nav — responsive, no JS required.
   Narrow: the nav wraps under the wordmark and scrolls horizontally.
   There is no hamburger; nothing is hidden behind script. */
.ds-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ds-ground);
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-header__inner {
  max-width: var(--ds-content-max);
  margin-inline: auto;
  padding: var(--ds-space-3) var(--ds-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
}
.ds-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-touch-min);
  font-family: var(--ds-font-display);
  text-transform: var(--ds-display-transform);
  letter-spacing: -0.03em;
  font-size: var(--ds-text-lg);
  color: var(--ds-ink);
  text-decoration: none;
}
.ds-wordmark:visited, .ds-wordmark:hover { color: var(--ds-ink); }

.ds-nav { display: flex; align-items: center; gap: var(--ds-space-2); }
.ds-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
}
.ds-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch-min);
  padding: 0 var(--ds-space-3);
  white-space: nowrap;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ds-ink-secondary);
  text-decoration: none;
}
.ds-nav__link:hover { color: var(--ds-ink); }
.ds-nav__link[aria-current="page"] {
  color: var(--ds-accent);
  box-shadow: inset 0 -2px 0 var(--ds-accent);
}

/* 4.3 footer, with the cross-property links slot */
.ds-footer {
  border-top: 1px solid var(--ds-line);
  margin-top: var(--ds-space-24);
  padding-block: var(--ds-space-12);
  font-size: var(--ds-text-sm);
}
.ds-footer__grid {
  display: grid;
  gap: var(--ds-space-8);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.ds-footer h3 { color: var(--ds-ink-secondary); }
.ds-footer ul { list-style: none; margin: 0; padding: 0; }
.ds-footer li + li { margin-top: var(--ds-space-2); }
.ds-footer a { color: var(--ds-ink); text-decoration-color: var(--ds-line); }
.ds-footer a:hover { color: var(--ds-accent); }
.ds-footer__legal {
  margin-top: var(--ds-space-8);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-line-soft);
  color: var(--ds-ink-secondary);
  font-size: var(--ds-text-xs);
}
/* cross-property slot: the four sites link to each other from one block */
.ds-crosslinks { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); list-style: none; margin: 0; padding: 0; }
.ds-crosslinks a {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 600;
}

/* 4.4 hero — text first. The media slot is optional and sits BEHIND the type. */
.ds-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--ds-space-24) var(--ds-space-16);
  overflow: hidden;
}
.ds-hero__inner { position: relative; z-index: 2; max-width: var(--ds-content-max); margin-inline: auto; padding-inline: var(--ds-gutter); }
.ds-hero__title { font-size: var(--ds-display-1); }
.ds-hero__lede { max-width: var(--ds-prose-max); font-size: var(--ds-text-lg); color: var(--ds-ink); margin-top: var(--ds-space-6); }
.ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: var(--ds-space-8); }
/* media slot: accepts an <img> poster or a rotator of <img>/<video> children.
   No media files ship with this system; the slot is empty by default. */
.ds-hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 64rem) { .ds-hero__media { width: 46%; } }
.ds-hero__media > img,
.ds-hero__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--ds-media-filter);
  mix-blend-mode: var(--ds-media-blend);
  opacity: var(--ds-media-opacity);
}
.ds-hero__media--rotator > * { position: absolute; inset: 0; opacity: 0; transition: opacity var(--ds-dur-gentle) var(--ds-ease); }
.ds-hero__media--rotator > [data-active] { opacity: var(--ds-media-opacity); }

/* 4.5 prose */
.ds-prose { max-width: var(--ds-prose-max); font-size: 17px; line-height: 1.7; }
.ds-prose > * + * { margin-top: var(--ds-space-4); }
.ds-prose h2 { margin-top: var(--ds-space-12); }
.ds-prose h3 { margin-top: var(--ds-space-8); }
.ds-prose ul, .ds-prose ol { padding-left: 1.25rem; }
.ds-prose li + li { margin-top: var(--ds-space-2); }

/* 4.6 dated-claim / receipt — renders as a DOCUMENT, never a badge.
   Rules: bordered top and bottom in ink, generous padding, a label grid of
   claim / checked / source / standing. Status is never hue-only: every state
   carries a text label. (DESIGN.md, "The receipt — set as a document") */
.ds-receipt {
  border-top: 2px solid var(--ds-line-strong);
  border-bottom: 2px solid var(--ds-line-strong);
  padding-block: var(--ds-space-8);
  margin-block: var(--ds-space-12);
  background: none;
  box-shadow: none;
}
.ds-receipt__claim {
  font-family: var(--ds-font-display);
  text-transform: var(--ds-display-transform);
  letter-spacing: -0.03em;
  line-height: 0.96;
  font-size: var(--ds-display-3);
  margin: 0 0 var(--ds-space-6);
  color: var(--ds-ink);
}
.ds-receipt__grid {
  display: grid;
  gap: var(--ds-space-4) var(--ds-space-8);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0;
}
.ds-receipt__grid dt {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ds-ink-secondary);
  margin-bottom: var(--ds-space-1);
}
.ds-receipt__grid dd { margin: 0; font-variant-numeric: tabular-nums; }
.ds-receipt__state { font-weight: 700; }
.ds-receipt__state[data-state="verified"] { color: var(--ds-accent); }
.ds-receipt__state[data-state="attested"],
.ds-receipt__state[data-state="stale"] { color: var(--ds-ink-secondary); }

/* 4.7 definition list */
.ds-dl { display: grid; gap: var(--ds-space-4) var(--ds-space-8); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0; }
.ds-dl dt {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ds-ink-secondary);
}
.ds-dl dd { margin: var(--ds-space-1) 0 0; }

/* 4.8 FAQ (details/summary, no JS) */
.ds-faq { border-top: 1px solid var(--ds-line); }
.ds-faq__item { border-bottom: 1px solid var(--ds-line); }
.ds-faq__item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  min-height: var(--ds-touch-min);
  padding-block: var(--ds-space-4);
  font-family: var(--ds-font-ui);
  font-weight: 600;
  font-size: var(--ds-text-base);
  color: var(--ds-ink);
}
.ds-faq__item > summary::-webkit-details-marker { display: none; }
.ds-faq__item > summary::after { content: "+"; font-family: var(--ds-font-mono); color: var(--ds-accent); font-size: 1.25rem; }
.ds-faq__item[open] > summary::after { content: "–"; }
.ds-faq__body { padding-bottom: var(--ds-space-6); max-width: var(--ds-prose-max); color: var(--ds-ink); }

/* 4.9 steps / how it works — numbered, ruled, no cards */
.ds-steps { list-style: none; margin: 0; padding: 0; counter-reset: ds-step; display: grid; gap: 0; }
.ds-steps__item {
  counter-increment: ds-step;
  border-top: 1px solid var(--ds-line);
  padding-block: var(--ds-space-6);
  display: grid;
  gap: var(--ds-space-2) var(--ds-space-6);
  grid-template-columns: 3.5rem 1fr;
}
.ds-steps__item:last-child { border-bottom: 1px solid var(--ds-line); }
.ds-steps__item::before {
  content: counter(ds-step, decimal-leading-zero);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  line-height: 1;
  color: var(--ds-accent);
  grid-row: span 2;
}
.ds-steps__title { margin: 0; font-family: var(--ds-font-ui); font-size: var(--ds-text-lg); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ds-ink); }
.ds-steps__body { margin: 0; max-width: var(--ds-prose-max); }

/* 4.10 pricing block */
.ds-pricing { border-top: 2px solid var(--ds-line-strong); border-bottom: 2px solid var(--ds-line-strong); padding-block: var(--ds-space-8); }
.ds-pricing__figure {
  font-family: var(--ds-font-display);
  font-size: var(--ds-display-2);
  line-height: 0.9;
  letter-spacing: var(--ds-display-tracking);
  text-transform: var(--ds-display-transform);
  color: var(--ds-accent);
  margin: 0 0 var(--ds-space-3);
}
.ds-pricing__terms { list-style: none; margin: 0 0 var(--ds-space-6); padding: 0; max-width: var(--ds-prose-max); }
.ds-pricing__terms li { padding-left: 1.25rem; position: relative; }
.ds-pricing__terms li + li { margin-top: var(--ds-space-2); }
.ds-pricing__terms li::before { content: "→"; position: absolute; left: 0; color: var(--ds-accent); }

/* 4.11 comparison table — scrolls inside its own container */
.ds-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); min-width: 34rem; }
.ds-table caption { text-align: left; padding-block: var(--ds-space-3); color: var(--ds-ink-secondary); font-size: var(--ds-text-xs); }
.ds-table th, .ds-table td { text-align: left; padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-line-soft); vertical-align: top; }
.ds-table thead th {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  color: var(--ds-ink-secondary);
  border-bottom: 1px solid var(--ds-line);
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table th[scope="row"] { font-weight: 600; color: var(--ds-ink); }

/* 4.12 CTA band */
.ds-cta {
  border-top: 2px solid var(--ds-line-strong);
  border-bottom: 2px solid var(--ds-line-strong);
  padding-block: var(--ds-space-16);
  margin-block: var(--ds-space-24);
}
.ds-cta__title { font-size: var(--ds-display-3); margin-bottom: var(--ds-space-4); }
.ds-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: var(--ds-space-6); }

/* 4.13 buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-touch-min);
  padding: 0 var(--ds-space-6);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-dur-quick) var(--ds-ease), color var(--ds-dur-quick) var(--ds-ease);
}
.ds-btn:visited { color: var(--ds-on-accent); }
.ds-btn:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); color: var(--ds-on-accent); }
.ds-btn--ghost { background: none; color: var(--ds-ink); border-color: var(--ds-line); }
.ds-btn--ghost:visited { color: var(--ds-ink); }
.ds-btn--ghost:hover { background: none; border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-btn--quiet { background: none; border-color: transparent; color: var(--ds-accent); padding-inline: 0; }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* 4.14 form */
.ds-form { max-width: var(--ds-prose-max); }
.ds-field + .ds-field { margin-top: var(--ds-space-6); }
.ds-field label {
  display: block;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ds-ink-secondary);
  margin-bottom: var(--ds-space-2);
}
.ds-field__hint { font-size: var(--ds-text-xs); color: var(--ds-ink-secondary); margin-top: var(--ds-space-2); }
.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  min-height: var(--ds-touch-min);
  padding: var(--ds-space-3) var(--ds-space-4);
  font: inherit;
  color: var(--ds-ink);
  background: var(--ds-panel);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
}
.ds-textarea { min-height: 8rem; resize: vertical; }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible { border-color: var(--ds-accent); }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-ink-secondary); }
.ds-field__error {
  display: block;
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-error);
}
.ds-field[data-state="error"] .ds-input,
.ds-field[data-state="error"] .ds-select,
.ds-field[data-state="error"] .ds-textarea { border-color: var(--ds-error); border-width: 2px; }
.ds-field[data-state="success"] .ds-input { border-color: var(--ds-ok); border-width: 2px; }
.ds-field__success { display: block; margin-top: var(--ds-space-2); font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ok); }

/* 4.15 notice / alert */
.ds-notice {
  border-left: 3px solid var(--ds-ink-secondary);
  padding: var(--ds-space-4) var(--ds-space-6);
  background: var(--ds-panel);
  margin-block: var(--ds-space-6);
}
.ds-notice__label {
  font-family: var(--ds-font-ui);
  font-size: var(--ds-meta-size);
  letter-spacing: var(--ds-meta-tracking);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: var(--ds-space-2);
  color: var(--ds-ink-secondary);
}
.ds-notice[data-tone="info"] { border-left-color: var(--ds-accent); }
.ds-notice[data-tone="info"] .ds-notice__label { color: var(--ds-accent); }
.ds-notice[data-tone="warn"] { border-left-color: var(--ds-warn); }
.ds-notice[data-tone="error"] { border-left-color: var(--ds-error); }
.ds-notice[data-tone="error"] .ds-notice__label { color: var(--ds-error); }

/* 4.16 breadcrumb */
.ds-breadcrumb { font-size: var(--ds-text-xs); }
.ds-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; }
.ds-breadcrumb li + li::before { content: "/"; color: var(--ds-ink-secondary); margin-right: var(--ds-space-2); }
.ds-breadcrumb a { color: var(--ds-ink-secondary); }
.ds-breadcrumb [aria-current="page"] { color: var(--ds-ink); }

/* 4.17 pagination */
.ds-pagination { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; margin: var(--ds-space-12) 0 0; padding: 0; }
.ds-pagination a, .ds-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-touch-min);
  min-height: var(--ds-touch-min);
  padding-inline: var(--ds-space-3);
  border: 1px solid var(--ds-line);
  text-decoration: none;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-pagination [aria-current="page"] { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-pagination [aria-disabled="true"] { opacity: 0.45; }

/* 4.18 post list + article */
.ds-postlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ds-line); }
.ds-postlist__item { border-bottom: 1px solid var(--ds-line); padding-block: var(--ds-space-6); }
.ds-postlist__title { font-family: var(--ds-font-ui); font-size: var(--ds-text-xl); font-weight: 600; text-transform: none; letter-spacing: -0.01em; margin: var(--ds-space-1) 0 var(--ds-space-2); }
.ds-postlist__title a { color: var(--ds-ink); text-decoration: none; }
.ds-postlist__title a:hover { color: var(--ds-accent); text-decoration: underline; }
.ds-postlist__excerpt { max-width: var(--ds-prose-max); color: var(--ds-ink); margin: 0; }

.ds-article { max-width: var(--ds-prose-max); margin-inline: auto; }
.ds-article__head { margin-bottom: var(--ds-space-12); }
.ds-article__title { font-size: var(--ds-display-2); }
.ds-article__byline { color: var(--ds-ink-secondary); font-size: var(--ds-text-sm); }
.ds-article figure { margin: var(--ds-space-8) 0; }
.ds-article figcaption { font-size: var(--ds-text-xs); color: var(--ds-ink-secondary); margin-top: var(--ds-space-2); }

/* 4.19 404 */
.ds-404 { padding-block: var(--ds-space-24); text-align: left; }
.ds-404__code { font-family: var(--ds-font-display); font-size: var(--ds-display-1); line-height: 0.8; color: var(--ds-accent); margin: 0 0 var(--ds-space-6); }

/* 4.20 panel — the rare raised surface. Flat: a border, not a shadow. */
.ds-panel { background: var(--ds-panel); border: 1px solid var(--ds-line-soft); padding: var(--ds-space-6); }

/* ── 5. Utilities ──────────────────────────────────────────────────────── */
.ds-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.ds-flow-tight > * + * { margin-top: var(--ds-space-2); }
.ds-tabular { font-variant-numeric: tabular-nums; }

/* ── 6. Motion, forced colors, print ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --ds-dur-quick: 0ms; --ds-dur-gentle: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  /* the outlined display weight is invisible in forced colors — make it solid */
  .ds-display--outline { color: CanvasText; -webkit-text-stroke: 0; }
  .ds-btn { border: 1px solid ButtonText; }
  .ds-receipt { border-color: CanvasText; }
}

@media print {
  .ds-header, .ds-skip, .ds-hero__media, .ds-pagination { display: none; }
  body { background: #fff; color: #000; }
}