:root{--paper:#fbf7f0;--paper2:#f4ebde;--ink:#1c201f;--muted:#6e6a63;--gold:#bc9451;--gold-light:#eed9b0;--dark:#1b211f;--border:rgba(73,53,29,.13);--ease:cubic-bezier(.2,.8,.2,1);color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bd944d;outline-offset:4px}a{color:inherit}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;flex:none}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);white-space:nowrap;overflow:hidden}
.page-surface{width:100%;height:100svh;min-height:760px;isolation:isolate;position:relative;overflow:hidden;background:var(--paper)}
.topbar{height:77px;display:flex;align-items:center;gap:35px;justify-content:space-between;padding:0 clamp(25px,5.3vw,106px);position:relative;z-index:40;background:rgba(253,249,243,.94);border-bottom:1px solid rgba(77,55,29,.06);box-shadow:0 2px 20px rgba(101,68,37,.025)}
.brand{display:inline-flex;align-items:center;gap:15px;padding:0;background:none;border:0;white-space:nowrap;flex:none}.brand-square{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;background:#182021;color:#e9c784;font-size:14px;font-weight:700;letter-spacing:-.08em}.brand-name{font:500 clamp(18px,1.55vw,25px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.045em}.desktop-nav{display:flex;gap:clamp(10px,2.15vw,36px);margin-left:auto}.desktop-nav button{position:relative;border:0;background:none;padding:14px 0;color:#302c28;font:400 14px Georgia,serif;transition:color .22s}.desktop-nav button:after{position:absolute;content:"";left:0;right:100%;bottom:7px;height:1px;background:var(--gold);transition:right .22s}.desktop-nav button:hover{color:#a67936}.desktop-nav button:hover:after{right:0}.header-actions{display:flex;align-items:center;gap:14px;margin-left:auto}.icon-button{background:#f5eee6;border:1px solid #e8ded1;color:#252726;width:37px;height:37px;border-radius:50%;display:grid;place-items:center}.icon-button svg{width:17px;height:17px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;border:1px solid transparent;border-radius:99px;padding:13px 20px;min-height:45px;font-weight:500;font-size:12px;transition:transform .23s var(--ease),background .23s,box-shadow .23s}.button:hover{transform:translateY(-2px)}.button svg{height:15px;width:15px}.button.dark{background:linear-gradient(135deg,#232927,#161c1b);color:#fff;box-shadow:0 8px 20px rgba(29,27,24,.11)}.button.dark:hover{background:#353a36;box-shadow:0 11px 25px rgba(29,27,24,.15)}.button.small{min-height:38px;padding:10px 18px;font-size:12px}.mobile-menu,.mobile-nav{display:none}
.world-stage{height:calc(100svh - 77px);min-height:683px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 22%,#fbf8f2 10%,#f3e7d5 80%)}
.scene-art{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 49%;z-index:0;pointer-events:none;user-select:none;filter:saturate(.94) contrast(1.015)}
.scene-left-fade{position:absolute;z-index:1;inset:0 auto 0 0;width:47%;pointer-events:none;background:linear-gradient(90deg,rgba(252,248,242,.99) 0%,rgba(252,248,242,.98) 34%,rgba(252,248,242,.92) 60%,rgba(252,248,242,.48) 82%,transparent 100%)}
.scene-right-fade{position:absolute;z-index:1;right:0;top:0;width:20%;height:80%;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(248,243,236,.11) 46%,rgba(248,243,236,.36) 100%)}
.scene-head-fade{position:absolute;z-index:1;inset:0 0 auto;height:14%;pointer-events:none;background:linear-gradient(180deg,rgba(253,249,244,.74),transparent)}
.intro{position:absolute;z-index:9;top:clamp(35px,7.2vh,100px);left:clamp(28px,7.0vw,116px);width:min(420px,32%)}.eyebrow{font-size:9px;line-height:1.8;letter-spacing:.37em;font-weight:650;color:#6d6255;white-space:nowrap}.intro h1{margin:11px 0 4px;height:auto;line-height:1}.signature{display:block;max-width:100%;width:min(420px,100%);height:auto;mix-blend-mode:multiply;filter:contrast(1.08)}.intro h2{font:400 clamp(18px,1.45vw,22px)/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:8px 0 14px}.intro p{max-width:345px;font:400 clamp(14px,1.04vw,16px)/1.57 Georgia,'Times New Roman',serif;color:#38352f;margin:0}.intro-actions{display:flex;align-items:center;gap:12px;margin-top:22px}.round-play{flex:none;display:grid;place-items:center;background:rgba(255,252,247,.95);color:var(--dark);border:1px solid #e5d7c3;width:38px;height:38px;border-radius:50%;box-shadow:0 2px 12px rgba(84,65,36,.06)}.round-play svg{width:13px;height:13px;fill:currentColor;stroke-width:1.3;margin-left:2px}.story-link{background:none;border:0;text-align:left;padding:0;font-size:12px;font-weight:550;white-space:nowrap}.story-link small{display:block;color:#817970;margin-top:3px;font-size:10px;font-weight:400}
.hero-quote{position:absolute;top:clamp(20px,5.0vh,68px);left:56.5%;width:260px;z-index:7;pointer-events:none}.hero-quote blockquote{margin:0;font:italic 17px/1.37 Georgia,serif;color:#3c322a}.quote-by{font-size:8px;font-weight:650;letter-spacing:.28em;color:#70685c;margin-top:13px;display:flex;align-items:center;gap:12px}.quote-by:before{content:"";width:31px;height:1px;background:#987e57}
.districts{position:absolute;inset:0;z-index:8;pointer-events:none}.district{--rx:0px;--ry:0px;position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%);height:51px;display:inline-flex;align-items:center;padding:5px 13px 5px 5px;gap:10px;min-width:186px;max-width:242px;border-radius:99px;border:1px solid #dab576;background:rgba(255,250,242,.97);color:#292823;box-shadow:0 5px 0 rgba(86,61,23,.07),0 7px 19px rgba(54,38,18,.17);backdrop-filter:blur(12px);pointer-events:auto;text-align:left;white-space:nowrap;transition:box-shadow .2s,transform .2s,background .2s;isolation:isolate}.district:hover,.district.active{transform:translate(-50%,-50%) scale(1.055);z-index:8;background:#fffaf2;box-shadow:0 0 0 3px rgba(206,156,73,.23),0 12px 28px rgba(48,34,19,.25)}.district:after{content:"";position:absolute;top:100%;left:50%;height:24px;width:1px;background:linear-gradient(#d2ad65,transparent);pointer-events:none}.district-icon{height:40px;width:40px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 30%,#33362e,#191d1c 70%);border:1px solid #b68e50;box-shadow:0 1px 5px #a1783f88;color:#edd79e;flex:none}.district-icon svg{width:21px;height:21px;stroke-width:1.7}.district-copy{display:flex;flex-direction:column;min-width:0;gap:4px}.district-copy strong{font-size:12px;font-weight:650;letter-spacing:-.035em;overflow:hidden;text-overflow:ellipsis}.district-copy small{font-size:10px;color:#62594e;overflow:hidden;text-overflow:ellipsis}.district-chevron{margin-left:auto;color:#a17d48;font-size:20px;padding-left:2px;line-height:1}
.feature-card{position:absolute;z-index:20;right:clamp(25px,5.1vw,94px);top:clamp(35px,7.0vh,75px);width:clamp(254px,20.6vw,316px);max-height:calc(100% - 181px);overflow:auto;scrollbar-width:thin;padding:20px 20px 21px;border-radius:16px;border:1px solid rgba(211,191,162,.55);background:#fcf7ef;box-shadow:0 16px 52px rgba(50,36,20,.20),0 2px 10px rgba(50,36,20,.065);animation:riseIn .5s var(--ease) backwards}.feature-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.micro-label{background:#f4e5cb;border:1px solid #f0ddbb;border-radius:99px;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;color:#6b542a;font-size:8px;font-weight:750;letter-spacing:.19em}.micro-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c39a48;flex:none}.plain-close{border:0;background:transparent;color:#554a3d;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;transition:background .2s}.plain-close:hover{background:#f3e8d9}.plain-close svg{width:15px;height:15px}.feature-card h2{font:400 28px/1.07 Georgia,serif;letter-spacing:-.045em;margin:0 0 4px}.feature-subtitle{font:400 13px/1.35 Georgia,serif;color:#6b6053;margin:0 0 15px}.feature-image{width:100%;aspect-ratio:1.61;border-radius:10px;overflow:hidden;background:#e6d7c4}.feature-image img{width:100%;height:100%;object-fit:cover;display:block}.feature-description{font:400 12px/1.57 Georgia,serif;color:#544b42;margin:13px 0}.feature-tags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 15px}.feature-tags span{font-size:10px;color:#685e54;background:#f0e9e0;padding:6px 9px;border-radius:99px;line-height:1.1}.feature-action{min-height:42px;font-size:12px;width:100%;justify-content:space-between;padding:11px 15px}.feature-reopen{position:absolute;top:10%;right:40px;z-index:30;display:inline-flex;align-items:center;gap:10px;border:1px solid #dbbb83;background:#fcf7ee;color:#252525;border-radius:30px;padding:13px 16px;box-shadow:0 4px 24px #4b351b24}.feature-reopen[hidden]{display:none}.feature-reopen svg{color:#a87d38}.world-hint{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:120px;display:flex;align-items:center;gap:8px;color:#574f44;background:rgba(255,250,241,.91);border:1px solid rgba(197,167,117,.45);box-shadow:0 3px 12px #61482416;border-radius:40px;padding:10px 16px;font-size:10px;white-space:nowrap}.tiny-sparkle{color:#b88c40;font-size:14px}.hint-separator{color:#ac8f6d}.inline-link{border:0;background:transparent;color:#785420;font-weight:700;font-size:10px;padding:0;display:inline-flex;align-items:center;gap:5px}.inline-link svg{width:14px;height:14px}
.bottom-strip{position:absolute;left:clamp(28px,5.0vw,92px);right:clamp(28px,5.0vw,92px);bottom:clamp(17px,3vh,35px);z-index:20;min-height:91px;display:flex;align-items:stretch;padding:14px 18px;border-radius:14px;background:linear-gradient(115deg,rgba(29,33,32,.94),rgba(22,25,25,.94));border:1px solid rgba(218,194,151,.55);box-shadow:0 17px 40px #2f281b4d;backdrop-filter:blur(16px)}.strip-item{padding:7px 16px;min-width:0;flex:1;display:flex;gap:15px;text-align:left;align-items:center;background:transparent;border:0;border-right:1px solid #ffffff30;color:#efece5;transition:background .25s}.strip-item:hover{background:#ffffff0d}.strip-item>svg{color:#e9cb88;width:27px;height:27px;stroke-width:1.5}.strip-item span{min-width:0;display:flex;flex-direction:column;gap:3px}.strip-item small{font:650 8px Inter,Arial,sans-serif;letter-spacing:.21em;color:#b8afa0}.strip-item strong{font:400 14px Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-item em{font:400 12px Georgia,serif;color:#cdc8bc;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-more{border:0;background:none;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 14px 15px 29px;white-space:nowrap;font-size:11px}.strip-more:hover{color:#f1d199}.strip-more svg{width:16px;height:16px}
/* Content overlays */
.overlay,.search-modal,.explorer-modal{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden}.overlay.open,.search-modal.open,.explorer-modal.open{pointer-events:auto;visibility:visible}.overlay-backdrop,.search-backdrop{position:absolute;inset:0;background:rgba(23,21,17,.56);backdrop-filter:blur(8px);opacity:0;transition:opacity .34s}.overlay.open .overlay-backdrop,.search-modal.open .search-backdrop{opacity:1}.content-sheet{position:absolute;right:clamp(15px,3.4vw,58px);top:clamp(14px,4vh,43px);bottom:clamp(14px,4vh,43px);width:min(910px,calc(100vw - 30px));display:flex;flex-direction:column;overflow:hidden;border-radius:19px;background:#fcf9f4;border:1px solid #eadfcd;box-shadow:0 30px 100px #16140f66;transform:translateX(45px) scale(.985);opacity:0;transition:transform .4s var(--ease),opacity .4s var(--ease)}.overlay.open .content-sheet{transform:none;opacity:1}.sheet-header{height:69px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(26px,5vw,58px);border-bottom:1px solid var(--border)}.sheet-location{display:flex;align-items:center;gap:12px;color:#886b3e;font-size:10px;font-weight:750;letter-spacing:.24em}.sheet-close,.explorer-header button{height:38px;width:38px;border-radius:50%;background:#f1e8dc;border:1px solid #e5d5bd;display:grid;place-items:center;color:#3a332a}.sheet-close svg{width:16px;height:16px}.sheet-body{padding:38px clamp(26px,5vw,62px) 45px;flex:1;overflow-y:auto;scrollbar-color:#c2ae8c transparent;scrollbar-width:thin}.sheet-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px clamp(26px,5vw,58px);border-top:1px solid var(--border);background:#faf4ec;flex:none;font-size:9px;letter-spacing:.2em;color:#9b896e}.text-button{padding:8px 0;background:none;border:0;color:#2b2b27;letter-spacing:0;font-weight:600;font-size:12px}.sheet-kicker{font-size:10px;color:#9e7d48;letter-spacing:.24em;font-weight:750;text-transform:uppercase;margin-bottom:15px}.sheet-title{font:400 clamp(39px,4.7vw,66px)/1.04 Georgia,serif;letter-spacing:-.065em;color:#201f1b;max-width:740px;margin:0 0 18px}.sheet-lead{font:400 clamp(17px,1.7vw,22px)/1.47 Georgia,serif;color:#5e564c;max-width:700px;margin:0 0 32px}.sheet-paragraph{font:400 15px/1.78 Georgia,serif;color:#565048;max-width:750px;margin:12px 0 25px}.section-divider{border:0;border-top:1px solid var(--border);margin:32px 0}.section-label{font-size:10px;font-weight:750;letter-spacing:.22em;color:#927648;text-transform:uppercase;margin:0 0 20px}.section-title{font:400 31px/1.2 Georgia,serif;letter-spacing:-.04em;margin:0 0 17px}.sheet-photo-layout{display:grid;grid-template-columns:1fr 205px;gap:38px;align-items:start}.portrait{width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:center 20%;border-radius:13px;border:1px solid #e7dccc;background:#f4ede4}.profile-facts{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 20px}.fact-chip,.tag{display:inline-flex;border:1px solid #e8dac5;background:#f8efe2;color:#6a5538;border-radius:99px;padding:7px 10px;font-size:11px}.button.ghost{border-color:#d7c3a2;background:transparent;color:#2d2923}.button.ghost:hover{background:#f2e8da}.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:22px 0}.highlight-block{padding:22px 25px;background:#f5ebdc;border-left:3px solid #b28b51;border-radius:0 12px 12px 0;font:italic 19px/1.5 Georgia,serif;color:#493b2c}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.info-tile{border:1px solid #e7d9c6;border-radius:13px;background:#fffcf7;padding:20px}.info-tile small{display:block;font-size:9px;font-weight:750;letter-spacing:.2em;color:#a38658;margin-bottom:9px}.info-tile h3{font:400 19px/1.2 Georgia,serif;margin:0 0 8px}.info-tile p{font-size:12px;line-height:1.65;color:#6d6258;margin:0}.list-stack{display:grid;gap:12px}.entry-card{display:block;width:100%;text-align:left;border:1px solid #e6d9c8;border-radius:14px;background:#fffdf9;padding:22px 22px 19px;color:#24211d;transition:border-color .23s,transform .23s,box-shadow .23s}.entry-card:hover{border-color:#caa971;transform:translateY(-2px);box-shadow:0 7px 23px #85704e18}.entry-header{display:flex;align-items:baseline;justify-content:space-between;gap:15px}.entry-header h3{font:400 22px/1.2 Georgia,serif;letter-spacing:-.025em;margin:0 0 5px}.entry-date{white-space:nowrap;color:#96794d;font-size:11px}.entry-subtitle{font-size:11px;color:#98784a;letter-spacing:.07em;margin:0 0 12px;text-transform:uppercase}.entry-card>p{font:400 13px/1.7 Georgia,serif;color:#61584f;margin:0 0 12px}.entry-cta{font-size:11px;color:#6e512b;font-weight:700}.split-card{display:grid;grid-template-columns:215px 1fr;gap:22px}.split-card>img{width:100%;height:150px;object-fit:cover;border-radius:9px}.bullet-list{margin:0 0 22px;padding-left:19px;color:#65584a;line-height:1.8;font:400 13px Georgia,serif}.bullet-list li{padding-left:4px;margin:3px 0}.stat-row{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 25px}.project-cover{width:100%;max-height:300px;object-fit:cover;display:block;border-radius:13px;margin:16px 0 28px;background:#eee5d8}.detail-bar{display:flex;flex-wrap:wrap;gap:10px 22px;color:#665a4a;font-size:11px;margin:0 0 18px}.detail-bar span{display:flex;align-items:center;gap:8px}.detail-bar b{color:#2e2b25}.method-grid{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 20px}.method-grid span{font-size:12px;color:#594a35;background:#f1e7d8;border:1px solid #e9d9bf;border-radius:8px;padding:10px 12px}.link-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.empty-note{background:#f7f0e5;border-radius:12px;padding:16px;color:#766954;font-size:13px;line-height:1.6}.pub-number{display:inline-flex;width:31px;height:31px;align-items:center;justify-content:center;border:1px solid #e4cfac;border-radius:50%;background:#f4e9d8;color:#9a7338;font:500 12px Georgia,serif;margin-bottom:14px}.footnote{font:12px/1.55 Georgia,serif;color:#91806b}.mini-link{color:#6c491d;text-decoration:underline;text-underline-offset:3px}
/* Search */
.search-box{position:relative;max-width:680px;width:calc(100% - 30px);margin:clamp(40px,12vh,125px) auto 0;background:#fcf8f2;border:1px solid #e7d7bc;border-radius:18px;box-shadow:0 27px 80px #16140f69;padding:24px;opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .3s}.search-modal.open .search-box{opacity:1;transform:none}.search-title{display:flex;align-items:center;justify-content:space-between}.search-title h2{font:400 29px Georgia,serif;margin:0 0 17px}.search-input-wrap{display:flex;align-items:center;gap:13px;padding:14px 18px;background:#fff;border:1px solid #dccdb9;border-radius:10px}.search-input-wrap svg{color:#ac8f5b}.search-input-wrap input{width:100%;background:transparent;border:0;outline:0;font-size:15px}.search-results{max-height:49vh;overflow:auto;margin:15px 0 0}.search-result{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #ecdfcc;padding:14px 9px}.search-result:hover{background:#f8eddf}.search-result strong{display:block;font:400 18px Georgia,serif;margin-bottom:5px}.search-result small{color:#958065;font-size:11px}.search-help{font-size:10px;color:#877865;margin:13px 8px 3px}
/* 3D explorer loaded on demand */
.explorer-modal{z-index:120;display:flex;flex-direction:column;background:#f8f2e9;opacity:0;transition:opacity .3s}.explorer-modal.open{opacity:1}.explorer-header{height:74px;flex:none;background:#fdf9f2;border-bottom:1px solid #e5d6c1;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,60px)}.explorer-header>div{display:flex;flex-direction:column;gap:5px}.explorer-header strong{font:500 17px Georgia,serif;letter-spacing:.12em}.explorer-header span{color:#806c51;font-size:11px}.explorer-canvas-container{flex:1;min-height:0;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#fef8e9,#e2dfd4)}.explorer-canvas-container canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.explorer-canvas-container canvas:active{cursor:grabbing}.explorer-pins{position:absolute;inset:0;pointer-events:none}.explorer-pin{position:absolute;pointer-events:auto;transform:translate(-50%,-100%);background:#fffaf1;border:1px solid #d7b77d;color:#3e3527;border-radius:50px;padding:9px 13px;font-size:11px;font-weight:700;box-shadow:0 3px 15px #5540202b;white-space:nowrap}.explorer-pin:hover{background:#e8cd91}.explorer-bottom{height:63px;flex:none;border-top:1px solid #e4d5c0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,60px);color:#796955;font-size:11px}.explorer-bottom button{border:1px solid #d8be95;background:#fff9f0;padding:10px 17px;border-radius:99px;color:#4c3b22}
@keyframes riseIn{from{transform:translateY(15px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1300px){.topbar{padding:0 34px;gap:20px}.desktop-nav{gap:19px}.intro{left:45px;width:350px}.intro p{font-size:14px}.intro h2{font-size:18px}.hero-quote{left:53%;top:29px;width:210px}.hero-quote blockquote{font-size:14px}.feature-card{right:30px;top:51px;width:268px}.feature-card h2{font-size:25px}.feature-description{font-size:11px}.district{min-width:164px;height:46px;gap:8px;padding-right:9px}.district-icon{width:35px;height:35px}.district-icon svg{width:18px;height:18px}.district-copy strong{font-size:11px}.district-copy small{font-size:9px}.bottom-strip{left:25px;right:25px}.strip-item{gap:9px;padding:6px 9px}.strip-item strong{font-size:12px}.strip-item em{font-size:10px}.strip-item>svg{width:21px;height:21px}}
@media(max-width:1080px){.desktop-nav{display:none}.mobile-menu{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:36px;background:none;border:0;padding:6px}.mobile-menu span{display:block;background:#35291d;height:1.5px;width:22px}.mobile-nav:not([hidden]){display:flex;position:absolute;top:70px;right:20px;left:auto;width:min(300px,calc(100vw - 40px));padding:13px;border-radius:14px;flex-direction:column;background:#fcf8f1;border:1px solid #e8d7c0;box-shadow:0 16px 35px #614d343d}.mobile-nav button{border:0;background:transparent;text-align:left;padding:13px 14px;font:400 17px Georgia,serif;border-radius:8px}.mobile-nav button:hover{background:#efe0ca}.hero-quote{display:none}.intro{top:50px;width:300px}.intro h2{font-size:17px}.intro p{font-size:13px}.feature-card{width:257px;right:20px}.bottom-strip{bottom:20px}.strip-item:nth-child(2){display:none}.world-hint{bottom:116px}}
@media(max-height:805px) and (min-width:761px){.page-surface{min-height:690px}.world-stage{min-height:610px}.intro{top:37px}.intro p{line-height:1.48}.intro-actions{margin-top:13px}.feature-card{top:30px;padding:14px;max-height:calc(100% - 135px)}.feature-top{margin-bottom:9px}.feature-card h2{font-size:24px}.feature-subtitle{margin-bottom:8px}.feature-image{aspect-ratio:1.95}.feature-description{font-size:11px;margin:9px 0}.feature-tags{margin-bottom:8px}.bottom-strip{min-height:79px;padding:10px 15px}.world-hint{bottom:104px}}
@media(max-width:760px){.page-surface{height:100svh;min-height:660px}.topbar{height:65px;padding:0 18px}.brand-name{font-size:19px}.header-actions{gap:9px}.header-actions .button.small{display:none}.icon-button{width:35px;height:35px}.world-stage{height:calc(100svh - 65px);min-height:595px}.scene-art{object-fit:cover;object-position:54% 58%;filter:saturate(.87)}.scene-left-fade{inset:0 0 auto 0;width:100%;height:47%;background:linear-gradient(180deg,#fcf8f1 0%,rgba(252,248,241,.97) 38%,rgba(252,248,241,.55) 73%,transparent 100%)}.scene-right-fade{display:none}.scene-head-fade{height:18%}.intro{left:23px;right:23px;top:20px;width:auto;max-width:380px}.eyebrow{font-size:8px;letter-spacing:.26em}.signature{width:300px;max-width:88%}.intro h1{margin:6px 0 0}.intro h2{font-size:17px;margin:0 0 7px}.intro p{font:400 12px/1.43 Georgia,serif;max-width:300px}.intro-actions{margin-top:10px;gap:9px}.intro-actions .button{min-height:39px;padding:10px 13px;font-size:11px}.round-play{width:35px;height:35px}.story-link{font-size:11px}.story-link small{font-size:9px}.districts{inset:auto 0 6px 0;height:92px;overflow-x:auto;display:flex;gap:9px;align-items:center;padding:5px 18px 10px;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;pointer-events:auto;background:linear-gradient(180deg,transparent,rgba(255,248,236,.9) 48%,rgba(255,248,236,.98))}.districts::-webkit-scrollbar{display:none}.district{position:relative;flex:none;left:auto!important;top:auto!important;transform:none!important;min-width:163px;max-width:180px;height:46px;scroll-snap-align:center}.district:hover,.district.active{transform:translateY(-2px)!important}.district:after{display:none}.district-copy small{font-size:8px}.feature-card{top:auto;bottom:107px;right:13px;left:13px;width:auto;max-height:58svh;padding:16px 18px 16px;box-shadow:0 14px 48px #30241c55}.feature-card:not(.mobile-open){display:none}.feature-card h2{font-size:25px}.feature-image{aspect-ratio:2.55}.feature-description{font-size:11px}.feature-tags span{font-size:9px;padding:5px 7px}.feature-reopen{display:none!important}.world-hint{left:50%;bottom:98px;padding:8px 11px;max-width:calc(100% - 20px);font-size:9px;gap:6px}.world-hint .hint-separator{display:none}.world-hint>.tiny-sparkle{display:none}.bottom-strip{display:none}.content-sheet{inset:0 0 0 auto;width:100%;border-radius:0;max-height:100svh;border:0}.sheet-header{height:59px;padding:0 22px}.sheet-body{padding:27px 23px 37px}.sheet-footer{padding:13px 23px}.sheet-footer span{display:none}.sheet-title{font-size:42px}.sheet-lead{font-size:17px}.sheet-photo-layout{grid-template-columns:1fr 100px;gap:16px}.info-grid{grid-template-columns:1fr}.split-card{grid-template-columns:1fr}.split-card>img{height:160px}.section-title{font-size:28px}.explorer-header{height:76px;padding:0 17px}.explorer-header strong{font-size:14px}.explorer-header span{font-size:9px}.explorer-bottom{padding:0 17px}.explorer-bottom span{font-size:9px}.explorer-pin{font-size:9px;padding:7px 9px}}
@media(max-width:420px){.intro p{max-width:290px;font-size:11px}.signature{width:275px}.intro h2{font-size:15px}.intro-actions{margin-top:8px}.world-hint{bottom:100px}.feature-card{bottom:98px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Fidelity pass: hide UI lettering baked into the approved concept artwork.
   All visible type and controls above these masks are real editable HTML. */
@media(min-width:761px){
 .scene-left-fade{width:54%;background:linear-gradient(90deg,#fbf7f0 0%,#fbf7f0 59%,rgba(251,247,240,.97) 67%,rgba(251,247,240,.66) 80%,transparent 100%)}
 .scene-right-fade{display:block;top:0;right:0;width:29%;height:79%;background:linear-gradient(90deg,transparent 0%,rgba(251,247,240,.90) 28%,#fbf7f0 65%,#fbf7f0 100%)}
 .hero-quote{background:#fbf7f0;padding:10px 11px 12px;margin:-10px -11px 0;box-shadow:0 0 18px 19px #fbf7f0a6;border-radius:12px}
 .district{background:#fffaf2;min-width:204px;box-shadow:0 3px 15px #3c2b1670}
 .district-copy strong{font-weight:670}
}
.world-stage:after{content:"";position:absolute;inset:auto 0 0;height:85px;background:linear-gradient(0deg,rgba(244,234,217,.65),transparent);z-index:3;pointer-events:none}

/* Clean 3D city artwork: the accepted Roman-inspired palette, without flattened UI. */
.scene-art{object-position:center 52%;filter:saturate(.97) contrast(1.015)}
@media(min-width:761px){
 .scene-left-fade{width:43%;background:linear-gradient(90deg,rgba(251,247,240,.96) 0%,rgba(251,247,240,.95) 24%,rgba(251,247,240,.71) 61%,transparent 100%)}
 .scene-right-fade{display:none}
 .hero-quote{background:transparent;box-shadow:none;padding:0;margin:0}
 .district{background:rgba(255,250,241,.96)}
}

.marble-frame{position:absolute;top:0;bottom:0;height:100%;width:clamp(40px,5.2vw,82px);object-fit:fill;pointer-events:none;z-index:4;opacity:.76;filter:saturate(.74)}.marble-left{left:0}.marble-right{right:0;transform:scaleX(-1)}
@media(min-width:761px){.hero-quote{top:19px}}
@media(max-width:760px){.marble-frame{display:none}}

/* --- Revision pass: readability, richer content, clearer navigation, in-page zoom --- */
.brand-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center 18%;border:1px solid #decfb9;box-shadow:0 3px 8px rgba(56,41,18,.12)}
.brand-square{display:none!important}
.hero-quote{left:57%;top:18px;width:min(320px,24vw);padding:14px 16px 14px 18px;border-radius:16px;background:rgba(252,248,241,.84);border:1px solid rgba(212,189,151,.55);backdrop-filter:blur(10px);box-shadow:0 10px 25px rgba(64,46,20,.08)}
.hero-quote blockquote{text-shadow:0 1px 0 rgba(255,255,255,.4)}
.quote-by{margin-top:10px}
.client-badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.client-badge{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px 12px;border-radius:999px;border:1px solid #e6d5bb;background:linear-gradient(180deg,#fffdf8,#f7efe3);color:#5f4c31;font-size:11px;font-weight:700;letter-spacing:.04em}
.engagement-list{display:grid;gap:14px}
.engagement-card{border:1px solid #e7dac8;border-radius:14px;background:#fffdf8;padding:18px}
.engagement-top{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.engagement-client{font-size:10px;font-weight:750;letter-spacing:.18em;color:#9a7b47;text-transform:uppercase}
.engagement-card h4{font:400 23px/1.2 Georgia,serif;margin:0;color:#211d18}
.engagement-card p{font:400 13px/1.65 Georgia,serif;color:#60564b;margin:0 0 10px}
.entry-card .client-badges{margin:0 0 12px}
.text-button{display:inline-flex;align-items:center;gap:6px}
.project-cover,.split-card>img,.feature-image img,.portrait{object-position:center center}

.city-zoom-panel{position:absolute;inset:20px 28px 108px;z-index:24;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:20px;border:1px solid rgba(211,190,154,.72);background:rgba(251,247,239,.95);box-shadow:0 25px 70px rgba(35,24,11,.25);backdrop-filter:blur(12px);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s,transform .22s}
.city-zoom-panel.open{opacity:1;transform:none;pointer-events:auto}
.city-zoom-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.city-zoom-toolbar strong{font:500 17px Georgia,serif;letter-spacing:.06em}
.city-zoom-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.city-zoom-actions .icon-button{font-size:22px;line-height:1}
.city-zoom-actions .icon-button span{transform:translateY(-1px)}
.city-zoom-viewport{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,#f7efe2,#eee3d1);cursor:grab;touch-action:none}
.city-zoom-viewport:active{cursor:grabbing}
.city-zoom-image{width:100%;height:100%;object-fit:cover;object-position:center 52%;transform-origin:center center;transition:transform .08s linear;user-select:none}
.city-zoom-help{margin:0 4px;font-size:11px;color:#6a5b49}
.explorer-modal{display:none!important}

@media(max-width:1200px){
  .hero-quote{left:55%;width:min(300px,28vw)}
}
@media(max-width:1080px){
  .brand-photo{width:36px;height:36px}
}
@media(max-width:760px){
  .brand{gap:10px}
  .brand-photo{width:34px;height:34px}
  .brand-name{font-size:18px}
  .feature-image{aspect-ratio:1.9}
  .hero-quote{display:none}
  .city-zoom-panel{inset:12px 12px 94px;padding:10px 10px 12px;border-radius:16px}
  .city-zoom-toolbar{align-items:flex-start;flex-direction:column}
  .city-zoom-actions{width:100%}
  .city-zoom-actions .button.small{min-height:34px;padding:8px 12px}
  .city-zoom-viewport{min-height:290px}
  .city-zoom-help{font-size:10px}
}

/* 2026 portfolio refinement: readable expertise, guided chapters, immersive city */
.hero-skill-row{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 4px;max-width:380px}
.hero-skill-row span{display:inline-flex;align-items:center;border-radius:20px;border:1px solid rgba(184,145,83,.38);padding:6px 9px;background:rgba(255,251,244,.84);font-size:10px;font-weight:640;color:#614d35;line-height:1}
.intro-actions{margin-top:16px}
.brand-logo{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid #e0d5c2;border-radius:9px;background:#fbf8f3;overflow:hidden;box-shadow:0 1px 2px rgba(44,31,11,.04)}
.brand-logo img{width:26px;height:26px;object-fit:contain;position:relative;z-index:2;background:#fbf8f3}
.logo-fallback{position:absolute;inset:0;display:grid;place-items:center;font:800 11px Arial, sans-serif;letter-spacing:-.03em;color:#5e7484}
.company-lockup{display:flex;align-items:center;gap:12px;min-width:0}
.company-lockup h3{margin:0!important}
.client-badges{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 21px}
.client-badge{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;min-height:39px;padding:4px 12px 4px 5px;border-radius:28px;border:1px solid #e5d8c7;background:#f9f4eb;color:#574a3a;font:650 11px/1.15 Arial,sans-serif;letter-spacing:0}
.client-badge .brand-logo{height:29px;width:29px;border-radius:50%;background:#fff;border-color:#eee2d2}
.client-badge .brand-logo img{width:22px;height:22px;background:#fff}
.engagement-list{display:grid;gap:14px}
.engagement-card{background:#fffcf7;border:1px solid #e6dac9;border-radius:14px;padding:20px}
.engagement-top{display:flex;align-items:center;gap:12px}
.engagement-top .brand-logo{width:43px;height:43px}
.engagement-top .brand-logo img{width:30px;height:30px}
.engagement-client{display:block;font:700 10px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a773f;margin-bottom:6px}
.engagement-card h4{margin:0;font:400 21px/1.17 Georgia,serif;color:#27231e}
.engagement-card p{font:400 13px/1.7 Georgia,serif;color:#655b4f;margin:15px 0 10px}
.engagement-card .bullet-list{margin:8px 0 0}
.experience-brand-hero{display:inline-flex;align-items:center;gap:10px;border-radius:12px;background:#f8f0e4;border:1px solid #e6d7bc;padding:10px 18px;margin-bottom:22px;font-weight:700}
.experience-brand-hero .brand-logo{width:40px;height:40px}
.overview-hero{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:22px;align-items:start}
.overview-hero .portrait{width:100%;height:190px;object-fit:cover;object-position:center 14%}
.overview-hero .sheet-paragraph{margin:5px 0 12px;font-size:15px;line-height:1.66}
.overview-stats{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 0}
.overview-stats>div{display:flex;flex-direction:column;min-width:104px;border-left:2px solid #b58b50;padding-left:10px;gap:3px}
.overview-stats strong{font:500 19px Georgia,serif;color:#211f1b}
.overview-stats span{max-width:95px;color:#776957;font:10px/1.3 Arial,sans-serif}
.overview-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.overview-skill{padding:15px;border-radius:12px;border:1px solid #e9ddcb;background:#fffcf8}
.overview-skill small{display:block;color:#b5915b;font-size:10px;letter-spacing:.16em;margin-bottom:5px}
.overview-skill h3{font:400 19px/1.2 Georgia,serif;margin:0 0 7px}
.overview-skill p{font:12px/1.5 Arial,sans-serif;color:#6b5f51;margin:0}
.experience-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.experience-logos button{border:1px solid #e8dbca;background:#fffdf9;border-radius:12px;display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:center;text-align:center;padding:15px 8px;min-height:100px;font-weight:600;font-size:12px}
.experience-logos button:hover{border-color:#c3a476;background:#fbf4e8}
.experience-logos .brand-logo{width:42px;height:42px}
.experience-logos .brand-logo img{width:32px;height:32px}
.skill-categories{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.skill-group{border:1px solid #e7d8c3;background:#fffcf8;border-radius:12px;padding:14px 16px}
.skill-group h3{font:400 19px Georgia,serif;margin:0 0 12px}
.skill-group ul{font:12px/1.58 Arial,sans-serif;color:#64594c;padding-left:16px;margin:0}
.skill-group li{margin-bottom:7px}
.journey-intro{border-left:3px solid #b68c50;padding:12px 17px;margin:0 0 26px;background:#f9f0e3;border-radius:0 10px 10px 0}
.journey-intro strong{font:500 17px Georgia,serif}
.journey-intro p{font:12px/1.5 Arial,sans-serif;color:#65594b;margin:5px 0 0}
.education-list{display:grid;gap:10px}
.education-row{display:flex;align-items:center;gap:13px;padding:15px;border-radius:12px;border:1px solid #e6d9c9;background:#fffdf8}
.education-row .brand-logo{width:44px;height:44px}
.education-row>div{flex:1}
.education-row h3{font:500 19px Georgia,serif;margin:0 0 3px}
.education-row strong{font:600 12px Arial,sans-serif;color:#96733d}
.education-row p{font:12px/1.5 Arial,sans-serif;color:#6b5e4e;margin:5px 0 0}
.education-row>span{font:11px Arial,sans-serif;color:#8a765c;align-self:flex-start}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filter-chip{border:1px solid #decdb4;background:#fffdf9;color:#6b5840;padding:10px 14px;font:650 11px Arial,sans-serif;border-radius:40px}
.filter-chip.active,.filter-chip:hover{background:#202623;color:#fff;border-color:#202623}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.project-tile{padding:0;overflow:hidden;display:flex;flex-direction:column;text-align:left}
.project-tile .tile-cover{display:block;width:100%;height:auto;aspect-ratio:1.76;object-fit:cover;object-position:center center;background:#eee8dd}
.project-tile .tile-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:17px 18px 20px;flex:1}
.project-tile .tile-title{font:400 23px/1.08 Georgia,serif;letter-spacing:-.025em;color:#27251f}
.project-tile .tile-summary{font:12px/1.5 Arial,sans-serif;color:#73665a;flex:1}
.project-tile .entry-subtitle{font-size:9px;margin:0}
.project-tile .entry-cta{margin-top:4px}
.project-cover{display:block;width:100%;height:auto;aspect-ratio:1.76;object-fit:cover;object-position:center center;max-height:none}
.feature-image{aspect-ratio:1.64}
.feature-image img{object-fit:cover;object-position:center center}

/* Story navigation always tells the visitor how to get home and move forward */
.sheet-header{height:59px;padding:0 25px}
.sheet-location{letter-spacing:0;font:600 12px Arial,sans-serif;gap:9px}
.sheet-home{border:0;background:none;font:600 12px Arial,sans-serif;color:#654a29;padding:7px}
.sheet-home:hover,.sheet-prev:hover{color:#c29146}
.crumb-sep{color:#b1a08b}
.sheet-header-actions{display:flex;align-items:center;gap:12px}
.sheet-prev{border:0;background:transparent;padding:8px;font-size:12px;color:#685849}
.chapter-nav{display:flex;align-items:center;gap:4px;padding:10px 25px;border-bottom:1px solid #e9dcc8;overflow-x:auto;scrollbar-width:none;flex:none;background:#faf4eb}
.chapter-nav::-webkit-scrollbar{display:none}
.chapter-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;border:0;background:transparent;color:#84735b;padding:8px 9px;border-radius:8px;font:600 11px Arial,sans-serif}
.chapter-tab small{color:#b39a70;font-size:9px}
.chapter-tab.selected{background:#272d29;color:#fff}
.chapter-tab.selected small{color:#e5be7b}
.chapter-tab:hover:not(.selected){background:#efe2ce;color:#3b3025}
.sheet-footer{height:58px;padding:0 30px}
.sheet-next{border:0;background:#202725;color:white;font:650 11px Arial,sans-serif;padding:10px 17px;border-radius:40px}
.sheet-next:hover{background:#3d4640}
.sheet-next[hidden]{display:none!important}

/* City is expanded IN the home page; never a new page or detached 3D model */
.scene-art{transform:translate(var(--city-pan-x,0px),var(--city-pan-y,0px)) scale(var(--city-scale,1));transition:transform .65s cubic-bezier(.18,.65,.18,1);will-change:transform}
.explore-toolbar{display:none;position:absolute;left:clamp(25px,5.8vw,100px);right:clamp(25px,5.8vw,100px);top:26px;z-index:19;align-items:center;gap:22px;border:1px solid rgba(190,160,114,.5);border-radius:14px;padding:12px 16px;background:rgba(255,252,245,.9);box-shadow:0 12px 26px rgba(54,36,14,.1);backdrop-filter:blur(10px)}
.explore-back{border:1px solid #ddc8a8;background:#fffaf1;border-radius:30px;padding:11px 16px;font:600 11px Arial,sans-serif;color:#4c3d2a;white-space:nowrap}
.explore-heading{display:flex;flex-direction:column;flex:1;min-width:0;gap:3px}
.explore-heading strong{font:400 23px Georgia,serif}
.explore-heading small{font:11px Arial,sans-serif;color:#72644f}
.explore-zoom{display:flex;align-items:center;gap:7px}
.explore-zoom button{border:1px solid #ddc8aa;background:#fffaf4;min-width:35px;height:35px;border-radius:8px;color:#3d352b;font-size:17px}
.explore-zoom button:last-child{padding:0 12px;font-size:11px}
.world-stage.exploring .explore-toolbar{display:flex}
.world-stage.exploring .intro,.world-stage.exploring .hero-quote,.world-stage.exploring .world-hint{opacity:0;pointer-events:none;transform:translateX(-22px)}
.world-stage .intro,.world-stage .hero-quote,.world-stage .world-hint{transition:opacity .4s,transform .5s}
.world-stage.exploring .scene-left-fade{opacity:.05}
.world-stage.exploring .scene-head-fade{opacity:.28}
.world-stage.exploring .feature-card{top:106px}
.world-stage.exploring .bottom-strip{opacity:.93}
.world-stage.exploring .district{z-index:11}
.world-stage.exploring{cursor:grab}
.world-stage.exploring:active{cursor:grabbing}
.world-stage.exploring button{cursor:pointer}

@media(max-width:1200px){
 .hero-skill-row{max-width:320px}.hero-skill-row span{font-size:9px}
 .hero-quote{left:57.5%;width:220px;top:14px}
 .hero-quote blockquote{font-size:13px}
}
@media(max-width:1080px){
 .hero-quote{display:none}
}
@media(max-width:760px){
 .intro{top:17px}
 .intro p{font-size:12px;line-height:1.4;max-width:330px}
 .hero-skill-row{margin:8px 0 0;gap:5px;max-width:315px}
 .hero-skill-row span{font-size:8px;padding:5px 7px}
 .intro-actions{margin-top:10px}
 .feature-image{aspect-ratio:1.64}
 .overview-hero{grid-template-columns:minmax(0,1fr) 96px;gap:15px}
 .overview-hero .portrait{height:120px}
 .overview-stats{gap:10px}
 .overview-stats>div{min-width:83px}
 .overview-skills{grid-template-columns:1fr 1fr;gap:8px}
 .overview-skill{padding:12px}
 .overview-skill h3{font-size:16px}
 .overview-skill p{font-size:11px}
 .experience-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
 .skill-categories{grid-template-columns:1fr}
 .project-grid{grid-template-columns:1fr}
 .project-tile .tile-cover{aspect-ratio:1.95}
 .sheet-header{padding:0 17px}
 .chapter-nav{padding:9px 12px;gap:4px}
 .chapter-tab{flex:none;padding:8px 10px;font-size:10px}
 .sheet-footer{padding:0 17px}
 .explore-toolbar{top:13px;left:12px;right:12px;padding:9px 10px;gap:9px;flex-wrap:wrap}
 .explore-heading{order:-1;width:100%;flex:auto}
 .explore-heading strong{font-size:19px}
 .explore-heading small{font-size:10px}
 .explore-back{padding:8px 10px;font-size:10px}
 .explore-zoom{margin-left:auto}
 .world-stage.exploring .bottom-strip{display:none}
 .world-stage.exploring .districts{bottom:0}
 .world-stage.exploring .feature-card{top:auto;bottom:100px}
}
@media(max-width:390px){
 .brand-name{font-size:17px}
 .hero-skill-row{max-width:265px}
 .hero-skill-row span{font-size:7.5px}
}
.chapter-bar{display:flex;align-items:center;gap:5px;width:100%;min-width:max-content}
@media(max-width:760px){.chapter-bar{justify-content:flex-start}.chapter-nav{max-width:100%;overflow-x:auto}}
@media(min-width:761px){.hero-quote{left:55.5%;width:min(264px,18.4vw)}}
.world-stage.exploring .bottom-strip{opacity:0;pointer-events:none}
@media(max-height:760px) and (min-width:761px){
 .bottom-strip{display:none}
 .world-hint{bottom:18px}
 .world-stage.exploring .world-hint{display:none}
 .feature-card{max-height:calc(100% - 60px)}
}

/* Education logos: respect the original university wordmark proportions. */
.education-row:has(img[src*="em-strasbourg"])>.brand-logo{width:96px;min-width:96px;}
.education-row:has(img[src*="em-strasbourg"])>.brand-logo img{width:88px;height:35px;object-fit:contain;}
.education-row:has(img[src*="toyo-university"])>.brand-logo img{width:39px;height:39px;object-fit:contain;}
@media(max-width:600px){.education-row:has(img[src*="em-strasbourg"])>.brand-logo{width:73px;min-width:73px}.education-row:has(img[src*="em-strasbourg"])>.brand-logo img{width:68px;height:30px}}

/* V12: genuine responsive layout for phones and compact tablets.
   Desktop composition is deliberately preserved. Mobile reads as a page,
   instead of trapping the city, navigation and project cards in 100svh. */
@media (max-width: 1080px) {
  html, body {max-width:100%; overflow-x:clip;}
  .page-surface {height:auto; min-height:100svh; overflow:visible;}
  .topbar {position:sticky; top:0; z-index:80; height:64px; padding:0 16px; gap:12px;}
  .brand {min-width:0; flex:1;}
  .brand-name {font-size:clamp(16px,4.6vw,20px); overflow:hidden; text-overflow:ellipsis;}
  .brand-photo {flex:none; width:34px; height:34px;}
  .header-actions {margin-left:auto; flex:none; gap:8px;}
  .mobile-menu {width:42px; height:44px; align-items:center;}
  .mobile-nav:not([hidden]) {top:calc(100% - 1px); right:12px; width:min(330px,calc(100vw - 24px)); max-height:calc(100svh - 75px); overflow-y:auto; z-index:100;}
  .mobile-nav button {min-height:44px;}

  .world-stage {height:auto; min-height:0; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom, 0px); overflow:visible; background:var(--paper);}
  .world-stage::after {display:none;}
  .marble-frame, .scene-left-fade, .scene-right-fade, .scene-head-fade {display:none!important;}
  .hero-quote {display:none;}
  .intro {position:relative; top:auto; left:auto; right:auto; order:0; width:100%; max-width:650px; padding:25px 21px 22px; margin:0 auto; transform:none;}
  .intro h1 {margin:9px 0 7px;}
  .signature {width:min(370px,100%); max-width:100%;}
  .eyebrow {font-size:9px; letter-spacing:.20em; white-space:normal;}
  .intro h2 {font-size:clamp(19px,5.2vw,25px); line-height:1.23; margin:6px 0 12px;}
  .intro p {font:400 clamp(14px,3.7vw,16px)/1.55 Georgia,serif; max-width:560px;}
  .hero-skill-row {max-width:560px; gap:7px; margin:14px 0 8px;}
  .hero-skill-row span {font-size:10px; padding:7px 9px;}
  .intro-actions {margin-top:17px; gap:12px; flex-wrap:wrap;}
  .intro-actions .button {font-size:12px; padding:12px 16px; min-height:44px;}
  .round-play {width:42px; height:42px;}
  .story-link {font-size:12px;}
  .story-link small {font-size:10px;}

  .scene-picture {position:relative; order:1; display:block; width:100%; height:clamp(250px,72vw,440px); overflow:hidden; background:#ece3d7; isolation:isolate;}
  .scene-art {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; filter:saturate(.95) contrast(1.015);}
  .districts {position:relative; inset:auto; order:2; z-index:8; width:100%; height:auto; overflow:visible; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:17px 17px 7px; background:var(--paper); scroll-snap-type:none;}
  .district {position:relative; left:auto!important; top:auto!important; transform:none!important; display:flex; width:100%; min-width:0; max-width:none; height:auto; min-height:62px; gap:9px; padding:8px 9px 8px 7px; border-radius:14px; white-space:normal; box-shadow:0 2px 9px rgba(50,36,18,.10); background:#fffaf2;}
  .district:after {display:none;}
  .district:hover,.district.active {transform:translateY(-2px)!important; box-shadow:0 3px 12px rgba(50,36,18,.17);}
  .district-icon {width:36px; height:36px;}
  .district-icon svg {width:18px; height:18px;}
  .district-copy {min-width:0; gap:4px;}
  .district-copy strong {font-size:11px; overflow:visible; text-overflow:clip; white-space:normal; line-height:1.17;}
  .district-copy small {font-size:9px; overflow:visible; text-overflow:clip; white-space:normal; line-height:1.2;}
  .district-chevron {display:none;}

  .world-hint {position:relative; order:3; z-index:2; left:auto; bottom:auto; transform:none; justify-content:center; width:auto; max-width:none; margin:12px 17px 22px; padding:11px 13px; white-space:normal; flex-wrap:wrap; line-height:1.45; font-size:11px; text-align:center;}
  .world-hint .hint-separator,.world-hint>.tiny-sparkle {display:none;}
  .world-hint .inline-link {font-size:11px;}
  .bottom-strip {display:none;}
  .feature-card {position:relative; order:4; top:auto; right:auto; bottom:auto; left:auto; width:auto; max-height:none; overflow:visible; margin:0 17px 23px; padding:18px; border-radius:16px; box-shadow:0 12px 26px rgba(50,36,18,.12);}
  .feature-card {scroll-margin-top:80px;}
  .feature-card:not(.mobile-open),.feature-card[hidden] {display:none!important;}
  .feature-card h2 {font-size:27px;}
  .feature-image {aspect-ratio:1.8;}
  .feature-description {font-size:13px; line-height:1.6;}
  .feature-tags span {font-size:10px;}
  .feature-reopen {display:none!important;}

  .explore-toolbar {position:relative; order:0; inset:auto; top:auto; left:auto; right:auto; margin:12px 17px; padding:13px; width:auto; gap:11px; z-index:19; flex-wrap:wrap;}
  .world-stage.exploring .explore-toolbar {display:flex;}
  .explore-heading {order:-1; width:100%; flex:auto;}
  .explore-heading strong {font-size:22px;}
  .explore-heading small {font-size:11px; line-height:1.5;}
  .explore-back {min-height:39px; padding:9px 12px; font-size:11px;}
  .explore-zoom {margin-left:auto;}
  .explore-zoom button {min-width:40px; height:40px;}
  .world-stage.exploring .intro {display:none;}
  .world-stage.exploring .scene-picture {height:clamp(320px,84vw,560px);}
  .world-stage.exploring .districts {bottom:auto;}
  .world-stage.exploring .world-hint {display:none;}
  .world-stage.exploring .feature-card {top:auto; bottom:auto;}

  /* Reading dialogs remain full-screen but all content scrolls normally. */
  .content-sheet {inset:0; width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0;}
  .sheet-header {height:auto; min-height:57px; padding:8px 13px; gap:8px;}
  .sheet-location {min-width:0; gap:6px; font-size:11px;}
  .sheet-location #sheet-current {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sheet-header-actions {gap:5px; flex:none;}
  .sheet-prev {padding:8px 3px; font-size:11px;}
  .sheet-close {height:38px; width:38px; flex:none;}
  .chapter-nav {padding:8px 10px; overflow-x:auto; overscroll-behavior-x:contain;}
  .chapter-bar {min-width:max-content; width:max-content;}
  .chapter-tab {min-height:39px; padding:9px 12px; font-size:11px;}
  .sheet-body {min-width:0; padding:27px 19px 35px; overflow-y:auto; overscroll-behavior-y:contain;}
  .sheet-title {font-size:clamp(31px,8vw,43px); overflow-wrap:break-word;}
  .sheet-lead {font-size:clamp(16px,4.4vw,19px);}
  .sheet-paragraph {font-size:14px; line-height:1.65;}
  .section-title {font-size:clamp(24px,6.5vw,29px);}
  .entry-card {padding:18px 16px;}
  .entry-header {align-items:flex-start; flex-direction:column; gap:7px;}
  .entry-date {white-space:normal; font-size:11px;}
  .entry-header h3 {font-size:21px;}
  .project-grid,.info-grid,.skill-categories {grid-template-columns:1fr;}
  .project-tile .tile-title {font-size:22px;}
  .project-tile .tile-cover {aspect-ratio:1.76;}
  .overview-hero {grid-template-columns:minmax(0,1fr) 110px; gap:12px;}
  .overview-hero .portrait {height:135px;}
  .education-row {display:grid; grid-template-columns:52px minmax(0,1fr); align-items:start; gap:11px; padding:14px;}
  .education-row>div {min-width:0;}
  .education-row h3 {font-size:18px;}
  .education-row>span {grid-column:2; align-self:start;}
  .education-row:has(img[src*="em-strasbourg"]) {grid-template-columns:77px minmax(0,1fr);}
  .education-row:has(img[src*="em-strasbourg"])>.brand-logo {width:72px; min-width:72px;}
  .education-row:has(img[src*="em-strasbourg"])>.brand-logo img {width:67px; height:32px;}
  .experience-logos {grid-template-columns:repeat(2,minmax(0,1fr));}
  .sheet-footer {height:auto; min-height:62px; padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px)); font-size:10px;}
  .sheet-next {white-space:normal; text-align:center; min-height:39px;}
  .search-box {width:calc(100% - 26px); margin:18px auto 0; padding:18px 15px;}
  .search-title h2 {font-size:25px;}
  .search-input-wrap {padding:13px 12px;}
  .search-input-wrap input {min-width:0; font-size:16px;}
  .search-results {max-height:calc(100dvh - 210px);}
}
@media (max-width: 360px) {
  .brand-name {font-size:16px;}
  .intro {padding:23px 17px 19px;}
  .intro h2 {font-size:18px;}
  .intro p {font-size:14px;}
  .intro-actions {gap:7px; flex-wrap:nowrap;}
  .intro-actions .button {padding:10px 11px; font-size:11px; gap:6px;}
  .round-play {width:35px; height:35px;}
  .story-link {font-size:10px;}
  .districts {gap:8px; padding:12px 11px 7px;}
  .district {padding:7px 5px; gap:5px;}
  .district-icon {width:31px; height:31px;}
  .district-copy strong {font-size:10px;}
  .district-copy small {font-size:8px;}
  .overview-hero {grid-template-columns:1fr;}
  .overview-hero .portrait {max-width:140px; width:100%; height:148px;}
  .sheet-body {padding-inline:15px;}
}
@media (min-width: 700px) and (max-width:1080px) {
  .intro {max-width:870px; padding:30px 30px 28px;}
  .signature {width:min(430px,80%);}
  .intro p {font-size:16px; max-width:720px;}
  .scene-picture {height:clamp(350px,46vw,500px);}
  .districts {grid-template-columns:repeat(3,minmax(0,1fr)); padding:18px 25px 9px;}
  .district {min-height:68px;}
  .district-copy strong {font-size:12px;}
  .world-hint {align-self:center; width:calc(100% - 50px); max-width:850px;}
  .feature-card {width:calc(100% - 50px); max-width:850px; align-self:center;}
  .content-sheet {inset:0 0 0 auto; width:min(720px,100%); border-radius:0;}
  .project-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .skill-categories {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-height:660px) and (min-width:761px) {
  .page-surface {min-height:680px;}
  .world-stage {min-height:603px;}
}