/* Illustrated-v3 continuity. Task controls stay familiar; artwork marks arrival. */
.masthead {max-width:none; padding:12px max(4vw,calc((100vw - 1330px)/2)); gap:32px;}
.masthead .illustrated-nav {display:flex; align-items:stretch; gap:14px; margin-left:auto; padding:0; border:0;}
.illustrated-nav a {position:relative; min-height:76px; padding:4px 12px; gap:8px; border-radius:12px;}
.illustrated-nav img {width:56px; height:56px; object-fit:contain; mix-blend-mode:multiply;}
.masthead .illustrated-nav a[aria-current] {text-decoration:none; font-weight:700;}
.illustrated-nav a[aria-current]::after {content:""; position:absolute; bottom:1px; left:12px; right:12px; height:3px; background:var(--cobalt);}
.masthead .illustrated-nav a:hover {background:var(--blue-paper); text-decoration:none;}
.menu-button {display:none;}
.learning-intro {display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:32px; margin-bottom:36px;}
.learning-intro .page-head {margin:0;}
.learning-intro h1 {font-size:52px; line-height:1.08; max-width:720px; margin:0 0 20px; text-wrap:balance;}
.learning-intro .page-head>p {font-size:20px; max-width:50ch;}
.intro-illustration {display:block; width:100%; height:270px; object-fit:contain; mix-blend-mode:multiply;}
.learning-intro .actions {margin-bottom:0;}
main[data-route='/projects']>.section,main[data-route='/read']>.section,main[data-route='/work']>.section,main[data-route^='/studio/']>.section {padding-top:32px; max-width:1330px;}
.desk-identity {display:flex; align-items:center; gap:20px; margin-top:24px;}
.desk-identity .brand-logo {width:152px; height:50px;}
.desk-identity span {font-size:13px; line-height:1.5; color:var(--muted-ink);}
.studio-tabs {display:flex; gap:32px; border-bottom:1px solid var(--line); margin-bottom:36px;}
.studio-tabs a {display:flex; align-items:center; min-height:52px; padding:10px 2px; text-decoration:none; border-bottom:3px solid transparent; font-size:17px;}
.studio-tabs a[aria-current] {border-color:var(--cobalt); font-weight:700;}
.studio-tabs a:hover {text-decoration:underline;}
.activity {max-width:1330px; padding-top:28px;}
.activity .page-head {margin-bottom:20px;}
.activity .page-head h1 {font-size:44px; max-width:860px; line-height:1.12; margin:10px 0 20px; text-wrap:balance;}
.activity .steps {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0; border:0; margin:24px 0 36px;}
.steps li {padding:14px 12px; gap:12px; border-bottom:2px solid var(--line); font-size:16px;}
.steps li[aria-current] {border-color:var(--cobalt); color:var(--navy);}
.steps li span {border-radius:50%; border:1px solid var(--line); width:32px; height:32px; display:grid; place-items:center; flex:none; font-variant-numeric:tabular-nums;}
.steps li[aria-current] span {background:var(--cobalt); border-color:var(--cobalt); color:var(--surface);}
.activity-grid {grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:64px;}
.activity-grid>form {background:var(--surface); padding:30px; border:1px solid var(--line); border-radius:12px;}
.activity-grid h2 {font-size:28px;}
.activity-aside>img {height:245px; max-width:340px; display:block; margin:0 auto 20px;}
.activity-aside h2 {margin-top:0;}
.activity-aside p {font-size:18px;}
.activity-aside .brief-method {margin-top:26px;}
.activity-grid textarea,.studio-layout textarea {min-height:120px;}
input:not([type=range]):not([type=radio]):not([type=checkbox]),textarea,select {border-radius:6px;}
.project-list {border-top:0;}
.project-row {padding:24px 8px; grid-template-columns:140px minmax(0,1fr) 30px; gap:32px;}
.project-row img {width:140px; height:125px;}
.project-row:first-child {border-top:1px solid var(--line);}
.project-row h2 {font-size:28px; margin-bottom:8px;}
.project-row p {font-size:18px; max-width:56ch;}
.project-row:hover {background:var(--blue-paper);}
.filter-bar {padding:24px 0; border-block:1px solid var(--line); margin-bottom:0;}
#project-results .project-row:first-child {border-top:0;}
.reading-summary {max-width:none; padding:22px 0 26px; border-block:1px solid var(--line); margin-bottom:32px;}
.reading-summary progress {max-width:540px;}
.reading-summary a {width:fit-content; min-height:44px; display:flex; align-items:center; gap:16px; font-weight:600;}
.book-search {max-width:none;}
.book-search input {max-width:720px;}
.toc-part {margin:36px 0 50px;}
.toc-part>h2 {font-size:28px;}
.chapter-link {min-height:64px;}
.chapter-link:hover {background:var(--blue-paper);}
.reader-title {position:relative; padding-right:112px;}
.reader-title::after {content:""; position:absolute; right:0; top:0; width:96px; height:96px; background:url('/app/assets/illustrated/read.webp') center/contain no-repeat; mix-blend-mode:multiply;}
.reader-actions .text-button {font-family:DM,sans-serif;}
.empty-work {grid-template-columns:240px minmax(0,1fr); gap:48px; padding:20px 0 40px;}
.empty-work img {height:220px;}
.empty-work h2 {font-size:32px;}
.workspace-nav a {min-height:44px;}
.saved-project {padding:28px 0;}
.saved-project h2 {font-size:28px;}
.saved-project .small {margin-bottom:10px;}
.music-paper {background:var(--navy); color:var(--ivory); padding:32px;}
.music-paper h2 {color:var(--ivory); font-size:30px;}
.listening-prompts {padding-left:24px; margin:26px 0 0;}
.listening-prompts li {padding-left:6px; margin:18px 0; font-size:17px; line-height:1.6;}
.music-paper .music-art {width:100%; height:300px; object-fit:contain; mix-blend-mode:multiply; display:block;}
.music-paper .music-label {display:block; margin-top:24px; font-size:27px;}
.music-paper p {margin-top:14px; max-width:38ch;}
.studio-layout {gap:64px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.studio-layout>form {padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--surface);}
.studio-preview {border-radius:12px;}
.studio-output {max-width:780px; margin-left:0;}
body[data-page=reader] .masthead {border-bottom:1px solid var(--line);}
@media(min-width:801px) and (max-width:1100px) {
 .masthead {gap:20px;} .masthead .illustrated-nav {gap:4px; font-size:15px;}
 .illustrated-nav a {padding:4px 8px; gap:5px;} .illustrated-nav img {width:42px; height:42px;}
 .learning-intro h1 {font-size:44px;} .intro-illustration {height:240px;}
 .activity-grid,.studio-layout {gap:32px;} .activity-grid>form,.studio-layout>form {padding:24px;}
}
@media(max-width:800px) {
 .masthead {display:block; padding:14px 24px 0;} .masthead>.brand {margin-bottom:8px;}
 .masthead .brand-logo {width:176px; height:58px;}
 .masthead .illustrated-nav {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; width:100%; margin:0; font-size:14px;}
 .masthead .illustrated-nav a {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:4px 0 12px; gap:0; min-height:85px;}
 .illustrated-nav img {width:48px; height:48px;} .illustrated-nav a[aria-current]::after {left:8px; right:8px;}
 .learning-intro {grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; margin-bottom:28px;}
 .learning-intro h1 {font-size:36px;} .learning-intro .page-head>p {font-size:18px;}
 .intro-illustration {height:210px;}
 .desk-identity {gap:12px; flex-wrap:wrap;} .desk-identity .brand-logo {width:136px; height:46px;}
 .activity-grid,.studio-layout {grid-template-columns:minmax(0,1fr); gap:32px;}
 .activity .page-head h1 {font-size:36px;}
 .activity .steps {margin:20px 0 28px;}
 .steps li {padding:12px 6px; flex-direction:row; font-size:14px; gap:8px; align-items:center;}
 .activity-grid>form,.studio-layout>form {padding:24px;}
 .activity-aside {display:grid; grid-template-columns:140px minmax(0,1fr); gap:0 24px;}
 .activity-aside>img {grid-row:1/3; width:140px; height:140px; margin:0;}
 .activity-aside h2 {font-size:26px; margin-bottom:12px;}
 .activity-aside .brief-method {grid-column:1/-1; margin-top:10px;}
 .project-row {grid-template-columns:100px minmax(0,1fr) 24px; gap:20px;}
 .project-row img {width:100px; height:110px;}
 .project-row h2 {font-size:25px;} .project-row p {font-size:17px;}
 .empty-work {grid-template-columns:180px minmax(0,1fr); gap:26px;}
 .empty-work img {width:180px; max-width:none; height:180px;}
 .empty-work h2 {font-size:29px;} .empty-work p {font-size:18px;}
 .reader-title {padding-right:84px;} .reader-title::after {width:72px; height:72px;}
 .studio-tabs {margin-bottom:28px;} .music-paper .music-art {height:250px;}
}
@media(max-width:520px) {
 .masthead {padding-left:18px; padding-right:18px;}
 .learning-intro {grid-template-columns:minmax(0,1fr); gap:14px;}
 .learning-intro h1 {font-size:36px;} .learning-intro h1 br {display:none;}
 .intro-illustration {height:170px; width:100%; object-position:right center;}
 main[data-route='/work'] .intro-illustration {display:none;}
 .learning-intro .desk-identity {margin-top:18px;}
 .studio-tabs {gap:28px;} .studio-tabs a {font-size:16px;}
 .activity .page-head h1 {font-size:32px;}
 .steps li {flex-direction:column; align-items:flex-start; font-size:13px;}
 .activity-grid>form,.studio-layout>form {padding:20px 16px;}
 .activity-grid h2 {font-size:26px;}
 .activity-aside {grid-template-columns:90px minmax(0,1fr); gap:0 18px;}
 .activity-aside>img {width:90px; height:120px;}
 .activity-aside h2 {font-size:24px;}
 .activity-aside p {font-size:16px;}
 .project-row {grid-template-columns:82px minmax(0,1fr); gap:16px; padding:22px 0;}
 .project-row img {width:82px; height:100px;} .project-row>.icon {display:none;}
 .project-row h2 {font-size:24px;} .project-row p {font-size:16px;}
 .empty-work {grid-template-columns:minmax(0,1fr); gap:16px;}
 .empty-work img {height:180px; width:200px; justify-self:center;}
 .reader-title {padding-right:0;} .reader-title::after {display:none;}
 .reading-summary a {font-size:16px;} .desk-identity span {font-size:12px;}
}
@media print {.reader-title::after,.intro-illustration,.studio-tabs {display:none;}}

/* One Didijah site: the product wordmark and company return have distinct destinations. */
.learning-brand {display:flex; flex-direction:column; align-items:flex-start; flex:none; gap:0;}
.parent-home-link {display:inline-flex; align-items:center; gap:6px; min-height:36px; font-size:14px; line-height:1.4; white-space:nowrap;}
.parent-home-link svg {width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; flex:none;}
.footer-home-link {display:flex; align-items:center; width:fit-content; min-height:40px; font-size:15px;}
@media(max-width:800px) {
 .learning-brand {flex-direction:row; align-items:center; justify-content:space-between; gap:8px; width:100%; margin-bottom:8px;}
 .parent-home-link {min-height:44px;}
}
@media(max-width:350px) {
 .learning-brand .brand-logo {width:154px; height:52px;}
 .parent-home-link {font-size:13px; gap:4px;}
}

/* Compact product signatures retain task labels and accessible destinations. */
.product-button {gap:10px;}
.product-button .product-button-logo {width:150px;height:50px;object-position:center;}
.product-home-link {gap:6px;}
.product-home-link .compact-product-logo {width:126px;height:42px;object-position:center;}
.route-row .product-row-logo {width:210px;height:70px;}
.desk-identity {margin-top:16px;}
.desk-identity .brand-logo {width:180px;height:60px;}
@media(max-width:520px){
 .product-button .product-button-logo {width:132px;height:44px;}
 .desk-identity .brand-logo {width:156px;height:52px;}
}

/* Choose → Try → Keep: one concise process diagram on the project chooser. */
.project-process {display:flex;align-items:flex-start;max-width:320px;margin:24px 0 0;padding:0;list-style:none;color:var(--navy);}
.project-process li {position:relative;flex:1;text-align:center;font-size:17px;font-weight:600;line-height:1.4;}
.project-process svg {fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.project-process .process-icon {display:block;width:36px;height:36px;margin:0 auto 8px;}
.project-process .process-connector {position:absolute;right:-10px;top:8px;width:20px;height:20px;}
@media(max-width:520px){.project-process{max-width:290px;margin-top:20px;}.project-process li{font-size:16px;}}

/* Reading and practice are parallel ways into the same chapter. */
.chapter-lesson-jump{max-width:760px;margin:0 auto 32px}
.chapter-lesson-jump a,.reading-visual-link a{display:inline-flex;align-items:center;gap:12px;min-height:48px}
.chapter-lesson{max-width:860px;margin:52px auto;display:grid;grid-template-columns:240px 1fr;gap:30px;align-items:center;border-block:1px solid var(--line);padding-block:28px}
.chapter-lesson-art{background:#e6edfa;overflow:hidden}
.chapter-lesson-art img,.chapter-lesson-art svg{display:block;width:100%;height:180px;object-fit:cover}
.chapter-lesson h2{font-size:30px;line-height:1.12;margin:0 0 12px;text-wrap:balance}
.chapter-lesson p{margin:0 0 16px}
.chapter-lesson .field-help{margin:12px 0 0}
.chapter-lesson .button{min-height:48px}
@media(max-width:650px){.chapter-lesson{grid-template-columns:1fr;gap:22px;margin:36px auto}.chapter-lesson-art img,.chapter-lesson-art svg{height:210px}.chapter-lesson h2{font-size:28px}.chapter-lesson .button{width:100%;justify-content:space-between}.reading-visual-link{font-size:16px}}
@media print{.chapter-lesson,.chapter-lesson-jump,.reading-visual-link{display:none}}