/* ═══════════════════════════════════════════════════════════════════════════
   Dream Kit — tokens/dreamkit.css
   One world, dark only: an unpainted resin figure on deep black, lit green from the
   left and yellow from the right. Every colour on a page is one of those lights, the
   clay they fall on, or the black they fall out of. Pink is the one extra light
   ("same mold, one layer less"). Blood is for a broken rule, a sell, a loss.
   Fonts (Google): Big Shoulders Display 700/900, Barlow 400/500/600, DM Mono 400/500,
   Noto Sans JP 900 (kanji accents only).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Ground: black with a breath of green, like the renders' backdrop */
	--ground: #060706;        /* the page, theme-color */
	--ground-2: #0c0e0c;      /* cards, the mold halves */
	--ground-3: #141714;      /* wells, inputs, code */

	/* Clay: the resin itself. Text is clay, not white. */
	--clay-light: #d7d9d4;    /* the lit face of the sculpt; strong words, numbers (13.6:1) */
	--clay: #a8aba6;          /* body copy, the mid tone (8.3:1) */
	--clay-dark: #5d615c;     /* captions off, disabled, the shadow side (3.3:1 — large text only) */
	--text: #eef0ea;          /* headings only, resin white (15.8:1) */
	--text-muted: #9a9e97;    /* captions, meta, nav at rest (7.1:1) */

	/* The two lights */
	--green: #8cff3f;         /* LEFT light. Eyebrows, links, the OG badge, "alive", focus (14.9:1) */
	--green-deep: #45d81c;    /* hover, gradient stop */
	--green-dim: rgba(140, 255, 63, 0.12);
	--yellow: #ffe94a;        /* RIGHT light. The one fill: primary button, the fund bar, "held" (16.6:1) */
	--yellow-deep: #f2c400;   /* hover, gradient stop */
	--yellow-dim: rgba(255, 233, 74, 0.12);

	/* The extra light */
	--pink: #ff5fa8;          /* the flagged layer, the nude cast, one italic aside per page (7.3:1) */
	--pink-deep: #e0338a;
	--pink-dim: rgba(255, 95, 168, 0.12);

	/* Blood: never a light, never a glow */
	--blood: #ff2e4c;         /* a sell, a loss, a broken rule, "dead" (6.0:1) */
	--blood-dim: rgba(255, 46, 76, 0.12);

	/* Lines and seams */
	--line: rgba(238, 240, 234, 0.08);
	--line-strong: rgba(238, 240, 234, 0.16);
	--seam: rgba(140, 255, 63, 0.45);          /* the mold seam: a dashed hairline */
	--key: rgba(255, 233, 74, 0.9);            /* registration keys: the dots where halves meet */

	/* Light as shadow: glows are the only elevation */
	--glow-green: 0 0 40px rgba(140, 255, 63, 0.28);
	--glow-yellow: 0 0 40px rgba(255, 233, 74, 0.28);
	--glow-pink: 0 0 40px rgba(255, 95, 168, 0.28);
	--rim-green: inset 6px 0 24px -12px rgba(140, 255, 63, 0.9);
	--rim-yellow: inset -6px 0 24px -12px rgba(255, 233, 74, 0.9);
	--lift: 0 24px 60px rgba(0, 0, 0, 0.55);

	/* The signature: the figure's lighting as a text gradient. Left green, clay middle, right yellow. */
	--light-split: linear-gradient(90deg, var(--green) 0%, var(--clay-light) 50%, var(--yellow) 100%);
	--light-split-pink: linear-gradient(90deg, var(--pink) 0%, var(--clay-light) 50%, var(--yellow) 100%);

	/* Type */
	--font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
	--font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
	--font-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace;
	--font-kanji: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Sans', sans-serif;

	/* Scale */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
	--space-8: 32px; --space-12: 48px; --space-16: 64px; --space-section: 112px;
	--radius-chip: 2px; --radius-btn: 4px; --radius-card: 8px; --radius-frame: 10px;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--container: 76rem; --container-narrow: 52rem;

	color-scheme: dark;
}

/* ───────────────────────────── base ───────────────────────────── */
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--clay); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--yellow); color: #000; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
code, kbd, .dk-mono { font-family: var(--font-mono); }

/* ───────────────────────────── type ───────────────────────────── */
.dk-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.9; color: var(--text); text-wrap: balance; }
.dk-h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(4rem, 12vw, 10rem); line-height: 0.86; letter-spacing: 0.005em; color: var(--text); }
.dk-h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.92; color: var(--text); }
.dk-h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.75rem; line-height: 1; letter-spacing: 0.02em; color: var(--text); }
.dk-title { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--clay-light); }
.dk-lead { font-size: 1.25rem; line-height: 1.5; color: var(--clay); max-width: 34rem; }
.dk-body { font-size: 1.0625rem; color: var(--clay); max-width: 38rem; }
.dk-fine { font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }
.dk-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); }
.dk-eyebrow.is-yellow { color: var(--yellow); }
.dk-eyebrow.is-pink { color: var(--pink); }
.dk-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--clay-light); }
.dk-num { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; font-size: 3.5rem; line-height: 1; color: var(--text); }

/* The lit word: a heading painted like the figure (green left, clay, yellow right) */
.dk-lit { background: var(--light-split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dk-lit.is-pink { background: var(--light-split-pink); -webkit-background-clip: text; background-clip: text; }
.dk-green { color: var(--green); } .dk-yellow { color: var(--yellow); } .dk-pink { color: var(--pink); } .dk-blood { color: var(--blood); }
.dk-aside { font-style: italic; color: var(--pink); }

/* Kanji: a big outlined character behind a section, or a small solid one in a label. Never a heading by itself. */
.dk-kanji { font-family: var(--font-kanji); font-weight: 900; line-height: 1; }
.dk-kanji-ghost { position: absolute; z-index: 0; font-family: var(--font-kanji); font-weight: 900; font-size: clamp(12rem, 30vw, 26rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none; user-select: none; }

/* ───────────────────────────── surfaces ───────────────────────────── */
.dk-card { position: relative; background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-6); }
.dk-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: var(--radius-card) var(--radius-card) 0 0; background: linear-gradient(90deg, var(--green), var(--yellow)); }
.dk-card.is-plain::before { display: none; }
.dk-card.is-pink::before { background: linear-gradient(90deg, var(--pink), var(--yellow)); }
.dk-card.is-blood::before { background: var(--blood); }
.dk-well { background: var(--ground-3); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: var(--space-3) var(--space-4); }

/* The seam: where the two mold halves meet. A dashed hairline with a registration key at each end. */
.dk-seam { position: relative; height: 0; border: 0; border-top: 1px dashed var(--seam); margin: var(--space-12) 0; }
.dk-seam::before, .dk-seam::after { content: ""; position: absolute; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--key); box-shadow: 0 0 10px var(--key); }
.dk-seam::before { left: 0; } .dk-seam::after { right: 0; }
.dk-seam.is-vertical { height: auto; width: 0; border-top: 0; border-left: 1px dashed var(--seam); margin: 0 var(--space-8); align-self: stretch; }
.dk-seam.is-vertical::before, .dk-seam.is-vertical::after { left: -4px; top: auto; }
.dk-seam.is-vertical::before { top: 0; } .dk-seam.is-vertical::after { bottom: 0; }

/* The mold: two halves (A and B) around a seam. Children: .dk-mold-half ×2. */
.dk-mold { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
.dk-mold-half { position: relative; background: var(--ground-2); border: 1px solid var(--line); padding: var(--space-8); }
.dk-mold-half:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); border-right: 0; box-shadow: var(--rim-green); }
.dk-mold-half:last-child { border-radius: 0 var(--radius-card) var(--radius-card) 0; border-left: 1px dashed var(--seam); box-shadow: var(--rim-yellow); }
.dk-mold-half > .dk-part { position: absolute; top: var(--space-3); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--text-muted); }
.dk-mold-half:first-child > .dk-part { left: var(--space-4); } .dk-mold-half:last-child > .dk-part { right: var(--space-4); }
.dk-mold-half:last-child::before, .dk-mold-half:last-child::after { content: ""; position: absolute; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--key); box-shadow: 0 0 10px var(--key); z-index: 1; }
.dk-mold-half:last-child::before { top: 18px; } .dk-mold-half:last-child::after { bottom: 18px; }
@media (max-width: 720px) {
	.dk-mold { grid-template-columns: 1fr; }
	.dk-mold-half:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; border-right: 1px solid var(--line); border-bottom: 0; }
	.dk-mold-half:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); border-left: 1px solid var(--line); border-top: 1px dashed var(--seam); }
	.dk-mold-half:last-child::before, .dk-mold-half:last-child::after { top: -4px; bottom: auto; }
	.dk-mold-half:last-child::before { left: 18px; } .dk-mold-half:last-child::after { left: auto; right: 18px; }
}

/* The frame: a figure stands in black, lit from both sides. Put an <img> inside. */
.dk-frame { position: relative; background: #000; border: 1px solid var(--line-strong); border-radius: var(--radius-frame); overflow: hidden; box-shadow: var(--rim-green), var(--rim-yellow), var(--lift); }
.dk-frame img { width: 100%; height: 100%; object-fit: cover; }
.dk-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(140,255,63,0.10), transparent 30%, transparent 70%, rgba(255,233,74,0.10)); }
.dk-frame.is-pink { box-shadow: inset 6px 0 24px -12px rgba(255,95,168,0.9), var(--rim-yellow), var(--lift); }
.dk-frame.is-pink::after { background: linear-gradient(90deg, rgba(255,95,168,0.12), transparent 30%, transparent 70%, rgba(255,233,74,0.10)); }
.dk-plate { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-light); background: rgba(6,7,6,0.72); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); padding: 4px 8px; line-height: 1.2; }
.dk-frame .dk-plate { position: absolute; left: var(--space-3); bottom: var(--space-3); }

/* Grit, kept light: the renders have none, the page gets a breath of it */
.dk-noise { position: relative; }
.dk-noise::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035; background-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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dk-noise > * { position: relative; z-index: 2; }
.dk-glow-green { box-shadow: var(--glow-green); } .dk-glow-yellow { box-shadow: var(--glow-yellow); } .dk-glow-pink { box-shadow: var(--glow-pink); }

/* ───────────────────────────── actions ───────────────────────────── */
.dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-btn); border: 1px solid transparent; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), background-color .2s, color .2s, border-color .2s; }
.dk-btn:hover { transform: translateY(-2px); }
.dk-btn:active { transform: translateY(0); }
.dk-btn-primary { background: var(--yellow); color: #000; border-color: var(--yellow); }
.dk-btn-primary:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); box-shadow: var(--glow-yellow); }
.dk-btn-green { background: transparent; color: var(--green); border-color: var(--green); }
.dk-btn-green:hover { background: var(--green-dim); box-shadow: var(--glow-green); }
.dk-btn-ghost { background: transparent; color: var(--clay-light); border-color: var(--line-strong); }
.dk-btn-ghost:hover { border-color: var(--clay-light); }
.dk-btn-pink { background: transparent; color: var(--pink); border-color: var(--pink); }
.dk-btn-pink:hover { background: var(--pink-dim); box-shadow: var(--glow-pink); }
.dk-btn-blood { background: transparent; color: var(--blood); border-color: var(--blood); }
.dk-btn-blood:hover { background: var(--blood-dim); }
.dk-btn.is-sm { min-height: 36px; padding: 0 var(--space-4); font-size: 0.9375rem; }
.dk-btn.is-lg { min-height: 60px; padding: 0 var(--space-8); font-size: 1.375rem; }
.dk-btn[disabled], .dk-btn.is-disabled { color: var(--clay-dark); border-color: var(--line); background: transparent; cursor: not-allowed; transform: none; box-shadow: none; }
.dk-link { color: var(--green); border-bottom: 1px solid transparent; transition: border-color .2s; }
.dk-link:hover { border-bottom-color: var(--green); }

/* Chips: the cast's state, read at a glance. One colour each, by meaning. */
.dk-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-chip); border: 1px solid currentColor; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--text-muted); }
.dk-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dk-chip.is-og { color: var(--green); background: var(--green-dim); }        /* the original, by exact name on this chain */
.dk-chip.is-held { color: var(--yellow); background: var(--yellow-dim); }    /* the dev holds */
.dk-chip.is-alive { color: var(--green); }                                   /* curve open, trades this week */
.dk-chip.is-quiet { color: var(--text-muted); }                              /* curve open, no trades this week */
.dk-chip.is-sold { color: var(--blood); background: var(--blood-dim); }      /* the dev sold */
.dk-chip.is-flagged { color: var(--pink); background: var(--pink-dim); }     /* one layer less */
.dk-chip.is-stage { color: var(--clay-light); border-style: dashed; }

/* ───────────────────────────── navigation ───────────────────────────── */
.dk-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 72px; padding: 0 var(--space-6); border-bottom: 1px dashed var(--seam); }
.dk-nav-brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.dk-nav-brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-strong), var(--rim-green), var(--rim-yellow); }
.dk-nav-brand .dk-kanji { font-size: 1.1rem; color: var(--green); }
.dk-nav-links { display: flex; align-items: center; gap: var(--space-6); }
.dk-nav-link { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color .2s; }
.dk-nav-link:hover, .dk-nav-link.is-active { color: var(--green); }
.dk-footer { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); padding: var(--space-12) var(--space-6); border-top: 1px dashed var(--seam); color: var(--text-muted); font-size: 0.875rem; }
.dk-footer-mark { font-family: var(--font-display); font-weight: 900; font-size: 2rem; text-transform: uppercase; color: var(--clay-light); line-height: 1; }
@media (max-width: 720px) { .dk-footer { grid-template-columns: 1fr; } .dk-nav-links { display: none; } }

/* ───────────────────────────── blocks ───────────────────────────── */
/* The cast card: one token. Figure on the left, the facts on the right. */
.dk-cast { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-6); background: var(--ground-2); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.dk-cast > .dk-frame { border: 0; border-radius: 0; border-right: 1px dashed var(--seam); box-shadow: var(--rim-green), var(--rim-yellow); aspect-ratio: 1; }
.dk-cast-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-6) 0; min-width: 0; }
.dk-cast-ticker { font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 0.9; text-transform: uppercase; color: var(--text); }
.dk-cast-ticker small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--text-muted); margin-top: 6px; text-transform: none; }
.dk-cast-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dk-cast-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-4); font-size: 0.9375rem; }
.dk-cast-facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); align-self: center; }
.dk-cast-facts dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--clay-light); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) { .dk-cast { grid-template-columns: 1fr; } .dk-cast > .dk-frame { border-right: 0; border-bottom: 1px dashed var(--seam); } .dk-cast-body { padding: 0 var(--space-4) var(--space-4); } }

/* The address: the contract, copyable, and nothing else near it. */
.dk-addr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: center; background: var(--ground-3); border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.dk-addr code { font-size: 0.9375rem; color: var(--clay-light); overflow-wrap: anywhere; line-height: 1.4; }
.dk-addr .dk-eyebrow { grid-column: 1 / -1; }
@media (max-width: 520px) { .dk-addr { grid-template-columns: 1fr; } }

/* The mold fund: one bar, three stages. Fill is the right light. Each stage ends in a registration key. */
.dk-fund { display: grid; gap: var(--space-4); }
.dk-fund-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dk-fund-bar { position: relative; height: 14px; background: var(--ground-3); border: 1px solid var(--line-strong); border-radius: 999px; overflow: visible; }
.dk-fund-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--yellow)); box-shadow: var(--glow-yellow); }
.dk-fund-key { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ground); border: 2px solid var(--key); box-shadow: 0 0 10px var(--key); }
.dk-fund-key.is-done { background: var(--yellow); }
.dk-fund-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.dk-fund-stage { display: grid; gap: 4px; padding-top: var(--space-2); border-top: 1px dashed var(--line-strong); }
.dk-fund-stage.is-done { border-top-color: var(--yellow); }
.dk-fund-stage.is-now { border-top-color: var(--green); }
.dk-fund-stage .dk-title { font-size: 1rem; }
@media (max-width: 720px) { .dk-fund-stages { grid-template-columns: 1fr; } }

/* The rules: the code the dev wallet keeps. Numbered because they are in force in that order. */
.dk-rules { display: grid; gap: 0; border-top: 1px dashed var(--seam); }
.dk-rule { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px dashed var(--line-strong); }
.dk-rule-n { font-family: var(--font-display); font-weight: 900; font-size: 2.25rem; line-height: 1; color: var(--green); }
.dk-rule-text { font-size: 1.125rem; color: var(--clay-light); }
.dk-rule-text small { display: block; font-size: 0.875rem; color: var(--text-muted); margin-top: 4px; }
.dk-rule-proof { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.dk-rule.is-broken .dk-rule-n { color: var(--blood); }
@media (max-width: 520px) { .dk-rule { grid-template-columns: 3rem 1fr; } .dk-rule-proof { grid-column: 2; } }

/* The stages of the kit: master → mold → run. A chapter each; a photo when it exists. */
.dk-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.dk-stage { display: grid; gap: var(--space-3); }
.dk-stage .dk-frame { aspect-ratio: 4 / 3; }
.dk-frame.is-empty { display: grid; place-items: center; color: var(--clay-dark); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: none; }
.dk-frame.is-empty::after { display: none; }
@media (max-width: 720px) { .dk-stages { grid-template-columns: 1fr; } }

/* The quote: the dev speaks, once per page, signed. */
.dk-quote { border-left: 2px solid var(--yellow); padding-left: var(--space-6); font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.05; text-transform: uppercase; color: var(--clay-light); max-width: 40rem; }
.dk-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-style: normal; font-size: 0.75rem; letter-spacing: 0.16em; color: var(--text-muted); }

/* ───────────────────────────── layout ───────────────────────────── */
.dk-container { width: min(100% - 2 * max(16px, env(safe-area-inset-left, 0px)), var(--container)); margin-inline: auto; }
.dk-container.is-narrow { max-width: var(--container-narrow); }
.dk-section { padding-block: var(--space-section); }
.dk-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
.dk-split.is-figure-first { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 860px) { .dk-split, .dk-split.is-figure-first { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ───────────────────────────── motion ───────────────────────────── */
@keyframes dk-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes dk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dk-breathe { animation: dk-breathe 4s ease-in-out infinite; }
.dk-rise { animation: dk-rise .8s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .dk-breathe, .dk-rise { animation: none; } .dk-btn { transition: none; } }