:root{
  --ink:#172033;
  --muted:#5c667a;
  --paper:#f7f6f1;
  --card:#ffffff;
  --line:#d9dbe2;
  --accent:#7a1f5d;
  --accent-2:#e8b84a;
  --good:#1f7a4d;
  --bad:#a23535;
  --radius:20px;
  --shadow:0 18px 45px rgba(30,34,45,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}
a{color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
.site-header{position:sticky;top:0;z-index:20;background:rgba(247,246,241,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{max-width:1180px;margin:auto;padding:14px 24px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.01em}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--ink);color:white;display:grid;place-items:center;font-weight:900}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a,.nav button,.mode-link{border:1px solid var(--line);background:white;border-radius:999px;padding:9px 13px;text-decoration:none;font-weight:700}
.nav a:hover,.nav button:hover,.mode-link:hover{border-color:var(--ink)}
main{max-width:1180px;margin:auto;padding:36px 24px 72px}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center;padding:42px 0 34px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:900;color:var(--accent)}
h1{font-size:clamp(2.6rem,7vw,5.7rem);line-height:.95;margin:.16em 0 .18em;letter-spacing:-.045em}
.lead{font-size:1.17rem;color:var(--muted);max-width:700px}
.crap-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crap-tile{min-height:126px;border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;justify-content:space-between;color:white;box-shadow:var(--shadow)}
.crap-tile strong{font-size:2.35rem;line-height:1}
.crap-tile span{font-weight:800}
.crap-tile:nth-child(1){background:#2f477d}.crap-tile:nth-child(2){background:#7a1f5d}.crap-tile:nth-child(3){background:#276d61}.crap-tile:nth-child(4){background:#b25f25}
.section{margin:48px 0 60px;scroll-margin-top:90px}
.section-head{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:start;margin-bottom:20px}
.letter{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:2.7rem;font-weight:900;box-shadow:var(--shadow)}
h2{font-size:clamp(2rem,4vw,3.35rem);line-height:1.05;margin:0 0 8px;letter-spacing:-.03em}
h3{font-size:1.22rem;margin:0 0 8px}
.kicker{font-weight:900;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 9px 24px rgba(30,34,45,.05)}
.card.soft{background:#fbfbf8;box-shadow:none}
.callout{border-left:5px solid var(--accent-2);padding:14px 16px;background:#fff8e5;border-radius:0 14px 14px 0;margin:16px 0}
.keyline{font-size:1.12rem;font-weight:800}
ul.compact{padding-left:20px;margin:10px 0}
ul.compact li{margin:4px 0}
.demo-stage{background:#eef0f4;border-radius:16px;padding:22px;min-height:300px;display:grid;place-items:center;overflow:hidden}
.demo-poster{width:min(100%,430px);background:white;border:1px solid #cfd3db;border-radius:10px;padding:24px;transition:.3s ease;box-shadow:0 14px 30px rgba(30,34,45,.08)}
.demo-poster h4{margin:0 0 9px;font-size:34px;line-height:1}
.demo-poster p{margin:5px 0}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.btn{border:1px solid var(--line);background:white;border-radius:10px;padding:10px 14px;font-weight:800}
.btn.primary{background:var(--ink);color:white;border-color:var(--ink)}
.btn.selected{outline:3px solid var(--accent-2);outline-offset:2px}
.feedback{min-height:28px;margin-top:10px;font-weight:800}
.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}
.challenge{border:2px dashed #bac0cd;background:#fff;border-radius:var(--radius);padding:20px}
.challenge ol{padding-left:20px}
.reflection{width:100%;min-height:86px;border:1px solid #cbd0d9;border-radius:12px;padding:12px;background:white;resize:vertical}
.complete-row{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:800}
.complete-row input{width:20px;height:20px}
.progress-wrap{position:fixed;right:18px;bottom:18px;background:var(--ink);color:white;padding:10px 14px;border-radius:999px;font-weight:800;box-shadow:var(--shadow);z-index:15}
/* contrast */
.contrast-weak h4{font-size:25px;color:#555;font-weight:500}.contrast-weak p{color:#777}
.contrast-strong{background:#141824;color:white}.contrast-strong h4{font-size:42px;font-weight:900;color:#ffd563}.contrast-strong .meta{font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:#cbd2e1}
/* repetition */
.repeat-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.repeat-card{background:white;border-radius:13px;padding:14px;border:1px solid #cbd0d9;min-height:120px}
.repeat-card strong{display:block;font-size:1.25rem;margin-bottom:8px}
.repeat-on .repeat-card{border-top:7px solid var(--accent)}
.repeat-on .repeat-card strong{font-family:Georgia,serif;color:var(--accent)}
.repeat-on .repeat-card .dot{width:12px;height:12px;border-radius:50%;background:var(--accent-2);display:inline-block;margin-right:6px}
/* proximity */
.prox-board{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px;transition:.3s}
.info-chip{background:white;border:1px solid #c8ccd5;border-radius:9px;padding:9px;font-weight:700}
.prox-messy{display:flex;flex-wrap:wrap;gap:28px 7px;transform:rotate(-1deg)}
.prox-grouped .group{background:#fff;border:1px solid #c8ccd5;border-radius:14px;padding:12px}
.prox-grouped .group h5{margin:0 0 8px;color:var(--accent);font-size:1rem}
.prox-grouped .info-chip{margin:5px 0;border:0;background:#f4f5f7;font-weight:600}
/* alignment */
.align-demo{width:min(100%,470px);background:white;border-radius:12px;padding:26px;position:relative;min-height:250px;border:1px solid #c9ced8}
.align-demo .guide{position:absolute;top:16px;bottom:16px;width:2px;background:#e63e67;opacity:0;transition:.2s}
.align-demo.show-guide .guide{opacity:.45}.align-demo.left .guide{left:26px}.align-demo.center .guide{left:50%}.align-demo.right .guide{right:26px}
.align-item{margin:10px 0}.align-demo.left{text-align:left}.align-demo.center{text-align:center}.align-demo.right{text-align:right}.align-demo.messy .align-item:nth-child(1){text-align:left}.align-demo.messy .align-item:nth-child(2){text-align:right}.align-demo.messy .align-item:nth-child(3){text-align:center}.align-demo.messy .align-item:nth-child(4){margin-left:17%}
.overview-quiz{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.principle-choice{min-height:84px}
footer{border-top:1px solid var(--line);padding:30px 24px 42px;color:var(--muted)}
.footer-inner{max-width:1180px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-inner a{font-weight:800}
/* presentation */
body.presentation{background:#101522;color:white;overflow:hidden}
.presentation .present-shell{height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.present-top{padding:14px 22px;display:flex;justify-content:space-between;align-items:center;background:#151b2b;border-bottom:1px solid #2a3246}
.slide{display:none;padding:6vh 7vw;overflow:auto;align-content:center}
.slide.active{display:grid}
.slide h1,.slide h2{max-width:1000px}
.slide h1{font-size:clamp(3rem,8vw,7rem)}
.slide h2{font-size:clamp(2.5rem,6vw,5.2rem)}
.slide p,.slide li{font-size:clamp(1.15rem,2.3vw,2rem)}
.slide .card{color:var(--ink);font-size:1rem}
.present-bottom{padding:12px 22px;display:flex;justify-content:space-between;align-items:center;background:#151b2b;border-top:1px solid #2a3246}
.present-btn{background:#fff;color:#121725;border:0;border-radius:999px;padding:10px 16px;font-weight:900}
.big-crap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}.big-crap div{border-radius:18px;padding:24px;background:#fff;color:#111;font-size:clamp(1.3rem,2vw,2rem);font-weight:900}
.teacher-note{background:#fff4cb;color:#4c3a00;border-radius:14px;padding:14px 18px;font-weight:800;margin-top:18px}
/* guide */
.guide-table{width:100%;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden}.guide-table th,.guide-table td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}.guide-table th{background:#eceef3}
@media(max-width:800px){.hero,.grid-2{grid-template-columns:1fr}.section-head{grid-template-columns:60px 1fr}.letter{width:56px;height:56px;border-radius:16px;font-size:2rem}.overview-quiz{grid-template-columns:1fr 1fr}.repeat-board{grid-template-columns:1fr}.header-inner{align-items:flex-start}.nav{justify-content:flex-end}.big-crap{grid-template-columns:1fr 1fr}.progress-wrap{font-size:.83rem}.prox-board{grid-template-columns:1fr}}
@media(max-width:520px){main{padding:22px 15px 70px}.hero{padding-top:20px}.header-inner{padding:10px 14px}.brand span:last-child{display:none}.nav a,.nav button,.mode-link{padding:8px 10px;font-size:.85rem}.crap-tile{min-height:105px}.overview-quiz{grid-template-columns:1fr}.progress-wrap{right:10px;bottom:10px}}
/* expanded three-day mini-unit */
.day-section{padding-top:8px}.day-banner{display:flex;align-items:center;gap:20px;background:var(--ink);color:white;border-radius:24px;padding:22px 26px;margin:10px 0 32px;box-shadow:var(--shadow)}.day-banner h2{margin:0 0 5px}.day-banner p{margin:0;color:#d7ddea}.day-number{background:var(--accent-2);color:#251d08;padding:10px 13px;border-radius:12px;font-weight:950;letter-spacing:.08em;white-space:nowrap}.mini-head{margin-top:38px}.example-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.mini-example,.mini-brand{background:white;border:1px solid var(--line);border-radius:16px;padding:18px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 18px rgba(30,34,45,.04)}.mini-example small{display:block;color:var(--muted)}.tiny-label{font-size:.7rem;font-weight:900;letter-spacing:.13em;color:var(--muted)}.light-dark{display:grid;grid-template-columns:1fr 1fr;border-radius:9px;overflow:hidden}.light-dark span,.light-dark strong{padding:10px;text-align:center}.light-dark span{background:#f6f6f6;color:#777}.light-dark strong{background:#161b26;color:white}.shape-row{display:flex;gap:20px;align-items:center}.circle,.square{display:inline-block;width:45px;height:45px;background:var(--accent)}.circle{border-radius:50%}.purple{border-top:7px solid var(--accent)}.purple strong{font-family:Georgia,serif;color:var(--accent);font-size:1.25rem}.purple span{font-weight:800}.canva-steps{display:grid;gap:10px;margin-top:18px}.canva-steps div{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;background:#f5f6f8;border-radius:12px;padding:9px}.canva-steps strong{width:32px;height:32px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center}.alignment-sample{min-height:180px;background:#f3f4f6;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;position:relative}.bad-align span:nth-child(2){align-self:flex-end}.bad-align span:nth-child(3){align-self:center}.bad-align span:nth-child(4){margin-left:18%}.good-align{padding-left:46px}.good-align .align-line{position:absolute;left:30px;top:20px;bottom:20px;width:2px;background:var(--accent)}.prox-compare{min-height:180px;background:#f3f4f6;border-radius:14px;padding:20px}.scattered{display:flex;gap:18px 7px;flex-wrap:wrap;align-content:space-around}.scattered span:nth-child(2){margin-left:20%}.scattered span:nth-child(4){margin-left:15%}.grouped{display:flex;flex-direction:column;gap:28px}.grouped strong{font-size:1.6rem}.grouped div{display:flex;flex-direction:column;gap:4px}.activity-card{border:3px solid #d4b75f;background:#fffdf6;padding:28px}.task-check{display:block;margin:10px 0;font-weight:700}.task-check input{width:18px;height:18px;margin-right:8px}.example-lab{margin-top:18px}.hierarchy-demo{background:#151a25;color:white;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:4px}.hierarchy-demo .h1x{font-size:clamp(2.4rem,5vw,4.3rem);font-weight:950;color:#ffd563;line-height:.95}.hierarchy-demo .h2x{font-size:1.5rem;font-weight:900}.hierarchy-demo .h3x{font-size:1rem}.hierarchy-demo .h4x{font-size:.75rem;color:#aeb6c9;letter-spacing:.12em}.caption{color:var(--muted);font-size:.92rem}.repeat-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.repeat-list span{background:#f1edf4;color:#5d234c;border-radius:999px;padding:8px 12px;font-weight:800}.concept-bridge{background:#eef1f7}.publication-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.publication-demo div{background:white;border-radius:14px;padding:18px;border-top:7px solid var(--accent);display:flex;flex-direction:column;min-height:130px}.publication-demo b{color:var(--muted);font-size:.78rem}.publication-demo strong{font-size:1.5rem;color:var(--accent)}.publication-demo span{margin-top:auto}.whitespace-demo{background:white;border:1px solid var(--line);border-radius:14px;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.ws-group{display:flex;flex-direction:column;gap:2px}.ws-group strong{font-size:.72rem;letter-spacing:.12em;color:var(--accent)}.ws-gap{grid-column:1/-1;height:28px}.final-card{background:#141824;color:white}.final-card .kicker{color:#ffd563}.portfolio-map{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.portfolio-map span{background:#fff;color:#172033;border-radius:12px;padding:14px;font-weight:800}.portfolio-map b{font-size:1.5rem;color:var(--accent);margin-right:5px}
/* presentation additions */
.slide-deck{max-width:none;margin:0;padding:0}.brand-slide-row,.publication-slide{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.brand-slide-row div,.publication-slide div{background:white;color:#172033;border-radius:18px;padding:22px;border-top:8px solid var(--accent);display:flex;flex-direction:column;min-height:140px}.brand-slide-row strong,.publication-slide strong{font-size:clamp(1.5rem,3vw,2.5rem);color:var(--accent)}.alignment-presentation,.proximity-presentation,.contrast-presentation{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}.alignment-presentation>div,.proximity-presentation>div,.contrast-presentation>div{background:white;color:#172033;border-radius:18px;padding:28px;min-height:260px;display:flex;flex-direction:column;gap:14px;position:relative}.ap-bad span:nth-child(2){align-self:flex-end}.ap-bad span:nth-child(3){align-self:center}.ap-bad span:nth-child(4){margin-left:22%}.ap-good{padding-left:48px!important}.ap-good i{position:absolute;left:30px;top:24px;bottom:24px;width:3px;background:var(--accent)}.proximity-presentation>div:first-child{flex-direction:row;flex-wrap:wrap;align-content:space-around;gap:26px 8px}.proximity-presentation>div:last-child strong{color:var(--accent);font-size:.8em}.contrast-presentation .weak strong{font-size:1.5rem;color:#666}.contrast-presentation .weak span{color:#777}.contrast-presentation .strong{background:#121722;color:white}.contrast-presentation .strong strong{font-size:3.7rem;line-height:.9;color:#ffd563}.contrast-presentation .strong span:first-of-type{font-size:1.6rem;font-weight:900}.hierarchy-slide{display:flex;flex-direction:column;background:#121722;border-radius:20px;padding:28px;margin-top:24px}.hierarchy-slide span:nth-child(1){font-size:clamp(3rem,7vw,6rem);font-weight:950;color:#ffd563;line-height:.9}.hierarchy-slide span:nth-child(2){font-size:clamp(1.8rem,3vw,3rem);font-weight:900}.hierarchy-slide span:nth-child(3){font-size:1.4rem}.hierarchy-slide span:nth-child(4){font-size:1rem;color:#aeb6c9}.space-slide{background:white;color:#172033;border-radius:18px;padding:30px;margin-top:26px}.space-slide>div:not(.large-gap){display:flex;flex-direction:column;gap:2px}.space-slide strong{color:var(--accent);font-size:.8rem;letter-spacing:.1em}.large-gap{height:48px}
@media(max-width:800px){.example-strip,.portfolio-map{grid-template-columns:1fr 1fr}.publication-demo{grid-template-columns:1fr}.alignment-presentation,.proximity-presentation,.contrast-presentation{grid-template-columns:1fr}.brand-slide-row,.publication-slide{grid-template-columns:1fr 1fr}.day-banner{align-items:flex-start}.whitespace-demo{grid-template-columns:1fr}}
@media(max-width:520px){.example-strip,.portfolio-map{grid-template-columns:1fr}.day-banner{flex-direction:column}.brand-slide-row,.publication-slide{grid-template-columns:1fr}}