/*
 * CarvePress default theme - "proof sheet".
 *
 * Carve's thesis is that the markup looks like its output, so the docs are set
 * like a type specimen: a mark beside its printed result. Brass marks the cut
 * edge (rules, eyebrows, captions); verdigris carries the language's own
 * identity into links. Spectral's incised terminals nod to letters cut in
 * stone; Plex keeps body and code engineered rather than literary.
 */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,800;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper: #f7f6f3;
  --paper-sunk: #eeece6;
  --ink: #1b1d21;
  --ink-soft: #5d6068;
  --rule: #dcd8cf;
  --verdigris: #2f7d6b;
  --brass: #9c7430;
  --code-line-highlight: rgb(156 116 48 / 0.13);
  --code-line-add: rgb(47 125 107 / 0.16);
  --code-line-remove: rgb(180 71 47 / 0.14);
  --code-line-warning: rgb(156 116 48 / 0.18);
  --code-line-error: rgb(180 71 47 / 0.18);
  --code-word-highlight: rgb(156 116 48 / 0.28);
  --highlight: rgb(156 116 48 / 0.3);
  --highlight-ink: #1b1d21;
  --insert: rgb(47 125 107 / 0.16);
  --insert-ink: #1f5a4c;
  --delete: rgb(180 71 47 / 0.14);
  --delete-ink: #8f3520;

  --display: Spectral, 'Iowan Old Style', Palatino, Georgia, serif;
  --body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sidebar-w: 250px;
  --outline-w: 210px;
  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  /* Keep these tokens in sync with :root[data-theme='dark'] below. */
  :root:not([data-theme='light']) {
    --paper: #14161a;
    --paper-sunk: #1b1e23;
    --ink: #e6e4de;
    --ink-soft: #9a9ba1;
    --rule: #2b2f36;
    --verdigris: #62b39c;
    --brass: #c79a4d;
    --code-line-highlight: rgb(199 154 77 / 0.18);
    --code-line-add: rgb(98 179 156 / 0.16);
    --code-line-remove: rgb(220 103 78 / 0.18);
    --code-line-warning: rgb(199 154 77 / 0.2);
    --code-line-error: rgb(220 103 78 / 0.2);
    --code-word-highlight: rgb(199 154 77 / 0.32);
    --highlight: rgb(199 154 77 / 0.34);
    --highlight-ink: #e6e4de;
    --insert: rgb(98 179 156 / 0.16);
    --insert-ink: #7cc5b0;
    --delete: rgb(220 103 78 / 0.18);
    --delete-ink: #e8907c;
  }
  :root:not([data-theme='light']) .shiki,
  :root:not([data-theme='light']) .shiki span {
    color: var(--shiki-dark) !important;
    background-color: transparent !important;
  }
}

:root[data-theme='dark'] {
  --paper: #14161a;
  --paper-sunk: #1b1e23;
  --ink: #e6e4de;
  --ink-soft: #9a9ba1;
  --rule: #2b2f36;
  --verdigris: #62b39c;
  --brass: #c79a4d;
  --code-line-highlight: rgb(199 154 77 / 0.18);
  --code-line-add: rgb(98 179 156 / 0.16);
  --code-line-remove: rgb(220 103 78 / 0.18);
  --code-line-warning: rgb(199 154 77 / 0.2);
  --code-line-error: rgb(220 103 78 / 0.2);
  --code-word-highlight: rgb(199 154 77 / 0.32);
  --highlight: rgb(199 154 77 / 0.34);
  --highlight-ink: #e6e4de;
  --insert: rgb(98 179 156 / 0.16);
  --insert-ink: #7cc5b0;
  --delete: rgb(220 103 78 / 0.18);
  --delete-ink: #e8907c;
}
/* Keep this Shiki override in sync with the media-query override above. */
:root[data-theme='dark'] .shiki,
:root[data-theme='dark'] .shiki span {
  color: var(--shiki-dark) !important;
  background-color: transparent !important;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verdigris); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------------------------ layout */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1500px;
  margin: 0 auto;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--rule);
}
.site-title {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.site-title:hover { color: var(--verdigris); }
.site-logo {
  display: block;
  width: auto;
  height: 1.7rem;
  object-fit: contain;
}
.site-logo-pair {
  display: inline-flex;
  align-items: center;
}
.site-logo--dark { display: none; }
:root[data-theme='dark'] .site-logo--light { display: none; }
:root[data-theme='dark'] .site-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .site-logo--light { display: none; }
  :root:not([data-theme='light']) .site-logo--dark { display: block; }
}
.site-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
}
.drawer-toggle {
  display: none;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
}
.drawer-toggle:hover {
  color: var(--verdigris);
  border-color: var(--verdigris);
}
.drawer-toggle span,
.drawer-toggle span::before,
.drawer-toggle span::after {
  display: block;
  width: 1rem;
  height: 2px;
  background: currentColor;
}
.drawer-toggle span::before,
.drawer-toggle span::after {
  content: '';
  position: absolute;
  left: calc(50% - 0.5rem);
}
.drawer-toggle span::before { top: 0.68rem; }
.drawer-toggle span::after { bottom: 0.68rem; }
.drawer-scrim[hidden] { display: none; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__item { position: relative; }
.site-nav__link,
.site-nav__dropdown summary,
.site-nav__dropdown-link,
.site-search,
.theme-toggle,
.social-link {
  font-family: var(--body);
  font-size: 0.78rem;
}
.site-nav__link,
.site-nav__dropdown summary {
  display: block;
  padding: 0.35rem 0.55rem;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.site-nav__link:hover,
.site-nav__dropdown summary:hover { color: var(--ink); }
.site-nav__link[aria-current='page'],
.site-nav__dropdown summary[aria-current='page'] {
  color: var(--verdigris);
  border-bottom-color: var(--verdigris);
}
.site-nav__dropdown summary::marker { color: var(--brass); }
.site-nav__dropdown ul {
  position: absolute;
  right: 0;
  z-index: 10;
  display: grid;
  gap: 0;
  min-width: 11rem;
  margin-top: 0.45rem;
  padding: 0.35rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brass);
  box-shadow: 0 0.7rem 1.5rem rgb(0 0 0 / 0.08);
}
.site-nav__dropdown:not([open]) ul { display: none; }
.site-nav__dropdown-link {
  display: block;
  padding: 0.36rem 0.75rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link[aria-current='page'] {
  color: var(--verdigris);
  background: var(--paper-sunk);
}
.social-links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.social-link,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
}
.social-link:hover,
.theme-toggle:hover {
  color: var(--verdigris);
  border-color: var(--rule);
}
.social-link svg {
  width: 1rem;
  height: 1rem;
}
.site-search {
  position: relative;
  min-width: 11rem;
}
.site-search[hidden] { display: none; }
.site-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.site-search__input {
  width: 100%;
  height: 2rem;
  padding: 0 0.65rem;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: inherit;
}
.site-search__input:focus {
  border-color: var(--verdigris);
}
.site-search__input::placeholder { color: var(--ink-soft); }
.site-search__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 20;
  width: min(28rem, calc(100vw - 2.5rem));
  max-height: min(26rem, calc(100vh - 5rem));
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brass);
  box-shadow: 0 0.7rem 1.5rem rgb(0 0 0 / 0.1);
}
.site-search__panel[hidden] { display: none; }
.site-search__results {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
}
.site-search__results a {
  display: grid;
  gap: 0.1rem;
  padding: 0.48rem 0.55rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
}
.site-search__results a:hover,
.site-search__results a.is-active {
  background: var(--paper-sunk);
}
.site-search__result-title {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.site-search__result-section {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink);
}
.site-search__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.locale-switcher ul {
  display: flex;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.locale-switcher a {
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-decoration: none;
}
.locale-switcher a:hover,
.locale-switcher a[aria-current='true'] { color: var(--ink); }
.theme-toggle {
  padding: 0 0.55rem;
  cursor: pointer;
}
.theme-toggle::before {
  content: '';
  width: 0.72rem;
  height: 0.72rem;
  margin-right: 0.35rem;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset -0.18rem -0.18rem 0 var(--brass);
}
.theme-toggle[data-theme-toggle-state='dark']::before {
  background: var(--brass);
  box-shadow: inset 0.24rem 0 0 var(--paper);
}

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--outline-w);
  gap: 3rem;
  max-width: 1500px;
  margin: 0 auto;
  padding: 3rem 2rem 8rem;
  align-items: start;
}
.layout--no-aside { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.layout--no-sidebar { grid-template-columns: minmax(0, 1fr) var(--outline-w); }
.layout--no-sidebar.layout--no-aside { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1180px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .layout--no-sidebar,
  .layout--no-sidebar.layout--no-aside { grid-template-columns: minmax(0, 1fr); }
  .outline { display: none; }
}
@media (max-width: 820px) {
  html[data-drawer-lock],
  html[data-drawer-lock] body { overflow: hidden; }
  .site-header {
    position: sticky;
    top: 0;
    /* Above the scrim, not below it. The header is a stacking context here, so
       the nav drawer nested inside it cannot escape this value however high its
       own z-index is - at 40 the scrim covered the drawer's links and every tap
       closed the menu instead of following the link. */
    z-index: 60;
    align-items: center;
    padding: 0.85rem 1.25rem;
    background: var(--paper);
  }
  .site-title { min-width: 0; }
  .site-title__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-header__right { gap: 0.55rem; }
  .drawer-toggle { display: inline-flex; }
  .drawer-toggle--sidebar { order: -1; }
  .drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgb(0 0 0 / 0.42);
  }
  .site-nav,
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    width: min(22rem, calc(100vw - 3.5rem));
    max-height: none;
    overflow-y: auto;
    padding: 4rem 1.25rem 1.5rem;
    background: var(--paper);
    border: 0;
    box-shadow: 0.9rem 0 2rem rgb(0 0 0 / 0.14);
  }
  .site-nav[data-drawer-open],
  .sidebar[data-drawer-open] { display: block; }
  .site-nav {
    right: 0;
    left: auto;
    box-shadow: -0.9rem 0 2rem rgb(0 0 0 / 0.14);
  }
  .sidebar {
    left: 0;
    right: auto;
  }
  .site-nav ul {
    display: grid;
    align-items: stretch;
    gap: 0.2rem;
  }
  .site-nav__link,
  .site-nav__dropdown summary {
    padding: 0.62rem 0;
    font-size: 0.95rem;
  }
  .site-nav__dropdown ul {
    position: static;
    margin: 0.25rem 0 0.65rem;
    border: 0;
    border-left: 2px solid var(--rule);
    box-shadow: none;
  }
  /* The header is one row on desktop and two on a phone: brand and controls on
     the first, search across the full width of the second. Without wrapping,
     the title, the locale switcher, and the search box overlap each other. */
  .site-header { flex-wrap: wrap; row-gap: 0.65rem; }
  .site-title { margin-right: auto; }
  .site-header__right { flex-wrap: wrap; row-gap: 0.65rem; margin-left: auto; }
  .locale-switcher { order: 9; }
  .site-search { order: 10; width: 100%; }
  .site-search__panel { left: 0; right: auto; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 1.5rem 1.25rem 5rem; }
}

.sidebar,
.outline {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar { border-right: 1px solid var(--rule); padding-right: 1.5rem; }

/* -------------------------------------------------------------------- home */

.home-layout {
  max-width: 1500px;
  margin: 0 auto;
  padding: 4.5rem 2rem 8rem;
}
.page-layout {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 2rem 8rem;
}
@media (max-width: 640px) {
  .page-layout { padding: 2rem 1.25rem 5rem; }
}
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 22rem);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  min-height: min(42rem, calc(100vh - 8rem));
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--rule);
}
.home-hero__content {
  min-width: 0;
  order: 1;
}
.home-hero__media {
  order: 2;
  justify-self: center;
  width: min(100%, 22rem);
}
.home-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 24rem;
  object-fit: contain;
}
.home-hero__name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 9.5rem);
  font-weight: 800;
  line-height: 0.95;
  color: var(--ink);
}
.home-hero__name::after {
  content: '';
  display: block;
  width: 4.75rem;
  height: 4px;
  margin: 1.7rem 0 0;
  background: var(--brass);
}
.home-hero__text {
  max-width: 42rem;
  margin: 1.5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.55rem, 4vw, 2.55rem);
  font-weight: 600;
  line-height: 1.14;
  color: var(--ink);
}
.home-hero__tagline {
  max-width: 41rem;
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.home-hero__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.52rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.home-hero__action--brand {
  color: var(--paper);
  background: var(--verdigris);
  border-color: var(--verdigris);
}
.home-hero__action--brand:hover {
  color: var(--paper);
  filter: brightness(0.96);
}
.home-hero__action--alt {
  color: var(--ink);
  background: transparent;
}
.home-hero__action--alt:hover {
  color: var(--verdigris);
  border-color: var(--verdigris);
}
.home-features {
  padding: 4rem 0 0;
}
.home-features ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-feature {
  min-width: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--brass);
}
.home-feature h2 {
  margin: 0 0 0.55rem;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.home-feature p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.home-body {
  max-width: var(--measure);
  margin-top: 4.5rem;
}
@media (max-width: 940px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-hero__media { order: 1; justify-self: start; width: min(12rem, 48vw); }
  .home-hero__content { order: 2; }
  .home-features ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-layout { padding: 2.75rem 1.25rem 5rem; }
  .home-hero { gap: 2rem; padding-bottom: 3rem; }
  .home-hero__name { font-size: clamp(3.2rem, 22vw, 5rem); }
  .home-hero__actions { align-items: stretch; flex-direction: column; }
  .home-hero__action { justify-content: center; width: 100%; }
  .home-features { padding-top: 3rem; }
  .home-features ul { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
}

/* ----------------------------------------------------------------- sidebar */

.sidebar ul, .outline ul { list-style: none; margin: 0; padding: 0; }
.sidebar-group { margin-bottom: 1.75rem; }
.sidebar details.sidebar-group { margin-bottom: 1.75rem; }
.sidebar-group__title {
  display: block;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.sidebar details > .sidebar-group__title {
  cursor: pointer;
  list-style-position: outside;
}
.sidebar details > .sidebar-group__title::marker { color: var(--ink-soft); }
.sidebar__item > ul { margin-top: 0.1rem; margin-bottom: 0.2rem; }
.sidebar__item--l2 { padding-left: 0.8rem; }
.sidebar__item--l3 { padding-left: 1.6rem; }
.sidebar__item--l4 { padding-left: 2.4rem; }
.sidebar__item--l5 { padding-left: 3.2rem; }
.sidebar__text {
  display: block;
  padding: 0.24rem 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.sidebar a {
  display: block;
  padding: 0.24rem 0 0.24rem 0.75rem;
  margin-left: -0.75rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.sidebar a:hover { color: var(--ink); border-left-color: var(--rule); }
.sidebar a[aria-current='page'] {
  color: var(--verdigris);
  font-weight: 600;
  border-left-color: var(--verdigris);
}

@media (max-width: 820px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    z-index: 60;
    display: none;
    width: min(22rem, calc(100vw - 3.5rem));
    max-height: none;
    overflow-y: auto;
    padding: 4rem 1.25rem 1.5rem;
    background: var(--paper);
    border: 0;
    box-shadow: 0.9rem 0 2rem rgb(0 0 0 / 0.14);
  }
  .sidebar[data-drawer-open] { display: block; }
}

/* ----------------------------------------------------------------- outline */

.outline { border-left: 1px solid var(--rule); padding-left: 1.5rem; font-size: 0.8rem; }
.outline::before {
  content: attr(aria-label);
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.7rem;
}
.outline a {
  display: block;
  padding: 0.22rem 0 0.22rem 1.5rem;
  margin-left: -1.5rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.outline a:hover { color: var(--verdigris); border-left-color: var(--rule); }
.outline a[aria-current='true'] {
  color: var(--verdigris);
  font-weight: 600;
  border-left-color: var(--verdigris);
}
.outline__item--l3 a { padding-left: 2.4rem; font-size: 0.76rem; }

/* ----------------------------------------------------------------- content */

/*
 * Prose keeps a readable measure, but wide blocks are allowed to use the whole
 * column: a comparison table or a source/output pair is data, and squeezing it
 * into a text measure buys nothing and costs a scrollbar.
 */
.content { min-width: 0; }
.content > * { max-width: var(--measure); }
.content > .table-scroll,
.content > .carve-compare,
.content > .carve-playground,
.content > .code-group,
.content > .code-block,
.content > pre,
.content > figure { max-width: none; }
.content > section > * { max-width: var(--measure); }
.content > section > .table-scroll,
.content > section > .carve-compare,
.content > section > .carve-playground,
.content > section > .code-group,
.content > section > .code-block,
.content > section > pre,
.content > section > figure { max-width: none; }
.version-banner {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  border-radius: 4px;
}
.version-banner p {
  margin: 0;
  font-size: 0.92rem;
}

.content h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
/* The rule under the title is the cut line: brass, thick, short. */
.content h1::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1.1rem;
  background: var(--brass);
}
.content h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 3.5rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.content h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.22rem;
  margin: 2.2rem 0 0.6rem;
}
.content h4 { font-family: var(--body); font-weight: 600; font-size: 1rem; margin: 1.6rem 0 0.4rem; }
.content p { margin: 0 0 1.1rem; }
.content ul, .content ol { padding-left: 1.3rem; margin: 0 0 1.1rem; }
.content li { margin-bottom: 0.35rem; }
.content strong { font-weight: 600; }

.content :not(pre) > code {
  font-family: var(--mono);
  font-size: 0.845em;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: 0.08em 0.36em;
  border-radius: 3px;
}

.content pre {
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.62;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  margin: 1.3rem 0;
}
.content pre code { font-family: inherit; background: none; border: 0; padding: 0; white-space: pre; }

/* {.diff} language-fence presentation, from carve-grammars' diffCodeTransformer. */
.shiki.has-diff {
  --carve-diff-add-background: rgb(46 160 67 / 15%);
  --carve-diff-add-marker: #1a7f37;
  --carve-diff-remove-background: rgb(248 81 73 / 15%);
  --carve-diff-remove-marker: #cf222e;
}
.shiki.has-diff .line { display: inline-block; width: 100%; }
.shiki.has-diff .line.diff.add { background: var(--carve-diff-add-background); }
.shiki.has-diff .line.diff.remove { background: var(--carve-diff-remove-background); }
.shiki.has-diff .diff-marker { display: inline-block; width: 1ch; font-weight: 700; }
.shiki.has-diff .line.diff.add .diff-marker { color: var(--carve-diff-add-marker); }
.shiki.has-diff .line.diff.remove .diff-marker { color: var(--carve-diff-remove-marker); }

.code-block {
  position: relative;
  margin: 1.3rem 0;
  --code-block-line-start: 0;
}
.code-block pre { margin: 0; }
.code-block__title {
  content: attr(title);
  display: block;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  padding: 0.58rem 3rem 0.5rem 1rem;
}
.code-block__title + .code-block__copy + template + pre {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* An icon, and only while the reader is looking at this block: a permanent
   label sits on top of the code and hides the end of the first line. It stays
   in the DOM and in the tab order, so keyboard and screen reader users are not
   trading access for tidiness. */
.code-block__copy {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.code-block:hover .code-block__copy,
.code-block:focus-within .code-block__copy,
.code-block__copy:focus-visible,
.code-block__copy[data-copied='true'] { opacity: 1; }
.code-block__copy:hover,
.code-block__copy[data-copied='true'] {
  color: var(--verdigris);
  border-color: var(--verdigris);
}
.code-block__copy:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.code-block__copy svg { display: block; }
.code-block__copy-check { display: none; }
.code-block__copy[data-copied='true'] .code-block__copy-icon { display: none; }
.code-block__copy[data-copied='true'] .code-block__copy-check { display: block; }
/* Nothing hovers on a touch screen, so there the button is simply always there. */
@media (hover: none) {
  .code-block__copy { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .code-block__copy { transition: none; }
}
.carve-playground .code-block__copy,
.carve-compare__pane .code-block__copy { display: none; }
.carve-compare__source .code-block__copy { display: inline-flex; }
.code-block .line {
  display: inline-block;
  min-width: 100%;
  padding: 0 1.15rem;
  margin: 0 -1.15rem;
}
.code-block--line-numbers pre {
  counter-reset: code-line var(--code-block-line-start);
}
.code-block--line-numbers .line {
  padding-left: 4.1rem;
}
.code-block--line-numbers .line::before {
  display: inline-block;
  width: 2.25rem;
  margin-left: -3rem;
  margin-right: 0.75rem;
  color: var(--ink-soft);
  text-align: right;
  content: counter(code-line);
  counter-increment: code-line;
  user-select: none;
}
.code-block .line.highlighted { background: var(--code-line-highlight); }
.code-block .line.diff.add,
.code-block .line.diff.remove { position: relative; }
.code-block .line.diff.add { background: var(--code-line-add); }
.code-block .line.diff.remove { background: var(--code-line-remove); }
.code-block .line.diff.add::after,
.code-block .line.diff.remove::after {
  position: absolute;
  left: 0.35rem;
  color: var(--ink-soft);
  user-select: none;
}
.code-block .line.diff.add::after { content: '+'; }
.code-block .line.diff.remove::after { content: '-'; }
.code-block .line.warning { background: var(--code-line-warning); }
.code-block .line.error { background: var(--code-line-error); }
.code-block .highlighted-word {
  background: var(--code-word-highlight);
  border-radius: 2px;
}
.code-block:has(.focused) .line:not(.focused) {
  filter: blur(1.8px);
  opacity: 0.55;
  transition: filter 0.16s ease, opacity 0.16s ease;
}
.code-block:has(.focused):hover .line:not(.focused),
.code-block:has(.focused):focus-within .line:not(.focused) {
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .code-block:has(.focused) .line:not(.focused) { transition: none; }
}

.content blockquote {
  margin: 1.4rem 0;
  padding: 0.1rem 0 0.1rem 1.15rem;
  border-left: 2px solid var(--brass);
  color: var(--ink-soft);
  font-style: italic;
}
.content blockquote p:last-child { margin-bottom: 0; }

.table-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.4rem 0;
}

/*
 * The table always lays out at its natural width and the shell clips it, so
 * expanding reveals more of the SAME layout rather than re-wrapping into a
 * different one. That is what keeps the height identical in both states - a
 * table that re-wraps changes height, which reads as the box jumping.
 */
.table-scroll > table {
  width: max-content;
  min-width: 100%;
}
.table-scroll:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.content table {
  display: table;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 0.88rem;
}
.content th, .content td { border: 1px solid var(--rule); padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; }
.content th {
  background: var(--paper-sunk);
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
}

.content img { max-width: 100%; height: auto; }
.content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.content figure { margin: 1.5rem 0; }
.content figcaption { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* ------------------------------------------------- wide-block hover expand */

/*
 * The hovered/focused scroll shell stays in normal flow. Its child is overlaid
 * for the expanded state so row rewrapping cannot resize the box carrying
 * :hover/:focus-within and kick the pointer or focus target out from under it.
 */
.table-scroll > table,
.carve-compare__frame {
  transform-origin: top left;
  transition:
    box-shadow 240ms ease-out,
    transform 240ms ease-out;
  transition-delay: 0s;
}
@media (min-width: 1181px) {
  .table-scroll[data-overflowing]:is(:hover, :focus-within),
  .carve-compare[data-overflowing]:is(:hover, :focus-within) {
    overflow: visible;
    /*
     * Going from a scrolling box to a visible one removes the horizontal
     * scrollbar, and with classic (space-taking) scrollbars that alone makes
     * the box shorter. Pad by exactly the thickness the scrollbar occupied so
     * the block's height is identical in both states. On platforms with
     * overlay scrollbars the measured thickness is 0 and this is a no-op.
     */
    padding-bottom: var(--scrollbar-h, 0px);
  }
  .table-scroll[data-overflowing]:is(:hover, :focus-within) > table,
  .carve-compare[data-overflowing]:is(:hover, :focus-within) > .carve-compare__frame {
    position: relative;
    z-index: 5;
    background: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 2px 24px -6px rgb(0 0 0 / 18%);
    transition-delay: 120ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .table-scroll > table,
  .carve-compare__frame {
    transition: none;
  }
}

/* -------------------------------------------------------------- admonition */

.admonition {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--verdigris);
  border-radius: 3px;
}
.admonition > :last-child { margin-bottom: 0; }
.admonition-title {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--verdigris);
  margin: 0 0 0.5rem;
}
.admonition.warning { border-left-color: var(--brass); }
.admonition.warning .admonition-title { color: var(--brass); }
.admonition.danger { border-left-color: #b4472f; }
.admonition.danger .admonition-title { color: #b4472f; }

/* ----------------------------------------------------------------- spoiler */

/*
 * A spoiler is obscured, not protected. The text stays in the DOM, selectable
 * and copyable, so a blur hides a plot point from a reader and withholds
 * nothing from a determined one. Do not read any of this as a privacy or
 * security control.
 *
 * Keyed by element, not by class alone: the engine spells the inline form
 * `<span class="spoiler">` and the block form `<details class="spoiler">`,
 * `<section>` in static render, `<div>` when the extension is off. A class-only
 * box rule would draw a panel around a word mid-sentence (carve-css#25).
 */

:where(details, section, div).spoiler {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--verdigris);
  border-radius: 3px;
}
:where(details, section, div).spoiler > :last-child { margin-bottom: 0; }
:where(details, section, div).spoiler > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--verdigris);
}
.spoiler-title {
  font-size: 0.95rem;
  color: var(--verdigris);
  margin: 0 0 0.5rem;
}

/*
 * `<details>` already withholds its body until the reader opens it, so only the
 * shapes with no native disclosure carry a blur: the inline span and the
 * extension-less `<div>` fallback. Reveal is `:hover` or `:focus-within`, and
 * the limit is real: an inline span carries no `tabindex`, so keyboard reveal
 * only works where the host adds one. `spoiler-revealed` is what all three
 * engines emit in static render for content meant to be read, and is never
 * blurred.
 *
 * The radius is `em`, not `rem`: a spoiler in a caption or a table cell has to
 * blur in proportion to the text it hides, or it smears at small sizes and
 * stays readable at large ones. 0.25em is 4px at the 16px body, measured as the
 * point where stroke contrast falls to a few percent while the word keeps its
 * outline (carve-css#28).
 */
span.spoiler:not(.spoiler-revealed),
div.spoiler:not(.spoiler-revealed) > :not(.admonition-title) {
  filter: blur(0.25em);
}
span.spoiler:not(.spoiler-revealed):is(:hover, :focus-within),
div.spoiler:not(.spoiler-revealed):is(:hover, :focus-within) > :not(.admonition-title) {
  filter: none;
}

/* A blur on paper cannot be revealed. The selectors repeat the ones above
 * rather than naming `.spoiler`: a lower-specificity print rule loses the
 * cascade and prints the blur anyway. */
@media print {
  span.spoiler:not(.spoiler-revealed),
  div.spoiler:not(.spoiler-revealed) > :not(.admonition-title) {
    filter: none;
  }
}

/* -------------------------------------------------------------------- math */

/*
 * Display math reaches the page on two carriers: core `$$` math is a
 * `<span class="math display">` and a fenced math block is a
 * `<div class="math display">`. The treatment is the same for both, so the
 * keying is the class pair rather than the element, and `display: block` is
 * what lets the span take it. Inline math needs no rule - a
 * `<span class="math inline">` already sits in the line undisturbed.
 */

.math.display {
  display: block;
  margin: 1.5rem 0;
  overflow-x: auto;
  text-align: center;
}

/* ------------------------------------------------- compare: the proof sheet */

.carve-compare {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1.8rem 0;
  overflow-x: auto;
}
.carve-compare__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-sunk);
}
@media (max-width: 940px) { .carve-compare__frame { grid-template-columns: minmax(0, 1fr); } }

.carve-compare__source { position: relative; border-right: 1px solid var(--rule); align-self: stretch; background: var(--paper-sunk); }
@media (max-width: 940px) { .carve-compare__source { border-right: 0; border-bottom: 1px solid var(--rule); } }
/* The eyebrow names what the left column is: the mark, before printing. */
.carve-compare__source::before {
  content: 'Carve';
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  pointer-events: none;
}
.carve-compare__source pre { margin: 0; border: 0; border-radius: 0; background: none; padding: 1.6rem 1.15rem 1.15rem; }

/* Block, not flex: the labels are inline-block so they sit side by side as a
   tab strip, while the panes below them break onto their own lines. */
.carve-compare__output { background: var(--paper); }
.carve-compare__radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.carve-compare__label {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.carve-compare__label:hover { color: var(--ink); }
.carve-compare__radio:checked + .carve-compare__label { color: var(--verdigris); border-bottom-color: var(--verdigris); }
.carve-compare__radio:focus-visible + .carve-compare__label { outline: 2px solid var(--brass); outline-offset: -2px; }

.carve-compare__pane { display: none; padding: 1.1rem 1.15rem; border-top: 1px solid var(--rule); }
.carve-compare__label:last-of-type { margin-right: 0; }
.carve-compare__radio:nth-of-type(1):checked ~ .carve-compare__pane:nth-of-type(1),
.carve-compare__radio:nth-of-type(2):checked ~ .carve-compare__pane:nth-of-type(2) { display: block; }
.carve-compare__pane > :first-child { margin-top: 0; }
.carve-compare__pane > :last-child { margin-bottom: 0; }
.carve-compare__pane pre { margin: 0; border: 0; background: none; padding: 0; }
.carve-compare--malformed { display: block; padding: 1rem; border-left: 3px solid #b4472f; }

/* ---------------------------------------------- playground: live proof sheet */

.carve-playground {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 1.8rem 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-sunk);
}
@media (max-width: 940px) { .carve-playground { grid-template-columns: minmax(0, 1fr); } }

.carve-playground__source { position: relative; border-right: 1px solid var(--rule); align-self: stretch; background: var(--paper-sunk); }
@media (max-width: 940px) { .carve-playground__source { border-right: 0; border-bottom: 1px solid var(--rule); } }
.carve-playground__source::before,
.carve-playground__editor-label {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  pointer-events: none;
  z-index: 1;
}
.carve-playground__source::before { content: 'Carve'; }
.carve-playground__source--editor::before { content: none; }
.carve-playground__source pre { margin: 0; border: 0; border-radius: 0; background: none; padding: 1.6rem 1.15rem 1.15rem; }
.carve-playground__editor {
  display: block;
  width: 100%;
  min-height: 16rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 2.7rem 1.15rem 1.15rem;
  resize: vertical;
  color: var(--ink);
  background: transparent;
  font: 0.92rem/1.6 var(--mono);
}
.carve-playground__editor:focus { outline: 2px solid var(--brass); outline-offset: -2px; }

.carve-playground__output { background: var(--paper); }
.carve-playground__engine {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem 0;
  color: var(--ink-soft);
  font: 600 0.62rem/1.2 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.carve-playground__engine-button {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.22rem 0.5rem;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  font: inherit;
  cursor: pointer;
}
.carve-playground__engine-button[aria-pressed="true"] { color: var(--verdigris); border-color: var(--verdigris); }
.carve-playground__engine-button:disabled { opacity: 0.65; cursor: wait; }
.carve-playground__engine-button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.carve-playground__engine-status { min-width: 0; text-transform: none; letter-spacing: 0; }
.carve-playground__engine-status[data-error="true"] { color: #b4472f; }
.carve-playground__engine-note {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font: 0.82rem/1.45 var(--body);
}
.carve-playground__engine-note:empty { display: none; }
.carve-playground__radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.carve-playground__label {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.carve-playground__label:hover { color: var(--ink); }
.carve-playground__radio:checked + .carve-playground__label { color: var(--verdigris); border-bottom-color: var(--verdigris); }
.carve-playground__radio:focus-visible + .carve-playground__label { outline: 2px solid var(--brass); outline-offset: -2px; }

.carve-playground__copy {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  z-index: 2;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.22rem 0.5rem;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  font: 600 0.62rem/1.2 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.carve-playground__source .carve-playground__copy { left: 0.75rem; right: auto; }
.carve-playground__copy:hover { color: var(--ink); }
.carve-playground__copy:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.carve-playground__pane { position: relative; display: none; padding: 2.7rem 1.15rem 1.1rem; border-top: 1px solid var(--rule); }
.carve-playground__radio:nth-of-type(1):checked ~ .carve-playground__live,
.carve-playground__radio:nth-of-type(2):checked ~ .carve-playground__pane--html,
.carve-playground__radio:nth-of-type(3):checked ~ .carve-playground__pane--ast { display: block; }
.carve-playground__pane > :first-child { margin-top: 0; }
.carve-playground__pane > :last-child { margin-bottom: 0; }
.carve-playground__rendered > :first-child { margin-top: 0; }
.carve-playground__rendered > :last-child { margin-bottom: 0; }
.carve-playground__pane pre { margin: 0; border: 0; background: none; padding: 0; }
.carve-playground__pane--ast { max-height: 28rem; overflow: auto; }
.carve-playground__error {
  border-left: 3px solid #b4472f;
  padding: 0.75rem 0.9rem;
  color: #b4472f;
  background: var(--paper-sunk);
  font: 0.9rem/1.5 var(--mono);
  white-space: pre-wrap;
}

/* -------------------------------------------------------------- code group */

.code-group { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin: 1.4rem 0; background: var(--paper-sunk); }
.code-group-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.code-group-label {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.code-group-radio:checked + .code-group-label { color: var(--verdigris); border-bottom-color: var(--verdigris); }
.code-group-radio:focus-visible + .code-group-label { outline: 2px solid var(--brass); outline-offset: -2px; }
.code-group-panel { display: none; border-top: 1px solid var(--rule); }
.code-group-radio:nth-of-type(1):checked ~ .code-group-panel:nth-of-type(1),
.code-group-radio:nth-of-type(2):checked ~ .code-group-panel:nth-of-type(2),
.code-group-radio:nth-of-type(3):checked ~ .code-group-panel:nth-of-type(3),
.code-group-radio:nth-of-type(4):checked ~ .code-group-panel:nth-of-type(4),
.code-group-radio:nth-of-type(5):checked ~ .code-group-panel:nth-of-type(5) { display: block; }
.code-group-panel pre { margin: 0; border: 0; border-radius: 0; }

/* -------------------------------------------------------------------- tabs */

/*
 * Same shape as the code group above, and the same reason for every selector.
 * The engine emits each radio with its own label next to it, then ALL the
 * panels, so a panel is never adjacent to its label: the pairing has to be
 * positional across `~`. `:has()` would read a descendant and let a nested tab
 * set reveal a panel of the set around it.
 */
.tabs { border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin: 1.4rem 0; background: var(--paper-sunk); }
.tabs-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tabs-label {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tabs-radio:checked + .tabs-label { color: var(--verdigris); border-bottom-color: var(--verdigris); }
.tabs-radio:focus-visible + .tabs-label { outline: 2px solid var(--brass); outline-offset: -2px; }
.tabs-panel { border-top: 1px solid var(--rule); padding: 0.1rem 0.9rem; }
/* Hiding is keyed on :checked, not on a radio being present, so a set with nothing checked keeps showing its panels instead of going blank. */
.tabs-radio:checked ~ .tabs-panel { display: none; }
.tabs-radio:nth-of-type(1):checked ~ .tabs-panel:nth-of-type(1),
.tabs-radio:nth-of-type(2):checked ~ .tabs-panel:nth-of-type(2),
.tabs-radio:nth-of-type(3):checked ~ .tabs-panel:nth-of-type(3),
.tabs-radio:nth-of-type(4):checked ~ .tabs-panel:nth-of-type(4),
.tabs-radio:nth-of-type(5):checked ~ .tabs-panel:nth-of-type(5),
.tabs-radio:nth-of-type(6):checked ~ .tabs-panel:nth-of-type(6),
.tabs-radio:nth-of-type(7):checked ~ .tabs-panel:nth-of-type(7),
.tabs-radio:nth-of-type(8):checked ~ .tabs-panel:nth-of-type(8),
.tabs-radio:nth-of-type(9):checked ~ .tabs-panel:nth-of-type(9),
.tabs-radio:nth-of-type(10):checked ~ .tabs-panel:nth-of-type(10),
.tabs-radio:nth-of-type(11):checked ~ .tabs-panel:nth-of-type(11),
.tabs-radio:nth-of-type(12):checked ~ .tabs-panel:nth-of-type(12) { display: block; }
/* Past the ladder's last position every panel shows: a long set degrades to a stack instead of going blank. */
.tabs-radio:nth-of-type(n + 13):checked ~ .tabs-panel { display: block; }
.tabs-panel > :first-child { margin-top: 0.7rem; }
.tabs-panel > :last-child { margin-bottom: 0.7rem; }

mark {
  background: var(--highlight);
  color: var(--highlight-ink);
  border-radius: 2px;
  padding: 0 0.15em;
}
/* A revision fell back to the user agent: an underline and a strikethrough in the
 * ink of plain text, while the highlight beside it adapts to the palette. This
 * theme already reads a revision in a code block as a wash (--code-line-add and
 * --code-line-remove), so the inline pair uses the same hues at prose contrast. */
ins {
  background: var(--insert);
  color: var(--insert-ink);
}
del {
  background: var(--delete);
  color: var(--delete-ink);
}

/* The highlight owns the ink, so a link or a revision mark inside it must not repaint over the pair. */
mark a,
mark del,
mark ins { color: inherit; }
/* And its own fill: `={+ins+}=` nests the insertion inside the highlight, where a
 * second rectangle breaks the one region the highlight claims. Per the ruling in
 * markup-carve/carve-css#19 the nested fill drops and the insertion's signal
 * falls back to its underline, which the base rule above never removed. */
mark :is(code, del, ins) { background: none; }

/* ---------------------------------------------------------------- furniture */

.permalink {
  opacity: 0;
  margin-left: 0.4rem;
  color: var(--brass);
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.14s ease;
}
h1:hover .permalink, h2:hover .permalink, h3:hover .permalink,
.permalink:focus-visible { opacity: 1; }

.edit-link {
  display: inline-block;
  margin-top: 3rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.edit-link:hover { color: var(--verdigris); border-bottom-color: var(--verdigris); }

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.page-nav a {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  max-width: 48%;
  color: var(--ink);
  text-decoration: none;
}
.page-nav__prev::before,
.page-nav__next::before {
  color: var(--brass);
  font-family: var(--body);
  font-size: 0.82rem;
  line-height: 1.2;
}
.page-nav__prev::before { content: '\2190'; }
.page-nav__next {
  margin-left: auto;
  text-align: right;
}
.page-nav__next::before { content: '\2192'; }
.page-nav__eyebrow {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.page-nav__title {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.35;
}
.page-nav a:hover .page-nav__title { text-decoration: underline; }

.last-updated {
  margin-top: 2.4rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.last-updated time { color: var(--ink); }

.site-footer {
  max-width: 1500px;
  margin: 0 auto;
  padding: 2rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.site-footer p { margin: 0; }
.site-footer__message {
  font-family: var(--display);
  color: var(--ink);
}
.site-footer__copyright {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
@media (max-width: 820px) {
  .site-footer { padding: 1.4rem 1.25rem; }
}

/* -------------------------------------------------------------------- blog */

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.blog-meta__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.9rem;
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* A separator that belongs to the layout, not to the text: it disappears with
   the element it separates instead of leaving a stray bullet behind. */
.blog-meta__author::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 0.9rem;
  border-radius: 50%;
  background: var(--rule-strong, var(--rule));
  vertical-align: middle;
}

.blog-meta__date { font-variant-numeric: tabular-nums; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tag:hover,
.tag:focus-visible {
  border-color: var(--verdigris);
  color: var(--verdigris);
}

.blog-card {
  padding: 1.6rem 0 1.9rem;
  border-bottom: 1px solid var(--rule);
}

.blog-card:last-of-type { border-bottom: 0; }

.content .blog-card > h2 {
  margin: 0 0 0.55rem;
  padding: 0;
  border: 0;
  font-size: 1.5rem;
}

.content .blog-card > h2 a { text-decoration: none; }
.content .blog-card > h2 a:hover { text-decoration: underline; }

.content .blog-card__meta {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.content .blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.content .blog-card__tags a {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.content .blog-card__tags a:hover { border-color: var(--verdigris); color: var(--verdigris); }

.content .blog-card > p:last-of-type a {
  font-size: 0.9rem;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .tag { transition: none; }
}

/* --------------------------------------------------------------- skip link */

/* Off-screen until focused, rather than display:none, which would take it out
   of the tab order and defeat the point. */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus-visible,
.skip-link:focus {
  top: 0.75rem;
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

.home-hero {
  border-bottom: 1px solid var(--cp-border);
}

.home-features {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.content table td:first-child,
.content table th:first-child {
  white-space: nowrap;
}

.callout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}