/* Site-only layout, shared by every page. Every token and component comes from the Winsome Mundy
   design system (@winsomemundy/design-system, copied to ds/ by the build). This file adds section
   spacing, the page headers and the teaching, contact and footer layouts. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
img { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1.wm-heading.heading-lg, h2.wm-heading { margin-bottom: 18px; }

/* nav: sticky on the site (the design system turns the current page's link gold) */
.wm-nav { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); }
@media (max-width: 760px) { html { scroll-padding-top: 100px; } }

/* sections */
section.block { padding-block: 88px; border-bottom: 1px solid var(--line); }
.sub { color: var(--muted); max-width: 62ch; margin-bottom: 44px; }
.wm-impact { margin-bottom: 48px; }
.earlier { margin-top: 44px; padding-top: 24px; border-top: 1px dashed var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; }
.earlier h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.earlier p { color: var(--muted); font-size: .95rem; }
.earlier .label { grid-column: 1 / -1; }
@media (max-width: 640px) { .earlier { grid-template-columns: 1fr; } }

/* teaching */
.teach { background: linear-gradient(180deg, var(--night), var(--ink)); }
.teach-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.posts { display: grid; gap: 18px; }
@media (max-width: 860px) { .teach-grid { grid-template-columns: 1fr; gap: 32px; } }

/* contact */
.contact { text-align: left; }
.contact .wm-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding-block: 88px; }
.contact .wm-script { margin-top: 18px; }
@media (max-width: 820px) { .contact .wm-wrap { grid-template-columns: 1fr; padding-block: 60px; } }

/* phones */
@media (max-width: 560px) {
  body.wm-surface { font-size: 1rem; }
  section.block { padding-block: 60px; }
  .sub { margin-bottom: 32px; }
  .wm-impact__cell { padding: 22px 16px; }
}

footer { background: var(--ink); color: var(--muted); font-size: .85rem; padding-block: 28px; }
footer .wm-wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* two roles: section spacing (panels and quotes come from the design system) */
.roles { border-bottom: 1px solid var(--line); }
.roles .wm-wrap { padding-block: 64px; }
.teach-quote { margin-top: 32px; max-width: 46ch; }
@media (max-width: 560px) { .roles .wm-wrap { padding-block: 48px; } }
/* how I build: space above the domains and tools list */
.domains__title { margin-top: 56px; }
/* home: link from the headline results to the Product page */
.more { margin-top: 28px; }
/* case study: the role note under the audience cards */
.case-role { margin-top: 44px; }
.case-role .sub { margin-bottom: 0; }
/* case study: the closing pair of buttons */
.case-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 560px) { .case-links .wm-btn { flex: 1 1 100%; justify-content: center; } }
/* about: portrait beside the story */
.about-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 64px; align-items: start; }
.about-portrait { position: sticky; top: 100px; margin-right: 14px; }
.about-text { max-width: 66ch; }
.about-text .wm-creds__label { margin-top: 40px; }
.about-text h1 + p { margin-top: 8px; }
.about-text h2 + p, .about-text p + p:not(.case-links) { margin-top: 16px; }
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-portrait { position: relative; top: auto; width: min(200px, 55%); }
}