/* Reading pages inside the shared shell: a paper sheet within the night frame, phone layout at every width. */
html{background:var(--s-deep)}
body{background:radial-gradient(900px 600px at 50% -10%,#173538 0,transparent 70%),var(--s-deep)}
.frame.paper{background:var(--paper);color:var(--ink);padding-bottom:0;overflow-x:clip}
.frame.paper main{min-height:calc(100dvh - 56px)}
.bar{color:var(--s-cream)}.bar .bar-link{color:var(--s-soft)}.foot a{color:inherit}
.foot{margin-top:0;background:var(--s-night);color:var(--s-dim)}
.foot-links{color:var(--s-soft)}
@media print{.frame.paper main{min-height:0}#copy-status:empty{display:none}}
/* Intake: the entry stage already greeted the visitor, so the name field must sit within the first screen. */
.intake-shell{padding-top:16px}
.intake-shell .back-link{margin-bottom:12px}
.intake-heading{margin-bottom:12px}
.intake-shell .intake-heading h1{font-size:20px;line-height:1.5;margin-top:2px}
.comic-form .comic-scene{margin-bottom:18px}
.comic-form .comic-scene>img{aspect-ratio:5/2;object-position:50% 28%}
/* Legibility on the paper pages: nothing below 12px, body copy 15px, text colours at 4.5:1 or better on paper. */
@media screen{
.frame.paper{--muted:#56635b;--gold:#80632b;font-size:15px}
.frame.paper .field-hint,.frame.paper .under-cta,.frame.paper .back-link,.frame.paper .draft-notice{font-size:12.5px;line-height:1.7;color:#56635b}
.frame.paper .eyebrow{font-size:12px;color:#80632b}
.frame.paper ::placeholder{color:#6b766c;opacity:1}
.frame.paper .button{font-size:15.5px;min-height:56px}
.frame.paper .text-button,.frame.paper .text-link{font-size:13.5px}
.frame.paper .intake-progress span,.frame.paper .comic-speech span{font-size:12px}
.frame.paper .comic-speech p{font-size:16px}
.frame.paper label,.frame.paper legend{font-size:14px}
.frame.paper .check,.frame.paper .consent-block p{font-size:13px;color:#4f5d54}
.frame.paper .sample-banner,.frame.paper .sample-banner a,.frame.paper .sample-context span{font-size:12.5px;color:#3f5a4d}
.frame.paper .report-to{font-size:14px;color:#4a6370}
.frame.paper .cover-summary{font-size:15px;line-height:1.9;color:#4f5d54;text-align:left}
.frame.paper .cover-sign{font-size:12px;color:#56635b}.frame.paper .cover-sign span{color:#80632b}
.frame.paper .keywords span{font-size:12.5px;color:#4f5d54}
.frame.paper .report-toc p{font-size:12.5px;color:#80632b}.frame.paper .report-toc a{font-size:13.5px;color:#3d4c45}.frame.paper .report-toc small{font-size:12px;color:#6a756c}
.frame.paper .reading-chapter>p:not(.eyebrow){font-size:15.5px}
.frame.paper .little-action span{font-size:12px;color:#80632b}.frame.paper .little-action p{font-size:14.5px;color:#34433d}
.frame.paper .evidence summary,.frame.paper .evidence p,.frame.paper .evidence div p,.frame.paper .chart-notes summary,.frame.paper .chart-notes p{font-size:12.5px;color:#56635b}
.frame.paper .chart-heading span{font-size:13px}.frame.paper .chart-heading small{font-size:12px;color:#56635b}
.frame.paper .pillar span,.frame.paper .pillar small{font-size:12px;color:#56635b}
.frame.paper .closing-letter span{font-size:13px;color:#56635b}
.frame.paper .report-sharing p{font-size:14px;color:#4f5d54}
.frame.paper .preview-card p{font-size:15.5px;line-height:1.95}.frame.paper .preview-card small{font-size:12.5px;color:#56635b}
.frame.paper .day-symbol small,.frame.paper .order-receipt,.frame.paper .offer p,.frame.paper .letter-invitation li{font-size:13.5px}
.frame.paper .to-offer{margin:18px 0 28px}
.foot,.foot small{font-size:12px}
}
@media screen{.frame.paper .report-toc small{color:#5f6b62}.frame.paper strong small{font-size:12px}.frame.paper .page-lead{font-size:14.5px;color:#4f5d54}.frame.paper .post-kicker{font-size:12px}}
@media screen{
.frame.paper .report-cover{padding:30px 22px 26px}.frame.paper .cover-moon{font-size:34px;line-height:1;margin:8px 0}
.cover-jump{display:grid;gap:10px;margin-top:22px}
.cover-jump a{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:0 18px;border-radius:12px;background:#254c46;color:#fff;font-size:15px;font-weight:600;text-align:left}
.cover-jump a+a{background:none;border:1px solid #b9c4b6;color:#254c46}
}
@media print{.cover-jump{display:none}}
/* Order page: remaining small or pale informational text (review 4, item 4). Element labels carry meaning, so they get ink-dark variants. */
@media screen{
.frame.paper .order-notice,.frame.paper #order-notice-text,.frame.paper .order-notice a{font-size:13px;color:#3d4c45}
.frame.paper .offer-price span{font-size:12.5px;color:#4f5d54}
.frame.paper .offer>p,.frame.paper .offer p,.frame.paper .purchase-links,.frame.paper .purchase-links a,.frame.paper .offer summary{color:#44534b}
.frame.paper .status-card p{font-size:14px;color:#4f5d54}
.frame.paper .preview-card blockquote{font-size:14px;color:#3f5a4d}
.frame.paper .element-dot.element-목{color:#2f6b45}.frame.paper .element-dot.element-화{color:#a1402f}.frame.paper .element-dot.element-토{color:#7a5a1e}.frame.paper .element-dot.element-금{color:#5b6470}.frame.paper .element-dot.element-수{color:#2c5f86}
/* Letter first screen: reading shortcuts sit right under the title (item 5). */
.frame.paper .report-cover h1{margin:6px 0 12px}
.frame.paper .report-cover .keywords{margin-bottom:0}
.frame.paper .cover-jump{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 18px}
.frame.paper .cover-jump a{min-height:46px;padding:0 12px;font-size:13.5px;justify-content:center;gap:6px}
.frame.paper .sample-context{margin:0 0 12px;padding:0 0 0 14px}
.frame.paper .sample-context summary{font-size:12.5px;color:#3f5a4d;min-height:40px;display:flex;align-items:center;cursor:pointer}
.frame.paper .sample-banner{margin-bottom:10px;padding:10px 14px}
}
/* The status notice sticks below the shared header and keeps one height in every state, so polling never moves the reading position. */
@media screen{.frame.paper .order-notice{top:56px;min-height:78px}}