@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Sans";
  src: url("/assets/fonts/sofia-sans-latin.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  src: url("/assets/fonts/sofia-sans-extra-condensed-latin.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --card: #ffffff;
  --ink: #1c2333;
  --ink-soft: #485268;
  --rule: #b9cde6;
  --rule-strong: #7f9cc2;
  --band: #eef3fa;
  --link: #1f4e8c;
  --margin-red: #c4302b;
  --label-w: 13rem;
  --gutter: 2.25rem;
  --measure: 68ch;
  --read: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Sofia Sans", "Segoe UI", Arial, sans-serif;
  --cond: "Sofia Sans Extra Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  color-scheme: light;
}

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

html {
  background: var(--card);
  color: var(--ink);
  scrollbar-color: var(--rule-strong) var(--band);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--read);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--link); text-decoration-thickness: 2px; }
a:focus-visible, .skip:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 1px;
}

/* bell line: the first line of the body */
.bell {
  margin: 0;
  padding: 0.55rem max(1.5rem, calc((100% - 76rem) / 2 + 1.5rem));
  background: var(--band);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  color: var(--link);
  font-family: var(--sans);
  z-index: 2;
}
.skip:focus { top: 0.5rem; }

/* nav */
.nav {
  border-bottom: 1px solid var(--rule);
}
.nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  max-width: 76rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
}
.nav a { text-decoration-color: transparent; color: var(--ink); }
.nav a:hover { text-decoration-color: var(--link); color: var(--link); }

/* the record sheet: one red margin rule runs the whole sheet */
.sheet {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(1.5rem + var(--label-w) + var(--gutter) / 2);
  width: 1px;
  border-left: 2px solid var(--margin-red);
  pointer-events: none;
}

.row {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  column-gap: var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.row > .label {
  margin: 0;
  padding: 1.55rem 0 1.2rem;
  font-family: var(--cond);
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}
.row > .text {
  padding: 1.25rem 0 1.4rem;
  max-width: var(--measure);
}
.text p { margin: 0; }
.text * + p { margin-top: 0.85em; }

/* record head */
.head {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr) auto;
  grid-template-areas:
    ". title stamp"
    ". lede stamp";
  column-gap: var(--gutter);
  padding-top: 2.4rem;
  padding-bottom: 1.8rem;
  border-bottom: 2px solid var(--ink);
}
.head h1 {
  grid-area: title;
  margin: 0 0 1.1rem;
  font-family: var(--cond);
  font-weight: 760;
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.25rem);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.head .lede {
  grid-area: lede;
  margin: 0;
  max-width: var(--measure);
  font-size: 1.1875rem;
  line-height: 1.58;
}
.stamp {
  grid-area: stamp;
  align-self: start;
  margin-top: 0.4rem;
  padding: 0.55rem 0.8rem 0.6rem;
  border: 2px solid var(--margin-red);
  outline: 1px solid var(--margin-red);
  outline-offset: 3px;
  color: var(--margin-red);
  font-family: var(--cond);
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-2deg);
  max-width: 13.5rem;
}
.stamp strong {
  display: block;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
.stamp span {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
}

/* field details */
.text h3 {
  margin: 1.4em 0 0.35em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.terms {
  margin: 0.4rem 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
}
.terms dt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9375rem;
  padding-top: 0.12rem;
}
.terms dd { margin: 0; }

.shelved { display: none; }

/* appendix */
.blocks {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.appendix { padding-bottom: 1rem; }
/* each table block is a record field: its range sits in the margin column, the rows in the text column */
.block {
  content-visibility: auto;
  contain-intrinsic-size: auto 98000px;
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  padding-top: 1.6rem;
}
.block > * { grid-column: 2; }

.block-head {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-top: 0.3rem;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
}

table.spacing {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  max-width: 40rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.32;
  font-variant-numeric: tabular-nums lining-nums;
}
table.spacing caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.45rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
table.spacing th {
  position: static;
  padding: 0.35rem 0.6rem 0.35rem 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--cond);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  vertical-align: bottom;
}
table.spacing td {
  padding: 0.12rem 0.6rem 0.12rem 0;
  border-bottom: 1px solid var(--band);
  text-align: right;
}
table.spacing td:first-child, table.spacing th:first-child { color: var(--ink-soft); }
/* one column grid for every segment, so the columns do not jog at a note */
table.spacing th:nth-child(1) { width: 15%; }
table.spacing th:nth-child(2) { width: 21%; }
table.spacing th:nth-child(3) { width: 14%; }
table.spacing th:nth-child(4) { width: 24%; }
table.spacing th:nth-child(5) { width: 26%; }

.note {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 1rem;
  max-width: 40rem;
  margin: 1.1rem 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.note b {
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.08rem;
}
.note span { font-family: var(--read); }

/* footer: a ruled credit block locked to the foot */
.credit {
  max-width: 76rem;
  margin: 3rem auto 0;
  padding: 0 1.5rem 2.5rem;
}
.credit-inner {
  border-top: 3px double var(--ink);
  padding-top: 1.1rem;
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  column-gap: var(--gutter);
}
.credit .label {
  margin: 0;
  padding-top: 0.2rem;
  font-family: var(--cond);
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-soft);
}
.credit p { margin: 0 0 0.4rem; max-width: var(--measure); font-family: var(--sans); font-size: 0.9375rem; }
.credit p.lead { font-weight: 600; }

@media (max-width: 760px) {
  :root { --label-w: 0rem; --gutter: 0rem; }
  .bell { padding: 0.55rem 1rem; }
  .nav ul { padding: 0.6rem 1rem; gap: 0.3rem 1.1rem; }
  .sheet { padding: 0 1rem 0 1.85rem; }
  .sheet::before { left: 0.9rem; }
  .row { display: block; }
  .row > .label { text-align: left; padding: 1.25rem 0 0; }
  .row > .text { padding: 0.45rem 0 1.25rem; }
  .head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "stamp" "lede";
    padding-top: 1.4rem;
  }
  .block { display: block; padding-top: 1.4rem; }
  .block-head { text-align: left; padding: 0 0 0.5rem; }
  .stamp { justify-self: start; margin: 0 0 1.1rem 0.2rem; }
  .head .lede { font-size: 1.0625rem; }
  .terms { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .terms dd { margin-bottom: 0.5rem; }
  table.spacing { font-size: 0.875rem; }
  table.spacing th { font-size: 0.85rem; letter-spacing: 0.03em; }
  .credit { padding: 0 1rem 2rem; }
  .credit-inner { display: block; }
  .credit .label { text-align: left; margin-bottom: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}