/* design-system.css - layout for design-system.html only.
   The specimens on that page are drawn with the site's own stylesheets (css/home.css for the
   landing page, css/landing.css for the documentation pages); this file only lays them out:
   the masthead, the swatches, the type rows and the panels. */

.ds-page { max-width: 1180px; margin: 0 auto; padding: 0 24px 96px; }

/* the wordmark on ink, with home.css's dartboard scaled down */
.ds-masthead { position: relative; overflow: hidden; background: #141210; color: #f3eee6; border-radius: 16px; padding: 48px 44px; margin-bottom: 72px; }
.ds-masthead .board { width: 520px; height: 520px; right: -150px; top: 50%; margin-top: -260px; }
.ds-masthead-text { position: relative; }
.ds-wordmark { display: flex; align-items: center; gap: 16px; font-family: 'Insignia', Georgia, serif; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; margin: 14px 0 12px; }
.ds-wordmark img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.ds-masthead-sub { color: #b4aca1; font-size: 15px; }
.ds-masthead-sub code, .ds-note code { font-family: 'Cascadia Code', ui-monospace, monospace; font-size: 0.9em; }

.ds-section { margin-bottom: 80px; }
.ds-title { font-family: 'Insignia', Georgia, serif; font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.08; margin-bottom: 10px; }
.ds-lead { color: #5e574e; font-size: 17px; max-width: 680px; margin-bottom: 28px; }

/* palette */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ds-swatch { background: #fff; border: 1px solid #ddd7cd; border-radius: 14px; padding: 12px 12px 14px; display: grid; gap: 2px; }
.ds-swatch i { display: block; height: 64px; border-radius: 9px; border: 1px solid rgba(26, 24, 21, 0.08); margin-bottom: 8px; }
.ds-swatch b { font-size: 15px; }
.ds-swatch code { font-family: 'Cascadia Code', ui-monospace, monospace; font-size: 13px; color: #5e574e; }
.ds-swatch span { font-size: 13px; color: #5e574e; line-height: 1.4; }
.ds-c-141210 { background: #141210; } .ds-c-1e1b18 { background: #1e1b18; } .ds-c-34302b { background: #34302b; }
.ds-c-f3eee6 { background: #f3eee6; } .ds-c-b4aca1 { background: #b4aca1; } .ds-c-f7f5f1 { background: #f7f5f1; }
.ds-c-eeeae3 { background: #eeeae3; } .ds-c-ddd7cd { background: #ddd7cd; } .ds-c-1a1815 { background: #1a1815; }
.ds-c-5e574e { background: #5e574e; } .ds-c-d63b2b { background: #d63b2b; } .ds-c-b32f21 { background: #b32f21; }
.ds-c-2f8a57 { background: #2f8a57; } .ds-c-e0a43a { background: #e0a43a; }

/* typography */
.ds-type { background: #fff; border: 1px solid #ddd7cd; border-radius: 14px; }
.ds-type-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 26px; border-bottom: 1px solid #eeeae3; }
.ds-type-row:last-child { border-bottom: 0; }
.ds-type-meta b { display: block; font-size: 14px; }
.ds-type-meta span { font-size: 13px; color: #5e574e; }
.ds-type-display { font-size: clamp(40px, 5.4vw, 72px); }
.ds-type-display em { font-style: normal; color: #d63b2b; }
.ds-type-h2 { font-size: clamp(32px, 4vw, 52px); }
.ds-type-h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.08; }
.ds-type-lead { font-size: 19px; color: #5e574e; }
.ds-type-body { font-size: 17px; color: #38332d; }
.ds-type-code { font-family: 'Cascadia Code', ui-monospace, monospace; font-size: 14px; background: #141210; color: #e9dfcf; padding: 10px 14px; border-radius: 10px; justify-self: start; }

/* panels: a specimen on its ground */
.ds-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ds-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ds-panel { background: #eeeae3; border-radius: 16px; padding: 28px; }
.ds-panel.ds-ink { background: #141210; color: #f3eee6; }
.ds-pad { padding: 28px; }
.ds-cap { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5e574e; margin-bottom: 16px; }
.ds-ink .ds-cap { color: #b4aca1; }
.ds-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.ds-note { font-size: 13px; color: #5e574e; margin-top: 16px; }
.ds-ink .ds-note { color: #b4aca1; }
.ds-panel .step { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
.ds-panel .steps::before { display: none; }

/* documentation specimens: .docs-content without its page width and padding */
.ds-docs.docs-content { max-width: none; margin: 0; padding: 28px; }
.ds-docs .docs-toc { margin-bottom: 20px; }

.ds-footer { border-radius: 16px; }

@media (max-width: 960px) {
    .ds-cards { grid-template-columns: 1fr 1fr; }
    .ds-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ds-page { padding: 0 16px 72px; }
    .ds-masthead { padding: 32px 22px; margin-bottom: 56px; }
    .ds-cards { grid-template-columns: 1fr; }
    .ds-type-row { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
    .ds-panel .step { grid-template-columns: 40px minmax(0, 1fr); }
    .ds-panel, .ds-pad, .ds-docs.docs-content { padding: 20px; }
}