/* Ordelvio sites: the state register.

   One system for ordelvio.com and the four line sites. Every Ordelvio name
   is a plane, and the material of the plane states how far that name has
   come: solid cream is a live line, part solid is in preparation, hatched
   is planned and a dashed outline is a reserved name. The master brand is a
   flat dark plane carrying the symbol, the only coloured object on a page.
   The same four materials appear on the ordelvio.com map, in each line
   site's hero plane and ledger, in the Textile catalogue and in the closing
   family bar, so a material means one state on all five sites.

   Type: Jost (display and text) and JetBrains Mono (labels, ledgers,
   domains). tools/build.py copies into each build only the families named
   in a font-family declaration here, with their licence files.

   The templates in src/templates/ and the markup written by tools/build.py
   use these class names; change them together. No page may carry a style
   attribute: everything visual lives in this file. */

:root {
  --field: #0e0d0f;
  --field-2: #151417;
  --ink: #ece5dd;
  --ink-2: #a8a098;
  --ink-3: #8a837c;
  --line: rgba(236, 229, 221, 0.14);
  --line-2: rgba(236, 229, 221, 0.3);
  --plane: #ebe3d8;
  --plane-ink: #19171a;
  --plane-ink-2: #4d4845;
  --hatch: rgba(236, 229, 221, 0.24);
  --hatch-image: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 8px);
  --hatch-fine: repeating-linear-gradient(135deg, rgba(236, 229, 221, 0.42) 0 1.25px, transparent 1.25px 4.5px);
  --display: "Jost", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4.4vw, 64px);
  --max: 1440px;
  --gap: 6px;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--field);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--field);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

h1,
h2,
h3 {
  font-weight: 400;
  text-wrap: balance;
}

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

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

main:focus {
  outline: none;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--plane);
  color: var(--plane-ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

.skip-link:focus-visible {
  outline-color: var(--plane-ink);
  outline-offset: -5px;
}

/* Mono labels share one voice: small, tracked, upper case. */
.eyebrow,
.site-nav a,
.site-header__family,
.ledger dt,
.idx,
.state,
.rail,
.axis,
.legend,
.counts dt,
.topic__idx,
.terms dt,
.plane__meta,
.plane__key,
.field__idx,
.field__state,
.fields__count,
.stance__more a,
.family__name,
.fonts__licence,
.fonts a,
.site-footer h2,
.site-footer__more,
.site-footer__end,
.nf__links a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--ink-2);
}

/* State swatches: the four materials in miniature. */
.sw {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 16px;
}

.sw--master {
  background: var(--field-2);
  border: 1px solid var(--line-2);
}

.sw--live {
  background: var(--plane);
}

/* Materials are clipped to the padding box: a hatch never shows through a
   translucent border, so every edge reads as one clean line. */
.sw--prep {
  border: 1px solid var(--line-2);
  background: linear-gradient(to top, var(--plane) 0 50%, transparent 50%) padding-box no-repeat, var(--hatch-fine) padding-box;
}

.sw--planned {
  border: 1px solid var(--line-2);
  background: var(--hatch-fine);
  background-clip: padding-box;
}

.sw--reserved {
  border: 1px dashed var(--ink-3);
}

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

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
}

.lockup {
  display: block;
  flex: none;
  width: clamp(148px, 14vw, 204px);
  padding: 6px 0;
}

.site:not(.site--ordelvio) .lockup {
  width: clamp(168px, 16vw, 232px);
}

.lockup:focus-visible {
  outline-offset: 6px;
}

.site-header__meta {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header__family {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__family:hover {
  color: var(--ink);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav li:last-child a {
  padding-right: 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Ledger strip on the line sites: true fields only, ruled on the dark field. */
.ledger {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 28px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
}

.ledger__cell {
  min-width: 0;
  padding: 13px 16px 14px;
  border-left: 1px solid var(--line);
}

.ledger__cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.ledger dt {
  color: var(--ink-3);
  font-size: 11px;
}

.ledger dd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.ledger .sw {
  width: 20px;
  height: 13px;
}

/* ---------------------------------------------------------------- intro and hero */

.intro,
.hero,
.page-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

.intro {
  padding-block: clamp(64px, 8.5vw, 128px) clamp(40px, 5vw, 64px);
  align-items: end;
}

.intro .eyebrow,
.page-intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 28px;
}

.intro h1,
.hero h1,
.page-intro h1,
.nf h1 {
  font-weight: 300;
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.intro h1 {
  grid-column: 1 / span 8;
}

.lede {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.55;
}

.intro .lede {
  grid-column: 9 / -1;
  max-width: 36ch;
}

.hero {
  padding-block: clamp(56px, 7vw, 104px) clamp(72px, 8vw, 120px);
  align-items: stretch;
}

.hero__text {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
}

.hero__text .eyebrow {
  margin-bottom: 28px;
}

.hero .lede {
  margin-top: auto;
  padding-top: 40px;
  max-width: 44ch;
}

/* A drawing of the line's subject under the headline (Textile's folded edge). */
.hero__figure {
  margin-top: clamp(32px, 3.4vw, 48px);
  max-width: 780px;
}

/* Under 1440 px the hero column is too narrow for the labelled drawing; the
   cropped, keyed drawing is kept small so the hero stays one screen tall. */
@media (max-width: 1439px) {
  .hero__figure {
    max-width: 480px;
  }
}

.hero__plane {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
}

.page-intro {
  padding-block: clamp(64px, 8vw, 120px) clamp(24px, 3vw, 40px);
}

.page-intro h1 {
  grid-column: 1 / span 8;
}

.page-intro .lede {
  grid-column: 1 / span 7;
  margin-top: 28px;
  max-width: 48ch;
}

/* The hero plane: the line's own state material as its signature. */
.plane {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(360px, 31vw, 460px);
  padding: 20px;
}

.plane__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-2);
}

.plane__meta .plane__domain {
  text-transform: none;
  letter-spacing: 0;
}

.plane__state {
  margin-top: 22px;
  font-weight: 300;
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.plane__foot p {
  font-size: 15px;
  line-height: 1.5;
  max-width: 34ch;
}

.plane__key {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 11px;
}

.plane--prep {
  border: 1px solid var(--line-2);
  background: var(--hatch-image);
  background-clip: padding-box;
}

.plane--prep .plane__foot {
  display: flex;
  align-items: flex-end;
  min-height: 42%;
  margin: 0 -20px -20px;
  padding: 20px;
  background: var(--plane);
  color: var(--plane-ink-2);
}

.plane--prep .plane__foot a:focus-visible {
  outline-color: var(--plane-ink);
}

.plane--planned {
  border: 1px solid var(--line-2);
  background: var(--hatch-image);
  background-clip: padding-box;
}

.plane--planned .plane__foot {
  margin: 0 -9px -9px;
  padding: 14px 11px 11px;
  background: var(--field);
  color: var(--ink-2);
}

.plane--planned .plane__meta span,
.plane--prep .plane__meta span {
  background: var(--field);
  padding: 2px 6px;
  margin: -2px -6px;
}

.plane--reserved {
  border: 1.5px dashed var(--ink-3);
}

.plane--reserved .plane__state {
  color: var(--ink-2);
}

.plane--reserved .plane__foot {
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- the ordelvio.com map */

/* The rail and the axis use the band's own columns, so their brackets and ends
   stand exactly over and under the planes and the gaps between them. */
.rail,
.axis {
  display: grid;
  grid-template-columns: 1.75fr repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}

.rail {
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--ink-3);
}

.rail__lines,
.axis__track {
  grid-column: 2 / -1;
}

.rail__master,
.rail__lines {
  position: relative;
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
}

.rail__lines::before,
.rail__lines::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 1px;
  height: 8px;
  background: var(--line-2);
}

.rail__lines::before {
  left: 0;
}

.rail__lines::after {
  right: 0;
}

.band {
  display: grid;
  grid-template-columns: 1.75fr repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  min-height: clamp(500px, 40vw, 600px);
}

.col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 20px 14px 20px;
}

.col h3 {
  margin-top: 18px;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

.col-link {
  text-decoration: none;
}

/* The whole plane is the link target; its focus ring sits just outside the plane. */
.col-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.col-link:focus-visible {
  outline: none;
}

.col-link:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.col .dom {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.col:hover .dom {
  text-decoration-thickness: 2px;
}

.col .state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.col .note {
  font-size: 15px;
  line-height: 1.45;
}

.idx {
  color: var(--ink-2);
}

.col--master {
  border: 1px solid var(--line);
  background: var(--field-2);
}

.col--master .col-head {
  display: flex;
  flex-direction: column;
}

/* The symbol file carries its own clear space (the mark fills about two
   thirds of the square), so the image spans the plane edge to edge and the
   mark lands near 190 px wide at 1440 px, with even space on every side. */
.col-symbol {
  width: calc(100% + 28px);
  max-width: 320px;
  margin: 12px -14px 8px;
  align-self: center;
}

.col--master h3 {
  margin-top: 0;
  font-weight: 300;
  font-size: clamp(32px, 2.9vw, 44px);
  letter-spacing: -0.015em;
}

.col--master .dom {
  color: var(--ink-2);
  margin-bottom: 18px;
  text-decoration: none;
}

.col--master .note {
  color: var(--ink-2);
  max-width: 32ch;
}

.col--live {
  background: var(--plane);
  color: var(--plane-ink);
}

.col--live .idx,
.col--live .note {
  color: var(--plane-ink-2);
}

.col--live a:focus-visible {
  outline-color: var(--plane-ink);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.col--prep {
  border: 1px solid var(--line-2);
  background: var(--hatch-image);
  background-clip: padding-box;
}

.col--prep .col-foot {
  min-height: 44%;
  margin: 0 -14px -20px;
  padding: 16px 14px 20px;
  background: var(--plane);
  color: var(--plane-ink);
}

.col--prep .col-foot .note {
  color: var(--plane-ink-2);
}

.col--prep .col-foot a:focus-visible {
  outline-color: var(--plane-ink);
}

.col--planned {
  border: 1px solid var(--line-2);
  background: var(--hatch-image);
  background-clip: padding-box;
}

.col--planned .col-foot,
.col--reserved .col-foot {
  margin: 0 -8px -12px;
  padding: 12px 8px 12px;
  background: var(--field);
}

.col--planned .idx,
.col--prep .idx {
  align-self: flex-start;
  background: var(--field);
  padding: 2px 6px;
  margin: -2px -6px;
}

/* Domains on a hatched plane sit on a small knockout so the hatch never crosses them. */
.col--planned .dom,
.col--prep .col-head .dom {
  align-self: flex-start;
  max-width: calc(100% + 12px);
  margin: 8px -6px 0;
  padding: 2px 6px;
  background: var(--field);
}

.col--planned .note,
.col--reserved .note {
  color: var(--ink-2);
}

.col--reserved {
  border: 1.5px dashed var(--ink-3);
}

.col--reserved h3 {
  color: var(--ink-2);
}

.col-head {
  display: flex;
  flex-direction: column;
}

.axis {
  margin-top: 22px;
  color: var(--ink-3);
}

.axis__track {
  display: flex;
  align-items: center;
  gap: 16px;
}

.axis__line {
  position: relative;
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line-2), var(--line));
}

.axis__line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  transform: rotate(45deg);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin-top: 20px;
  color: var(--ink-2);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------------------------------------------------------------- counts */

.counts {
  padding-top: clamp(80px, 8vw, 128px);
}

.counts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.counts__list > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 24px 4px;
  border-left: 1px solid var(--line);
}

.counts__list > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.counts dd {
  font-weight: 200;
  font-size: clamp(64px, 8.5vw, 136px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}

.counts dt {
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- content topics */

.topics {
  padding-top: clamp(40px, 5vw, 72px);
}

.topic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  padding-block: clamp(48px, 5.5vw, 80px);
}

.topic::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  height: 1px;
  margin-top: calc(-1 * clamp(48px, 5.5vw, 80px));
  background: var(--line);
}

.topic__head {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.topic__idx {
  color: var(--ink-3);
  margin-bottom: 16px;
}

.topic__head h2 {
  font-weight: 300;
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.topic__body {
  grid-column: 6 / -1;
  grid-row: 1;
  max-width: 64ch;
}

.topic__body > p {
  color: var(--ink-2);
}

.topic__body > p + p {
  margin-top: 16px;
}

.topic__body > p:first-child {
  color: var(--ink);
  font-weight: 300;
  font-size: clamp(19px, 1.65vw, 24px);
  line-height: 1.42;
}

.topic__body > p:first-child + p {
  margin-top: 20px;
}

.topic__body a:not([class]) {
  color: var(--ink);
}

.terms {
  margin-top: 32px;
  border-bottom: 1px solid var(--line);
}

.terms > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.terms dt {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: start;
  padding-top: 4px;
  color: var(--ink-3);
}

.terms dd {
  color: var(--ink-2);
}

.statements li + li {
  margin-top: 0;
}

.topic__body .statements {
  margin-top: 28px;
  border-bottom: 1px solid var(--line);
}

.topic__body .statements li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

/* Topic with a figure: text on the left, drawing on the right. */
.topic--figure {
  grid-template-rows: auto 1fr;
}

.topic--figure .topic__head,
.topic--figure .topic__body {
  grid-column: 1 / span 4;
}

.topic--figure .topic__body {
  grid-row: 2;
  margin-top: 28px;
}

.topic__figure {
  grid-column: 6 / -1;
  grid-row: 1 / span 2;
  align-self: center;
}

/* The folded-edge cross-section (sites/textile/figure-folded-edge.html).
   The figure is its own size container: the drawing's SVG labels need 750 px
   of drawing width to stay at 12.5 px or more, so a narrower figure swaps
   them for an HTML key, wherever the figure stands. */
.xs {
  container: xs / inline-size;
  overflow: hidden;
}

.xs__drawing {
  width: 100%;
}

.xs__outer,
.xs__lining {
  fill: none;
  stroke-linecap: square;
}

.xs__outer {
  stroke: var(--ink);
  stroke-width: 3;
}

.xs__lining {
  stroke: var(--ink-2);
  stroke-width: 2;
}

.xs__inter {
  fill: var(--plane);
}

.xs__guides {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.25;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.xs__leaders {
  fill: var(--ink-2);
  stroke: var(--ink-3);
  stroke-width: 1;
}

.xs__labels {
  fill: var(--ink-2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xs__label-key {
  fill: var(--ink);
}

.xs__label-soft {
  fill: var(--ink-3);
}

.xs__key {
  display: none;
}

.xs__caption {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 15px;
}

/* The catalogue before it exists: planned fields, each a small hatched plane. */
.fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(40px, 4vw, 56px);
}

/* Every cell has the same hatched head and its knockout body fills the rest,
   so the terms of a row start on one line however their text wraps. */
.field {
  display: grid;
  grid-template-rows: 72px 1fr;
  gap: 0;
  min-height: 248px;
  padding: 16px;
  border: 1px solid var(--line-2);
  background: var(--hatch-image);
  background-clip: padding-box;
}

.field__idx {
  justify-self: start;
  align-self: start;
  padding: 2px 6px;
  margin: -2px -6px;
  background: var(--field);
  color: var(--ink-2);
}

.field__body {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  margin: 0 -8px -8px;
  padding: 14px 12px 12px;
  background: var(--field);
}

.field__term {
  font-size: 19px;
  line-height: 1.2;
}

.field__unit {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.field__text {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
}

.field__state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--ink-2);
  font-size: 11px;
}

/* A solid leader: the dashed stroke belongs to reserved names only. */
.field__state::before {
  content: "";
  width: 28px;
  border-top: 1px solid var(--ink-3);
}

.fields__count {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- what it is, is not, fraud warning */

.stance {
  padding-block: clamp(72px, 8vw, 128px);
}

.stance__title {
  margin-bottom: 32px;
}

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

.stance__col {
  padding: 28px 32px 0 0;
  border-top: 1px solid var(--line-2);
}

.stance__col--fraud {
  border-top: 2px solid var(--ink);
}

.stance__col h2,
.stance__col h3 {
  margin-bottom: 20px;
  font-weight: 300;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.stance .statements li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
}

.stance .statements li:first-child {
  border-top: 0;
  padding-top: 0;
}

.stance .statements .statements__key {
  color: var(--ink);
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.35;
}

.stance__more {
  margin-top: 36px;
}

.stance__more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
}

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

.page-intro + .stance {
  padding-top: clamp(40px, 5vw, 72px);
}

/* ---------------------------------------------------------------- About: privacy, contact, credits */

.topics--about {
  padding-top: 0;
}

.topic--about .topic__head h2 {
  font-size: clamp(28px, 2.7vw, 42px);
}

.topic__body > p.topic__lead {
  color: var(--ink);
}

.topic__body > p.topic__lead--mail {
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.topic__lead--mail a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.fonts {
  margin-top: 28px;
  border-bottom: 1px solid var(--line);
}

.fonts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 28px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.fonts__name {
  font-size: 20px;
  font-weight: 300;
}

.fonts__licence {
  color: var(--ink-3);
}

.fonts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}

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

.nf {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
  padding-block: clamp(72px, 10vw, 160px);
}

.nf__code {
  grid-column: 1 / span 6;
  font-weight: 200;
  font-size: clamp(120px, 19vw, 300px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.nf__text {
  grid-column: 7 / -1;
}

.nf__text .eyebrow {
  margin-bottom: 24px;
}

.nf h1 {
  font-size: clamp(34px, 3.6vw, 56px);
}

.nf .lede {
  margin-top: 24px;
  max-width: 40ch;
}

.nf__links {
  display: flex;
  gap: 8px 32px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.nf__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------------------------------------------------------------- family bar (line sites) */

.family {
  padding-top: clamp(24px, 3vw, 48px);
}

.family__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding-block: 28px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.family__list {
  display: flex;
  gap: var(--gap);
}

.family__item {
  display: flex;
  flex-direction: column;
  width: 88px;
}

.family__sw {
  width: 88px;
  height: 40px;
  margin-bottom: 10px;
}

/* The master swatch is the master plane in miniature: the symbol, whose file
   carries its own clear space, centred at natural proportions. */
.family__sw.sw--master {
  display: flex;
  justify-content: center;
}

.family__symbol {
  width: auto;
  height: 100%;
}

.family__name {
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.family__state {
  margin-top: 3px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.family__item.is-current .family__sw {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.family__item.is-current .family__name {
  color: var(--ink);
}

.family__link a {
  display: inline-block;
  padding-block: 8px;
  font-weight: 300;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.family__link a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-0.08em) rotate(45deg);
}

.family__link a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

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

.site-footer {
  margin-top: clamp(24px, 3vw, 48px);
  padding-block: 0 36px;
}

.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 48px;
  background: var(--line);
}

/* After the family bar's own rule, the footer needs no second one. */
.family + .site-footer::before {
  height: 0;
  margin-bottom: 24px;
}

.site-footer .site-footer__notice {
  color: var(--ink);
  max-width: 38ch;
  margin-bottom: 56px;
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.site-footer h2 {
  margin-bottom: 12px;
  color: var(--ink-3);
}

.site-footer p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

.site-footer__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 11px;
}

.site-footer__more:hover {
  color: var(--ink);
}

.site-footer__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 18px;
}

.site-footer__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  color: var(--ink-3);
}

/* Domains keep their lowercase form inside the upper-case mono labels. */
.site-footer__end > span:first-child,
.page-intro .eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
}

.site-footer__end a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
}

.site-footer__end a:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- wide screens */

@media (min-width: 1920px) {
  :root {
    --max: 1720px;
  }

  .band {
    min-height: 640px;
  }
}

/* ---------------------------------------------------------------- the register's key row, above 900 px

   Each plane is a three-row subgrid (head, free space, foot) of the band, so
   the feet of every plane in a row start on one line and the state words
   (Live, In preparation, Planned, Reserved) read as one ledger line. The
   part-solid Textile foot fills the same foot row as the others. */

@media (min-width: 901px) {
  .band {
    grid-template-rows: auto 1fr auto;
  }

  .col {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: normal;
    row-gap: 0;
  }

  .col-head {
    grid-row: 1;
  }

  .col-foot {
    grid-row: 3;
  }

  .col:not(.col--master) .col-foot {
    padding-top: 14px;
  }

  .col--prep .col-foot {
    min-height: 0;
  }
}

/* ---------------------------------------------------------------- 1320 to 1439 px (for example 1366 laptops)

   A slightly narrower master column and 10 px plane padding give every line
   column room for its whole domain on one line. */

@media (min-width: 1320px) {
  .col .note {
    font-size: 14px;
    text-wrap: balance;
  }
}

@media (min-width: 1320px) and (max-width: 1439px) {
  .rail,
  .axis {
    grid-template-columns: 1.4fr repeat(6, minmax(0, 1fr));
  }

  .band {
    grid-template-columns: 1.4fr repeat(6, minmax(0, 1fr));
  }

  .col {
    padding-inline: 10px;
  }

  .col-symbol {
    width: calc(100% + 20px);
    margin-inline: -10px;
  }

  .col--prep .col-foot {
    margin: 0 -10px -20px;
    padding-inline: 10px;
  }
}

/* ---------------------------------------------------------------- tablet: 901 to 1319 px

   The register stays one block: the master plane stands beside the six line
   planes (two rows of three), so the first row of state words is on the
   first screen of a laptop. */

@media (max-width: 1319px) {
  .rail {
    display: none;
  }

  .band,
  .axis {
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  }

  .band {
    grid-template-rows: repeat(2, auto 1fr auto);
    min-height: 0;
  }

  .col {
    min-height: 260px;
  }

  .col--master {
    grid-column: 1;
    grid-row: 1 / span 6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* The folded-edge figure stands under its text at a width where its labels stay legible. */
  .topic--figure {
    grid-template-rows: auto;
  }

  .topic--figure .topic__head {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .topic--figure .topic__body {
    grid-column: 6 / -1;
    grid-row: 1;
    margin-top: 0;
  }

  .topic__figure {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    width: 100%;
    max-width: 780px;
    margin-top: clamp(40px, 4vw, 56px);
  }
}

@media (max-width: 1100px) {
  .intro h1,
  .intro .lede,
  .page-intro h1,
  .page-intro .lede {
    grid-column: 1 / -1;
  }

  .intro .lede {
    margin-top: 28px;
    max-width: 58ch;
  }

  .hero__text {
    grid-column: 1 / span 7;
  }

  .hero__plane {
    grid-column: 8 / -1;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hero__text,
  .hero__plane {
    grid-column: 1 / -1;
  }

  .hero .lede {
    margin-top: 32px;
    padding-top: 0;
  }

  .hero__plane {
    margin-top: 48px;
  }

  .plane {
    min-height: 300px;
  }

  .ledger {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
  }

  .ledger__cell,
  .ledger__cell:first-child {
    padding: 12px 12px 13px 0;
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }

  /* A partial last row is filled by its last cell, so every row rule runs full width. */
  .ledger__cell:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }

  .ledger__cell:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .band,
  .axis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .axis__track {
    grid-column: 1 / -1;
  }

  .band {
    grid-template-rows: none;
  }

  .col {
    min-height: 300px;
  }

  .legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  .col--master {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
    min-height: 0;
  }

  .col--master .col-head {
    align-self: stretch;
  }

  .col-symbol {
    width: 240px;
    margin: 8px 0 -8px -20px;
  }

  .col--master .col-foot {
    max-width: 44rem;
  }

  .col--master .note {
    max-width: 48ch;
  }

  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field {
    min-height: 208px;
  }

  .topic__head,
  .topic__body,
  .topic--figure .topic__head,
  .topic--figure .topic__body,
  .topic__figure {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .topic__body,
  .topic--figure .topic__body {
    margin-top: 24px;
  }

  .topic__figure {
    margin-top: 40px;
  }

  .stance__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Heading above body, as in the About topics below, so every text column starts at one x. */
  .stance__col {
    padding-right: 0;
  }

  .nf__code,
  .nf__text {
    grid-column: 1 / -1;
  }

  .nf__text {
    margin-top: 48px;
  }

  .family__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------- the register's key row, 641 to 900 px

   Below the master row the six line planes stand in two rows of three; each
   is again a three-row subgrid, so the state words of a row share one line. */

@media (min-width: 641px) and (max-width: 900px) {
  .band {
    grid-template-rows: auto repeat(2, auto 1fr auto);
  }

  .col:not(.col--master) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .col:not(.col--master) .col-head {
    grid-row: 1;
  }

  .col:not(.col--master) .col-foot {
    grid-row: 3;
    padding-top: 14px;
  }

  .col--prep .col-foot {
    min-height: 0;
  }
}

/* ---------------------------------------------------------------- the folded-edge figure under 750 px

   Below 750 px of drawing width its SVG labels would fall under 12.5 px, so
   the labels give way to an HTML key and the drawing is cropped to its layers. */

@container xs (max-width: 749px) {
  /* Without its labels the drawing is shown from the layer ends to the fold guide (x 200 to 720 of 780). */
  .xs__drawing {
    width: 150%;
    max-width: none;
    margin-left: -38.5%;
  }

  .xs__labels,
  .xs__leaders {
    display: none;
  }

  .xs__key {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  .xs__key-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .xs__key-item::before {
    content: "";
    width: 22px;
  }

  .xs__key-item--outer::before {
    border-top: 3px solid var(--ink);
  }

  .xs__key-item--inter::before {
    height: 10px;
    background: var(--plane);
  }

  .xs__key-item--lining::before {
    border-top: 2px solid var(--ink-2);
  }
}

/* ---------------------------------------------------------------- header: 700 px and below

   The lockup takes its own row; on the line sites the family label stands as
   a small line above the nav row, which spans the width. */

@media (max-width: 700px) {
  .site-header__bar {
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
  }

  .site-header__meta {
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--line);
  }

  .site-header__family {
    width: 100%;
    min-height: 40px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 11px;
  }

  .site-nav {
    width: 100%;
  }

  .site-nav ul {
    gap: 0;
    justify-content: space-between;
  }

  .site-nav li:first-child a {
    padding-left: 0;
  }
}

/* ---------------------------------------------------------------- phone: 640 px and below */

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .lede {
    font-size: 17px;
  }

  .ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
  }

  .ledger dd {
    font-size: 13px;
  }

  .ledger__cell:last-child:nth-child(n) {
    grid-column: auto;
  }

  .ledger__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* A headline's sentences each start a line, so parallel phrases are never split. */
  .h1-part {
    display: block;
  }

  .intro {
    padding-block: 56px 36px;
  }

  .intro .eyebrow,
  .page-intro .eyebrow {
    margin-bottom: 20px;
  }

  .hero {
    padding-block: 48px 48px;
  }

  .hero__text .eyebrow {
    margin-bottom: 20px;
  }

  .hero__plane {
    margin-top: 40px;
  }

  .plane {
    min-height: 260px;
    padding: 16px;
  }

  .plane--prep .plane__foot {
    margin: 0 -16px -16px;
    padding: 16px;
  }

  /* 8 px between planes keeps dark field on every side of a focused plane's ring. */
  .band {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .col {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 16px 18px;
  }

  .col h3 {
    margin-top: 8px;
    font-size: 22px;
  }

  .col .dom {
    font-size: 13px;
  }

  /* The symbol sits beside the name, domain and state; the note spans the plane below. */
  .col--master {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: start;
  }

  .col--master .col-head {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .col--master .col-foot {
    display: contents;
  }

  .col--master h3,
  .col--master .dom,
  .col--master .state {
    grid-column: 2;
  }

  .col--master h3 {
    grid-row: 1;
    align-self: end;
  }

  .col--master .dom {
    grid-row: 2;
    margin: 6px 0 0;
  }

  .col--master .state {
    grid-row: 3;
    margin: 12px 0 0;
  }

  .col--master .note {
    grid-column: 1 / -1;
    grid-row: 4;
    max-width: none;
    margin-top: 14px;
  }

  .col-symbol {
    width: 124px;
    margin: 0 0 0 -8px;
  }

  .col--master h3 {
    font-size: 32px;
  }

  .col--prep .col-foot {
    min-height: 0;
    margin: 4px -16px -18px;
    padding: 14px 16px 18px;
  }

  .col--planned .col-foot,
  .col--reserved .col-foot {
    margin: 0 -8px -10px;
    padding: 10px 8px 10px;
  }

  .col .state {
    margin-bottom: 6px;
  }

  .axis {
    margin-top: 16px;
  }

  .legend {
    font-size: 11px;
  }

  .counts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .counts__list > div {
    padding: 20px 0 24px 16px;
  }

  .counts__list > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .counts__list > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .terms > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .fields {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone the hatched head is a thin strip carrying only the index. */
  .field {
    grid-template-rows: auto 1fr;
    min-height: 0;
    padding: 10px;
  }

  .field__idx {
    margin-bottom: 10px;
  }

  .field__body {
    margin: 0 -4px -4px;
    padding: 12px 10px 10px;
  }

  .field__state {
    padding-top: 12px;
  }

  .fonts li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fonts__licence {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: -6px;
  }

  .family__bar {
    gap: 20px;
  }

  .family__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 6px;
    width: 100%;
  }

  .family__item {
    width: auto;
    min-width: 0;
  }

  .family__sw {
    width: 100%;
    height: 30px;
  }

  .family__name {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .site-footer .site-footer__notice {
    margin-bottom: 40px;
  }

  /* The domain always has the first row; the family link and the year share the second. */
  .site-footer__end {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-footer__end > :first-child {
    grid-column: 1 / -1;
  }

  .site-footer__end > :last-child {
    grid-column: 2;
  }

  /* ordelvio.com has no family link, so its domain and year share one row. */
  .site--ordelvio .site-footer__end {
    display: flex;
  }

  .nf__links {
    gap: 8px 24px;
  }
}

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

@media (forced-colors: active) {
  .col,
  .plane,
  .field,
  .sw {
    border: 1px solid CanvasText;
  }
}