@font-face {
  font-family: "Paper Mono";
  src: url("fonts/PaperMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root { --mono: "Paper Mono", ui-monospace, "SF Mono", Menlo, monospace; }

:root {
  --bg: #f0eadb;
  --ink: #2e2e2c;
  --muted: #6b665c;
  --line: #dcd4c1;
  --tile: #e8e1cf;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 22px;
  font-weight: 460;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; text-decoration: none; }

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 96px 0 112px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
main { display: flex; flex-direction: column; gap: 64px; }

.page > header { display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; }
.mark { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
nav { display: flex; gap: 20px; color: var(--muted); }
nav a:hover, footer a:hover { color: var(--ink); }

.art { border-radius: 4px; overflow: hidden; background: var(--tile); aspect-ratio: 16 / 9; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }

section { display: flex; flex-direction: column; gap: 14px; }
h1 { font-size: 20px; line-height: 28px; font-weight: 560; letter-spacing: -0.01em; margin-bottom: 4px; }
h2 { font-size: 14px; font-weight: 560; }
section > p { max-width: 66ch; }

.beliefs { list-style: none; display: flex; flex-direction: column; }
.beliefs li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.beliefs li:last-child { border-bottom: 1px solid var(--line); }
.icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink); }
.icon svg { display: block; width: 100%; height: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
}

.work { display: flex; flex-direction: column; }
.work a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.work a:last-child { border-bottom: 1px solid var(--line); }
.work .year { width: 48px; flex-shrink: 0; color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.work .what { display: flex; flex-direction: column; }
.work .sub { color: var(--muted); }

footer {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 640px) {
  .page { padding: 56px 16px 72px; gap: 40px; }
  main { gap: 56px; }
  .beliefs li { align-items: flex-start; }
  .beliefs .icon { margin-top: 1px; }
}

.icon svg, .spark { stroke-width: 0.75; }
.btn .spark { width: 16px; height: 16px; margin-right: 8px; }
nav a[aria-current="page"] { color: var(--ink); }

p, li span, h1 { text-wrap: pretty; }

.quote figure { display: flex; gap: 24px; align-items: center; }
.quote img { width: 168px; aspect-ratio: 3 / 4; object-fit: cover; flex-shrink: 0; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 62%, transparent 100%); }
.quote blockquote { display: flex; flex-direction: column; gap: 10px; }
.quote blockquote p { font-size: 16px; line-height: 25px; font-weight: 480; letter-spacing: -0.005em; }
.quote cite { font-style: normal; color: var(--muted); }

.hire {
  margin: auto;
  width: min(440px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
}
.hire::backdrop { background: rgba(46, 46, 44, 0.35); }
.hire-form { display: flex; flex-direction: column; gap: 14px; }
.hire-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hire-close { font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer; }
.hire-close:hover { color: var(--ink); }
.hire label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.hire input, .hire textarea {
  font: inherit;
  color: var(--ink);
  background: #f7f3ea;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  outline: none;
  resize: vertical;
}
.hire input:focus, .hire textarea:focus { border-color: var(--ink); }
.hire .btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; justify-content: center; }
.hire-note { color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
  .quote figure { flex-direction: column; align-items: flex-start; }
  .quote img { width: 100%; max-width: 280px; }
}

.people { display: flex; flex-direction: column; margin-top: 2px; }
.person { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; padding: 12px 0; border-top: 1px solid var(--line); }
.person:last-child { border-bottom: 1px solid var(--line); }
.person .name { font-weight: 560; margin-right: 12px; }
.person .role { color: var(--muted); }
.person .links { display: flex; gap: 14px; flex-shrink: 0; color: var(--muted); }
.person .links a { display: inline-flex; padding: 2px; }
.person .links a:hover { color: var(--ink); }
.person .links svg { width: 15px; height: 15px; display: block; }
@media (max-width: 640px) {
  .person .name, .person .role { display: block; margin: 0; }
}
.person .links a, .person .links .slot { width: 19px; height: 19px; justify-content: center; align-items: center; }
.person .links .slot { display: inline-block; }

/* ---------- Work list ---------- */
.work .tag { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ---------- Articles ---------- */
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }

.article { display: flex; flex-direction: column; gap: 16px; }
.article > * { margin: 0; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); align-self: flex-start; transition: color 150ms ease; }
.back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--ink); } }

.article-head { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 8px; }
.article-head h1 { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; font-weight: 580; margin: 0; }
.article-head .dek { font-size: 16px; line-height: 25px; color: var(--ink); max-width: none; }
.article-head .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.article .art { margin: 4px 0 12px; }

.article p, .article li { font-size: 15px; line-height: 26px; }
.article > p { max-width: none; }
.article h2 { font-size: 18px; line-height: 26px; font-weight: 580; letter-spacing: -0.01em; margin-top: 24px; }
.article h3 { font-size: 15px; line-height: 24px; font-weight: 580; margin-top: 8px; }
.article strong { font-weight: 580; }
.article ul { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.article li::marker { color: var(--muted); }
.article sup { font-size: 11px; line-height: 0; margin-left: 1px; }
.article sup a { color: var(--muted); }
a.inline { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { a.inline:hover { text-decoration-color: currentColor; } }

/* Diagrams */
.diagram { margin: 8px 0; padding: 20px; border-radius: 12px; background: var(--tile); }
.diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.diagram figcaption { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--muted); }
.d-axis line { stroke: var(--ink); stroke-width: 1; }
.d-dash line { stroke-dasharray: 3 4; stroke: var(--muted); }
.d-label text, .d-key text { fill: var(--muted); font: 400 10.5px/1 var(--mono); }
.d-label .d-strong { fill: var(--ink); font-size: 12px; font-weight: 520; }
.d-label .d-sub { font-size: 10.5px; }
.d-center text { text-anchor: middle; fill: var(--ink); font-size: 12px; font-weight: 520; }
.d-center .d-sub { fill: var(--muted); font-weight: 460; font-size: 10.5px; }
.d-cut, .d-cut path { fill: var(--ink); }
.d-raise, .d-raise path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.d-zone { fill: var(--bg); stroke: var(--line); }
.d-zone-mid { stroke: var(--line); }
.d-hatch { stroke: #cfc5ae; stroke-width: 2; }
.d-box rect { fill: var(--bg); stroke: var(--line); }
.d-arrow path { fill: none; stroke: var(--muted); stroke-width: 1.2; marker-end: url(#arr); }
.d-arrowhead { fill: var(--muted); }
.d-bar rect { fill: #d8cfb9; }
.d-bar rect:last-child { fill: #b9ae95; }

.d-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.d-table th { text-align: left; font-weight: 520; color: var(--muted); font-size: 13px; padding: 0 12px 8px 0; }
.d-table td { padding: 9px 12px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.d-table td:first-child { font-weight: 520; }
.d-code { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 20px; white-space: pre-wrap; }

.sources { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--line); gap: 8px; }
.sources h2 { font-size: 14px; margin-top: 16px; }
.sources ol { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.sources li { font-size: 13px; line-height: 20px; color: var(--muted); }
.sources a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
:target { scroll-margin-top: 40px; }

@media (max-width: 640px) {
  .article-head h1 { font-size: 23px; line-height: 29px; }
  .diagram { padding: 16px; overflow-x: auto; }
  .diagram svg { min-width: 500px; }
  .d-table { min-width: 440px; }
}

/* ---------- Vision ---------- */
.vision { list-style: none; counter-reset: v; display: flex; flex-direction: column; }
.vision li { text-wrap: pretty; counter-increment: v; display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.vision li:last-child { border-bottom: 1px solid var(--line); }
.vision li::before { content: counter(v, decimal-leading-zero); flex-shrink: 0; width: 20px; padding-top: 1px; color: var(--muted); font-family: var(--mono); font-size: 12px; }

/* ---------- Home hero ---------- */
.lede h1 { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; font-weight: 580; margin-bottom: 2px; }
.lede .lede-sub { font-size: 16px; line-height: 25px; }
@media (max-width: 640px) { .lede h1 { font-size: 23px; line-height: 29px; } }

/* ---------- How brands scale ---------- */
.shift { display: flex; flex-direction: column; }
.shift-row { display: grid; grid-template-columns: 116px 1fr 16px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.shift-row:last-child { border-bottom: 1px solid var(--line); }
.shift-head { padding: 0 0 8px; border-top: 0; color: var(--muted); font-size: 13px; }
.shift-head .shift-new { color: var(--ink); font-weight: 520; }
.shift-label { color: var(--muted); font-family: var(--mono); font-size: 12px; line-height: 22px; }
.shift-old { color: var(--muted); text-wrap: pretty; }
.shift-new { color: var(--ink); text-wrap: pretty; }
.shift-arrow { width: 14px; height: 14px; margin-top: 4px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .shift-head { display: none; }
  .shift-row { grid-template-columns: 1fr; gap: 4px; }
  .shift-label { margin-bottom: 2px; }
  .shift-old { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
  .shift-arrow { display: none; }
}

/* ---------- Type system: serif display, one reading size ---------- */
:root { --serif: var(--mono); }

h1, .lede h1, .article-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 46px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  text-wrap: balance;
}
h2, .article h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.01em;
}
.article h2 { margin-top: 28px; }
.sources h2 { font-size: 20px; line-height: 24px; }
.hire-head h2 { font-size: 24px; line-height: 28px; }

/* Under the headline, one size. The first line leads by colour, not by size. */
.lede .lede-sub, .lede p { font-size: 15px; line-height: 24px; }
.lede .lede-sub { color: var(--ink); }
.lede p:not(.lede-sub) { color: color-mix(in srgb, var(--ink) 78%, var(--bg)); }
.article-head .dek { font-size: 15px; line-height: 24px; }

@media (max-width: 640px) {
  h1, .lede h1, .article-head h1 { font-size: 36px; line-height: 38px; }
  h2, .article h2 { font-size: 23px; line-height: 27px; }
}

/* ---------- Paper Mono scale ---------- */
body { font-size: 13px; line-height: 22px; font-weight: 400; letter-spacing: -0.01em; }
h1, .lede h1, .article-head h1 { font-weight: 500; font-size: 30px; line-height: 36px; letter-spacing: -0.045em; }
h2, .article h2 { font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.03em; }
.article h3 { font-size: 14px; font-weight: 500; letter-spacing: -0.02em; }
.sources h2 { font-size: 14px; line-height: 22px; }
.hire-head h2 { font-size: 16px; line-height: 24px; }
.brand, .person .name, .strong, .work .title { font-weight: 500; }
.lede .lede-sub, .lede p, .article-head .dek { font-size: 13.5px; line-height: 23px; }
.article p, .article li { font-size: 13.5px; line-height: 24px; }
.article strong, .article .d-table td:first-child, .d-table td:first-child { font-weight: 500; }
.d-table { font-size: 12.5px; line-height: 20px; }
.d-table th { font-size: 12px; font-weight: 400; }
.d-label .d-strong { font-size: 10.5px; font-weight: 500; }
.d-center text { font-size: 10.5px; font-weight: 500; }
.d-center .d-sub, .d-label .d-sub { font-size: 9.5px; font-weight: 400; }
.shift-head { font-size: 12px; }
.shift-head .shift-new { font-weight: 500; }
.btn { font-weight: 500; letter-spacing: -0.01em; }
.hire input, .hire textarea { letter-spacing: -0.01em; }
@media (max-width: 640px) {
  h1, .lede h1, .article-head h1 { font-size: 25px; line-height: 31px; }
  h2, .article h2 { font-size: 15px; line-height: 22px; }
}

/* ---------- Motion ----------
   One curve, one rise, one stagger. Reveals are one-shot (keyframe-like,
   set once by site.js); every interactive state uses interruptible
   transitions on named properties only. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --rise: 12px;
}

/* Cross-page: the header holds still, the old page lifts and blurs out in 150ms,
   the new page reveals itself chunk by chunk. */
@view-transition { navigation: auto; }
.page > header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 150ms ease-out both; }
::view-transition-new(root) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(calc(var(--rise) * -1)); filter: blur(4px); } }

/* Reveal: opacity + 12px rise + 4px blur, 400ms, staggered by site.js via --d */
.js [data-reveal] { opacity: 0; transform: translateY(var(--rise)); filter: blur(4px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), filter 400ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Headlines arrive word by word, 80ms apart */
.js h1[data-words] .w { display: inline-block; opacity: 0; transform: translateY(var(--rise)); filter: blur(4px); }
.js h1[data-words].is-in .w {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), filter 500ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* Art develops once it has loaded: blur 8px to sharp, with a slight settle */
.art { outline: 1px solid oklch(0 0 0 / 0.08); outline-offset: -1px; }
.art img, .quote img {
  opacity: 0; filter: blur(8px); scale: 1.015;
  transition: opacity 700ms var(--ease-out), filter 700ms var(--ease-out), scale 900ms var(--ease-out);
}
.art img.is-loaded, .quote img.is-loaded { opacity: 1; filter: blur(0); scale: 1; }

/* Diagrams explain themselves once, when they scroll into view */
.js .diagram svg text { opacity: 0; transition: opacity 400ms var(--ease-out) 380ms; }
.diagram.is-in svg text { opacity: 1; }

.js .diagram .d-cut path, .js .diagram .d-raise path { opacity: 0; transform: translateY(-6px); transform-box: fill-box; }
.diagram.is-in .d-cut path, .diagram.is-in .d-raise path {
  opacity: 1; transform: none;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.diagram.is-in .d-cut path:nth-child(1) { transition-delay: 120ms; }
.diagram.is-in .d-cut path:nth-child(2) { transition-delay: 190ms; }
.diagram.is-in .d-cut path:nth-child(3) { transition-delay: 260ms; }
.diagram.is-in .d-cut path:nth-child(4) { transition-delay: 330ms; }
.diagram.is-in .d-cut path:nth-child(5) { transition-delay: 400ms; }
.diagram.is-in .d-raise path { transition-delay: 520ms; }

.js .diagram .d-zone, .js .diagram .d-zone-mid { clip-path: inset(0 100% 0 0); }
.diagram.is-in .d-zone, .diagram.is-in .d-zone-mid { clip-path: inset(0 0 0 0); transition: clip-path 520ms var(--ease-in-out); }
.diagram.is-in .d-zone-mid { transition-delay: 120ms; }
.diagram.is-in rect.d-zone:nth-of-type(3) { transition-delay: 240ms; }

.js .diagram .d-bar rect { clip-path: inset(100% 0 0 0); }
.diagram.is-in .d-bar rect { clip-path: inset(0 0 0 0); transition: clip-path 600ms var(--ease-out); }
.diagram.is-in .d-bar rect:nth-child(2) { transition-delay: 60ms; }
.diagram.is-in .d-bar rect:nth-child(3) { transition-delay: 120ms; }
.diagram.is-in .d-bar rect:nth-child(4) { transition-delay: 180ms; }
.diagram.is-in .d-bar rect:nth-child(5) { transition-delay: 240ms; }
.diagram.is-in .d-bar rect:nth-child(6) { transition-delay: 300ms; }
.diagram.is-in .d-bar rect:nth-child(7) { transition-delay: 360ms; }
.diagram.is-in .d-bar rect:nth-child(8) { transition-delay: 420ms; }

.js .diagram .d-box rect { opacity: 0; }
.diagram.is-in .d-box rect { opacity: 1; transition: opacity 360ms var(--ease-out); }
.js .diagram .d-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.diagram.is-in .d-arrow path { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease-in-out) 260ms; }

.js .diagram tbody tr { opacity: 0; }
.diagram.is-in tbody tr { opacity: 1; transition: opacity 360ms var(--ease-out); }
.diagram.is-in tbody tr:nth-child(2) { transition-delay: 60ms; }
.diagram.is-in tbody tr:nth-child(3) { transition-delay: 120ms; }
.diagram.is-in tbody tr:nth-child(4) { transition-delay: 180ms; }
.diagram.is-in tbody tr:nth-child(5) { transition-delay: 240ms; }

/* Hover and press: instant-feeling, 150ms or less, named properties only */
nav a, footer a, .person .links a, .hire-close, .back { transition: color 150ms ease; }
.btn { transition-property: scale, opacity; transition-duration: 150ms; transition-timing-function: ease-out; }
.btn:active { scale: 0.96; }
.work .title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 150ms ease; }
.work a::after {
  content: "\2192"; margin-left: auto; padding-left: 12px; align-self: center; color: var(--muted);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { opacity: 0.88; }
  .work a:hover .title { text-decoration-color: currentColor; }
  .work a:hover::after { opacity: 1; transform: none; }
}
@media (hover: none) {
  nav a:not([aria-current]):hover, footer a:hover, .person .links a:hover, .hire-close:hover, .back:hover { color: inherit; }
}

/* Keyboard flows get a visible, calm focus ring */
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.hire input:focus-visible, .hire textarea:focus-visible { outline: none; }

/* Footnotes glide, and the source you land on lights up briefly */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.sources li { border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
.sources li:target { animation: flash 1600ms ease-out; }
@keyframes flash { 0%, 35% { background: var(--tile); } 100% { background: transparent; } }

/* Hire Us dialog: 220ms in, 150ms out, fields settle in behind it */
.hire {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 150ms ease-out, transform 150ms ease-out, overlay 150ms allow-discrete, display 150ms allow-discrete;
}
.hire[open] {
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
@starting-style {
  .hire[open] { opacity: 0; transform: translateY(8px) scale(0.98); }
}
.hire::backdrop {
  background: rgba(46, 46, 44, 0);
  backdrop-filter: blur(0);
  transition: background 150ms ease-out, backdrop-filter 150ms ease-out, overlay 150ms allow-discrete, display 150ms allow-discrete;
}
.hire[open]::backdrop { background: rgba(46, 46, 44, 0.32); backdrop-filter: blur(2px); transition-duration: 220ms; }
@starting-style {
  .hire[open]::backdrop { background: rgba(46, 46, 44, 0); backdrop-filter: blur(0); }
}
@keyframes field-in { from { opacity: 0; transform: translateY(6px); } }
.hire[open] .hire-form > * { animation: field-in 300ms var(--ease-out) both; }
.hire[open] .hire-form > :nth-child(2) { animation-delay: 40ms; }
.hire[open] .hire-form > :nth-child(3) { animation-delay: 80ms; }
.hire[open] .hire-form > :nth-child(4) { animation-delay: 120ms; }
.hire[open] .hire-form > :nth-child(5) { animation-delay: 160ms; }
.hire[open] .hire-form > :nth-child(6) { animation-delay: 200ms; }
.hire[open] .hire-form > :nth-child(7) { animation-delay: 240ms; }

/* Reduced motion: keep the fades, drop every movement, blur and wipe */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js h1[data-words] .w { transform: none; filter: none; }
  .js .diagram *, .diagram.is-in * { transform: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; }
  .art img, .quote img { filter: none; scale: 1; }
  ::view-transition-old(root) { animation: vt-fade 150ms ease-out both; }
  @keyframes vt-fade { to { opacity: 0; } }
  .btn:active { scale: 1; }
  .hire, .hire[open] { transform: none; }
  @starting-style { .hire[open] { transform: none; } }
  .hire[open] .hire-form > * { animation: none; }
  .work a::after { transform: none; }
}

/* Home headline sits on one line wherever it fits */
@media (min-width: 641px) {
  .lede h1 { font-size: 24px; line-height: 30px; white-space: nowrap; text-wrap: nowrap; }
}

/* Printing never waits on a reveal */
@media print {
  .js [data-reveal], .js h1[data-words] .w, .js .diagram * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; }
  .art img { opacity: 1; filter: none; scale: 1; }
}