@charset "utf-8";

/* ==========================================================================
   atproto-crates.com
   A two-colour press for systems documentation.

   00  Tokens
   01  Reset & base
   02  Document grid
   03  Masthead & navigation
   04  Typography
   05  Rules, marginalia, plates
   06  Listings (code)
   07  Catalogue entries
   08  Tables & definition specs
   09  Diagram
   10  Colophon (footer)
   11  Motion
   ========================================================================== */


/* 00  Tokens ============================================================== */

:root {
  /* --- Paper & ink (light: the primary artefact) --- */
  --paper:        oklch(0.976 0.008 78);
  --paper-sunk:   oklch(0.954 0.010 78);
  --paper-deep:   oklch(0.934 0.012 76);
  --ink:          oklch(0.235 0.018 60);
  --ink-2:        oklch(0.447 0.016 62);
  --ink-3:        oklch(0.530 0.014 64);   /* AA 4.5:1 on paper and paper-sunk */
  --rule:         oklch(0.862 0.011 72);
  --rule-strong:  oklch(0.706 0.014 70);

  /* --- The second pass on the press. Spend it sparingly. --- */
  --spot:         oklch(0.520 0.176 32);
  --spot-deep:    oklch(0.440 0.160 30);
  --spot-tint:    oklch(0.938 0.030 42);

  --lh-body: 1.62;

  /* --- Type --- */
  --face-display: "Familjen Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --face-text:    "Faustina", Georgia, "Times New Roman", serif;
  --face-mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--2: clamp(0.72rem, 0.705rem + 0.07vw, 0.77rem);
  --step--1: clamp(0.82rem, 0.795rem + 0.11vw, 0.885rem);
  --step-0:  clamp(1rem,    0.962rem + 0.19vw, 1.115rem);
  --step-1:  clamp(1.35rem, 1.244rem + 0.53vw, 1.66rem);
  --step-2:  clamp(1.85rem, 1.583rem + 1.33vw, 2.62rem);
  --step-3:  clamp(2.45rem, 1.883rem + 2.83vw, 4.08rem);
  --step-4:  clamp(3.1rem,  1.833rem + 6.33vw, 6.75rem);

  /* --- Space (4pt, semantic) --- */
  --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: 4rem;
  --space-3xl: 6rem;
  --space-4xl: clamp(6rem, 4rem + 8vw, 10rem);

  /* --- The grid --- */
  --rail:    9.5rem;
  --measure: 68ch;
  --note:    15rem;
  --gutter:  clamp(1.25rem, 0.5rem + 2.4vw, 3rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);          /* quart-ish */
  --ease-out-deep: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-ish  */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       oklch(0.196 0.013 62);
    --paper-sunk:  oklch(0.238 0.014 62);
    --paper-deep:  oklch(0.266 0.015 62);
    --ink:         oklch(0.918 0.010 76);
    --ink-2:       oklch(0.758 0.012 72);
    --ink-3:       oklch(0.628 0.012 70);
    --rule:        oklch(0.338 0.014 64);
    --rule-strong: oklch(0.452 0.016 64);

    --spot:      oklch(0.712 0.138 40);
    --spot-deep: oklch(0.792 0.108 44);
    --spot-tint: oklch(0.298 0.048 34);

    /* Light type on dark reads lighter. Give it more air. */
    --lh-body: 1.68;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:       oklch(0.196 0.013 62);
  --paper-sunk:  oklch(0.238 0.014 62);
  --paper-deep:  oklch(0.266 0.015 62);
  --ink:         oklch(0.918 0.010 76);
  --ink-2:       oklch(0.758 0.012 72);
  --ink-3:       oklch(0.628 0.012 70);
  --rule:        oklch(0.338 0.014 64);
  --rule-strong: oklch(0.452 0.016 64);

  --spot:      oklch(0.712 0.138 40);
  --spot-deep: oklch(0.792 0.108 44);
  --spot-tint: oklch(0.298 0.048 34);

  --lh-body: 1.68;

  color-scheme: dark;
}


/* 01  Reset & base ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--space-2xl);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, pre, blockquote { margin: 0; }
ul, ol { padding: 0; }

img, svg { max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, var(--spot) 62%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 180ms var(--ease-out),
              text-decoration-color 180ms var(--ease-out);
}
a:hover { color: var(--spot); text-decoration-color: var(--spot); }

:focus-visible {
  outline: 2px solid var(--spot);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--spot-tint); color: var(--ink); }

.skip {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 20;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--face-display);
  font-size: var(--step--1);
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); }

.u-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* 02  Document grid ======================================================= */

.shell {
  max-width: calc(var(--rail) + var(--measure) + var(--note) + (2 * var(--gutter)) + 8rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*  rail  |  main (measured)  |  marginalia
    Everything defaults to `main`. Only plates and notes leave it. */
.doc {
  display: grid;
  grid-template-columns:
    [rail-start] minmax(0, var(--rail))
    [rail-end main-start] minmax(0, var(--measure))
    [main-end note-start] minmax(0, var(--note)) [note-end];
  column-gap: var(--gutter);
  align-items: start;
}
.doc > * { grid-column: main; }

.band { grid-column: rail-start / note-end; }
.band--wide { grid-column: main-start / note-end; }

.section {
  grid-column: rail-start / note-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding-block-start: var(--space-3xl);
}
.section > * { grid-column: main; }
.section > .rail { grid-column: rail; }
.section > .note { grid-column: note; }
.section > .band { grid-column: rail-start / note-end; }
.section > .band--wide { grid-column: main-start / note-end; }

@supports not (grid-template-columns: subgrid) {
  .doc, .section { display: block; }
  .doc > *, .section > * { max-width: var(--measure); }
}

/* Below the point where three columns stop being honest, become one. */
@media (max-width: 62rem) {
  .doc, .section { display: block; }
  .doc > *, .section > * { max-width: var(--measure); }
  .band, .band--wide, .section > .band, .section > .band--wide { max-width: none; }
}

.stack > * + * { margin-block-start: var(--space-md); }
.stack--tight > * + * { margin-block-start: var(--space-xs); }
.stack--loose > * + * { margin-block-start: var(--space-lg); }


/* 03  Masthead & navigation =============================================== */

.masthead {
  padding-block: var(--space-md) 0;
  border-block-end: 1px solid var(--ink);
  /* the second, thin rule of a printed masthead */
  box-shadow: 0 3px 0 -2px var(--rule-strong);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-block-end: var(--space-xs);
}

.wordmark {
  font-family: var(--face-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.14em;
  white-space: nowrap;
}
.wordmark:hover { color: inherit; }
.wordmark b { font-weight: 700; color: var(--spot); }
.wordmark span { font-weight: 400; color: var(--ink-2); }
.wordmark:hover span { color: var(--ink); }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  list-style: none;
  font-family: var(--face-display);
  font-size: var(--step--1);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding-block-end: 2px;
  background-image: linear-gradient(var(--spot), var(--spot));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 260ms var(--ease-out), color 180ms var(--ease-out);
}
.nav a:hover { color: var(--ink); background-size: 100% 1px; }
.nav [aria-current="page"] { color: var(--ink); background-size: 100% 1px; }

.theme {
  appearance: none;
  /* --ink-3, not --rule-strong: this is an interactive component boundary
     and owes 3:1, which a decorative hairline does not clear. */
  border: 1px solid var(--ink-3);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--face-display);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.theme:hover { color: var(--ink); border-color: var(--ink); }


/* 04  Typography ========================================================== */

.display {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 0.9;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -0.016em; }
h4 {
  font-size: var(--step-0);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.section > h2 { margin-block-end: var(--space-sm); }
.section > h2 + p { margin-block-start: 0; }

/* Subhead inside a long section. Sized well below the h2 so the section
   still reads as one thing, with a hairline to carry the break. */
.section > h3 {
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-2xs);
  border-block-start: 1px solid var(--rule);
}
.section > h3 + p { margin-block-start: var(--space-2xs); }

/* Small-caps grotesque label. Short strings only. */
.label {
  font-family: var(--face-display);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.36;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  text-wrap: pretty;
}

p { text-wrap: pretty; }
p + p { margin-block-start: var(--space-sm); }

strong { font-weight: 700; }
em { font-style: italic; }

.mono, code, kbd, samp {
  font-family: var(--face-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Inline code: a tint, not a box. Horizontal padding stays tight — at
   0.34em the tint opens a visible gap before a following comma or period,
   which reads as a typo in prose this dense with inline code. */
:not(pre) > code {
  font-size: 0.875em;
  background: var(--paper-deep);
  padding: 0.12em 0.22em;
  border-radius: 2px;
  color: var(--ink);
  overflow-wrap: break-word;
}

.list {
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
}
.list > li { padding-inline-start: 1.5em; position: relative; }
.list > li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--spot);
}
.list--num { counter-reset: li; }
.list--num > li::before {
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  font-family: var(--face-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  top: 0.25em;
}
.list--num > li { padding-inline-start: 2.2em; }


/* 05  Rules, marginalia, plates =========================================== */

.rail {
  font-family: var(--face-display);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
  padding-block-start: 0.42em;   /* optical: align to cap-height of h2 */
}
.plate {
  color: var(--spot);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

.note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--space-2xs);
  margin-block-start: 0.5em;
}
.note b, .note strong {
  font-family: var(--face-display);
  font-size: 0.92em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spot);
  display: block;
  margin-block-end: 0.2em;
}

/* When the marginalia column is gone, notes become indented asides. */
@media (max-width: 62rem) {
  .note {
    margin-block-start: var(--space-md);
    margin-inline-start: var(--space-md);
    max-width: 46ch;
  }
}

.rule { border: 0; border-block-start: 1px solid var(--rule); margin: 0; }
.rule--strong { border-block-start: 1px solid var(--ink); }

/* Callout: a boxed advisory. Full hairline border — never a side stripe. */
.advisory {
  border: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
  padding: var(--space-md);
  font-size: var(--step--1);
  line-height: 1.55;
}
.advisory--spot {
  border-color: color-mix(in oklch, var(--spot) 45%, var(--rule));
  background: var(--spot-tint);
}
.advisory > .label { color: var(--spot); margin-block-end: var(--space-2xs); }
.advisory--spot > .label { color: var(--spot-deep); }
.advisory p + p { margin-block-start: var(--space-2xs); }

/* Status marks used across the catalogue and tables. */
.mark {
  font-family: var(--face-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mark--rc      { color: var(--ink-2); }
.mark--exp     { color: var(--spot); }
.mark--unpub   { color: var(--ink-3); }


/* 06  Listings (code) ===================================================== */

.listing {
  margin-block-start: var(--space-md);
  border-block-start: 1px solid var(--ink);
}
.listing > figcaption {
  font-family: var(--face-display);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block: var(--space-2xs);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}
.listing > figcaption b {
  color: var(--spot);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

pre {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  font-size: var(--step--1);
  line-height: 1.58;
  tab-size: 2;
}
pre code { font-size: inherit; background: none; padding: 0; }

/* No token highlighting. Comments carry the only tint — like a manual
   printed in two colours. */
pre .c { color: var(--ink-3); font-style: italic; }
pre .k { color: var(--spot); }

.listing--bare { border-block-start: 0; margin-block-start: var(--space-sm); }


/* 07  Catalogue entries =================================================== */

.catalogue { display: grid; }

.entry {
  grid-column: rail-start / note-end;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  border-block-start: 1px solid var(--rule);
  padding-block: var(--space-lg) var(--space-xl);
}
.entry > * { grid-column: main; }
.entry > .entry__plate { grid-column: rail; }
.entry > .note { grid-column: note; }

@supports not (grid-template-columns: subgrid) {
  .entry { display: block; }
}
@media (max-width: 62rem) {
  .entry { display: block; }
  .entry > * { max-width: var(--measure); }
}

.entry__plate {
  font-family: var(--face-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--spot);
  font-variant-numeric: tabular-nums lining-nums;
  padding-block-start: 0.34em;
}

.entry__name {
  font-family: var(--face-mono);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  word-break: break-word;
}
.entry__name a { text-decoration: none; }
.entry__name a:hover { color: var(--spot); }

.entry__tag {
  font-family: var(--face-display);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-block-start: var(--space-3xs);
}

.entry__desc { margin-block-start: var(--space-xs); }

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-block-start: var(--space-sm);
  font-family: var(--face-display);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  color: var(--ink-3);
  align-items: baseline;
}
.entry__meta a { text-decoration-color: var(--rule-strong); }
.entry__meta > * { display: inline-flex; gap: 0.5em; align-items: baseline; }
.entry__meta dt { text-transform: uppercase; letter-spacing: 0.1em; }
.entry__meta dd { color: var(--ink-2); font-family: var(--face-mono); letter-spacing: 0; }

.entry__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-sm);
  margin-block-start: var(--space-sm);
  font-family: var(--face-display);
  font-size: var(--step--1);
  list-style: none;
}
.entry__links li + li::before {
  content: "·";
  color: var(--rule-strong);
  margin-inline-end: var(--space-sm);
}
.entry__links li { display: inline-flex; }

/* Group heading inside the catalogue */
/* A section break in the catalogue: one strong rule across the full band,
   then the group letter, title and gloss. The entries' hairlines take over
   from there. */
.group {
  grid-column: rail-start / note-end;
  display: grid;
  grid-template-columns: subgrid;
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--ink);
}
.group > * { grid-column: main; }
.group > .rail { grid-column: rail; }
@supports not (grid-template-columns: subgrid) { .group { display: block; } }
@media (max-width: 62rem) { .group { display: block; } }

.group h2 { font-size: var(--step-1); }

/* `h2 + p` — NOT `.group p`, which also matches the plate and outranks
   `.plate` on specificity, silently repainting the group letter. */
.group h2 + p {
  font-size: var(--step--1);
  color: var(--ink-2);
  margin-block-start: var(--space-2xs);
}


/* 08  Tables & definition specs =========================================== */

.table-wrap { overflow-x: auto; margin-block-start: var(--space-md); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.45;
}
caption {
  text-align: start;
  font-family: var(--face-display);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block-end: var(--space-2xs);
}
th, td {
  text-align: start;
  vertical-align: baseline;
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
  border-block-end: 1px solid var(--rule);
}
thead th {
  font-family: var(--face-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-block-end: 1px solid var(--ink);
  white-space: nowrap;
}
tbody th { font-family: var(--face-mono); font-weight: 500; white-space: nowrap; }
td code, th code { background: none; padding: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* Key/value block set as a printed specification */
.specs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-md);
  margin-block-start: var(--space-md);
  font-size: var(--step--1);
}
.specs dt {
  font-family: var(--face-display);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block-start: 0.3em;
}
.specs dd { font-family: var(--face-mono); color: var(--ink); word-break: break-word; }


/* 09  Diagram ============================================================= */

.diagram {
  margin-block-start: var(--space-lg);
  padding-block: var(--space-md);
  border-block: 1px solid var(--ink);
}
.diagram svg { display: block; width: 100%; height: auto; color: var(--ink); }
/* Sentence case, not caps: this runs to three lines and all-caps is for
   short labels only. */
.diagram figcaption {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
  padding-block-start: var(--space-sm);
  max-width: 62ch;
}
.diagram figcaption b {
  font-family: var(--face-display);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--spot);
  margin-inline-end: 0.5em;
}
.d-face  { fill: var(--paper-sunk); }
.d-face2 { fill: var(--spot-tint); }
.d-line  { stroke: var(--ink); stroke-width: 1; fill: none; }
.d-hair  { stroke: var(--rule-strong); stroke-width: 1; fill: none; }
.d-name  { fill: var(--ink); font-family: var(--face-mono); font-size: 12px; letter-spacing: -0.01em; }
.d-lyr   { fill: var(--spot); font-family: var(--face-display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.d-sub   { fill: var(--ink-3); font-family: var(--face-display); font-size: 10px; letter-spacing: 0.06em; }


/* 10  Colophon ============================================================ */

.colophon {
  margin-block-start: var(--space-4xl);
  border-block-start: 1px solid var(--ink);
  box-shadow: 0 -3px 0 -2px var(--rule-strong);
  padding-block: var(--space-lg) var(--space-2xl);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-lg) var(--gutter);
}
.colophon h2 { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-block-end: var(--space-2xs); }
.colophon ul { list-style: none; display: grid; gap: var(--space-3xs); }
.colophon p { max-width: 44ch; }


/* 11  Motion ============================================================== */

/* One orchestrated arrival on the index. Nothing else moves on load. */
.reveal > * {
  animation: rise 900ms var(--ease-out-deep) backwards;
}
.reveal > :nth-child(1) { animation-delay: 40ms; }
.reveal > :nth-child(2) { animation-delay: 130ms; }
.reveal > :nth-child(3) { animation-delay: 210ms; }
.reveal > :nth-child(4) { animation-delay: 280ms; }
.reveal > :nth-child(5) { animation-delay: 340ms; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 0.6rem, 0); }
  to   { opacity: 1; transform: none; }
}

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


/* Print: it is already a document. ======================================== */
@media print {
  :root { --paper: #fff; --ink: #111; }
  .masthead, .theme, .skip { display: none; }
  .doc, .section, .entry { display: block; }
  pre { border: 1px solid #999; background: none; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}