/* Pathfinch LLC site styles. */

/* ---- Fonts (OFL-1.1) ---- */
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --background: 97.5% 0.005 258;
  --surface: 99.6% 0.002 258;
  --border: 88% 0.012 255;

  /* Preview overlay */
  --scrim: 15% 0.035 253;
  --paper-fixed: 97.5% 0.005 258;

  /* Ink */
  --ink: 21.9% 0.044 253;
  --ink-muted: 48% 0.045 257;
  --ink-subtle: 55.4% 0.041 257;

  /* Accent */
  --accent: 54.6% 0.215 263;
  --accent-text: 54.6% 0.215 263;
  --on-accent: 100% 0 0;
  --ring: 52% 0.23 263;

  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --text-display: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);
  --text-title: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --text-section: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --text-subtitle: 1.25rem;
  --text-lede: 1.1875rem;
  --text-label: 0.875rem;
  --text-caption: 0.8125rem;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 150ms;

  --radius-control: 8px;
  --radius-figure: 12px;
  --radius-pill: 999px;

  --container: 72rem;
  --container-reading: 42rem;
  --gutter: clamp(1.25rem, 4vw, 2rem);
}

/* Dark theme: system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background: 21.9% 0.044 253;
    --surface: 26% 0.045 255;
    --border: 34% 0.04 255;

    --ink: 97.5% 0.005 258;
    --ink-muted: 76% 0.03 257;

    --accent-text: 74% 0.16 263;
    --ring: 74% 0.2 263;

    --scrim: 8% 0.02 253;
  }
}
/* Dark theme: explicit choice */
:root[data-theme='dark'] {
  color-scheme: dark;

  --background: 21.9% 0.044 253;
  --surface: 26% 0.045 255;
  --border: 34% 0.04 255;

  --ink: 97.5% 0.005 258;
  --ink-muted: 76% 0.03 257;

  --accent-text: 74% 0.16 263;
  --ring: 74% 0.2 263;

  --scrim: 8% 0.02 253;
}
:root[data-theme='light'] {
  color-scheme: light;
}

/* ---- Reset and base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  background-color: oklch(var(--background));
  color: oklch(var(--ink));
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: oklch(var(--accent-text));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover {
  text-decoration-thickness: 2px;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
p,
li,
dd,
dt {
  overflow-wrap: break-word;
}
ul,
ol {
  padding-left: 1.25rem;
}
strong {
  font-weight: 700;
}
/* Clear the sticky header on anchor jumps. */
[id] {
  scroll-margin-top: 5.5rem;
}

/* Focus */
:where(a, button, summary, [role='button'], [tabindex]:not([tabindex='-1'])):focus-visible {
  outline: 2px solid oklch(var(--ring));
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius-control);
  background: oklch(var(--surface));
  color: oklch(var(--ink));
  font-weight: 700;
}
.skip-link:focus {
  top: 1rem;
}

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

/* ---- Type scale ---- */
.type-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.type-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.type-section {
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.type-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.type-caption {
  font-size: var(--text-caption);
  line-height: 1.45;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-reading {
  max-width: calc(var(--container-reading) + 2 * var(--gutter));
}
.section {
  padding-block: var(--space-2xl);
}
.section--rule {
  padding-top: 0;
}
.section--rule > .container {
  position: relative;
  padding-top: var(--space-xl);
}
.section--rule > .container::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid oklch(var(--border));
}
@media (min-width: 48em) {
  .section {
    padding-block: var(--space-3xl);
  }
  .section--rule {
    padding-top: 0;
  }
  .section--rule > .container {
    padding-top: var(--space-2xl);
  }
}

/* Diptych: two-column split */
.diptych {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}
.diptych--top {
  align-items: start;
}
@media (min-width: 56em) {
  .diptych {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-2xl);
  }
  .diptych--even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .diptych--figure-first > :first-child {
    order: 2;
  }
}
.diptych > * {
  min-width: 0;
}
.diptych .prose {
  max-width: 36rem;
}

/* Section head */
.head-hang {
  max-width: 40rem;
  margin-bottom: var(--space-xl);
}
.head-hang p {
  margin-top: var(--space-xs);
  font-size: var(--text-lede);
  color: oklch(var(--ink-muted));
}

/* Two blocks side by side */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}
.pair > * + * {
  padding-top: var(--space-lg);
  border-top: 1px solid oklch(var(--border));
}
@media (min-width: 40em) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
  .pair > * + * {
    padding-top: 0;
    padding-left: var(--space-xl);
    border-top: 0;
    border-left: 1px solid oklch(var(--border));
  }
}
.pair h3 {
  margin-bottom: var(--space-2xs);
}
.pair p {
  color: oklch(var(--ink-muted));
}
.pair p + p {
  margin-top: var(--space-sm);
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid oklch(var(--border));
  background: oklch(var(--background) / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-xs);
  padding-block: var(--space-2xs);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: oklch(var(--ink));
  text-decoration: none;
}
.wordmark img {
  width: auto;
  height: 1.875rem;
}
/* Light/dark brand marks */
.brand--dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brand--light {
    display: none;
  }
  :root:not([data-theme='light']) .brand--dark {
    display: block;
  }
}
:root[data-theme='dark'] .brand--light {
  display: none;
}
:root[data-theme='dark'] .brand--dark {
  display: block;
}
/* Mobile: links and theme control share the second row. */
.site-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-inline-end: 3.25rem;
  margin-inline: calc(-1 * var(--space-3xs));
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3xs);
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-3xs);
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  color: oklch(var(--ink-muted));
  text-decoration: none;
}
.site-nav a:hover {
  color: oklch(var(--ink));
  background: oklch(var(--ink) / 0.06);
}
.site-nav a[aria-current='page'] {
  color: oklch(var(--ink));
  text-decoration: underline;
  text-decoration-color: oklch(var(--accent-text));
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.bar__actions {
  display: contents;
}
.bar__cta {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.theme-toggle {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: oklch(var(--ink-muted));
  cursor: pointer;
}
.theme-toggle[hidden] {
  display: none;
}
.theme-toggle:hover {
  color: oklch(var(--ink));
  background: oklch(var(--ink) / 0.06);
}
.theme-toggle:active {
  background: oklch(var(--ink) / 0.12);
}
.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}
.icon-sun {
  display: none;
}
:root[data-theme='dark'] .icon-sun {
  display: block;
}
:root[data-theme='dark'] .icon-moon {
  display: none;
}
@media (min-width: 48em) {
  .bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: var(--space-md);
  }
  .wordmark {
    justify-self: start;
  }
  .wordmark img {
    height: 2.5rem;
  }
  .site-nav {
    grid-column: 2;
    grid-row: 1;
    padding-inline-end: 0;
    margin-inline: 0;
  }
  .site-nav ul {
    gap: 0 var(--space-2xs);
  }
  .site-nav a {
    padding-inline: var(--space-xs);
  }
  .bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .theme-toggle,
  .bar__cta {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid oklch(var(--border));
  padding-block: var(--space-xl) var(--space-lg);
  font-size: var(--text-label);
}
.foot-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-xl);
}
.foot-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: oklch(var(--ink));
  text-decoration: none;
}
.foot-mark img {
  width: auto;
  height: 1.75rem;
}
.foot-tagline {
  max-width: 30rem;
  color: oklch(var(--ink-muted));
}
.foot-rows {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}
.foot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--space-md);
}
@media (min-width: 40em) {
  .foot-row {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}
.foot-row__label {
  font-family: var(--font-display);
  font-weight: 600;
  color: oklch(var(--ink));
}
.foot-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  padding: 0;
  list-style: none;
}
.foot-row a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  white-space: nowrap;
  color: oklch(var(--ink-muted));
  text-decoration: none;
}
.foot-row a:hover {
  color: oklch(var(--accent-text));
  text-decoration: underline;
}
.foot-legal {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid oklch(var(--border));
  font-size: var(--text-caption);
  color: oklch(var(--ink-muted));
}

/* ---- Buttons and links ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) {
  .button--primary:hover {
    transform: translateY(-1px);
  }
}
.button--primary:active {
  transform: translateY(0);
}
.button--primary {
  background: oklch(var(--accent));
  border-color: oklch(var(--accent));
  color: oklch(var(--on-accent));
}
.button--outline {
  background: transparent;
  border-color: oklch(var(--accent-text) / 0.5);
  color: oklch(var(--accent-text));
}
.button--outline:hover {
  border-color: oklch(var(--accent-text));
  background: oklch(var(--accent-text) / 0.08);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}
/* Text link with arrow */
.link {
  font-family: var(--font-display);
  font-weight: 600;
}
.link::after {
  content: ' \2192';
}

/* ---- Hero ---- */
.hero {
  padding-block: var(--space-2xl) var(--space-3xl);
}
.hero .type-display {
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
  text-wrap: balance;
}
/* Hero art: light/dark render pair */
.hero__art {
  margin-inline: -2.5rem;
}
.hero__art img {
  width: 100%;
}
/* Hidden where the diptych stacks. */
@media (max-width: 55.999em) {
  .hero__art {
    display: none;
  }
}
@media (min-width: 56em) {
  .hero {
    padding-block: calc(var(--space-2xl) + var(--space-md)) calc(var(--space-3xl) + var(--space-lg));
  }
}

.lede {
  margin-top: var(--space-md);
  max-width: 34rem;
  font-size: var(--text-lede);
  color: oklch(var(--ink-muted));
}

/* ---- Lists ---- */
/* At a glance */
.glance {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-md);
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) {
  .glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.glance li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  border-top: 1px solid oklch(var(--border));
  font-size: 0.9375rem;
  font-weight: 600;
  color: oklch(var(--ink-muted));
}
.glance li::before {
  content: '';
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 1px;
  background: oklch(var(--accent));
}
/* Why */
.why {
  margin-top: var(--space-lg);
}
.why article {
  padding-block: var(--space-md);
  border-top: 1px solid oklch(var(--border));
}
.why h3 {
  margin-bottom: var(--space-3xs);
}
.why p {
  color: oklch(var(--ink-muted));
}
/* Numbered steps */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}
.steps li {
  padding-top: var(--space-sm);
  border-top: 1px solid oklch(var(--border));
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: oklch(var(--ink-subtle));
}
.steps h4 {
  margin-bottom: var(--space-3xs);
}
.steps p {
  color: oklch(var(--ink-muted));
}
/* Spec list */
.spec-title {
  margin: var(--space-lg) 0 var(--space-xs);
}
.spec-title:first-child {
  margin-top: 0;
}
.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-md);
  padding-block: var(--space-xs);
  border-top: 1px solid oklch(var(--border));
}
@media (min-width: 40em) {
  .spec > div {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
}
.spec dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: oklch(var(--ink));
}
.spec dd {
  color: oklch(var(--ink-muted));
}
/* Contact index */
.index {
  margin-top: var(--space-xl);
  border-top: 1px solid oklch(var(--border));
}
.index > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-xl);
  padding-block: var(--space-lg);
  border-bottom: 1px solid oklch(var(--border));
}
@media (min-width: 48em) {
  .index > div {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}
.index p {
  color: oklch(var(--ink-muted));
}
.index .actions {
  margin-top: var(--space-sm);
}

/* ---- Screenshots ---- */
.shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 40em) {
  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.shot {
  overflow: hidden;
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius-figure);
  background: oklch(var(--surface));
}
.shot img {
  width: 100%;
}
.shot figcaption {
  padding: var(--space-2xs) var(--space-xs);
  border-top: 1px solid oklch(var(--border));
  font-size: var(--text-caption);
  color: oklch(var(--ink-muted));
}
.shot--phone {
  max-width: 17rem;
  justify-self: center;
}
.shot__zoom {
  display: block;
  cursor: zoom-in;
}
.shot:has(.shot__zoom:hover),
.shot:has(.shot__zoom:focus-visible) {
  border-color: oklch(var(--accent-text) / 0.6);
}
/* Screenshot preview */
.lightbox {
  display: none;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-md);
  border: 0;
  background: oklch(var(--scrim) / 0.88);
  cursor: zoom-out;
  opacity: 1;
  transition: opacity var(--dur-short) var(--ease-out);
}
.lightbox[open] {
  display: grid;
  place-items: center;
}
@starting-style {
  .lightbox[open] {
    opacity: 0;
  }
}
.lightbox::backdrop {
  background: transparent;
}
html:has(.lightbox[open]) {
  overflow-y: hidden;
}
.lightbox__img {
  max-width: 100%;
  max-height: 82dvh;
  width: auto;
  border-radius: var(--radius-figure);
}
.lightbox__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid oklch(var(--paper-fixed) / 0.3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: oklch(var(--paper-fixed));
  cursor: pointer;
}
.lightbox__close:hover {
  background: oklch(var(--paper-fixed) / 0.14);
}
.lightbox__close:active {
  background: oklch(var(--paper-fixed) / 0.22);
}
.lightbox__close svg {
  width: 1.25rem;
  height: 1.25rem;
}
.product-logo {
  margin-bottom: var(--space-md);
}
.product-logo img {
  width: auto;
  height: 2.25rem;
}

/* ---- Long-form pages ---- */
.prose > h2 {
  margin: var(--space-2xl) 0 var(--space-sm);
}
.prose > h3 {
  margin: var(--space-lg) 0 var(--space-2xs);
}
.prose > p,
.prose > ul {
  margin-bottom: var(--space-sm);
  color: oklch(var(--ink-muted));
}
.prose .spec {
  margin-top: var(--space-md);
}
.legal {
  margin-top: var(--space-xl);
  color: oklch(var(--ink-muted));
}
.legal h2 {
  margin: var(--space-xl) 0 var(--space-xs);
  color: oklch(var(--ink));
}
.legal h3 {
  margin: var(--space-md) 0 var(--space-2xs);
  font-size: 1rem;
  font-weight: 600;
  color: oklch(var(--ink));
}
.legal p,
.legal ul {
  margin-bottom: var(--space-sm);
}
.legal li + li {
  margin-top: var(--space-3xs);
}
.legal strong {
  color: oklch(var(--ink));
}
.note {
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius-control);
  background: oklch(var(--surface));
}
.note p {
  margin: 0;
}

/* ---- Utilities ---- */
.text-muted {
  color: oklch(var(--ink-muted));
}
.gap-top-1 {
  margin-top: 1rem;
}
.gap-top-2 {
  margin-top: 2rem;
}
.gap-top-3 {
  margin-top: 3rem;
}

/* ---- Print ---- */
@media print {
  :root:root {
    color-scheme: light;
    --background: 100% 0 0;
    --surface: 100% 0 0;
    --border: 80% 0 0;
    --ink: 0% 0 0;
    --ink-muted: 0% 0 0;
    --ink-subtle: 40% 0 0;
    --accent: 0% 0 0;
    --accent-text: 0% 0 0;
    --on-accent: 100% 0 0;
  }
  .site-header,
  .site-footer,
  .skip-link,
  .actions,
  .hero__art,
  .lightbox {
    display: none !important;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.875em;
  }
  .container-reading {
    max-width: none;
  }
  .section,
  .section--rule > .container {
    padding-block: 1rem;
  }
}