/* Shared navigation and full-width reading pages. DS-D08, 13 September 2026. */
body{background:var(--paper)}
.site{max-width:none;margin:0;box-shadow:none}
.site>.header,.site>.footer,.reality-main,.lesson-main{width:min(1280px,100%);margin-inline:auto;padding-inline:40px}
.site>.header{height:72px;gap:24px;background:var(--paper);border-bottom:0;transition:height .2s ease,box-shadow .2s ease}
.site>.header.is-compact{height:56px;box-shadow:0 5px 18px #1c1c1c08}
.site>.header .brand{font-size:17px;padding:8px 14px;transition:font-size .2s ease,padding .2s ease}
.site>.header.is-compact .brand{font-size:15px;padding:6px 12px}
.site>.header .desktop-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.desktop-nav a{font-size:15px;text-decoration:none;padding:12px 0;white-space:nowrap}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]:not(.reality-highlight){text-decoration:underline}
.site>.header .header-contact{display:block;font-size:15px;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:12px 16px;white-space:nowrap}
.site .reality-highlight{display:inline-flex;align-items:center;gap:9px;background:var(--lavender);color:#39245f;border:1px solid #c5b5e5;border-radius:24px;padding:11px 15px;font-weight:700;text-decoration:none;min-height:44px}
.reality-dot{width:7px;height:7px;border-radius:50%;background:#7850c7;box-shadow:0 0 0 4px #7850c718,0 0 12px #7850c750;flex:none}
.site .reality-highlight:hover,.site .reality-highlight[aria-current=page]{background:#ddd1f5;border-color:#a48acb}
.site>.header .mobile-reality,.site>.header .menu-button{display:none}
.site>.footer{margin-top:88px;padding-block:28px 36px}
.footer-top{font-size:15px}.footer p{font-size:14px}
.menu{max-width:480px}.menu nav .reality-highlight{justify-self:start;margin-block:10px;padding:12px 20px;font-size:27px}
.menu nav a{font-size:27px}
.reality-main .crumb,.lesson-main .crumb{font-size:14px;margin-top:18px}
.reality-main .section{margin-top:92px}
.reality-main .section-label{font-size:13px;letter-spacing:.055em;margin-bottom:18px}
.reality-main .section-title{font-size:44px;line-height:1.08;margin-bottom:0}
.reality-main .button,.lesson-main .button{font-size:16px;width:auto;background:var(--action-color)}
.reality-main .button:hover,.lesson-main .button:hover{background:var(--action-hover)}
.reality-main .button.light{background:transparent;color:var(--ink)}
.reality-main .course-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:32px}
.course-intro{min-width:0}.course-title{font-size:clamp(48px,4.5vw,64px);line-height:1.06;letter-spacing:-.045em}
.course-intro>p{font-size:19px;line-height:1.5;max-width:54ch;margin-top:24px}
.author-line{font-size:15px;gap:14px;margin:26px 0}.author-line span{font-size:12px}.author-line .avatar{width:48px;height:48px}
.course-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.course-actions .button{padding:17px 22px}
.reality-main .course-graphic{margin-top:0;padding:36px;border-radius:20px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.course-graphic .small-label{font-size:13px;letter-spacing:.04em;margin-bottom:36px}.flow-row{font-size:34px;padding-block:21px;gap:12px}.flow-row small{font-size:14px}
.course-inside{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);grid-template-areas:"heading details" "note details";gap:28px 64px;align-items:start}
.course-inside .course-section-heading{grid-area:heading}.course-details{grid-area:details;min-width:0}
.course-inside .note-panel{grid-area:note;margin:0;padding:28px}.note-panel h3{font-size:28px}.note-panel h3 br{display:none}.note-panel h3 br:after{content:' '}
.reality-main .step-detail summary{font-size:21px;line-height:1.3;padding-block:23px;gap:18px}.reality-main .step-detail p{font-size:17px;line-height:1.55;max-width:65ch;padding-left:32px}
.course-formats,.course-faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:64px;align-items:start}
.format-workspace,.course-questions{min-width:0}.format-tabs{gap:10px;margin-bottom:18px}.format-tab{font-size:16px;min-height:54px;padding:12px}
.format-panel{padding:36px;border:1px solid #e6e3e8;border-radius:16px}.format-panel h3{font-size:36px;margin-top:20px}.format-panel ul{font-size:18px;line-height:1.5}.format-panel .exclusion{font-size:16px;line-height:1.5}.format-panel .text-link{font-size:16px}
.reality-main .expert{padding:36px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:center;border-radius:16px}
.reality-main .expert-head{grid-row:1/3;margin:0;gap:24px}.reality-main .expert-head .avatar{width:100px;height:100px}.reality-main .expert h3{font-size:32px}.reality-main .expert .role{font-size:14px}.reality-main .expert>p{font-size:18px;line-height:1.5}.reality-main .expert>a{grid-column:2;justify-self:start;margin-top:10px}
.reality-main .faq p{padding-left:0}.reality-main .course-close{margin-top:48px}.reality-main .course-close .button{display:inline-flex;min-width:280px}
.lesson-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);align-items:center;gap:64px;margin-top:32px}
.lesson-heading{min-width:0}.lesson-title{font-size:clamp(46px,4.2vw,60px);line-height:1.07;letter-spacing:-.04em}.lesson-tags{margin-bottom:22px}
.lesson-head .author-line{margin-bottom:0}.lesson-head .lesson-callout{margin:0;padding:36px;border-radius:18px}.lesson-callout h2{font-size:36px}.lesson-callout p{font-size:18px;line-height:1.5}
.lesson-tabs{display:flex;gap:24px;margin-top:52px}.lesson-tabs button{font-size:16px;min-width:148px;padding:18px 28px}
#panel-lesson{display:grid;grid-template-columns:260px minmax(0,780px);gap:64px;padding-top:36px;align-items:start}
.lesson-reading{min-width:0}.lesson-contents{position:sticky;top:90px;max-height:calc(100svh - 112px);overflow:auto;align-self:start;margin-top:0;padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.lesson-contents summary{font-size:15px;font-weight:500;gap:12px;padding:0;min-height:24px}.lesson-contents[open] summary{padding-bottom:14px}.lesson-contents ol{font-size:15px;margin-bottom:0;line-height:1.5;padding-left:18px}.lesson-contents li{padding-block:7px}.lesson-contents a{text-decoration:none}.lesson-contents a:hover{text-decoration:underline}
.reading-section{margin-top:56px}.lesson-reading>.reading-section:first-child{margin-top:0}.reading-section h2{font-size:36px;line-height:1.12}.reading-section h2 br{display:none}.reading-section p,.reading-section li{font-size:18px;line-height:1.6}.reading-section .section-label{font-size:13px}
.lesson-fact{padding:28px;margin-block:28px}.lesson-fact strong{font-size:32px}.lesson-fact p{font-size:17px}.funnel{padding:18px 28px}.funnel-row{font-size:18px;padding-block:16px}
.practice{padding:32px;margin-top:56px}.practice h2{font-size:32px}.practice label{font-size:17px;line-height:1.5}.practice p{font-size:17px}.reading-end .button{width:auto;min-width:300px}.read-status{text-align:left}.source-note{font-size:13px;line-height:1.6}
.material-panel{padding-top:36px;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:64px;align-items:start}.material-panel>h2{font-size:36px}.material-panel>p{grid-column:1;font-size:18px;line-height:1.5}.material-panel>.text-link{grid-column:1;grid-row:3;font-size:16px}
.material-original{grid-column:2;grid-row:1/4;padding:32px;display:grid;grid-template-columns:minmax(0,1fr) 180px;column-gap:28px;border-radius:16px}.material-original h3{font-size:28px;line-height:1.16}.material-original p{font-size:16px}.material-original .material-thumb{grid-column:2;grid-row:1/4;width:180px;margin:0}.material-original>span{align-self:end;font-size:16px;min-height:44px}
@media (700px <= width < 1100px){
 .site>.header,.site>.footer,.reality-main,.lesson-main{padding-inline:28px}
 .site>.header{gap:20px}.site>.header .desktop-nav{gap:18px}.site>.header .header-contact{display:none}
 .reality-main .course-hero{grid-template-columns:1fr;gap:32px}.course-intro{max-width:760px}.course-title{font-size:52px}
 .reality-main .course-graphic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;padding:28px}.course-graphic .small-label{grid-column:1/-1;margin-bottom:20px}.flow-row{font-size:23px;display:block;padding:0;border:0}.flow-row small{display:block;margin-top:12px}
 .course-inside,.course-formats,.course-faq{column-gap:32px;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}.reality-main .section-title{font-size:34px}.course-inside .note-panel{padding:24px}.note-panel h3{font-size:25px}.format-panel{padding:26px}.format-tab{font-size:14px;padding:10px 5px}.reality-main .step-detail summary{font-size:19px}.reality-main .expert{padding:28px;gap:30px}.reality-main .expert-head{gap:16px}.reality-main .expert-head .avatar{width:72px;height:72px}.reality-main .expert h3{font-size:26px}
 .lesson-head{grid-template-columns:1fr;gap:28px}.lesson-title{font-size:52px}.lesson-head .lesson-callout{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:28px}.lesson-callout h2{font-size:32px}.lesson-callout p{margin:0;align-self:center}
 #panel-lesson{grid-template-columns:200px minmax(0,1fr);gap:32px}.lesson-contents{padding:18px}.reading-section h2{font-size:30px}.reading-section p,.reading-section li{font-size:17px}.practice{padding:24px}.reading-end .button{min-width:0;width:100%}
 .material-panel{grid-template-columns:1fr;gap:0}.material-panel>.text-link,.material-panel>p{grid-column:1;grid-row:auto}.material-original{grid-column:1;grid-row:3;margin-top:10px}.material-panel>.text-link{grid-row:4}
}
@media (width < 700px){
 .site>.header,.site>.footer,.reality-main,.lesson-main{padding-inline:18px}
 .site>.header{height:64px;gap:14px}.site>.header.is-compact{height:52px}.site>.header .brand,.site>.header.is-compact .brand{font-size:16px;padding:7px 10px}.brand-suffix{display:none}
 .site>.header .desktop-nav,.site>.header .header-contact{display:none}.site>.header .mobile-reality{display:inline-flex;margin-left:auto;font-size:14px;padding:10px 12px}.site>.header .menu-button{display:grid;flex:none}
 .site>.footer{margin-top:60px}.footer-top{font-size:13px}.footer p{font-size:12px}.menu nav a{font-size:25px}
 .reality-main .course-hero{grid-template-columns:1fr;gap:28px;margin-top:24px}.course-title{font-size:clamp(36px,9.5vw,52px)}.course-intro>p{font-size:17px;line-height:1.5;margin-top:22px}.course-actions{display:grid;gap:10px;margin-top:24px}.course-actions .button{width:100%;padding:16px 18px}
 .reality-main .course-graphic{padding:26px;border-radius:14px}.course-graphic .small-label{font-size:12px;margin-bottom:22px}.flow-row{font-size:28px;padding-block:16px}.author-line{font-size:14px;margin-block:24px}
 .reality-main .section{margin-top:60px}.reality-main .section-title{font-size:34px}.reality-main .section-label{font-size:12px}
 .course-inside{grid-template-columns:1fr;grid-template-areas:"heading" "details" "note";gap:26px}.course-formats,.course-faq{grid-template-columns:1fr;gap:26px}.course-inside .note-panel{padding:26px}.reality-main .step-detail summary{font-size:19px;gap:12px}.reality-main .step-detail p{font-size:16px;padding-left:26px}.reality-main .faq p{padding-left:0}
 .format-tabs{gap:6px}.format-tab{font-size:13px;padding:10px 4px}.format-panel{padding:26px}.format-panel h3{font-size:30px}.format-panel ul{font-size:17px}.format-panel .exclusion{font-size:15px}
 .reality-main .expert{display:block;padding:26px}.reality-main .expert-head{gap:16px;margin-bottom:22px}.reality-main .expert-head .avatar{width:64px;height:64px}.reality-main .expert h3{font-size:26px}.reality-main .expert>p{font-size:17px}.reality-main .expert>a{margin-top:14px}.reality-main .course-close .button{width:100%;min-width:0}
 .lesson-head{grid-template-columns:1fr;gap:26px;margin-top:24px}.lesson-title{font-size:clamp(34px,9vw,50px)}.lesson-head .lesson-callout{padding:26px}.lesson-callout h2{font-size:30px}.lesson-callout p{font-size:17px}
 .lesson-tabs{gap:0;margin-top:32px}.lesson-tabs button{width:50%;min-width:0;padding:16px}
 #panel-lesson{grid-template-columns:1fr;gap:30px;padding-top:24px}.lesson-contents{position:static;max-height:none;padding:20px}.reading-section{margin-top:42px}.reading-section h2{font-size:29px}.reading-section p,.reading-section li{font-size:17px;line-height:1.55}.lesson-fact{padding:23px}.lesson-fact strong{font-size:28px}.lesson-fact p{font-size:16px}.funnel{padding:12px 22px}.funnel-row{font-size:16px}.practice{padding:24px;margin-top:42px}.practice h2{font-size:27px}.practice label{font-size:16px}.reading-end .button{width:100%;min-width:0}
 .material-panel{display:block;padding-top:28px}.material-panel>h2{font-size:30px}.material-panel>p{font-size:17px}.material-original{display:block;padding:24px;margin-top:24px}.material-original h3{font-size:26px}.material-original .material-thumb{width:180px;margin:22px auto}.material-original>span{margin-top:24px}
}
.hero-photo-media{display:block;width:100%;flex:none}
/* Follow-up: keep the author attached to the hero at every width. */
@media (700px <= width < 1000px){
 .home-view .home-hero{grid-template-columns:minmax(0,1fr) 240px;grid-template-areas:"kicker kicker" "title title" "description portrait" "actions portrait" "note portrait" "situations situations";gap:0 30px;align-items:start}
 .home-hero .hero-copy{display:contents}
 .home-hero .hero-kicker{grid-area:kicker;text-align:left;margin:0 0 18px}
 .home-view .home-hero .home-title{grid-area:title;text-align:left;font-size:2.375rem;max-width:760px;margin-bottom:22px}
 .home-view .home-hero .hero-description{grid-area:description;font-size:17px;line-height:1.5;text-align:left;max-width:none;margin:0}
 .home-hero .home-cta-row{grid-area:actions;display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:22px}
 .home-hero .hero-action-note{grid-area:note;text-align:left;font-size:12px;margin:2px 0 0}
 .home-view .home-hero .hero-photo{display:block;width:240px;align-self:center;margin:0;justify-self:end}
 .home-view .home-hero .hero-photo img{width:240px;height:240px;border-radius:14px}
 .home-view .home-hero .photo-caption{font-size:15px;padding-top:12px}
 .home-hero .hero-situations{margin-top:24px}
}
@media (width < 700px){
 .home-view .home-hero{grid-template-areas:"copy" "portrait" "situations";gap:26px}
 .home-hero .hero-copy{text-align:left}
 .home-view .home-hero .hero-photo{display:block;width:100%;max-width:430px;margin:0;justify-self:start}
 .home-hero .hero-photo-media{width:100%}
 .home-view .home-hero .hero-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px}
 .home-view .home-hero .photo-caption{font-size:14px;max-width:none;line-height:1.4;padding-top:10px}
}
.home-view .author-portrait{aspect-ratio:4 / 5;object-fit:cover;object-position:center top;max-width:430px}
@media (prefers-reduced-motion:reduce){.site>.header,.site>.header .brand{transition:none}}

/* DS-M12: keep the educational identity readable at every width. */
.site .brand-suffix{display:inline}
.site .menu-head .brand{white-space:normal}
@media (width < 1000px){
 .site>.header .desktop-nav{gap:18px}
 .site>.header .brand{font-size:15px;padding:8px 12px;flex-shrink:0}
}
@media (width < 700px){
 .site>.header .brand,.site>.header.is-compact .brand,.site .menu-head .brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:16px;line-height:1;padding:7px 12px;border-radius:16px}
 .site .brand-suffix{display:block;font-size:12px;font-weight:500;line-height:1.15;white-space:nowrap}
 .site>.header{gap:12px}
 .site>.header.is-compact .brand{font-size:14px;gap:2px;padding:6px 10px}
}