:root {
  --ice: #D4E7F2;
  --ink: #2E343B;
  --fjord: #227F86;
  --stone: #BDB3A1;
  --white: #FFFFFF;
  --display: "Crete Round", Georgia, serif;
  --reading: "Vollkorn", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; color: var(--ink); background: var(--white); font: 400 20px/1.56 var(--reading); }
::selection { color: var(--ink); background: var(--stone); }
img { display: block; max-width: 100%; color: var(--ink); font-size: 18px; }
a { color: var(--ink); text-decoration-color: var(--fjord); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-underline-offset .18s ease, background-color .18s ease; }
a:hover { text-underline-offset: 8px; text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; background-color: var(--white); text-decoration-thickness: 3px; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(60px, 6.05vw, 88px); line-height: 1.045; letter-spacing: -.037em; }
h1 em { font-weight: 400; }
h2 { margin: 0 0 28px; font-size: 46px; line-height: 1.11; letter-spacing: -.028em; }
strong { font-weight: 600; }
figure { margin: 0; }
.reading-skip { position: absolute; z-index: 3; left: 20px; top: -100px; padding: 10px 18px; background: var(--white); }
.reading-skip:focus { top: 12px; }
.cover-spread { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--ice); }
.cover-mast { position: relative; padding: 64px 32px 38px 38px; display: flex; flex-direction: column; gap: 64px; border-right: 1px solid rgba(46,52,59,.22); }
.publication-name { display: inline-block; font: 400 35px/1.1 var(--display); white-space: nowrap; width: fit-content; text-decoration: none; letter-spacing: -.035em; }
.publication-name:hover { text-decoration: underline; text-decoration-color: var(--fjord); text-underline-offset: 8px; }
.publication-description { max-width: 207px; font-size: 20px; line-height: 1.35; margin: 21px 0 0; }
.mast-readings { margin-top: auto; display: grid; gap: 20px; }
.mast-readings a { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 10px 0; font-size: 25px; line-height: 1.2; text-decoration: none; }
.mast-readings a span { text-decoration: underline; text-decoration-color: var(--fjord); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.mast-readings a:hover span { text-underline-offset: 11px; text-decoration-thickness: 3px; }
.mast-readings a:hover, .mast-readings a:focus-visible { background: rgba(255,255,255,.5); }
.mast-readings i { width: 22px; font-size: 20px; text-align: center; align-self: center; flex-shrink: 0; }
.mast-readings a[aria-current="page"] span { text-decoration-thickness: 4px; }
.cover-copy { min-width: 0; }
.cover-words { padding: 43px 64px 36px; max-width: 1220px; }
.cover-spread:not(.inner-opening) .cover-words { text-align: center; margin-inline: auto; }
.cover-words > .joined-route { width: 100%; margin: 0 0 34px; }
.cover-words > .joined-route span:first-child { width: 24%; }
.cover-words > .joined-route span:last-child { flex: 1; }
.reader-place { font-size: 22px; max-width: 590px; line-height: 1.4; margin: 27px 0 0; }
.cover-spread:not(.inner-opening) .reader-place { margin-inline: auto; }
.opening-photo { position: relative; width: 100%; overflow: hidden; }
.opening-photo img { width: 100%; aspect-ratio: 1160 / 420; object-fit: cover; object-position: 50% 50%; clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); }
.inner-opening .cover-words { padding-top: 47px; padding-bottom: 64px; width: 100%; }
.inner-opening h1 { font-size: clamp(48px, 5.2vw, 76px); max-width: 880px; }
.inner-opening .cover-copy { min-height: 495px; display: flex; align-items: center; }
.inner-opening .reader-place { max-width: 660px; }
.cover-introduction { max-width: 1220px; margin: 0 auto; padding: 62px 0 78px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
.cover-introduction p { grid-column: 2; max-width: 755px; font-size: 25px; line-height: 1.45; }
.joined-route { height: 12px; display: flex; align-items: center; gap: 22px; width: 190px; }
.joined-route span { display: block; height: 3px; background: var(--fjord); }
.joined-route span:first-child { width: 112px; }
.joined-route span:last-child { width: 56px; }
.cover-introduction .joined-route { margin-top: 12px; width: 100%; }
.cover-introduction .joined-route span:first-child { width: 60%; }
.cover-introduction .joined-route span:last-child { flex: 1; }
.shore-spread { background: var(--stone); padding: 83px 60px 91px; }
.spread-inside { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 72px; align-items: start; }
.spread-heading { position: sticky; top: 32px; min-width: 0; margin-top: -10px; }
.journey-mark { display: flex; align-items: baseline; gap: 14px; width: fit-content; max-width: calc(100% + 34px); font-size: 18px; line-height: 1.35; background: var(--white); padding: 17px 23px 14px; margin: -92px 0 36px -23px; border-top: 3px solid var(--ink); }
.journey-mark i { flex: 0 0 19px; text-align: center; font-size: 18px; }
.journey-mark span { min-width: 0; }
.spread-heading h2 { font-size: 46px; margin-bottom: 0; }
.spread-reading { max-width: 740px; grid-column: 2; }
.spread-reading p { max-width: 66ch; }
.spread-reading p:first-child { font-size: 22px; line-height: 1.48; }
.has-photo { padding-top: 93px; }
.has-photo .spread-heading { grid-row: 1 / span 2; }
.spread-photo { grid-column: 2; grid-row: 1; margin: -48px -36px 42px -28px; border-bottom: 8px solid var(--white); }
.spread-photo img { width: 100%; height: 285px; object-fit: cover; object-position: center; }
.has-photo .spread-reading { grid-row: 2; }
.spread-reading ul { padding-left: 22px; margin: 24px 0; }
.spread-reading li { margin-bottom: 12px; padding-left: 5px; }
.medical-reason { background: var(--white); padding: 65px 60px 76px; }
.reason-inside { position: relative; max-width: 720px; margin: 0 auto; padding-left: 20px; }
.medical-reason .joined-route { width: calc(100% + 120px); margin: 0 0 27px -120px; gap: 28px; }
.medical-reason .joined-route span:first-child { width: 94px; }
.medical-reason .joined-route span:last-child { flex: 1; }
.reason-symbol { position: absolute; left: -100px; top: 42px; width: 52px; text-align: center; font-size: 32px; }
.medical-reason h2 { font-size: 30px; margin-bottom: 17px; letter-spacing: -.02em; }
.medical-reason p { font-size: 21px; }
.reference-reading .spread-heading h2 { font-size: 38px; }
.reference-reading .spread-reading p { padding-bottom: 27px; border-bottom: 1px solid rgba(46,52,59,.24); margin-bottom: 28px; }
.reference-reading .spread-reading p:last-child { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.closing-mast { background: var(--ice); padding: 58px 60px 35px; }
.closing-inside { max-width: 1220px; margin: 0 auto; }
.closing-inside > .joined-route { width: 100%; margin-bottom: 42px; }
.closing-inside > .joined-route span:first-child { width: 30%; }
.closing-inside > .joined-route span:last-child { flex: 1; }
.guide-boundary { font-family: var(--display); font-size: 36px; line-height: 1.23; letter-spacing: -.02em; max-width: 910px; margin-bottom: 38px; }
.closing-navigation { display: flex; gap: 18px 42px; flex-wrap: wrap; margin: 0 0 54px; }
.closing-base { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 18px; border-top: 1px solid rgba(46,52,59,.25); padding-top: 22px; }
.closing-base p { margin: 0; }
.lost-reading { background: var(--ice); min-height: 78vh; padding: 70px max(24px, calc((100vw - 960px)/2)); }
.lost-reading .publication-name { margin-bottom: 64px; }
.lost-reading h1 { max-width: 850px; margin-bottom: 35px; }
.lost-reading p { max-width: 660px; }
@keyframes route-rejoin { from { transform: translateX(20px); } to { transform: translateX(0); } }
.cover-spread:not(.inner-opening) .cover-words > .joined-route span:last-child { animation: route-rejoin .85s ease-out 1; }
@media (min-width: 1500px) {
  .cover-spread { grid-template-columns: minmax(300px, calc((100vw - 1440px)/2 + 300px)) minmax(0, 1fr); }
  .cover-mast { padding-left: max(38px, calc((100vw - 1440px)/2 + 38px)); }
}
@media (max-width: 1239px) and (min-width: 761px) {
  .cover-words { padding: 36px 38px 32px; }
  h1 { font-size: 66px; }
  .inner-opening h1 { font-size: 60px; }
  .cover-introduction { padding: 48px 40px 68px; grid-template-columns: 220px minmax(0, 1fr); }
  .shore-spread { padding-inline: 40px; }
  .spread-inside { grid-template-columns: 250px minmax(0, 1fr); column-gap: 40px; }
  .spread-heading h2 { font-size: 39px; }
  .spread-photo { margin-inline: -12px; }
  .spread-photo img { height: 250px; }
  .medical-reason { padding-inline: 90px 40px; }
  .medical-reason .joined-route { width: calc(100% + 60px); margin-left: -60px; }
  .medical-reason .joined-route span:first-child { width: 34px; }
  .reason-symbol { left: -65px; width: 42px; font-size: 28px; }
}
@media (max-width: 760px) {
  body { font-size: 19px; line-height: 1.52; }
  .cover-spread { display: block; }
  .cover-mast { padding: 25px 20px 23px; gap: 22px; border-right: 0; }
  .publication-name { font-size: 32px; }
  .publication-description { margin: 9px 0 0; font-size: 18px; max-width: 350px; }
  .mast-readings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 20px; margin-top: 0; }
  .mast-readings a { font-size: 18px; line-height: 1.25; gap: 6px; padding: 7px 0; min-height: 40px; }
  .mast-readings a span { text-underline-offset: 5px; }
  .mast-readings i { width: 17px; font-size: 17px; }
  .cover-words { padding: 12px 20px 26px; }
  .cover-words > .joined-route { margin-bottom: 23px; height: 6px; }
  .cover-spread:not(.inner-opening) .cover-words { text-align: left; }
  h1 { font-size: clamp(40px, 11.8vw, 64px); line-height: 1.065; letter-spacing: -.032em; }
  .reader-place { font-size: 19px; line-height: 1.42; margin-top: 22px; }
  .opening-photo { margin: 0 20px; width: calc(100% - 40px); padding-bottom: 24px; }
  .opening-photo img { width: 100%; height: 240px; aspect-ratio: auto; clip-path: none; object-fit: cover; }
  .inner-opening .cover-copy { min-height: 0; display: block; }
  .inner-opening h1 { font-size: clamp(40px, 11.4vw, 60px); }
  .inner-opening .cover-words { padding: 12px 20px 37px; }
  .cover-introduction { padding: 33px 20px 62px; display: block; }
  .cover-introduction .joined-route { margin: 0 0 23px; width: 160px; }
  .cover-introduction p { font-size: 22px; line-height: 1.44; }
  .shore-spread { padding: 59px 20px 45px; }
  .spread-inside { display: block; }
  .spread-heading { position: static; margin: 0; padding: 0; }
  .journey-mark { max-width: 100%; margin: -77px 0 27px; padding: 12px 14px 10px; font-size: 17px; gap: 10px; }
  .journey-mark i { font-size: 17px; }
  .spread-heading h2, .reference-reading .spread-heading h2 { font-size: 37px; margin-bottom: 27px; }
  .spread-reading p:first-child { font-size: 20px; line-height: 1.5; }
  .spread-photo { margin: 0 -8px 29px; border-bottom-width: 6px; }
  .spread-photo img { height: 210px; aspect-ratio: auto; }
  .medical-reason { padding: 37px 20px 62px; }
  .reason-inside { padding: 0; }
  .medical-reason .joined-route { width: 100%; margin: 0 0 24px; gap: 19px; }
  .medical-reason .joined-route span:first-child { width: 41px; }
  .reason-symbol { position: static; display: inline-block; width: auto; font-size: 24px; margin-bottom: 13px; }
  .medical-reason h2 { font-size: 28px; }
  .medical-reason p { font-size: 19px; }
  .closing-mast { padding: 35px 20px 28px; }
  .closing-inside > .joined-route { margin-bottom: 30px; }
  .guide-boundary { font-size: 28px; }
  .closing-navigation { display: grid; gap: 19px; margin-bottom: 36px; }
  .closing-base { display: block; font-size: 17px; }
  .closing-base p { margin-bottom: 15px; }
  .lost-reading { padding-top: 35px; }
  .lost-reading .publication-name { margin-bottom: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .cover-spread, .spread-inside, .cover-introduction { display: block; }
  .cover-mast, .reading-skip, .closing-navigation, .closing-base a, .reason-symbol { display: none; }
  body { font-size: 12pt; }
  h1, .inner-opening h1 { font-size: 32pt; }
  .cover-words, .shore-spread, .medical-reason, .cover-introduction, .closing-mast { padding: 20px 0; background: white; }
  .spread-heading { position: static; }
  .spread-photo { margin: 20px 0; }
  .journey-mark { margin: 0 0 16px; }
  .reason-inside { padding: 0; }
  .medical-reason .joined-route { width: 100%; margin-left: 0; }
}