:root {
    --ground: #eef4fc;
    --paper: #fbfdff;
    --ink: #365773;
    --heading: #36539d;
    --coral: #d15d7d;
    --blue: #6b98ca;
    --mist: #dbe8f6;
    --line: #bdcfe5;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.76;
    text-rendering: optimizeLegibility;
}
body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--blue) 0 64px, var(--paper) 64px 91px, var(--coral) 91px 102px);
}
.folio {
    width: min(100% - 68px, 1110px);
    margin: 0 auto;
    background: var(--paper);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    box-shadow: 0 14px 44px rgb(83 118 164 / 9%);
}
.textual-map { padding: 48px clamp(26px, 6.5vw, 92px) 90px; }
.opening { position: relative; border-bottom: 2px solid var(--blue); margin: 0 0 34px; padding: 0 0 33px; }
.issue { display: flex; align-items: center; gap: 12px; letter-spacing: .22em; font-size: 11px; color: var(--blue); font-weight: 700; }
.issue-mark { width: 29px; height: 2px; background: var(--coral); display: inline-block; }
h1 { font-size: 40px; font-weight: 650; letter-spacing: -.035em; color: var(--heading); line-height: 1.19; margin: 23px 0 16px; max-width: 800px; }
h2 { font-size: 28px; font-weight: 600; line-height: 1.28; letter-spacing: -.022em; color: var(--heading); margin: 0 0 22px; }
p { font-size: 16px; line-height: 1.78; margin: 0 0 19px; }
p:last-child { margin-bottom: 0; }
.argument { position: relative; padding: 26px 0 34px; }
.argument + .argument { border-top: 1px solid var(--mist); margin-top: 4px; }
.argument::before { content: ""; position: absolute; left: -29px; top: 40px; height: 12px; width: 12px; border: 2px solid var(--coral); border-radius: 50%; background: var(--paper); }
a { color: inherit; text-decoration: none; border-radius: 1px; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; text-decoration: underline; }
.glyph { float: right; width: 178px; height: 164px; position: relative; margin: -74px 0 8px 30px; pointer-events: none; }
.glyph-ring { position: absolute; border: 1.5px solid var(--line); border-radius: 50%; }
.glyph-ring-one { width: 146px; height: 146px; right: 0; top: 7px; }
.glyph-ring-two { width: 107px; height: 107px; right: 31px; top: 15px; border-color: var(--blue); transform: rotate(-13deg); }
.glyph-axis { position: absolute; width: 158px; height: 2px; right: -10px; top: 88px; background: var(--coral); transform: rotate(-31deg); }
.glyph-node { position: absolute; height: 10px; width: 10px; background: var(--coral); border-radius: 50%; }
.glyph-node-one { top: 17px; right: 36px; }
.glyph-node-two { bottom: 23px; left: 35px; background: var(--heading); }
.glyph-node-three { top: 74px; right: 13px; background: var(--paper); border: 2px solid var(--coral); width: 14px; height: 14px; }
.opening::after { content: ""; display: table; clear: both; }
@media (max-width: 900px) {
    .folio { width: min(100% - 32px, 1110px); }
    .textual-map { padding: 32px 38px 56px; }
    .glyph { margin-top: -10px; }
}
@media (max-width: 600px) {
    .folio { width: 100%; border-left: 0; border-right: 0; }
    .textual-map { padding: 32px 22px 54px; }
    h1 { font-size: 40px; overflow-wrap: anywhere; }
    h2 { font-size: 28px; overflow-wrap: anywhere; }
    p { font-size: 16px; line-height: 1.72; }
    .glyph { width: 116px; height: 116px; margin: 0 0 8px 11px; }
    .glyph-ring-one { width: 104px; height: 104px; top: 0; }
    .glyph-ring-two { width: 73px; height: 73px; top: 8px; right: 20px; }
    .glyph-axis { width: 112px; right: -6px; top: 61px; }
    .glyph-node-one { top: 7px; right: 24px; }
    .glyph-node-two { bottom: 16px; left: 26px; }
    .glyph-node-three { top: 45px; right: 12px; }
    .argument::before { left: -15px; width: 7px; height: 7px; top: 40px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; } }

.argument ul { margin: 0 0 22px; padding-left: 23px; }
.argument li { margin-bottom: 12px; line-height: 1.72; }
.argument li:last-child { margin-bottom: 0; }