:root {
  --dr-ground: #E7F4FB;
  --dr-ink: #221C2C;
  --dr-violet: #50317D;
  --dr-berry: #E2C1DC;
  --dr-white: #FFFFFF;
  --dr-fold: #B9D4E3;
  --dr-gutter: clamp(24px, 6.944444vw, 100px);
  color-scheme: light;
  font-family: 'Proza Libre', 'Trebuchet MS', sans-serif;
  color: var(--dr-ink);
  background: var(--dr-white);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; font-size: 17px; line-height: 1.7; }
a { color: var(--dr-violet); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .dr-folio-run:focus-visible { outline: 3px solid var(--dr-violet); outline-offset: 5px; }
a:focus-visible { border-radius: 20px; background: var(--dr-ground); }
img { max-width: 100%; }
h1, h2, h3, .dr-name, .dr-ending { font-family: 'Sanchez', Georgia, serif; font-weight: 400; }
h1, h2, h3 { line-height: 1.16; }
p { margin: 0 0 1.25em; }
.dr-skip { position: fixed; left: 20px; top: -100px; padding: 9px 20px; z-index: 10; background: var(--dr-white); }
.dr-skip:focus { top: 12px; }
.dr-mast { padding: 15px var(--dr-gutter) 20px; background: var(--dr-ground); }
.dr-crown { position: relative; height: 64px; }
.dr-crown-curve { position: absolute; width: 100%; height: 64px; object-fit: fill; pointer-events: none; }
.dr-crown a { display: inline-flex; align-items: center; gap: 9px; position: absolute; padding: 3px 13px; text-decoration: none; font-size: 18px; line-height: 30px; }
.dr-crown a:hover { color: var(--dr-white); background: var(--dr-violet); border-radius: 20px; }
.dr-crown a:nth-of-type(1) { top: 25px; left: 0; }
.dr-crown a:nth-of-type(2) { top: -2px; left: 50%; transform: translateX(-50%); }
.dr-crown a:nth-of-type(3) { top: 25px; right: 0; }
.dr-name { display: inline-block; color: var(--dr-ink); font-size: 31px; line-height: 1.4; text-decoration: none; margin-top: 1px; }
.dr-name:hover { color: var(--dr-violet); }
.dr-icon { width: 21px; height: 21px; flex: 0 0 21px; display: inline-block; vertical-align: -.15em; font-style: normal; }
.dr-icon svg { display: block; width: 100%; height: 100%; }
/* The opening is a photograph crossed by a folded letter, never a floating card. */
.dr-opening { position: relative; isolation: isolate; padding: 38px 0 78px; min-height: 580px; background: var(--dr-ground); }
.dr-letter { position: relative; z-index: 2; width: min(760px, 57%); padding: 26px 45px 34px var(--dr-gutter); background: var(--dr-ground); border-block: 7px solid var(--dr-violet); clip-path: polygon(0 0, calc(100% - 35px) 0, 100% 35px, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100%); }
.dr-letter::before { content: ''; position: absolute; top: 0; right: 0; width: 35px; height: 35px; background: var(--dr-fold); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.dr-opening h1 { font-size: clamp(44px, 4.25vw, 64px); margin: 0 0 23px; letter-spacing: -.045em; max-width: 610px; text-wrap: balance; }
.dr-opening-layout { display: block; }
.dr-greeting { font-size: 18px; line-height: 1.55; margin-bottom: 21px; max-width: 560px; }
.dr-prescription-note { margin: 0; font-size: 16px; line-height: 1.55; color: var(--dr-ink); cursor: text; }
.dr-prescription-note::first-letter { font-family: 'Sanchez', Georgia, serif; float: left; font-size: 79px; line-height: .81; padding: 7px 8px 1px 0; color: var(--dr-violet); }
.dr-life-picture { position: absolute; inset: 0; z-index: -1; margin: 0; min-width: 0; }
.dr-capsule { position: absolute; inset: 0; background-color: var(--dr-fold); background-size: cover; background-position: 64% center; }
/* A scarf-shaped cut escapes the photographic field at its lower edge. */
.dr-capsule::after { content: ''; position: absolute; right: 7%; bottom: -22px; width: 155px; height: 95px; background-color: var(--dr-berry); background-size: auto 580px; background-position: 88% 60%; clip-path: polygon(0 0, 88% 9%, 100% 83%, 20% 100%); transform: rotate(-9deg); }
.dr-life-picture figcaption { position: absolute; right: var(--dr-gutter); bottom: 25px; max-width: 340px; margin: 0; padding: 12px 20px; background: var(--dr-ground); color: var(--dr-ink); border-left: 5px solid var(--dr-violet); font-size: 16px; line-height: 1.5; }
.dr-open-invitation { position: absolute; z-index: 2; left: var(--dr-gutter); bottom: 9px; margin: 0; font-size: 16px; }
.dr-open-invitation a { display: inline-flex; gap: 16px; align-items: center; padding: 9px 18px; background: var(--dr-ground); text-decoration: none; border-bottom: 3px solid var(--dr-violet); }
.dr-open-invitation a:hover { background: var(--dr-violet); color: var(--dr-white); }
/* Three entire, open editorial folios; the next spread remains in view. */
.dr-folio-run { display: flex; align-items: stretch; overflow-x: auto; gap: 82px; padding: 68px var(--dr-gutter) 42px; scroll-snap-type: x proximity; scroll-padding-inline: var(--dr-gutter); scrollbar-color: var(--dr-violet) var(--dr-ground); scrollbar-width: auto; background: var(--dr-white); }
.dr-folio { flex: 0 0 min(1060px, calc(100vw - 2 * var(--dr-gutter) - 82px)); padding: 42px 12px 0 0; scroll-snap-align: start; scroll-margin-top: 28px; position: relative; border-top: 7px solid var(--dr-violet); }
.dr-folio-count { position: absolute; top: 20px; right: 0; font-family: 'Sanchez', Georgia, serif; color: var(--dr-violet); font-size: 17px; line-height: 1; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.dr-folio-count span { font-size: 85px; letter-spacing: -.08em; }
.dr-folio h2 { margin: 0 170px 25px 0; font-size: 43px; max-width: 750px; letter-spacing: -.035em; text-wrap: balance; }
.dr-owner-preface { color: var(--dr-violet); font-size: 21px; line-height: 1.6; max-width: 700px; margin-bottom: 30px; }
.dr-owner-preface p { margin-bottom: 13px; }
.dr-reading-strokes { display: block; width: 108px; height: 22px; }
.dr-folio-prose { max-width: 700px; }
.dr-ending { position: relative; font-size: 26px; line-height: 1.5; color: var(--dr-violet); max-width: 700px; margin: 36px 0 32px 190px; padding: 0 0 0 24px; border-left: 7px solid var(--dr-violet); }
.dr-folio-links { display: flex; gap: 18px 28px; flex-wrap: wrap; max-width: 900px; margin-top: 25px; }
.dr-folio-links a, .dr-next-reading a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--dr-ground); text-decoration: none; border-bottom: 3px solid var(--dr-violet); box-shadow: 4px 4px 0 var(--dr-berry); }
.dr-folio-links a:hover, .dr-next-reading a:hover { background: var(--dr-violet); color: var(--dr-white); box-shadow: 4px 4px 0 var(--dr-fold); }
.dr-backmatter { margin: 35px var(--dr-gutter) 0; padding: 32px 0 30px; border-top: 5px solid var(--dr-violet); }
.dr-backmatter p { max-width: 650px; font-size: 16px; line-height: 1.6; }
.dr-backmatter nav { display: flex; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.dr-backmatter nav a { font-size: 16px; padding: 5px 0; }
.dr-copyright { color: var(--dr-violet); font-size: 16px; margin-bottom: 0; }
/* Interior photographs are wide capsules pulled beyond the reading margin. */
.dr-page-head { padding: 24px var(--dr-gutter) 0; background: var(--dr-ground); }
.dr-crumb { font-size: 16px; margin: 0 0 24px; }
.dr-crumb a { display: inline-flex; gap: 9px; align-items: center; }
.dr-crumb span { margin: 0 10px; }
.dr-page-head h1 { font-size: clamp(42px, 4.3vw, 62px); letter-spacing: -.035em; max-width: 1080px; margin: 0 0 25px; text-wrap: balance; }
.dr-page-intro { max-width: 860px; font-size: 21px; line-height: 1.6; padding-bottom: 18px; margin-bottom: 0; }
.dr-inner-picture { position: relative; width: calc(100% + var(--dr-gutter)); margin: 20px 0 48px calc(-1 * var(--dr-gutter)); padding-bottom: 18px; }
.dr-inner-capsule { height: 225px; width: calc(100% - 36px); border-radius: 0 999px 999px 0; background-color: var(--dr-fold); background-size: cover; background-position: center; box-shadow: 12px 12px 0 var(--dr-violet); }
.dr-inner-picture figcaption { position: relative; width: fit-content; max-width: calc(100% - var(--dr-gutter) - 28px); margin: -23px 0 0 calc(var(--dr-gutter) + 25px); padding: 12px 20px; border-left: 5px solid var(--dr-violet); background: var(--dr-ground); color: var(--dr-ink); font-size: 16px; line-height: 1.5; }
.dr-reading-body { margin: 0 var(--dr-gutter); max-width: 1030px; counter-reset: chapter; }
.dr-chapter { max-width: 820px; margin: 48px 0 65px 105px; position: relative; }
.dr-chapter h2 { position: relative; font-size: 36px; letter-spacing: -.025em; margin: 0 0 22px; }
.dr-chapter h2 > .dr-icon { position: absolute; left: -58px; top: 5px; width: 28px; height: 28px; color: var(--dr-violet); }
.dr-chapter .dr-owner-preface { font-size: 19px; }
.dr-chapter .dr-ending { margin-left: 90px; font-size: 25px; }
.dr-next-reading { margin: 20px 0 40px 105px; }
.dr-source-notes { padding: 0; margin: 0; list-style: none; }
.dr-source-notes li { margin: 0 0 31px; padding: 0 0 22px; border-bottom: 2px solid var(--dr-ground); }
.dr-source-notes h3 { font-size: 23px; line-height: 1.4; margin: 0 0 8px; }
.dr-source-notes p { margin-bottom: 0; }
.dr-source-notes small { display: block; font-size: 16px; margin: 7px 0; color: var(--dr-violet); }
.dr-missing { min-height: 55vh; padding: 40px var(--dr-gutter); background: var(--dr-ground); border-bottom: 7px solid var(--dr-violet); }
.dr-missing h1 { max-width: 850px; font-size: 54px; }
.dr-missing p { max-width: 650px; }
@media (min-width: 1700px) {
  .dr-letter { width: 850px; padding-right: 70px; }
  .dr-opening { min-height: 640px; }
}
@media (max-width: 1100px) and (min-width: 741px) {
  .dr-letter { width: 66%; padding-right: 35px; }
  .dr-opening h1 { font-size: 45px; }
  .dr-life-picture figcaption { max-width: 250px; }
  .dr-folio { flex-basis: calc(100vw - 2 * var(--dr-gutter) - 35px); }
  .dr-folio h2 { font-size: 37px; }
  .dr-ending, .dr-chapter, .dr-next-reading { margin-left: 55px; }
}
@media (max-width: 740px) {
  :root { --dr-gutter: 22px; }
  body { font-size: 17px; line-height: 1.68; }
  .dr-mast { padding-top: 5px; padding-bottom: 4px; height: 81px; }
  .dr-crown { height: 36px; }
  .dr-crown-curve { height: 36px; }
  .dr-crown a { padding: 0 5px; gap: 5px; font-size: 16px; line-height: 24px; }
  .dr-crown .dr-icon { width: 17px; height: 17px; flex-basis: 17px; }
  .dr-crown a:nth-of-type(1), .dr-crown a:nth-of-type(3) { top: 12px; }
  .dr-crown a:nth-of-type(2) { top: 0; }
  .dr-name { display: block; width: fit-content; font-size: 23px; margin-top: 5px; line-height: 30px; }
  .dr-opening { padding: 12px 0 58px; min-height: 0; }
  .dr-letter { width: 100%; padding: 18px var(--dr-gutter) 23px; border-block-width: 5px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
  .dr-letter::before { width: 22px; height: 22px; }
  .dr-opening h1 { font-size: 30px; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 16px; text-wrap: initial; }
  .dr-greeting { font-size: 16px; line-height: 1.5; margin-bottom: 17px; }
  .dr-prescription-note { font-size: 16px; line-height: 1.46; }
  .dr-prescription-note::first-letter { font-size: 76px; padding-top: 7px; }
  .dr-life-picture { position: relative; inset: auto; z-index: auto; margin: 22px var(--dr-gutter) 0; }
  .dr-capsule { position: relative; inset: auto; width: 100%; height: 75px; border-radius: 999px; background-position: 62% 46%; }
  .dr-capsule::after { top: -10px; bottom: auto; right: 4px; width: 53px; height: 38px; background-size: 346px 109px; }
  .dr-life-picture figcaption { position: static; max-width: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left-width: 3px; font-size: 16px; line-height: 1.4; }
  .dr-open-invitation { left: var(--dr-gutter); bottom: 5px; }
  .dr-open-invitation a { padding: 7px 0; gap: 9px; background: transparent; }
  .dr-open-invitation a:hover { background: var(--dr-violet); }
  .dr-folio-run { display: block; overflow: visible; padding: 38px var(--dr-gutter) 0; }
  .dr-folio { width: 100%; padding: 26px 0 0; margin-bottom: 55px; scroll-margin-top: 18px; border-top-width: 5px; }
  .dr-folio-count { position: static; gap: 10px; margin: 0 0 19px; font-size: 17px; }
  .dr-folio-count span { font-size: 54px; }
  .dr-folio h2 { font-size: 32px; margin: 0 0 22px; }
  .dr-owner-preface { font-size: 19px; line-height: 1.55; margin-bottom: 25px; }
  .dr-ending { margin: 28px 0 24px 15px; font-size: 22px; padding-left: 17px; border-left-width: 5px; }
  .dr-folio-links { gap: 15px; flex-direction: column; align-items: flex-start; }
  .dr-folio-links a, .dr-next-reading a { font-size: 16px; padding: 9px 13px; }
  .dr-backmatter { margin-top: 30px; padding-top: 27px; }
  .dr-backmatter nav { gap: 8px 24px; }
  .dr-page-head { padding-top: 24px; }
  .dr-crumb { margin-bottom: 23px; }
  .dr-page-head h1 { font-size: 34px; line-height: 1.15; }
  .dr-page-intro { font-size: 18px; padding-bottom: 8px; }
  .dr-inner-picture { margin-top: 22px; margin-bottom: 35px; }
  .dr-inner-capsule { height: 110px; width: calc(100% - 16px); box-shadow: 7px 7px 0 var(--dr-violet); }
  .dr-inner-picture figcaption { margin-top: 15px; margin-left: var(--dr-gutter); padding: 0 0 0 14px; border-left-width: 3px; }
  .dr-chapter { margin: 38px 0 45px; }
  .dr-chapter h2 { font-size: 29px; }
  .dr-chapter h2 > .dr-icon { position: static; display: block; margin-bottom: 13px; width: 24px; height: 24px; }
  .dr-chapter .dr-ending { margin-left: 15px; font-size: 22px; }
  .dr-next-reading { margin-left: 0; }
  .dr-source-notes h3 { font-size: 21px; }
  .dr-missing h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  .dr-crown, .dr-open-invitation, .dr-folio-links, .dr-next-reading, .dr-life-picture { display: none; }
  .dr-opening { padding: 0; min-height: 0; }
  .dr-letter { width: 100%; padding: 20px; clip-path: none; }
  .dr-folio-run { display: block; overflow: visible; }
  .dr-folio { width: auto; break-inside: avoid; margin-bottom: 40px; }
  body { background: white; }
}

.dr-photo-opening { background-image: url("/ghk-dear-1cff1fd53034/shelter-scarf.webp"); }
.dr-photo-opening::after { background-image: url("/ghk-dear-1cff1fd53034/shelter-scarf.webp"); }

.dr-photo-skin { background-image: url("/ghk-dear-1cff1fd53034/daylight-at-glass.webp"); }

.dr-photo-hair { background-image: url("/ghk-dear-1cff1fd53034/scarf-over-shoulder.webp"); }

.dr-photo-route { background-image: url("/ghk-dear-1cff1fd53034/tracks-beyond-shelter.webp"); }

.dr-photo-questions { background-image: url("/ghk-dear-1cff1fd53034/folded-scarf-seat.webp"); }

.dr-photo-about { background-image: url("/ghk-dear-1cff1fd53034/waiting-with-a-book.webp"); }

.dr-photo-contact { background-image: url("/ghk-dear-1cff1fd53034/across-the-shelter.webp"); }