/* Threefold Capital
   Layout: the home page opens on a full-screen stage where the logo's three bands lock
   together. Everything after it hangs from one left edge: a narrow rail carries each
   section's name, a wide column carries its content. Corners stay square and rules stay
   thin, as in the logo. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Colour: black ground, with the gold and navy measured from the logo itself. */
  --black: #000;
  --ivory: #f3ebdc;
  --stone: #aba497;
  --mute: #857f74;
  --gold: #cf9a56;
  --gold-hi: #ebb866;
  --gold-lo: #bb8746;
  --gold-line: rgba(207, 154, 86, 0.5);
  --navy: #071a38;
  --navy-hi: #0d2448;
  --navy-deep: #030c1c;
  --navy-edge: #1d3156;
  --line: #1b2b4b;
  --line-strong: #2c4069;
  --on-navy: #bcc0cb;
  --on-navy-mute: #909db5;
  --alert: #f0907a;
  --veil: rgba(0, 0, 0, 0.72);

  /* Type: a light serif for statements and names, a plain geometric sans for reading. */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Figtree", "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
  --rail: 12.5rem;
  --mast: 4.5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Base ---------- */

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

html {
  background: var(--black);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--mast) + 1.25rem);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7647; /* 17px on 30px */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

img {
  height: auto;
}

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

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

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 4px;
}

/* A part of a page that a link has taken the visitor to is given focus, so the next press of
   Tab starts from there. It does not need a ring of its own. */
[tabindex="-1"]:focus {
  outline: none;
}

a,
button,
summary {
  touch-action: manipulation;
}

::selection {
  background: var(--gold);
  color: var(--black);
}

.wrap {
  width: 100%;
  max-width: 78rem;
  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 {
  position: absolute;
  left: var(--gutter);
  top: -5rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--gold-hi);
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
}

/* ---------- Masthead ---------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
}

/* The frosted bar is a layer of its own behind the masthead. A blur set on the masthead
   itself would make the menu panel inside it size itself to the bar instead of the screen,
   and the menu would open as a sliver once the page had been scrolled. */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--line);
  background: var(--veil);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.masthead.is-solid::before {
  opacity: 1;
}

.masthead__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--mast);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand__mark {
  width: auto;
  height: 2.625rem;
}

.brand__reveal {
  display: block;
  overflow: hidden;
}

.brand__word {
  display: block;
  width: auto;
  height: 0.9375rem;
}

/* On the home page the full logo fills the first screen, so the small one in the corner
   keeps out of the way until that logo has scrolled off, and steps aside again whenever
   the visitor comes back up to it. */
.brand-away .brand {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.55vw, 1.75rem);
}

.nav__link {
  position: relative;
  padding: 0.5rem 0;
  color: var(--stone);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.25s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0.2rem 0;
  height: 1px;
  background: var(--gold-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}

.nav__link[aria-current] {
  color: var(--ivory);
}

.nav__link[aria-current]::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .nav__link:hover {
    color: var(--ivory);
  }

  .nav__link:hover::after {
    transform: scaleX(1);
  }
}

.nav__link--boxed {
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--gold-line);
  color: var(--ivory);
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.nav__link--boxed::after {
  content: none;
}

.nav__link--boxed[aria-current] {
  border-color: var(--gold-hi);
  background: var(--gold-hi);
  color: var(--black);
}

@media (hover: hover) {
  .nav__link--boxed:hover {
    border-color: var(--gold-hi);
    background: var(--gold-hi);
    color: var(--black);
  }
}

.menu-button {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--gold-line);
  background: transparent;
  color: var(--ivory);
  font: 500 0.9375rem/1.2 var(--sans);
  cursor: pointer;
}

@media (max-width: 74.99rem) {
  .menu-button {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: calc(var(--mast) + env(safe-area-inset-top, 0px)) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0.5rem var(--gutter) calc(3rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }

  .nav__link,
  .nav__link--boxed {
    flex: none;
    padding: 0.85rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ivory);
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.15;
    white-space: normal;
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  }

  .nav__link::after {
    content: none;
  }

  .nav.is-open .nav__link {
    opacity: 1;
    transform: none;
  }

  .nav.is-open .nav__link:nth-child(2) { transition-delay: 0.035s; }
  .nav.is-open .nav__link:nth-child(3) { transition-delay: 0.07s; }
  .nav.is-open .nav__link:nth-child(4) { transition-delay: 0.105s; }
  .nav.is-open .nav__link:nth-child(5) { transition-delay: 0.14s; }
  .nav.is-open .nav__link:nth-child(6) { transition-delay: 0.175s; }
  .nav.is-open .nav__link:nth-child(7) { transition-delay: 0.21s; }
  .nav.is-open .nav__link:nth-child(8) { transition-delay: 0.245s; }

  /* The page you are on carries the logo's diamond */
  .nav__link[aria-current]::after {
    content: "";
    position: static;
    display: inline-block;
    width: 0.5rem;
    height: 0.78rem;
    margin-left: 0.8rem;
    background: var(--gold-hi);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    vertical-align: 0.12em;
    transform: none;
  }

  .nav__link--boxed,
  .nav__link--boxed[aria-current] {
    background: none;
    color: var(--gold-hi);
  }

  @media (hover: hover) {
    .nav__link--boxed:hover {
      background: none;
      color: var(--gold-hi);
    }
  }

  .menu-open {
    overflow: hidden;
  }

  /* While the menu is open the bar is solid black and the small logo is always shown */
  .menu-open .masthead::before {
    opacity: 1;
    background: var(--black);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .menu-open.brand-away .brand {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Short screens, such as a small phone turned sideways: a tighter menu so all of it fits */
@media (max-width: 74.99rem) and (max-height: 40rem) {
  .nav__link,
  .nav__link--boxed {
    padding-block: 0.6rem;
    font-size: 1.4rem;
  }
}

/* ---------- Opening stage (home) ----------
   The logo, whole and still, is the resting state and the only state without scripts.

   With scripts, on the first visit, the three bands of the mark glide in from outside the
   screen, seat one by one, and are replaced by the untouched logo. It plays once and never
   again. Everything that moves here moves by transform and opacity alone, so the browser
   runs it away from the main thread and it stays smooth while the page is busy. */

.intro {
  position: relative;
}

.intro__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--mast) + env(safe-area-inset-top, 0px));
  padding-bottom: 5.5rem;
  overflow: hidden;
  overflow: clip;
}

.intro__center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.25rem, 1.5svh, 1rem);
  width: 100%;
  padding-inline: var(--gutter);
}

.intro__welcome {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.crest {
  position: relative;
  width: min(40rem, 82vw, max(15rem, calc((100svh - var(--mast) - 13.5rem) * 1.1613)));
  aspect-ratio: 1080 / 930;
}

.crest__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Only the whole logo shows unless a script asks for more. */
.crest__group,
.crest__zone,
.crest__shine,
.crest__seams,
.crest__ring,
.crest__lights,
.intro__cue {
  display: none;
}

.crest__group {
  position: absolute;
  inset: 0;
}

.crest__piece {
  position: absolute;
}

/* Where each cut-out sits inside the logo, in percent of the logo's box. */
/* pieces:start */
.crest__piece--navy-base { left: 13.7037%; top: 58.0645%; width: 47.5926%; height: 15.2688%; }
.crest__piece--navy-rise { left: 39.6296%; top: 12.1505%; width: 45.7407%; height: 61.5054%; }
.crest__piece--gold-outer { left: 19.0741%; top: 3.3333%; width: 42.5000%; height: 56.7742%; }
.crest__piece--gold-inner { left: 49.0741%; top: 35.4839%; width: 24.3519%; height: 38.4946%; }
.crest__group--navy { transform-origin: 52.1944% 53.4301%; }
.crest__group--outer { transform-origin: 40.2500% 39.5376%; }
.crest__group--inner { transform-origin: 60.5370% 56.4301%; }
/* pieces:end */

/* The mark, the wordmark and the rule are each shown from the logo image itself, through a window. */
.crest__zone--mark {
  -webkit-mask-image: linear-gradient(to bottom, #000 74.4%, transparent 75.6%);
  mask-image: linear-gradient(to bottom, #000 74.4%, transparent 75.6%);
}

.crest__zone--word {
  -webkit-mask-image: linear-gradient(to bottom, transparent 74.4%, #000 75.6%, #000 85.2%, transparent 86.8%);
  mask-image: linear-gradient(to bottom, transparent 74.4%, #000 75.6%, #000 85.2%, transparent 86.8%);
}

.crest__zone--rule {
  transform-origin: 49.86% 90.5%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 85.2%, #000 86.8%);
  mask-image: linear-gradient(to bottom, transparent 85.2%, #000 86.8%);
}

/* Light on the metal. The window is cut from the logo's own brightness, so light only
   ever lands on the logo, never on the black around it. */
.crest__shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url("../img/logo-mask.webp") center / 100% 100% no-repeat;
  mask: url("../img/logo-mask.webp") center / 100% 100% no-repeat;
}

/* One band of light that can cross the logo from left to right */
.crest__sheen {
  position: absolute;
  inset: -10% -30%;
  background: linear-gradient(
    108deg,
    rgba(255, 240, 208, 0) 42%,
    rgba(255, 240, 208, 0.74) 50%,
    rgba(255, 240, 208, 0) 58%
  );
  transform: translate3d(-125%, 0, 0);
}

/* A soft highlight that follows the pointer, where there is one */
.crest__light {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  margin: -23% 0 0 -23%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 208, 0.3), rgba(255, 240, 208, 0.1) 48%, rgba(255, 240, 208, 0));
  opacity: 0;
  transition: opacity 0.7s ease;
}

.crest__shine.is-near .crest__light {
  opacity: 1;
}

/* A streak of light that runs down each seam, once, as the bands lock */
.crest__seams {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crest__seam {
  position: absolute;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 246, 222, 0), rgba(255, 246, 222, 0.95) 55%, rgba(255, 246, 222, 0));
  box-shadow: 0 0 0.6rem rgba(245, 204, 130, 0.6);
  opacity: 0;
  transform-origin: 0 50%;
}

/* One ring of light that leaves the mark as the bands lock, widens and is gone. It is
   drawn at its largest size and shown smaller first, so it starts as a hairline. */
.crest__ring {
  position: absolute;
  top: 49.54%;
  left: 49.69%;
  width: 190%;
  margin: -95% 0 0 -95%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(250, 214, 150, 0) calc(100% - 6px),
    rgba(255, 238, 200, 0.9) calc(100% - 3px),
    rgba(250, 214, 150, 0) 100%
  );
  pointer-events: none;
  opacity: 0;
  transform: scale(0.43);
}

/* The lights that travel round the edge of the mark. Each has a head, a sparkle that
   opens as it turns a corner, and a tail that follows it along the side it is on.
   A script places these and sets them moving; the shapes are here. */
.crest__lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

/* A thin window laid along one side of the mark. Tails are only seen inside it, which is
   what lets a tail trail round a corner after its head has turned. */
.crest__edge {
  position: absolute;
  height: 12px;
  margin-top: -6px;
  overflow: hidden;
  transform-origin: 0 50%;
}

.crest__tail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

/* The soft outer glow of the tail, widening towards the head */
.crest__tail::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 2px;
  left: 0;
  background: linear-gradient(90deg, rgba(235, 184, 102, 0), rgba(235, 184, 102, 0.24));
  clip-path: polygon(0 43.75%, 100% 0, 100% 100%, 0 56.25%);
}

/* Its bright core */
.crest__tail::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 5px;
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 240, 206, 0),
    rgba(255, 240, 206, 0.06) 25%,
    rgba(255, 240, 206, 0.24) 50%,
    rgba(255, 240, 206, 0.53) 75%,
    rgba(255, 240, 206, 0.95)
  );
  clip-path: polygon(0 32.5%, 100% 0, 100% 100%, 0 67.5%);
}

/* The head: a box the size of the logo carries the light along; the light itself sits
   at the box's top left corner. */
.crest__head {
  position: absolute;
  inset: 0;
}

.crest__dot {
  position: absolute;
  top: -11px;
  left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 240, 205, 1),
    rgba(250, 214, 150, 0.6) 22%,
    rgba(235, 184, 102, 0.16) 55%,
    rgba(235, 184, 102, 0)
  );
}

/* A four point sparkle, closed along the sides and open at the corners */
.crest__spark {
  --arm: 3rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
}

.crest__spark::before,
.crest__spark::after {
  content: "";
  position: absolute;
  background: rgb(255, 244, 216);
}

.crest__spark::before {
  top: -0.5px;
  left: calc(var(--arm) * -1);
  width: calc(var(--arm) * 2);
  height: 1px;
}

.crest__spark::after {
  top: calc(var(--arm) * -0.8);
  left: -0.5px;
  width: 1px;
  height: calc(var(--arm) * 1.6);
}

/* Where the browser can measure the logo's box, the sparkle keeps its size in step with the logo */
@supports (width: 1cqw) {
  .crest {
    container-type: inline-size;
  }

  .crest__spark {
    --arm: min(64.4px, 8.09cqw);
  }
}

.intro__cue {
  position: absolute;
  inset: auto 0 calc(1.5rem + env(safe-area-inset-bottom, 0px)) 0;
  justify-items: center;
  gap: 0.6rem;
  color: var(--stone);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
}

.intro__cue::after {
  content: "";
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(to bottom, var(--gold-hi), rgba(235, 184, 102, 0));
  transform-origin: top;
}

.js .intro__cue {
  display: grid;
}

/* Stage set for the opening: everything waits out of sight, on black. */
.intro-on .crest__group,
.intro-on .crest__zone,
.intro-on .crest__shine,
.intro-on .crest__seams,
.intro-on .crest__ring {
  display: block;
}

.intro-on .crest__group,
.intro-on .crest__zone,
.intro-on .crest__whole,
.intro-on .intro__welcome,
.intro-on .intro__cue,
.intro-on .masthead {
  opacity: 0;
}

.intro-on .masthead {
  pointer-events: none;
}

.intro-on .crest,
.intro-on .crest__group,
.intro-on .crest__zone,
.intro-on .crest__sheen,
.intro-on .crest__ring {
  will-change: transform, opacity;
}

/* Once the opening has played, and on every later visit to the page: the whole logo, the
   edge lights, and the bands kept ready underneath for the greeting. */
.intro-live .crest__shine,
.intro-live .crest__lights {
  display: block;
}

.intro-live .crest__group {
  display: block;
  visibility: hidden;
  opacity: 0;
  filter: brightness(1.5) saturate(1.06);
}

.intro-live .crest.is-greeting .crest__group {
  visibility: visible;
}

/* ---------- The statement under the stage ---------- */

.lead__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
}

.lead__title {
  max-width: 11.5em;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.1rem + 4.9vw, 5rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.lead__side {
  display: grid;
  justify-items: start;
  gap: 1.75rem;
  padding-bottom: 0.5rem;
}

.lede {
  max-width: 30em;
  color: var(--stone);
  font-size: 1.1875rem;
  line-height: 1.6842; /* 19px on 32px */
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.75rem;
}

@media (max-width: 61.99rem) {
  .lead__in {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Buttons and links ---------- */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.6rem;
  overflow: hidden;
  border: 1px solid transparent;
  font: 600 0.9375rem/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.5s var(--ease-out);
}

.button:active {
  transform: scale(0.985);
}

.button--gold {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%);
  color: var(--black);
}

/* A slow pass of light across the gold on hover, the same gesture as on the logo. */
.button--gold::after {
  content: "";
  position: absolute;
  inset: 0 -40%;
  background: linear-gradient(108deg, rgba(255, 244, 214, 0) 42%, rgba(255, 244, 214, 0.65) 50%, rgba(255, 244, 214, 0) 58%);
  transform: translateX(-120%);
  pointer-events: none;
}

@media (hover: hover) {
  .button--gold:hover::after {
    transform: translateX(120%);
    transition: transform 0.9s var(--ease-in-out);
  }
}

.button--line {
  border-color: var(--gold-line);
  background: transparent;
  color: var(--ivory);
}

@media (hover: hover) {
  .button--line:hover {
    border-color: var(--gold-hi);
    color: var(--gold-hi);
  }
}

.button[disabled] {
  cursor: default;
  opacity: 0.6;
}

.quiet-link {
  padding: 0.5rem 0;
  color: var(--ivory);
  font: 600 0.9375rem/1.2 var(--sans);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

@media (hover: hover) {
  .quiet-link:hover {
    color: var(--gold-hi);
    text-decoration-color: var(--gold-hi);
  }
}

.textlink {
  color: var(--gold-hi);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.25s ease;
}

@media (hover: hover) {
  .textlink:hover {
    text-decoration-color: var(--gold-hi);
  }
}

/* ---------- The logo's own rule, redrawn in type ---------- */

.rule {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
}

.rule::before {
  background: linear-gradient(90deg, rgba(207, 154, 86, 0), var(--gold) 88%);
}

.rule::after {
  background: linear-gradient(270deg, rgba(207, 154, 86, 0), var(--gold) 88%);
}

.rule i {
  flex: none;
  width: 0.55rem;
  height: 0.85rem;
  background: var(--gold-hi);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---------- Page heads (inner pages) ---------- */

.pagehead {
  padding-top: calc(var(--mast) + env(safe-area-inset-top, 0px));
}

.pagehead__in {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3.5rem, 8vw, 6.5rem);
}

.pagehead__name {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-style: italic;
  line-height: 1.3;
}

.pagehead__title {
  max-width: 13.5em;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 4.75rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  line-height: 1.03;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.pagehead__lede {
  margin-top: 0.5rem;
}

/* ---------- Bands ---------- */

.band,
.lead,
.closing {
  position: relative;
}

/* The rule above each band is its own line, so it can draw itself as the band arrives */
.band::before,
.lead::before,
.closing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}

.band__in {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.band__name {
  position: sticky;
  top: calc(var(--mast) + 2rem);
  align-self: start;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

.band__body {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.25rem);
  min-width: 0;
}

.statement {
  max-width: 19em;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.1rem + 2.5vw, 3.1rem);
  font-weight: 300;
  font-variation-settings: "opsz" 60;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.prose {
  display: grid;
  gap: 1.1rem;
  max-width: var(--measure);
  color: var(--stone);
}

.prose strong {
  color: var(--ivory);
  font-weight: 600;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.group {
  display: grid;
  gap: 1.75rem;
  min-width: 0;
}

.group__title {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 300;
  font-variation-settings: "opsz" 40;
  line-height: 1.15;
  letter-spacing: -0.008em;
}

.group__intro {
  max-width: var(--measure);
  color: var(--stone);
}

@media (max-width: 63.99rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 53.99rem) {
  .band__in {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }

  .band__name {
    position: static;
  }
}

/* ---------- Register: label and value pairs, set like a company extract ---------- */

.register {
  font-size: 0.9375rem;
  line-height: 1.6; /* 15px on 24px */
  font-variant-numeric: tabular-nums;
}

.register__title {
  padding-bottom: 0.75rem;
  color: var(--mute);
  font: 500 0.875rem/1.7143 var(--sans); /* 14px on 24px */
}

.register__row {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--line);
}

.register__row:last-child {
  border-bottom: 1px solid var(--line);
}

.register dt {
  color: var(--mute);
}

.register dd {
  color: var(--ivory);
}

.register a {
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.25em;
}

@media (hover: hover) {
  .register a:hover {
    color: var(--gold-hi);
  }
}

/* ---------- Three of a kind: principles, criteria ---------- */

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

.trio__item {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold-line);
}

.trio__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  line-height: 1.2;
}

.trio__text {
  color: var(--stone);
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
}

@media (max-width: 53.99rem) {
  .trio,
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Stages: a real sequence, so it is numbered ---------- */

.stages {
  position: relative;
  display: grid;
  counter-reset: stage;
}

.stage {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 11rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem clamp(1rem, 2.5vw, 2.5rem);
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
  counter-increment: stage;
}

.stage:last-child {
  border-bottom: 1px solid var(--line);
}

.stage::before {
  content: counter(stage);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 300;
  font-variation-settings: "opsz" 60;
  line-height: 1;
}

.stage__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  line-height: 1.2;
}

.stage__body {
  display: grid;
  gap: 1rem;
  max-width: var(--measure);
  color: var(--stone);
}

.stage__list {
  display: grid;
  gap: 0.35rem;
  color: var(--ivory);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.stage__list li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.stage__list li::before,
.watch__item::before,
.ticks li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.62rem;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

@media (max-width: 53.99rem) {
  .stage {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-block: 1.5rem;
  }

  .stage::before {
    font-size: 2rem;
  }

  .stage__body {
    grid-column: 2;
  }
}

/* ---------- Lists with the logo's diamond as the bullet ---------- */

.watch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
}

.watch__item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 0.8125rem;
  border-top: 1px solid var(--line);
}

.ticks {
  display: grid;
  gap: 0.6rem;
  max-width: var(--measure);
}

.ticks li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.ticks--loose {
  gap: 0.85rem;
}

/* Running text and list lines avoid ending on a single word, where the browser can manage it */
.prose p,
.lede,
.ticks li,
.watch__item,
.trio__text,
.stage__body p,
.paper__text p,
.criteria__text,
.steps__text,
.routes__text,
.person__note,
.faces__text,
.dated__what,
.track__what,
.register dd,
.article__part p {
  text-wrap: pretty;
}

.group__sub {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  font-variation-settings: "opsz" 28;
  line-height: 1.25;
}

@media (max-width: 39.99rem) {
  .watch {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Dated steps (the firm so far) ---------- */

.dated {
  display: grid;
}

.dated__row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.25rem clamp(1rem, 3vw, 3rem);
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}

.dated__row:last-child {
  border-bottom: 1px solid var(--line);
}

.dated__when {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-style: italic;
  line-height: 1.4;
}

.dated__what {
  color: var(--stone);
}

.dated__what strong {
  display: block;
  color: var(--ivory);
  font-weight: 600;
}

@media (max-width: 39.99rem) {
  .dated__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- A photograph, framed ---------- */

.shot {
  display: grid;
  gap: 0.9rem;
}

.shot__frame {
  overflow: hidden;
  border: 1px solid var(--navy-edge);
  background: var(--navy-deep);
  aspect-ratio: 2.1 / 1;
}

.shot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot__note {
  max-width: 34rem;
  color: var(--on-navy-mute);
  font-size: 0.875rem;
  line-height: 1.5714;
}

/* On a phone a wide strip would be a sliver, so the frame stands taller there */
@media (max-width: 39.99rem) {
  .shot__frame {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Work in progress: a court that builds itself, and a dial to the target ---------- */

.progress {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.build {
  display: grid;
  gap: 0.9rem;
}

.build__plan {
  width: 100%;
  height: auto;
  overflow: visible;
}

.build__floor,
.build__lines path,
.build__net path,
.build__lamp {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.build__floor {
  stroke: var(--gold-hi);
  stroke-width: 1.6;
}

.build__net .build__tape {
  stroke: var(--gold-hi);
  stroke-width: 2;
}

.build__net .build__mesh {
  stroke-width: 0.5;
  opacity: 0.55;
}

/* The plan underneath: always there, in faint navy, so the gold has something to build on */
.build__ghost path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* Light from each lamp. The fills are gradients set in the drawing itself. */
.build__cone,
.build__pool {
  stroke: none;
}

.build__note {
  color: var(--mute);
  font-size: 0.875rem;
  line-height: 1.5714;
  text-align: center;
}

/* The dial, the date and the note share one centre line */
.target {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
}

.dial {
  position: relative;
  width: min(13.5rem, 62vw);
  aspect-ratio: 1;
}

.dial__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dial__rail,
.dial__arc {
  fill: none;
  stroke-width: 2;
}

.dial__rail {
  stroke: var(--line-strong);
}

.dial__arc {
  stroke: var(--gold-hi);
  stroke-width: 3;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--part, 0.32));
}

.dial__text {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
}

.dial__days {
  color: var(--gold-hi);
  font-family: var(--serif);
  font-size: 4.25rem;
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.dial__unit {
  max-width: 7.5rem;
  color: var(--stone);
  font-size: 0.875rem;
  line-height: 1.4;
  text-wrap: balance;
}

.target__words {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.target__label {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.4;
}

.target__date {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 300;
  font-variation-settings: "opsz" 40;
  line-height: 1.15;
  text-wrap: balance;
}

/* Words that should stay on one line together */
.together {
  white-space: nowrap;
}

.target__note {
  max-width: 19rem;
  margin-top: 0.35rem;
  color: var(--mute);
  font-size: 0.875rem;
  line-height: 1.5714;
  text-wrap: balance;
}

@media (max-width: 53.99rem) {
  .progress {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Tracker: where an investment stands, as a line with a marker ---------- */

.trackwrap {
  position: relative;
}

/* The stretch being worked on now: gold dashes that keep moving towards the next step */
.track__work {
  position: absolute;
  top: 0.9rem;
  left: calc(var(--done, 0.6) * 100%);
  width: calc((var(--next, 0.8) - var(--done, 0.6)) * 100%);
  height: 1px;
  overflow: hidden;
}

.track__work::before {
  content: "";
  position: absolute;
  inset: 0 0 0 -1rem;
  background: repeating-linear-gradient(90deg, var(--gold-hi) 0 0.4rem, rgba(235, 184, 102, 0) 0.4rem 1rem);
}


.track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 clamp(0.75rem, 1.6vw, 1.5rem);
  padding-top: 2.75rem;
}

/* The line: a faint rail, and over it the part already travelled */
.track::before,
.track::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 0;
  height: 1px;
}

.track::before {
  right: 0;
  background: var(--line-strong);
}

.track::after {
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform: scaleX(var(--done, 0.6));
  transform-origin: left;
}

.track__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

/* Each step hangs from a diamond on the line */
.track__step::before {
  content: "";
  position: absolute;
  top: -2.275rem;
  left: 0;
  width: 0.55rem;
  height: 0.85rem;
  background: var(--black);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.track__step:not(.is-done):not(.is-now)::before {
  background: var(--line-strong);
}

.track__step.is-done::before,
.track__step.is-now::before {
  background: var(--gold-hi);
  box-shadow: none;
}

.track__step.is-now::after {
  content: "";
  position: absolute;
  top: -3.05rem;
  left: -0.875rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 184, 102, 0.5), rgba(235, 184, 102, 0));
}

.track__when {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.4;
}

.track__what {
  color: var(--stone);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.track__what strong {
  display: block;
  color: var(--ivory);
  font-weight: 600;
}

.track__step:not(.is-done):not(.is-now) .track__when,
.track__step:not(.is-done):not(.is-now) .track__what,
.track__step:not(.is-done):not(.is-now) .track__what strong {
  color: var(--mute);
}

@media (max-width: 63.99rem) {
  /* On narrower screens the line runs down the left instead */
  .track {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    padding-top: 0;
    padding-left: 2rem;
  }

  .track::before,
  .track::after {
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.25rem;
    width: 1px;
    height: auto;
  }

  .track::before {
    right: auto;
  }

  .track::after {
    transform: scaleY(var(--done, 0.6));
    transform-origin: top;
    background: linear-gradient(180deg, var(--gold), var(--gold-hi));
  }

  .track__step {
    gap: 0.2rem;
  }

  .track__step::before {
    top: 0.3rem;
    left: -2rem;
  }

  .track__step.is-now::after {
    top: -0.45rem;
    left: -2.875rem;
  }

  .track__work {
    top: calc(0.4rem + var(--done, 0.6) * (100% - 0.8rem));
    left: 0.25rem;
    width: 1px;
    height: calc((var(--next, 0.8) - var(--done, 0.6)) * (100% - 0.8rem));
  }

  .track__work::before {
    inset: -1rem 0 0 0;
    background: repeating-linear-gradient(180deg, var(--gold-hi) 0 0.4rem, rgba(235, 184, 102, 0) 0.4rem 1rem);
  }
}

/* ---------- Figures: a few numbers, large ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

.figure--wide {
  grid-column: 1 / -1;
}

.figure {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold-line);
}

.figure__number {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  color: var(--gold-hi);
  font-family: var(--serif);
  font-size: clamp(3.25rem, 2rem + 3.6vw, 5rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.figure__plus {
  margin-right: 0.9rem;
  color: var(--stone);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
}

.figure__label {
  max-width: 24rem;
  color: var(--stone);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* A full day as a line, with the hours the club is open marked in gold */
.hours {
  position: relative;
  height: 2.6rem;
  margin-top: 0.4rem;
}

.hours::before {
  content: "";
  position: absolute;
  inset: 0.45rem 0 auto 0;
  height: 1px;
  background: var(--line-strong);
}

.hours__open {
  position: absolute;
  top: 0.3rem;
  left: 29.1667%;          /* 7 of 24 hours */
  width: 62.5%;            /* 15 of 24 hours, to 10pm */
  height: 0.35rem;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform-origin: left;
}

.hours__tick {
  position: absolute;
  top: 1.1rem;
  color: var(--stone);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hours__tick--start {
  left: 29.1667%;
}

.hours__tick--end {
  left: 91.6667%;
  transform: translateX(-100%);
}

@media (max-width: 39.99rem) {
  .figures {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- The holding: the one navy surface on the site ---------- */

.holding {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 4.5vw, 3.75rem);
  border: 1px solid var(--navy-edge);
  background: linear-gradient(150deg, var(--navy-hi) 0%, var(--navy) 42%, var(--navy-deep) 100%);
}

.holding__head {
  display: grid;
  gap: 1rem;
}

.holding__title {
  color: var(--gold-hi);
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.75rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.holding__lede {
  max-width: 26em;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  font-variation-settings: "opsz" 28;
  line-height: 1.4;
}

.holding .prose {
  color: var(--on-navy);
}

.holding .register__title,
.holding .register dt {
  color: var(--on-navy-mute);
}

.holding .register__row {
  border-color: var(--navy-edge);
}

.holding__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.75rem;
}

.courts {
  display: grid;
  gap: 0.9rem;
}

.courts__plan {
  width: 100%;
  height: auto;
  overflow: visible;
}

.courts__line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.3;
}

.courts__net {
  fill: none;
  stroke: var(--gold-hi);
  stroke-width: 0.45;
}

.courts__note {
  color: var(--on-navy-mute);
  font-size: 0.875rem;
  line-height: 1.5714;
}

@media (max-width: 39.99rem) {
  .courts__line {
    stroke-width: 0.55;
  }

  .courts__net {
    stroke-width: 0.8;
  }
}

/* ---------- People: the three directors, with their portraits ---------- */

.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

.person {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  min-width: 0;
}

/* Each portrait sits in a thin navy frame, cut to the same shape and eye line as the others */
.portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border: 1px solid var(--navy-edge);
  background: var(--navy-deep);
}

.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__text {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding-top: 1.1rem;
}

/* The gold hairline above each name */
.person__text::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold) 45%, rgba(207, 154, 86, 0.2));
  transform-origin: left;
}

.person__name {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  line-height: 1.15;
}

.person__role {
  color: var(--gold);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.person__note {
  margin-top: 0.45rem;
  color: var(--stone);
}

/* Narrower screens: each director is a row, the portrait on the left and the name beside it */
@media (max-width: 53.99rem) {
  .people {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .person {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    align-items: center;
    gap: 0 clamp(1.1rem, 5vw, 2rem);
  }

  .person__name {
    font-size: 1.5rem;
  }
}

/* The Team page on a phone: each portrait large, one above the next */
@media (max-width: 39.99rem) {
  .people--full {
    gap: 2.75rem;
  }

  .people--full .person {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .people--full .portrait {
    width: 100%;
    max-width: 24rem;
  }

  .people--full .person__name {
    font-size: 1.75rem;
  }
}

/* ---------- Faces: the three directors, small, beside a line about them ---------- */

.faces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}

.faces__row {
  display: flex;
  flex: none;
  gap: 0.4rem;
}

.faces__img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border: 1px solid var(--gold-line);
  background: var(--navy-deep);
}

.faces__text {
  flex: 1 1 15rem;
  min-width: 0;
  color: var(--ivory);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.faces__names {
  display: block;
  margin-top: 0.15rem;
  color: var(--stone);
  font-size: 0.875rem;
}

.pagehead__in > .faces {
  margin-top: 0.5rem;
}

/* The close of the home page: a line and the two ways on */
.who__foot {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
}

.who__line {
  max-width: 24em;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  font-variation-settings: "opsz" 28;
  line-height: 1.4;
}

/* ---------- Contact: form and details ---------- */

.reach {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (max-width: 63.99rem) {
  .reach {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form {
  display: grid;
  gap: 1.6rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem clamp(1.25rem, 3vw, 2.5rem);
}

@media (max-width: 39.99rem) {
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.field__label {
  color: var(--stone);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5714;
}

.field__hint {
  color: var(--mute);
  font-weight: 400;
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
  font-size: 1.0625rem;
  line-height: 1.5;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

@media (hover: hover) {
  .field__input:hover {
    border-bottom-color: var(--gold-line);
  }
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--gold-hi);
  box-shadow: 0 1px 0 0 var(--gold-hi);
}

.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ivory);
  -webkit-box-shadow: 0 0 0 100rem var(--black) inset, 0 1px 0 0 var(--line-strong);
  caret-color: var(--ivory);
}

select.field__input {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23cf9a56' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 0.75rem;
  cursor: pointer;
}

select.field__input option {
  background: var(--black);
  color: var(--ivory);
}

textarea.field__input {
  min-height: 9rem;
  resize: vertical;
}

.field__error {
  min-height: 0;
  color: var(--alert);
  font-size: 0.875rem;
  line-height: 1.5714;
}

.field.is-invalid .field__input {
  border-bottom-color: var(--alert);
  box-shadow: 0 1px 0 0 var(--alert);
}

/* A field people never see. Anything that fills it in is not a person. */
.form__trap {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 0.4rem;
}

.form__note {
  max-width: 24rem;
  color: var(--mute);
  font-size: 0.875rem;
  line-height: 1.5714;
}

.form__status {
  display: none;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--gold-line);
  color: var(--ivory);
}

.form__status.is-shown {
  display: block;
}

.form__status.is-error {
  border-color: var(--alert);
}

.form__status a {
  color: var(--gold-hi);
}

.details {
  display: grid;
  gap: 2.25rem;
}

.contact__mail {
  max-width: 100%;
  color: var(--gold-hi);
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.contact__status {
  min-height: 1.6em;
  color: var(--stone);
  font-size: 0.875rem;
}

.details__block {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
}

.details__label {
  color: var(--mute);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5714;
}

.details__value {
  color: var(--ivory);
}

.copy-button {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--stone);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.35em;
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .copy-button:hover {
    color: var(--gold-hi);
  }
}

/* ---------- Closing call ---------- */

.closing__in {
  display: grid;
  justify-items: start;
  gap: 2rem;
  padding-block: clamp(4rem, 9vw, 7rem);
}

/* ---------- Foot ---------- */

.foot {
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 0.875rem;
  line-height: 1.7143; /* 14px on 24px */
}

.foot__rule {
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 4rem);
  padding-block: 2.75rem 2.5rem;
}

.foot__id {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
}

.foot__mark {
  width: auto;
  height: 3.25rem;
}

.foot__name {
  color: var(--stone);
}

.foot__col {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.foot__head {
  margin-bottom: 0.35rem;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

.foot__col a {
  justify-self: start;
  color: var(--stone);
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .foot__col a:hover {
    color: var(--gold-hi);
  }
}

.foot__base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 3rem;
  padding-block: 1.75rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}

.foot__small {
  max-width: 44rem;
}

@media (max-width: 53.99rem) {
  .foot__in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

/* ---------- Plain pages: legal notice and not found ---------- */

.page {
  padding-top: calc(var(--mast) + env(safe-area-inset-top, 0px));
}

.page__in {
  display: grid;
  gap: 2.5rem;
  max-width: 46rem;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
}

.page__title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.page__meta {
  margin-top: 0.75rem;
  color: var(--mute);
  font-size: 0.9375rem;
}

.article {
  display: grid;
  gap: 2.25rem;
}

.article__part {
  display: grid;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--stone);
}

.article__part h2 {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  line-height: 1.2;
}

.article__part a {
  color: var(--gold-hi);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.25em;
}

@media (hover: hover) {
  .article__part a:hover {
    text-decoration-color: var(--gold-hi);
  }
}

.lost {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.75rem;
  min-height: calc(100svh - var(--mast) - 6rem);
  padding-block: 3rem;
}

.lost__text {
  max-width: 28rem;
  color: var(--stone);
  font-size: 1.1875rem;
  line-height: 1.6842;
}

/* ---------- An article: the Next investment page ---------- */

.paper {
  position: relative;
}

.paper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}

.paper__in {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4.5rem, 9vw, 7.5rem);
}

/* Contents: a quiet list in the left rail that keeps its place and marks where the reader is */
.paper__toc {
  position: sticky;
  top: calc(var(--mast) + 2rem);
  align-self: start;
  display: grid;
  gap: 1rem;
}

.paper__toc-title {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-style: italic;
  line-height: 1.3;
}

.toc {
  display: grid;
  border-left: 1px solid var(--line);
}

.toc__link {
  position: relative;
  display: block;
  padding: 0.4rem 0 0.4rem 1.1rem;
  color: var(--mute);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.3s ease;
}

.toc__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.3rem;
  width: 0.55rem;
  height: 0.85rem;
  margin-top: -0.425rem;
  background: var(--gold-hi);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
}

.toc__link[aria-current] {
  color: var(--ivory);
}

.toc__link[aria-current]::before {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .toc__link:hover {
    color: var(--ivory);
  }
}

.paper__body {
  display: grid;
  gap: clamp(3.75rem, 7vw, 5.5rem);
  max-width: 44rem;
  min-width: 0;
}

.paper__part {
  display: grid;
  gap: 1.75rem;
  min-width: 0;
}

.paper__title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 300;
  font-variation-settings: "opsz" 48;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.paper__text {
  display: grid;
  gap: 1.15rem;
  max-width: 38rem;
  color: var(--stone);
  font-size: 1.125rem;
  line-height: 1.7778; /* 18px on 32px */
}

.paper__opening {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-variation-settings: "opsz" 24;
  line-height: 1.5;
}

.paper__note {
  max-width: 38rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--gold-line);
  color: var(--mute);
  font-size: 0.875rem;
  line-height: 1.5714;
}

/* A line pulled out of the text, under the logo's own rule */
.pull {
  display: grid;
  gap: 1.5rem;
}

.pull .rule {
  max-width: 18rem;
}

.pull__quote {
  margin: 0;
}

.pull__quote p {
  max-width: 19em;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

.pull__by {
  color: var(--gold);
  font-size: 0.9375rem;
}

/* What we look for: each point a row, its name on the left */
.criteria {
  display: grid;
}

.criteria__item {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.45rem clamp(1.25rem, 3vw, 2.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}

.criteria__item:last-child {
  border-bottom: 1px solid var(--line);
}

.criteria__title,
.steps__title,
.routes__title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  font-variation-settings: "opsz" 28;
  line-height: 1.25;
}

.criteria__text,
.steps__text,
.routes__text {
  color: var(--stone);
}

/* How it works: a real sequence, so it is numbered */
.steps {
  display: grid;
  counter-reset: step;
}

.steps__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  counter-increment: step;
}

.steps__item:last-child {
  border-bottom: 1px solid var(--line);
}

.steps__item::before {
  content: counter(step);
  grid-row: 1 / span 2;
  color: var(--gold-hi);
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 300;
  font-variation-settings: "opsz" 60;
  line-height: 1;
}

.steps__title,
.steps__text {
  grid-column: 2;
}

/* The two ways to be part of the next one */
.routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.routes__item {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold-line);
}

.routes__text {
  margin-bottom: 0.4rem;
}

@media (max-width: 53.99rem) {
  .paper__in {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }

  .paper__toc {
    position: static;
  }

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

@media (max-width: 39.99rem) {
  .routes {
    grid-template-columns: minmax(0, 1fr);
  }

  .paper__text {
    font-size: 1.0625rem;
    line-height: 1.7647;
  }
}

/* ---------- The thread: a gold line that is drawn down the page as it is read ---------- */

main {
  position: relative;
}

.thread {
  display: none;
}

/* ---------- Motion ---------- */

@keyframes arrive {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(0.9rem); opacity: 0; }
}

@keyframes march {
  to { transform: translateX(1rem); }
}

@keyframes march-down {
  to { transform: translateY(1rem); }
}

@keyframes build-floor {
  0% { stroke-dashoffset: 1; opacity: 1; }
  16%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes build-lines {
  0%, 14% { stroke-dashoffset: 1; opacity: 1; }
  32%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes build-net {
  0%, 31% { transform: scaleY(0); opacity: 0; }
  33% { transform: scaleY(0); opacity: 1; }
  46%, 88% { transform: scaleY(1); opacity: 1; }
  96%, 100% { transform: scaleY(1); opacity: 0; }
}

@keyframes build-lights {
  0%, 46% { opacity: 0; }
  58%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes here {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The corner logo's entrance on the home page: the mark rises into place and the name
     is uncovered from the left. Leaving is quicker and plain. */
  .js[data-page="home"] .brand {
    transition: opacity 0.35s ease, visibility 0s;
  }

  .js[data-page="home"] .brand__mark {
    transition: opacity 0.55s ease, transform 0.75s var(--ease-out);
  }

  .js[data-page="home"] .brand__reveal,
  .js[data-page="home"] .brand__word {
    transition: transform 0.85s var(--ease-out) 0.12s;
  }

  .js[data-page="home"].brand-away .brand {
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .js[data-page="home"].brand-away .brand__mark {
    opacity: 0;
    transform: translate3d(0, 0.4rem, 0) scale(0.82);
    transition: opacity 0.2s ease, transform 0s linear 0.3s;
  }

  .js[data-page="home"].brand-away .brand__reveal {
    transform: translate3d(-101%, 0, 0);
    transition: transform 0s linear 0.3s;
  }

  .js[data-page="home"].brand-away .brand__word {
    transform: translate3d(101%, 0, 0);
    transition: transform 0s linear 0.3s;
  }

  /* With the menu open on the home page, the small logo is shown at once */
  .js[data-page="home"].brand-away.menu-open .brand__mark {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease;
  }

  .js[data-page="home"].brand-away.menu-open .brand__reveal,
  .js[data-page="home"].brand-away.menu-open .brand__word {
    transform: none;
    transition: none;
  }

  /* The cue under the logo keeps drawing downwards */
  .intro__cue::after {
    animation: cue 2.4s var(--ease-in-out) infinite;
  }

  /* A later visit to the page in the same session: the logo simply arrives */
  .intro-seen .intro__center {
    animation: arrive 1.1s var(--ease-out) both;
  }

  .intro-seen .intro__cue {
    animation: appear 0.8s ease 0.7s both;
  }

  /* The edge lights come up gently once the logo is in place */
  .intro-live .crest__lights {
    animation: appear 1.6s ease 0.25s both;
  }

  /* Nothing on the stage runs while it is scrolled out of sight */
  .intro-asleep .intro__cue::after {
    animation-play-state: paused;
  }

  /* Inner pages: the head rises in once. */
  .js .pagehead__in > * {
    animation: rise 1s var(--ease-out) both;
  }

  .js .pagehead__in > :nth-child(2) { animation-delay: 0.08s; }
  .js .pagehead__in > :nth-child(3) { animation-delay: 0.16s; }
  .js .pagehead__in > :nth-child(4) { animation-delay: 0.26s; }

  /* A portrait arrives: the frame is uncovered from its bottom edge while the photograph
     settles back into place, then the gold line under it draws across and the name follows.
     The three arrive one after another. Only transform and opacity move. */
  .people > :nth-child(2) { --d: 0.16s; }
  .people > :nth-child(3) { --d: 0.32s; }

  .js [data-portrait] .portrait::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--black);
    transition: transform 1.4s var(--ease-in-out) var(--d, 0s);
  }

  .js [data-portrait].is-in .portrait::after {
    transform: translate3d(0, -101%, 0);
  }

  .js [data-portrait] .portrait__img {
    transform: scale(1.14);
    transition: transform 2.6s var(--ease-out) var(--d, 0s), scale 1.6s var(--ease-out);
  }

  .js [data-portrait].is-in .portrait__img {
    transform: none;
  }

  .js [data-portrait] .person__text::before {
    transform: scaleX(0);
    transition: transform 1.2s var(--ease-in-out) calc(var(--d, 0s) + 0.5s);
  }

  .js [data-portrait].is-in .person__text::before {
    transform: none;
  }

  .js [data-portrait] .person__name,
  .js [data-portrait] .person__role,
  .js [data-portrait] .person__note {
    opacity: 0;
    transform: translate3d(0, 0.6rem, 0);
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  }

  .js [data-portrait].is-in .person__name,
  .js [data-portrait].is-in .person__role,
  .js [data-portrait].is-in .person__note {
    opacity: 1;
    transform: none;
  }

  .js [data-portrait].is-in .person__name { transition-delay: calc(var(--d, 0s) + 0.6s); }
  .js [data-portrait].is-in .person__role { transition-delay: calc(var(--d, 0s) + 0.72s); }
  .js [data-portrait].is-in .person__note { transition-delay: calc(var(--d, 0s) + 0.84s); }

  /* Where there is a pointer, a portrait leans in a little under it */
  @media (hover: hover) {
    .js [data-portrait].is-in:hover .portrait__img {
      scale: 1.04;
    }
  }

  /* The small row of faces: one after another, then the words */
  .js [data-faces] .faces__item {
    opacity: 0;
    transform: translate3d(0, 0.6rem, 0) scale(0.92);
    transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out);
  }

  .js [data-faces].is-in .faces__item {
    opacity: 1;
    transform: none;
  }

  .js [data-faces] .faces__item:nth-child(2) { transition-delay: 0.1s; }
  .js [data-faces] .faces__item:nth-child(3) { transition-delay: 0.2s; }

  .js [data-faces] .faces__text {
    opacity: 0;
    transition: opacity 1s ease 0.35s;
  }

  .js [data-faces].is-in .faces__text {
    opacity: 1;
  }

  /* The rule over a pulled quote draws out from its diamond */
  .js .pull .rule::before,
  .js .pull .rule::after {
    transform: scaleX(0);
    transition: transform 1.4s var(--ease-in-out) 0.2s;
  }

  .js .pull .rule::before {
    transform-origin: right;
  }

  .js .pull .rule::after {
    transform-origin: left;
  }

  .js .pull.is-in .rule::before,
  .js .pull.is-in .rule::after {
    transform: none;
  }

  /* The thread and the diamond that rides at the reader's place on it */
  .js .thread {
    position: absolute;
    top: var(--thread-top, 0px);
    bottom: 0;
    left: max(0.55rem, calc((100vw - min(78rem, 100vw)) / 2 + var(--gutter) - 2.25rem));
    display: block;
    width: 1px;
    pointer-events: none;
  }

  .thread__line {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(207, 154, 86, 0), var(--gold) 5rem);
    opacity: 0.5;
    transform: scaleY(var(--drawn, 0));
    transform-origin: top;
    will-change: transform;
  }

  .thread__head {
    position: absolute;
    top: -0.425rem;
    left: -0.25rem;
    width: 0.55rem;
    height: 0.85rem;
    opacity: var(--lit, 0);
    transform: translate3d(0, var(--at, 0px), 0);
    will-change: transform;
  }

  .thread__head::before {
    content: "";
    position: absolute;
    inset: -0.9rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(235, 184, 102, 0.42), rgba(235, 184, 102, 0));
  }

  .thread__head::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold-hi);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }

  /* On phones the margin is too narrow for the thread, so it is left out there */
  @media (max-width: 39.99rem) {
    .js .thread {
      display: none;
    }
  }

  /* Statements start dim and light up word by word at the pace of the scroll */
  .js [data-speak] .word {
    opacity: var(--o, 0.14);
  }

  /* The rule above each band draws across as the band arrives */
  .js .band::before,
  .js .lead::before,
  .js .closing::before,
  .js .paper::before {
    transform: scaleX(0);
    transition: transform 1.6s var(--ease-in-out);
  }

  .js .is-seen::before {
    transform: scaleX(1);
  }

  /* A photograph is uncovered from the bottom edge while it settles back into place */
  .js [data-shot] .shot__frame {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.5s var(--ease-in-out);
  }

  .js [data-shot] .shot__img {
    transform: scale(1.12);
    transition: transform 2.2s var(--ease-out);
  }

  .js [data-shot].is-in .shot__frame {
    clip-path: inset(0 0 0 0);
  }

  .js [data-shot].is-in .shot__img {
    transform: none;
  }

  /* The court builds itself in four passes, holds, and starts again */
  .js [data-build-loop].is-in .build__floor { animation: build-floor 11s var(--ease-in-out) infinite; }
  .js [data-build-loop].is-in .build__lines path { animation: build-lines 11s var(--ease-in-out) infinite; }
  .js [data-build-loop].is-in .build__net { animation: build-net 11s var(--ease-out) infinite; transform-origin: 50% 133px; transform-box: view-box; }
  .js [data-build-loop].is-in .build__lights { animation: build-lights 11s ease infinite; }
  .js [data-build-loop] .build__floor,
  .js [data-build-loop] .build__lines path { stroke-dasharray: 1; }

  /* The dial winds round to today */
  .js [data-dial] .dial__arc {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.4s var(--ease-in-out) 0.3s;
  }

  .js [data-dial].is-in .dial__arc {
    stroke-dashoffset: calc(1 - var(--part, 0.32));
  }

  /* The stretch being worked on keeps moving */
  .js .track__work::before {
    animation: march 1.1s linear infinite;
  }

  .js [data-track]:not(.is-in) + .track__work {
    opacity: 0;
  }

  .js .track__work {
    transition: opacity 0.8s ease 2.2s;
  }

  /* The tracker's line runs out to where things stand, and its steps arrive in order */
  .js [data-track]::after {
    transform: scaleX(0);
    transition: transform 2.2s var(--ease-in-out) 0.2s;
  }

  .js [data-track].is-in::after {
    transform: scaleX(var(--done, 0.6));
  }

  @media (max-width: 63.99rem) {
    .js .track__work::before {
      animation-name: march-down;
    }

    .js [data-track]::after {
      transform: scaleY(0);
    }

    .js [data-track].is-in::after {
      transform: scaleY(var(--done, 0.6));
    }
  }

  .js [data-track] .track__step {
    opacity: 0;
    transform: translate3d(0, 0.85rem, 0);
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  }

  .js [data-track].is-in .track__step {
    opacity: 1;
    transform: none;
  }

  .js [data-track] .track__step:nth-child(2) { transition-delay: 0.3s; }
  .js [data-track] .track__step:nth-child(3) { transition-delay: 0.6s; }
  .js [data-track] .track__step:nth-child(4) { transition-delay: 0.9s; }
  .js [data-track] .track__step:nth-child(5) { transition-delay: 1.2s; }
  .js [data-track] .track__step:nth-child(6) { transition-delay: 1.5s; }

  .js [data-track].is-in .track__step.is-now::after {
    animation: here 2.8s ease-in-out 2.4s infinite;
  }

  /* The open hours run out along the day */
  .js [data-hours] .hours__open {
    transform: scaleX(0);
    transition: transform 1.6s var(--ease-in-out) 0.5s;
  }

  .js [data-hours].is-in .hours__open {
    transform: scaleX(1);
  }

  /* Tables and lists fill in row by row */
  .js [data-build] > * {
    opacity: 0;
    transform: translate3d(0, 0.85rem, 0);
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  }

  .js [data-build].is-in > * {
    opacity: 1;
    transform: none;
  }

  .js [data-build] > :nth-child(2) { transition-delay: 0.07s; }
  .js [data-build] > :nth-child(3) { transition-delay: 0.14s; }
  .js [data-build] > :nth-child(4) { transition-delay: 0.21s; }
  .js [data-build] > :nth-child(5) { transition-delay: 0.28s; }
  .js [data-build] > :nth-child(6) { transition-delay: 0.35s; }
  .js [data-build] > :nth-child(7) { transition-delay: 0.42s; }
  .js [data-build] > :nth-child(8) { transition-delay: 0.49s; }

  /* Things arrive as they are scrolled to. Without scripts they are simply there. */
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 2rem, 0) scale(0.985);
    transform-origin: 50% 100%;
    transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 0.09s);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal="fade"] {
    transform: none;
  }

  .js [data-reveal="panel"] {
    transform: translate3d(0, 2.5rem, 0) scale(0.985);
    transition-duration: 1.2s, 1.4s;
  }

  /* The court plan draws itself, one court after the next. */
  .js .courts [data-draw] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.3s var(--ease-in-out);
    transition-delay: calc(var(--c, 0) * 0.11s + 0.2s);
  }

  .js .courts.is-in [data-draw] {
    stroke-dashoffset: 0;
  }

  .js .courts [data-draw="net"] {
    transition-delay: calc(var(--c, 0) * 0.11s + 0.75s);
  }

  .courts__court:nth-of-type(1) { --c: 0; }
  .courts__court:nth-of-type(2) { --c: 1; }
  .courts__court:nth-of-type(3) { --c: 2; }
  .courts__court:nth-of-type(4) { --c: 3; }
  .courts__court:nth-of-type(5) { --c: 4; }
  .courts__court:nth-of-type(6) { --c: 5; }
  .courts__court:nth-of-type(7) { --c: 6; }

  /* A gold line follows you down the four stages. */
  .js .stages::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(to bottom, var(--gold-hi), var(--gold));
    transform: scaleY(var(--fill, 0));
    transform-origin: top;
  }

  .js .stages .stage {
    padding-left: 1.5rem;
  }
}

/* ---------- Print: the same words, black on white ---------- */

@media print {
  :root {
    --black: #fff;
    --ivory: #111;
    --stone: #333;
    --mute: #555;
    --gold: #7a5320;
    --gold-hi: #7a5320;
    --gold-lo: #7a5320;
    --gold-line: #b9a184;
    --line: #ccc;
    --line-strong: #999;
    --navy: #fff;
    --navy-hi: #fff;
    --navy-deep: #fff;
    --navy-edge: #ccc;
    --on-navy: #333;
    --on-navy-mute: #555;
  }

  .masthead,
  .skip,
  .actions,
  .intro__cue,
  .crest__shine,
  .crest__seams,
  .crest__ring,
  .crest__lights,
  .form,
  .copy-button {
    display: none !important;
  }

  .intro,
  .intro__stage {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .crest {
    width: 12rem;
    background: #000;
  }

  .crest__group,
  .crest__zone {
    display: none !important;
  }

  .crest__whole,
  .intro__welcome,
  .portrait__img,
  .person__name,
  .person__role,
  .person__note,
  .faces__item,
  .faces__text,
  [data-reveal],
  [data-build] > *,
  .track__step,
  .hours__open,
  .shot__frame,
  .shot__img,
  .word {
    opacity: 1 !important;
    transform: none !important;
  }

  .thread,
  .portrait::after,
  .paper__toc {
    display: none !important;
  }

  .button--gold {
    background: none;
    border-color: #999;
    color: #111;
  }

  .pagehead,
  .page {
    padding-top: 0;
  }

  .band__name {
    position: static;
  }

  .holding {
    background: none;
  }
}