/* Vantage gold/dark/cream. Native fonts only; no external font or asset requests. */
:root{--gold:#f5c518;--dark:#0a0a0f;--raised:#1c1c24;--cream:#f3efe4;--muted:#b8b8c2;--ink:#17171c;--rule:#c9c4b7;--surface:var(--cream);--text:var(--ink);--secondary:#57534c;--line:var(--rule);font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--surface);font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--text)}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #987500;outline-offset:5px}body[data-hero=stage] :focus-visible,body[data-hero=mosaic] :focus-visible,body[data-hero=control] :focus-visible,body[data-hero=stack] :focus-visible,body[data-hero=panorama] :focus-visible{outline-color:var(--gold)}h1:focus,h2:focus{outline:none}h1,h2,h3,p,figure{margin:0}p{line-height:1.65}p+p{margin-top:18px}h1,h2,h3{font-weight:500;letter-spacing:-.045em;overflow-wrap:break-word}h1{font-size:clamp(40px,4.6vw,72px);line-height:1.07}h2{font-size:clamp(27px,2.7vw,42px);line-height:1.15}h3{font-size:24px;line-height:1.2}ul,ol{padding-left:24px;line-height:1.6}li+li{margin-top:12px}img,svg{max-width:100%}input,textarea,select{max-width:100%}button{min-height:44px}main{min-height:65vh}section,article,header,aside,nav,div{min-width:0}section[id],h2[id],form{scroll-margin-top:32px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;z-index:100;left:16px;top:8px;padding:16px;background:var(--gold);color:var(--dark);transform:translateY(-160%)}.skip-link:focus{transform:none}
.review-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 24px;background:#20202a;color:#fff;border-bottom:1px solid #555560;font-size:12px;position:relative;z-index:10;letter-spacing:.02em}.review-badge{font-size:10px;letter-spacing:.14em;color:var(--gold)}.review-bar label{display:flex;align-items:center;gap:8px}.review-bar select{background:#30303a;color:#fff;border:1px solid #62626c;border-radius:4px;min-height:38px;padding:5px 24px 5px 8px;max-width:270px}.review-bar button{border:1px solid #62626c;border-radius:4px;background:transparent;color:#fff;padding:6px 12px;font-size:12px;min-height:38px}.review-bar :focus-visible{outline-color:var(--gold)}.review-status{font-size:11px;color:#d0d0d7}.review-bar #concept{min-width:220px}
.site-header{max-width:1440px;padding:28px 5%;margin:auto;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;font-size:25px;letter-spacing:-.06em;flex-shrink:0}.brand img{width:30px;height:32px}.primary-nav{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}.primary-nav a{font-size:13px;text-decoration:none;min-height:44px;display:flex;align-items:center}.primary-nav a[aria-current=page]{box-shadow:inset 0 -2px var(--gold)}.site-header>.text-link{font-size:12px;border-left:1px solid var(--line);padding-left:22px}.menu-button{display:none}.hero{max-width:1440px;margin:auto;padding:100px 5% 88px;display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;position:relative;isolation:isolate}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);margin-bottom:26px;max-width:70ch}.hero-deck{max-width:52ch;color:var(--secondary);font-size:18px;margin-top:26px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;padding:14px 23px;border-radius:3px;line-height:1.3;text-decoration:none;font-size:14px}.primary{background:var(--gold);color:var(--dark);border-color:var(--gold)}.secondary{background:transparent;border-color:var(--line);color:var(--text)}.text-button{border:0;border-bottom:1px solid currentColor;background:transparent;padding:8px 0;font-size:14px}.text-link{display:inline-block;min-height:36px;line-height:1.5}.artwork{--art-paper:#e4dfd1;--art-plane:#292933;--art-line:#78766e;--art-dot:#928e82;overflow:hidden;align-self:stretch;display:flex;align-items:center;min-height:260px}.artwork svg{width:100%;height:auto;display:block;overflow:visible}.artwork .paper{fill:var(--art-paper);stroke:none}.artwork .plane{fill:var(--art-plane);stroke:none}.artwork .gold{fill:var(--gold);stroke:none}.artwork .outline{stroke:var(--art-line);stroke-width:2;fill:none}.artwork .ink-line{stroke:var(--art-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.artwork .fine-line{stroke:var(--art-line);stroke-width:1;opacity:.38;fill:none}.artwork .accent-stroke{stroke:var(--gold);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}.artwork .dot{fill:var(--art-dot)}.artwork .contour{stroke:var(--art-line);stroke-width:1.5;fill:none}.artwork .type-stroke{stroke:var(--text);stroke-width:28;fill:none}.small-art{min-height:160px}.small-art svg{max-height:420px}.composition{max-width:1440px;padding:0 5%;margin:auto}.section-sequence{list-style:none;margin:0;padding:0}.content-section{position:relative;display:grid;grid-template-columns:56px 1fr;gap:24px;padding:88px 0;border-top:1px solid var(--line)}.section-number{font-size:12px;letter-spacing:.05em;color:var(--secondary);padding-top:8px}.copy{max-width:74ch}.copy h2{margin-bottom:24px;max-width:23ch}.copy p{color:var(--secondary);max-width:67ch}.copy li{color:var(--secondary)}.related{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:26px}.record-link{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left;text-decoration:none;padding:10px 0;font-size:13px;min-height:44px;line-height:1.45;display:inline-flex;align-items:center}.related .button{margin-top:6px}.contents-nav{display:flex;flex-direction:column;gap:12px;padding:32px 0;border-top:1px solid var(--line)}.contents-nav a{font-size:12px;line-height:1.55;text-decoration:none;min-height:32px}.content-section .artwork{grid-column:3}.spread,.scene,.feature,.vignette,.chapter,.focus,.district,.inset,.layer,.notebook,.foldout{grid-template-columns:40px 1fr 1fr;align-items:center;gap:32px}.spread .copy,.scene .copy,.feature .copy,.vignette .copy,.chapter .copy,.focus .copy,.district .copy{max-width:none}.scene:nth-child(even),.vignette:nth-child(even),.district:nth-child(even){grid-template-columns:1fr 1fr 40px}.scene:nth-child(even) .artwork,.vignette:nth-child(even) .artwork,.district:nth-child(even) .artwork{grid-column:1;grid-row:1}.scene:nth-child(even) .section-number,.vignette:nth-child(even) .section-number,.district:nth-child(even) .section-number{grid-column:3;grid-row:1}.scene:nth-child(even) .copy,.vignette:nth-child(even) .copy,.district:nth-child(even) .copy{grid-column:2;grid-row:1}.notes .copy,.reading .copy,.essay .copy{max-width:72ch}.ribbon{grid-template-columns:80px 1fr}.ribbon .copy{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;max-width:none}.ribbon .copy h2{grid-row:span 3}.ribbon .related{grid-column:2}.definition{padding:72px 48px;background:var(--dark);color:var(--cream);--secondary:#b8b8c2;--line:#494951}.definition .copy{max-width:100%}.definition h2{max-width:32ch}.principles .copy{max-width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px 48px}.principles .copy h2{grid-column:1/-1}.principles .related{grid-column:1/-1}.feature,.inset{margin:20px 0;padding:72px 36px;background:var(--dark);color:var(--cream);--secondary:#b8b8c2;--line:#494951}.feature .artwork,.inset .artwork{--art-paper:#dfdbc9;--art-line:#969491}.closing-inquiry{max-width:1280px;margin:60px auto 0;padding:100px 5%;border-top:1px solid var(--line);text-align:center}.closing-inquiry>p{font-size:clamp(30px,4vw,52px);line-height:1.2;letter-spacing:-.04em;max-width:24ch;margin:0 auto 30px}.faq-section{max-width:1120px;padding:60px 5%;margin:auto}.faq-section>h2{margin-bottom:30px}.faq-section details{border-top:1px solid var(--line);padding:20px 0}.faq-section summary{font-size:18px;line-height:1.5;cursor:pointer;min-height:44px}.faq-section details p{max-width:75ch;margin-top:20px;color:var(--secondary)}.faq-section .record-link{margin-right:20px}.family-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.family-entry{padding:24px 0;border-top:1px solid var(--line)}.family-entry .index-mark{font-size:11px;display:block;color:var(--secondary);margin-bottom:14px}.family-title{font-size:19px;text-align:left;line-height:1.3;letter-spacing:-.03em;background:none;border:0;padding:0}.family-entry p{color:var(--secondary);font-size:14px;margin-top:16px}.hero-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 24px}.legend-button{padding:8px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font-size:13px}.catalogue{max-width:1280px;padding:80px 5%;margin:auto}.catalogue-intro{font-size:19px;max-width:70ch;margin-bottom:32px}.search-label{display:block;font-size:13px;color:var(--secondary)}.search-label input{display:block;margin-top:12px;width:100%;padding:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:0}.result-status{font-size:12px;margin:20px 0;color:var(--secondary)}.catalogue-results{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}.catalogue-record{padding:26px 0;border-top:1px solid var(--line)}.catalogue-record h3{margin-bottom:18px}.catalogue-record p{font-size:15px;color:var(--secondary)}.catalogue-record .record-link{margin-top:20px}.boundary{font-size:13px;border-left:3px solid var(--gold);padding-left:16px;color:var(--secondary)}.site-footer{padding:64px 5% 100px;background:var(--dark);color:var(--cream);--line:#44444e;--secondary:#b8b8c2;border-top:1px solid #41414b}.footer-statement{font-size:clamp(28px,3.6vw,48px);letter-spacing:-.04em;line-height:1.25;max-width:26ch}.site-footer>p+p{font-size:12px;color:var(--muted)}.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:960px;margin:64px 0}.footer-nav h2{font-size:15px;letter-spacing:0;margin-bottom:16px}.footer-nav a{display:block;font-size:14px;color:var(--muted);margin:8px 0}.footer-controls{display:flex;flex-wrap:wrap;gap:24px}.footer-controls button{color:var(--cream)}.support-trigger{position:fixed;right:24px;bottom:20px;z-index:12;border:1px solid #76746c;border-radius:32px;background:var(--dark);color:var(--cream);padding:13px 22px;font-size:13px;box-shadow:0 5px 20px #0002}.detail-page{max-width:1200px;margin:auto;padding:60px 5% 90px}.detail-page>h1{max-width:22ch;margin-top:25px}.detail-page>.eyebrow{margin-top:32px}.detail-page .composition{padding:0}.detail-page .hero-deck{margin-bottom:48px}.detail-copy{max-width:70ch;margin:36px 0}.detail-boundary{margin:32px 0}.checklist{max-width:70ch;border-top:1px solid var(--line);padding-top:28px}.detail-page .content-section{grid-template-columns:40px 1fr}.detail-page .content-section .artwork{display:none}.detail-page .composition:not(.composition-path) .section-sequence,.detail-page .briefing-wall,.detail-page .content-cabinet,.detail-page .blueprint-lanes,.detail-page .library-shelves{display:block}
/* 01 Editorial spread: asymmetric cover, marginal contents, article + full-bleed interruptions. */
body[data-hero=cover] .hero{grid-template-columns:7fr 4fr;gap:8%;padding-bottom:100px}body[data-hero=cover] h1{font-size:clamp(42px,4.4vw,68px)}body[data-hero=cover] .hero-copy{border-bottom:8px solid var(--gold);padding-bottom:38px}body[data-hero=cover] .artwork{border-left:1px solid var(--line)}.composition-cover{display:grid;grid-template-columns:190px 1fr;gap:54px}.composition-cover .contents-nav{align-self:start;position:sticky;top:24px}.composition-cover .spread{grid-template-columns:32px 1fr}.composition-cover .spread .artwork{grid-column:2}.composition-cover .ruled{border-block:3px double var(--line);padding-block:56px}
/* 02 Centered stage, then large cinematic scenes. */
body[data-hero=stage],body[data-hero=mosaic],body[data-hero=control],body[data-hero=stack],body[data-hero=panorama]{--surface:var(--dark);--text:var(--cream);--secondary:#b8b8c2;--line:#3b3b44}.hero-stage{display:flex;flex-direction:column;text-align:center;gap:70px;padding-top:130px}.hero-stage .hero-copy{max-width:960px}.hero-stage .eyebrow,.hero-stage .hero-deck{margin-left:auto;margin-right:auto}.hero-stage .actions{justify-content:center}.hero-stage .artwork{width:100%;max-height:500px}.hero-stage .artwork svg{height:500px}.composition-stage .scene{padding-block:110px}.composition-stage .scene .artwork{border:1px solid var(--line);padding:24px}.composition-stage .inset{background:var(--cream);color:var(--dark);--secondary:#57534c;--line:var(--rule)}.composition-stage .closing{text-align:center;display:block;padding:130px 10%}.composition-stage .closing .section-number{display:block;margin-bottom:24px}.composition-stage .closing .copy{margin:auto}.composition-stage .closing h2{margin-inline:auto}.composition-stage .closing .related{justify-content:center}
/* 03 Lateral atlas: the map and legend remain separate from the relationship reading. */
.hero-map{grid-template-columns:4fr 8fr;gap:32px}.hero-map h1{font-size:clamp(38px,3.5vw,56px)}.hero-map .artwork{border-bottom:1px solid var(--line);min-height:450px}.composition-map{display:grid;grid-template-columns:250px 1fr;gap:64px}.composition-map .contents-nav{position:sticky;top:24px;align-self:start}.composition-map .territory{padding-left:28px;border-left:1px solid var(--line)}.composition-map .territory .section-number{border:1px solid var(--line);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;padding:0}.composition-map .lanes .copy{display:grid;grid-template-columns:1fr 1fr;gap:24px}.composition-map .lanes h2,.composition-map .lanes .related{grid-column:1/-1}.composition-map .evidence{background:var(--dark);color:var(--cream);--secondary:#b8b8c2;padding:60px 28px}
/* 04 Identity mosaic: a tiled graphic over alternating typographic ribbons. */
.hero-mosaic{align-items:end;grid-template-columns:5fr 7fr}.hero-mosaic .artwork{min-height:450px}.hero-mosaic .hero-legend{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}.composition-mosaic .ribbon:nth-child(even){padding-left:10%}.composition-mosaic .spread{background:var(--cream);color:var(--dark);--secondary:#57534c;--line:var(--rule);padding:80px 40px}.composition-mosaic .columns .copy{columns:2;column-gap:60px;max-width:none}.composition-mosaic .columns h2,.composition-mosaic .columns .related{column-span:all}.composition-mosaic .definition{border-top:5px solid var(--gold)}
/* 05 Ledger: a row-based document, not card tiles. */
.hero-ledger{grid-template-columns:4fr 8fr;align-items:start}.hero-ledger h1{font-size:clamp(38px,3.5vw,54px)}.hero-ledger .artwork{margin-top:0}.composition-ledger{padding-bottom:80px}.composition-ledger .record{display:block;padding:0;border-top:1px solid var(--line)}.record summary{display:flex;align-items:center;gap:40px;padding:28px 20px;cursor:pointer;list-style:none}.record summary::after{content:'+';font-size:24px;margin-left:auto}.record details[open] summary::after{content:'−'}.record summary h2{font-size:28px;max-width:28ch}.record details[open]{background:#e8e3d7}.record-body{max-width:80ch;padding:20px 80px}.record details>.related{padding:0 80px 36px}.record .section-number{padding:0;font-variant-numeric:tabular-nums}
/* 06 Signal field: dispersed marks narrow to one explanatory figure. */
.hero-field{grid-template-columns:5fr 7fr;padding-left:9%;padding-top:130px}.hero-field .artwork{margin-left:-60px;z-index:-1}.hero-field h1{font-size:clamp(42px,4.7vw,74px)}.composition-field .focus{max-width:1100px;margin:auto;border-top:0;padding-top:20px}.composition-field .ribbon:nth-child(2){padding-left:8%}.composition-field .ribbon:nth-child(3){padding-left:17%}.composition-field .notes{max-width:850px;margin:auto;padding-block:120px}
/* 07 Blueprint: three lanes, drafting rules and specification notes. */
.hero-blueprint{grid-template-columns:8fr 4fr}.hero-blueprint .hero-copy{grid-column:2;grid-row:1}.hero-blueprint .artwork{grid-column:1;grid-row:1}.hero-blueprint h1{font-size:clamp(36px,3.4vw,52px)}.composition-blueprint .contents-nav{flex-direction:row;flex-wrap:wrap;gap:24px}.composition-blueprint .contents-nav a{max-width:210px}.blueprint-lanes{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.blueprint-lanes .content-section{display:block;border-left:1px solid var(--line);padding:40px 24px}.blueprint-lanes .section-number{display:block;margin-bottom:30px}.blueprint-lanes h2{font-size:26px}.blueprint-lanes .copy p{font-size:15px}.composition-blueprint .notes{border-top:4px double var(--line)}
/* 08 Journal: scene chapters, unequal page spreads and a reading desk. */
.hero-journal{grid-template-columns:4fr 8fr;gap:30px}.hero-journal h1{font-size:clamp(40px,3.7vw,58px)}.hero-journal .artwork{min-height:430px}.chapter-tabs{grid-column:2;display:flex;gap:12px;align-items:stretch}.chapter-tab{flex:1;border:0;border-bottom:2px solid var(--line);background:none;text-align:left;font-size:12px;padding:10px;line-height:1.5}.chapter-tab[aria-pressed=true]{border-color:#977500;background:#e7e0cb}.journal-caption{grid-column:2;font-size:14px;max-width:60ch;color:var(--secondary)}.composition-journal .chapter{padding-block:100px;grid-template-columns:32px 5fr 7fr}.composition-journal .bridge{padding:44px 8%;background:#e6e0d2}.composition-journal .bridge .copy{max-width:100%}.composition-journal .reading{margin-left:25%;padding-block:100px}
/* 09 Product window: a low-aligned deck and readable alternating close-ups. */
.hero-window{background:var(--dark);color:var(--cream);--secondary:#b8b8c2;--line:#44444e;grid-template-columns:5fr 7fr;align-items:stretch;padding-top:90px}.hero-window .hero-copy{display:flex;flex-direction:column}.hero-window .hero-deck{margin-top:auto;padding-top:50px}.hero-window h1{font-size:clamp(40px,3.9vw,60px)}.hero-window .artwork{min-height:490px}.composition-window .vignette{padding-block:100px}.composition-window .vignette .artwork{background:#e4dfd3;padding:16px}.composition-window .principles{border-block:1px solid var(--line);padding-block:64px}
/* 10 Type is the centerpiece; sections change scale instead of repeating pictures. */
.hero-type{display:block;padding:130px 7%;position:relative}.hero-type h1{font-size:clamp(56px,8.4vw,128px);max-width:12ch;line-height:.99;letter-spacing:-.075em}.hero-type .hero-deck{margin-left:auto;max-width:43ch}.hero-type .actions{justify-content:flex-end}.hero-type .artwork{position:absolute;right:7%;top:40px;width:25%;opacity:.08;z-index:-1}.composition-type .poster{display:block;padding:110px 0}.composition-type .poster .copy{max-width:100%}.composition-type .poster h2{font-size:clamp(42px,6vw,88px);max-width:19ch;line-height:1.03}.composition-type .poster p{margin-left:30%;margin-top:24px}.composition-type .poster .related{margin-left:30%}.composition-type .essay{margin-left:25%}.composition-type .inset{max-width:1000px;margin:70px auto}.composition-type .definition{padding-block:100px}
/* 11 Briefing wall: simultaneous panes followed by wider reading strips. */
.hero-control{display:block;padding-top:70px}.hero-control .hero-copy{max-width:860px}.hero-control h1{font-size:clamp(40px,4vw,60px)}.hero-control .hero-deck{max-width:65ch}.hero-control .artwork{max-height:540px;margin-top:50px}.hero-control .artwork svg{max-height:540px}.illustration-note{font-size:12px;color:var(--secondary);padding-top:12px}.briefing-wall{display:grid;grid-template-columns:3fr 5fr 3fr;gap:20px;align-items:start}.briefing-wall .content-section{display:block;padding:30px 22px;background:#191921;border:1px solid var(--line)}.briefing-wall .content-section:nth-child(2){background:var(--cream);color:var(--dark);--secondary:#57534c;--line:var(--rule)}.briefing-wall .section-number{display:block;margin-bottom:20px}.briefing-wall h2{font-size:25px}.briefing-wall p{font-size:14px}.composition-control .decision{padding:80px 6%;border-bottom:1px solid var(--line)}.composition-control .notes{max-width:900px;margin:auto}
/* 12 Continuous vertical path with checkpoints. */
.hero-path{grid-template-columns:5fr 7fr;align-items:start}.hero-path .artwork{min-height:550px}.composition-path{display:grid;grid-template-columns:220px 1fr;gap:60px}.composition-path .contents-nav{align-self:start;position:sticky;top:24px}.composition-path .section-sequence{border-left:2px solid #b89623;padding-left:36px}.composition-path .checkpoint{grid-template-columns:40px 1fr;padding-block:72px;border-top:0;border-bottom:1px solid var(--line);margin:0}.checkpoint .section-number{width:38px;height:38px;border:1px solid var(--line);background:var(--cream);border-radius:50%;display:grid;place-items:center;padding:0;margin-left:-57px}.checkpoint .copy{grid-column:2;margin-left:-35px}
/* 13 Human advisory: conversation prompts and a two-leaf agenda. */
.hero-table{padding-top:115px;gap:80px}.hero-table .artwork{background:#e8e1d3;border-radius:50% 50% 3px 3px}.composition-table .question{margin-left:5%;margin-right:15%;padding-block:56px}.composition-table .question:nth-child(even){margin-left:18%;margin-right:5%}.composition-table .question h2{font-size:34px}.composition-table .notebook{background:var(--dark);color:var(--cream);--secondary:#b8b8c2;padding:64px 40px;gap:42px}.composition-table .essay{max-width:860px;margin:auto}.composition-table .reading{border-top:4px double var(--line)}
/* 14 Library: masthead, subject directory, two shelves, long-form reading. */
.hero-library{display:block;padding-block:75px}.hero-library .hero-copy{max-width:1000px}.hero-library h1{max-width:19ch;font-size:clamp(40px,4.7vw,72px)}.hero-library .family-list{margin-top:65px;grid-template-columns:repeat(6,1fr);gap:22px}.hero-library .family-title{font-size:16px}.hero-library .family-entry p{font-size:13px}.composition-library .contents-nav{flex-direction:row;flex-wrap:wrap;gap:18px 30px}.composition-library .contents-nav a{max-width:210px}.library-shelves{display:grid;grid-template-columns:1fr 1fr;gap:64px}.library-shelves .content-section{display:block}.library-shelves .section-number{display:block;margin-bottom:22px}.composition-library .glossary{padding-block:70px;border-top:4px double var(--line)}
/* 15 Exploded stack: hierarchy continues through offset layered sections. */
.hero-stack{grid-template-columns:4fr 8fr;align-items:center}.hero-stack h1{font-size:clamp(40px,3.4vw,54px)}.hero-stack .artwork{min-height:540px}.composition-stack .layer{background:#17171f;margin-bottom:24px;border:1px solid var(--line);padding:64px 36px;grid-template-columns:30px 1fr 1fr}.composition-stack .layer:nth-child(2){margin-left:7%;background:var(--cream);color:var(--dark);--secondary:#57534c;--line:var(--rule)}.composition-stack .layer:nth-child(3){margin-left:14%;border-style:dashed}.composition-stack .columns .copy{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;max-width:none}.composition-stack .columns h2{grid-column:1/-1}.composition-stack .notes{max-width:900px;margin:auto}
/* 16 Bound dossier: contents rail, folios and a dark catalogue foldout. */
.hero-dossier{grid-template-columns:7fr 5fr;border-left:70px solid var(--dark);padding-left:5%}.hero-dossier .hero-copy{border-left:5px solid var(--gold);padding-left:30px}.composition-dossier{display:grid;grid-template-columns:210px 1fr;gap:75px}.composition-dossier .contents-nav{align-self:start;position:sticky;top:24px}.composition-dossier .folio{padding:90px 0;border-top:0;border-bottom:1px solid var(--line)}.composition-dossier .folio h2{max-width:22ch}.composition-dossier .foldout{margin-left:-20px;margin-right:-20px;background:var(--dark);color:var(--cream);--secondary:#b8b8c2;padding:48px 25px;grid-template-columns:30px 1fr}.composition-dossier .foldout .artwork{grid-column:2;max-height:260px}.composition-dossier .glossary{padding-block:70px}
/* 17 Content cabinet: one unequal grid, then full-width narrative. */
.hero-bento{grid-template-columns:5fr 7fr;align-items:center}.hero-bento h1{font-size:clamp(40px,4vw,62px)}.content-cabinet{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.content-cabinet .cabinet{grid-column:span 5;display:block;padding:40px;background:#e4decf;border:0;border-radius:8px}.content-cabinet .cabinet:first-child{grid-column:span 7;grid-row:span 2;background:var(--dark);color:var(--cream);--secondary:#b8b8c2;--line:#494951}.content-cabinet .cabinet:nth-child(3){background:#eae6dc}.content-cabinet .section-number{display:block;margin-bottom:32px}.content-cabinet h2{font-size:32px}.content-cabinet .cabinet:first-child h2{font-size:42px}.composition-bento>.section-sequence>.spread{margin-top:60px}
/* 18 Optional selector leads, but never gates the complete directory. */
.hero-selector{grid-template-columns:5fr 6fr;gap:90px}.hero-selector h1{font-size:clamp(40px,3.8vw,60px)}.guided-selector{background:var(--dark);color:var(--cream);padding:40px;border-radius:6px;--secondary:#b8b8c2;--line:#494951}.guided-selector fieldset{border:0;padding:0;margin:0 0 22px}.guided-selector legend{font-size:21px;letter-spacing:-.03em;margin-bottom:22px}.choice{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;padding:12px 0}.choice input{accent-color:var(--gold);width:20px;height:20px;flex-shrink:0;margin:0}.guided-selector>.text-link{display:block;margin-top:20px;font-size:13px}.selector-result:not(:empty){margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}.selector-result h2{font-size:25px}.selector-result p{font-size:14px;margin-block:18px}.composition-selector .result{padding-left:10%;border-left:4px solid var(--gold)}.composition-selector .directory .copy{max-width:100%}.composition-selector .bridge{background:#e5dfd0;padding:50px}.composition-selector .worksheet{margin-left:12%;max-width:950px}
/* 19 A continuous landscape, normal vertical chapters, independently art-directed crops. */
.hero-panorama{display:block;padding-top:80px;padding-bottom:0;overflow:hidden}.hero-panorama .hero-copy{max-width:900px}.hero-panorama .artwork{width:100%;max-height:420px;margin-top:65px}.hero-panorama .artwork svg{width:100%;max-height:460px}.composition-panorama .district{padding:100px 0;border-top:0}.composition-panorama .district:nth-child(even){background:var(--cream);color:var(--dark);--secondary:#57534c;--line:var(--rule);padding:80px 40px}.composition-panorama .district .artwork{min-height:300px}.composition-panorama .directory{border-top:1px solid var(--line)}
/* 20 Restrained typography, very few graphical elements and reading width. */
.hero-quiet{grid-template-columns:9fr 3fr;padding:155px 12% 125px;gap:70px}.hero-quiet h1{font-size:clamp(38px,4vw,60px);font-weight:400;max-width:17ch;line-height:1.13;letter-spacing:-.035em}.hero-quiet .hero-deck{font-size:17px}.hero-quiet .artwork{min-height:220px}.hero-quiet .eyebrow{font-size:10px}.composition-quiet{max-width:1100px;padding:0 9%}.composition-quiet .principle{display:block;padding:110px 0}.composition-quiet .section-number{display:block;margin-bottom:28px}.composition-quiet .principle .copy{max-width:66ch}.composition-quiet .plain{padding-block:65px}.composition-quiet .inset{padding:60px 32px;grid-template-columns:1fr}.composition-quiet .inset .section-number{display:none}.composition-quiet .inset .artwork{grid-column:1;max-height:230px}.composition-quiet .essay{padding-block:120px}
/* Local interactions, dialogs, validation; inquiry data never leaves the form. */
dialog{color:var(--dark);background:var(--cream);border:1px solid #777264;border-radius:8px;padding:28px;max-width:760px;width:calc(100% - 40px);max-height:85dvh;overflow:auto;box-shadow:0 18px 90px #0005;--text:var(--dark);--secondary:#57534c;--line:var(--rule)}dialog::backdrop{background:#07070bb8}.dialog-top{display:flex;gap:25px;align-items:start;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:20px;margin-bottom:24px}.dialog-top h2{font-size:28px;max-width:22ch}.dialog-top button{background:transparent;border:1px solid #aaa497;padding:8px 15px;border-radius:4px}.dialog-top button:focus-visible,dialog :focus-visible{outline-color:#987500!important}#dialog-body p{margin:16px 0;color:#4f4c45}#dialog-body h3{margin-top:26px}#dialog-body .button{margin:8px 12px 8px 0}.dialog-links,.dialog-link{display:block}.dialog-link{padding:18px 0;border-bottom:1px solid var(--rule)}.dialog-links .record-link{display:flex}.contact-preview{max-width:900px;margin:40px auto 80px;padding:50px 5%;background:var(--cream);color:var(--dark);--secondary:#57534c;--line:var(--rule)}.contact-preview>p{margin-top:20px}.contact-preview h2{margin-bottom:22px}.contact-preview form{margin-top:35px}.field{margin:24px 0}.field label{display:block;font-size:14px;font-weight:600;margin-bottom:10px}.field input:not([type=checkbox]),.field textarea,.field select{display:block;width:100%;border:1px solid #aaa497;background:#fffcf4;color:var(--dark);border-radius:3px;padding:13px;min-height:48px}.field textarea{min-height:155px;resize:vertical}.field-help{font-size:12px;color:#57534c;margin-top:8px}.field-error{font-size:13px;color:#a12222;margin-top:8px;min-height:0}.field input[aria-invalid=true],.field textarea[aria-invalid=true],.field select[aria-invalid=true]{border:2px solid #a12222}.field-ack{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}.field-ack input{order:-1;width:22px;height:22px;margin:0;accent-color:#987500;flex-shrink:0}.field-ack label{flex:1;line-height:1.5}.field-ack .field-error{flex-basis:100%}.field-ack .field-help{display:none}.form-status{margin-top:30px;border-top:1px solid var(--rule);padding-top:20px}.form-status h3{margin-bottom:12px}.context-note{font-size:13px;border-left:3px solid var(--gold);padding-left:15px}
/* Complexity changes only decorative density, never hides copy or scope boundaries. */
body[data-complexity=essential] .extra-art,body[data-complexity=essential] .content-section .artwork{display:none}body[data-complexity=essential] .content-section{grid-template-columns:40px 1fr}body[data-complexity=essential] .content-section .copy{grid-column:auto;grid-row:auto}body[data-complexity=essential] .content-section .section-number{grid-column:1;grid-row:1}body[data-complexity=rich] .artwork .fine-line{opacity:.7}body[data-complexity=rich] .artwork .outline{stroke-width:2.5}body[data-complexity=balanced] .extra-art{opacity:.35}
body[data-motion=subtle] .hero .artwork svg,body[data-motion=expressive] .hero .artwork svg{animation:breathe 7s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 50%}body[data-motion=expressive] .hero .artwork svg{animation:float-art 8s ease-in-out infinite;animation-play-state:paused}body[data-playing=true] .hero .artwork svg{animation-play-state:running}body[data-motion=off] .hero .artwork svg{animation:none}body[data-motion=subtle] .button,body[data-motion=subtle] .record-link,body[data-motion=expressive] .button,body[data-motion=expressive] .record-link{transition:background-color .18s,color .18s,border-color .18s}@keyframes breathe{0%,100%{opacity:1}50%{opacity:.8}}@keyframes float-art{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:1700px){.site-header,.hero,.composition{max-width:1540px}.hero{padding-block:120px}.site-header{padding-block:32px}}
@media(max-width:1100px){.site-header{gap:20px}.primary-nav{gap:14px}.primary-nav a{font-size:12px}.site-header>.text-link{display:none}.hero{gap:32px;padding-top:75px;padding-bottom:65px}.hero-stage{padding-top:100px}.hero-copy h1{font-size:clamp(38px,5vw,60px)}.hero-type h1{font-size:clamp(64px,9vw,104px)}.composition-cover,.composition-map,.composition-dossier,.composition-path{grid-template-columns:170px 1fr;gap:30px}.content-section{padding-block:64px}.hero-library .family-list{grid-template-columns:repeat(3,1fr)}.briefing-wall{grid-template-columns:1fr 1fr}.briefing-wall .content-section:first-child{grid-column:1/-1}.hero-selector{gap:36px}.guided-selector{padding:26px}.composition-journal .reading,.composition-type .essay{margin-left:12%}.hero-quiet{padding:110px 8%}.catalogue-results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.review-bar{padding:10px 16px;gap:8px 12px}.review-badge{flex-basis:100%}.review-bar label:first-of-type{flex:1}.review-bar #concept{min-width:0;max-width:100%;width:100%}.review-status{flex-basis:100%}.site-header{padding:18px 5%;flex-wrap:wrap;gap:16px}.brand{font-size:23px}.menu-button{display:block;margin-left:auto;background:transparent;border:1px solid var(--line);padding:8px 14px;font-size:12px}.primary-nav{display:none;order:3;flex-basis:100%;margin:0;grid-template-columns:repeat(4,1fr);gap:8px}.primary-nav.is-open{display:grid}.primary-nav a{font-size:14px}.hero{grid-template-columns:1fr!important;padding:64px 6%;gap:36px;text-align:left;display:grid}.hero .hero-copy,.hero .artwork{grid-column:auto!important;grid-row:auto!important}.hero-copy{max-width:800px}.hero .hero-copy h1{font-size:clamp(38px,6.2vw,54px);max-width:22ch}.hero .hero-deck{font-size:17px;max-width:60ch;padding-top:0;margin:25px 0 0}.hero .eyebrow{margin:0 0 22px}.hero .actions{justify-content:flex-start}.hero .artwork{min-height:200px;max-height:390px;margin:0;border:0;position:static;width:100%;opacity:1}.hero .artwork svg{height:auto;max-height:390px}.hero-type .artwork{display:none}.hero-type .hero-copy h1{font-size:clamp(55px,9vw,85px);max-width:14ch}.hero-stage .artwork{max-height:400px}.hero .hero-legend{grid-column:auto}.hero-journal .chapter-tabs,.hero-journal .journal-caption{grid-column:1}.hero-journal .chapter-tabs{flex-wrap:wrap}.hero-journal .chapter-tab{min-width:150px}.hero-library .family-list{grid-template-columns:repeat(3,1fr);margin-top:10px}.hero-dossier{border-left:20px solid var(--dark)}.hero-quiet .artwork{width:40%;max-height:200px;justify-self:end}.composition{padding-inline:6%}.composition-cover,.composition-map,.composition-dossier,.composition-path{display:block}.composition .contents-nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 22px;padding:24px 0}.contents-nav a{max-width:230px}.content-section{grid-template-columns:30px 1fr!important;gap:20px;padding-block:56px}.content-section .copy{grid-column:2!important;grid-row:auto!important;max-width:100%}.content-section .section-number{grid-column:1!important;grid-row:1!important}.content-section .artwork{grid-column:2!important;grid-row:auto!important;max-height:300px}.content-section h2{font-size:32px}.content-section .copy p{font-size:16px}.ribbon .copy,.principles .copy,.composition-map .lanes .copy,.composition-stack .columns .copy{display:block}.ribbon .copy p,.principles .copy p{margin-top:18px}.related{gap:8px 16px}.feature,.inset,.composition-mosaic .spread,.composition-table .notebook,.composition-panorama .district:nth-child(even),.composition-selector .bridge{padding:40px 24px;margin-inline:0}.composition-mosaic .columns .copy{columns:auto}.composition-field .ribbon:nth-child(2),.composition-field .ribbon:nth-child(3),.composition-journal .reading,.composition-type .essay,.composition-selector .worksheet{padding-left:0;margin-left:0}.composition-type .poster{display:block}.composition-type .poster h2{font-size:48px}.composition-type .poster p,.composition-type .poster .related{margin-left:0}.composition-quiet .principle{display:block}.composition-quiet .inset .copy,.composition-quiet .inset .artwork{grid-column:1!important}.blueprint-lanes{grid-template-columns:1fr}.blueprint-lanes .content-section{border-left:0;padding:40px 0;display:grid}.library-shelves{gap:32px}.library-shelves .content-section{display:block}.briefing-wall{display:block}.briefing-wall .content-section{display:block;margin-bottom:18px;padding:28px}.content-cabinet{grid-template-columns:1fr 1fr}.content-cabinet .cabinet{grid-column:auto!important;grid-row:auto!important;padding:30px;display:block}.content-cabinet .cabinet:first-child{grid-column:1/-1!important}.content-cabinet .cabinet h2{font-size:30px!important}.composition-stack .layer:nth-child(2){margin-left:3%}.composition-stack .layer:nth-child(3){margin-left:6%}.composition-table .question,.composition-table .question:nth-child(even){margin:0}.composition-path .section-sequence{margin-left:18px;padding-left:30px}.checkpoint .section-number{margin-left:-49px}.checkpoint .copy{margin-left:-30px}.composition-ledger .record{display:block}.record summary{gap:20px;padding:22px 0}.record summary h2{font-size:25px}.record-body{padding:15px 25px}.record details>.related{padding:0 25px 28px}.catalogue{padding:55px 6%}.detail-page{padding:45px 6%}.detail-page .composition .contents-nav{display:flex}.site-footer{padding:55px 6% 110px}.footer-nav{gap:22px}.footer-nav h2{font-size:14px}.support-trigger{right:14px;bottom:14px;font-size:12px;padding:11px 16px}.contact-preview{margin:30px 6%;padding:35px 24px}.closing-inquiry{padding:65px 6%}.closing-inquiry>p{font-size:38px}.hero-control .illustration-note{margin-top:-25px}}
@media(max-width:520px){.review-bar{gap:7px 10px}.review-bar label:first-of-type{flex-basis:100%}.review-bar label{font-size:11px}.review-bar select{font-size:12px;min-height:44px}.review-bar button{font-size:11px;min-height:44px}.review-bar #concept{max-width:none}.review-status{line-height:1.5}.primary-nav.is-open{grid-template-columns:1fr 1fr}.hero{padding-top:50px;padding-bottom:50px}.hero .hero-copy h1{font-size:40px}.hero-type .hero-copy h1{font-size:56px}.hero-quiet .hero-copy h1{font-size:38px}.hero .hero-deck{font-size:16px}.hero .artwork{min-height:180px}.hero-quiet .artwork{display:none}.hero-dossier{border-left-width:12px}.hero-dossier .hero-copy{padding-left:18px}.hero-journal .chapter-tabs{display:grid;grid-template-columns:1fr}.hero-journal .chapter-tab{min-width:0;text-align:left}.hero-library .family-list{grid-template-columns:1fr 1fr}.family-list{grid-template-columns:1fr}.family-entry{padding-block:20px}.hero-library .family-title{font-size:17px}.hero-legend{display:grid;grid-template-columns:1fr 1fr}.hero-map .hero-legend,.hero-mosaic .hero-legend{gap:10px 15px}.legend-button{font-size:12px;line-height:1.4}.content-section{padding-block:44px;gap:12px;grid-template-columns:22px 1fr!important}.content-section h2{font-size:29px;letter-spacing:-.035em}.copy p{line-height:1.7}.content-section .artwork{grid-column:1/-1!important}.content-section .section-number{font-size:10px}.content-section .copy .related{display:flex}.record summary h2{font-size:24px}.record-body{padding:12px 18px}.record details>.related{padding-inline:18px}.composition .contents-nav{display:block}.contents-nav a{display:block;max-width:none;margin-bottom:12px;min-height:36px}.composition-type .poster h2{font-size:41px}.composition-type .poster{padding-block:65px}.composition-type .poster p{font-size:16px}.composition-quiet .principle,.composition-quiet .essay{padding-block:65px}.composition-path .section-sequence{margin-left:12px;padding-left:24px}.checkpoint .section-number{margin-left:-43px;width:34px;height:34px}.checkpoint .copy{margin-left:-22px}.composition-stack .layer{padding:35px 20px}.composition-stack .layer:nth-child(2),.composition-stack .layer:nth-child(3){margin-left:0}.library-shelves,.content-cabinet{display:block}.content-cabinet .cabinet{margin-bottom:20px;padding:28px}.library-shelves .content-section{padding-block:42px}.catalogue-results{grid-template-columns:1fr}.catalogue-record{padding-block:20px}.footer-nav{grid-template-columns:1fr;gap:30px;margin-block:40px}.footer-controls{gap:12px 24px}.footer-statement{font-size:33px}.closing-inquiry>p{font-size:32px}.guided-selector{padding:28px 20px}.guided-selector .choice{padding-block:13px}.guided-selector .button{width:100%}.contact-preview{padding:28px 18px;margin-inline:5%}.contact-preview .actions>*{width:100%}.dialog-top{gap:16px}.dialog-top h2{font-size:24px}dialog{padding:20px;width:calc(100% - 24px);max-height:90dvh}#dialog-body .button{width:100%;margin-inline:0}.hero .actions{gap:12px}.button{padding:13px 18px}.related .button{width:100%}.faq-section summary{font-size:17px}.hero-panorama .artwork{min-height:160px;max-height:230px}.detail-page>h1{font-size:38px}.detail-page .content-section .copy{grid-column:2!important}.detail-page .composition-path .copy{margin-left:0}.detail-page .composition-path .section-number{margin-left:0}}
