/*
 * 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);

  --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);
  }
  :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);
}
/* 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; }

.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; }

/* ------------------------------------------------- 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; }

/* ---------------------------------------------------------------- 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;
}