/* Chapter 20: project reflection, in the established blue case-study system. */
#reflection.summary-reference { --ps-unit:min(1vw,21.506px); --ps-ink:#14233d; --ps-muted:#62738c; padding:0; position:relative; color:var(--ps-ink); background:radial-gradient(ellipse at 89% 10%,#e8f3ff88,transparent 31%),radial-gradient(ellipse at 0 67%,#edf6ff8a,transparent 33%),linear-gradient(120deg,#fbfcfd,#f8fbff 72%,#fbfcfd); }
#reflection .ps-shell { width:93%; max-width:2000px; margin:0 auto; padding:calc(2.4 * var(--ps-unit)) 0 calc(1.05 * var(--ps-unit)); }
#reflection .ps-content { margin-inline:calc(2.75 * var(--ps-unit)); }
#reflection .ps-hero { display:grid; grid-template-columns:minmax(0,64fr) minmax(0,36fr); align-items:center; min-height:calc(10.5 * var(--ps-unit)); gap:calc(1 * var(--ps-unit)); margin-bottom:calc(2.15 * var(--ps-unit)); }
#reflection .section-label { margin:0 0 calc(1.12 * var(--ps-unit)); color:#627898; font-size:clamp(10px,calc(.68 * var(--ps-unit)),15px); letter-spacing:.16em; line-height:1.6; }
#reflection h2 { max-width:none; color:#121d2e; font-size:clamp(30px,calc(2.85 * var(--ps-unit)),62px); font-weight:700; letter-spacing:-.025em; line-height:1.4; text-wrap:initial; }
#reflection .ps-annotation { position:relative; min-width:0; height:calc(10.6 * var(--ps-unit)); display:flex; align-items:center; justify-content:space-between; gap:calc(1.1 * var(--ps-unit)); }
#reflection .ps-note-wash { position:absolute; width:99%; height:92%; left:-3%; top:-6%; border-radius:50%; background:linear-gradient(110deg,#eaf3ff9c,#eaf4ff00); transform:rotate(-15deg); }
#reflection .ps-handnote { position:relative; z-index:1; color:#2e71ff; font-family:'Segoe Script','Segoe Print','Brush Script MT',cursive; font-size:clamp(16px,calc(1.45 * var(--ps-unit)),31px); line-height:1.5; white-space:nowrap; transform:rotate(-8deg); margin-left:calc(.4 * var(--ps-unit)); }
#reflection .ps-handnote > span { display:block; }
#reflection .ps-handnote > span:nth-child(2) { margin-left:calc(2 * var(--ps-unit)); }
#reflection .ps-handnote svg { display:block; width:calc(15.5 * var(--ps-unit)); height:calc(3.7 * var(--ps-unit)); margin:calc(-.3 * var(--ps-unit)) 0 0 calc(2 * var(--ps-unit)); }
#reflection .ps-side-caption { position:relative; flex-shrink:0; align-self:flex-end; margin:0 0 calc(1 * var(--ps-unit)); color:#6b7f9e; font-size:clamp(8px,calc(.56 * var(--ps-unit)),12px); line-height:1.7; letter-spacing:.1em; }
#reflection .ps-side-caption::before { content:''; display:block; width:calc(1 * var(--ps-unit)); height:1px; background:#a9bedc; margin-bottom:calc(.65 * var(--ps-unit)); }
#reflection .ps-story { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(3.5 * var(--ps-unit)); margin-bottom:calc(1.95 * var(--ps-unit)); }
#reflection .ps-story > li { position:relative; min-width:0; }
#reflection .ps-story > li:not(:last-child)::after { content:''; position:absolute; right:calc(-1.75 * var(--ps-unit)); top:2px; bottom:2px; width:1px; background:#e1e8f2; }
#reflection .ps-story h3 { display:flex; align-items:center; gap:calc(1.05 * var(--ps-unit)); margin-bottom:calc(.7 * var(--ps-unit)); font-size:clamp(13px,calc(.9 * var(--ps-unit)),20px); line-height:1.6; text-wrap:initial; }
#reflection .ps-story-number { color:#3373df; font-weight:400; font-variant-numeric:tabular-nums; }
#reflection .ps-story h3 i { display:block; width:calc(1.65 * var(--ps-unit)); height:1px; background:#b1c4df; }
#reflection .ps-story h3 strong { font-weight:600; color:#254269; }
#reflection .ps-story p { color:var(--ps-muted); font-size:clamp(13px,calc(.93 * var(--ps-unit)),20px); line-height:1.85; text-wrap:pretty; }
#reflection .ps-pillars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(.95 * var(--ps-unit)); }
#reflection .ps-pillar { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:calc(1.2 * var(--ps-unit)); min-height:calc(12.1 * var(--ps-unit)); min-width:0; padding:calc(1.05 * var(--ps-unit)); border:1px solid #e5edf7; border-radius:12px; background:#ffffffc2; }
#reflection .ps-pillar-icon { display:grid; place-items:center; width:calc(3.6 * var(--ps-unit)); height:calc(3.6 * var(--ps-unit)); color:#1d71ff; border-radius:50%; background:linear-gradient(145deg,#eef4ff,#f4f8ff); }
#reflection .ps-pillar-icon .ps-icon { width:48%; height:48%; }
#reflection .ps-pillar-label { margin:calc(.8 * var(--ps-unit)) 0 calc(.9 * var(--ps-unit)); color:#63799b; font-size:clamp(10px,calc(.72 * var(--ps-unit)),16px); font-weight:500; line-height:1.6; letter-spacing:.04em; }
#reflection .ps-pillar h3 { margin:0; color:#14223e; font-size:clamp(17px,calc(1.27 * var(--ps-unit)),28px); font-weight:600; line-height:1.5; text-wrap:initial; letter-spacing:-.015em; }
#reflection .ps-pillar-copy { margin:calc(.65 * var(--ps-unit)) 0 0; color:#63748e; font-size:clamp(12px,calc(.8 * var(--ps-unit)),18px); line-height:1.8; text-wrap:pretty; }
#reflection .ps-conclusion { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:calc(1.65 * var(--ps-unit)); min-height:calc(9.5 * var(--ps-unit)); padding:calc(1.35 * var(--ps-unit)) calc(1.9 * var(--ps-unit)); margin-top:calc(.95 * var(--ps-unit)); border-radius:12px; background:linear-gradient(105deg,#edf5ff,#f1f7ff 56%,#e8f1ff); }
#reflection .ps-quote { align-self:flex-start; flex-shrink:0; color:#9bc3ff; margin-top:calc(.2 * var(--ps-unit)); font:bold clamp(42px,calc(3.8 * var(--ps-unit)),82px)/1 Georgia,serif; }
#reflection .ps-conclusion > p { position:relative; z-index:1; margin:0; color:#152137; font-size:clamp(22px,calc(1.98 * var(--ps-unit)),43px); font-weight:700; letter-spacing:-.02em; line-height:1.45; }
#reflection .ps-conclusion > p strong { color:#1268ff; font-weight:700; }
#reflection .ps-orbit { position:absolute; z-index:-1; left:58%; top:0; width:27%; height:100%; }
#reflection .ps-orbit-sphere { position:absolute; width:calc(11.3 * var(--ps-unit)); height:calc(10.7 * var(--ps-unit)); border-radius:50%; top:13%; left:17%; background:linear-gradient(145deg,#dceaff,#bdd9ff94 66%,#c3edfc9c); border:1px solid #ffffffdf; }
#reflection .ps-orbit-ring { position:absolute; width:calc(17 * var(--ps-unit)); height:calc(5.6 * var(--ps-unit)); top:61%; left:13%; border:1px solid #8fb1ff; border-radius:50%; transform:rotate(-33deg); }
#reflection .ps-orbit-moon { position:absolute; width:calc(10.8 * var(--ps-unit)); height:calc(10.8 * var(--ps-unit)); left:-7%; top:51%; border-radius:50%; border:1px solid #fff; background:linear-gradient(145deg,#ffffff30,#e9f6ff12); }
#reflection .ps-orbit-ring::after { content:''; position:absolute; top:50%; right:0; transform:translate(50%,-50%); width:calc(.72 * var(--ps-unit)); height:calc(.72 * var(--ps-unit)); background:#347aff; border:1px solid #f1f7ff; border-radius:50%; }
#reflection .ps-conclusion-caption { display:block; position:relative; margin-left:auto; padding:calc(1.4 * var(--ps-unit)) 0 calc(1 * var(--ps-unit)) calc(3.2 * var(--ps-unit)); border-left:1px solid #dce7f5; flex-shrink:0; color:#6882a8; font-size:clamp(8px,calc(.56 * var(--ps-unit)),13px); line-height:1.8; letter-spacing:.11em; }
#reflection .ps-conclusion-caption::before { content:''; display:block; width:calc(1.6 * var(--ps-unit)); height:1px; background:#a6bddd; margin-bottom:calc(.8 * var(--ps-unit)); }
#reflection .ps-principles { display:flex; align-items:center; gap:calc(2.5 * var(--ps-unit)); padding-top:calc(1.3 * var(--ps-unit)); margin-top:calc(.9 * var(--ps-unit)); border-top:1px solid #d8e3f2; }
#reflection .ps-footer-label { flex:0 0 auto; color:#677e9e; font-size:clamp(8px,calc(.57 * var(--ps-unit)),13px); letter-spacing:.11em; line-height:1.8; }
#reflection .ps-principles ul { display:grid; grid-template-columns:1fr 1.16fr 1.24fr; gap:calc(2.2 * var(--ps-unit)); flex:1; min-width:0; }
#reflection .ps-principles li { display:flex; align-items:center; gap:calc(1.65 * var(--ps-unit)); border-left:1px solid #d9e4f3; padding-left:calc(2.7 * var(--ps-unit)); min-width:0; }
#reflection .ps-principle-icon { color:#2175ff; flex:0 0 auto; width:calc(1.6 * var(--ps-unit)); height:calc(1.6 * var(--ps-unit)); }
#reflection .ps-principle-icon .ps-icon { width:100%; height:100%; }
#reflection .ps-principles h3 { color:#3a547b; font-size:clamp(11px,calc(.8 * var(--ps-unit)),18px); font-weight:500; line-height:1.7; text-wrap:initial; }
#reflection .ps-principles li p { color:#61728a; font-size:clamp(11px,calc(.79 * var(--ps-unit)),17px); line-height:1.8; }
#reflection .ps-footer-caption { position:relative; flex:0 0 auto; padding-left:calc(2.6 * var(--ps-unit)); color:#677e9e; font-size:clamp(8px,calc(.54 * var(--ps-unit)),12px); line-height:1.7; letter-spacing:.08em; }
#reflection .ps-footer-caption::before { content:''; position:absolute; top:7px; left:0; width:calc(1.5 * var(--ps-unit)); height:1px; background:#bdcde4; }
@media (max-width:1280px) and (min-width:1101px) {
 #reflection .ps-pillar { gap:12px; padding:16px 12px; }
 #reflection .ps-pillar-icon { width:40px; height:40px; }
 #reflection .ps-pillar h3 { font-size:17px; }
 #reflection .ps-pillar-label { font-size:10px; }
 #reflection .ps-principles { gap:20px; }
 #reflection .ps-principles li { gap:16px; padding-left:20px; }
 #reflection .ps-footer-caption { display:none; }
}
@media (max-width:1100px) {
 #reflection .ps-shell { padding-block:36px 24px; }
 #reflection .ps-content { margin-inline:1.5vw; }
 #reflection .ps-hero { grid-template-columns:1fr; gap:20px; margin-bottom:32px; }
 #reflection h2 { font-size:clamp(32px,4.3vw,48px); }
 #reflection .section-label { margin-bottom:18px; }
 #reflection .ps-annotation { height:116px; max-width:470px; justify-self:end; width:60%; }
 #reflection .ps-handnote { font-size:22px; margin-left:12px; }
 #reflection .ps-handnote svg { width:230px; height:52px; margin-top:-6px; }
 #reflection .ps-side-caption { font-size:9px; margin-bottom:12px; }
 #reflection .ps-story { grid-template-columns:1fr 1fr; gap:26px 44px; margin-bottom:28px; }
 #reflection .ps-story > li:not(:last-child)::after { right:-22px; }
 #reflection .ps-story > li:nth-child(2)::after { display:none; }
 #reflection .ps-story h3 { gap:16px; margin-bottom:10px; font-size:15px; }
 #reflection .ps-story h3 i { width:26px; }
 #reflection .ps-story p { font-size:14px; }
 #reflection .ps-pillars { grid-template-columns:1fr 1fr; gap:14px; }
 #reflection .ps-pillar { min-height:190px; padding:22px; gap:20px; }
 #reflection .ps-pillar-icon { width:54px; height:54px; }
 #reflection .ps-pillar-label { margin:6px 0 13px; font-size:11px; }
 #reflection .ps-pillar h3 { font-size:22px; }
 #reflection .ps-pillar-copy { margin-top:12px; font-size:13px; }
 #reflection .ps-conclusion { min-height:180px; margin-top:18px; padding:28px 25px; gap:20px; }
 #reflection .ps-conclusion > p { font-size:clamp(23px,2.65vw,29px); }
 #reflection .ps-conclusion-caption { font-size:8px; padding-left:20px; }
 #reflection .ps-orbit { opacity:.6; left:63%; }
 #reflection .ps-principles { flex-wrap:wrap; gap:18px; padding-top:20px; margin-top:18px; }
 #reflection .ps-footer-label { width:100%; font-size:10px; }
 #reflection .ps-footer-label br { display:none; }
 #reflection .ps-principles ul { flex-basis:100%; grid-template-columns:1fr 1fr 1.1fr; gap:20px; }
 #reflection .ps-principles li { gap:15px; padding-left:18px; }
 #reflection .ps-principles li:first-child { border:0; padding-left:0; }
 #reflection .ps-principle-icon { width:25px; height:25px; }
 #reflection .ps-principles h3 { font-size:12px; }
 #reflection .ps-principles li p { font-size:12px; }
 #reflection .ps-footer-caption { display:none; }
}
@media (max-width:720px) {
 #reflection .ps-shell { width:90%; padding-block:30px 26px; }
 #reflection .ps-content { margin:0; }
 #reflection .section-label { font-size:10px; margin-bottom:16px; }
 #reflection h2 { font-size:clamp(22px,6.1vw,39px); line-height:1.5; }
 #reflection .ps-title-break { display:initial; }
 #reflection .ps-hero { gap:22px; margin-bottom:28px; }
 #reflection .ps-annotation { width:100%; max-width:360px; height:130px; }
 #reflection .ps-handnote { font-size:clamp(17px,4.2vw,23px); margin-left:8px; }
 #reflection .ps-handnote > span:nth-child(2) { margin-left:28px; }
 #reflection .ps-handnote svg { width:200px; height:46px; margin-left:18px; }
 #reflection .ps-side-caption { font-size:8px; }
 #reflection .ps-story { grid-template-columns:1fr; gap:22px; margin-bottom:26px; }
 #reflection .ps-story > li:not(:last-child)::after { display:none; }
 #reflection .ps-story h3 { font-size:15px; margin-bottom:8px; }
 #reflection .ps-story p { font-size:14px; }
 #reflection .ps-pillars { grid-template-columns:1fr; gap:12px; }
 #reflection .ps-pillar { min-height:0; padding:20px; gap:22px; }
 #reflection .ps-pillar-icon { width:50px; height:50px; }
 #reflection .ps-pillar-label { margin:3px 0 10px; }
 #reflection .ps-pillar h3 { font-size:21px; }
 #reflection .ps-pillar-copy { margin-top:10px; font-size:13px; }
 #reflection .ps-conclusion { display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; min-height:0; padding:24px 20px 36px; }
 #reflection .ps-quote { font-size:43px; }
 #reflection .ps-conclusion > p { font-size:clamp(20px,4.4vw,27px); line-height:1.6; }
 #reflection .ps-conclusion > p br { display:none; }
 #reflection .ps-conclusion > p strong { display:block; margin-top:8px; }
 #reflection .ps-conclusion-caption { grid-column:2; justify-self:start; border-left:0; padding:14px 0 0; margin:0; font-size:8px; letter-spacing:.1em; }
 #reflection .ps-conclusion-caption br { display:none; }
 #reflection .ps-conclusion-caption::before { width:25px; margin-bottom:8px; }
 #reflection .ps-orbit { left:auto; right:-35px; top:auto; bottom:-24px; width:190px; height:115px; opacity:.5; }
 #reflection .ps-orbit-sphere { width:130px; height:125px; top:12px; left:20px; }
 #reflection .ps-orbit-ring { width:195px; height:65px; top:75px; left:-10px; }
 #reflection .ps-orbit-moon { width:110px; height:110px; top:75px; left:-30px; }
 #reflection .ps-orbit-ring::after { width:7px; height:7px; }
 #reflection .ps-principles { gap:16px; }
 #reflection .ps-principles ul { grid-template-columns:1fr; gap:18px; }
 #reflection .ps-principles li { border:0; padding:0; gap:20px; }
 #reflection .ps-principle-icon { width:27px; height:27px; }
 #reflection .ps-principles h3 { font-size:13px; }
 #reflection .ps-principles li p { font-size:13px; }
}
@media (max-width:370px) {
 #reflection h2 { font-size:21px; }
 #reflection .ps-handnote { font-size:16px; margin-left:0; }
 #reflection .ps-handnote svg { width:175px; }
 #reflection .ps-side-caption { font-size:7px; }
 #reflection .ps-pillar { padding:18px 16px; gap:16px; }
 #reflection .ps-pillar-icon { width:42px; height:42px; }
 #reflection .ps-pillar h3 { font-size:19px; }
 #reflection .ps-conclusion { padding:22px 15px 28px; gap:8px; }
 #reflection .ps-conclusion > p { font-size:19px; }
}