/* IMATX shared design refinements, 2026-10-09. Sage & stone palette and display face, 2026-10-19 (B1). */
:root{--bg:#f6f0e5;--ink:#211d17;--muted:#5d554a;--rule:#e1d7c7;--card:#fdfaf4;--teal:#3f4b30;--teal-text:#3f4b30;--teal-mid:#3f4b30;--link:#3f4b30;--soft:#ecebdf;--teal-light:#ecebdf;--gold:#785019;--gold-light:#f3ead9;--gold-decoration:#b18959;--paper:#f4ecdf;--sage:#8a8b6c;--font-display:"Source Serif Display","Source Serif 4",Georgia,serif;--r-card:12px;--r-box:12px;--r-sm:8px;--focus:#785019;--read-leading:1.75}
html{scroll-padding-top:20px}body{accent-color:var(--teal)}a{text-underline-offset:.2em}button,input,select,textarea{font:inherit}button,a,summary,input,select{touch-action:manipulation}button,select{min-height:44px}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button:disabled{cursor:wait;opacity:.65}button:not(:disabled):hover{border-color:var(--teal-text)}a:hover{text-decoration-thickness:2px}img{max-width:100%}audio{max-width:100%;min-height:44px}h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
.breadcrumb{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:8px 0;color:var(--muted);font-size:.8rem}.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}.breadcrumb span[aria-current]{font-weight:600;color:var(--ink)}.session-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}.resource-links{align-items:center}.resource-heading{flex-basis:100%;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:10px;font-weight:600}.session-sequence{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;border-top:1px solid var(--rule);padding:16px 0;margin-top:24px}.session-sequence a{display:inline-flex;align-items:center;min-height:44px;max-width:46%;font-size:.9rem}.review-status{border-left:2px solid var(--gold-decoration);padding:8px 12px;line-height:1.7}.print-page{min-height:44px;border:1px solid var(--rule);border-radius:8px;padding:8px 14px;background:var(--card);color:var(--ink);margin:8px 0}
@media screen{.reading main>p,.reading main .unit>p,.reading main .hadith>p,.reading-section>p{max-width:68ch}.reading main p:not(.ar):not(.tr):not(.meta):not(.eyebrow):not(.tag){line-height:1.75}.reading main .unit>p{margin:.85em 0}.ayah .ar,.hadith .ar{overflow-wrap:normal;word-break:normal;padding-block:8px}.ayah .en{border-top:1px solid var(--rule);padding-top:14px}.ayah .tr{font-size:.95rem;line-height:1.7}.hadith .cite,.unit .cite{font-family:var(--font-ui,"DM Sans",sans-serif);font-size:.875rem;line-height:1.6}.prep-choice{border-top:3px solid var(--gold-decoration)}.prep-choice:hover,.prep-choice:focus-visible{background:var(--teal-light)}}
@media(max-width:640px){.breadcrumb{font-size:.75rem;gap:2px 8px}.session-sequence{gap:6px}.session-sequence a{max-width:100%;flex-basis:100%}.resource-links a{max-width:100%;white-space:normal}.audio-controls{flex-wrap:wrap}.headmeta>span{white-space:normal}}
@media(prefers-color-scheme:dark){:root{--bg:#16140f;--card:#201d17;--ink:#efe9de;--muted:#b8ad9b;--rule:#3b352b;--teal:#4b5835;--teal-text:#c3cca4;--teal-mid:#c3cca4;--link:#c3cca4;--teal-light:#2a2a1f;--soft:#2a2a1f;--gold:#e0b675;--gold-light:#2b2418;--gold-decoration:#a88452;--paper:#1f1c16;--focus:#e0b675}.home-page{--teal:#bac49b}.home-page .button:not(.secondary){color:#16140f}.home-page .hero{color:#211d17}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{@page{size:letter;margin:12mm}body{background:white!important;color:#000!important}.breadcrumb,.session-sequence,.print-page,.hero-picture,.study-map,.tools,#show-schedule,.latest-audio,.home-page .actions{display:none!important}h1,h2,h3{break-after:avoid}p,li{orphans:3;widows:3}.ayah,.hadith,.question,.print-meta{break-inside:avoid}.review-status{display:block!important;border:0;padding:0;font-size:9pt;color:#333}.home-page .hero{min-height:0}.home-page .hero-copy{max-width:none}.home-page .feature{margin:0;border:1px solid #aaa}.session[hidden]{display:grid!important}}

@media(min-width:641px){.latest-audio .audio-body{grid-column:2}}

.chips .soon small{opacity:1}
.podcast-page .episode-list .episode-card::before{display:none}
.podcast-page .episode-list .episode-card:first-child{border-top-color:var(--gold-decoration)}

/* Sage & stone, 2026-10-19 (B1; claude/design-system.md Part 7). This sheet loads last on every page,
   so the palette and the display face live here once. --teal keeps its name and holds deep olive (R13).
   Olive is for what you can press, headings are ink, bronze is for labels and rules. */
@font-face{font-family:"Source Serif Display";src:url("fonts/source-serif-display-500.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
h1,h2,h3,h4,.overview-hero h1,.chapter-visual h2,.spine-bar a,.roman,#invite{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em}
h1{line-height:1.08}
main h2,.reading h2,main h3{color:var(--ink)}
.reading .chapter-visual h2{color:inherit} /* the gouache cards keep their own ink until B4 */
.overview-hero h1{color:#211d17}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:600;color:var(--gold)}
.prep-choice .eyebrow{letter-spacing:.1em}
.join-button:hover,.start-button:hover,.spine-bar a:hover,.readaloud [data-readaloud-toggle][aria-pressed=true]:hover,.invite-actions .primary:hover{background:#333d27}
.home-page .feature{border-top-color:var(--gold-decoration)}
.home-page .hero h1{color:#211d17}.home-page .hero .eyebrow{color:#5e3e10}.home-page .hero .intro{color:#3f382e}
.home-page .hero .button{background:#3f4b30;color:#fdfaf4;border:1px solid #3f4b30}.home-page .hero .button.secondary{background:#fdfaf4;color:#3f4b30;border-color:#3f4b30}
@media(max-width:640px){.home-page .hero .eyebrow{letter-spacing:.1em;font-size:.7rem}}
@media(prefers-color-scheme:dark){.join-button:hover,.start-button:hover,.spine-bar a:hover,.readaloud [data-readaloud-toggle][aria-pressed=true]:hover{background:#56643d}.invite-actions .primary:hover{background:#d3dab9}}

/* B2, 2026-10-19: the session's object, page and window (claude/design-system.md Part 9).
   assets/object.webp is pre-centred on its object by _build/make-cards.py, so no
   object-position is needed at any width. */
.object-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:12px;overflow:hidden;margin:16px 0 6px;min-height:272px;background:var(--paper)}
.object-page{padding:36px 32px;display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.object-page h1{font-size:clamp(1.9rem,3.6vw,2.55rem);margin:0;max-width:none;color:var(--ink);text-wrap:balance}
.object-rule{display:block;width:48px;height:2px;background:var(--gold-decoration);margin-top:22px}
.object-window{position:relative;min-height:200px;background:#2b2620}
.object-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.handout-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0}.handout-head h1{margin:0}
.handout-object{flex:none;width:120px;height:80px;object-fit:cover;border-radius:8px}
@media(max-width:560px){.object-hero{grid-template-columns:1fr;min-height:0}.object-window{order:-1;aspect-ratio:2.2;min-height:0}.object-page{padding:14px 18px 16px}.object-page h1{font-size:1.75rem}.object-rule{margin-top:10px;width:40px}.handout-object{width:72px;height:48px;border-radius:6px}}
@media print{.object-hero{display:block;min-height:0;background:none;margin:0}.object-window,.object-rule{display:none}.object-page{padding:0}.object-page h1{color:#000}.handout-object{width:24mm;height:16mm;border-radius:2mm}}