:root {
  --xo-silver: #e6edf4;
  --xo-espresso: #3a2f28;
  --xo-gold: #c9ad26;
  --xo-straw: #faf4dd;
  --xo-white: #fff;
  --xo-display: "Antic Didone", Georgia, serif;
  --xo-reading: "Questrial", "Trebuchet MS", sans-serif;
  --xo-gutter: 4.45vw;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body {
  margin: 0;
  color: var(--xo-espresso);
  background: var(--xo-silver);
  font: 19px/1.58 var(--xo-reading);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--xo-espresso); color: var(--xo-white); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--xo-espresso); outline-offset: 5px; background: var(--xo-white); }
img { display: block; max-width: 100%; }
svg { flex: none; }
p { margin: 0 0 1.35em; }
ul { padding-left: 1.2em; margin: 0; }
li { padding-left: .25em; margin-bottom: 1.15em; }
h1, h2, h3 { font-family: var(--xo-display); font-weight: 400; line-height: 1.08; margin: 0; }
h1, h2, h3, p, a { overflow-wrap: break-word; }
.xo-jump { position: absolute; top: -100px; left: 22px; padding: 14px 22px; background: var(--xo-white); z-index: 20; }
.xo-jump:focus { top: 16px; }

/* The oversized signature and open, two-by-two reading key are the masthead. */
.xo-reading-key {
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr);
  padding: 18px var(--xo-gutter) 23px;
  min-height: 183px;
  background: var(--xo-white);
  align-items: center;
}
.xo-home-sign { width: fit-content; text-decoration: none; display: grid; }
.xo-level-mark { font: 400 144px/.78 var(--xo-display); letter-spacing: -.085em; padding-right: .085em; }
.xo-pinned-name { font-size: 19px; line-height: 1.3; margin-top: 10px; }
.xo-home-sign:hover .xo-pinned-name { text-decoration: underline; }
.xo-key-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 4.4vw; padding-left: 3.2vw; }
.xo-key-link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 49px;
  padding: 9px 0;
  border-bottom: 1px solid #d9d7d4;
  text-decoration: none;
  font-size: 27px;
  line-height: 1.25;
  position: relative;
}
.xo-key-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--xo-espresso);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.xo-key-link:hover::after, .xo-key-link:focus-visible::after, .xo-key-link[aria-current="page"]::after { transform: scaleX(1); }
.xo-key-link:hover, .xo-key-link:focus-visible { background: var(--xo-silver); }
.xo-key-link svg, .xo-key-link i { width: 24px; height: 24px; flex: 0 0 24px; }

/* The photo is the field itself. Only the left-hand words have a white feather. */
.xo-expression-opening { position: relative; height: 82svh; min-height: 660px; isolation: isolate; background: var(--xo-silver); }
.xo-opening-photo { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: 68% 32%; z-index: -2; }
.xo-photo-words { position: absolute; left: var(--xo-gutter); top: 42px; width: 314px; max-width: 25%; }
.xo-photo-words::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -42px -86px -42px -68px;
  background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.99) 85%, rgba(255,255,255,0) 100%);
  filter: blur(14px);
  pointer-events: none;
}
.xo-photo-words h1 { font-size: clamp(52px, 4.35vw, 68px); line-height: .96; letter-spacing: -.035em; overflow-wrap: normal; }
.xo-title-line { display: block; white-space: nowrap; }
.xo-opening-deck { margin: 22px 0 0; max-width: 265px; font-size: 19px; line-height: 1.43; }
.xo-expression-entry { padding: 72px var(--xo-gutter) 84px; display: grid; grid-template-columns: 25% minmax(0, 1fr); align-items: start; }
.xo-arc-pair { width: 172px; height: 258px; margin: -24px 0 0 -8px; }
.xo-expression-entry > .xo-arc-pair { animation: xo-unfurl .9s ease-out 1; }
.xo-expression-entry > p { font-size: clamp(26px, 2.35vw, 35px); line-height: 1.42; max-width: 34ch; margin: 0; padding-top: 9px; }

/* The diptych has unequal measures, hanging folios and a deliberately lower second chapter. */
.xo-diptych { background: var(--xo-white); padding: 82px 8.9vw 112px; }
.xo-spread-heading { display: grid; grid-template-columns: 1.08fr 1fr; gap: 8vw; align-items: start; margin-bottom: 88px; }
.xo-spread-heading h2 { font-size: clamp(46px, 4.8vw, 74px); max-width: 9ch; }
.xo-spread-heading p { padding-top: 8px; margin: 0; max-width: 38ch; }
.xo-unequal-chapters { display: grid; grid-template-columns: 1.28fr .88fr; gap: 9.3vw; }
.xo-expression-chapter { border-top: 2px solid var(--xo-gold); padding-top: 24px; min-width: 0; }
.xo-expression-chapter + .xo-expression-chapter { margin-top: 116px; }
.xo-chapter-heading { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; margin: 0 0 34px -3vw; }
.xo-chapter-number { font: 400 clamp(82px, 7.4vw, 114px)/.9 var(--xo-display); letter-spacing: -.075em; margin: -5px 0 0; }
.xo-expression-chapter h3 { font-size: clamp(36px, 3.45vw, 53px); max-width: 9ch; }
.xo-expression-chapter p:last-child { margin-bottom: 0; }
.xo-expression-chapter + .xo-expression-chapter::after { content: ""; display: block; width: 50%; height: 2px; background: var(--xo-gold); margin: 40px 0 0 auto; }
.xo-shared-risk { background: var(--xo-straw); padding: 88px 8.9vw 94px; position: relative; }
.xo-risk-marker { width: 36px; height: 36px; position: absolute; left: 3.3vw; top: 100px; stroke-width: 1.5; }
.xo-shared-risk h2 { font-size: clamp(46px, 5.45vw, 84px); max-width: 15ch; margin-bottom: 38px; }
.xo-risk-prose { max-width: 1080px; columns: 2; column-gap: 8vw; }
.xo-risk-prose p { break-inside: avoid; }
.xo-risk-prose p:first-child { column-span: all; max-width: 49ch; font-size: 27px; line-height: 1.48; margin-bottom: 45px; }
.xo-risk-prose p:last-child { margin-bottom: 0; }
.xo-provider-ending { display: grid; grid-template-columns: 1fr 1fr; padding: 96px 8.9vw 112px; gap: 9vw; }
.xo-provider-ending h2 { font-size: clamp(42px, 4.5vw, 68px); max-width: 12ch; }
.xo-provider-ending > div > p:first-child { font-size: 27px; line-height: 1.45; margin-left: -3vw; }
.xo-provider-ending p:last-child { margin-bottom: 0; }
.xo-text-link { display: inline-flex; gap: .5em; align-items: baseline; }
.xo-text-link svg { height: 18px; width: 18px; align-self: center; }

/* Inner readings: an open title, then a fixed reading measure with a sticky marginal key. */
.xo-page-opening { padding: 26px 8.9vw 76px; background: var(--xo-silver); position: relative; }
.xo-breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; font-size: 17px; margin: 0 0 50px; }
.xo-page-marker { position: absolute; left: 8.9vw; top: 134px; width: 52px; height: 52px; stroke-width: 1.5; }
.xo-page-opening h1 { max-width: 15ch; font-size: clamp(50px, 6.4vw, 98px); line-height: 1.04; letter-spacing: -.035em; margin-left: 19%; }
.xo-page-deck { max-width: 35ch; font-size: 27px; line-height: 1.45; margin: 30px 0 0 40%; }
.xo-inside-layout { display: grid; grid-template-columns: 24% minmax(0, 1fr); gap: 4vw; padding: 66px 8.9vw 106px; background: var(--xo-white); }
.xo-page-contents { align-self: start; position: sticky; top: 28px; font-size: 18px; padding-right: 1.5vw; }
.xo-page-contents p { font: 400 29px/1.2 var(--xo-display); margin-bottom: 22px; }
.xo-page-contents ol { list-style: decimal-leading-zero; padding-left: 26px; margin: 0; }
.xo-page-contents li { padding-left: 7px; margin-bottom: 8px; line-height: 1.4; }
.xo-page-contents li::marker { font-family: var(--xo-display); font-size: 20px; }
.xo-page-contents a { display: block; min-height: 44px; padding: 8px 0; text-decoration: none; }
.xo-page-contents a:hover { text-decoration: underline; background: var(--xo-silver); }
.xo-page-contents .xo-arc-pair { width: 126px; height: 189px; margin: 32px 0 0 -24px; }
.xo-long-reading { min-width: 0; }
.xo-page-intro { max-width: 50ch; font-size: 24px; line-height: 1.5; margin-bottom: 65px; }
.xo-reading-section { border-top: 2px solid var(--xo-gold); padding-top: 31px; margin-bottom: 72px; }
.xo-reading-section:last-child { margin-bottom: 0; }
.xo-reading-section h2 { font-size: clamp(34px, 3.25vw, 50px); line-height: 1.12; max-width: 22ch; margin-bottom: 31px; }
.xo-section-prose { max-width: 54ch; }
.xo-section-prose p:last-child { margin-bottom: 0; }
.xo-reading-section.xo-risk-reading { background: var(--xo-straw); margin-left: -42px; margin-right: -4.45vw; padding: 39px 42px 46px; }
.xo-risk-reading h2 { max-width: 18ch; }

/* Photographs remain in their authored sections. Their captions project back into the reading measure. */
.xo-photographic-band { margin: 5px -4.45vw 38px -36px; background: var(--xo-silver); padding-bottom: 22px; }
.xo-photographic-band img { width: 100%; height: 340px; object-fit: cover; }
.xo-photographic-band figcaption {
  position: relative;
  width: 74%;
  max-width: 530px;
  margin: -34px 0 -22px auto;
  padding: 22px 28px 24px;
  background: var(--xo-silver);
  border-left: 1px solid var(--xo-espresso);
  font-size: 17px;
  line-height: 1.45;
}
.xo-photographic-band.xo-material-band { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; margin: 8px 0 42px -36px; padding: 0; background: var(--xo-white); }
.xo-material-band img { height: 300px; }
.xo-material-band figcaption { width: auto; margin: 0 0 -18px -28px; border: 0; padding: 23px; }
.xo-page-about .xo-photographic-band img { height: 370px; object-position: center 40%; }
.xo-page-risks .xo-page-opening { background: var(--xo-straw); }
.xo-reference-list .xo-section-prose { max-width: 58ch; }
.xo-reference-list li { margin-bottom: 28px; }
.xo-reference-list .xo-section-prose a { text-decoration-thickness: 1px; }
.xo-reference-list .xo-section-prose a:hover { text-decoration-thickness: 2px; }

.xo-site-ending { background: var(--xo-silver); padding: 66px var(--xo-gutter) 28px; border-top: 2px solid var(--xo-gold); }
.xo-ending-top { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: start; margin-bottom: 60px; }
.xo-ending-name { font: 400 clamp(42px, 5vw, 76px)/1.04 var(--xo-display); letter-spacing: -.025em; margin: 0; max-width: 9ch; }
.xo-ending-guide { max-width: 36ch; font-size: 20px; margin: 0; }
.xo-ending-bottom { display: flex; gap: 25px; justify-content: space-between; align-items: baseline; font-size: 17px; }
.xo-ending-bottom p { margin: 0; }
.xo-ending-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.xo-ending-links a { padding-block: 9px; }
.xo-missing-reading { padding: 58px 8.9vw 100px; min-height: 50svh; }
.xo-missing-reading h1 { max-width: 13ch; font-size: clamp(48px, 6vw, 88px); margin-bottom: 36px; }
.xo-missing-reading p { max-width: 42ch; }
@keyframes xo-unfurl { from { transform: translateY(10px) rotate(-4deg); } to { transform: translateY(0) rotate(0); } }

@media (min-width: 1800px) {
  .xo-reading-key, .xo-expression-entry, .xo-site-ending { padding-left: max(4.45vw, calc((100vw - 1640px) / 2)); padding-right: max(4.45vw, calc((100vw - 1640px) / 2)); }
}
@media (max-width: 1100px) {
  .xo-key-link { font-size: 23px; gap: 12px; }
  .xo-reading-key { min-height: 165px; }
  .xo-level-mark { font-size: 120px; }
  .xo-photo-words { max-width: 34%; }
  .xo-spread-heading { gap: 6vw; }
  .xo-unequal-chapters { gap: 7vw; }
  .xo-chapter-heading { display: block; }
  .xo-chapter-number { font-size: 85px; margin: 0 0 18px; }
  .xo-expression-chapter h3 { font-size: 43px; }
  .xo-inside-layout { padding-left: 5vw; padding-right: 7vw; grid-template-columns: 24% minmax(0,1fr); gap: 4vw; }
  .xo-page-opening { padding-left: 5vw; padding-right: 7vw; }
  .xo-page-marker { left: 5vw; }
  .xo-reading-section.xo-risk-reading { margin-left: -24px; margin-right: -20px; padding-left: 24px; padding-right: 24px; }
  .xo-photographic-band { margin-left: -24px; }
  .xo-risk-marker { left: 3vw; width: 30px; height: 30px; }
}
@media (max-width: 680px) {
  :root { --xo-gutter: 22px; }
  body { font-size: 19px; line-height: 1.57; }
  .xo-reading-key { display: block; padding: 17px 22px 15px; min-height: 0; }
  .xo-home-sign { display: flex; align-items: center; gap: 17px; }
  .xo-level-mark { font-size: 48px; line-height: .95; }
  .xo-pinned-name { font-size: 20px; margin: 0; }
  .xo-key-links { padding: 16px 0 0; gap: 3px 24px; }
  .xo-key-link { font-size: 19px; padding: 8px 0; min-height: 44px; gap: 9px; }
  .xo-key-link svg, .xo-key-link i { width: 18px; height: 18px; flex-basis: 18px; }
  .xo-expression-opening { height: 72svh; min-height: 555px; }
  .xo-opening-photo { object-position: 36% 50%; }
  .xo-photo-words { left: 22px; top: 32px; width: 220px; max-width: 62%; }
  .xo-photo-words::before { inset: -32px -48px -34px -36px; filter: blur(12px); background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.99) 86%, rgba(255,255,255,0) 100%); }
  .xo-photo-words h1 { font-size: 44px; line-height: .985; letter-spacing: -.035em; }
  .xo-opening-deck { max-width: 205px; font-size: 18px; line-height: 1.4; margin-top: 20px; }
  .xo-expression-entry { padding: 42px 25px 52px; grid-template-columns: 62px minmax(0,1fr); gap: 15px; }
  .xo-expression-entry > .xo-arc-pair { width: 85px; height: 127px; max-width: none; margin: -14px 0 0 -22px; }
  .xo-expression-entry > p { font-size: 23px; line-height: 1.45; padding: 0; }
  .xo-diptych { padding: 52px 25px 64px; }
  .xo-spread-heading, .xo-unequal-chapters { display: block; }
  .xo-spread-heading { margin-bottom: 47px; }
  .xo-spread-heading h2 { font-size: 47px; max-width: 10ch; margin-bottom: 26px; }
  .xo-spread-heading p { padding: 0; }
  .xo-expression-chapter { padding-top: 23px; }
  .xo-chapter-heading { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 18px; margin: 0 0 27px -9px; }
  .xo-chapter-number { font-size: 72px; margin: 0; }
  .xo-expression-chapter h3 { font-size: 39px; max-width: 10ch; }
  .xo-expression-chapter + .xo-expression-chapter { margin: 58px 0 0 22px; }
  .xo-expression-chapter + .xo-expression-chapter::after { margin-top: 29px; }
  .xo-shared-risk { padding: 48px 25px 57px; }
  .xo-risk-marker { position: static; display: block; width: 30px; height: 30px; margin-bottom: 22px; }
  .xo-shared-risk h2 { font-size: 45px; margin-bottom: 28px; max-width: 12ch; }
  .xo-risk-prose { columns: 1; }
  .xo-risk-prose p:first-child { font-size: 23px; margin-bottom: 29px; }
  .xo-provider-ending { display: block; padding: 55px 25px 64px; }
  .xo-provider-ending h2 { font-size: 45px; margin-bottom: 30px; max-width: 12ch; }
  .xo-provider-ending > div > p:first-child { font-size: 24px; margin-left: 0; }
  .xo-page-opening { padding: 24px 25px 46px; }
  .xo-breadcrumbs { font-size: 16px; margin-bottom: 36px; gap: 10px; }
  .xo-page-marker { position: static; width: 30px; height: 30px; display: block; margin-bottom: 24px; }
  .xo-page-opening h1 { margin-left: 0; font-size: 50px; line-height: 1.06; max-width: 13ch; }
  .xo-page-deck { font-size: 23px; line-height: 1.45; margin: 27px 0 0 24px; max-width: 27ch; }
  .xo-inside-layout { display: block; padding: 32px 25px 64px; }
  .xo-page-contents { position: static; font-size: 18px; border-bottom: 2px solid var(--xo-gold); margin-bottom: 38px; padding: 0 0 25px; }
  .xo-page-contents p { font-size: 27px; margin-bottom: 14px; }
  .xo-page-contents ol { padding-left: 26px; }
  .xo-page-contents li { margin-bottom: 1px; }
  .xo-page-contents .xo-arc-pair { display: none; }
  .xo-page-intro { font-size: 23px; margin-bottom: 43px; }
  .xo-reading-section { padding-top: 27px; margin-bottom: 49px; }
  .xo-reading-section h2 { font-size: 37px; line-height: 1.12; margin-bottom: 25px; }
  .xo-photographic-band { margin: 3px -25px 33px; width: calc(100% + 50px); padding-bottom: 17px; }
  .xo-photographic-band img { height: 235px; }
  .xo-photographic-band figcaption { width: calc(100% - 25px); max-width: none; margin-top: -20px; margin-bottom: -17px; padding: 19px 25px 20px; font-size: 16px; }
  .xo-photographic-band.xo-material-band { display: block; width: 100%; margin: 3px 0 32px; }
  .xo-material-band img { height: 220px; }
  .xo-material-band figcaption { margin: -12px -10px 0 25px; width: auto; padding: 19px 20px; }
  .xo-page-about .xo-photographic-band img { height: 260px; }
  .xo-reading-section.xo-risk-reading { margin-left: -25px; margin-right: -25px; padding: 30px 25px 37px; }
  .xo-site-ending { padding: 44px 25px 27px; }
  .xo-ending-top { display: block; margin-bottom: 36px; }
  .xo-ending-name { font-size: 49px; margin-bottom: 25px; max-width: 12ch; }
  .xo-ending-guide { font-size: 19px; }
  .xo-ending-bottom { display: block; font-size: 16px; }
  .xo-ending-links { gap: 12px 22px; margin-bottom: 24px; }
  .xo-missing-reading { padding: 43px 25px 65px; }
}
@media (max-width: 359px) {
  .xo-reading-key { padding-left: 19px; padding-right: 19px; }
  .xo-key-links { gap: 3px 15px; }
  .xo-key-link { font-size: 17px; gap: 7px; }
  .xo-key-link svg, .xo-key-link i { width: 16px; height: 16px; flex-basis: 16px; }
  .xo-photo-words { left: 19px; max-width: 65%; }
  .xo-photo-words h1 { font-size: 40px; }
  .xo-expression-entry { display: block; }
  .xo-expression-entry > .xo-arc-pair { float: left; margin-right: 10px; }
  .xo-chapter-heading { grid-template-columns: 50px minmax(0,1fr); gap: 14px; }
  .xo-chapter-number { font-size: 62px; }
  .xo-expression-chapter h3 { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}