:root {
  --paper: #f2ece3;
  --ink: #2b1b18;
  --brick: #a63a2a;
  --clay: #e8c7b0;
  --red-wash: #ce7962;
  --display: 'Gloock', Georgia, serif;
  --text: 'Mulish', Arial, sans-serif;
  --gutter: clamp(28px, 5vw, 80px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 19px/1.85 var(--text); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; }
img:not(.rp-rule-mark) { border-radius: 5px; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .18s ease, text-decoration-thickness .18s ease, background-color .18s ease; }
a:hover { color: var(--brick); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--brick); outline-offset: 6px; border-radius: 1px; }
::selection { background: var(--clay); color: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.14; text-wrap: balance; }
h1 { font-size: clamp(44px, 5.2vw, 76px); letter-spacing: -.035em; margin: 0; }
h2 { font-size: clamp(32px, 3vw, 44px); letter-spacing: -.025em; margin: 0 0 27px; }
h3 { font-size: 28px; margin: 32px 0 18px; }
p { margin: 0 0 24px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
li { margin-bottom: 12px; }
i[data-lucide], svg.lucide { display: inline-block; flex: 0 0 22px; width: 22px; height: 22px; vertical-align: middle; stroke-width: 1.4; }
.rp-skip { position: absolute; top: -150px; left: 20px; z-index: 10; padding: 12px 20px; background: var(--paper); }
.rp-skip:focus { top: 12px; }
.rp-masthead { display: grid; grid-template-areas: 'long' 'signature' 'pair'; padding: 0 var(--gutter); background: var(--paper); }
.rp-ribbon-long { grid-area: long; border-bottom: 1px solid var(--ink); padding: 12px 10px; justify-content: center; }
.rp-signature { grid-area: signature; display: block; justify-self: center; text-decoration: none; font: 400 clamp(36px, 4.9vw, 76px)/1.08 var(--display); letter-spacing: -.04em; padding: 28px 10px 32px; }
.rp-signature:hover { color: var(--brick); }
.rp-ribbon-pair { grid-area: pair; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.rp-reading-link { display: flex; align-items: center; gap: 13px; min-height: 50px; text-decoration: none; font-size: 18px; font-weight: 600; line-height: 1.45; }
.rp-reading-link:hover { background: var(--clay); color: var(--ink); }
.rp-reading-link:focus-visible { outline-offset: -5px; background: var(--clay); }
.rp-ribbon-pair a { justify-content: center; padding: 16px 20px; }
.rp-ribbon-pair a + a { border-left: 1px solid var(--ink); }

/* The photograph is the field. Only the lower-right light receives a veil. */
.rp-window { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; min-height: max(600px, calc(100svh - 250px)); isolation: isolate; background: #e7d8c7; overflow: hidden; }
.rp-window-photo { position: absolute; inset: 0; margin: 0; z-index: -2; }
.rp-window-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 43% 35%; border-radius: 0; transform-origin: 25% 45%; animation: rp-daylight 1.1s cubic-bezier(.2,.65,.35,1) both; }
.rp-window::after { content: ''; position: absolute; z-index: -1; right: 0; bottom: 0; width: 80%; height: 80%; background: linear-gradient(0deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.97) 72%, rgba(255,255,255,0) 100%); mask-image: linear-gradient(90deg, transparent, #000 23%); pointer-events: none; }
.rp-window h1 { position: relative; width: min(47%, 700px); margin: 0 var(--gutter) 60px 0; font-size: clamp(48px, 4.7vw, 72px); line-height: 1.09; letter-spacing: -.035em; }
@keyframes rp-daylight { from { transform: scale(1.025); } to { transform: scale(1); } }

/* The warm red introduction makes a substantial second beat. */
.rp-welcome { background: var(--red-wash); padding: 75px var(--gutter) 82px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 8vw; align-items: end; }
.rp-welcome h2 { font-size: clamp(39px, 4.2vw, 62px); max-width: 590px; margin-bottom: 0; }
.rp-welcome p { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.75; max-width: 690px; padding: 0 0 5px 30px; border-left: 1px solid var(--ink); }

/* Three pictures descend, then their essays begin on one shared rule. */
.rp-spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(34px, 4.8vw, 76px); padding: 112px var(--gutter) 0; position: relative; }
.rp-piece { display: contents; }
.rp-caption { grid-row: 1; margin: 0 0 54px; min-width: 0; }
.rp-piece:nth-of-type(1) .rp-caption { grid-column: 1; }
.rp-piece:nth-of-type(2) .rp-caption { grid-column: 2; padding-top: 105px; }
.rp-piece:nth-of-type(3) .rp-caption { grid-column: 3; padding-top: 210px; }
.rp-caption img { width: calc(100% + 22px); max-width: none; height: auto; aspect-ratio: 1.52; object-fit: cover; margin: 0 0 30px -22px; box-shadow: 0 14px 25px -22px #2b1b1866; }
.rp-piece:nth-of-type(2) .rp-caption img { margin-left: 0; }
.rp-piece:nth-of-type(3) .rp-caption img { width: calc(100% + 14px); margin-left: -4px; }
.rp-caption figcaption { position: relative; margin-left: 15px; padding-left: 22px; border-left: 2px solid var(--brick); }
.rp-caption h2 { font-size: clamp(31px, 2.55vw, 39px); margin: 0 0 20px -38px; padding: 0 0 3px; background: var(--paper); }
.rp-caption figcaption > p { font-size: 18px; line-height: 1.7; margin: 0; }
.rp-explanation { grid-row: 2; padding: 43px 0 82px; min-width: 0; }
.rp-piece:nth-of-type(1) .rp-explanation { grid-column: 1; }
.rp-piece:nth-of-type(2) .rp-explanation { grid-column: 2; }
.rp-piece:nth-of-type(3) .rp-explanation { grid-column: 3; }
.rp-common-rule { grid-column: 1/-1; grid-row: 2; align-self: start; border-top: 2px solid var(--ink); position: relative; height: 0; }
.rp-rule-mark { position: absolute; right: 14%; top: -9px; width: 140px; height: 30px; background: var(--paper); }
.rp-afterword { margin: 0; padding: 78px var(--gutter) 90px; background: var(--clay); display: grid; grid-template-columns: 1fr 1.05fr; gap: 8vw; align-items: start; }
.rp-afterword h2 { max-width: 570px; font-size: clamp(38px, 4.2vw, 61px); margin-bottom: 0; }
.rp-afterword-copy { max-width: 730px; font-size: 21px; }

/* Inner-page photographs introduce only the section they were written for. */
.rp-guide-head { padding: 76px var(--gutter) 72px; background: var(--clay); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .65fr); column-gap: 7vw; align-items: end; }
.rp-guide-head h1 { max-width: 880px; font-size: clamp(44px, 4.8vw, 70px); }
.rp-guide-head p { font-size: 21px; line-height: 1.75; max-width: 430px; border-left: 2px solid var(--brick); padding: 8px 0 8px 27px; }
.rp-reading-body { padding: 20px var(--gutter) 45px; }
.rp-essay-section { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); column-gap: 7vw; row-gap: 32px; padding: 62px 0; border-top: 1px solid #bfa99b; }
.rp-essay-section:first-child { border-top: 0; }
.rp-section-heading { grid-column: 1; grid-row: 1; position: relative; max-width: 355px; margin-bottom: 0; }
.rp-section-heading::before { content: ''; display: block; width: 55px; border-top: 3px solid var(--brick); margin-bottom: 24px; }
.rp-essay-copy { grid-column: 2; max-width: 790px; min-width: 0; }
.rp-illustrated .rp-section-heading { grid-row: 1 / 3; }
.rp-illustrated .rp-essay-copy { grid-row: 2; }
.rp-band-photo { grid-column: 2; grid-row: 1; margin: 0 -22px 0 -4vw; position: relative; }
.rp-band-photo img { width: 100%; height: auto; aspect-ratio: 2.77; object-fit: cover; box-shadow: 0 18px 35px -24px #2b1b1866; }
.rp-band-photo figcaption { position: relative; margin: -23px 5vw 0 -20px; padding: 22px 26px 23px; background: var(--clay); font-size: 18px; max-width: 550px; line-height: 1.7; border-bottom: 2px solid var(--brick); }
.rp-table-wrap { overflow-x: auto; margin: 34px 0; }
table { width: 100%; border-collapse: collapse; font-size: 18px; line-height: 1.65; text-align: left; }
th { font-weight: 700; padding: 19px 16px; border-block: 1px solid var(--ink); background: var(--clay); vertical-align: top; }
td { padding: 21px 16px; border-bottom: 1px solid #bfa99b; vertical-align: top; }

.rp-reading-map { padding: 51px var(--gutter) 56px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: .65fr 1.35fr; gap: 7vw; }
.rp-reading-map h2 { font-size: 38px; max-width: 280px; margin-bottom: 0; }
.rp-map-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-content: start; }
.rp-map-links a { font-size: 18px; min-height: 53px; display: flex; gap: 13px; align-items: center; text-decoration: none; border-bottom: 1px solid #bfa99b; }
.rp-map-links a:hover { background: var(--clay); color: var(--ink); }
.rp-colophon { padding: 58px var(--gutter) 38px; background: var(--clay); }
.rp-colophon .rp-foot-signature { font: 400 clamp(42px, 7.7vw, 118px)/1.12 var(--display); max-width: none; letter-spacing: -.04em; margin: 0 0 36px -.035em; }
.rp-colophon p { max-width: 760px; font-size: 18px; }
.rp-copyright { margin-top: 27px; }
.rp-not-found { min-height: 450px; padding: 70px var(--gutter) 90px; max-width: 1040px; }
.rp-not-found h1 { margin-bottom: 32px; }

@media (min-width: 1000px) {
  .rp-guide .rp-section-heading { position: sticky; top: 35px; align-self: start; }
}
@media (min-width: 681px) and (max-width: 999px) {
  .rp-window h1 { width: 54%; font-size: clamp(44px, 5.8vw, 58px); }
  .rp-spread { column-gap: 30px; }
  .rp-caption img { width: 100%; margin-left: 0; }
  .rp-piece:nth-of-type(3) .rp-caption img { width: 100%; margin-left: 0; }
  .rp-caption figcaption { margin-left: 0; padding-left: 15px; }
  .rp-caption h2 { margin-left: -15px; font-size: 29px; }
  .rp-welcome, .rp-afterword { gap: 40px; }
  .rp-welcome h2, .rp-afterword h2 { font-size: 41px; }
  .rp-guide-head { gap: 35px; }
  .rp-essay-section { column-gap: 44px; }
  .rp-band-photo { margin-left: 0; margin-right: 0; }
}
@media (max-width: 680px) {
  body { font-size: 18px; line-height: 1.85; }
  .rp-masthead { grid-template-areas: 'signature' 'long' 'pair'; padding: 0 20px; }
  .rp-signature { font-size: clamp(26px, 7.8vw, 42px); padding: 23px 0 20px; white-space: nowrap; }
  .rp-reading-link { font-size: 18px; line-height: 1.4; gap: 10px; }
  .rp-ribbon-long { border-top: 1px solid var(--ink); border-bottom: 0; padding: 12px 0; }
  .rp-ribbon-pair a { padding: 13px 9px 14px 0; align-items: flex-start; justify-content: start; }
  .rp-ribbon-pair a + a { padding: 13px 0 14px 15px; }
  .rp-ribbon-pair i, .rp-ribbon-pair svg { display: none; }
  .rp-window { min-height: max(530px, calc(100svh - 266px)); }
  .rp-window-photo img { object-position: 27% 35%; }
  .rp-window::after { width: 100%; height: 78%; mask-image: linear-gradient(90deg, transparent, #000 12%); }
  .rp-window h1 { width: calc(100% - 56px); font-size: clamp(37px, 10.9vw, 53px); margin: 0 24px 34px 0; line-height: 1.1; }
  .rp-welcome { display: block; padding: 47px 24px 51px; }
  .rp-welcome h2 { font-size: 40px; max-width: 390px; margin-bottom: 28px; }
  .rp-welcome p { font-size: 20px; padding: 0; border: 0; }
  .rp-spread { display: block; padding: 62px 24px 0; }
  .rp-piece { display: block; margin-bottom: 62px; }
  .rp-caption, .rp-piece:nth-of-type(2) .rp-caption, .rp-piece:nth-of-type(3) .rp-caption { padding: 0; margin: 0; }
  .rp-caption img, .rp-piece:nth-of-type(3) .rp-caption img { width: calc(100% + 12px); max-width: none; margin: 0 0 29px -12px; aspect-ratio: 1.68; }
  .rp-piece:nth-of-type(2) .rp-caption img { margin-left: 0; }
  .rp-caption figcaption { margin-left: 14px; padding-left: 18px; }
  .rp-caption h2 { font-size: 35px; margin-left: -32px; margin-bottom: 18px; }
  .rp-caption figcaption > p { margin-bottom: 28px; }
  .rp-explanation { padding: 27px 0 0; border-top: 1px solid var(--ink); }
  .rp-common-rule { display: none; }
  .rp-afterword { display: block; padding: 47px 24px 54px; }
  .rp-afterword h2 { font-size: 40px; margin-bottom: 30px; }
  .rp-afterword-copy { font-size: 20px; }
  .rp-guide-head { display: block; padding: 44px 24px 43px; }
  .rp-guide-head h1 { font-size: 42px; margin-bottom: 27px; }
  .rp-guide-head p { font-size: 20px; padding: 0 0 0 20px; }
  .rp-reading-body { padding: 4px 24px 15px; }
  .rp-essay-section { display: block; padding: 40px 0; }
  .rp-section-heading { font-size: 33px; max-width: 100%; margin-bottom: 26px; }
  .rp-section-heading::before { margin-bottom: 21px; }
  .rp-band-photo { margin: 0 -8px 29px; }
  .rp-band-photo img { aspect-ratio: 2.2; }
  .rp-band-photo figcaption { margin: -17px 8px 0 -3px; padding: 20px 19px 21px; }
  table { font-size: 18px; min-width: 0; }
  td, th { padding: 14px 8px; overflow-wrap: anywhere; }
  .rp-reading-map { display: block; padding: 38px 24px 43px; }
  .rp-reading-map h2 { font-size: 35px; max-width: 350px; margin-bottom: 23px; }
  .rp-map-links { gap: 0 19px; }
  .rp-map-links a { gap: 9px; font-size: 18px; min-height: 58px; line-height: 1.5; }
  .rp-map-links i, .rp-map-links svg { flex-basis: 20px; width: 20px; height: 20px; }
  .rp-colophon { padding: 43px 24px 29px; }
  .rp-colophon .rp-foot-signature { font-size: clamp(36px, 10.5vw, 61px); margin-bottom: 28px; }
  .rp-not-found { padding: 44px 24px 65px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none; }
  .rp-window-photo img { animation: none; }
}