/* A dark stage and sheets of paper. Each page opens on a painting under giant type, held in place
   while the page scrolls: its parts travel at their own rates (motion.js gives every block marked
   data-track its progress --p, 0 to 1, and the rules below turn that into movement), and a torn
   sheet of paper rises over it carrying the figures, tables and charts. The charts read the paper's
   colours from the variables here (charts.js). */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* A chart draws on a canvas, which takes a family but no figure style: the same file, with
   tabular figures as its default. */
@font-face {
  font-family: "Inter Figures";
  src: url("fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-feature-settings: "tnum";
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Imperial Script";
  src: url("fonts/ImperialScript-Regular.woff2") format("woff2");
  font-display: block;
}

:root {
  color-scheme: dark;
  --svh: 1svh; /* the small viewport's height, a hundredth; vh where svh is unknown (below) */
  /* The stage. */
  --stage: #0a0a08;
  --bone: #f3f0e4; /* type on the stage */
  --bone-2: #c9c6b7;
  --smoke: #918e7f; /* the quiet text there */
  --hair: rgba(243, 240, 228, 0.2); /* construction lines */
  --gilt: #e2b04a; /* gold leaf: the stage's one accent */
  /* The sheet. */
  --paper: #e1ddce;
  --panel: #f5f2e8; /* a block laid on the paper */
  --shade: #d7d3c3;
  --fibre: #f2efe3; /* what shows where the paper tore */
  --ink: #15140f;
  --ink-2: #3b3a30;
  --muted: #5f5d51;
  --rule: #c8c4b3;
  --lapis: #2a3fbf; /* the book, and the paper's one accent */
  --pos: #1c6b4f; /* a gain */
  --neg: #b3341d; /* a loss */
  --ochre: #7a5a10;
  /* What the charts take: plain hex, the library reads nothing else. */
  --surface: #f5f2e8;
  --grid: #e5e1d2;
  --axis: #bfbbaa;
  --series: #2a3fbf;
  --benchmark: #75736a; /* SPY, the context: 3.5:1 on paper, 4.2:1 on a panel */
  --up: #0f7a5c; /* a rising candle: hollow, teal */
  --down: #c4461a; /* a falling candle: filled, vermilion */
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --script: "Imperial Script", "Snell Roundhand", "Apple Chancery", cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bar: 60px;
  --gutter: clamp(20px, 3.4vw, 48px);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* The fixed bar covers the window's top: what takes the focus, or is found, stops below it. */
html {
  scroll-padding-top: calc(var(--bar) + 16px);
}

body {
  margin: 0;
  background: var(--stage);
  color: var(--bone);
  font: 500 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

/* ------------------------------------------------------------ the mark, the bar of pages */

.mark circle,
.mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
}

.mark .body {
  fill: currentColor;
}

/* The bar floats over the stage in the stage's colours and takes the paper's once a sheet is under it. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--bar);
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  color: var(--bone);
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease;
  view-transition-name: topbar;
}

/* A little dusk behind the bar, so that it reads over a pale sky. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  background: linear-gradient(rgba(10, 10, 8, 0.6), transparent);
  pointer-events: none;
  transition: opacity 350ms ease;
}

[data-over="paper"] .topbar {
  border-bottom-color: var(--rule);
  background: rgba(225, 221, 206, 0.95);
  color: var(--ink);
}

[data-over="paper"] .topbar::before {
  opacity: 0;
}

/* Over the colophon, whose lines pass under the bar on a window shorter than it: the stage's own black. */
[data-over="foot"] .topbar {
  border-bottom-color: var(--hair);
  background: var(--stage);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand .mark {
  width: 28px;
  height: 28px;
  transition: transform 700ms var(--ease);
}

.brand:hover .mark {
  transform: rotate(180deg); /* the mark reads the same turned over */
}

.wordmark {
  font: 800 15px var(--sans);
  letter-spacing: -0.02em;
}

.tabs {
  position: relative;
  display: flex;
  align-self: stretch;
  gap: 2px;
}

.tabs a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font: 650 13px var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.tabs a span {
  opacity: 0.72;
  transition: opacity 250ms ease;
}

.tabs a i {
  color: var(--gilt);
  font: 300 13px var(--serif);
}

[data-over="paper"] .tabs a i {
  color: var(--lapis);
}

.tabs a:hover span,
.tabs a[aria-current="page"] span {
  opacity: 1;
}

/* The rule under the page in view; it slides to the next. */
.tab-rule {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: var(--rule-width, 0);
  height: 2px;
  background: currentColor;
  transform: translateX(var(--rule-x, 0));
  transition: transform 520ms var(--ease), width 520ms var(--ease);
}

.notice {
  position: fixed;
  top: calc(var(--bar) + 10px);
  left: 50%;
  z-index: 40;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--gilt);
  color: var(--ink);
  font-weight: 650;
  font-size: 13px;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}

.notice button {
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 750;
}

/* ------------------------------------------------------------ a scene: the stage held in place */

@supports not (height: 1svh) {
  :root {
    --svh: 1vh;
  }
}

/* The scene is taller than the window and the stage inside it stays put for the difference; the
   sheet that follows is pulled up over the scene, so it rises across the held stage. --scene is
   the scene's height and --rise where the sheet's top stands before any scrolling: on a data page
   the paper already shows at the foot of the first screen, a flick from the figures. */
[data-page] {
  --scene: calc(175 * var(--svh));
  --rise: calc(74 * var(--svh));
  --pin: calc(var(--scene) - calc(100 * var(--svh))); /* how long the scene holds its stage */
}

#home {
  --scene: calc(300 * var(--svh));
  --rise: calc(188 * var(--svh));
}


.scene {
  --p: 0;
  position: relative;
  height: var(--scene);
}

.stage {
  position: sticky;
  top: 0;
  height: calc(100 * var(--svh));
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--stage);
  color: var(--bone);
}

/* The painting. It starts close on one detail and draws back as the page scrolls. */
.picture {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform-origin: var(--focus, 50% 50%);
  scale: calc(1.34 - 0.34 * var(--p));
  translate: 0 calc(var(--p) * -5%);
  will-change: scale, translate;
}


/* The fleet sails a little to the right as the plate draws back. */
#live .picture img {
  translate: calc(-3vw + var(--p) * 3vw) calc(var(--p) * -3%);
}

/* Dusk over the painting: darkest where the type stands. */
.veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 10, 8, 0.72) 0%, rgba(10, 10, 8, 0.3) 30%, rgba(10, 10, 8, 0.46) 58%, rgba(10, 10, 8, 0.92) 100%),
    linear-gradient(90deg, rgba(10, 10, 8, 0.55), transparent 62%);
}

#live .veil {
  background:
    linear-gradient(180deg, rgba(10, 10, 8, 0.84) 0%, rgba(10, 10, 8, 0.56) 42%, rgba(10, 10, 8, 0.5) 60%, rgba(10, 10, 8, 0.94) 100%),
    linear-gradient(90deg, rgba(10, 10, 8, 0.6), transparent 62%);
}

/* The construction lines of a drawing, hairlines over the painting; they open out as it draws back. */
.lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--hair);
  stroke-width: 0.9;
  scale: calc(1 + var(--p) * 0.22);
  rotate: calc(var(--p) * 7deg);
}

/* While a scene travels (motion.js marks it .moving) what turns and grows in it has a layer of its
   own, so the held stage is not repainted every frame; at rest the layer goes and it is drawn
   sharp at its size. */
.scene.moving .lines,
.scene.moving .amp {
  will-change: scale, rotate;
}

/* A line that draws itself: every such path is one unit long (pathLength). */
.draw {
  stroke-dasharray: 1;
}

.js .draw {
  stroke-dashoffset: 1;
}

.stage.in .lines .draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2600ms var(--ease) calc(var(--step, 0) * 150ms + 250ms);
}

.lines .draw:nth-child(2) { --step: 1; }
.lines .draw:nth-child(3) { --step: 2; }
.lines .draw:nth-child(4) { --step: 3; }
.lines .draw:nth-child(5) { --step: 4; }
.lines .draw:nth-child(6) { --step: 5; }
.lines .draw:nth-child(7) { --step: 6; }
.lines .draw:nth-child(8) { --step: 7; }
.lines .draw:nth-child(9) { --step: 8; }

/* Whose painting it is, as a museum label. */
.credit {
  position: absolute;
  top: calc(var(--bar) + 20px);
  right: var(--gutter);
  max-width: 34ch;
  color: var(--bone-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  text-shadow: 0 0 2px rgba(10, 10, 8, 0.95), 0 0 8px rgba(10, 10, 8, 0.9), 0 0 18px rgba(10, 10, 8, 0.7);
  opacity: calc(1 - var(--p) * 2.5);
  will-change: opacity;
}

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 0;
  color: var(--bone-2);
  font-size: 12.5px;
  font-weight: 650;
}

/* A short rule between the parts of a label. */
.eyebrow > span + span:not(.tag)::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 12px 4px;
  background: currentColor;
  opacity: 0.6;
}

.eyebrow > span:empty {
  display: none;
}

.eyebrow > .tag {
  margin-left: 14px;
}

/* A line of the narrative: a light serif set tight, its first letter in a copperplate hand. */
.narrative {
  font: 300 clamp(26px, 3.1vw, 46px) / 1 var(--serif);
  letter-spacing: -0.035em;
}

.initial {
  display: inline-block;
  margin: 0 -0.02em 0 -0.04em;
  color: var(--gilt);
  font: 400 2.3em / 0 var(--script);
  letter-spacing: 0;
  vertical-align: -0.08em;
}

.note {
  max-width: 62ch;
  color: var(--bone-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

/* A cue to scroll on: a word and a hairline down which a bead keeps running. It comes in with the
   title and is gone after the first stretch of scrolling. On Home it sits at the stage's foot,
   between the narrative and the lede; on the other pages at the right, just above the paper. */
.cue {
  position: absolute;
  left: 50%;
  bottom: calc(4 * var(--svh));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(10, 10, 8, 0.9);
  translate: -50% 0;
  opacity: clamp(0, calc(1 - var(--s, 0) * 10), 1);
  transition: opacity 600ms ease;
  pointer-events: none;
}

.cue i {
  position: relative;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(243, 240, 228, 0.4);
}

.cue i::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 14px;
  border-radius: 3px;
  background: var(--gilt);
  animation: cue 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cue {
  from {
    translate: 0 -16px;
  }

  to {
    translate: 0 58px;
  }
}

/* The data pages: at the right, clear of the title, above the torn edge where the paper rests. */
.section-head ~ .cue {
  left: auto;
  right: var(--gutter);
  bottom: calc(calc(100 * var(--svh)) - var(--rise) + clamp(26px, 5.2vw, 76px) + 16px);
  translate: none;
  opacity: clamp(0, calc(1 - var(--s, 0) * 4), 1);
}

.js .stage:not(.in) .cue {
  opacity: 0;
}

/* ------------------------------------------------------------ I. the hero */

/* Two stretches of the hero's scroll: --a while the two words close on each other, --b while the
   sheet comes up over the stage. */
.hero {
  --a: clamp(0, calc(var(--p) / 0.5), 1);
  --b: clamp(0, calc((var(--p) - 0.44) / 0.5), 1);
}

/* The storm sky draws back from the city's spire... */
.hero .sky img {
  object-position: 62% 16%;
  transform-origin: 68% 46%;
  scale: calc(1.42 - 0.4 * var(--a));
  translate: 0 calc(var(--p) * -7%);
}

/* ...while the hills under it climb into view at their own pace. */
.hero .land {
  inset: auto 0 0;
  z-index: -3;
  height: 52%;
  -webkit-mask-image: linear-gradient(transparent, #000 34%);
  mask-image: linear-gradient(transparent, #000 34%);
  translate: 0 calc((1 - var(--a)) * 64% - var(--b) * 12%);
  will-change: translate;
}

.hero .land img {
  object-position: 50% 78%;
  scale: 1.04;
  translate: none;
}

/* A break of light in the storm as the words meet. */
.hero .veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 52% at 50% 44%, rgba(255, 244, 214, 0.5), rgba(226, 176, 74, 0.14) 46%, transparent 72%);
  mix-blend-mode: screen;
  opacity: clamp(0, min(calc((var(--p) - 0.16) / 0.2), calc((0.62 - var(--p)) / 0.2)), 1);
  will-change: opacity;
}

/* An armillary sphere in hairlines, turning as the page scrolls. */
.armilla {
  --size: min(calc(66 * var(--svh)), 60vw);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  transform: perspective(1600px) rotateX(63deg) rotateZ(calc(24deg + var(--p) * 300deg));
  transform-style: preserve-3d;
  scale: calc(0.82 + var(--a) * 0.3);
}

.armilla i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(243, 240, 228, 0.32);
  border-radius: 50%;
  /* Faded ring by ring: an opacity on the sphere would flatten it into one plane. */
  opacity: clamp(0, calc(0.35 + var(--a) * 0.65 - var(--b)), 1);
}

.armilla i:nth-child(2) { transform: rotateY(90deg); }
.armilla i:nth-child(3) { transform: rotateX(90deg); }
.armilla i:nth-child(4) { border-color: rgba(226, 176, 74, 0.7); transform: rotateY(66.5deg); } /* the ecliptic, in gold */
.armilla i:nth-child(5) { inset: 4.15%; transform: translateZ(calc(var(--size) * 0.1995)); } /* the tropics */
.armilla i:nth-child(6) { inset: 4.15%; transform: translateZ(calc(var(--size) * -0.1995)); }

.front {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  padding: calc(var(--bar) + 20px) var(--gutter) calc(15 * var(--svh));
  opacity: calc(1 - var(--b) * 1.1);
  translate: 0 calc(var(--b) * -16 * var(--svh));
}

.hero .eyebrow {
  translate: 0 calc(var(--a) * -30px);
  will-change: translate;
}

.hero .eyebrow > span {
  opacity: calc(1 - var(--a) * 1.6);
  will-change: opacity;
}

#home h1 {
  position: relative;
  align-self: center;
  font: 800 clamp(72px, min(24vw, calc(29 * var(--svh))), 300px) / 0.86 var(--sans);
  letter-spacing: -0.05em;
}

/* Each word starts at its own edge of the stage; a line travels half its width one way and the word
   half its own width back, so the two come to rest one above the other in the middle. */
#home h1 .line {
  display: block;
}

#home h1 .line.one {
  translate: calc(var(--a) * 50%) 0;
}

#home h1 .line.two {
  text-align: right;
  translate: calc(var(--a) * -50%) 0;
}

.word {
  display: inline-block;
  margin: -0.06em -0.06em -0.1em;
  padding: 0.06em 0.06em 0.1em;
  overflow: hidden;
  will-change: translate;
}

.word.news {
  translate: calc(var(--a) * -50%) 0;
}

.word.price {
  translate: calc(var(--a) * 50%) 0;
}

/* A word rises from behind its own baseline when the page opens. */
.word > span,
.title > span {
  display: inline-block;
  transition: transform 1300ms var(--ease);
}

.js .word > span,
.js .title > span {
  transform: translateY(108%);
}

.word.price > span {
  transition-delay: 140ms;
}

.stage.in .word > span,
.stage.in .title > span {
  transform: none;
}

/* The ampersand between them, in the copperplate hand: it swells and tips as they meet. */
.amp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  color: var(--gilt);
  font: 400 1.25em / 0 var(--script);
  letter-spacing: 0;
  translate: -50% 0;
  scale: calc(1 + var(--a) * 1.7);
  rotate: calc(var(--a) * -16deg);
}

.amp > span {
  display: inline-block;
  transition: transform 1500ms var(--ease) 420ms, opacity 900ms ease 420ms;
}

.js .amp > span {
  opacity: 0;
  transform: scale(0.6) rotate(-20deg);
}

.stage.in .amp > span {
  opacity: 1;
  transform: none;
}

.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40ch);
  align-items: end;
  gap: 24px 48px;
}

.hero .narrative {
  translate: calc(var(--a) * 9vw) 0;
  will-change: translate;
}

.lede {
  color: var(--bone-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.22;
  translate: calc(var(--a) * -6vw) 0;
  will-change: translate;
}

.hero .eyebrow,
.hero .foot {
  transition: opacity 900ms ease 500ms;
}

.js .stage:not(.in) .foot,
.js .stage:not(.in) .eyebrow,
.js .stage:not(.in) .section-head .aside {
  opacity: 0;
}

/* The narrative waits for its note (written with the data), so the two come in laid out together. */
.js body:not(.failed) .section-head .aside:has(.note:empty) {
  opacity: 0;
}

/* ------------------------------------------------------------ II to IV: a page's opening scene */

.section-head {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
  /* The title stands clear of the torn edge peeking in at the foot. */
  padding: calc(var(--bar) + 16px) var(--gutter) calc(calc(100 * var(--svh)) - var(--rise) + clamp(26px, 5.2vw, 76px) + calc(2 * var(--svh)));
}

.section-head .eyebrow {
  translate: 0 calc(var(--p) * -40px);
  will-change: translate;
}

.section-head .eyebrow > span {
  opacity: calc(1 - var(--p) * 2.4);
  will-change: opacity;
}

.section-head .aside > * {
  opacity: calc(1 - var(--s, 0) * 5);
  will-change: opacity;
}

/* The narrative line and the note ride above the title and leave faster than it does. */
.section-head .aside {
  grid-row: 3;
  display: grid;
  gap: 12px;
  margin-bottom: clamp(14px, calc(2.6 * var(--svh)), 30px);
  transition: opacity 900ms ease 450ms;
  translate: calc(var(--p) * 18vw) calc(var(--s, 0) * -1.3 * var(--pin)); /* up at the scroll's own pace, like the title */
  will-change: translate;
}

.title {
  grid-row: 4;
  justify-self: start;
  margin: -0.06em -0.06em -0.12em;
  padding: 0.06em 0.06em 0.12em;
  overflow: hidden;
  font: 800 clamp(60px, min(19.5vw, calc(25 * var(--svh))), 280px) / 0.86 var(--sans);
  letter-spacing: -0.045em;
  transform-origin: 0 0;
  scale: calc(1 - 0.5 * var(--s, 0));
  translate: calc(var(--p) * 4vw) calc(var(--s, 0) * -1 * var(--pin));
  opacity: clamp(0, calc((0.44 - var(--s, 0)) / 0.12), 1); /* gone before it reaches the bar */
  will-change: translate, scale, opacity;
}

/* The page's number, a giant outline that drifts the other way. */
.chapter {
  position: absolute;
  top: calc(var(--bar) + 62px);
  right: var(--gutter);
  z-index: -1;
  color: transparent;
  font: 300 min(calc(46 * var(--svh)), 44vw) / 0.8 var(--serif);
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1px rgba(243, 240, 228, 0.42);
  translate: calc(var(--p) * -16vw) calc(var(--p) * calc(12 * var(--svh)));
  will-change: translate;
}

/* ------------------------------------------------------------ the sheet of paper */

.sheet {
  position: relative;
  z-index: 2;
  min-height: calc(130 * var(--svh));
  margin-top: calc(var(--rise) - var(--scene));
  margin-bottom: clamp(26px, 5.2vw, 76px); /* room for the torn foot */
  padding: 44px 0 72px;
  overflow-x: hidden;
  overflow-x: clip;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .19  0 0 0 0 .14  1.1 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink-2);
  color-scheme: light;
}

/* The torn edge, a strip above the sheet (torn.js draws it): pale fibre, then the paper. */
.tear {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  display: block;
  width: 100%;
  height: clamp(26px, 5.2vw, 76px);
  filter: drop-shadow(0 -8px 16px rgba(0, 0, 0, 0.5));
  clip-path: inset(-120px -120px 0 -120px); /* the shadow falls on the stage, not on the sheet below */
  pointer-events: none;
}

.tear.foot {
  top: calc(100% - 1px);
  bottom: auto;
  transform: scaleY(-1);
}

.tear .fringe {
  fill: var(--fibre);
}

.tear .paper {
  fill: var(--paper);
}

/* A giant line of words between two parts of a sheet; it slides sideways as the page scrolls. */
.band {
  margin: clamp(28px, 5vw, 64px) 0;
  overflow: hidden;
  overflow: clip visible; /* sideways only: the g's and y's hang below */
}

.band span {
  display: inline-block;
  color: transparent;
  font: 800 clamp(64px, 12.5vw, 190px) / 0.9 var(--sans);
  letter-spacing: -0.06em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(21, 20, 15, 0.5);
  translate: calc(8% - var(--p) * 46%) 0;
  will-change: translate;
}

/* A label on the paper. */
.label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

h2,
h3 {
  color: var(--ink);
  font: 750 15px / 1.15 var(--sans);
  letter-spacing: -0.015em;
}

.subhead {
  margin-bottom: 26px;
  font: 300 clamp(26px, 3vw, 42px) / 1.02 var(--serif);
  letter-spacing: -0.035em;
}

/* ------------------------------------------------------------ I. the record and the index */

.record {
  --draw: clamp(0, calc((var(--p) - 0.02) / 0.14), 1);
  padding-top: 12px;
}

.record figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#record-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#record-art path {
  fill: none;
}

#record-art #hatch path {
  stroke: var(--benchmark);
  stroke-width: 0.7;
}

/* The two lines are drawn by the scroll, and the ground under the book's comes up with them. */
#record-art .draw {
  stroke-dashoffset: calc(1 - var(--draw));
}

#record-art .ground {
  fill: url(#hatch);
  opacity: calc(var(--draw) * 0.55);
}

#record-art .base {
  stroke: var(--ink);
  stroke-width: 1;
}

#record-art .bench {
  stroke: var(--benchmark);
  stroke-width: 1.6;
}

#record-art .book {
  stroke: var(--series);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.years {
  position: relative;
  height: 24px;
}

.years span {
  position: absolute;
  top: 0;
  padding: 7px 0 0 7px;
  border-left: 1px solid var(--ink);
  color: var(--muted);
  font: 650 11px / 1 var(--sans);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.years span.end {
  padding: 7px 7px 0 0;
  border-left: 0;
  border-right: 1px solid var(--ink);
  translate: -100% 0;
}

/* The way to the other pages, as a book's table of chapters: number, name, a dotted leader, a figure. */
.plates {
  --settle: clamp(0, calc(var(--p) / 0.26), 1);
  display: grid;
  border-top: 2px solid var(--ink);
}

.plate {
  display: grid;
  grid-template-columns: 2.6em auto minmax(24px, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(10px, 1.6vw, 22px);
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  translate: calc((1 - var(--settle)) * var(--from, 0) * 1vw) 0;
  will-change: translate;
}

.plate:nth-child(odd) { --from: -10; }
.plate:nth-child(even) { --from: 10; }

.numeral {
  color: var(--lapis);
  font: 300 clamp(20px, 2.2vw, 30px) / 1 var(--serif);
}

.plate-title {
  font: 800 clamp(40px, 7.4vw, 104px) / 0.9 var(--sans);
  letter-spacing: -0.055em;
  transition: transform 500ms var(--ease);
}

.plate:hover .plate-title {
  transform: translateX(12px);
}

.leader {
  align-self: end;
  margin-bottom: 0.5em;
  border-bottom: 2px dotted rgba(21, 20, 15, 0.45);
}

.plate-figure {
  font: 800 clamp(26px, 4.2vw, 58px) / 1 var(--sans);
  letter-spacing: -0.05em;
  text-align: right;
}

.plate-note {
  grid-column: 2 / -1;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------ figures in blocks */

/* A row of figures, level wherever the page stands. */
.cells {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

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

.cells.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.tile {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border-top: 2px solid var(--ink);
  background: var(--panel);
}

.tile.lead {
  grid-row: span 2;
  justify-content: space-between;
  padding: 22px 24px 26px;
  container-type: inline-size;
}

.tile .label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
}

.tile .value {
  margin-top: 12px;
  color: var(--ink);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.tile.lead .value {
  margin-top: 44px;
  font-size: clamp(56px, 9vw, 144px);
  font-size: clamp(56px, 25cqi, 144px); /* a quarter of its tile: '+124.8%' never runs under the next */
  white-space: nowrap;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.tile .value.small {
  font-size: 23px;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.tile .sub {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.up,
.tile .value.up {
  color: var(--pos);
}

.down,
.tile .value.down {
  color: var(--neg);
}

/* A change's direction as a small triangle before its signed figure. */
.delta.up::before,
.delta.down::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  border: 4px solid transparent;
}

.delta.up::before {
  border-top-width: 0;
  border-bottom: 7px solid currentColor;
  vertical-align: 1px;
}

.delta.down::before {
  border-top: 7px solid currentColor;
  border-bottom-width: 0;
  vertical-align: 1px;
}

/* A status: its label, then what it says. */
.status {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
  padding: 16px 20px;
  border-top: 2px solid var(--ink);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 14px;
}

#positions-status {
  margin-bottom: 16px;
}

.tag {
  flex: none;
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--muted);
  font: 700 10.5px / 1.4 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag:empty {
  display: none;
}

.tag.blue { color: var(--lapis); }
.tag.green { color: var(--pos); }
.tag.yellow { color: var(--ochre); }
.tag.red { color: var(--neg); }

/* On the stage the same tags in the stage's light. */
.stage .tag { color: var(--bone-2); }
.stage .tag.green { color: #8fd6b4; }
.stage .tag.yellow { color: var(--gilt); }

/* ------------------------------------------------------------ blocks and charts */

.card {
  min-width: 0;
  margin: 0 0 28px;
  padding: 20px 22px 22px;
  border-top: 2px solid var(--ink);
  background: var(--panel);
}

.card figcaption,
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.chart {
  position: relative;
  height: 230px;
}

.chart.tall {
  height: 380px;
}

.chart[data-track] {
  overflow: hidden;
  overflow: clip;
}

.curtain {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--panel);
  border-left: 2px solid var(--ink);
  pointer-events: none;
  translate: calc(clamp(0, calc((var(--p, 1) - 0.02) / 0.16), 1) * 101%) 0;
  will-change: translate;
}

/* A dashed stroke in a legend, for a dashed line. */
.key.dashed {
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.legend span,
.tooltip .row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend b {
  color: var(--ink);
  font-weight: 750;
}

.key {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 3px;
}

.tooltip {
  position: absolute;
  z-index: 5;
  top: 4px;
  min-width: 130px;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
}

.tooltip .when {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

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

.tooltip .name {
  color: var(--muted);
}

.pair {
  display: grid;
  gap: 14px;
}

.pair > figure.card {
  display: flex;
  flex-direction: column;
}

.pair > figure.card .chart {
  flex: 1;
  height: auto;
  min-height: 230px;
}

.pair.wide-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.pair.wide-right {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.pair .card {
  margin-bottom: 14px;
}

.scroll {
  overflow: auto;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.plain th,
.plain td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  white-space: nowrap;
}

.plain th:first-child,
.plain td:first-child {
  padding-left: 0;
}

.plain th:last-child,
.plain td:last-child {
  padding-right: 0;
}

.plain tbody tr:last-child > * {
  border-bottom: 0;
}

.plain th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.plain thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom-color: transparent;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--ink);
}

/* The empty corner over the row names carries the head's rule like the cells beside it. */
.plain thead td {
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 var(--ink);
}

/* A row's name, now its header: it reads as the label it was. */
.plain tbody th {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}

/* A box that scrolls shows where the keyboard is. */
.scroll:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 2px;
}

.plain td {
  color: var(--ink);
}

.plain .text {
  text-align: left;
}

.plain td.text {
  color: var(--ink-2);
  font-weight: 600;
}

.plain td.company {
  overflow: hidden;
  max-width: 360px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.plain td.ticker {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.plain tr.sold td {
  color: var(--muted);
}

/* The holdings scroll in a box of their own, its head held at the top, sideways too where the
   table is wider than the screen; where the whole table fits they run with the page instead and
   their head docks under the bar. */
.holdings-scroll {
  max-height: calc(70 * var(--svh));
}

@media (min-width: 1000px) {
  .holdings-scroll {
    max-height: none;
    overflow: visible;
  }

  .holdings-scroll thead th {
    top: var(--bar);
  }
}

/* The weight as a thin meter beside its figure. */
.meter {
  display: inline-block;
  width: 78px;
  height: 3px;
  margin-right: 12px;
  background: var(--shade);
  vertical-align: middle;
}

.meter i {
  display: block;
  height: 100%;
  background: var(--series);
}

.heat {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 12.5px;
}

.heat th {
  padding: 4px 2px 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  text-align: center;
}

.heat td {
  min-width: 38px;
  padding: 7px 2px;
  color: var(--ink);
  text-align: center;
}

.heat td.total {
  font-weight: 750;
}

.heat td.gap {
  min-width: 6px;
  padding: 0;
}

/* What the tints of the heat table stand for: five flat steps. */
.scale {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.scale i {
  width: 28px;
  height: 10px;
}

.facts {
  display: grid;
  gap: 3px;
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--shade);
  color: var(--ink-2);
  font-size: 13px;
  list-style: none;
  overflow-wrap: anywhere; /* a run's name is one long word */
}

/* ------------------------------------------------------------ controls */

button {
  font: inherit;
  cursor: pointer;
}

.primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--panel);
  font-size: 13px;
  font-weight: 650;
  transition: background 250ms ease, transform 250ms ease;
}

.primary:hover {
  background: var(--lapis);
}

.primary:active,
.segmented button:active {
  transform: scale(0.97);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 3px;
}

.topbar a:focus-visible,
.stage a:focus-visible,
.colophon a:focus-visible {
  outline-color: var(--gilt);
}

[data-over="paper"] .topbar a:focus-visible {
  outline-color: var(--lapis);
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

.segmented button {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
  transition: background 250ms ease, color 250ms ease, transform 250ms ease;
}

.segmented button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--panel);
}

.stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* How many names to hold: a stepper, a slider from one name to the whole book, and the way back. */
.names {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-bottom: 10px;
}

.names-words {
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* The heading with the tag that says a cut is in force. */
.card-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepper {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

.stepper button {
  width: 38px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
  line-height: 1;
  transition: background 200ms ease;
}

.stepper button:hover:not(:disabled) {
  background: var(--shade);
}

.stepper button:disabled,
.quiet:disabled {
  color: var(--axis);
  cursor: default;
}

.stepper input {
  width: 3.6em;
  padding: 8px 0;
  border: 0;
  border-inline: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 800 18px / 1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* The slider: a hairline, inked in lapis up to the count chosen, under a ringed bead. */
.names input[type="range"] {
  flex: 1 1 200px;
  min-width: 140px;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.names input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--lapis) var(--fill, 100%), var(--benchmark) var(--fill, 100%));
}

.names input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--benchmark);
}

.names input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--lapis);
}

.names input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--panel);
  -webkit-appearance: none;
}

.names input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--panel);
}

.names input[type="range"]:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 3px;
}

/* The count's own ring is drawn inside the stepper, which clips what lies outside it. */
.stepper input:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: -2px;
}

.stepper button:focus-visible {
  outline-offset: -3px;
}

.quiet {
  padding: 7px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  transition: background 200ms ease, color 200ms ease;
}

.quiet:hover:not(:disabled) {
  background: var(--ink);
  color: var(--panel);
}

.quiet:disabled {
  border-color: var(--rule);
}

/* Pressed: the state in force (the whole book), filled like the bar size in use. */
.quiet[aria-pressed="true"] {
  background: var(--ink);
  color: var(--panel);
}

.names-note {
  max-width: 92ch;
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

/* Live's standing line: which book is followed, and the way to another. */
.book-status {
  align-items: center;
  margin-bottom: 20px;
}

.book-status p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.book-status a {
  color: var(--lapis);
  font-weight: 650;
}

/* ------------------------------------------------------------ the candles, a block a holding */

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

.kline {
  margin: 0;
  padding: 14px 16px 8px;
  contain: layout paint;
}

.kline figcaption {
  align-items: baseline;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}

.kline .who {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kline .who b {
  margin-right: 8px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.kline .figures {
  flex: none;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.kline .figures .weight {
  margin-right: 10px;
  color: var(--muted);
  font-weight: 500;
}

.kline .chart {
  height: 150px;
}

/* While a span's bars load the figures stay, dimmed. */
#live-tiles > *,
#live-stamp,
#period-chart,
.kline .figures,
.kline .chart {
  transition: opacity 120ms ease;
}

.stale #live-tiles > *,
.stale #live-stamp,
.stale #period-chart,
.stale .kline .figures,
.stale .kline .chart {
  opacity: 0.5;
  transition: opacity 200ms var(--ease) 120ms;
}

/* ------------------------------------------------------------ motion that is not the scroll's */

/* Blocks rise in as they enter; those entering together follow one another. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal {
  transition:
    opacity 700ms var(--ease) calc(var(--index, 0) * 80ms),
    transform 700ms var(--ease) calc(var(--index, 0) * 80ms);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* A stage is watched like the blocks, for its title to rise and its lines to draw, and a row of
   figures only fades in, so that its tiles stand level from the first: neither is itself moved. */
.js .stage.reveal {
  opacity: 1;
  transform: none;
}

.js .cells.reveal {
  transform: none;
}

/* Turning to another page: the bar stays, the page cross-fades. */
::view-transition-old(root) {
  animation-duration: 200ms;
}

::view-transition-new(root) {
  animation-duration: 420ms;
}

@media (prefers-reduced-motion: reduce), (max-height: 560px), print {
  /* Nothing is held or pulled over anything: the stage, as tall as its type needs, then the sheet. */
  .scene,
  .hero {
    height: auto;
  }

  .stage {
    position: relative;
    height: auto;
    min-height: calc(100 * var(--svh));
  }

  .front,
  .section-head {
    height: auto;
    min-height: inherit;
  }

  .section-head {
    padding-bottom: calc(clamp(26px, 5.2vw, 76px) + 24px);
  }

  .sheet {
    margin-top: 0;
  }

  .hero .land {
    display: none;
  }

  /* No scene travels where none is held: the stage keeps its first frame, its type at rest. */
  .scene {
    --p: 0 !important;
    --s: 0 !important;
  }

  .front {
    padding-bottom: max(calc(15 * var(--svh)), calc(clamp(26px, 5.2vw, 76px) + 24px));
  }
}

@media (prefers-reduced-motion: reduce), print {
  .cue i::after {
    animation: none;
    translate: 0 15px;
  }

  .picture img,
  .hero .sky img,
  #live .picture img {
    scale: 1;
    translate: none;
  }

  .title,
  .section-head .aside {
    translate: none;
    scale: 1;
  }

  .js .reveal,
  .js .word > span,
  .js .title > span,
  .js .amp > span {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .stage:not(.in) .foot,
  .js .stage:not(.in) .eyebrow,
  .js .stage:not(.in) .section-head .aside {
    opacity: 1;
  }

  .js .lines .draw {
    stroke-dashoffset: 0;
  }

  .curtain {
    display: none;
  }

  .tab-rule,
  .brand .mark,
  .topbar,
  .plate-title {
    transition: none;
  }
}

/* ------------------------------------------------------------ colophon */

.colophon {
  padding: 56px var(--gutter) 64px;
  color: var(--smoke);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.colophon .mark {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  color: var(--bone);
}

.colophon p {
  max-width: 78ch;
  margin: 0 auto;
}

.colophon p + p {
  margin-top: 6px;
}

/* The notice: what the page is not. Set brighter than the credits under it, so that it is read. */
.colophon .legal {
  max-width: 78ch;
  margin: 10px auto 22px;
  padding: 24px 0;
  border-block: 1px solid var(--hair);
  color: var(--bone-2);
  text-align: left;
}

.colophon .legal h2 {
  margin-bottom: 14px;
  color: var(--bone);
  font: 800 12px / 1 var(--sans);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

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

.colophon .legal b {
  color: var(--bone);
  font-weight: 750;
}

/* A page's own caveat, beside the figures it qualifies; the notice at the page's foot says the rest. */
.caveat {
  max-width: 100ch;
  margin: 0 0 28px;
  padding-left: 14px;
  border-left: 2px solid var(--ink);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.caveat b {
  color: var(--ink);
  font-weight: 750;
}

.plates + .caveat {
  margin: 28px 0 0;
}

/* Who built the page, and where to find them: the one line of the colophon set to be read. */
.colophon .byline {
  margin-bottom: 14px;
  color: var(--bone-2);
  font-size: 14px;
  font-weight: 650;
}

.colophon .byline a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 4px; /* a target of 44px for a finger */
  color: var(--bone);
  text-decoration: none;
}

.colophon .byline b {
  border-bottom: 1px solid var(--gilt);
  font-weight: 800;
  transition: color 200ms ease;
}

.colophon .byline span:not(.visually-hidden) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gilt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.colophon .byline svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.colophon .byline a:hover b {
  color: var(--gilt);
}

@media (prefers-reduced-motion: no-preference) {
  .colophon .byline svg {
    transition: translate 200ms var(--ease);
  }

  .colophon .byline a:hover svg {
    translate: 2px -2px;
  }
}

@media (max-width: 960px) {
  .pair.wide-left,
  .pair.wide-right {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

  .credit {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --bar: 52px;
  }

  .wordmark,
  .tabs a i {
    display: none;
  }

  .tabs a {
    padding: 0 8px;
  }

  .tab-rule {
    bottom: 10px;
  }

  #home {
    --scene: calc(250 * var(--svh));
    --rise: calc(138 * var(--svh));
  }

  /* The sheet comes in at a quarter of the hero's scroll here, so the words meet by then. */
  .hero {
    --a: clamp(0, calc(var(--p) / 0.26), 1);
    --b: clamp(0, calc((var(--p) - 0.26) / 0.64), 1);
  }

  .hero .veil::after {
    opacity: clamp(0, min(calc((var(--p) - 0.06) / 0.1), calc((0.4 - var(--p)) / 0.12)), 1);
  }

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

  .lede {
    font-size: 13px;
    translate: none; /* one column: nothing to slide away from, and no room at the edge */
  }

  .hero .eyebrow {
    min-height: 42px; /* the date line, written with the data, takes a second line here */
  }

  .names input[type="range"] {
    flex-basis: 100%;
    height: 44px;
  }

  /* The heading and the Export button always on rows of their own: the head is as tall with the
     cut's tag and the longer label as without, and the control under it stays where it was. */
  .card-head:has(.card-title) {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-title {
    min-height: 26px;
  }

  .quiet {
    min-height: 44px;
  }

  .book-status {
    align-items: flex-start;
  }

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

  .stepper button {
    width: 44px;
    min-height: 44px;
  }

  /* Beside the giant title there is room for the running bead only, not its word. */
  .section-head ~ .cue span {
    display: none;
  }

  .notice {
    max-width: calc(100vw - 32px);
    white-space: normal;
  }

  .plate {
    grid-template-columns: 1.8em auto minmax(12px, 1fr) auto;
    padding: 20px 0 18px;
  }

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

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

  .tile.lead {
    grid-column: span 2;
    grid-row: auto;
  }

  .card,
  .tile {
    padding: 16px;
  }

  .tile .value {
    font-size: 34px;
  }

  .status {
    flex-direction: column;
    gap: 8px;
  }

  .chart.tall {
    height: 290px;
  }
}

@media (max-width: 420px) {
  .plate {
    grid-template-columns: 1.8em minmax(0, 1fr);
  }

  .leader {
    display: none;
  }

  .plate-figure {
    grid-column: 2;
    margin-top: 8px;
    text-align: left;
  }
}

/* Safari before 16 knows no overflow: clip, and hidden would make the sheet a box that scrolls
   (and cut off its torn top): there the page itself is clipped sideways instead. */
@supports not (overflow: clip) {
  .sheet {
    overflow-x: visible;
  }

  body {
    overflow-x: hidden;
  }
}

/* On a screen of one pixel per point the hairlines are drawn a little stronger. */
@media (max-resolution: 1.5dppx) {
  :root {
    --hair: rgba(243, 240, 228, 0.3);
  }

  .armilla i {
    border-width: 1.5px;
  }
}

/* Text for a screen reader only: the drop-capped lines are read whole from these. */
.visually-hidden {
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A page's heading takes the focus when the page is turned to; it needs no ring for that. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Opened at a page other than Home: that page shows from the first paint, before the scripts. */
html[data-first]:not([data-first="home"]) #home {
  display: none;
}

html[data-first="backtest"] #backtest,
html[data-first="positions"] #positions,
html[data-first="live"] #live {
  display: block !important;
}

/* The page's data could not be loaded: no empty figures under the notice. */
.failed .sheet > .wrap,
.failed .sheet > .band {
  visibility: hidden;
}

/* Printed, every block shows (none is waiting to be scrolled to) and the bar is printed once. */
@media print {
  .topbar {
    position: absolute;
  }

  /* Every block that moves with the scroll prints as it settles. */
  [data-track]:not(.scene) {
    --p: 1 !important;
    --s: 1 !important;
  }

  .band,
  .chapter,
  .lines,
  .armilla,
  .notice,
  .cue,
  .stepper button,
  #names-all,
  #names-range,
  #live-book-all {
    display: none; /* what only works on a screen; the count, the tag and the note stay */
  }
}

/* Forced colours (Windows High Contrast): the states drawn as colour fills keep a mark. */
@media (forced-colors: active) {
  .segmented button[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  .key,
  .key.dashed,
  .tab-rule {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .names input[type="range"] {
    -webkit-appearance: auto;
    appearance: auto; /* the system's own slider, which keeps its track */
  }

  .quiet[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

/* The monthly table needs about 640px: below a window of 1180px it takes a row of its own. */
@media (max-width: 1180px) {
  .pair.wide-right {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tablets: the narrative and the lede travel less, so they never meet across their 48px gap. */
@media (min-width: 641px) and (max-width: 960px) {
  .hero .narrative {
    translate: calc(var(--a) * min(9vw, 22px)) 0;
  }

  .lede {
    translate: calc(var(--a) * -1 * min(6vw, 18px)) 0;
  }
}

/* The narrowest phones: the statistics fit, their labels wrapping, with no box to scroll. */
@media (max-width: 400px) {
  #statistics th,
  #statistics td,
  #against th,
  #against td {
    padding: 8px 6px;
  }

  #statistics .text,
  #against .text {
    white-space: normal;
  }
}

/* The record's lines draw on a layer of their own while they move, not on the sheet's. */
.record.moving #record-art {
  will-change: transform;
}

/* A page's bands wait for its figures, so nothing visible shifts when the data lands. */
.js [data-page]:not(.drawn) .sheet > .band {
  visibility: hidden;
}