/* Site-level additions that the design system doesn't cover. Token values only. */
.dd-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 20; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--bg); font: 600 14px/20px var(--font-sans); border-radius: var(--radius-sm); }
.dd-skip:focus { top: var(--space-2); }

.dd-main { padding-block: var(--space-7) 0; }
.dd-page-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-7); }
.dd-page-head h1 { font-size: clamp(28px, 4vw, 32px); line-height: 1.2; }

/* Home */
.dd-hero { text-align: center; display: grid; justify-items: center; gap: var(--space-4); padding-block: var(--space-7) 0; }
@media (min-width: 900px) { .dd-hero { padding-top: var(--space-9); } }
.dd-hero .dd-lede { max-width: 52ch; margin: 0; }
.dd-hero .dd-divider { width: min(100%, 420px); margin: var(--space-4) 0 0; }
.dd-section-title { text-align: center; font-size: 20px; line-height: 26px; margin-bottom: var(--space-5); }

/* Resources: stacked groups */
.dd-stack { display: grid; gap: var(--space-7); }
.dd-resgroup__intro { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }

/* Plain reading column for house rules / crib sheet intros */
.dd-prose .dd-rules, .dd-prose .dd-callout { max-width: none; }

/* 404 */
.dd-lost { text-align: center; display: grid; justify-items: center; gap: var(--space-4); padding-block: var(--space-8); }
.dd-lost svg { width: 72px; height: 72px; fill: var(--metal); }