/* ==========================================================================
   BackflowLeads — "records desk" design system
   Paper base, ink type, one signal colour, hairline ledger structure.
   No web fonts, no JavaScript, no third-party assets.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #f4f1e8;
  --paper-shade: #ece7db;
  --sheet: #fbf9f4;
  --ink-field: #121714;
  --ink-field-2: #1b221e;

  /* Type colours (all verified >= 4.5:1 on their intended surface) */
  --ink: #121714;
  --ink-2: #3d4642;
  --ink-3: #5c665f;
  --on-ink: #f4f1e8;
  --on-ink-2: #b8c0ba;

  /* Signal — used only for marks, status and the active rule */
  --signal: #a83a1c;
  --signal-deep: #8f2f14;
  --signal-on-ink: #e0793f;

  /* Structure */
  --rule: #cec7b6;
  --rule-soft: #e0dacb;
  --rule-ink: #333c37;

  /* Metrics */
  --gutter: clamp(16px, 4.6vw, 56px);
  --max: 1180px;
  --rail: 8.75rem;
  --band-y: clamp(64px, 7vw, 104px);

  /* Type floor. Nothing on the site sets a size below --micro: below roughly 12px the
     mono metadata voice stops reading as annotation and starts reading as noise, which
     is what made dense pages look like collapsing text rather than a ledger. */
  --micro: .76rem;
  --small: .84rem;

  /* Type */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------- primitives */

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

.skip {
  position: absolute;
  z-index: 90;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-200%);
  border: 1px solid var(--ink);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .78rem;
}

.skip:focus { transform: translateY(0); }

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure,
table { margin: 0; }

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -.021em;
  line-height: 1.12;
  text-wrap: balance;
}

/* balance equalises line lengths, which is right for a two- or three-line heading and
   wrong for a five-line one — it produced a visibly ragged stack at 1024px. pretty keeps
   the long lines long and only guards the last one. */
h1 {
  font-size: clamp(1.95rem, 1.28rem + 2.9vw, 3.5rem);
  text-wrap: pretty;
}
h2 { font-size: clamp(1.55rem, 1.16rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.08rem, .99rem + .38vw, 1.32rem); }

h4 {
  font-size: .95rem;
  letter-spacing: -.01em;
}

/* Metadata voice: every identifier, date, label and status on the site. */
.meta,
.tag,
.rail,
.issue,
th,
.field__name,
.chain__count,
.stamp,
.kv dt,
.docket { font-family: var(--mono); }

.meta {
  color: var(--ink-3);
  font-size: var(--micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lede {
  max-width: 34em;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1.01rem + .24vw, 1.24rem);
  line-height: 1.58;
}

.prose p,
.body-copy {
  max-width: 38em;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.65;
}

.mark-note {
  color: var(--ink-3);
  font-size: .88rem;
  line-height: 1.6;
}

/* Hairlines --------------------------------------------------------------- */

.rule,
.rule-double {
  border: 0;
  border-top: 1px solid var(--rule);
}

.rule-double {
  height: 3px;
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ masthead */

.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}

.masthead__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 14px 0 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
}

.brand svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.brand b { font-weight: 700; }
.brand span { font-weight: 400; }

.issue {
  color: var(--ink-3);
  font-size: var(--micro);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.issue b {
  color: var(--ink-2);
  font-weight: 700;
}

.masthead nav {
  border-top: 1px solid var(--rule);
}

.masthead nav ul {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

.masthead nav a {
  display: block;
  padding: 13px 20px 12px 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.masthead nav li + li a { padding-left: 20px; }

.masthead nav a:hover {
  border-bottom-color: var(--rule);
  color: var(--ink);
}

.masthead nav a[aria-current="page"] {
  border-bottom-color: var(--signal);
  color: var(--ink);
}

/* -------------------------------------------------------------------- bands */

.band { padding: var(--band-y) 0; }

.band + .band { border-top: 1px solid var(--rule); }

.band--shade {
  border-top: 1px solid var(--rule);
  background: var(--paper-shade);
}

.band--ink {
  border-top: 0;
  background: var(--ink-field);
  color: var(--on-ink);
}

.band--ink .meta,
.band--ink .mark-note { color: var(--on-ink-2); }

.band--ink .lede,
.band--ink .prose p { color: var(--on-ink-2); }

.band--ink a { color: var(--on-ink); }

.band--tight { padding-block: clamp(38px, 4.4vw, 60px); }

/* Numbered section head with a left index rail on wide screens. */
.block {
  display: grid;
  gap: clamp(20px, 3vw, 40px) clamp(24px, 3vw, 46px);
  grid-template-columns: minmax(0, 1fr);
}

.block__rail {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 6px;
  border-top: 2px solid var(--ink);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.band--ink .block__rail {
  border-top-color: var(--on-ink);
  color: var(--on-ink-2);
}

.block__rail b {
  color: var(--signal);
  font-weight: 700;
}

.band--ink .block__rail b { color: var(--signal-on-ink); }

.block__body { min-width: 0; }

.block__body > * + * { margin-top: clamp(22px, 2.4vw, 32px); }

.block__body > .rule { margin-top: clamp(22px, 3vw, 34px); }

/* The rail costs 140px plus its gap out of the content width. At 1024px that was 18% of
   the page held empty down its whole length while the body column got squeezed, so it
   only earns its place once there is width to spare. Below this it sits inline above the
   heading, which is what the 768px layout already did. */
@media (min-width: 1280px) {
  .block { grid-template-columns: var(--rail) minmax(0, 1fr); }

  .block__rail {
    position: sticky;
    top: 26px;
    display: block;
    align-self: start;
  }

  .block__rail b { display: block; margin-bottom: 6px; }
}

/* --------------------------------------------------------------------- hero */

.hero {
  padding: clamp(38px, 5vw, 74px) 0 clamp(44px, 5vw, 76px);
  border-bottom: 1px solid var(--rule);
}

.hero__grid {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(320px, .88fr); }
}

.hero h1 { margin-block: 16px 20px; }

.hero .lede { margin-bottom: 26px; }

.hero__docket {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero__docket::before {
  width: 26px;
  height: 2px;
  content: "";
  background: var(--signal);
}

/* Actions ----------------------------------------------------------------- */

.actions {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: .92rem;
  font-weight: 650;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}

.btn:hover {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
}

.band--ink .btn {
  border-color: var(--on-ink);
  background: var(--on-ink);
  color: var(--ink-field);
}

.band--ink .btn:hover {
  border-color: var(--signal-on-ink);
  background: var(--signal-on-ink);
  color: var(--ink-field);
}

.btn-quiet {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color .16s ease;
}

.btn-quiet:hover { border-bottom-color: var(--signal); }
.band--ink .btn-quiet { border-bottom-color: var(--rule-ink); }
.band--ink .btn-quiet:hover { border-bottom-color: var(--signal-on-ink); }

.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.link:hover { text-decoration-thickness: 2px; }
.band--ink .link { text-decoration-color: var(--signal-on-ink); }

/* --------------------------------------------------- compilation record card */

.record {
  border: 1px solid var(--ink);
  background: var(--sheet);
}

.record__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
  padding: 13px 20px;
  border-bottom: 1px solid var(--ink);
  background: var(--ink-field);
  color: var(--on-ink);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.record__head b { color: var(--signal-on-ink); font-weight: 700; }

.kv {
  margin: 0;
  padding: 6px 20px 18px;
}

.kv > div {
  display: grid;
  gap: 4px 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
  grid-template-columns: minmax(0, 1fr);
}

.kv > div:last-child { border-bottom: 0; }

.kv dt {
  color: var(--ink-3);
  font-size: var(--micro);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.kv dd {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kv dd small {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.5;
}

@media (min-width: 460px) {
  .kv > div { grid-template-columns: 7.2rem minmax(0, 1fr); }
  .kv dt { padding-top: 2px; }
}

.record__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--paper-shade);
  color: var(--ink-3);
  font-size: var(--small);
  line-height: 1.55;
}

.pass {
  color: var(--signal-deep);
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ ledger tables */

/* Wide tables scroll inside their own box rather than squeezing columns to nothing.
   The layered background is a scroll affordance: the edge shading only appears while
   there is more table to reach, and disappears at each end. */
.scroller {
  overflow-x: auto;
  border: 1px solid var(--rule);
  background:
    linear-gradient(to right, var(--sheet) 40%, rgba(251, 249, 244, 0)) left center,
    linear-gradient(to left, var(--sheet) 40%, rgba(251, 249, 244, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(18, 23, 20, .34), rgba(18, 23, 20, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(18, 23, 20, .34), rgba(18, 23, 20, 0)) right center,
    var(--sheet);
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 22px 100%, 22px 100%, auto;
  background-attachment: local, local, scroll, scroll, local;
  overscroll-behavior-x: contain;
}

/* Say it in words too, outside the scroll area so the hint cannot scroll out of view,
   and only at widths where the table actually clips. */
.scroll-hint {
  display: none;
  margin-top: 10px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.band--ink .scroll-hint { color: var(--on-ink-2); }

.scroll-hint::before {
  margin-right: 7px;
  content: "\2192";
}

@media (max-width: 620px) {
  .scroll-hint { display: block; }
}

@media (min-width: 621px) and (max-width: 760px) {
  .scroll-hint--wide { display: block; }
}

.band--ink .scroller {
  border-color: var(--rule-ink);
  background:
    linear-gradient(to right, var(--ink-field-2) 40%, rgba(27, 34, 30, 0)) left center,
    linear-gradient(to left, var(--ink-field-2) 40%, rgba(27, 34, 30, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)) right center,
    var(--ink-field-2);
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 22px 100%, 22px 100%, auto;
  background-attachment: local, local, scroll, scroll, local;
}

.scroller:focus-visible { outline-offset: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

/* Below the min-width the table scrolls sideways instead of crushing its columns:
   a record identifier that has broken across two lines is no longer an identifier. */
.scroller table { min-width: 33rem; }
.scroller--wide table { min-width: 41rem; }

caption {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}

thead th {
  border-bottom: 1px solid var(--ink);
  color: var(--ink-2);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Row headers read as content, not as a second header band. */
tbody th {
  font-weight: 650;
  text-align: left;
}

tbody tr:last-child td,
tbody tr:last-child th { border-bottom: 0; }

td b { font-weight: 650; }

td code,
th code {
  font-family: var(--mono);
  font-size: .87rem;
  white-space: nowrap;
}

.code {
  font-family: var(--mono);
  font-size: .87rem;
  overflow-wrap: anywhere;
}

.num { text-align: right; font-variant-numeric: tabular-nums; }

.band--ink caption { border-bottom-color: var(--rule-ink); color: var(--on-ink-2); }
.band--ink th { border-bottom-color: var(--on-ink); color: var(--on-ink); }
.band--ink td { border-bottom-color: var(--rule-ink); }

/* -------------------------------------------------------- provenance chain */

/* The 1px gap over a ruled background draws the hairlines, so the cells stay correctly
   divided in any column count without per-edge border rules to keep in sync. */
.chain {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--rule);
  background: var(--rule-soft);
  list-style: none;
  counter-reset: stage;
}

.chain li {
  position: relative;
  padding: 22px 20px 24px;
  background: var(--sheet);
  counter-increment: stage;
}

.chain li::before {
  display: block;
  margin-bottom: 14px;
  color: var(--ink-3);
  content: "STAGE " counter(stage, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .08em;
}

.chain__count {
  display: block;
  margin-bottom: 4px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.chain h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.chain p {
  color: var(--ink-3);
  font-size: .88rem;
  line-height: 1.6;
}

.chain__bar {
  display: block;
  height: 2px;
  margin-bottom: 14px;
  background: var(--rule);
  transform-origin: left center;
}

.chain li:last-child .chain__bar { background: var(--signal); }

/* Five stages divide evenly into one column or five, and nothing else — an intermediate
   2- or 3-column grid always leaves an orphan cell. So this compact row runs everywhere
   below the width where five columns are actually readable, which is the majority of
   laptops. At 1024px the old five-column grid gave each stage ~118px and turned one
   sentence into seven ragged lines. */
@media (max-width: 1279px) {
  .chain li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0 14px;
    padding: 17px 20px 19px;
  }

  .chain li::before {
    grid-column: 1 / -1;
    margin-bottom: 11px;
  }

  .chain__bar {
    grid-column: 1 / -1;
    margin-bottom: 13px;
  }

  .chain__count {
    grid-column: 1;
    margin-bottom: 0;
    font-size: 1.35rem;
  }

  .chain h3 {
    grid-column: 2;
    margin-bottom: 0;
  }

  .chain p {
    grid-column: 1 / -1;
    margin-top: 9px;
  }
}

/* 1280px is where the rail plus five columns still leaves ~198px per stage. */
@media (min-width: 1280px) {
  .chain { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .chain__bar {
    animation: draw .7s cubic-bezier(.2, .7, .3, 1) both;
  }

  .chain li:nth-child(1) .chain__bar { animation-delay: .05s; }
  .chain li:nth-child(2) .chain__bar { animation-delay: .16s; }
  .chain li:nth-child(3) .chain__bar { animation-delay: .27s; }
  .chain li:nth-child(4) .chain__bar { animation-delay: .38s; }
  .chain li:nth-child(5) .chain__bar { animation-delay: .49s; }

  @keyframes draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* ------------------------------------------------------------- field schema */

.fields {
  margin: 0;
  border-top: 1px solid var(--ink);
}

/* Extra air so the opening rule reads as the head of a list, not as an underline
   of the paragraph above it. */
.block__body > .fields { margin-top: clamp(24px, 3vw, 38px); }

.fields > div {
  display: grid;
  gap: 5px 22px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule-soft);
  grid-template-columns: minmax(0, 1fr);
}

.fields dt { min-width: 0; }

.fields dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-2);
  font-size: .93rem;
  line-height: 1.6;
}

.field__name {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.field__src {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .03em;
}

@media (min-width: 720px) {
  .fields > div { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ callout */

.callout {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  background: var(--sheet);
}

.band--ink .callout {
  border-color: var(--rule-ink);
  border-left-color: var(--signal-on-ink);
  background: var(--ink-field-2);
}

.callout h3 { margin-bottom: 8px; }

.callout p + p { margin-top: 10px; }

.stack > * + * { margin-top: clamp(14px, 1.6vw, 20px); }

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  position: relative;
  padding: 15px 0 15px 28px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  font-size: .96rem;
  line-height: 1.6;
}

.list li:last-child { border-bottom: 0; }

.list li::before {
  position: absolute;
  top: 15px;
  left: 0;
  color: var(--signal);
  content: "\2014";
  font-family: var(--mono);
}

.band--ink .list li {
  border-bottom-color: var(--rule-ink);
  color: var(--on-ink-2);
}

.band--ink .list li::before { color: var(--signal-on-ink); }

/* -------------------------------------------------------------------- stamp */

.stamp {
  display: inline-block;
  padding: 10px 16px;
  transform: rotate(-1.6deg);
  border: 2px solid var(--signal);
  color: var(--signal);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.band--ink .stamp {
  border-color: var(--signal-on-ink);
  color: var(--signal-on-ink);
}

/* --------------------------------------------------------- two-column split */

.split {
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.actions--spaced { margin-top: clamp(20px, 2.4vw, 28px); }

.steps {
  max-width: 38em;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--ink-2);
  line-height: 1.65;
  counter-reset: none;
}

.steps li + li { margin-top: 11px; }

.foot__note--flush {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tag {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--live {
  border-color: var(--signal);
  color: var(--signal-deep);
}

.tag--off {
  border-style: dashed;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ contact */

.contact__mail {
  display: inline-block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.24rem, 1.02rem + 1.1vw, 1.85rem);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.band--ink .contact__mail {
  color: var(--on-ink);
  text-decoration-color: var(--signal-on-ink);
}

.byline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--rule-ink);
}

.byline b {
  font-size: 1rem;
  font-weight: 700;
}

/* ------------------------------------------------------------------- footer */

.foot {
  padding: clamp(34px, 4vw, 52px) 0 26px;
  border-top: 1px solid var(--ink);
  background: var(--paper-shade);
}

.foot__grid {
  display: grid;
  gap: 26px clamp(24px, 3vw, 48px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .foot__grid { grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, .95fr)); }
}

.foot h2 {
  margin-bottom: 12px;
  font-size: var(--micro);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

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

.foot li + li { margin-top: 10px; }

.foot a {
  color: var(--ink-2);
  font-size: .93rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.foot a:hover {
  border-bottom-color: var(--signal);
  color: var(--ink);
}

.foot__note {
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: var(--small);
  line-height: 1.6;
}

.foot__note p { max-width: 62em; }
.foot__note p + p { margin-top: 10px; }

.foot__legal {
  display: flex;
  justify-content: space-between;
  gap: 6px 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- page header */

.page-head {
  padding: clamp(30px, 4vw, 58px) 0 clamp(26px, 3.4vw, 46px);
  border-bottom: 1px solid var(--ink);
}

.page-head h1 { margin-block: 14px 16px; }

.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: clamp(38px, 4vw, 56px); }
.prose h3 { margin-top: clamp(26px, 2.8vw, 36px); }

.prose ul,
.prose ol {
  max-width: 38em;
  padding-left: 1.15rem;
  color: var(--ink-2);
  line-height: 1.65;
}

.prose li + li { margin-top: 9px; }

.prose a { color: var(--ink); }

/* ---------------------------------------------------------------------- 404 */

.gone {
  display: flex;
  min-height: 58vh;
  align-items: center;
  padding: clamp(48px, 8vw, 110px) 0;
}

.gone__grid {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  grid-template-columns: minmax(0, 1fr);
}

.gone h1 { margin-block: 16px 18px; }

@media (min-width: 820px) {
  .gone__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

/* ------------------------------------------------------------------- motion */

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

/* -------------------------------------------------------------------- print */

@media print {
  :root { --paper: #fff; --paper-shade: #fff; --sheet: #fff; }

  body { color: #000; font-size: 11pt; }

  .masthead nav,
  .actions,
  .skip { display: none; }

  .band,
  .hero { padding-block: 14pt; }

  .band--ink {
    background: #fff;
    color: #000;
  }

  .band--ink .meta,
  .band--ink .lede,
  .band--ink .prose p,
  .band--ink .list li { color: #000; }

  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: 8pt;
  }

  .chain,
  .scroller,
  .record { border-color: #000; }
}