@font-face {
  font-family: "Literata";
  src: url("fonts/literata.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #ecf1e6;
  --paper-2: #e2e9da;
  --ink: #13201a;
  --ink-2: #3c4e43;
  --ink-3: #788a7d;
  --line: #c6d2bd;
  --blue: #1f3dba;
  --blue-wash: rgba(31, 61, 186, 0.12);
  --field: #15241c;
  --field-ink: #e6ede0;
  --field-ink-2: #b2c2b5;
  --field-ink-3: #6b7d71;
  --field-blue: #8ab6ff;
  --input: #f6f9f2;
  --input-line: #788a7d;
  --error: #a3271c;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(16px, 4.4vw, 64px);
  --gap: clamp(16px, 2vw, 28px);
  --max: 1360px;
  --top-h: 72px;
  /* one unit of the small viewport height (the screen with the browser's bars shown), vh where svh is
     missing; heights that must fit the first screen are counted in it */
  --svh: 1vh;

  /* spacing, 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --section: clamp(80px, 8.5vw, 120px);

  /* type roles */
  --t-display: clamp(2.25rem, 1.15rem + 5.3vw, 6rem);
  --t-title: clamp(1.875rem, 1.1rem + 2.5vw, 3.5rem);
  --t-item: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --t-lede: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);
  --t-body: 1.125rem;
  --t-ui: 0.9375rem;
  --t-legal: 0.875rem;
}

@supports (height: 1svh) {
  :root {
    --svh: 1svh;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0f1813;
    --paper-2: #16211b;
    --ink: #e3eadc;
    --ink-2: #b3c1b6;
    --ink-3: #5f7065;
    --line: #2b3a31;
    --blue: #8ab6ff;
    --blue-wash: rgba(138, 182, 255, 0.16);
    --field: #1a2a21;
    --field-ink: #e6ede0;
    --field-ink-2: #b2c2b5;
    --field-ink-3: #6b7d71;
    --field-blue: #8ab6ff;
    --input: #16211b;
    --input-line: #6b7d71;
    --error: #ff9b8c;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--ink-3) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--blue);
  color: var(--paper);
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font: 500 var(--t-ui) / 1.2 var(--sans);
  text-decoration: none;
}
.skip:focus {
  top: var(--s-3);
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* ---------------------------------------------------------------- links */
.link {
  color: var(--blue);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 0% 2px, 100% 1px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  padding-bottom: 0.08em;
  transition: background-size 420ms var(--ease);
}
.link:hover,
a:hover > .link {
  background-size: 100% 2px, 100% 1px;
}
.link:active {
  opacity: 0.72;
}

/* ---------------------------------------------------------------- first screen */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--top-h);
}

.mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.4375rem;
  font-weight: 500;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.01em;
  line-height: 1;
}
/* the owner's mark: three bars at 45 degrees, redrawn from brand/artely-logo-source.png, in the ink */
.mark svg {
  width: 25px;
  height: 25px;
  flex: none;
  fill: currentColor;
  transition: transform 520ms var(--ease);
}
.mark:hover svg {
  transform: translate(1px, -1px);
}

/* one link, to the form; its 44px target reaches past the text without moving it off the content edge */
.nav {
  display: flex;
  font: 500 var(--t-ui) / 1 var(--sans);
  letter-spacing: 0.01em;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px 0;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: color 200ms, text-decoration-color 200ms;
}
.nav a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
}

.hero {
  padding-top: clamp(28px, 5vh, 72px);
  padding-bottom: clamp(24px, 4vh, 48px);
  row-gap: clamp(28px, 4.6vh, 56px);
  align-content: start;
}

.hero h1 {
  grid-column: 1 / -1;
  font-size: var(--t-display);
  font-weight: 340;
  font-variation-settings: "opsz" 72;
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 15.5em;
}
/* the headline is two phrases, each on its own line where it fits and balanced where it wraps on a
   phone, so the second phrase never starts at the end of a line */
.hero h1 .hl {
  display: block;
}

.standfirst {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 34rem;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  font-variation-settings: "opsz" 16;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* the hero's one action: the form's own button, leading to the form */
.cta {
  display: flex;
  margin-top: var(--s-1);
}
.nw {
  white-space: nowrap;
}
/* the ballpoint arrow (a stroke and a dot), drawn out further on hover */
.button line {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-origin: 1.5px 6px;
  transition: transform 460ms var(--ease);
}
.button circle {
  fill: currentColor;
  transition: transform 460ms var(--ease);
}
.button:hover line {
  transform: scaleX(1.3);
}
.button:hover circle {
  transform: translateX(8px);
}

.tree-fig {
  grid-column: 1 / -1;
  position: relative;
  height: clamp(280px, 78vw, 360px);
}
/* the hero carries two static trees until the script draws its own: the wide one, and one drawn for a
   phone's box (358x304, the same seed), so a phone without the script never sees the wide tree shrunk
   to illegible labels */
@media (max-width: 599px) {
  .tree.tree-lg {
    display: none;
  }
}
@media (min-width: 600px) {
  .tree.tree-sm {
    display: none;
  }
}

.tree {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* From 900px the hero is as tall as its content, never stretched to the screen: on a tall screen
   (1920x1080, a portrait tablet) a forced full-screen hero left a third to a half of it blank under
   the tree. The headline is two lines at every width from here (its size capped by the width, so
   its longer phrase fits the measure) and is capped by the height as well, so a short
   window keeps room for the rest. The figure takes its height from its own 16:9 aspect, at least
   300px (so a 470px box at 900 still gets a four-level tree), and never more than the room the
   screen has left under the headline (--room, with 24px of air), so headline, action and the whole
   tree still fit the first screen of a 1280x720 or 1366x650 window. The next section follows at the
   normal section gap. */
@media (min-width: 900px) {
  :root {
    --top-h: 104px;
  }
  .hero {
    --h1: min(var(--t-display), 6.2vw, calc(10.5 * var(--svh)));
    --hero-pt: clamp(28px, calc(5 * var(--svh)), 72px);
    --hero-gap: clamp(28px, calc(4.6 * var(--svh)), 56px);
    --room: calc(100 * var(--svh) - var(--top-h) - var(--hero-pt) - 2 * var(--h1) - var(--hero-gap) - var(--s-5));
    padding-top: var(--hero-pt);
    padding-bottom: 0;
    row-gap: var(--hero-gap);
  }
  .hero h1 {
    grid-column: 1 / -1;
    font-size: var(--h1);
  }
  .standfirst {
    grid-column: 1 / 6;
    align-self: start;
  }
  /* an explicit width: with an automatic one, aspect-ratio carries the height limits over to the width
     (the box narrowed on short windows and outgrew its columns at 900) */
  .hero .tree-fig {
    grid-column: 6 / -1;
    align-self: start;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: clamp(240px, var(--room), 300px);
    max-height: max(240px, var(--room));
  }
}

/* ---------------------------------------------------------------- the tree */
.t-e,
.t-x {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.t-e {
  stroke: var(--ink-3);
  stroke-width: 1;
  transition:
    stroke 520ms var(--ease),
    stroke-width 520ms var(--ease);
}
.t-e.on {
  stroke: var(--blue);
  stroke-width: 1.5;
}
.t-x {
  stroke: var(--blue);
  stroke-width: 3.25;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 300ms var(--ease);
}
.t-x.on {
  stroke-dashoffset: 0;
}
.t-n {
  transition:
    fill 360ms var(--ease),
    stroke 360ms var(--ease);
}
.t-dec {
  fill: var(--ink);
}
.t-dec.on {
  fill: var(--blue);
}
.t-end {
  fill: var(--paper);
  stroke: var(--ink-3);
  stroke-width: 1.25;
}
.t-end.on {
  fill: var(--blue);
  stroke: var(--blue);
}
/* the figure's annotations: one face (the grotesk), sizes that grow with the figure. Proportional
   figures: the payoffs are single digits set centred, and the face's tabular comma opened a gap, "(8 , 1)" */
.t-pl,
.t-v {
  font-family: var(--sans);
  font-variant-numeric: lining-nums proportional-nums;
  fill: var(--ink-2);
}
.t-pl {
  font-size: 12px;
  font-weight: 500;
  text-anchor: end;
}
.t-pl.r {
  text-anchor: start;
}
.t-v {
  font-size: 13px;
  font-weight: 400;
  text-anchor: middle;
  transition:
    fill 360ms var(--ease),
    opacity 400ms var(--ease);
}
.t-v.on {
  fill: var(--blue);
  font-weight: 600;
}
@media (min-width: 900px) {
  .t-pl {
    font-size: 13px;
  }
  .t-v {
    font-size: 14px;
  }
}
.t-e.probe {
  stroke: var(--ink);
  stroke-width: 2;
}
.t-v.probe {
  fill: var(--ink);
  font-weight: 600;
}
.t-n.probe {
  stroke: var(--ink);
}

/* with motion, the static figure waits for the script, which draws its own; if the script never
   runs (a page opened from disk), the static figure shows after two seconds */
@keyframes appear {
  to {
    opacity: 1;
  }
}
.motion .tree:not(.live) {
  opacity: 0;
  animation: appear 500ms ease 2s forwards;
}
/* built, not yet drawn in: tree.js removes .pending as its entrance starts */
.tree.pending .t-e {
  stroke-dashoffset: 1;
}
.tree.pending .t-n,
.tree.pending .t-pl,
.tree.pending .t-v {
  opacity: 0;
}

/* ---------------------------------------------------------------- client work */
.work {
  padding-block: var(--section);
  row-gap: var(--s-7);
}

h2,
.gone h1 {
  font-size: var(--t-title);
  font-weight: 360;
  font-variation-settings: "opsz" 60;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.work h2 {
  grid-column: 1 / -1;
}

.services {
  grid-column: 1 / -1;
}
/* each heading sits over its description at every width: the headings differ in length, and side by
   side they wrapped unevenly and broke the rows' rhythm */
.services li {
  display: grid;
  gap: var(--s-3) var(--gap);
  padding-block: var(--s-6) var(--s-6);
  border-top: 1px solid var(--line);
}
.services li:last-child {
  border-bottom: 1px solid var(--line);
}
.services h3 {
  font-size: var(--t-item);
  font-weight: 420;
  font-variation-settings: "opsz" 32;
  line-height: 1.2;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
/* every paragraph below the hero (the services, the research, the contact) is set at the lede size:
   the company's offer is never the smallest copy on the page */
.services p {
  font-size: var(--t-lede);
  line-height: 1.5;
  font-variation-settings: "opsz" 16;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .work h2 {
    grid-column: 1 / 5;
    align-self: start;
  }
  .services {
    grid-column: 5 / -1;
  }
}

/* ---------------------------------------------------------------- research */
.research {
  background: var(--field);
  color: var(--field-ink);
  padding-block: var(--section);
}
.research ::selection {
  background: var(--field-blue);
  color: var(--field);
}
.research .grid {
  row-gap: var(--s-6);
}
.research h2 {
  grid-column: 1 / -1;
}
.research p {
  grid-column: 1 / -1;
  font-size: var(--t-lede);
  line-height: 1.55;
  font-variation-settings: "opsz" 16;
  color: var(--field-ink-2);
  max-width: 33em;
  text-wrap: pretty;
}
/* a second, smaller tree, printed on the field: the hero's figure, tied to the research it comes from.
   Capped at every width, so it stays a three-level echo and never grows into a second hero tree */
.research .tree-fig {
  --ink: var(--field-ink);
  --ink-2: var(--field-ink-2);
  --ink-3: var(--field-ink-3);
  --blue: var(--field-blue);
  --paper: var(--field);
  grid-column: 1 / -1;
  width: 100%;
  max-width: 280px;
  height: 180px;
  margin-top: var(--s-2);
}
@media (min-width: 900px) {
  .research h2 {
    grid-column: 1 / 11;
  }
  .research p {
    grid-column: 5 / 12;
    grid-row: 2;
    margin-top: var(--s-5);
  }
  .research .tree-fig {
    grid-column: 1 / 5;
    grid-row: 2;
    max-width: 420px;
    height: 250px;
    margin: var(--s-5) 0 0;
  }
}

/* ---------------------------------------------------------------- contact */
.contact {
  padding-top: var(--section);
  padding-bottom: clamp(64px, 8vw, 112px);
  row-gap: var(--s-7);
  scroll-margin-top: var(--s-4);
}
.contact-intro {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.contact-intro > p {
  font-size: var(--t-lede);
  line-height: 1.5;
  font-variation-settings: "opsz" 16;
  color: var(--ink-2);
  max-width: 30em;
  text-wrap: pretty;
}
.direct {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font: 500 var(--t-ui) / 1.3 var(--sans);
}
.direct li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.direct .link {
  font-size: 1.1875rem;
  overflow-wrap: anywhere;
}
/* the GitHub and LinkedIn marks, in the ink, with their names */
.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: color 200ms;
}
.social svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}
.social span {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms;
}
.social:hover {
  color: var(--blue);
}
.social:hover span {
  text-decoration-color: currentColor;
}
.contact-form {
  grid-column: 1 / -1;
  max-width: 48rem;
}
@media (min-width: 900px) {
  .contact-intro {
    grid-column: 1 / 5;
    align-self: start;
  }
  .contact-form {
    grid-column: 5 / -1;
    max-width: none;
    padding-top: 0.6em;
  }
}

/* ---------------------------------------------------------------- the form */
/* paperwork, so the grotesk; fields on a lighter sheet with an ink-3 rule (3:1 on the paper), labels
   above, errors under their field. The choice is four chips, each with a node from the figure: hollow
   until chosen, then filled blue like a solved one */
.form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5) var(--s-5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field label,
.field legend {
  padding: 0;
  font: 500 var(--t-ui) / 1.3 var(--sans);
  color: var(--ink);
}
.opt {
  font-weight: 400;
  color: var(--ink-2);
}
.hint {
  margin-top: -2px;
  font: 400 var(--t-legal) / 1.45 var(--sans);
  color: var(--ink-2);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  font: 400 1.0625rem / 1.45 var(--sans);
  color: var(--ink);
  background: var(--input);
  border: 1px solid var(--input-line);
  border-radius: 4px;
  caret-color: var(--blue);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms;
}
.field textarea {
  min-height: 10rem;
  resize: vertical;
}
.field input:hover,
.field textarea:hover {
  border-color: var(--ink-2);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: -1px;
}
.field [aria-invalid="true"] {
  border-color: var(--error);
}
.field-error {
  font: 500 var(--t-legal) / 1.4 var(--sans);
  color: var(--error);
}
.field-error:empty {
  display: none;
}

.choice {
  display: block;
}
.choice legend {
  margin-bottom: var(--s-2);
}
.choice .field-error {
  margin-top: var(--s-2);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.chip {
  position: relative;
  display: inline-flex;
}
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  font: 500 var(--t-ui) / 1.2 var(--sans);
  color: var(--ink-2);
  background: var(--input);
  border: 1px solid var(--input-line);
  border-radius: 4px;
  transition:
    color 200ms,
    border-color 200ms,
    background-color 200ms;
}
.chip span::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  background: var(--paper);
  transition:
    background-color 200ms,
    border-color 200ms;
}
.chip:hover span {
  color: var(--ink);
  border-color: var(--ink-2);
}
.chip input:checked + span {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-wash);
}
.chip input:checked + span::before {
  background: var(--blue);
  border-color: var(--blue);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.choice.invalid .chip span {
  border-color: var(--error);
}

/* the honeypot: off the page for people and screen readers, still in the form for bots */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-2);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 22px 0 24px;
  font: 500 1.0625rem / 1 var(--sans);
  letter-spacing: -0.005em;
  color: var(--paper);
  text-decoration: none;
  background: var(--blue);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 200ms;
}
.button svg {
  width: 44px;
  height: 12px;
  flex: none;
  overflow: visible;
}
.button:active {
  opacity: 0.85;
}
.button:focus-visible {
  outline-offset: 3px;
}
.form[aria-busy="true"] .button {
  opacity: 0.7;
  cursor: progress;
}
.form-status {
  font: 500 var(--t-ui) / 1.45 var(--sans);
  color: var(--ink-2);
  max-width: 30em;
}
.form-status.error {
  color: var(--error);
}
.form-note {
  font: 400 var(--t-legal) / 1.5 var(--sans);
  color: var(--ink-2);
}
.form-note a,
.doc-body a:not(.link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--input-line);
  text-underline-offset: 3px;
  transition: color 200ms;
}
.form-note a:hover {
  color: var(--blue);
}
.sent {
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sent:focus {
  outline: none;
}
.sent h3 {
  font-size: var(--t-item);
  font-weight: 420;
  font-variation-settings: "opsz" 32;
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.sent p {
  font-size: var(--t-lede);
  line-height: 1.5;
  font-variation-settings: "opsz" 16;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .button {
    width: 100%;
  }
}
@media (min-width: 640px) {
  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field-wide {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- privacy notice */
.doc {
  padding-block: clamp(28px, 5vh, 72px) var(--section);
  row-gap: var(--s-6);
}
.doc h1 {
  grid-column: 1 / -1;
  font-size: var(--t-title);
  font-weight: 360;
  font-variation-settings: "opsz" 60;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.doc-body {
  grid-column: 1 / -1;
  max-width: 38rem;
}
.doc-body > p:first-child {
  font-size: var(--t-lede);
  line-height: 1.5;
  font-variation-settings: "opsz" 16;
  color: var(--ink-2);
}
.doc h2 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  font-size: var(--t-item);
  font-weight: 420;
  font-variation-settings: "opsz" 32;
  line-height: 1.2;
  letter-spacing: -0.008em;
}
.doc-body p,
.doc-body li {
  color: var(--ink-2);
  text-wrap: pretty;
}
.doc-body p + p,
.doc-body p + ul,
.doc-body ul + p {
  margin-top: var(--s-3);
}
.doc-body ul {
  padding-left: 1.2em;
  list-style: disc;
}
.doc-body li::marker {
  color: var(--ink-3);
}
.doc-body address {
  font-style: normal;
}
.doc-body a:not(.link):hover {
  color: var(--blue);
}
@media (min-width: 900px) {
  .doc h1 {
    grid-column: 1 / 5;
    align-self: start;
  }
  .doc-body {
    grid-column: 5 / -1;
    padding-top: 0.5em;
  }
}

/* ---------------------------------------------------------------- not found (404.html) */
/* one screen of air, the heading on the section-title scale, a line or two under it (404, thanks) */
.gone {
  min-height: calc(100 * var(--svh) - var(--top-h) - 260px);
  padding-block: clamp(28px, 5vh, 72px) var(--section);
  row-gap: var(--s-5);
  align-content: start;
}
.gone h1 {
  grid-column: 1 / -1;
  margin-bottom: var(--s-2);
}
.gone .lede {
  grid-column: 1 / -1;
  max-width: 34rem;
}

/* ---------------------------------------------------------------- legal footer */
.foot {
  font: 400 var(--t-legal) / 1.6 var(--sans);
  color: var(--ink-2);
}
.foot .grid {
  border-top: 1px solid var(--line);
  padding-block: var(--s-6) var(--s-7);
  row-gap: var(--s-5);
}
.foot-id {
  grid-column: 1 / -1;
  font-style: normal;
}
.foot-id strong {
  color: var(--ink);
  font-weight: 600;
}
.foot-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
}
.foot-meta li {
  display: flex;
}
/* each link's 44px tap target is a ::before reaching half the difference above and below its line */
.foot-meta a {
  position: relative;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color 200ms, text-decoration-color 200ms;
}
.foot-meta a.social {
  text-decoration: none;
  gap: 8px;
}
.foot-meta .social svg {
  width: 16px;
  height: 16px;
  align-self: center;
}
.foot-meta a::before {
  content: "";
  position: absolute;
  inset: calc((1.6em - 44px) / 2) 0;
}
.foot-meta a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
}
.foot-meta a.social:hover span {
  text-decoration-color: currentColor;
}
@media (min-width: 900px) {
  .foot-id {
    grid-column: 1 / 9;
  }
  .foot-meta {
    grid-column: 9 / -1;
    justify-content: flex-end;
    text-align: right;
    align-self: start;
  }
}

/* ---------------------------------------------------------------- entrance */
/* a short fade and a small lift; the tree drawing itself in is the page's one moment */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.motion .hero h1 {
  animation: rise 700ms var(--ease) both;
}
.motion .standfirst {
  animation: rise 700ms var(--ease) 100ms both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}