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

body,
h1,
h2,
p {
  margin: 0;
}

body {
  background: var(--paper);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(
    var(--display-min-size),
    var(--display-fluid-size),
    var(--display-size)
  );
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: var(--heading-size);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
}

/* Every band runs the viewport's width and insets its content to one column,
   so a wide screen shows a band's colour to its edges and no frame beside the
   page. */
.page {
  display: flex;
  flex-direction: column;
  min-block-size: var(--page-min-height);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--page-text-size);
  line-height: var(--body-leading);
}

.page > main {
  flex: 1;
}

.site-header,
.hero,
.statements,
.contact,
.not-found,
.prose,
.site-footer {
  padding-inline: max(var(--gutter), calc((100% - var(--page-width)) / 2));
}

/* The header stays on screen, so an anchor lands below it. */
:root {
  scroll-padding-block-start: var(--header-height);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
  block-size: var(--header-height);
}

.site-header nav {
  display: flex;
  gap: var(--space-32);
  font-size: var(--small-size);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-family: var(--font-wordmark);
  font-stretch: var(--wordmark-stretch);
  font-weight: var(--wordmark-weight);
  font-size: var(--wordmark-size);
  line-height: var(--wordmark-leading);
}

.square {
  flex: none;
  inline-size: var(--square-size);
  block-size: var(--square-size);
  background: var(--datum);
}

/* The field runs behind the header too, so the hero starts at the top of the
   page and pads the header's height back; the header sits above it. It fills
   the first view however tall the window, the headline in its middle, so the
   statements begin below it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  min-block-size: max(var(--hero-min-height), var(--page-min-height));
  margin-block-start: calc(-1 * var(--header-height));
  padding-block: var(--header-height) var(--space-64);
}

.hero h1 {
  max-inline-size: var(--hero-width);
}

.field {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.lede {
  max-inline-size: var(--lede-width);
  font-size: var(--body-large-size);
  color: var(--text-2);
}

.statements {
  padding-block: var(--section-space);
}

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

.statement-scene {
  display: none;
}

.statement {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.statement::before {
  content: "";
  inline-size: var(--square-small-size);
  block-size: var(--square-small-size);
  background: var(--datum);
}

.statement p {
  font-size: var(--body-size);
  color: var(--text-2);
}

/* field.js marks the section when it drives it. The section becomes a track a
   step long per statement, over which the pin holds the statements and the
   scene on screen; the current statement is marked, and its progress line
   grows through its step. */
.statements[data-pinned] {
  padding: 0;
}

.statement-stop {
  display: none;
}

/* Each stop is one statement's step of the track, after the pin. The page
   does not snap to them: with steps this short, snapping pulled every turn of
   a wheel back to the statement it left. field.js holds a fling instead. */
.statements[data-pinned] .statement-stop {
  display: block;
  block-size: var(--statement-step);
}

.statements[data-pinned] .pin {
  position: sticky;
  inset-block-start: var(--header-height);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--space-64);
  block-size: calc(var(--pin-height) - var(--header-height));
  padding-inline-start: max(
    var(--gutter),
    calc((100% - var(--page-width)) / 2)
  );
}

.statements[data-pinned] .statement-list {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: var(--space-32);
  max-inline-size: var(--lede-width);
  padding-block: var(--space-48);
}

.statements[data-pinned] .statement-scene {
  display: block;
  position: relative;
  isolation: isolate;
}

/* The heading is a link to its statement, and the square on its first line is
   the link's; the progress line stands under the square, beside the body. The
   body's row opens from nothing, so only the current statement takes room for
   it. */
.statements[data-pinned] .statement {
  display: grid;
  grid-template-columns: var(--square-small-size) minmax(0, 1fr);
  grid-template-rows: auto 0fr;
  column-gap: var(--space-24);
  row-gap: 0;
  transition-property: grid-template-rows, row-gap;
  transition-duration: var(--change-duration);
}

.statements[data-pinned] .statement[data-current] {
  grid-template-rows: auto 1fr;
  row-gap: var(--space-16);
}

.statements[data-pinned] .statement::before {
  display: none;
}

.statements[data-pinned] .statement h2 {
  grid-area: 1 / 1 / 2 / -1;
}

.statements[data-pinned] .statement h2 a {
  display: grid;
  grid-template-columns: var(--square-small-size) minmax(0, 1fr);
  column-gap: var(--space-24);
  color: var(--text-3);
  transition: color var(--change-duration);
}

.statements[data-pinned] .statement h2 a::before {
  content: "";
  block-size: var(--square-small-size);
  margin-block-start: calc(
    (var(--heading-leading) * var(--heading-size) - var(--square-small-size)) /
      2
  );
  background: var(--rule);
  transition: background-color var(--change-duration);
}

/* A heading pointed at or tabbed to answers at once, where the page's other
   links dim, and lets go at the pace the statements change. */
.statements[data-pinned] .statement h2 a:hover,
.statements[data-pinned] .statement h2 a:focus-visible {
  opacity: 1;
  color: var(--ink);
  transition-duration: var(--hover-duration);
}

.statements[data-pinned] .statement h2 a:hover::before,
.statements[data-pinned] .statement h2 a:focus-visible::before {
  background-color: var(--text-3);
  transition-duration: var(--hover-duration);
}

.statements[data-pinned] .statement h2 a:focus-visible {
  outline: var(--focus-width) solid var(--ink);
  outline-offset: var(--focus-offset);
}

.statements[data-pinned] .statement[data-current] h2 a {
  color: var(--ink);
}

.statements[data-pinned] .statement[data-current] h2 a::before {
  background-color: var(--datum);
}

.statements[data-pinned] .statement p {
  grid-area: 2 / 2;
  overflow: hidden;
  min-block-size: 0;
}

/* The progress line is ink over a rule the body's height: one colour drawn
   as an image, so its height can follow the reader. */
.statements[data-pinned] .statement::after {
  content: "";
  grid-area: 2 / 1;
  justify-self: center;
  inline-size: var(--rule-width);
  background: linear-gradient(var(--ink), var(--ink)) top / 100%
    calc(var(--statement-progress, 0) * 100%) no-repeat var(--rule);
}

/* The page closes on an ink block, the contact section and the footer as one
   band; the brand's light neutral carries the secondary text there. */
.contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  padding-block: var(--contact-space-start) var(--contact-space-end);
  background: var(--ink);
  color: var(--paper);
}

.contact p {
  font-size: var(--body-size);
  color: var(--rule);
}

.contact > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-14);
}

.contact h2 {
  font-size: var(--heading-large-size);
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding-block: var(--section-space);
  border-block-start: var(--rule-width) solid var(--rule);
}

/* A page of running text, such as a policy: one readable column. */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block: var(--section-space);
  border-block-start: var(--rule-width) solid var(--rule);
}

.prose > * {
  max-inline-size: var(--lede-width);
}

.prose h1 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: var(--heading-large-size);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
}

.prose h2 {
  margin-block-start: var(--space-24);
  font-size: var(--title-size);
}

.prose p,
.prose li {
  font-size: var(--body-size);
  color: var(--text-2);
}

.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: 0;
  padding-inline-start: var(--space-20);
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.link-underline {
  font-size: var(--small-size);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.pill,
.pill-outline {
  display: inline-block;
  padding: var(--space-14) var(--space-22);
  border-radius: var(--pill-radius);
  font-size: var(--small-size);
  line-height: var(--pill-leading);
}

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

.pill-outline {
  padding-block: calc(var(--space-14) - var(--rule-width));
  border: var(--rule-width) solid var(--ink);
}

.list-row {
  display: grid;
  grid-template-columns:
    var(--list-row-date-width)
    minmax(0, 1fr)
    var(--list-row-tag-width);
  align-items: baseline;
  gap: var(--space-20);
  padding: var(--space-18) 0;
  border-block-start: var(--rule-width) solid var(--rule);
}

.list-row:last-child {
  border-block-end: var(--rule-width) solid var(--rule);
}

.list-row time,
.list-row span {
  font-family: var(--font-label);
  font-size: var(--label-size);
  color: var(--text-3);
}

.list-row span {
  text-align: end;
}

.list-row a {
  font-family: var(--font-heading);
  font-size: var(--title-size);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-24);
  border-block-start: var(--rule-width) solid var(--text-3);
  background: var(--ink);
  font-size: var(--caption-size);
  color: var(--rule);
}

/* The policies sit beside the copyright; the domain keeps the far end. */
.site-footer nav {
  margin-inline-end: auto;
}

/* A media query cannot read a custom property, so the breakpoint lives here. */
@media (width < 45rem) {
  .statement-list,
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The scene stacks over the current statement, and the statements' squares
     stand in a row above it, each its heading's link. Every heading and body
     keeps its room, the others unseen, so the text neither moves nor resizes
     the scene as the reader passes from one to the next. */
  .statements[data-pinned] .pin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--scene-height) minmax(0, 1fr);
    padding-inline-start: 0;
  }

  .statements[data-pinned] .statement-scene {
    grid-row: 1;
  }

  .statements[data-pinned] .statement-list {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--square-small-size) auto auto;
    align-self: start;
    gap: var(--space-16);
    max-inline-size: none;
    padding: var(--space-24) var(--gutter);
  }

  .statements[data-pinned] .statement {
    display: contents;
  }

  /* The outgoing text is gone before the incoming appears, so the two are
     never read over each other. A heading's text is hidden by its colour
     alone, so its square stays in view, and a body by its opacity alone, so
     a screen reader still reads every statement. */
  .statements[data-pinned] .statement h2,
  .statements[data-pinned] .statement p {
    pointer-events: none;
  }

  .statements[data-pinned] .statement h2 {
    grid-area: 2 / 1;
  }

  .statements[data-pinned] .statement h2 a,
  .statements[data-pinned] .statement h2 a:hover,
  .statements[data-pinned] .statement h2 a:focus-visible {
    display: block;
    outline: none;
    color: transparent;
    transition: color calc(var(--change-duration) / 2);
  }

  .statements[data-pinned] .statement p {
    grid-area: 3 / 1;
    opacity: 0;
    transition: opacity calc(var(--change-duration) / 2);
  }

  .statements[data-pinned] .statement[data-current] h2,
  .statements[data-pinned] .statement[data-current] p {
    pointer-events: auto;
  }

  .statements[data-pinned] .statement[data-current] h2 a {
    color: var(--ink);
    transition-delay: calc(var(--change-duration) / 2);
  }

  .statements[data-pinned] .statement[data-current] p {
    opacity: 1;
    transition-delay: calc(var(--change-duration) / 2);
  }

  /* A square is drawn in the middle of a target three times its size, the
     targets side by side in the list's first row. The squares are the only
     sign of the statements not shown, so they stand out from the paper as a
     control must; the focus ring keeps the wide one's distance from its
     square. */
  .statements[data-pinned] .statement h2 a::before {
    position: absolute;
    inset-block-start: calc(var(--space-24) - var(--square-small-size));
    inset-inline-start: calc(
      var(--gutter) - var(--square-small-size) + var(--statement-index) * 3 *
        var(--square-small-size)
    );
    inline-size: calc(3 * var(--square-small-size));
    block-size: calc(3 * var(--square-small-size));
    margin: 0;
    padding: var(--square-small-size);
    background-color: var(--text-3);
    background-clip: content-box;
    pointer-events: auto;
  }

  .statements[data-pinned] .statement h2 a:focus-visible::before {
    outline: var(--focus-width) solid var(--ink);
    outline-offset: calc(var(--focus-offset) - var(--square-small-size));
  }

  .statements[data-pinned] .statement::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .statements[data-pinned] .statement,
  .statements[data-pinned] .statement h2 a,
  .statements[data-pinned] .statement h2 a:hover,
  .statements[data-pinned] .statement h2 a:focus-visible,
  .statements[data-pinned] .statement h2 a::before,
  .statements[data-pinned] .statement p {
    transition: none;
  }
}