/**
 * matthewkellogg.com — Case Study Page Visual Treatment
 *
 * Implements Design Architecture Rev 3 canonical at the rendered page tier:
 *   - Color palette canonical (Navy Deep / Off-White / Charcoal / Gold Restrained / Burgundy Muted / Gray Cool)
 *   - Typography stack canonical (Playfair Display display / Inter body / Public Sans utility)
 *   - 720px editorial reading width for body copy
 *   - 1100px wide section width for hero region
 *   - Spacing scale canonical (tight / standard / generous / hero)
 *   - Mobile breakpoints canonical (0-480 / 481-768 / 769-1024 / 1025-1440 / 1441+)
 *
 * Visual register: editorial restraint baseline; McKinsey-deck restraint
 * + FT/Bloomberg reference per Strategic Vision Update Rev 2.1 Part 2 Section 9.
 *
 * Class namespace: .mk-cs__ (matthewkellogg case study; BEM-style)
 *
 * @package matthewkellogg-child
 */

/* =====================================================================
   1. Custom properties — palette, typography stack, spacing scale
   ===================================================================== */

:root {
  /* Color palette canonical per Design Architecture Rev 3 Part 2 Section 5. */
  --mk-color-navy-deep:       #131b2e;
  --mk-color-off-white:       #fafaf7;
  --mk-color-charcoal:        #1a1a1a;
  --mk-color-gold-restrained: #b8924a;
  --mk-color-burgundy-muted:  #7a2e2e;
  --mk-color-gray-cool:       #6b7280;
  --mk-color-gray-light:      #e5e5e2;

  /* Typography stack canonical per Design Architecture Rev 3 Part 2 Section 6. */
  --mk-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --mk-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mk-font-utility: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale canonical per Design Architecture Rev 3 Part 2 Section 7. */
  --mk-space-tight-1:    8px;
  --mk-space-tight-2:    12px;
  --mk-space-tight-3:    16px;
  --mk-space-standard-1: 24px;
  --mk-space-standard-2: 32px;
  --mk-space-standard-3: 48px;
  --mk-space-generous-1: 64px;
  --mk-space-generous-2: 96px;
  --mk-space-generous-3: 128px;
  --mk-space-hero:       160px;

  /* Reading widths canonical. */
  --mk-width-reading: 720px;
  --mk-width-wide:    1100px;

  /* Type scale canonical (desktop tier). */
  --mk-fs-h1:          56px;
  --mk-fs-h2:          40px;
  --mk-fs-h3:          26px;
  --mk-fs-body:        18px;
  --mk-fs-body-lead:   22px;
  --mk-fs-eyebrow:     13px;
  --mk-fs-metadata:    15px;
  --mk-lh-body:        1.65;
  --mk-lh-display:     1.15;
}

/* =====================================================================
   2. Base typography for the case study article
   ===================================================================== */

.mk-case-study {
  background: var(--mk-color-off-white);
  color: var(--mk-color-charcoal);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mk-case-study * {
  box-sizing: border-box;
}

.mk-cs__prose {
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-body);
  color: var(--mk-color-charcoal);
  max-width: var(--mk-width-reading);
  margin-inline: auto;
}

.mk-cs__prose p {
  margin: 0 0 var(--mk-space-standard-1) 0;
}

.mk-cs__prose p:last-child {
  margin-bottom: 0;
}

.mk-cs__prose ul,
.mk-cs__prose ol {
  margin: 0 0 var(--mk-space-standard-1) 0;
  padding-left: var(--mk-space-standard-2);
  line-height: var(--mk-lh-body);
}

.mk-cs__prose li {
  margin-bottom: var(--mk-space-tight-2);
}

.mk-cs__prose a {
  color: var(--mk-color-navy-deep);
  text-decoration: underline;
  text-decoration-color: var(--mk-color-gold-restrained);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}

.mk-cs__prose a:hover,
.mk-cs__prose a:focus {
  text-decoration-color: var(--mk-color-navy-deep);
}

.mk-cs__prose strong {
  font-weight: 600;
  color: var(--mk-color-navy-deep);
}

.mk-cs__prose em {
  font-style: italic;
}

/* =====================================================================
   3. Hero region layout — sidebar bio (contextual) + hero block
   ===================================================================== */

.mk-cs__hero-region {
  background: var(--mk-color-off-white);
  padding: var(--mk-space-generous-2) var(--mk-space-standard-2) var(--mk-space-generous-1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "hero    bio"
    "hero    .";
  gap: var(--mk-space-standard-3);
  max-width: var(--mk-width-wide);
  margin-inline: auto;
}

.mk-cs__hero {
  grid-area: hero;
  min-width: 0;
}

.mk-cs__sidebar-bio {
  grid-area: bio;
  align-self: start;
}

/* =====================================================================
   4. Sidebar bio panel
   ===================================================================== */

.mk-cs__bio {
  background: transparent;
  border-left: 2px solid var(--mk-color-gold-restrained);
  padding-left: var(--mk-space-standard-1);
}

.mk-cs__bio-portrait {
  margin-bottom: var(--mk-space-standard-1);
}

.mk-cs__bio-portrait-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  border-radius: 0; /* Editorial; no rounded portraits per restraint canonical. */
}

.mk-cs__bio-meta {
  font-family: var(--mk-font-body);
}

.mk-cs__bio-name {
  font-family: var(--mk-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--mk-color-navy-deep);
  margin: 0 0 var(--mk-space-tight-1) 0;
  line-height: 1.2;
}

.mk-cs__bio-eyebrow {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mk-color-gold-restrained);
  margin: 0 0 var(--mk-space-tight-2) 0;
}

.mk-cs__bio-framing {
  font-family: var(--mk-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--mk-color-charcoal);
  margin: 0 0 var(--mk-space-standard-1) 0;
}

.mk-cs__bio-link {
  display: inline-block;
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-metadata);
  font-weight: 500;
  color: var(--mk-color-navy-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--mk-color-gold-restrained);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.mk-cs__bio-link:hover,
.mk-cs__bio-link:focus {
  color: var(--mk-color-gold-restrained);
  border-bottom-color: var(--mk-color-navy-deep);
}

/* =====================================================================
   5. Hero block — eyebrow + H1 + subhead + full-width screenshot + body
   ===================================================================== */

.mk-cs__hero-content {
  max-width: var(--mk-width-reading);
}

.mk-cs__hero-eyebrow {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mk-color-gold-restrained);
  margin: 0 0 var(--mk-space-standard-1) 0;
}

.mk-cs__hero-headline {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h1);
  font-weight: 600;
  line-height: var(--mk-lh-display);
  color: var(--mk-color-navy-deep);
  margin: 0 0 var(--mk-space-standard-2) 0;
  letter-spacing: -0.01em;
}

.mk-cs__hero-subhead {
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-body-lead);
  line-height: 1.5;
  color: var(--mk-color-charcoal);
  margin: 0 0 var(--mk-space-generous-1) 0;
  max-width: 620px;
  font-weight: 400;
}

/*
 * Hero SERP screenshot — full-width at desktop per Item 3 canonical.
 * Breaks out of the editorial column to span the wide section width
 * (1100px max-width container with viewport-edge padding at smaller widths).
 */
.mk-cs__hero-screenshot,
.mk-cs__screenshot-full-width {
  margin: var(--mk-space-generous-1) calc(-1 * var(--mk-space-standard-2)) var(--mk-space-generous-1);
  /* Negative inline margins pull the figure to viewport-edge-respecting full-width
     within the .mk-cs__hero-region wrapper at smaller viewports; at desktop the
     1100px max-width wrapper provides the constraint. */
}

.mk-cs__hero-screenshot-img,
.mk-cs__chronicle-screenshot-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mk-color-gray-light);
}

.mk-cs__screenshot-caption {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-metadata);
  color: var(--mk-color-gray-cool);
  margin: var(--mk-space-tight-3) auto 0;
  max-width: var(--mk-width-reading);
  padding-inline: var(--mk-space-standard-2);
  line-height: 1.5;
}

.mk-cs__screenshot-caption a {
  color: var(--mk-color-navy-deep);
}

.mk-cs__screenshot-contained {
  margin: var(--mk-space-generous-1) auto;
  max-width: var(--mk-width-reading);
}

.mk-cs__screenshot-eyebrow {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mk-color-gray-cool);
  margin: 0 0 var(--mk-space-tight-2) 0;
}

.mk-cs__hero-body {
  margin-top: var(--mk-space-generous-1);
}

/* =====================================================================
   6. Section structure — heading, sub-heading, body, divider
   ===================================================================== */

.mk-cs__body {
  max-width: var(--mk-width-wide);
  margin-inline: auto;
  padding: 0 var(--mk-space-standard-2);
}

.mk-cs__section {
  padding: var(--mk-space-generous-1) 0;
  max-width: var(--mk-width-reading);
  margin-inline: auto;
}

.mk-cs__section-heading {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h2);
  font-weight: 600;
  line-height: var(--mk-lh-display);
  color: var(--mk-color-navy-deep);
  margin: 0 0 var(--mk-space-standard-3) 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: var(--mk-space-tight-3);
  flex-wrap: wrap;
}

.mk-cs__section-num {
  font-family: var(--mk-font-display);
  font-style: italic;
  color: var(--mk-color-gold-restrained);
  font-weight: 500;
}

.mk-cs__section-title {
  flex: 1 1 auto;
}

.mk-cs__sub-heading {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mk-color-navy-deep);
  margin: var(--mk-space-standard-3) 0 var(--mk-space-standard-1) 0;
}

.mk-cs__section-divider {
  border: 0;
  border-top: 1px solid var(--mk-color-gray-light);
  max-width: var(--mk-width-reading);
  margin: 0 auto;
}

/* =====================================================================
   7. Retention timeline component (Item 4 canonical)
   ===================================================================== */

.mk-cs__retention-timeline {
  margin: var(--mk-space-generous-1) 0;
  padding: var(--mk-space-standard-2) 0;
  border-top: 1px solid var(--mk-color-gray-light);
  border-bottom: 1px solid var(--mk-color-gray-light);
}

.mk-cs__retention-timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--mk-space-standard-1);
  padding-top: var(--mk-space-standard-2);
}

/* Horizontal connector line behind the timeline nodes. */
.mk-cs__retention-timeline-track::before {
  content: "";
  position: absolute;
  top: 30px; /* Aligns with the vertical center of the markers. */
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--mk-color-gold-restrained);
  opacity: 0.5;
  z-index: 0;
}

.mk-cs__retention-timeline-node {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: var(--mk-space-tight-3);
}

.mk-cs__retention-timeline-marker {
  width: 14px;
  height: 14px;
  background: var(--mk-color-gold-restrained);
  border-radius: 50%;
  margin: 0 auto var(--mk-space-tight-3);
  border: 3px solid var(--mk-color-off-white);
  box-shadow: 0 0 0 1px var(--mk-color-gold-restrained);
}

.mk-cs__retention-timeline-marker--present {
  background: var(--mk-color-navy-deep);
  box-shadow: 0 0 0 1px var(--mk-color-navy-deep);
}

.mk-cs__retention-timeline-year {
  font-family: var(--mk-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--mk-color-navy-deep);
  margin: 0 0 var(--mk-space-tight-1) 0;
  line-height: 1.2;
}

.mk-cs__retention-timeline-label {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-metadata);
  color: var(--mk-color-charcoal);
  margin: 0;
  line-height: 1.4;
}

.mk-cs__retention-timeline-caption {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-metadata);
  color: var(--mk-color-gray-cool);
  text-align: center;
  margin: var(--mk-space-standard-1) 0 0 0;
  font-style: italic;
}

/* =====================================================================
   8. Chronicle three-tier (today's state / milestones / log feed / end state)
   ===================================================================== */

.mk-cs__chronicle-opener {
  margin-bottom: var(--mk-space-standard-3);
}

.mk-cs__chronicle-tier-heading {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h3);
  font-weight: 600;
  color: var(--mk-color-navy-deep);
  margin: var(--mk-space-generous-1) 0 var(--mk-space-standard-1);
}

.mk-cs__chronicle-date {
  font-family: var(--mk-font-utility);
  font-size: 18px;
  font-weight: 400;
  color: var(--mk-color-gray-cool);
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--mk-space-tight-2);
}

/* Today's state sub-block */
.mk-cs__chronicle-todays-state {
  margin-bottom: var(--mk-space-generous-1);
}

.mk-cs__chronicle-archive {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-metadata);
  color: var(--mk-color-gray-cool);
  margin: var(--mk-space-standard-1) 0;
  word-break: break-all;
}

.mk-cs__chronicle-archive a {
  color: var(--mk-color-navy-deep);
  text-decoration: underline;
  text-decoration-color: var(--mk-color-gold-restrained);
}

.mk-cs__chronicle-positions {
  margin-top: var(--mk-space-standard-2);
  padding: var(--mk-space-standard-1);
  background: rgba(184, 146, 74, 0.04); /* Subtle gold-tinted background. */
  border-left: 2px solid var(--mk-color-gold-restrained);
}

.mk-cs__chronicle-positions-eyebrow {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mk-color-gray-cool);
  margin: 0 0 var(--mk-space-tight-3) 0;
}

.mk-cs__chronicle-positions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mk-font-body);
  font-size: 17px;
  line-height: 1.7;
}

.mk-cs__chronicle-positions-list li {
  margin-bottom: var(--mk-space-tight-2);
  color: var(--mk-color-charcoal);
}

.mk-cs__chronicle-positions-list strong {
  color: var(--mk-color-navy-deep);
  font-weight: 600;
}

.mk-cs__chronicle-positions-summary {
  margin: var(--mk-space-tight-3) 0 0 0;
  font-family: var(--mk-font-body);
  font-size: 17px;
  font-style: italic;
  color: var(--mk-color-navy-deep);
}

/* Milestone narrative blocks */
.mk-cs__chronicle-milestones {
  margin-bottom: var(--mk-space-generous-1);
}

.mk-cs__milestone-block {
  margin-bottom: var(--mk-space-generous-1);
  padding-bottom: var(--mk-space-generous-1);
  border-bottom: 1px solid var(--mk-color-gray-light);
}

.mk-cs__milestone-block:last-child {
  border-bottom: 0;
}

.mk-cs__milestone-date {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mk-color-gold-restrained);
  margin: 0 0 var(--mk-space-tight-2) 0;
}

.mk-cs__milestone-heading {
  font-family: var(--mk-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--mk-color-navy-deep);
  margin: 0 0 var(--mk-space-standard-1) 0;
  line-height: 1.3;
}

.mk-cs__milestone-body {
  margin-bottom: var(--mk-space-standard-2);
}

.mk-cs__milestone-screenshot {
  margin: var(--mk-space-standard-2) 0;
}

.mk-cs__milestone-video {
  margin: var(--mk-space-standard-2) 0;
  position: relative;
  /* WordPress wp_oembed wraps videos with their own aspect-ratio handling;
     parent container just provides spacing. */
}

/* Log feed */
.mk-cs__chronicle-log {
  margin-bottom: var(--mk-space-generous-1);
}

.mk-cs__chronicle-log-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mk-cs__chronicle-log-entry {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--mk-space-standard-1);
  padding: var(--mk-space-standard-1) 0;
  border-bottom: 1px solid var(--mk-color-gray-light);
  align-items: baseline;
}

.mk-cs__chronicle-log-entry:last-child {
  border-bottom: 0;
}

.mk-cs__chronicle-log-date {
  font-family: var(--mk-font-utility);
  font-size: 14px;
  font-weight: 500;
  color: var(--mk-color-gray-cool);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mk-cs__chronicle-log-body {
  font-family: var(--mk-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mk-color-charcoal);
}

.mk-cs__chronicle-log-body p {
  margin: 0;
}

/* Defined end state */
.mk-cs__chronicle-end-state {
  margin-top: var(--mk-space-generous-1);
  padding-top: var(--mk-space-standard-3);
  border-top: 2px solid var(--mk-color-navy-deep);
}

/* =====================================================================
   9. Section VIII primary CTA block + pricing language
   ===================================================================== */

.mk-cs__pricing-language {
  margin-top: var(--mk-space-standard-2);
  padding: var(--mk-space-standard-1);
  background: rgba(19, 27, 46, 0.03); /* Subtle navy-tinted background. */
  border-left: 2px solid var(--mk-color-navy-deep);
  font-size: 17px;
  font-style: italic;
  color: var(--mk-color-charcoal);
}

.mk-cs__pricing-language p {
  margin: 0;
}

.mk-cs__primary-cta-block {
  margin-top: var(--mk-space-generous-1);
  padding: var(--mk-space-standard-3) 0;
  text-align: center;
}

.mk-cs__cta-intro {
  font-family: var(--mk-font-body);
  font-size: 17px;
  color: var(--mk-color-charcoal);
  margin: 0 0 var(--mk-space-standard-1) 0;
  font-style: italic;
}

/*
 * Primary CTA button — restrained styling per Design Architecture Rev 3 canonical.
 * Navy primary background, gold accent border, off-white text. Not aggressive
 * marketing CTA; preserves editorial register. Hover state inverts subtly.
 */
.mk-cs__primary-cta-button {
  display: inline-block;
  font-family: var(--mk-font-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--mk-color-off-white);
  background: var(--mk-color-navy-deep);
  border: 1px solid var(--mk-color-navy-deep);
  border-bottom: 2px solid var(--mk-color-gold-restrained);
  padding: var(--mk-space-tight-3) var(--mk-space-standard-2);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mk-cs__primary-cta-button:hover,
.mk-cs__primary-cta-button:focus {
  background: var(--mk-color-off-white);
  color: var(--mk-color-navy-deep);
  border-color: var(--mk-color-navy-deep);
  border-bottom-color: var(--mk-color-navy-deep);
}

/* =====================================================================
   10. Related-content footer
   ===================================================================== */

.mk-cs__related-footer {
  max-width: var(--mk-width-reading);
  margin: var(--mk-space-generous-2) auto var(--mk-space-generous-1);
  padding: var(--mk-space-standard-3) 0;
  border-top: 1px solid var(--mk-color-gray-light);
  text-align: center;
}

.mk-cs__related-eyebrow {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mk-color-gray-cool);
  margin: 0 0 var(--mk-space-standard-1) 0;
}

.mk-cs__related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-tight-3);
}

.mk-cs__related-item {
  margin: 0;
}

.mk-cs__related-link {
  font-family: var(--mk-font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--mk-color-navy-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mk-cs__related-link:hover,
.mk-cs__related-link:focus {
  color: var(--mk-color-gold-restrained);
}

.mk-cs__related-arrow {
  color: var(--mk-color-gold-restrained);
  display: inline-block;
  transition: transform 0.2s ease;
}

.mk-cs__related-link:hover .mk-cs__related-arrow {
  transform: translateX(4px);
}

/* =====================================================================
   11. Sub-case-study placeholder content (Option β)
   ===================================================================== */

.mk-case-study--placeholder {
  background: var(--mk-color-off-white);
  padding: var(--mk-space-generous-2) var(--mk-space-standard-2);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mk-cs__placeholder-body {
  max-width: var(--mk-width-reading);
  margin: 0 auto;
  text-align: left;
}

.mk-cs__placeholder-prose {
  margin: var(--mk-space-generous-1) 0;
}

.mk-cs__placeholder-cta-block {
  margin: var(--mk-space-generous-1) 0 var(--mk-space-standard-3);
}

.mk-cs__placeholder-cta-block .mk-cs__cta-intro {
  text-align: left;
}

.mk-cs__placeholder-secondary-link {
  margin: var(--mk-space-standard-2) 0 0 0;
}

/* =====================================================================
   12. Responsive — tablet (769-1024px)
   ===================================================================== */

@media (max-width: 1024px) {
  :root {
    --mk-fs-h1: 48px;
    --mk-fs-h2: 36px;
  }

  .mk-cs__hero-region {
    grid-template-columns: minmax(0, 1fr) 280px;
    padding: var(--mk-space-generous-1) var(--mk-space-standard-2);
  }
}

/* =====================================================================
   13. Responsive — mobile large (481-768px) — sidebar stacks above hero
   ===================================================================== */

@media (max-width: 768px) {
  :root {
    --mk-fs-h1:        40px;
    --mk-fs-h2:        32px;
    --mk-fs-h3:        22px;
    --mk-fs-body:      16px;
    --mk-fs-body-lead: 19px;
  }

  /*
   * Sidebar bio stacks above hero block at mobile per Item 2 canonical at
   * Phase 1 launch baseline mobile rendering.
   */
  .mk-cs__hero-region {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bio"
      "hero";
    gap: var(--mk-space-standard-2);
    padding: var(--mk-space-standard-3) var(--mk-space-standard-1);
  }

  .mk-cs__sidebar-bio {
    border-bottom: 1px solid var(--mk-color-gray-light);
    padding-bottom: var(--mk-space-standard-1);
  }

  .mk-cs__bio {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--mk-space-standard-1);
    align-items: start;
    border-left: 0;
    border-bottom: 0;
    padding-left: 0;
    padding-bottom: 0;
  }

  .mk-cs__bio-portrait {
    margin-bottom: 0;
  }

  .mk-cs__bio-portrait-img {
    max-width: 100px;
  }

  .mk-cs__hero-screenshot,
  .mk-cs__screenshot-full-width {
    margin: var(--mk-space-standard-3) calc(-1 * var(--mk-space-standard-1)) var(--mk-space-standard-3);
  }

  .mk-cs__section {
    padding: var(--mk-space-standard-3) 0;
  }

  .mk-cs__section-heading {
    margin-bottom: var(--mk-space-standard-1);
  }

  .mk-cs__chronicle-log-entry {
    grid-template-columns: 1fr;
    gap: var(--mk-space-tight-1);
  }

  .mk-cs__chronicle-log-date {
    margin-bottom: 0;
  }

  .mk-cs__retention-timeline-track {
    grid-template-columns: 1fr 1fr;
  }

  .mk-cs__retention-timeline-track::before {
    display: none; /* Disable horizontal line at vertical layout. */
  }

  .mk-cs__primary-cta-block {
    text-align: left;
  }
}

/* =====================================================================
   14. Responsive — mobile small (0-480px) — tightest layout
   ===================================================================== */

@media (max-width: 480px) {
  :root {
    --mk-fs-h1:        32px;
    --mk-fs-h2:        26px;
    --mk-fs-body:      16px;
    --mk-fs-body-lead: 18px;
  }

  .mk-cs__hero-region {
    padding: var(--mk-space-standard-2) var(--mk-space-tight-3);
  }

  .mk-cs__body {
    padding: 0 var(--mk-space-tight-3);
  }

  .mk-cs__bio {
    grid-template-columns: 80px 1fr;
  }

  .mk-cs__bio-portrait-img {
    max-width: 80px;
  }

  .mk-cs__retention-timeline-track {
    grid-template-columns: 1fr;
  }

  .mk-cs__primary-cta-button {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
}

/* =====================================================================
   15. Print styles — restrained editorial print
   ===================================================================== */

@media print {
  .mk-cs__sidebar-bio,
  .mk-cs__primary-cta-block,
  .mk-cs__related-footer {
    display: none;
  }

  .mk-case-study {
    background: white;
    color: black;
    font-size: 11pt;
    line-height: 1.5;
  }

  .mk-cs__hero-region,
  .mk-cs__section {
    padding: 1em 0;
  }
}
/* =====================================================================
   Alignment fix — left-align body sections to the hero content edge
   ===================================================================== */
.mk-case-study .mk-cs__hero-region {
  padding-inline: var(--mk-space-standard-2);
  box-sizing: border-box;
}

.mk-case-study .mk-cs__section {
  margin-inline: 0;
}
/* =====================================================================
   Landing-page layout — no sidebar; centered column; inline bottom bio
   Supersedes the earlier hero-region sidebar + alignment overrides.
   ===================================================================== */

/* Hero: single centered column (sidebar removed) */
.mk-cs__hero {
  max-width: var(--mk-width-wide);
  margin-inline: auto;
  padding-inline: var(--mk-space-standard-2);
  box-sizing: border-box;
}
.mk-cs__hero-content {
  margin-inline: auto;
}

/* Body sections: re-center on the page */
.mk-case-study .mk-cs__section {
  margin-inline: auto;
}

/* Inline "About Matthew" bio at page bottom — centered, not a sidebar */
.mk-cs__bio-inline {
  max-width: var(--mk-width-reading);
  margin: var(--mk-space-generous-2) auto 0;
  padding: var(--mk-space-generous-1) var(--mk-space-standard-2) 0;
  border-top: 1px solid var(--mk-color-gray-light);
}
.mk-cs__bio-inline .mk-cs__bio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-standard-2);
}
.mk-cs__bio-inline .mk-cs__bio-portrait-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.mk-cs__bio-inline .mk-cs__bio-meta {
  max-width: 480px;
}

@media (max-width: 768px) {
  .mk-cs__bio-inline .mk-cs__bio {
    flex-direction: column;
    text-align: center;
  }
}
/* =====================================================================
   Landing-page refinements — contained centered media + tighter rhythm
   Supersedes the prior full-bleed hero screenshot treatment.
   ===================================================================== */

/* Hero: restore top breathing room (previously lived on the removed sidebar region) */
.mk-cs__hero {
  padding-top: var(--mk-space-generous-1);
}

/* Hero + chronicle screenshots: contain to the centered content column,
   no full-bleed, with tighter vertical spacing */
.mk-cs__hero-screenshot,
.mk-cs__screenshot-full-width {
  margin: var(--mk-space-standard-2) auto;
  max-width: var(--mk-width-reading);
}

/* Captions: keep in the column and wrap the long Wayback URL instead of
   running off-screen */
.mk-cs__screenshot-caption {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tighten the gap between the hero screenshot/caption and the body copy */
.mk-cs__hero-body {
  margin-top: var(--mk-space-standard-2);
}

/* Tighten paragraph rhythm in the body prose */
.mk-cs__prose p {
  margin-bottom: var(--mk-space-tight-3);
}
/* =====================================================================
   Merged author footer + screenshot size + tightened CTA spacing
   ===================================================================== */

/* Reduce hero/chronicle screenshot so it sits inside the text column */
.mk-cs__hero-screenshot,
.mk-cs__screenshot-full-width {
  max-width: 680px;
}

/* Pull the CTA and the merged footer closer together */
.mk-cs__section--8 {
  padding-bottom: var(--mk-space-standard-2);
}

/* Merged author + links footer */
.mk-cs__author-footer {
  max-width: var(--mk-width-reading);
  margin: 0 auto;
  padding-top: var(--mk-space-standard-2);
  border-top: 1px solid var(--mk-color-gray-light);
  text-align: center;
}

.mk-cs__author-bio {
  margin-bottom: var(--mk-space-standard-1);
}

.mk-cs__author-bio .mk-cs__bio-name {
  font-family: var(--mk-font-display);
  font-size: var(--mk-fs-h3);
  color: var(--mk-color-navy-deep);
  margin: 0 0 var(--mk-space-tight-1) 0;
}

.mk-cs__author-bio .mk-cs__bio-eyebrow {
  font-family: var(--mk-font-utility);
  font-size: var(--mk-fs-eyebrow);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mk-color-gold-restrained);
  margin: 0 0 var(--mk-space-tight-2) 0;
}

.mk-cs__author-bio .mk-cs__bio-framing {
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-body);
  color: var(--mk-color-charcoal);
  max-width: 520px;
  margin: 0 auto;
}

/* Links stacked, tight, directly under the bio */
.mk-cs__author-footer .mk-cs__related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mk-cs__author-footer .mk-cs__related-item {
  margin: 0 0 var(--mk-space-tight-2) 0;
}
/* =====================================================================
   Screenshot aligns to the body text column; title/subhead spacing
   ===================================================================== */

/* Match the screenshot to the 720px body column so both edges line up
   with the paragraphs (replaces the earlier 680px cap) */
.mk-cs__hero-screenshot,
.mk-cs__screenshot-full-width {
  max-width: var(--mk-width-reading);
  margin-inline: auto;
}

/* More space between the page title and the subhead */
.mk-cs__hero-headline {
  margin-bottom: var(--mk-space-standard-3);
}
/* =====================================================================
   Hero column alignment — widen subhead, left-align + compress screenshot
   ===================================================================== */

/* Subhead fills the full content column (was capped narrower) */
.mk-cs__hero-subhead {
  max-width: var(--mk-width-reading);
}

/* Screenshot: box spans the body column so its LEFT edge lines up with the
   paragraphs; the image is left-aligned inside and capped so its RIGHT edge
   sits inside the column instead of overhanging the text */
.mk-cs__hero-screenshot,
.mk-cs__screenshot-full-width {
  max-width: var(--mk-width-reading);
  margin-inline: auto;
}
.mk-cs__hero-screenshot-img,
.mk-cs__chronicle-screenshot-img {
  display: block;
  width: 100%;
  max-width: 700px;
  margin-left: 0;
  margin-right: auto;
}
/* =====================================================================
   Mobile edge alignment — match Section II+ edges to Section I
   ===================================================================== */
@media (max-width: 480px) {
  .mk-cs__body {
    padding: 0 var(--mk-space-standard-2);
  }
}

@media (max-width: 768px) {
  .mk-cs__hero-screenshot,
  .mk-cs__screenshot-full-width {
    margin-inline: auto;
  }
}