/* Quiet reading lessons framed by the site's own deck artwork. */
body[data-page="hub"],body[data-page="spread-guide"],body[data-page="spread-card"] { --color-text-muted:#bbc6be; --color-text-dim:#97a59d; }
.spread-hero { padding:132px 0 40px; }
.spread-hero h1 { font-size:clamp(2rem,4.6vw,3.5rem); text-transform:none; letter-spacing:.025em; line-height:1.2; }
.reading-lesson p,.reading-lesson li,.spread-worked p { font-weight:400; }
.reading-lesson { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.reading-lesson h2,.spread-worked h2 { text-transform:none; letter-spacing:0; font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.3; }
.reading-lesson p,.reading-lesson li,.spread-worked p { max-width:72ch; }
.reading-lesson ol { padding-left:1.3rem; list-style:decimal; }
.reading-lesson li { padding-left:.4rem; margin:.85rem 0; line-height:1.8; color:var(--color-text-muted); }
.reading-lesson a:not(.btn),.spread-worked a:not(.btn) { color:#a7d9b3; text-decoration:underline; text-underline-offset:.22em; }
.reading-example { padding:1.5rem 0 1.5rem 1.5rem; border-left:1px solid #415449; display:grid; grid-template-columns:100px 1fr; gap:1.3rem; }
.reading-example img { width:100%; height:auto; border-radius:.4rem; }
.reading-example h3,.spread-worked h3 { text-transform:none; letter-spacing:0; font-size:1.2rem; line-height:1.45; }
.reading-example p { font-size:.94rem; line-height:1.8; }
.spread-worked { max-width:1100px; }
.reading-question { font-size:1.15rem; margin:2rem 0; color:var(--color-text); }
.worked-card-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:none; padding:0; gap:2rem; margin:2.5rem 0; }
.worked-card-row li { display:grid; grid-template-columns:90px 1fr; gap:1.25rem; align-items:start; }
.worked-card-row img { width:100%; height:auto; border-radius:.5rem; }
.worked-card-row span { display:block; color:#a7d9b3; font-size:.8rem; margin-bottom:.5rem; }
.worked-card-row h3 { margin:.2rem 0 .7rem; }
.worked-card-row p { font-size:.92rem; line-height:1.8; }
.worked-card-row--three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem; }
.worked-card-row--three li { display:flex; flex-direction:column; gap:1.5rem; }
.worked-card-row--three li>a { display:block; width:65%; max-width:200px; }
.reading-synthesis { margin:2.5rem 0; padding:1.5rem 2rem; border-left:3px solid #a7d9b3; background:#161e19; }
.reading-synthesis p { margin-bottom:0; }
.reading-variations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; margin:1.5rem 0 2.5rem; }
.reading-variations dt { font-weight:600; margin-bottom:.6rem; }
.reading-variations dd { margin:0; color:var(--color-text-muted); line-height:1.8; font-size:.94rem; }
.reading-lesson a:focus-visible,.spread-worked a:focus-visible { outline:2px solid #a7d9b3; outline-offset:5px; }
@media(max-width:850px) { .reading-lesson { grid-template-columns:1fr; } .worked-card-row { grid-template-columns:1fr; } .worked-card-row--three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .worked-card-row--three li>a { width:90%; } .reading-variations { grid-template-columns:1fr; gap:1.25rem; } }
@media(max-width:520px) { .reading-example { grid-template-columns:75px 1fr; padding-left:1rem; gap:1rem; } .worked-card-row--three { grid-template-columns:1fr; } .worked-card-row--three li { display:grid; grid-template-columns:85px 1fr; gap:1rem; } .worked-card-row--three li>a { width:100%; } .reading-synthesis { padding:1.2rem; } }