@charset "UTF-8";

:root {
    --paper: #f5f7fc;
    --ink: #4b5279;
    --violet: #715a9b;
    --line: #c8cbe0;
    --mint: #d6eee5;
    --lilac: #e8e1f5;
    --blue: #d9e6f6;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { background: var(--mint); }
a:focus-visible { outline: 2px solid var(--violet); outline-offset: 5px; }
p { font-size: 16px; line-height: 1.85; margin: 0; }
h1 { font: 400 40px/1.14 Georgia, "Times New Roman", serif; letter-spacing: -1.1px; margin: 0 0 23px; }
h2 { font: 400 28px/1.22 Georgia, "Times New Roman", serif; letter-spacing: -.5px; margin: 0; }
.masthead, main, footer { width: min(1080px, calc(100% - 72px)); margin-inline: auto; }
.masthead { display: flex; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.seal { display: flex; align-items: center; width: 74px; height: 35px; flex-shrink: 0; }
.seal span { width: 28px; height: 28px; border: 1px solid var(--violet); border-radius: 50%; display: block; margin-right: -8px; }
.seal span:nth-child(2) { border-radius: 0; transform: rotate(45deg); background: #d6eee588; }
.seal span:nth-child(3) { background: #e8e1f599; }
.folio-label, .attribution { font: 10px "Courier New", monospace; letter-spacing: 1.5px; flex: 1; }
.attribution { color: var(--violet); }
.folio { font: italic 25px Georgia, serif; }
.opening { padding: 38px 0 26px; }
.opening p, .second-voice { max-width: 880px; }
.second-voice { padding-bottom: 28px; }
.page-index .opening { padding-bottom: 17px; }
.composition { position: relative; height: 190px; margin: 5px 0 34px; overflow: hidden; isolation: isolate; border-block: 1px solid var(--line); background: linear-gradient(115deg, #eef2fb, #e8e1f580 53%, #d6eee580); }
.composition::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 23px, #abb5cf26 23px, #abb5cf26 24px); }
.composition::after { content: ""; position: absolute; left: 3%; right: 3%; top: 50%; height: 1px; background: #8996b34d; }
.composition span { display: block; position: absolute; }
.orbit { width: 260px; height: 260px; border: 1px solid #7d76ad; border-radius: 50%; top: -36px; }
.orbit-one { left: 17%; background: repeating-radial-gradient(ellipse at center, transparent 0, transparent 9px, #9586b84d 9px, #9586b84d 10px); transform: scaleX(1.4); }
.orbit-two { left: 40%; width: 210px; height: 210px; top: -9px; background: linear-gradient(130deg, #d4e9dfdd, #d4e9df11); }
.orbit-three { right: 12%; transform: scaleX(.65); border-style: dashed; opacity: .8; }
.plane { width: 130px; height: 130px; background: #b7c8e58c; top: 28px; left: 50%; transform: rotate(25deg); mix-blend-mode: multiply; }
.axis { height: 1px; width: 74%; left: 13%; top: 48%; background: #7c81ab; transform: rotate(-10deg); }
.grain { width: 9px; height: 9px; border-radius: 50%; background: #715a9b; }
.grain-one { left: 17%; top: 54%; }
.grain-two { right: 25%; top: 32%; width: 5px; height: 5px; }
.grain-three { right: 12%; top: 70%; background: #678e87; }
.composition-hero { height: 280px; margin-top: 0; }
.composition-hero .orbit { width: 330px; height: 330px; top: -26px; }
.composition-hero .orbit-one { left: 20%; }
.composition-hero .orbit-two { left: 41%; width: 275px; height: 275px; top: 3px; }
.composition-hero .plane { width: 175px; height: 175px; top: 52px; left: 52%; }
.composition-quiet .orbit-one { left: 8%; opacity: .45; transform: scaleX(1.8); }
.composition-quiet .orbit-two { left: 57%; border-radius: 45% 55% 60% 40%; }
.composition-quiet .orbit-three { right: 32%; width: 160px; height: 160px; top: 18px; }
.composition-quiet .plane { left: 27%; background: #d3dcef88; }
.composition-trace .orbit-one { left: 46%; transform: scaleX(1.7); }
.composition-trace .orbit-two { left: 15%; }
.composition-trace .orbit-three { right: 50%; }
.composition-trace .plane { left: 62%; height: 110px; width: 110px; }
.composition-trace .axis { transform: rotate(7deg); }
.composition-field .orbit-one { left: 30%; transform: scaleX(2.4); opacity: .7; }
.composition-field .orbit-two { left: 22%; width: 160px; height: 160px; top: 14px; }
.composition-field .orbit-three { right: 17%; border-radius: 40%; }
.composition-field .plane { left: 47%; width: 70px; height: 70px; top: 58px; }
.passage { padding: 0 0 29px; margin: 0 0 26px; border-bottom: 1px solid var(--line); }
.passage-heading { display: flex; align-items: baseline; gap: 24px; margin-bottom: 14px; }
.passage-heading > span { font: italic 17px Georgia, serif; color: var(--violet); width: 30px; flex-shrink: 0; }
.passage p { max-width: 930px; margin-left: 54px; }
.aftertone { border-left: 2px solid var(--violet); padding: 4px 0 4px 25px; margin: 4px 0 30px 54px; max-width: 900px; }
.closing-tone { background: var(--mint); padding: 28px 32px; margin-bottom: 28px; border-radius: 0 65px 0 0; }
.closing-tone h2 { margin-bottom: 14px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 28px; border-top: 1px solid var(--line); font: 10px "Courier New", monospace; letter-spacing: 2px; }

@media (max-width: 700px) {
    .masthead, main, footer { width: calc(100% - 36px); }
    .masthead { gap: 16px; padding: 19px 0; }
    .folio-label, .attribution { font-size: 9px; letter-spacing: .5px; line-height: 1.6; }
    .seal { width: 58px; }
    .seal span { width: 23px; height: 23px; }
    .opening { padding-top: 29px; }
    h1 { font-size: 40px; overflow-wrap: break-word; }
    h2 { font-size: 28px; }
    .composition { height: 145px; margin-bottom: 27px; }
    .composition-hero { height: 210px; }
    .orbit { width: 170px; height: 170px; top: -13px; }
    .orbit-one { left: 6%; }
    .orbit-two { width: 130px; height: 130px; top: 7px; }
    .orbit-three { right: 2%; }
    .plane { width: 85px; height: 85px; top: 30px; }
    .composition-hero .orbit { width: 220px; height: 220px; top: -5px; }
    .composition-hero .orbit-one { left: -1%; }
    .composition-hero .orbit-two { width: 160px; height: 160px; top: 24px; left: 40%; }
    .composition-hero .plane { width: 115px; height: 115px; top: 45px; }
    .composition-quiet .orbit-three { width: 110px; height: 110px; top: 18px; }
    .composition-field .orbit-two { width: 115px; height: 115px; top: 15px; }
    .composition-field .plane { top: 39px; }
    .composition-trace .plane { height: 80px; width: 80px; top: 33px; }
    .passage-heading { gap: 13px; }
    .passage-heading > span { width: 23px; }
    .passage p { margin-left: 0; }
    .aftertone { margin-left: 0; padding-left: 19px; }
    .closing-tone { padding: 25px 22px; border-radius: 0 42px 0 0; }
    footer { font-size: 9px; letter-spacing: 1px; }
}

@media print {
    .masthead, main, footer { width: 100%; }
    .composition { height: 90px; }
    .passage { break-inside: avoid; }
}

/* Original full-length copy */
.original-signature { display: block; margin-bottom: 13px; color: var(--violet); font: 11px "Courier New", monospace; letter-spacing: 1px; }
.original-prose { max-width: 930px; margin-inline: auto; }
.original-prose > p { margin: 0 0 25px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.original-prose > p:last-child { padding-bottom: 0; border-bottom: 0; }
.interpretation-links { max-width: 930px; margin: 28px auto; padding: 23px 26px; border-left: 2px solid var(--violet); background: var(--mint); }
.original-ending { max-width: 930px; margin: 24px auto; font: 12px "Courier New", monospace; }