/* Reading and project surfaces extend the selected Assembly typography and palette. */
.page-resources { --oxide: #7e3e38; }
.page-resources main [id], .resource-feature[id] { scroll-margin-top: 120px; }
.page-resources main a { text-underline-offset: .22em; }
.page-resources h1, .page-resources h2, .page-resources h3 { text-wrap: balance; letter-spacing: -.025em; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 30px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.breadcrumbs span { align-self: center; }
.reading-header { max-width: 940px; padding-block: 32px 42px; }
.reading-header h1 { font-size: clamp(36px, 4.5vw, 66px); line-height: 1.12; }
.reading-header .serif { color: var(--oxide); }
.reading-deck { max-width: 61ch; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.75; margin-top: 25px; }
.reading-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.resource-jump { display: flex; flex-wrap: wrap; gap: 10px 32px; padding-block: 14px; border-block: 1px solid var(--line); }
.resource-jump a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; font-size: 14px; font-weight: 650; }
.resource-section { padding-block: 72px; border-bottom: 1px solid var(--line); }
.resource-section h2, .resource-feature h2 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.2; }
.resource-section > p { max-width: 68ch; font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 18px; }
.guide-list { margin-top: 30px; }
.guide-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 55px; padding-block: 29px; border-top: 1px solid var(--line); }
.guide-row h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.3; }
.guide-row h3 a:hover { color: var(--oxide); text-decoration: underline; }
.guide-row p { font-size: 15px; line-height: 1.85; }
.guide-row .epc-text-link { margin-top: 10px; }
.case-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 35px; }
.case-feature img { width: 100%; height: auto; display: block; }
.case-feature h3 { font-size: clamp(27px, 2.7vw, 38px); line-height: 1.23; }
.case-feature p { font-size: 15px; line-height: 1.85; margin-top: 18px; }
.case-feature .epc-text-link { margin-top: 16px; }
.case-facts { padding-block: 22px; margin-block: 0 42px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; border-block: 1px solid var(--line); }
.case-facts dt { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.case-facts dd { font-size: 14px; font-weight: 600; line-height: 1.75; margin: 0; }
.project-photo { margin: 0 0 40px; }
.project-photo img { width: 100%; height: auto; display: block; }
.project-photo figcaption, .case-feature figcaption { font-size: 12px; line-height: 1.75; color: var(--muted); margin-top: 12px; max-width: 90ch; }
.reading-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(35px, 5vw, 80px); align-items: start; padding-bottom: 80px; }
.reading-toc { position: sticky; top: 120px; padding-top: 5px; }
.reading-toc h2 { font-size: 15px; margin-bottom: 14px; }
.reading-toc a { display: block; padding-block: 12px; font-size: 13px; line-height: 1.6; border-top: 1px solid var(--line); }
.reading-toc a:hover { text-decoration: underline; color: var(--oxide); }
.reading-body { min-width: 0; max-width: 72ch; font-size: 17px; line-height: 1.85; }
.reading-body section + section { margin-top: 44px; }
.reading-body h2 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.3; margin-bottom: 20px; }
.reading-body h3 { font-size: 21px; line-height: 1.4; margin-block: 28px 12px; }
.reading-body p + p { margin-top: 18px; }
.reading-body ul, .reading-body ol { padding-left: 23px; margin-block: 18px; }
.reading-body li { padding-left: 5px; margin-block: 10px; }
.reading-body a { text-decoration: underline; text-decoration-color: #8b9883; }
.reading-body .project-photo { margin-block: 30px; }
.reading-body .scope-note { background: var(--pale); padding: 22px 25px; margin-block: 26px; font-size: 15px; }
.reading-body details { border-top: 1px solid var(--line); padding-block: 16px; }
.reading-body summary { cursor: pointer; font-weight: 650; font-size: 16px; min-height: 44px; padding-block: 8px; }
.reading-body details p { font-size: 16px; padding-block: 8px; }
.reading-body .source-note { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 22px; }
.matrix-wrap { max-width: 100%; overflow-x: auto; margin-block: 22px; scrollbar-color: var(--muted) var(--pale); }
.scope-matrix { border-collapse: collapse; width: 100%; min-width: 550px; font-size: 14px; line-height: 1.7; }
.scope-matrix caption { text-align: left; font-weight: 650; font-size: 16px; margin-bottom: 15px; }
.scope-matrix th, .scope-matrix td { padding: 14px 15px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.scope-matrix th { font-weight: 650; background: var(--pale); }
.matrix-hint { color: var(--muted); font-size: 12px; }
.reading-next { border-top: 1px solid var(--line); padding-block: 45px 65px; }
.reading-next h2 { font-size: 28px; }
.reading-next-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 18px; }
.reading-next-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; text-decoration: underline; }
.reading-cta { padding: 28px; margin-top: 40px; background: var(--pale); }
.reading-cta p { margin-top: 12px; font-size: 16px; }
.reading-cta .epc-button { text-decoration: none; margin-top: 22px; }
.resource-feature { padding-block: 70px; border-bottom: 1px solid var(--line); }
.resource-feature > p { margin-block: 20px; max-width: 65ch; color: var(--muted); font-size: 16px; line-height: 1.8; }
.resource-footer { display: flex; flex-wrap: wrap; gap: 8px 28px; border-bottom: 1px solid var(--line); padding-block: 20px; margin-bottom: 28px; }
.resource-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; font-size: 13px; }
@media (max-width: 1000px) { .reading-grid { grid-template-columns: 175px minmax(0, 1fr); gap: 30px; } .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .reading-grid { display: block; } .reading-toc { position: static; margin-bottom: 35px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .reading-toc a { display: inline-flex; align-items: center; margin-right: 20px; border: 0; min-height: 44px; text-decoration: underline; padding-block: 7px; } .reading-body { max-width: none; } .case-feature { grid-template-columns: 1fr; gap: 25px; } .guide-row { gap: 18px 28px; } }
@media (max-width: 600px) { .breadcrumbs { padding-top: 16px; } .reading-header { padding-block: 20px 32px; } .reading-deck { margin-top: 22px; } .reading-meta { margin-top: 20px; } .resource-section, .resource-feature { padding-block: 48px; } .guide-row { display: block; padding-block: 25px; } .guide-row p { margin-top: 14px; } .reading-body { font-size: 16px; line-height: 1.85; } .reading-body section + section { margin-top: 38px; } .reading-body .scope-note, .reading-cta { padding: 20px; } .case-facts { gap: 22px 16px; } .case-facts dd { font-size: 13px; } .reading-next-links { display: block; } .reading-next-links a { display: flex; padding-block: 10px; } .project-photo { margin-bottom: 30px; } }
@media print { .review-strip, .menu-toggle, .site-nav, .reading-toc, .reading-next, .resource-footer, .reading-cta, .js-only { display: none !important; } .site-header { position: static; } .reading-grid { display: block; padding-bottom: 0; } .reading-body { max-width: none; font-size: 11pt; } .reading-header h1 { font-size: 30pt; } .reading-body details > * { display: block !important; } .project-photo img { max-height: 16cm; object-fit: contain; } .scope-matrix { min-width: 0; } .matrix-wrap { overflow: visible; } }