:root {
  --step--4: clamp(0.32rem, calc(0.28rem + 0.19vw), 0.51rem);
  --step--3: clamp(0.42rem, calc(0.37rem + 0.26vw), 0.69rem);
  --step--2: clamp(0.56rem, calc(0.49rem + 0.34vw), 0.91rem);
  --step--1: clamp(0.75rem, calc(0.66rem + 0.46vw), 1.22rem);
  --step-0: clamp(1.00rem, calc(0.88rem + 0.61vw), 1.63rem);
  --step-1: clamp(1.33rem, calc(1.17rem + 0.81vw), 2.17rem);
  --step-2: clamp(1.78rem, calc(1.56rem + 1.08vw), 2.89rem);
  --step-3: clamp(2.37rem, calc(2.08rem + 1.44vw), 3.85rem);
  --step-4: clamp(3.16rem, calc(2.77rem + 1.93vw), 5.13rem);
  --step-5: clamp(4.21rem, calc(3.70rem + 2.57vw), 6.84rem);

  --space-4xs: clamp(0.13rem, calc(0.11rem + 0.06vw), 0.19rem);
  --space-3xs: clamp(0.25rem, calc(0.21rem + 0.18vw), 0.44rem);
  --space-2xs: clamp(0.44rem, calc(0.36rem + 0.37vw), 0.81rem);
  --space-xs: clamp(0.69rem, calc(0.58rem + 0.55vw), 1.25rem);
  --space-s: clamp(0.88rem, calc(0.73rem + 0.73vw), 1.63rem);
  --space-m: clamp(1.31rem, calc(1.09rem + 1.10vw), 2.44rem);
  --space-l: clamp(1.75rem, calc(1.46rem + 1.46vw), 3.25rem);
  --space-xl: clamp(2.63rem, calc(2.19rem + 2.20vw), 4.88rem);
  --space-2xl: clamp(3.50rem, calc(2.91rem + 2.93vw), 6.50rem);
  --space-3xl: clamp(5.25rem, calc(4.37rem + 4.39vw), 9.75rem);
  --space-4xl: clamp(7.00rem, calc(5.83rem + 5.85vw), 13.00rem);
  --space-5xl: clamp(9.19rem, calc(7.65rem + 7.68vw), 17.06rem);

  /* One-up pairs */
  --space-4xs-3xs: clamp(0.13rem, calc(0.06rem + 0.30vw), 0.44rem);
  --space-3xs-2xs: clamp(0.25rem, calc(0.14rem + 0.55vw), 0.81rem);
  --space-2xs-xs: clamp(0.44rem, calc(0.28rem + 0.79vw), 1.25rem);
  --space-xs-s: clamp(0.69rem, calc(0.50rem + 0.91vw), 1.63rem);
  --space-s-m: clamp(0.88rem, calc(0.57rem + 1.52vw), 2.44rem);
  --space-m-l: clamp(1.31rem, calc(0.93rem + 1.89vw), 3.25rem);
  --space-l-xl: clamp(1.75rem, calc(1.14rem + 3.05vw), 4.88rem);
  --space-xl-2xl: clamp(2.63rem, calc(1.87rem + 3.78vw), 6.50rem);
  --space-2xl-3xl: clamp(3.50rem, calc(2.28rem + 6.10vw), 9.75rem);
  --space-3xl-4xl: clamp(5.25rem, calc(3.74rem + 7.56vw), 13.00rem);
  --space-4xl-5xl: clamp(7.00rem, calc(5.04rem + 9.82vw), 17.06rem);

  --measure: 52ch;
}

@font-face {
  font-family: concourse-text;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: auto;
  src: url(./fonts/concourse_3_regular.woff2);
}
@font-face {
  font-family: concourse-text;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: auto;
  src: url(./fonts/concourse_4_caps_regular.woff2);
}
@font-face {
  font-family: concourse-text;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: auto;
  src: url(./fonts/concourse_4_regular.woff2);
}
@font-face {
  font-family: concourse-text;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  font-display: auto;
  src: url(./fonts/concourse_2_regular.woff2);
}
@font-face {
  font-family: concourse-text;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
  font-display: auto;
  src: url(./fonts/concourse_3_italic.woff2);
}



.bg-secondary { background-color: rgb(244 106 42); }




html,
body,
div,
header,
nav,
main,
footer,
svg {
  max-inline-size: none;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0 solid;
  color: inherit;
  background-color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: "concourse-text";
  max-inline-size: var(--measure);
}

h1, h2, h3, .half-measure {
  max-inline-size: calc(var(--measure) / 2);
}

body {
  text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1;

  color: #000;
  background-color: hsl(0, 25%, 91%);
  font-size: var(--step-1);
  -webkit-font-smoothing: subpixel-antialiased; }

.frame {
  --n: 16;
  --d: 9;
  aspect-ratio: var(--n) / var(--d);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img, .frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

p {
  line-height: 1.4;
  letter-spacing: -0.025em;
}

strong {
  font-weight: bolder;
}

h1 {
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.05em;
}

h2 {
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.05em;
}

h3 {
  font-size: var(--step-2);
  font-weight: 500;
}

.unem {
  font-size: var(--step-0);
}


em {
  font-style: italic;
}

a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted #aba3a3;
}

a:hover {
  background: lightgray;
}

a, a:hover {
  transition: background 0.2s;
}

.xref {
  font-family: "concourse-text";
  font-variant-caps: all-small-caps;
  text-transform: lowercase;
font-feature-settings: 'c2sc' 1;

}

img {
  width: 100%;
}

.bordered, .contour {
  border: 2px dashed;
}

.bordered {
  border-radius: 50%;
}

.contour {
  margin: var(--space-3xs);
  padding: var(--space-3xs);
}

.mono {
  font-family: "fira-mono";
}

#left a.xref:before {
  content: "← ";
}

#right a.xref:after {
  content: " →";
}

.grid {
  gap: var(--space-2xs);
}

.grid, .grid > * {
  display: flex;
  flex-wrap: wrap;
}

.grid > * {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  padding: var(--space-3xs);
  border: 2px dashed;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space-s);
}

.sidebarred {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s-m);
}

.sidebarred > :first-child {
  flex: 1 0 calc(var(--measure) / 3);
}

.sidebarred > :last-child {
  flex: 999 0 0;
  min-inline-size: 70%;
}

.smolsidebarred {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-s);
}

.smolsidebarred > :first-child {
  flex: 1 1 auto;
}

.smolsidebarred > :last-child {
  flex: 999 0 0;
  min-inline-size: 50%;
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  block-size: fit-content;
}

.switcher > * {
  flex-grow: 1;
}

.switcher > :nth-last-child(n+ 4),
.switcher > :nth-last-child(n+ 4) ~ * {
  flex-basis: 100%;
}

.center {
  box-sizing: content-box;
  margin-inline: auto;
}

.icenter {
  display:flex;
  flex-direction: column;
  align-items: center;
  box-sizing: content-box;
  margin-inline: auto;
}

.box {
  padding: var(--space-xs);
  border: var(--space-3xs) solid;
  color: #000;
  background-color: hsl(0, 25%, 91%);
}

.box * {
  color: inherit;
}

.box.invert {
  color: hsl(0, 25%, 91%);
  background-color: #000;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-s);
  justify-content: space-between;
  align-items: center;
}

.lcluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-s);
  justify-content: flex-start;
  align-items: center;
}

.rcluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-s);
  justify-content: flex-end;
  align-items: center;
}

.omission {
  height: 0.2rem;
  margin-bottom: 0.8rem;
  border-bottom: 2px dotted gray;
}