@charset "UTF-8";

:root {
  color-scheme: light;
  --clay: #f3e6dd;
  --ink: #1c2333;
  --gold: #c98500;
  --navy: #283a5b;
  --reading: 700px;
  --spread: min(1180px, calc(100vw - 112px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; color: var(--ink); background: var(--clay); font-family: "Spectral", Georgia, serif; font-size: 20px; line-height: 1.75; }
main { display: flow-root; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-thickness .18s ease, background-color .18s ease; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--navy); outline-offset: 5px; background: var(--clay); }
::selection { background: var(--navy); color: var(--clay); }
p { margin: 0 0 26px; }
h1, h2, h3 { font-family: "Dorsa", "Arial Narrow", "Helvetica Neue", sans-serif; font-weight: 400; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(88px, 10.55vw, 152px); line-height: 1.015; }
h2 { position: relative; margin: 0 0 24px; font-size: 68px; line-height: 1.08; }
h3 { margin: 40px 0 18px; font-size: 48px; line-height: 1.1; }

/* The signature is followed by a full-width reading rail, without header icons. */
.reason-jump { position: absolute; top: 8px; left: 16px; padding: 10px 18px; background: var(--clay); transform: translateY(-180%); z-index: 5; }
.reason-jump:focus { transform: translateY(0); }
.reason-signature { padding: 12px 5vw 15px; }
.reason-name { display: inline-block; font-family: "Dorsa", "Arial Narrow", "Helvetica Neue", sans-serif; font-size: 51px; line-height: 1; text-decoration: none; }
.reason-name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.reason-reading-rail { width: 100%; padding: 24px 5vw 20px; border-top: 2px solid var(--ink); border-bottom: 5px solid var(--gold); }
.reason-five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.reason-five a { display: block; position: relative; width: fit-content; font-size: 23px; line-height: 1.3; font-weight: 500; text-decoration: none; padding: 0 0 6px; }
.reason-five a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.reason-five a:hover::after, .reason-five a[aria-current="page"]::after { transform: scaleX(1); }
.reason-rail-explanation { margin: 17px 0 0; max-width: 1040px; font-size: 18px; line-height: 1.5; }

/* The photograph is the circle itself: no plate, caption or type on top. */
.reason-first-opening { position: relative; min-height: 650px; padding: 42px 5vw 50px; overflow: hidden; isolation: isolate; }
.reason-first-words { max-width: min(66vw, 950px); padding-top: 4px; }
.reason-first-words h1 { max-width: 950px; }
.reason-first-words .reason-deck { margin: 30px 0 0; max-width: 620px; font-size: 23px; line-height: 1.6; }
.reason-circle { position: absolute; width: 560px; height: 560px; right: -186.6667px; top: 36px; margin: 0; border-radius: 50%; overflow: hidden; background: var(--clay); animation: reason-arrive .8s ease-out both; }
.reason-circle img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 48% 52%; border-radius: 50%; }
.reason-purpose-opening { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 38px; margin: 0 0 110px auto; width: min(80%, 1120px); padding: 38px 5vw 44px 48px; background: var(--gold); color: var(--navy); }
.reason-purpose-opening h2 { margin: 0; padding-top: 3px; font-size: 66px; line-height: 1.06; text-align: left; }
.reason-purpose-opening p { max-width: 830px; margin: 0; font-size: 32px; line-height: 1.5; }

/* A continuous essay, with an occasional opening wider than its text column. */
.reason-essay { width: var(--reading); max-width: calc(100% - 48px); margin: 0 auto; padding-bottom: 92px; }
.reason-passage { position: relative; margin: 0 0 66px; display: flow-root; }
.reason-passage:last-child { margin-bottom: 0; }
.reason-passage > p:last-child { margin-bottom: 0; }
.reason-topic-icon { position: absolute; width: 28px; height: 28px; left: -61px; top: 18px; color: var(--navy); }
i.reason-topic-icon { display: none; }
.reason-population-interval { position: relative; width: var(--spread); margin: 58px 0 45px; margin-left: calc((var(--spread) - var(--reading)) / -2); padding: 0 0 36px; border-bottom: 2px solid var(--navy); }
.reason-population-interval::before { content: ""; display: block; width: 100%; height: 24px; border-top: 1px solid var(--navy); border-left: 1px solid var(--navy); border-right: 1px solid var(--navy); margin-bottom: 24px; }
.reason-population-interval p { max-width: 1120px; font-size: 32px; line-height: 1.6; }
.reason-population-interval p + p { margin: 24px 0 0; font-size: 25px; line-height: 1.65; }

.reason-inner-opening { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); column-gap: 66px; align-items: end; width: var(--spread); margin: 0 auto; padding: 43px 0 70px; }
.reason-return-line { grid-column: 1 / -1; font-size: 18px; margin-bottom: 29px; }
.reason-inner-opening h1 { max-width: 800px; font-size: clamp(88px, 7.8vw, 112px); }
.reason-inner-opening .reason-deck { margin: 0 0 5px; padding-top: 25px; border-top: 1px solid var(--navy); font-size: 22px; line-height: 1.6; }
.reason-passage:has(.reason-photographic-band) > h2 { width: var(--spread); margin-left: calc((var(--spread) - var(--reading)) / -2); max-width: 1180px; }
.reason-photographic-band { position: relative; width: var(--spread); margin: 32px 0 44px; margin-left: calc((var(--spread) - var(--reading)) / -2); }
.reason-photographic-band img { display: block; width: 100%; height: auto; aspect-ratio: 2.55; object-fit: cover; border-radius: 10px; background: var(--clay); }
.reason-photographic-band--follow-up img { object-position: 50% 62%; }
.reason-photographic-band figcaption { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 16px; width: min(640px, 74%); margin: -36px 0 0 32px; padding: 24px 28px; background: var(--gold); color: var(--ink); font-size: 18px; line-height: 1.6; }
.reason-photographic-band figcaption svg { flex: none; width: 23px; height: 23px; margin-top: 3px; }
.reason-photographic-band figcaption i { display: none; }

.reason-colophon { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px 70px; border-top: 2px solid var(--ink); padding: 40px 5vw 31px; }
.reason-footer-reading { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: 44px; row-gap: 18px; margin: 0 0 13px; }
.reason-footer-reading a { display: inline-flex; align-items: center; gap: 12px; }
.reason-footer-reading svg { width: 22px; height: 22px; flex: none; }
.reason-footer-reading i { display: none; }
.reason-colophon p { max-width: 760px; font-size: 18px; line-height: 1.6; margin: 0; }
.reason-colophon .reason-copyright { text-align: right; align-self: end; }
.reason-lost-opening { max-width: 1000px; margin: 64px auto 100px; padding: 0 24px; }
.reason-lost-opening p { max-width: 680px; margin-top: 30px; }

@keyframes reason-arrive { from { transform: translateY(10px); } to { transform: translateY(0); } }

@media (min-width: 1600px) {
  .reason-first-words { max-width: 1050px; }
  .reason-first-words h1 { max-width: 1050px; }
}
@media (max-width: 1150px) {
  :root { --spread: calc(100vw - 64px); }
  .reason-five { gap: 18px; }
  .reason-five a { font-size: 20px; }
  .reason-first-opening { min-height: 592px; padding-top: 45px; }
  .reason-first-words { max-width: 67%; }
  .reason-first-words h1 { font-size: 112px; }
  .reason-first-words .reason-deck { max-width: 500px; font-size: 21px; }
  .reason-circle { width: 480px; height: 480px; right: -160px; top: 45px; }
  .reason-purpose-opening { width: 86%; grid-template-columns: 105px minmax(0, 1fr); gap: 28px; padding-left: 34px; }
  .reason-purpose-opening h2 { font-size: 58px; }
  .reason-purpose-opening p { font-size: 29px; }
  .reason-inner-opening { column-gap: 40px; }
  .reason-inner-opening h1 { font-size: 96px; }
  .reason-topic-icon { position: static; width: 25px; height: 25px; margin-right: 15px; vertical-align: 5px; }
}
@media (max-width: 780px) {
  :root { --spread: calc(100vw - 32px); }
  body { font-size: 19px; line-height: 1.75; }
  .reason-signature { padding: 12px 22px 15px; }
  .reason-name { font-size: 46px; }
  .reason-reading-rail { padding: 18px 22px 17px; border-bottom-width: 4px; }
  .reason-five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 12px; }
  .reason-five a { font-size: 18px; line-height: 1.3; padding: 1px 0 5px; }
  .reason-rail-explanation { font-size: 18px; margin-top: 15px; line-height: 1.5; }
  .reason-first-opening { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; padding: 25px 22px 40px; }
  .reason-first-words { display: contents; }
  .reason-first-words h1 { grid-row: 1; font-size: 70px; line-height: 1.025; }
  .reason-first-words .reason-deck { grid-row: 3; max-width: none; font-size: 20px; line-height: 1.6; margin: 0; }
  .reason-circle { grid-row: 2; position: relative; top: auto; right: auto; width: 320px; height: 320px; margin: 0 auto; }
  .reason-purpose-opening { display: block; width: calc(100% - 22px); padding: 27px 24px 33px; margin-bottom: 66px; }
  .reason-purpose-opening h2 { margin: 0 0 15px; font-size: 53px; }
  .reason-purpose-opening p { font-size: 26px; line-height: 1.55; }
  .reason-essay { width: auto; max-width: none; margin: 0 24px; padding-bottom: 54px; }
  .reason-passage { margin-bottom: 47px; }
  h2 { font-size: 54px; margin-bottom: 21px; line-height: 1.1; }
  .reason-topic-icon { width: 23px; height: 23px; margin-right: 12px; vertical-align: 5px; }
  .reason-population-interval { width: auto; margin: 38px -2px 35px; padding-bottom: 27px; }
  .reason-population-interval::before { height: 20px; margin-bottom: 19px; }
  .reason-population-interval p { font-size: 25px; line-height: 1.6; }
  .reason-population-interval p + p { font-size: 21px; margin-top: 22px; }
  .reason-inner-opening { display: block; width: auto; margin: 0 24px; padding: 31px 0 44px; }
  .reason-inner-opening h1 { font-size: 76px; }
  .reason-inner-opening .reason-deck { margin: 25px 0 0; padding-top: 19px; font-size: 21px; }
  .reason-return-line { font-size: 18px; margin-bottom: 22px; }
  .reason-passage:has(.reason-photographic-band) > h2 { width: auto; margin-left: 0; }
  .reason-photographic-band { width: var(--spread); margin: 27px -8px 31px; }
  .reason-photographic-band img { aspect-ratio: 1.55; }
  .reason-photographic-band figcaption { width: calc(100% - 20px); margin: -19px 0 0 20px; padding: 18px 18px 19px; gap: 12px; }
  .reason-photographic-band figcaption svg { width: 21px; height: 21px; margin-top: 3px; }
  .reason-colophon { display: block; padding: 31px 24px; }
  .reason-footer-reading { gap: 17px 25px; font-size: 18px; margin-bottom: 27px; }
  .reason-colophon p { margin-bottom: 17px; }
  .reason-colophon .reason-copyright { text-align: left; margin-bottom: 0; }
}
@media (max-width: 365px) {
  .reason-circle { width: 280px; height: 280px; }
  .reason-first-words h1 { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}