/* Soft stone surfaces separate the Sketch controls from the white page. */
html[data-edition="sketch"] {
  --sketch-surface: #eeedea;
  --sketch-control: #e3e2de;
  --sketch-hover: #d8d6d0;
  --sketch-border: #d2d0c9;
}

/* Keep the existing capsule construction, with a pale shell and darker inset. */
html[data-edition="sketch"] body.octave-home .hero-action,
html[data-edition="sketch"] body.octave-home .jm-bar:not(.jm-menu-open) .jm-bar-inner,
html[data-edition="sketch"] body.octave-home .story-lockup .board-story-info {
  background: var(--sketch-surface) !important;
  border-color: var(--sketch-border) !important;
}

html[data-edition="sketch"] body.octave-home .hero-action::before,
html[data-edition="sketch"] body.octave-home .hero-action-work .hero-action-arrow,
html[data-edition="sketch"] body .jm-bar .toolbar-home-capsule,
html[data-edition="sketch"] body .jm-bar .jm-menu-toggle,
html[data-edition="sketch"] body.octave-home .story-lockup .board-story-info::after,
html[data-edition="sketch"] body .jm-bar.jm-menu-open .jm-barnav .jm-connect {
  background: var(--sketch-control) !important;
  border-color: var(--sketch-border) !important;
  box-shadow: none;
}

/* Reading cards, navigation and the role chooser share one quieter surface. */
html[data-edition="sketch"] .services-feature .service-stack-card,
html[data-edition="sketch"] .role-carousel .role-card,
html[data-edition="sketch"] .home-about .working-glass .about-bio-row,
html[data-edition="sketch"] .home-about .working-glass .audience-tabs,
html[data-edition="sketch"] body .jm-bar.jm-menu-open .jm-barnav,
html[data-edition="sketch"] .toolbar-pill-glass {
  background: var(--sketch-surface);
  border-color: var(--sketch-border);
  box-shadow: inset 0 1px 0 #ffffff80;
}
html[data-edition="sketch"] .role-carousel .role-card::before {
  background: linear-gradient(135deg, #ffffff18, transparent 60%);
  box-shadow: none;
}
html[data-edition="sketch"] .home-about .working-glass .audience-tab,
html[data-edition="sketch"] .role-carousel .role-arrow {
  background: var(--sketch-control);
  border-color: var(--sketch-border);
}
html[data-edition="sketch"] .home-about .working-glass .audience-tab[aria-selected="true"] {
  background: var(--sketch-hover);
  border-color: #bbb8b0;
}

/* The board's information panel uses the same palette as the other cards. */
html[data-edition="sketch"] .story-lockup .board-preview {
  border-color: var(--sketch-border);
}
html[data-edition="sketch"] .board-preview[data-edition="sketch"] .board-preview-gloss {
  background: var(--sketch-surface) !important;
  box-shadow: inset 0 1px 0 #ffffff80 !important;
}
html[data-edition="sketch"] .board-preview-tools li {
  background: var(--sketch-control);
  border-color: var(--sketch-border);
}

@media (hover: hover) {
  html[data-edition="sketch"] body.octave-home .hero-action:hover::before,
  html[data-edition="sketch"] body .jm-bar .toolbar-home-capsule:hover,
  html[data-edition="sketch"] body .jm-bar .jm-menu-toggle:hover,
  html[data-edition="sketch"] body .jm-bar.jm-menu-open .jm-barnav .jm-connect:hover,
  html[data-edition="sketch"] body.octave-home .story-lockup .board-story-info:hover::after,
  html[data-edition="sketch"] .home-about .working-glass .audience-tab:hover,
  html[data-edition="sketch"] .role-carousel .role-arrow:hover {
    background: var(--sketch-hover) !important;
  }
}