/* v0.8 illustrated professional design system. Built on original v0.7 branching. */
:root {
  --ink: #25243b; --ink-soft: #56536b; --navy: #2c2039; --navy-2:#45304a;
  --mint: #b78ca6; --mint-deep:#6a3655; --cream:#f6f2f0;
  --line:#e4d9df; --soft:#f9f5f6; --warm:#ae788f;
  --shadow: 0 20px 64px rgba(55,32,51,.09); --radius:20px;
  --plum:#67364f; --plum-deep:#47243a; --slate:#304c6b;
  --focus:#b76234;
}
body {background:linear-gradient(125deg,#f6f0f1,#f8f7f6 46%,#f0edf0); color:var(--ink);}
:focus-visible, .choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px;}
.site-shell{width:min(1510px,100%);}
.masthead{height:auto;min-height:88px;padding:16px clamp(20px,3.5vw,48px);background:#fffcfb;gap:15px;}
.brand{letter-spacing:normal;display:flex;align-items:center;gap:24px;font-size:inherit;min-width:0;}
.brand-title {margin:0;font-family:Georgia, 'Times New Roman', serif;font-weight:700;font-size:clamp(24px,2.35vw,36px);line-height:1.02;letter-spacing:-.035em;color:#3e203a;}
.brand-subtitle{border-left:1px solid #bfacb7;padding-left:22px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5d5369;white-space:nowrap;}
.build-pill {background:transparent;border-color:#e2d8de;color:#625469;font-weight:730;font-size:10px;}
.experience-shell{grid-template-columns:minmax(246px,292px) minmax(0,1fr);border-color:#e4dbe1;border-radius:0;min-height:740px;}
.side-panel{position:relative;background:linear-gradient(160deg,#f2ecef,#f9f7f7 52%,#eae3e8);color:#322c40;padding:35px 22px 70px;overflow:hidden;isolation:isolate;}
.side-panel::after{content:"";pointer-events:none;position:absolute;z-index:-1;left:-35px;bottom:-70px;width:285px;height:285px;opacity:.52;background:linear-gradient(45deg,transparent 49.6%,#b8a2b2 50%,transparent 50.5%),linear-gradient(35deg,#8c728c 0 18%,transparent 18%),linear-gradient(53deg,#cab6c3 0 31%,transparent 31%);clip-path:polygon(0 5%,100% 100%,0 100%);}
.sidebar-top {display:grid;grid-template-columns:26px 1fr;column-gap:10px;align-items:start;padding-bottom:17px;border-bottom:1px solid #d5c9d1;}
.sidebar-heading-icon{font-size:22px;line-height:1.25;color:#64384e;}
.sidebar-top h2{margin:0;font-size:18px;letter-spacing:-.02em;font-weight:760;line-height:1.3;}
.sidebar-top p{grid-column:1 / -1;margin:11px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:680;color:#6d6271;line-height:1.55;}
.sidebar-notes{margin-top:18px;position:relative;z-index:2;}
.workspace-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.workspace-tabs button{border:1px solid #d5c8d1;background:transparent;color:#695e70;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:700;min-height:38px;}
.workspace-tabs button.active{background:#673950;color:#fff;border-color:#673950;}
.workspace-content{min-height:80px;}
.workspace-empty{font-size:13px;line-height:1.65;color:#736a77;margin:3px 0 0;max-width:190px;}
.sidebar-notes .case-notes{margin:0;background:transparent;border:0;color:#3d3347;}
.sidebar-notes .case-notes dl{padding:0;margin:0;border:0;}
.sidebar-notes .case-notes dl div{border:1px solid #ece4e8;background:rgba(255,255,255,.84);border-radius:12px;padding:13px 14px;margin-bottom:10px;box-shadow:0 3px 14px rgba(58,32,49,.035);}
.sidebar-notes .case-notes dt{color:#613a53;font-size:13px;margin:0 0 7px;letter-spacing:.025em;}
.sidebar-notes .case-notes dd{font-size:12px;color:#51465c;line-height:1.6;}
.sidebar-notes .case-caveat{font-size:10px;color:#71697a;margin:10px 2px 16px;}
.sidebar-tracker h3{font:700 14px/1.3 system-ui,sans-serif;margin:0 0 12px;color:#4b344b;}
.sidebar-tracker>div{display:grid;gap:4px;background:#fff;border:1px solid #e7dfe5;padding:12px 13px;margin-bottom:9px;border-radius:10px;}
.sidebar-tracker strong{font-size:12px;color:#5b3457;}
.sidebar-tracker span,.sidebar-tracker p{font-size:12px;line-height:1.5;color:#51475a;}
.sidebar-tracker p{font-size:11px;margin:13px 2px;}
.content-panel {background:linear-gradient(180deg,#fff,#fefcfb);}
.screen{max-width:1125px;padding:32px clamp(22px,3.5vw,48px) 43px;}
.content-top{margin-bottom:18px;}
.step-label{color:#74415c;letter-spacing:.105em;}
.step-dot{background:#793c5d;}
.step-meta{color:#796d78;}
.progress-track{height:4px;background:#e8dfe5;margin-bottom:26px;}
.progress-fill{background:linear-gradient(90deg,#603250,#ad7995);}
.page-title{font-family:Georgia,'Times New Roman',serif;font-weight:700;color:#3b2541;letter-spacing:-.035em;font-size:clamp(29px,2.9vw,39px);margin-bottom:10px;}
.page-subtitle{font-size:14px;line-height:1.6;color:#615a6b;margin-bottom:17px;max-width:790px;}
.eyebrow{color:#794761;}
.intro-title{font-size:clamp(42px,4.8vw,60px);}
.intro-deck{color:#673b57;}
.intro-learning > div,.intro-context-line{background:#faf7f9;border-color:#e9dfe5;}
.intro-learning h2{color:#4d3553;}
.intro-learning p,.intro-learning li,.intro-context-line{color:#65596c;}
.illustrated-scene{--scene-accent:#75425d;--scene-tint:#f3e7ec;display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);gap:0;align-items:stretch;margin:18px 0 22px;border:1px solid #eee3e8;border-radius:17px;background:linear-gradient(120deg,#f7f0f3,#fff);box-shadow:0 8px 25px rgba(48,28,48,.06);overflow:hidden;}
.illustrated-scene.theme-devon{--scene-accent:#304f70;--scene-tint:#e8eef4;background:linear-gradient(115deg,#eaf0f5,#fff);border-color:#e0e5ec;}
.scene-portrait{position:relative;margin:0;min-width:0;min-height:320px;max-height:620px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0)) , var(--scene-tint);display:flex;align-items:flex-end;justify-content:center;padding:10px 14px 0;}
.scene-portrait img{display:block;width:100%;height:100%;min-height:320px;object-fit:contain;object-position:center bottom;}
.scene-lines{padding:18px clamp(14px,2.2vw,27px) 22px;align-self:start;min-width:0;}
.scene-name{min-height:47px;display:flex;align-items:center;margin-bottom:10px;}
.scene-name .name-script{display:inline-block;line-height:1;color:var(--scene-accent);text-shadow:0 1px 0 rgba(255,255,255,.6);}
.scene-name-maya .name-script{font-family:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive;font-size:clamp(44px,4.1vw,56px);font-weight:500;letter-spacing:.01em;}
.scene-name-devon .name-script{font-family:'Segoe Print','Trebuchet MS','Arial',sans-serif;font-size:clamp(31px,3vw,40px);font-weight:700;letter-spacing:.02em;}
.scene-lines .dialogue-group{margin:0;gap:9px;}
.scene-lines .speech{border:0;border-left:3px solid var(--scene-accent);border-radius:0 9px 9px 0;background:rgba(255,255,255,.93);padding:11px 13px;box-shadow:0 2px 10px rgba(50,28,45,.03);}
.scene-lines .speech.manager{background:rgba(250,247,249,.85);border-left-color:#a47a93;}
.scene-lines .speech.maya{background:rgba(255,252,253,.95);border-left-color:#8c5870;}
.scene-lines .speech.devon{background:rgba(251,253,255,.95);border-left-color:#64829f;}
.scene-lines .speech p{font-size:13px;line-height:1.57;margin-bottom:7px;color:#343044;}
.scene-lines .speaker{font-size:10px;margin-bottom:5px;color:var(--scene-accent);}
.scene-lines .avatar{width:23px;height:23px;font-size:10px;color:var(--scene-accent);background:var(--scene-tint);}
.scene-lines .delivery-cue{font-size:12px !important;color:#706b77;}
.speech.maya{background:#faf4f6;border-color:#8e6a81;}
.speech.devon{background:#f2f6fa;border-color:#7991aa;}
.speech.manager{background:#faf7f9;border-color:#ac8c9f;}
.speech .speaker{color:#533e56;}
.choice-grid{gap:10px;}
legend{font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:700;color:#4a2a46;margin-bottom:13px;}
.choice{background:#fff;border-color:#e2d8df;border-radius:12px;padding:14px 17px;box-shadow:0 3px 14px rgba(40,25,45,.025);}
.choice:hover{border-color:#9b708b;background:#fcf8fb;}
.choice:has(input:checked){border-color:#76435e;background:#f8eef4;box-shadow:inset 0 0 0 1px #76435e;}
.choice input{accent-color:#763a5b;}
.choice-copy{gap:8px;}
.choice-name{color:#74465e;}
.choice-quote{color:#343046;font-size:14px;line-height:1.55;}
.btn-primary{background:#63354e;}
.btn-primary:not(:disabled):hover{background:#45263b;}
.btn-secondary{background:#fff;color:#4c3652;border-color:#d8cad3;}
.btn-secondary:hover{background:#f8f1f5;}
.btn-minimal{color:#5d4459;}
.btn-minimal:hover{color:#4e2c44;}
.note,.outcome-story,.recapture,.reflection-item,.case-reveal article,.takeaway-steps article{background:#faf7f9;border-color:#e5dbe3;}
.note-icon,.note strong,.reflection-index,.reflection-reaction strong,.reflection-impact strong{color:#673c59;}
.note p,.reflection-item p,.outcome-story p,.case-reveal p,.perspectives p{color:#4f4659;}
.tracker{border-color:#e5dbe3;}
.tracker-head{background:#f3ecf1;color:#573e58;}
.tracker-row{border-top-color:#eae0e6;}
.tracker-id,.recapture h3{color:#694263;}
.small-status{color:#686171;}
.perspectives article,.download-panel{background:#f7f1f5;}
.perspectives h3,.principle-reveal h3,.outcome-detail strong,.reflection-label{color:#673c59 !important;}
.principle-reveal,.reflection-quote,.outcome-detail{border-left-color:#9e7790;background:#faf5f8;}
.reflection-quote{color:#382d3f;}
.incident-tag{color:#693c5f;background:#f2e6ee;}
.takeaway-steps article > span{color:#673c59;background:#f0e3eb;}
.takeaway-steps .sample-line{color:#67415c;}
.site-footer{color:#74677a;}
@media(max-width:1100px){
  .experience-shell{grid-template-columns:minmax(217px,255px) minmax(0,1fr);}
  .side-panel{padding:26px 16px 55px;}
  .screen{padding:25px 23px 35px;}
  .illustrated-scene{grid-template-columns:minmax(0,.79fr) minmax(0,1.21fr);}
  .scene-portrait{min-height:320px;}
  .scene-portrait img{min-height:320px;}
}
@media(max-width:850px){
  .masthead{min-height:78px;}
  .brand{gap:12px;}
  .brand-subtitle{font-size:9px;letter-spacing:.11em;padding-left:12px;}
  .build-pill{display:none;}
  .experience-shell{display:flex;flex-direction:column;}
  .side-panel{padding:16px 22px 19px;}
  .side-panel::after{display:none;}
  .sidebar-top{padding-bottom:9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
  .sidebar-top h2{font-size:16px;}
  .sidebar-top p{flex-basis:100%;margin:0;}
  .sidebar-notes{margin-top:10px;}
  .workspace-content{max-height:175px;overflow:auto;min-height:0;}
  .sidebar-notes .case-notes dl{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;}
  .sidebar-notes .case-notes dl div{flex:1 1 180px;margin:0;}
}
@media(max-width:640px){
  .masthead{padding:14px 17px;}
  .brand{display:grid;gap:2px;}
  .brand-title{font-size:26px;}
  .brand-subtitle{border:0;padding:0;font-size:9px;}
  .side-panel{padding:12px 18px 15px;}
  .screen{padding:19px 17px 28px;}
  .content-top{margin-bottom:12px;}
  .progress-track{margin-bottom:20px;}
  .illustrated-scene{grid-template-columns:1fr;}
  .scene-portrait,.scene-portrait img{height:220px;min-height:220px;max-height:220px;}
  .scene-portrait img{object-position:center 21%;}
  .scene-lines{padding:12px 15px 17px;}
  .scene-name{height:39px;margin:0 0 6px;}
  .scene-name img{max-height:44px;width:135px;}
  .scene-lines .speech p{font-size:13px;}
  .choice-quote{font-size:13px;}
  .navigation .btn{max-width:100%;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;transition:none !important;animation:none !important;}
}
/* Keep the portrait framed consistently even when dialogue becomes longer. */
.scene-portrait{min-height:405px;max-height:none;height:auto;}
.scene-portrait img{position:absolute;inset:0;height:100%;width:100%;min-height:0;}
.mobile-workspace-toggle{display:none;}
@media(max-width:850px){
 .mobile-workspace-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:10px 13px;border-radius:10px;background:#fff;border:1px solid #d8cbd4;color:#58364e;font-size:12px;font-weight:740;width:100%;}
 .side-panel:not(.notes-expanded) .sidebar-notes{display:none;}
 .side-panel.notes-expanded .sidebar-notes{display:block;}
 .side-panel .workspace-content{max-height:none;overflow:visible;}
}
@media(max-width:640px){
 .scene-portrait{min-height:225px;max-height:225px;height:225px;}
 .scene-portrait img{height:100%;min-height:0;}
}


/* v0.8.3 polish pass */
.content-panel {background:linear-gradient(180deg,#fff 0%,#fdfafb 100%);}
.screen{max-width:1140px;padding:34px clamp(24px,3.8vw,54px) 46px;}
.page-subtitle{font-size:15px;line-height:1.65;max-width:820px;margin-bottom:20px;}
.sidebar-top{padding-bottom:14px;margin-bottom:4px;}
.sidebar-notes .case-notes dl div{padding:15px 15px 14px;border-radius:14px;box-shadow:0 6px 18px rgba(58,32,49,.04);}
.sidebar-notes .case-notes dd{line-height:1.65;}
.sidebar-tracker>div{padding:13px 14px;border-radius:12px;}
.workspace-tabs{margin-bottom:16px;}
.workspace-tabs button{padding:9px 12px;border-radius:10px;}
.illustrated-scene{margin:20px 0 26px;border-radius:20px;box-shadow:0 12px 30px rgba(48,28,48,.07);background:linear-gradient(125deg,#f8f1f4 0%,#fff 58%);}
.illustrated-scene.theme-devon{background:linear-gradient(125deg,#edf3f7 0%,#fff 58%);box-shadow:0 12px 30px rgba(33,48,74,.07);}
.scene-portrait{padding:16px 18px 0;}
.scene-lines{padding:22px clamp(16px,2.4vw,30px) 24px;}
.scene-lines .speech{padding:13px 15px;border-radius:0 12px 12px 0;box-shadow:0 5px 16px rgba(50,28,45,.035);}
.scene-lines .speech p{font-size:13.5px;line-height:1.62;}
.scene-lines .speaker{font-size:10.5px;letter-spacing:.09em;}
legend{font-size:22px;margin-bottom:14px;}
.choice-grid{gap:12px;}
.choice{padding:16px 18px;border-radius:14px;box-shadow:0 4px 14px rgba(40,25,45,.03);}
.choice:hover{box-shadow:0 8px 20px rgba(68,41,65,.05);}
.choice-name{font-size:15px;}
.choice-quote{font-size:14px;line-height:1.62;}
.navigation{margin-top:32px;}
.btn{border-radius:12px;padding:14px 20px;}
.btn-primary{box-shadow:0 10px 24px rgba(99,53,78,.18);}
.btn-primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(69,38,59,.22);}
.btn-secondary:hover{box-shadow:0 6px 16px rgba(73,49,67,.06);}
.note,.outcome-story,.recapture,.reflection-item,.case-reveal article,.takeaway-steps article{border-radius:15px;box-shadow:0 5px 18px rgba(58,32,49,.03);}
.site-footer{padding-top:14px;}
@media(max-width:850px){
  .screen{padding:26px 22px 36px;}
  .illustrated-scene{margin-bottom:22px;}
  .scene-lines{padding:18px 18px 20px;}
}
@media(max-width:640px){
  .screen{padding:20px 16px 30px;}
  .page-subtitle{font-size:14px;}
  .choice{padding:14px 14px 15px;}
  .btn-primary{box-shadow:none;}
}