body.dk-site-body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    overflow-x: clip;
}

.dk-page {
    --dk-primary:        var(--color-accent);
    --dk-primary-dark:   var(--color-accent-strong);
    --dk-primary-light:  var(--color-accent-soft);
    --dk-secondary:      var(--color-ink);
    --dk-secondary-deep: var(--color-night);
    --dk-surface:        var(--color-paper);
    --dk-border:         var(--color-rule);
    --dk-line:           var(--color-rule);
    --dk-ink:            var(--color-ink);
    --dk-muted:          var(--color-muted);
    --dk-font-body:      var(--font-body);
    --dk-font-display:   var(--font-display);

    font-size: var(--text-md);
    line-height: var(--lh-body);
}

.dk-page h1, .dk-page h2, .dk-page h3, .dk-page h4 {
    font-family: var(--font-display);
    font-style: normal;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

.dk-page .container { max-width: var(--page-max); padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

/* Page head: light and flush, words left and an illustration right. */
.dk-page .dk-page-hero {
    overflow: visible;
    padding: var(--space-2xl) 0 var(--space-xl);
    border-bottom: var(--rule);
    background: var(--color-paper);
    color: var(--color-ink);
    text-align: left;
}
.dk-page .dk-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.dk-page .dk-page-hero-inner { max-width: none; margin: 0; }
.dk-page .dk-page-hero-art { position: static; inset: auto; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-2); }
.dk-page .dk-page-hero-art::after { display: none; }
.dk-page .dk-page-hero-art img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.dk-page .dk-page-hero-label { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.dk-page .dk-page-hero-title { color: var(--color-ink); font-size: var(--text-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.025em; white-space: normal; }
.dk-page .dk-page-hero-sub { margin: var(--space-md) 0 0; max-width: 46ch; color: var(--color-muted); font-size: var(--text-lg); }
.dk-page .dk-page-hero-badge { border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.dk-page .dk-search-pill { margin-top: var(--space-lg); border-radius: var(--radius-md); box-shadow: none; border: 1px solid var(--color-rule-strong); background: var(--color-paper); }
.dk-page .dk-search-pill input { color: var(--color-ink); }

/* Section heads, cards, labels. */
.dk-page .dk-eyebrow,
.dk-page .dk-eyebrow.is-dark {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.dk-page .dk-section-title { font-size: var(--text-2xl); }
.dk-page .dk-section-head { padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-ink); }
.dk-page .dk-card { border-color: var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: none; }

/* Buttons: squared, one accent. */
.dk-page .dk-btn,
.dk-page .btn-primary,
.dk-page .dk-btn.is-outline,
.dk-page .btn-border-white { border-radius: var(--radius-md); min-height: 44px; font-family: var(--font-body); }
.dk-page .dk-btn.is-outline,
.dk-page .btn-border-white { border-color: var(--color-rule-strong); background: transparent; }

.dk-page [class*="eyebrow"],
.dk-page .text-uppercase { text-transform: none !important; letter-spacing: 0 !important; }
.dk-page .shadow, .dk-page .shadow-sm, .dk-page .shadow-lg { box-shadow: none !important; }
.dk-page .rounded-pill, .dk-page .rounded-lg { border-radius: var(--radius-lg) !important; }

.dk-page a:not(.dk-btn):not(.btn) { color: var(--color-accent); }
.dk-page a:not(.dk-btn):not(.btn):hover { color: var(--color-accent-strong); }

.dk-page .form-control,
.dk-page .custom-select { min-height: 44px; border-color: var(--color-rule-strong); border-radius: var(--radius-md); background-color: var(--color-paper); }
.dk-page .form-control:focus,
.dk-page .custom-select:focus { border-color: var(--color-focus); box-shadow: none; outline: 2px solid var(--color-focus); outline-offset: 1px; }

@media (max-width: 64rem) {
    .dk-page .dk-page-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .dk-page .dk-page-hero-art { aspect-ratio: 16 / 9; max-width: 32rem; }
}
@media (max-width: 40rem) {
    .dk-page .dk-page-hero { padding: var(--space-xl) 0 var(--space-lg); }
    .dk-page .dk-page-hero-art { display: none; }
}

/* The shared nav/footer keep the site's type even where app.css sets its own. */
body.dk-site-body .site-chrome { font-family: var(--font-body); line-height: var(--lh-body); }
body.dk-site-body .site-chrome :is(h1, h2, h3, h4) { font-family: var(--font-display); }


body.dk-site-body .site-top-banner {
    position: relative;
    height: auto !important;
    min-height: 0;
    padding: var(--space-2xl) 0 var(--space-xl);
    border-bottom: var(--rule);
    background: var(--color-paper) !important;
    opacity: 1 !important;
}
body.dk-site-body .site-top-banner::before,
body.dk-site-body .site-top-banner::after { display: none !important; }
body.dk-site-body .site-top-banner > img.img-cover {
    position: absolute;
    top: var(--space-xl);
    bottom: var(--space-xl);
    right: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2 + var(--page-gutter)));
    width: min(30rem, 38%);
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
    opacity: 1;
}
body.dk-site-body .site-top-banner .container { max-width: var(--page-max); padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
body.dk-site-body .site-top-banner .row { justify-content: flex-start !important; text-align: left !important; }
body.dk-site-body .site-top-banner .row > [class*="col-"] { flex: 0 0 58%; max-width: 58%; }
body.dk-site-body .site-top-banner h1, body.dk-site-body .site-top-banner h1.text-white { color: var(--color-ink) !important; font-family: var(--font-display); font-size: var(--text-display) !important; font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.025em; }
body.dk-site-body .site-top-banner .text-white:not(.btn) { color: var(--color-muted) !important; }
body.dk-site-body .site-top-banner .course-count-badge { display: inline-block; padding: 0 !important; background: none !important; color: var(--color-muted) !important; font-weight: 600; }
body.dk-site-body .site-top-banner .search-input { margin-top: var(--space-lg) !important; padding: 0 !important; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-md) !important; background: var(--color-paper) !important; box-shadow: none !important; }
body.dk-site-body .site-top-banner .search-input .form-control { min-height: 48px; background: transparent; }
body.dk-site-body .site-top-banner .search-input .btn { margin: 4px; border-radius: var(--radius-md) !important; background: var(--color-accent); border-color: var(--color-accent); }
body.dk-site-body .rounded-pill.btn { border-radius: var(--radius-md) !important; }
body.dk-site-body .shadow-lg { box-shadow: none !important; }
@media (max-width: 64rem) {
    body.dk-site-body .site-top-banner > img.img-cover { display: none; }
    body.dk-site-body .site-top-banner .row > [class*="col-"] { flex-basis: 100%; max-width: 100%; }
}

.dp .dp-band { padding-top: 0; }
.dp :is(.dp-brand small, [class*="kicker"], [class*="eyebrow"], [class*="label"]) { letter-spacing: 0 !important; text-transform: none !important; }
.dp { --dp-shadow: none; --dp-shadow-lg: none; --dp-radius: var(--radius-lg); }
/* site-search.js un-hides result lists on init; show them only while open. */
.dk-page .dk-search-results:not(.is-open) { display: none !important; }
body.dk-site-body .site-chrome :is(button, input) { font-family: var(--font-body); }
body.dk-site-body { --app-font-sans: var(--font-body); }
body.dk-site-body :is(h1, h2, h3, h4) { --app-font-sans: var(--font-display); }