@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Lato:wght@300;400&family=Inter+Tight:wght@300;400;500&family=Inter:wght@100;200;300;400;500&family=Manrope:wght@200;300;400;500&display=swap');
:root{--paper:#f0ede5;--ink:#202523;--line:#20252333;--body:'Inter',Arial,sans-serif;--display:'Inter Tight','Helvetica Neue',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:60px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--body)}body[data-type=b]{--display:'Inter','Helvetica Neue',Arial,sans-serif}body[data-type=c]{--display:'Manrope','Helvetica Neue',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #7b4937;outline-offset:5px}img{display:block;max-width:100%}.review{height:54px;position:sticky;top:0;z-index:100;background:#202523;color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;font-size:12px}.type-controls{display:flex;gap:4px}.review button{background:transparent;border:1px solid transparent;color:#ddd;padding:7px 12px;font-size:12px}.review button[aria-pressed=true]{border-color:#ddd;color:white}.review>a{border-bottom:1px solid #fff6}.skip{position:fixed;left:10px;top:-100px;z-index:120;background:white;padding:15px}.skip:focus{top:60px}.opening{height:calc(100svh - 54px);min-height:480px;position:relative;color:white;background:#202523;overflow:hidden}.opening video,.shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shade{background:linear-gradient(#0002,transparent 35%,#0006)}.opening-logo{position:absolute;width:clamp(270px,30vw,440px);top:50%;left:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 12px #0008)}.opening-bottom{position:absolute;bottom:28px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.opening-bottom a{padding:12px 0;border-bottom:1px solid #fffa}.opening-bottom a span{margin-left:28px}.opening-bottom button{border:1px solid #fff7;background:#0002;color:white;padding:10px 15px}.story{position:relative}.stage{position:sticky;top:54px;height:calc(100svh - 54px);min-height:600px}.stage-header{display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;position:absolute;top:0;width:100%;z-index:3;font-size:12px;background:var(--paper)}.stage-header img{width:170px}.model-wrap{position:absolute;left:0;top:86px;bottom:58px;width:57%;overflow:hidden}#model-canvas{width:100%;height:100%;display:block;touch-action:pan-y}.model-meta,.model-bottom{position:absolute;left:4vw;right:2vw;display:flex;justify-content:space-between;gap:15px;font-size:12px;pointer-events:none}.model-meta{top:18px}.model-bottom{bottom:12px;color:#5b605b}.progress{display:flex;gap:5px;align-items:center}.progress i{width:18px;height:2px;background:#20252326}.progress i.on{background:var(--ink)}#webgl-error{display:none;position:absolute;top:45%;padding:32px;background:var(--paper);font-size:16px}.chapter-nav{position:absolute;bottom:0;left:0;width:57%;height:58px;display:flex;gap:24px;align-items:center;padding:0 4vw;border-top:1px solid var(--line);font-size:14px;z-index:8}.chapter-nav a:hover{text-decoration:underline}.chapters{position:relative;margin-top:calc(-100svh + 54px);pointer-events:none}.chapter{min-height:calc(100svh - 54px);padding:115px 4vw 65px 61%;display:flex;align-items:center;scroll-margin-top:0}.chapter-content{width:100%;pointer-events:auto}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin:0 0 20px;color:#62665f}h1,h2{font-family:var(--display);font-weight:400;font-size:clamp(42px,4.1vw,74px);line-height:1.04;letter-spacing:-.055em;margin:0 0 24px}body[data-type=b] h1,body[data-type=b] h2{font-weight:500;letter-spacing:-.045em}body[data-type=c] h1,body[data-type=c] h2{letter-spacing:-.035em}.copy{max-width:33em;margin:0 0 30px;font-size:16px;line-height:1.6}.chapter figure{margin:0}.chapter figure img{width:100%;max-height:38svh;object-fit:contain;object-position:left center}.chapter figure.portrait img,.chapter .portrait img{max-height:44svh;width:auto}.chapter figcaption{font-size:12px;color:#62665f;margin-top:10px}.outline{border:1px solid var(--ink);background:transparent;padding:10px 18px;font-size:14px;margin:0 0 24px}.outline[aria-pressed=true]{background:var(--ink);color:var(--paper)}.next{padding:100px 8vw;border-top:1px solid var(--line)}.next h2{font-size:clamp(48px,7vw,108px)}.next>a,.image-review>a{display:inline-block;border-bottom:1px solid;padding-bottom:8px}.image-review{background:#e4e0d7;padding:80px 4vw}.review-heading{max-width:650px}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 20px}.image-grid button{padding:8px;border:1px solid #20252333;background:transparent;text-align:left}.image-grid button[aria-pressed=true]{border:2px solid var(--ink);padding:7px}.image-grid img{height:240px;width:100%;object-fit:contain}.image-grid span{display:block;font-size:14px;margin:16px 4px 8px}.selection{font-size:14px}.review-note{max-width:650px;color:#575d56;margin-top:60px;font-size:14px}@media(max-width:800px){.review{height:auto;min-height:76px;flex-wrap:wrap;gap:2px;padding:8px 12px}.review>span{display:none}.type-controls{width:100%;justify-content:space-between}.review button{font-size:11px;padding:6px}.review>a{font-size:12px;margin-left:auto}.opening{height:calc(100svh - 76px)}.opening-logo{width:76%;max-width:380px}.opening-bottom{left:24px;right:24px;gap:12px}.opening-bottom>span{display:none}.stage{top:76px;height:calc(100svh - 76px);min-height:0;background:var(--paper)}.stage-header{padding:14px 20px}.stage-header img{width:125px}.stage-header>span{font-size:10px}.model-wrap{width:100%;top:64px;bottom:45%;height:auto}.model-meta{top:3px;left:20px;right:20px}.model-bottom{left:20px;right:20px;font-size:10px;bottom:4px}.chapter-nav{width:100%;bottom:0;height:44px;padding:0 20px;gap:20px;font-size:12px;background:var(--paper)}.chapters{margin-top:calc(-100svh + 76px)}.chapter{min-height:calc(115svh - 76px);padding:calc(55svh - 20px) 24px 70px;align-items:start}.chapter-content{background:var(--paper);padding-top:18px}.chapter .eyebrow{margin-bottom:10px}h1,h2{font-size:40px;margin-bottom:14px}.copy{font-size:16px;margin-bottom:20px}.chapter figure img{max-height:26svh;width:100%;object-position:left}.chapter .portrait img{max-height:30svh}.next{padding:65px 24px}.image-grid{grid-template-columns:1fr}.image-grid img{height:auto;max-height:340px}.image-review{padding:55px 24px}html{scroll-padding-top:76px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Refined architectural type study: lighter weights, quieter spacing, no serif. */
h1,h2{font-weight:300;letter-spacing:-.035em;line-height:1.08}body[data-type=b] h1,body[data-type=b] h2{font-weight:300;letter-spacing:-.04em}body[data-type=c] h1,body[data-type=c] h2{font-weight:300;letter-spacing:-.045em}.eyebrow{letter-spacing:.14em}.copy{line-height:1.65}

/* Direction A follows the logo descriptor, not the heavier wordmark. */
body[data-type=a]{--display:Lato,Arial,sans-serif;--body:Lato,Arial,sans-serif}body[data-type=a] h1,body[data-type=a] h2{font-weight:400;font-size:clamp(30px,3vw,52px);text-transform:uppercase;letter-spacing:.12em;line-height:1.3}body[data-type=a] .eyebrow,body[data-type=a] .chapter-nav{font-weight:400;text-transform:uppercase;letter-spacing:.12em}body[data-type=a] .copy{font-weight:400;font-size:17px;letter-spacing:.01em;line-height:1.65}body[data-type=a] .next h2{font-size:clamp(36px,5vw,76px)}@media(max-width:800px){body[data-type=a] h1,body[data-type=a] h2{font-size:30px;letter-spacing:.09em}body[data-type=a] .chapter-nav{letter-spacing:.04em}}

/* Open Sans reference: MWWORKS About declares weight 300 body/nav, 400 headings. Larger sizes here preserve readability in the project story. */
body[data-type=d]{--body:"Open Sans",Arial,sans-serif;--display:"Open Sans",Arial,sans-serif}body[data-type=d] h1,body[data-type=d] h2{font-size:clamp(27px,2.6vw,44px);font-weight:400;letter-spacing:.05em;line-height:1.35;text-transform:none}body[data-type=d] .copy{font-size:16px;font-weight:300;letter-spacing:.01em;line-height:1.8}body[data-type=d] .eyebrow{font-weight:400;letter-spacing:.05em;text-transform:lowercase}body[data-type=d] .chapter-nav{font-weight:300;letter-spacing:.05em;text-transform:lowercase}body[data-type=d] .next h2{font-size:clamp(32px,4vw,58px)}@media(max-width:800px){.type-controls{flex-wrap:wrap;justify-content:flex-start}.review{position:relative}.stage{top:0}.opening{height:calc(100svh - 95px)}body[data-type=d] h1,body[data-type=d] h2{font-size:28px}}

/* B/C refinement: smaller light titles and neutral tracking. */
body[data-type=b] h1,body[data-type=b] h2,body[data-type=c] h1,body[data-type=c] h2{font-size:clamp(26px,2.35vw,36px);font-weight:300;letter-spacing:.015em;line-height:1.4;margin-bottom:22px}body[data-type=b] .next h2,body[data-type=c] .next h2{font-size:clamp(30px,3vw,46px)}body[data-type=b] .copy,body[data-type=c] .copy{font-weight:300;line-height:1.75;letter-spacing:.005em}body[data-type=b] .chapter-nav,body[data-type=c] .chapter-nav{font-weight:300;letter-spacing:.04em}body[data-type=b] .eyebrow,body[data-type=c] .eyebrow{letter-spacing:.1em;font-weight:400}body[data-type=c]{--body:Manrope,Arial,sans-serif}@media(max-width:800px){body[data-type=b] h1,body[data-type=b] h2,body[data-type=c] h1,body[data-type=c] h2{font-size:27px;line-height:1.35}}

/* Paul: thinner uppercase B/C, compact leading. */
body[data-type=b] h1,body[data-type=b] h2{font-weight:100}body[data-type=c] h1,body[data-type=c] h2{font-weight:200}body[data-type=b] h1,body[data-type=b] h2,body[data-type=c] h1,body[data-type=c] h2{text-transform:uppercase;line-height:1.08;letter-spacing:.015em}body[data-type=b] .copy,body[data-type=c] .copy{text-transform:uppercase;font-weight:200;font-size:16px;line-height:1.3;letter-spacing:.015em}body[data-type=b] .chapter-nav,body[data-type=c] .chapter-nav{text-transform:uppercase;font-weight:200;letter-spacing:.03em}body[data-type=b] .eyebrow,body[data-type=c] .eyebrow{font-weight:200;letter-spacing:.07em}body[data-type=b] .chapter figcaption,body[data-type=c] .chapter figcaption{text-transform:uppercase;font-weight:200;line-height:1.25}@media(max-width:800px){body[data-type=b] h1,body[data-type=b] h2,body[data-type=c] h1,body[data-type=c] h2{line-height:1.08}}

/* Smaller B/C type; leading midway between 1.40 and 1.08. */
body[data-type=b] h1,body[data-type=b] h2,body[data-type=c] h1,body[data-type=c] h2{font-size:clamp(21px,1.85vw,28px);line-height:1.24}body[data-type=b] #form h1,body[data-type=c] #form h1{white-space:nowrap;font-size:clamp(20px,1.7vw,26px);letter-spacing:.015em}body[data-type=b] .copy,body[data-type=c] .copy{font-size:15px;line-height:1.52}body[data-type=b] .next h2,body[data-type=c] .next h2{font-size:clamp(25px,2.4vw,36px);line-height:1.24}@media(max-width:800px){body[data-type=b] h1,body[data-type=b] h2,body[data-type=c] h1,body[data-type=c] h2{font-size:23px;line-height:1.24}body[data-type=b] #form h1,body[data-type=c] #form h1{font-size:clamp(18px,5.1vw,24px)}body[data-type=b] .copy,body[data-type=c] .copy{font-size:15px;line-height:1.52}}

/* Manrope readability refinement: light titles, regular sentence-case body. */
body[data-type=c] h1,body[data-type=c] h2{font-weight:300}body[data-type=c] .copy{font-weight:400;text-transform:none;font-size:16px;letter-spacing:0;line-height:1.52}body[data-type=c] .chapter figcaption{font-weight:400;text-transform:none;letter-spacing:0;line-height:1.4}body[data-type=c] .eyebrow,body[data-type=c] .chapter-nav{font-weight:400}

/* Body-only comparison: intermediate weight and shorter measure; titles unchanged. */
body[data-type=c] .copy{font-weight:300;text-transform:none;font-size:16px;max-width:32ch;letter-spacing:0;line-height:1.52}

/* Title case comparison; approved body unchanged. */
body[data-type=c] h1,body[data-type=c] h2{text-transform:none}

/* Exact midpoint of Study 10 and Study 03 title sizes; Study 10 treatment retained. */
body[data-type=c] h1,body[data-type=c] h2{font-size:calc((clamp(21px,1.85vw,28px) + clamp(42px,4.1vw,74px))/2)}body[data-type=c] #form h1{font-size:calc((clamp(20px,1.7vw,26px) + clamp(42px,4.1vw,74px))/2);white-space:normal}body[data-type=c] .next h2{font-size:calc((clamp(25px,2.4vw,36px) + clamp(48px,7vw,108px))/2)}@media(max-width:800px){body[data-type=c] h1,body[data-type=c] h2{font-size:31.5px}body[data-type=c] #form h1{font-size:calc((clamp(18px,5.1vw,24px) + 40px)/2)}}

/* Architectural concepts lead; supporting phrases are subordinate. */
body[data-type=c] .chapter .chapter-key{font-size:clamp(32px,3.2vw,52px);font-weight:300;line-height:1.15;letter-spacing:.015em;margin:0 0 12px;text-transform:uppercase;transition:opacity .35s ease,transform .35s ease;opacity:.55;transform:translateY(7px)}body[data-type=c] .chapter.active .chapter-key{opacity:1;transform:translateY(0)}.chapter-subtitle{font:300 18px/1.4 Manrope,Arial,sans-serif;margin:0 0 20px;color:#555b55}.chapter-number{margin-bottom:14px}.chapter-nav a{position:relative;padding:12px 0;transition:opacity .25s ease;opacity:.48}.chapter-nav a[aria-current=step]{opacity:1}.chapter-nav a[aria-current=step]:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:currentColor}.chapter-nav{gap:clamp(12px,1.7vw,24px)}@media(max-width:800px){body[data-type=c] .chapter .chapter-key{font-size:34px}.chapter-subtitle{font-size:17px}.chapter-nav{gap:16px}}@media(prefers-reduced-motion:reduce){body[data-type=c] .chapter .chapter-key{transition:none;transform:none}.chapter-nav a{transition:none}}

/* One numbered concept per chapter; supporting phrase alongside. */
#model-label{display:none}.model-meta{justify-content:flex-end}.chapter-heading{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:10px;margin:0 0 38px}.concept{display:flex;align-items:baseline;gap:12px;flex-shrink:0}.concept .chapter-number{font-size:12px;font-weight:400;color:#62665f;margin:0;letter-spacing:.03em}body[data-type=c] .chapter .chapter-key{font-size:clamp(30px,2.7vw,44px);margin:0;line-height:1.1;transform:scale(.96);transform-origin:left center;transition:transform .4s ease,opacity .4s ease}body[data-type=c] .chapter.active .chapter-key{transform:scale(1.025);opacity:1}.chapter-heading .chapter-subtitle{flex:1 1 120px;font-size:14px;font-weight:200;line-height:1.4;max-width:150px;margin:0;color:#555b55}#form .chapter-heading{margin-top:30px}#form .chapter-heading .chapter-key{font-size:clamp(28px,2.7vw,40px)}@media(max-width:800px){.chapter-heading{column-gap:20px;margin-bottom:30px}.chapter-heading .chapter-subtitle{font-size:14px;flex-basis:110px;max-width:140px}body[data-type=c] .chapter .chapter-key{font-size:30px}.concept{gap:8px}}@media(prefers-reduced-motion:reduce){body[data-type=c] .chapter .chapter-key,body[data-type=c] .chapter.active .chapter-key{transform:none;transition:none}}

/* Translucent scrolling panels keep the architectural model visible on compact screens. */
@media(max-width:800px){.chapter-content{background:rgba(240,237,229,.68)}.chapter-heading,.chapter .copy,.chapter figcaption{text-shadow:0 1px 3px rgba(240,237,229,.85)}}