@font-face {
  font-family: "Martina Plantijn";
  src: url("../../assets/fonts/martina-plantijn/martina-plantijn-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Martina Plantijn";
  src: url("../../assets/fonts/martina-plantijn/martina-plantijn-medium-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("../../assets/fonts/suisse-intl/SuisseIntl-Book-WebXL.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #202020;
  --color-text-muted: #595959;
  --color-accent-primary: #d34805;
  --color-accent-text: #d24705;
  --color-link-hover: var(--color-accent-text);
  --paper: #fff;
  /* One reference pixel at 1280px; proportional through 1600px. */
  --unit: min(.078125vw, 1.25px);
  --page-padding: calc(41 * var(--unit));
  --column-gap: calc(55 * var(--unit));
  --space-24: calc(24 * var(--unit));
  --space-module: calc(72 * var(--unit));
  /* The original 100px / 232px lockup needs 672px, versus 544px available.
     Scale its type and internal spacing together to fit the reading column. */
  --desktop-title-size: calc(80 * var(--unit));
  --desktop-title-gap: calc(9.6 * var(--unit));
  --essay-body-size: calc(22 * var(--unit));
  --essay-body-line-height: 1.45;
  --essay-paragraph-indent: calc(36 * var(--unit));
  --editorial: "Martina Plantijn", Georgia, serif;
  --ui: "Suisse Intl", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.essay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100svh;
}

.essay-copy {
  min-width: 0;
  padding: var(--page-padding) var(--column-gap) var(--space-module) var(--page-padding);
}

.essay-header { margin-bottom: calc(var(--space-module) + var(--space-24)); }

.essay-title {
  width: 100%;
  margin: 0;
  font-family: var(--editorial);
  font-weight: 500;
  font-size: var(--desktop-title-size);
  line-height: .74;
  letter-spacing: 0;
  font-synthesis: none;
}

.essay-title__lockup {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.essay-title__top-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: var(--desktop-title-gap);
  width: 100%;
  max-width: 100%;
}

.essay-title__opening {
  align-self: baseline;
  margin: 0;
  text-transform: lowercase;
}

.essay-title__lead {
  align-self: start;
  min-width: 0;
  color: var(--color-accent-text);
  padding-top: calc(13.6 * var(--unit));
  font-size: calc(15.2 * var(--unit));
  font-style: italic;
  line-height: 1.16;
  letter-spacing: 0;
  text-wrap: balance;
}

.essay-title__lead-small-caps {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  font-synthesis: none;
}

.essay-title__space,
.essay-title__between,
.essay-title__us {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0;
}

.essay-title__space { align-self: baseline; }

.essay-title__bottom-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  margin-top: .25em;
}

.essay-title__between {
  margin: 0;
}

.essay-title__us {
  margin: 0;
  text-align: right;
}

.essay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--unit)) var(--space-24);
  margin: calc(32 * var(--unit)) 0 0;
  color: var(--color-text-muted);
  font-family: var(--ui);
  font-size: calc(13 * var(--unit));
  line-height: calc(20 * var(--unit));
  hyphens: none;
  text-align: left;
  text-wrap: wrap;
}

.essay-meta dd { margin: 0; }

.essay-body {
  max-width: none;
  font-family: var(--editorial);
  font-size: var(--essay-body-size);
  font-weight: 500;
  font-variant-numeric: oldstyle-nums;
  line-height: var(--essay-body-line-height);
  letter-spacing: 0;
  hyphens: auto;
  text-align: justify;
  text-wrap: pretty;
}

.essay-body p { margin: 0; }

.essay-body p:not(:first-child):not(h2 + p) { text-indent: var(--essay-paragraph-indent); }

.essay-body .small-caps {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  font-synthesis: none;
}

.essay-body h2 {
  margin: var(--space-module) 0 .7em;
  font-family: var(--ui);
  font-size: 1em;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: 0;
  text-align: left;
}

.essay-body blockquote {
  margin: .8em 0;
  padding: 0 0 0 8px;
  border-left: 2px solid var(--color-accent-primary);
  color: var(--color-accent-text);
}

.essay-body blockquote p {
  margin: 0;
  font-size: 1em;
  font-style: normal;
  line-height: inherit;
  text-align: left;
  text-indent: 0;
}

.essay-body a,
.essay-endmatter a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
}

.essay-body a:hover,
.essay-body a:focus-visible,
.essay-endmatter a:hover,
.essay-endmatter a:focus-visible {
  color: var(--color-link-hover);
}

.essay-body a:focus-visible,
.essay-endmatter a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.essay-endmatter {
  margin-top: calc(var(--space-module) + 2 * var(--space-24));
  color: var(--color-text-muted);
  font-family: var(--ui);
  font-size: calc(13 * var(--unit));
  font-weight: 500;
  line-height: calc(20 * var(--unit));
  letter-spacing: 0;
  text-align: left;
}

.essay-endmatter p { margin: 0; }

.essay-related p + p { margin-top: calc(8 * var(--unit)); }

.essay-colophon { margin-top: var(--space-24); }

.essay-colophon hr {
  height: 1px;
  margin: 0 0 calc(16 * var(--unit));
  border: 0;
  background: rgb(0 0 0 / 20%);
}

.essay-colophon h2 {
  margin: 0 0 calc(4 * var(--unit));
  color: var(--ink);
  font: inherit;
}

.essay-colophon__label { color: var(--ink); }

.essay-stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 100svh;
  height: 100svh;
  padding: var(--page-padding) var(--page-padding) var(--page-padding) 0;
}

.stage-frame {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
}

.stage-particles {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Portfolio-style opacity reveal, slowed by 20% for the essay. */
.essay-entering .stage-frame,
.essay-entering .essay-header,
.essay-entering .essay-body > *,
.essay-entering .essay-endmatter > *,
.essay-reveal-enabled .essay-reveal {
  opacity: 0;
}

.essay-reveal-enabled .essay-reveal {
  transition: opacity 504ms ease-out;
}

.essay-reveal-enabled .essay-reveal.is-revealed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce), print {
  .essay-entering .stage-frame,
  .essay-entering .essay-header,
  .essay-entering .essay-body > *,
  .essay-entering .essay-endmatter > *,
  .essay-reveal-enabled .essay-reveal {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 800px) {
  :root {
    --unit: 1px;
    --page-padding: clamp(24px, 5.125vw, 41px);
    --essay-body-size: clamp(16.15px, 4.93vw, 19.55px);
  }
  .essay-layout { display: block; }
  .essay-copy { padding-right: var(--page-padding); }
  .essay-header { margin-bottom: 32px; }
  .essay-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(48px, 12vw, 96px);
    line-height: .78;
  }
  .essay-title__lockup { width: 100%; }
  .essay-title__top-line { grid-template-columns: max-content minmax(0, 1fr); width: 100%; }
  .essay-title__lead {
    display: block;
    width: 100%;
    max-width: none;
    margin-top: var(--space-24);
    padding: 0;
    font-family: var(--editorial);
    font-size: var(--essay-body-size);
    font-weight: 500;
    font-style: italic;
    font-synthesis: none;
    line-height: var(--essay-body-line-height);
    text-wrap: pretty;
  }
  .essay-title__space { justify-self: end; margin-top: 0; }
  .essay-title__bottom-line { margin-top: .29em; }
  .essay-stage { position: relative; min-height: auto; height: auto; margin-bottom: 48px; padding: 0; }
  .essay-body {
    max-width: none;
    font-size: var(--essay-body-size);
    line-height: 1.45;
    hyphens: none;
    text-align: left;
    text-wrap: wrap;
  }
  .essay-body p:not(:first-child):not(h2 + p) { text-indent: 24px; }
  .stage-frame { height: 116vw; }
}