/* Shared shell for the five primary sections. Course and case content keep their own layouts. */
body.pattern-page header.ksn,
html[data-theme="dark"] body.pattern-page header.ksn {
  --k-ox: var(--sd-gold);
  --k-ox50: var(--sd-night-tint);
  --k-ink: var(--sd-night-text);
  --k-g200: var(--sd-night-line);
  --k-g500: var(--sd-night-muted);
  --k-g600: var(--sd-night-text);
  --k-g700: var(--sd-night-text);
  --k-bg: var(--sd-navy);
  --k-btn: var(--sd-navy);
  background: var(--k-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.pattern-page .ksn .ksn-mark path { stroke: var(--sd-navy); }
body.pattern-page .ksn .ksn-btn { width: 44px; min-width: 44px; height: 44px; border-radius: 6px; }
body.pattern-page .ksn .ksn-right { gap: 6px; }
body.pattern-page .ksn .ksn-menu a { display: flex; align-items: center; min-height: 44px; }
body.pattern-page .ksn .ksn-soc { padding-right: 14px; margin-right: 8px; border-right: 1px solid var(--k-g200); }
body.pattern-page .ksn .ksn-soc a { height: 44px; }
body.pattern-page .ksn .ksn-drop a { min-height: 48px; }
body.pattern-page .ksn :is(a,button):focus-visible { outline: 3px solid var(--sd-gold); outline-offset: 4px; }

/* A common title rhythm for overview pages; the education course remains a catalogue page. */
body.pattern-page :is(.hero, .sd-page-hero, .wp-hero, .bl-head) h1 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.045em;
  text-wrap: balance;
}
body.standards-pattern .topzone { padding-bottom: 64px; }
body.standards-pattern .hero { padding-top: 64px; }
body.standards-pattern .hero .eyebrow { color: var(--sd-gold); }
body.standards-pattern .hero .lead { color: var(--sd-night-muted); font-size: 17px; line-height: 1.75; }
body.standards-pattern .hero-actions .primary { background: var(--sd-gold); color: var(--sd-navy); }
body.standards-pattern .hero-actions .primary:hover { background: var(--sd-gold-hover); }

body.process-pattern .sd-page-hero { padding-block: 64px; }
body.process-pattern .sd-page-hero p { color: var(--sd-night-muted); }

body.work-pattern .wp-hero { padding: 64px 0; }
body.work-pattern .wp-hero .crumb { color: var(--sd-gold); }
body.work-pattern .wp-hero .wk-lede { margin-top: 22px; color: var(--sd-night-muted); font-size: 17px; line-height: 1.75; }

body.blog-pattern {
  --paper: var(--sd-paper);
  --white: var(--sd-paper);
  --soft: var(--sd-wash);
  --ink: var(--sd-ink);
  --ink-2: var(--sd-muted);
  --muted: var(--sd-muted);
  --line: var(--sd-line);
  --red: var(--sd-accent);
}
body.blog-pattern .pv-container { padding-inline: 24px; }
body.blog-pattern .bl-head { background: var(--sd-navy); color: var(--sd-night-text); }
body.blog-pattern .bl-head-inner { padding-block: 64px; }
body.blog-pattern .bl-head .pv-eyebrow { color: var(--sd-gold); font-size: 12px; font-weight: 750; letter-spacing: .06em; }
body.blog-pattern .bl-head h1 { color: var(--sd-night-text); }
body.blog-pattern .bl-head p { color: var(--sd-night-muted); font-size: 17px; line-height: 1.75; margin-top: 22px; }
body.blog-pattern .bl-count { color: var(--sd-night-muted); }
body.blog-pattern .bl-count b { color: var(--sd-gold); }
body.blog-pattern .bl-wrap a:focus-visible { outline-color: var(--sd-focus); }

@media (max-width: 720px) {
  body.standards-pattern .topzone { padding-bottom: 48px; }
  body.standards-pattern .hero { padding-top: 48px; }
  body.process-pattern .sd-page-hero { padding-block: 48px; }
  body.work-pattern .wp-hero { padding: 48px 0; }
  body.blog-pattern .bl-head-inner { padding-block: 48px; }
  body.blog-pattern .pv-container { padding-inline: 20px; }
}