:root {
  --ground: #ece9e2;
  --card: #fff;
  --ink: #1f1e1c;
  --bookend: #222;
  --sage: #8e9e8a;
  --clay: #b08a74;
  --slate: #7a8794;
  --rose: #c2a39a;
  --shade: #35372c;
  --body: 'Mulish', sans-serif;
  --display: 'Newsreader', serif;
  --gutter: 10px;
  --curve: 16px;
  --measure: 66ch;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background-color: var(--ground); font: 400 17px/1.65 var(--body); }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
button, input, select { font: inherit; }
p, li { max-width: var(--measure); }
p { margin: 0 0 1.2em; }
h1, h2, h3 { font-weight: 400; line-height: 1.12; margin: 0; }
h1, h2, h3, p, a { overflow-wrap: break-word; }
h1, [data-role='display'] { font-family: var(--display); font-weight: 300; letter-spacing: -.012em; }
[data-role='skip'] { position: absolute; top: -100px; left: 20px; z-index: 30; background: var(--card); padding: 12px 20px; border-radius: 8px; }
[data-role='skip']:focus { top: 12px; }
[data-role='notice'] { background-color: var(--bookend); color: var(--card); min-height: 34px; padding: 4px 20px; text-align: center; font-size: 16px; font-weight: 500; }
[data-role='notice'] p { margin: auto; }
[data-role='masthead'] { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 13px 22px; border-radius: 11px; color: var(--ink); background-color: var(--card); }
[data-role='masthead'] a { display: flex; align-items: center; min-height: 44px; font: 400 29px/1.05 var(--display); text-decoration: none; }
[data-role='masthead'] p { max-width: 69ch; margin: 0; font-size: 16px; line-height: 1.4; letter-spacing: 0; }
[data-role='hero'] { position: relative; height: 784px; margin: var(--gutter); border-radius: var(--curve); overflow: hidden; color: var(--card); background-color: var(--shade); }
[data-role='hero'] [data-role='masthead'] { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; }
[data-role='hero-pair'] { display: grid; grid-template-columns: 37% 63%; height: 100%; gap: 0; }
[data-role='hero-pair'] img:first-child { object-position: 36% 50%; }
[data-role='hero-pair'] img:last-child { object-position: 48% 40%; }
[data-role='hero']::after { content: ''; position: absolute; inset: 37% 0 0 37%; background: linear-gradient(180deg, transparent, rgb(53 55 44 / .12) 22%, rgb(53 55 44 / .76)); pointer-events: none; }
[data-role='hero-copy'] { position: absolute; z-index: 2; right: 4.5%; bottom: 55px; max-width: min(600px, 56%); text-align: right; }
[data-role='hero-copy'] h1 { font-size: 45px; line-height: 1.02; text-wrap: balance; }
[data-role='hero-copy'] p { font-size: 17px; line-height: 1.55; margin: 20px 0 22px auto; max-width: 52ch; }
[data-role='pills'] { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.path-pill { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 8px 23px; border: 1px solid currentColor; border-radius: 100px; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; }
.path-pill:hover { text-decoration: underline; }
.path-pill.white { background-color: var(--card); color: var(--ink); border-color: var(--card); }
[data-role='stages'] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin: 20px var(--gutter) 40px; }
.stage { display: flex; min-height: 450px; border-radius: var(--curve); padding: 40px 28px 30px; flex-direction: column; text-align: center; align-items: center; justify-content: center; }
.stage.sage { background-color: var(--sage); }
.stage.clay { background-color: var(--clay); }
.stage.slate { background-color: var(--slate); }
.stage.rose { background-color: var(--rose); }
.stage h2 { font: 400 35px/1.1 var(--display); max-width: 12ch; }
.stage p { font-size: 17px; line-height: 1.5; margin: 24px 0 28px; max-width: 25ch; }
[data-role='reading-row'] { margin: 0 var(--gutter) 40px; }
[data-role='row-title'] { font: 500 23px/1.3 var(--body); margin: 0 20px 22px; }
.reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.reading-card { overflow: hidden; border-radius: 13px; background-color: var(--card); }
.reading-card img { height: 280px; }
.reading-card > div { padding: 30px; }
.reading-card h3 { font: 400 31px/1.1 var(--display); }
.reading-card h3 a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.reading-card h3 a:hover { text-decoration: underline; }
.reading-card p { margin: 16px 0 0; }
[data-role='features'] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: 0 var(--gutter) 40px; }
.feature { position: relative; min-height: 666px; overflow: hidden; border-radius: var(--curve); color: var(--card); background-color: var(--shade); }
.feature img { position: absolute; inset: 0; object-position: 50% 40%; }
.feature::after { content: ''; position: absolute; inset: 29% 0 0; background: linear-gradient(180deg, transparent, rgb(53 55 44 / .43) 40%, rgb(53 55 44 / .76)); }
.feature > div { position: relative; min-height: 666px; z-index: 1; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; }
.feature h2 { font: 300 49px/1.05 var(--display); margin: 0 0 155px; max-width: 14ch; }
.feature .path-pill { width: 100%; max-width: 260px; }
[data-role='principles'] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: 0 var(--gutter) var(--gutter); }
.principle { background-color: var(--card); padding: 30px; border-radius: var(--curve); min-height: 230px; }
.principle h2 { font: 500 20px/1.35 var(--body); margin-bottom: 20px; }
.principle p { margin: 0; }
[data-role='footer'] { background-color: var(--bookend); color: var(--card); padding: 58px 32px 25px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 28px; }
.footer-intro p { max-width: 29ch; }
.footer-name { font: 400 30px/1.15 var(--display); margin-bottom: 22px; }
.footer-group h2 { font: 500 18px/1.4 var(--body); margin-bottom: 18px; }
.footer-group a { display: flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 1.4; padding: 8px 0; text-decoration: none; }
.footer-group a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 50px; padding-top: 22px; border-top: 1px solid #777; display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; justify-content: space-between; }
.footer-bottom p { margin: 0; font-size: 16px; }
.footer-bottom a { display: inline-flex; min-height: 44px; align-items: center; }
.inner-top { margin: 20px 20px 0; }
.return-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0 8px 10px; }
[data-role='article-opening'] { margin: 0 var(--gutter) 35px; display: grid; grid-template-columns: 57% 1fr; gap: var(--gutter); }
.opening-photo { position: relative; overflow: hidden; border-radius: var(--curve); min-height: 500px; background-color: var(--shade); color: var(--card); }
.opening-photo img { position: absolute; inset: 0; object-position: 50% 43%; }
.opening-photo::after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(180deg, transparent, rgb(53 55 44 / .23) 25%, rgb(53 55 44 / .78)); }
.opening-photo h1 { position: absolute; z-index: 1; left: 38px; right: 38px; bottom: 38px; font-size: 49px; max-width: 20ch; text-wrap: balance; }
.opening-panel { background-color: var(--card); border-radius: var(--curve); padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.opening-panel .dek { font-size: 24px; line-height: 1.4; font-family: var(--display); }
.opening-panel p { max-width: 38ch; }
.opening-panel .key { padding-top: 24px; border-top: 1px solid var(--ground); margin-bottom: 0; }
.reading-shell { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 2fr) minmax(0, .28fr); gap: 32px; margin: 0 auto 40px; max-width: 1300px; padding: 0 32px; align-items: start; }
[data-role='section-jump'] { background-color: var(--card); border-radius: 13px; padding: 5px 20px; }
[data-role='section-jump'] summary { min-height: 54px; display: list-item; cursor: pointer; padding: 12px 0; font-weight: 500; }
[data-role='section-jump'] nav { padding-bottom: 10px; }
[data-role='section-jump'] a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; line-height: 1.45; }
[data-role='article-body'] { min-width: 0; }
[data-role='article-section'] { background-color: var(--card); border-radius: var(--curve); padding: 38px; margin-bottom: var(--gutter); scroll-margin-top: 20px; }
[data-role='article-section'] h2 { font: 400 34px/1.13 var(--display); margin: 0 0 26px; max-width: 25ch; }
[data-role='article-section'] p:last-child { margin-bottom: 0; }
.source-pair { margin-bottom: 24px; }
.source-pair p { margin-bottom: 5px; }
.source-pair a { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; font-size: 16px; line-height: 1.45; }
[data-role='next-reading'] { background-color: var(--sage); padding: 32px 38px; border-radius: var(--curve); }
[data-role='next-reading'] h2 { font: 400 29px/1.2 var(--display); margin-bottom: 18px; }
[data-role='next-reading'] a { display: flex; min-height: 44px; align-items: center; }
[data-role='missing'] { min-height: 52vh; margin: var(--gutter); padding: 70px 35px; background-color: var(--card); border-radius: var(--curve); }
[data-role='missing'] h1 { font-size: 52px; margin-bottom: 28px; }
@media (min-width: 1100px) { [data-role='section-jump'] { position: sticky; top: 20px; } }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-intro { grid-column: 1 / -1; }
  .footer-intro p { max-width: 60ch; }
  .stage { padding: 32px 20px; min-height: 380px; }
  .stage h2 { font-size: 30px; }
  .reading-card > div { padding: 24px; }
  .feature h2 { font-size: 40px; }
  .feature > div { padding: 24px; }
  .opening-panel { padding: 28px; }
  .reading-shell { grid-template-columns: minmax(185px, .7fr) minmax(0, 2fr); padding: 0 20px; gap: 20px; }
}
@media (max-width: 760px) {
  [data-role='masthead'] { grid-template-columns: 1fr; gap: 4px; padding: 12px 17px 16px; }
  [data-role='masthead'] a { font-size: 27px; min-height: 44px; }
  [data-role='masthead'] p { line-height: 1.4; font-size: 16px; }
  [data-role='hero'] { height: 700px; }
  [data-role='hero-pair'] { display: block; }
  [data-role='hero-pair'] img:first-child { display: none; }
  [data-role='hero-pair'] img:last-child { object-position: 40% 30%; }
  [data-role='hero']::after { inset: 40% 0 0; }
  [data-role='hero-copy'] { left: 26px; right: 26px; bottom: 30px; max-width: none; text-align: left; }
  [data-role='hero-copy'] h1 { font-size: 35px; line-height: 1.06; max-width: 20ch; }
  [data-role='hero-copy'] p { margin: 18px 0 20px; font-size: 16px; max-width: 39ch; }
  [data-role='pills'] { justify-content: flex-start; }
  [data-role='hero-copy'] .path-pill { padding: 10px 16px; flex: 1; }
  [data-role='stages'] { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 34px; }
  .stage { min-height: 310px; padding: 28px 20px; }
  .stage h2 { font-size: 31px; }
  .stage p { font-size: 16px; }
  .reading-grid, [data-role='features'], [data-role='principles'] { grid-template-columns: 1fr; }
  .reading-card img { height: 300px; }
  .reading-card > div { padding: 28px; }
  .feature, .feature > div { min-height: 600px; }
  .feature h2 { font-size: 48px; margin-bottom: 145px; }
  .feature .path-pill { max-width: 270px; }
  .principle { min-height: auto; padding: 30px; }
  [data-role='footer'] { padding: 40px 26px 24px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
  .footer-bottom { margin-top: 32px; }
  .inner-top { margin: 10px 20px 0; }
  [data-role='article-opening'] { grid-template-columns: 1fr; }
  .opening-photo { min-height: 370px; }
  .opening-photo h1 { font-size: 40px; left: 26px; right: 26px; bottom: 28px; }
  .opening-panel { padding: 30px 26px; }
  .opening-panel .dek { font-size: 26px; }
  .opening-panel p { max-width: var(--measure); }
  .reading-shell { grid-template-columns: 1fr; margin-bottom: 30px; padding: 0 10px; gap: 20px; }
  [data-role='section-jump'] { padding: 5px 26px; }
  [data-role='article-section'] { padding: 30px 26px; }
  [data-role='article-section'] h2 { font-size: 32px; }
  [data-role='next-reading'] { padding: 30px 26px; }
}
@media (max-width: 450px) {
  [data-role='notice'] { padding: 7px 18px; font-size: 16px; line-height: 1.4; }
  [data-role='hero'] { height: 745px; }
  [data-role='stages'] { grid-template-columns: 1fr; }
  .stage { min-height: 350px; padding: 36px; }
  .stage h2 { font-size: 38px; max-width: 16ch; }
  .stage p { max-width: 28ch; }
  .stage .path-pill { min-width: 175px; }
  .reading-card img { height: 255px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  [data-role='notice'], [data-role='footer'], [data-role='section-jump'], .return-link, [data-role='next-reading'] { display: none; }
  body { background: var(--card); color: var(--ink); font-size: 12pt; }
  [data-role='article-opening'], .reading-shell { display: block; margin: 0; padding: 0; }
  .opening-photo { min-height: 0; background: var(--card); color: var(--ink); }
  .opening-photo img, .opening-photo::after { display: none; }
  .opening-photo h1 { position: static; margin: 25px 0; }
  .opening-panel, [data-role='article-section'] { padding: 15px 0; break-inside: avoid; }
}