/* Hallmark · refinement: alpine portfolio · identity preserved · audit corrections */
@font-face{font-family:'Apple Garamond';src:url('./fonts/Apple%20Garamond%20Font/AppleGaramond.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:'Apple Garamond';src:url('./fonts/Apple%20Garamond%20Font/AppleGaramond-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap;}
@font-face{font-family:'Apple Garamond';src:url('./fonts/Apple%20Garamond%20Font/AppleGaramond-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap;}
@font-face{font-family:'Apple Garamond';src:url('./fonts/Apple%20Garamond%20Font/AppleGaramond-BoldItalic.ttf') format('truetype');font-style:italic;font-weight:700;font-display:swap;}
@font-face{font-family:'Open Sauce';src:url('./fonts/Open%20Sauce%20Font/OpenSauceOne-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:'Open Sauce';src:url('./fonts/Open%20Sauce%20Font/OpenSauceOne-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap;}
@font-face{font-family:'Open Sauce';src:url('./fonts/Open%20Sauce%20Font/OpenSauceOne-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap;}
@font-face{font-family:'Open Sauce';src:url('./fonts/Open%20Sauce%20Font/OpenSauceOne-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap;}
@font-face{font-family:'Open Sauce';src:url('./fonts/Open%20Sauce%20Font/OpenSauceOne-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap;}
:root{--bg:var(--color-forest);--ink:var(--color-paper-01);--red:var(--color-surface-01);--border:var(--color-paper-03)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px var(--font)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--color-surface-02);outline-offset:6px}
button:hover{color:var(--color-accent)}
button{transition:background .2s,color .2s}
button:disabled{opacity:.3;cursor:default}
[hidden]{display:none!important}
.skip{position:absolute;top:-100px;z-index:30;background:var(--red);padding:var(--space-md)}
.skip:focus{top:12px}
header{height:100px;position:absolute;top:0;width:100%;z-index:10;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:14px;align-items:center}
.brand svg{width:38px;fill:none;stroke:currentColor;stroke-width:2}
.brand>span{font-family:var(--font-display)}
.brand small{display:block;font:9px var(--font);letter-spacing:2px;color:var(--muted);margin-top:7px}
nav{display:flex;gap:var(--space-xl);align-items:center}
nav button{font-size:13px;min-height:44px}
.count{font-size:10px;border:1px solid var(--color-paper-05);border-radius:20px;padding:2px 5px;margin-left:4px}
.nav-active:before{content:'';display:inline-block;width:5px;height:5px;background:var(--red);border-radius:100%;margin-right:9px}
#experience{position:relative;overflow:hidden}
#scene,#scene canvas,.atmosphere,#markers{position:absolute;inset:0;width:100%;height:100%}
#scene{cursor:grab;touch-action:pan-y}
#scene:active{cursor:grabbing}
.atmosphere{pointer-events:none;background:linear-gradient(0deg,var(--color-forest) 0%,var(--color-ink-05) 10%,var(--color-ink-06) 26%,transparent 52%)}
#markers{pointer-events:none}
.marker{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;padding:0 8px 8px;min-width:44px;min-height:44px}
.marker .label{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--color-paper-06);padding:8px 11px;margin-bottom:12px;text-align:left;white-space:nowrap}
.label strong{font-size:12px;font-weight:600}
.label small{color:var(--color-paper-07);letter-spacing:.6px;margin-top:4px}
.marker .dot{width:11px;height:11px;border:3px solid var(--red);border-radius:100%}
.marker.compact .label{display:none}
.marker:hover .label,.marker:focus-visible .label{display:flex}
.marker.active small{color:var(--color-paper)}
.marker.active .dot{width:17px;height:17px;border:3px solid white}
.scene-caption{position:absolute;top:135px;left:4.5%;font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:12px}
.tiny-line{width:28px;height:1px;background:var(--red)}
.scene-tools{position:absolute;right:4.5%;top:124px;display:flex;gap:3px;padding:4px;border:1px solid var(--border)}
.scene-tools button{height:36px;font-size:24px}
.scene-tools>span{width:1px;margin:8px 4px}
.hero{position:absolute;left:4.5%;pointer-events:none}
.eyebrow{letter-spacing:1.7px;font-weight:600}
.hero .eyebrow{display:flex;gap:var(--space-sm);align-items:center;color:var(--color-paper-10)}
.status-dot{width:5px;height:5px;border-radius:50%;background:var(--red)}
h1{font-family:var(--font-display);margin:0 0 22px}
h1 em{font:inherit}
p{line-height:1.7}
.hero p{color:var(--muted);margin:0}
.hero-action{position:absolute;right:4.5%}
.primary{padding:18px 24px;border:1px solid var(--red);border-radius:3px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:40px;min-height:54px}
.primary span{font-size:22px;line-height:1}
.hero-action p{font-size:10px;color:var(--muted);text-align:center;margin:16px 0 0}
.mouse-icon{display:inline-block;width:10px;height:14px;border:1px solid var(--color-surface-07);border-radius:5px;vertical-align:middle;margin-right:7px}
.journey{padding:22px 4.5% 16px;border-top:1px solid var(--color-paper-12);background:var(--color-forest);position:relative}
.journey-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.3px;color:var(--muted)}
.journey-heading>span:first-child{color:var(--ink);font-weight:600}
.journey-heading button{font-size:11px;letter-spacing:0;padding:6px 0}
.steps{display:flex;margin:19px 0 9px;position:relative;justify-content:space-between}
.steps:before{content:'';position:absolute;height:1px;left:20px;right:20px;top:12px}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:44px;padding:0 4px 4px}
.step b{background:var(--color-forest);border:1px solid var(--color-surface-10);width:25px;height:25px;border-radius:50%;font-weight:500;display:grid;place-items:center}
.step.personal b{border-color:var(--color-surface-11);color:var(--color-surface-12)}
.step.active b{box-shadow:0 0 0 4px var(--color-surface-13)}
.step span{max-width:95px;line-height:1.4}
.step.active span{color:var(--color-paper)}
.journey-footer{display:flex;justify-content:space-between;align-items:center;color:var(--color-surface-14);font-size:8px;letter-spacing:1px}
.journey-footer i{display:inline-block;width:4px;height:4px;vertical-align:middle;border-radius:50%;margin-right:5px;background:var(--red)}
.journey-footer .legend-personal{background:var(--color-surface-15);margin-left:20px}
.step-nav{display:flex;gap:15px;align-items:center}
.step-nav button{font-size:19px;min-width:44px;min-height:38px}
#counter{min-width:68px;text-align:center;font-size:8px}
footer{display:flex;justify-content:space-between;padding:24px 4.5%;border-top:1px solid var(--color-paper-14);font-size:9px;color:var(--color-surface-16);letter-spacing:1px}
footer button{font-size:10px;letter-spacing:0}
.project-card{position:absolute;bottom:38px;right:4.5%;width:360px;border:1px solid var(--color-paper-03);border-radius:6px;padding:22px 26px}
.card-top{display:flex;align-items:center;justify-content:space-between}
.card-top .eyebrow{font-size:8px}
.card-top button{font-size:25px;min-width:40px;min-height:40px}
.card-number{color:var(--color-surface-17);font-size:10px;letter-spacing:2px;margin:8px 0 12px}
.project-card h2{font:600 27px/1.15 var(--font-display);margin:0 0 15px}
.project-card>p:not(.card-number){font-size:12px;color:var(--muted);line-height:1.6}
.text-link{display:flex;width:100%;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:15px 0 0;margin-top:20px;font-size:12px}
.text-link span{font-size:24px}
.explore-caption{position:absolute;left:4.5%;pointer-events:none}
.explore-caption .eyebrow{color:var(--color-paper-16)}
.explore-caption p{font:400 34px/1.25 var(--font-display);letter-spacing:-1px;margin:18px 0 0}
.exploring .hero,.exploring .hero-action{display:none}
.exploring .scene-caption{opacity:.6}
dialog{background:var(--color-ink-13);color:var(--ink);border:1px solid var(--color-paper-17);border-radius:9px;max-width:720px;width:calc(100% - 32px);max-height:88svh;padding:30px 38px}
dialog::backdrop{background:var(--color-lightbox-backdrop);backdrop-filter:blur(8px)}
.dialog-top{display:flex;justify-content:space-between;align-items:center;color:var(--color-surface-18)}
.close-dialog{font-size:30px;width:44px;height:44px}
dialog h2{font:650 49px/1.05 var(--font-display);margin:20px 0}
.dialog-intro{font-size:13px;color:var(--muted);margin-bottom:25px}
.list-item{display:flex;align-items:center;gap:20px;width:100%;text-align:left;border-top:1px solid var(--border);padding:17px 0}
.list-item>span{color:var(--color-surface-17);font-size:11px;min-width:22px}
.list-item strong{font-weight:500;font-size:14px}
.list-item small{display:block;color:var(--muted);margin-top:5px}
.list-item>i{margin-left:auto;font-size:20px;font-style:normal}
.list-heading{margin:28px 0 14px;letter-spacing:1.6px;color:var(--color-surface-19)}
.about-lead{font-size:20px;line-height:1.55;color:var(--color-paper-18)}
#about-dialog>p:not(.about-lead){font-size:14px;color:var(--muted)}
.about-note{padding:20px 0;border-top:1px solid var(--border);margin-top:28px}
.about-note>span{font-size:9px;letter-spacing:1.5px;color:var(--color-surface-18)}
.about-note p{font-size:13px;color:var(--muted)}

.detail-art svg{width:100%;height:100%;stroke-width:2}
.detail-art span{position:absolute}
dl{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px 0;gap:45px}
dt{font-size:9px;letter-spacing:1px;color:var(--color-surface-18)}
dd{font-size:13px;margin:8px 0 0}
.content-note{font-size:12px;color:var(--muted);margin:24px 0}
#fallback{position:absolute;top:42%;left:10%;right:10%;text-align:center;line-height:1.6;background:var(--color-ink-19);padding:20px}
@media(min-width:1600px){#experience{min-height:900px}
.hero{bottom:60px}
.hero p{font-size:16px}
.label strong{font-size:14px}}
@media(max-width:900px){header{height:85px}
nav{gap:14px}
.brand small{font-size:8px;letter-spacing:1px}
.brand svg{width:30px}
.scene-caption{top:108px}
.scene-tools{top:100px}
.hero{bottom:45px}
.hero p{font-size:12px;max-width:360px}
.primary{gap:var(--space-lg);padding:var(--space-md)}
.step span{display:none}
#experience{min-height:730px}
.explore-caption p{font-size:26px}
.project-card{width:320px}
.journey-footer>span{font-size:7px;letter-spacing:.6px}}
@media(max-width:600px){header{padding:0 20px;height:80px}
.brand{gap:9px}
.brand svg{width:27px}
nav{gap:12px}
nav button{font-size:11px}
#nav-route{display:none}
#nav-about{font-size:0}
#nav-about span{font-size:20px}
.scene-caption{letter-spacing:1.3px}
.scene-tools{gap:0}
.scene-tools button{width:35px;height:35px;font-size:22px}
h1{font-size:46px;letter-spacing:-2px;margin-bottom:18px}
.hero .eyebrow{letter-spacing:1px;margin-bottom:var(--space-md)}
.hero p{max-width:300px}
.hero p br{display:none}
.hero-action .primary{width:100%}
.hero-action p{margin:10px 0 0}
.atmosphere{background:linear-gradient(0deg,var(--color-forest) 0%,var(--color-ink-20) 25%,var(--color-ink-21) 42%,transparent 67%)}
.marker .label{padding:7px 8px;max-width:170px;white-space:normal}
.label strong{font-size:10px}
.journey{padding:20px 20px 12px}
.journey-heading{font-size:8px}
.journey-heading>span:nth-child(2){display:none}
.steps{gap:2px;flex-wrap:wrap;justify-content:flex-start;margin-top:12px}
.steps:before{display:none}
.step{width:calc((100% - 10px)/6);min-height:44px;margin-bottom:3px}
.step b{width:29px;height:29px}
.step span{display:none}
.journey-footer{align-items:flex-start;gap:12px}
.journey-footer>span{max-width:170px;line-height:2.2}
.journey-footer .legend-personal{margin-left:0}
.step-nav{gap:4px}
#counter{min-width:54px;font-size:7px}
.step-nav button{min-width:32px}
.project-card{width:auto}
.explore-caption{display:none!important}
.exploring .scene-caption{opacity:1}
footer{padding:20px;font-size:8px}
footer>span:nth-child(2){display:none}
dialog{padding:22px}
.about-lead{font-size:18px}
dl{gap:20px}
dd{font-size:11px}
.list-item{gap:12px}
.list-item strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
#geographic-labels{position:absolute;inset:0;pointer-events:none}
.geographic-label{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;gap:3px;align-items:center;font-size:10px;letter-spacing:.4px;padding-bottom:18px;white-space:nowrap}
.geographic-label small{font-weight:400}
#loading-terrain{position:absolute;left:50%;transform:translateX(-50%)}
.map-credits{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:12px 4.5%;font-size:9px;color:var(--color-surface-21);border-top:1px solid var(--color-paper-24);line-height:1.7}
.map-credits a:hover{color:white}
.map-credits button{font-size:10px;min-height:40px;white-space:nowrap}
#map-dialog>p:not(.about-lead){font-size:13px;color:var(--muted)}
.source-links{display:grid;gap:12px;font-size:12px}
.source-links a{color:var(--color-paper-25)}
.source-links a:hover{text-decoration:underline}
@media(max-width:600px){.map-credits{padding:12px 20px;display:block;font-size:8px}
.map-credits button{padding-left:0}
.geographic-label{font-size:8px}
.geographic-label small{font-size:7px}}
/* Forest-green interface; warm route remains legible against the landscape. */
.primary{background:var(--color-surface-22);border-color:var(--color-surface-23);color:var(--color-paper)}
.primary:hover{background:var(--color-surface-24);color:var(--color-paper)}
.hero .eyebrow,.scene-caption{color:var(--color-paper-27)}
.tiny-line,.status-dot,.nav-active:before{background:var(--color-surface-26)}
.journey-footer .legend-study{background:var(--color-surface-01)}
.card-top .eyebrow{color:var(--color-paper-28)}

.detail-art svg{fill:var(--color-ink-26);stroke:var(--color-surface-28)}
.map-mode .hero{display:none}
.map-mode .hero-action p{visibility:hidden}
.map-mode .atmosphere{background:linear-gradient(0deg,var(--color-ink-28),transparent 32%,transparent 80%,var(--color-ink-21))}
/* Clear cartography, with forest green confined to the portfolio interface. */
.atmosphere,.map-mode .atmosphere{background:none}
.hero{background:var(--color-ink-32);padding:28px 32px;border:1px solid var(--color-paper-32);border-radius:8px;box-shadow:0 12px 45px var(--color-ink-33)}
h1{margin-bottom:var(--space-md)}
.hero .eyebrow{margin-bottom:var(--space-md)}
.hero-action{background:var(--color-ink-32);padding:18px;border-radius:8px}
.hero-action p{margin-bottom:0}
.scene-caption{color:var(--color-surface-30);background:var(--color-paper-33);box-shadow:0 2px 12px var(--color-ink-34);padding:10px 12px;border-radius:6px}
.scene-caption .tiny-line{background:var(--color-accent)}
.scene-tools{background:var(--color-paper-34);color:var(--color-ink-35);border-color:var(--color-paper-35);box-shadow:0 3px 16px var(--color-ink-36);border-radius:7px}
.scene-tools button:hover{background:var(--color-paper-36);color:var(--color-ink-37);border-radius:4px}
.scene-tools>span{background:var(--color-paper-37)}
.marker .label{color:var(--color-ink-38);background:var(--color-paper-34);border-color:var(--color-paper-38);box-shadow:0 3px 14px var(--color-ink-39);border-radius:6px}
.marker .label small{color:var(--color-surface-31)}
.marker .dot{background:var(--color-paper)}
.geographic-label{color:var(--color-surface-33);text-shadow:0 1px 2px var(--color-paper),0 0 8px var(--color-paper),0 0 3px var(--color-paper);font-weight:500}
.geographic-label small{color:var(--color-surface-34)}
.explore-caption{background:var(--color-ink-32);padding:22px 26px;border-radius:8px;bottom:38px}
.explore-caption p{font-size:27px;margin-top:12px}
.map-mode .hero-action{padding:0}
.map-mode .hero-action p{display:none}
@media(max-width:900px){#scene{top:85px;height:calc(100% - 85px)}
.hero{padding:var(--space-lg);max-width:440px}
.hero-action{padding:12px;bottom:40px}
.hero-action p{font-size:8px}
.hero-action .primary{gap:15px}}
@media(max-width:600px){.hero .eyebrow{font-size:7px}
.hero-action{left:16px;right:16px;background:none}
.hero-action .primary{min-height:52px}
.scene-caption{left:16px;top:96px;padding:var(--space-sm);font-size:6.5px}
.scene-tools #map-view{width:65px}
.map-mode #experience{height:760px}
.map-mode .hero-action{bottom:24px}
.exploring #experience{height:800px}}
.marker{transform:translate(-50%,calc(-100% + 13px))}
.marker.active{transform:translate(-50%,calc(-100% + 16px))}
.project-card{background:var(--color-ink-41)}
.marker .label{width:max-content;transform:translateX(var(--label-shift,0px))}
.marker .label small{white-space:nowrap}
/* Slightly darker cartographic background, keeping the forest interface intact. */
#experience{background:var(--color-map-paper)}
.route-note{position:absolute;z-index:5;top:174px;left:4.5%;font-size:10px;letter-spacing:.035em;color:var(--color-ink-42);pointer-events:none}
.route-note span{color:var(--color-accent);font-size:20px;vertical-align:-2px;margin-right:5px}
.marker .label small{letter-spacing:.02em;text-transform:none}
.card-number{line-height:1.6}
@media(max-width:600px){.route-note{top:124px;left:17px;font-size:8px}}
/* Summit pins use a cartographic triangle; the base hut retains its circle. */
.marker .peak-symbol{display:block;flex:none;width:16px;height:16px;overflow:visible;stroke-linejoin:round;filter:drop-shadow(0 1px 2px var(--color-ink-43))}
.marker.active .peak-symbol{width:22px;height:22px;stroke-width:2.2}
/* The opening follows actual loading milestones; terrain deformation happens on the GPU. */
.hero,.hero-action,.scene-tools,.scene-caption,.route-note{transition:opacity .6s ease-out}
.scene-forming .hero,.scene-forming .hero-action,.scene-forming .scene-tools,.scene-forming .scene-caption,.scene-forming .route-note{opacity:0;pointer-events:none}
#loading-terrain{z-index:6;top:23%;width:min(260px,70vw);font-size:12px;letter-spacing:.04em;text-align:left;color:var(--color-ink-44)}
.load-track{height:2px;background:var(--color-ink-45);margin:15px 0 10px;overflow:hidden}
#load-fill{display:block;width:100%;height:100%;background:var(--color-ink-46);transform:scaleX(0);transform-origin:left}
.load-bottom{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-variant-numeric:tabular-nums}
#skip-entrance{font-size:10px;min-height:44px;margin:-12px -8px -12px 0;padding:var(--space-sm)}
@media(prefers-reduced-motion:reduce){.hero,.hero-action,.scene-tools,.scene-caption,.route-note{transition:none}}
/* Local type pairing: Garamond display, Open Sauce interface. */
:root{--font:'Open Sauce',Arial,sans-serif}
body{font-synthesis:none}
.brand>span{font-weight:400;font-size:25px;letter-spacing:-.02em}
h1{font-weight:400;font-size:clamp(48px,4.5vw,70px);line-height:1.01;letter-spacing:-.025em}
h1 em{font-style:italic}
.project-card h2{font-weight:400;font-size:34px;line-height:1.05;letter-spacing:-.02em}
dialog h2{font-weight:400;font-size:58px;letter-spacing:-.025em}
@media(max-width:900px){.brand>span{font-size:23px}
h1{font-size:57px}}
@media(max-width:600px){.hero h1{letter-spacing:-.025em}
dialog h2{font-size:48px}}
.scene-preparing #scene canvas{visibility:hidden}
#detail-loading{position:absolute;left:4.5%;z-index:5;color:var(--color-ink-40);font-size:10px;background:var(--color-paper-33);padding:8px 10px;border-radius:4px}
#retry-detail{font-size:10px;text-decoration:underline;min-height:44px;margin:-10px 0 -10px 8px}
@media(max-width:600px){}
/* Project navigation is independent of the curved panorama-rotation controls. */
.map-project-nav{position:absolute;top:46%;left:4.5%;right:4.5%;z-index:7;display:flex;justify-content:space-between;pointer-events:none;transition:opacity .6s ease-out}
.map-project-nav button{pointer-events:auto;display:grid;place-items:center;width:46px;height:46px;padding:0;color:var(--color-ink-47);background:var(--color-paper-33);border:1px solid var(--color-paper-38);border-radius:6px;box-shadow:0 3px 14px var(--color-ink-39)}
.map-project-nav button:hover:not(:disabled){background:var(--color-ink-23);color:var(--color-paper)}
.map-project-nav button:disabled{opacity:.3;cursor:default}
.map-project-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.scene-forming .map-project-nav{opacity:0;pointer-events:none}
.scene-forming .map-project-nav button{pointer-events:none}
@media(max-width:600px){.map-project-nav button{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.map-project-nav{transition:none}}
/* Gold map accents, with forest-green edges and text for contrast on light terrain. */
.marker .dot{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-ink-48)}
.marker.active .dot{background:var(--color-accent);border-color:var(--color-ink-48);box-shadow:0 1px 5px var(--color-ink-49)}
.marker .peak-symbol{fill:var(--color-accent);stroke:var(--color-ink-48);stroke-width:1.6}
.scene-tools #map-view{width:44px;font-size:12px;font-weight:600}
.scene-tools #map-view[aria-pressed=true]{color:var(--color-accent);background:var(--color-ink-50);border-radius:3px}
.rotation-tools{display:flex;align-items:center;gap:2px}
.rotation-tools>span{font-size:9px;letter-spacing:.04em;margin:0 3px;color:var(--color-surface-36)}
.rotation-tools button{display:grid;place-items:center}
.rotation-tools svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#rotate-right svg{transform:scaleX(-1)}
#detail-loading{top:180px}
@media(max-width:600px){.rotation-tools>span{font-size:8px}
.rotation-tools svg{width:22px;height:22px}}
.scene-tools button{width:44px;min-height:44px}
.rotation-tools button{width:44px}
@media(max-width:600px){}
/* Mobile map controls disclose on demand; the project stays a compact dock. */
#map-tools-toggle{display:none}
@media(max-width:600px){#map-tools-toggle{position:absolute;z-index:9;top:96px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:10px;background:var(--color-paper-34);color:var(--color-ink-35);border:1px solid var(--color-paper-35);border-radius:7px}
#map-tools-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#map-tools-toggle[aria-expanded=true]{background:var(--color-ink-50);color:var(--color-paper);border-color:var(--color-ink-50)}
.scene-tools{top:148px;right:16px;z-index:9;display:none;box-shadow:0 6px 18px var(--color-ink-51)}
.scene-tools.is-open{display:flex}
.scene-forming #map-tools-toggle{visibility:hidden;pointer-events:none}
#detail-loading{top:100px;left:16px;max-width:calc(100% - 88px);font-size:9px}
.exploring #experience,.map-mode #experience{height:100svh;min-height:560px}
.project-card{left:12px;right:12px;bottom:12px;padding:14px 16px 8px;border-radius:8px;box-shadow:none}
.project-card .card-top .eyebrow,.project-card #card-description{display:none}
.project-card .card-top{position:absolute;top:4px;right:4px}
.project-card #close-card{width:44px;height:44px;min-height:44px;font-size:24px}
.project-card .card-number{margin:0 36px 7px 0;letter-spacing:.05em}
.project-card h2{font-size:26px;line-height:1.05;margin:0 24px 5px 0;letter-spacing:-.02em}
.project-card .text-link{min-height:44px;margin-top:var(--space-sm);padding:4px 0 0}
.project-card .text-link span{font-size:22px}
.map-project-nav{top:calc(50% - 60px);left:12px;right:12px}}
.project-pdf{margin-top:var(--space-lg);width:fit-content;min-width:220px}
.project-pdf .pdf-copy{font:600 13px var(--font);line-height:1.4}
.project-pdf small{display:block;font-size:10px;font-weight:400;margin-top:5px}
.project-pdf svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.project-pdf{width:100%}}
/* Four equal quadrants from each supplied image, assigned consistently across the site. */
:root{--muted:var(--color-paper-41)}
.mesh-00{--mesh-image:url('./assets/quadrant-01-01.webp')}
.mesh-01{--mesh-image:url('./assets/quadrant-01-02.webp')}
.mesh-02{--mesh-image:url('./assets/quadrant-01-03.webp')}
.mesh-03{--mesh-image:url('./assets/quadrant-01-04.webp')}
.mesh-04{--mesh-image:url('./assets/quadrant-02-01.webp')}
.mesh-05{--mesh-image:url('./assets/quadrant-02-02.webp')}
.mesh-06{--mesh-image:url('./assets/quadrant-02-03.webp')}
.mesh-07{--mesh-image:url('./assets/quadrant-02-04.webp')}
.mesh-08{--mesh-image:url('./assets/quadrant-03-01.webp')}
.mesh-09{--mesh-image:url('./assets/quadrant-03-02.webp')}
.mesh-10{--mesh-image:url('./assets/quadrant-03-03.webp')}
.mesh-11{--mesh-image:url('./assets/quadrant-03-04.webp')}
.mesh-12{--mesh-image:url('./assets/quadrant-04-01.webp')}
.mesh-13{--mesh-image:url('./assets/quadrant-04-02.webp')}
.mesh-14{--mesh-image:url('./assets/quadrant-04-03.webp')}
.mesh-15{--mesh-image:url('./assets/quadrant-04-04.webp')}
.mesh-16{--mesh-image:url('./assets/quadrant-05-01.webp')}
.mesh-17{--mesh-image:url('./assets/quadrant-05-02.webp')}
.mesh-18{--mesh-image:url('./assets/quadrant-05-03.webp')}
.mesh-19{--mesh-image:url('./assets/quadrant-05-04.webp')}
.mesh-20{--mesh-image:url('./assets/quadrant-06-01.webp')}
.mesh-21{--mesh-image:url('./assets/quadrant-06-02.webp')}
.mesh-22{--mesh-image:url('./assets/quadrant-06-03.webp')}
.mesh-23{--mesh-image:url('./assets/quadrant-06-04.webp')}
.mesh-24{--mesh-image:url('./assets/quadrant-07-01.webp')}
.mesh-25{--mesh-image:url('./assets/quadrant-07-02.webp')}
.mesh-26{--mesh-image:url('./assets/quadrant-07-03.webp')}
.mesh-27{--mesh-image:url('./assets/quadrant-07-04.webp')}
.mesh-28{--mesh-image:url('./assets/quadrant-08-01.webp')}
.mesh-29{--mesh-image:url('./assets/quadrant-08-02.webp')}
.mesh-30{--mesh-image:url('./assets/quadrant-08-03.webp')}
.mesh-31{--mesh-image:url('./assets/quadrant-08-04.webp')}
body{background-color:var(--color-ink-52);background-image:linear-gradient(var(--color-ink-53),var(--color-ink-54)),var(--mesh-image);background-size:cover;background-position:center}
header{background-image:linear-gradient(var(--color-ink-55),var(--color-ink-55)),var(--mesh-image);background-size:cover;background-position:center}
.hero,.hero-action,.explore-caption{background-color:var(--color-ink-56);background-image:linear-gradient(var(--color-ink-57),var(--color-ink-58)),var(--mesh-image);background-size:cover;background-position:center;border-color:var(--color-paper-42)}
.hero .eyebrow,.explore-caption .eyebrow{color:var(--color-paper-43)}
h1 em{color:var(--color-paper-44)}
.project-card{background-color:var(--color-ink-59);background-image:linear-gradient(var(--color-ink-60),var(--color-ink-61)),var(--mesh-image);background-size:cover;background-position:center;border-color:var(--color-paper-45);box-shadow:none}
.project-card .card-top .eyebrow{color:var(--color-paper-46)}
.project-card .card-number{color:var(--color-paper-47)}
.journey,.map-credits,footer{background-image:linear-gradient(var(--color-ink-62),var(--color-ink-63)),var(--mesh-image);background-size:cover;background-position:center;color:var(--color-paper-48)}
.journey-heading,.journey-footer,footer{color:var(--color-paper-48)}
.step span{color:var(--color-paper-48)}
.journey{border-color:var(--color-paper-42)}
.steps:before{background:var(--color-paper-49)}
.step b{background-color:var(--color-ink-64);background-image:linear-gradient(var(--color-ink-65),var(--color-ink-62)),var(--mesh-image);background-size:cover;border-color:var(--color-paper-50);color:var(--color-paper-51)}
.step.active b{background:var(--color-accent);border-color:var(--color-paper);color:var(--color-paper)}
.map-credits{border-color:var(--color-paper-52)}
dialog{background-color:var(--color-ink-66);background-image:linear-gradient(var(--color-ink-67),var(--color-ink-68)),var(--mesh-image);background-size:cover;background-position:center;border-color:var(--color-paper-45)}
.dialog-top,.about-lead,.about-note>span,dt,.source-links a{color:var(--color-paper-53)}

.detail-art svg{display:none}
.detail-art span{font:400 76px/1 var(--font-display);right:18px;top:auto;bottom:10px}
#project-list .list-item{background-image:linear-gradient(var(--color-ink-71),var(--color-ink-72)),var(--mesh-image);background-size:cover;background-position:center;padding-left:12px;padding-right:12px;border-color:var(--color-paper-42)}
#project-list .list-item small{color:var(--color-paper-55)}
#project-list .list-item>span{color:var(--color-paper-47)}
@media(max-width:600px){.hero-action,.map-mode .hero-action{background:none}
.hero-action p{color:var(--color-ink-73)}
.detail-art span{font-size:64px}}
/* Every northeast action arrow rotates east with its link or button. */
.direction-arrow{display:inline-block;flex:none;font-style:normal;transform:rotate(0deg);transform-origin:center;transition:transform 220ms var(--ease-out)}
@media(hover:hover){:is(a,button):hover .direction-arrow{transform:rotate(45deg)}}
:is(a,button):focus-visible .direction-arrow{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.direction-arrow{transition:none}}
/* Transparent navigation sits over the landscape; all navigation ink is forest green. */
header{background:transparent;border-bottom:0}
header .brand,header nav button{color:var(--color-ink-74)}
header .count{color:var(--color-ink-74)}
header :is(a,button):focus-visible{outline-color:var(--color-ink-74)}
#scene{top:0;height:100%}
@media(max-width:600px){#scene{top:0}
.exploring #scene,.map-mode #scene{top:0;height:100%}}
header{--nav-ink:var(--color-ink-76);color:var(--nav-ink);text-shadow:0 1px 2px var(--color-paper-56),0 0 6px var(--color-paper-57)}
header .brand,header nav button,header .count{color:var(--nav-ink)}
header .brand small{color:var(--color-ink-77)}
header .brand svg{filter:drop-shadow(0 1px 2px var(--color-paper-31))}
/* Project narrative: opening, approach and purpose in distinct reading blocks. */
.project-story{max-width:65ch;margin:24px 0 32px;color:var(--color-paper-53)}
.project-story p{margin:0;font-size:16px;line-height:1.8;overflow-wrap:break-word}
.project-story p+p{margin-top:20px}
.project-story p:first-child{font-size:19px;line-height:1.65;color:var(--ink)}
@media(max-width:600px){.project-story{margin:20px 0 28px}
.project-story p{font-size:16px;line-height:1.75}
.project-story p+p{margin-top:20px}
.project-story p:first-child{font-size:18px;line-height:1.65}}
/* Moodboard trial: photographs on covers; original mesh grain on reading surfaces. */
.detail-art{position:relative;overflow:hidden;margin-top:var(--space-lg);background:linear-gradient(var(--color-surface-27),var(--color-ink-25));aspect-ratio:auto;background-color:var(--color-surface-37);background-image:linear-gradient(var(--color-ink-69),var(--color-ink-70)),var(--mesh-image);background-size:cover;background-position:center;border-radius:5px;height:184px}
.detail-art span{color:var(--color-paper);text-shadow:0 2px 12px var(--color-ink-80)}
.about-photo{height:210px;margin:24px 0 28px;border-radius:5px;background-image:url('./assets/moodboard-11.webp');background-size:cover;background-position:50% 80%}
@media(max-width:600px){.detail-art{height:140px}
.about-photo{height:170px;margin:20px 0 24px}}
/* Persistent project navigation within the reading panel. */
.detail-header{top:-30px;z-index:2;background-color:var(--color-ink-66);background-image:linear-gradient(var(--color-ink-68),var(--color-ink-68)),var(--mesh-image);background-size:cover;border-bottom:1px solid var(--color-paper-03)}
.detail-navigation{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-sm);margin-top:var(--space-sm)}
.detail-navigation button{display:flex;align-items:center;gap:var(--space-sm);min-height:44px;padding:8px 4px;font-size:12px}
.detail-navigation button:last-child{justify-content:flex-end}
.detail-navigation #detail-index{justify-content:center;padding:8px 12px}
.detail-navigation svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#detail-counter{font-size:10px;margin-left:6px;color:var(--color-paper-59);font-variant-numeric:tabular-nums}
@media(max-width:600px){.detail-header{top:-22px;margin:-22px -22px 0;padding:12px 22px 8px}
.detail-navigation{grid-template-columns:44px 1fr 44px;gap:4px;margin-top:4px}
.detail-navigation #detail-prev span,.detail-navigation #detail-next span{display:none}
.detail-navigation #detail-prev,.detail-navigation #detail-next{justify-content:center}}
/* Compact editorial reading panel with navigation anchored below the content. */
#detail-dialog{padding:0;overflow:hidden}
#detail-dialog[open]{display:flex;flex-direction:column}
.detail-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 38px 24px}
.detail-header{position:static;margin:0;padding:0;border:0;background:none}
.detail-header .dialog-top{margin:0;min-height:44px}
#detail-dialog .detail-art{margin-top:12px}
#detail-dialog #detail-title{font:600 11px/1.5 var(--font);letter-spacing:1.5px;text-transform:uppercase;margin:24px 0 12px;color:var(--color-paper-53)}
#detail-dialog .project-story{margin-top:0}
#detail-dialog .project-story p:first-child{font:400 27px/1.22 var(--font-display);letter-spacing:-.3px;color:var(--ink);text-wrap:pretty}
.detail-footer{flex:none;padding:6px 38px;background-color:var(--color-ink-66);background-image:linear-gradient(var(--color-ink-68),var(--color-ink-68)),var(--mesh-image);background-size:cover;border-top:1px solid var(--color-paper-03)}
.detail-footer .detail-navigation{margin:0;gap:var(--space-sm)}
.detail-body :last-child{margin-bottom:0}
@media(max-width:600px){.detail-body{padding:12px 22px 24px}
#detail-dialog #detail-title{font-size:10px;letter-spacing:1.2px;margin:20px 0 12px}
#detail-dialog .project-story p:first-child{font-size:25px;line-height:1.24}
.detail-footer{padding:4px 18px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
.detail-footer .detail-navigation{gap:4px}}
/* Remove redundant labels while retaining accessible close controls. */
#index-dialog>.dialog-top,.detail-header .dialog-top{justify-content:flex-end}
#project-pdf .pdf-copy{font-size:13px;line-height:1.4}
/* Translucent floating map controls, with an opaque fallback in older browsers. */
#map-tools,#map-tools-toggle{background:var(--color-paper-60);color:var(--color-ink-81);border:1px solid var(--color-paper-61);border-radius:12px;box-shadow:0 8px 24px var(--color-ink-51);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
#map-tools button:hover{background:var(--color-paper-62);color:var(--color-ink-76);border-radius:7px}
#map-tools #map-view[aria-pressed=true]{background:var(--color-accent);color:var(--color-paper);border-radius:7px}
#map-tools-toggle[aria-expanded=true]{background:var(--color-ink-82);color:var(--color-paper)}
/* Individual navigation components switch ink immediately over dark map areas. */
header .brand>svg,header .brand>span,header nav>button{--nav-ink:var(--color-ink-76);color:var(--nav-ink);transition:none;text-shadow:0 1px 3px var(--color-paper-63)}
header .brand>[data-contrast="light"],header nav>button[data-contrast="light"]{--nav-ink:var(--color-paper);color:var(--color-paper);text-shadow:0 1px 4px var(--color-ink-80)}
header .brand small,header .count{color:inherit}
header .count{border-color:currentColor;box-shadow:none}
header .nav-active:before{background:currentColor;box-shadow:none}
header .brand>svg{filter:none}
header nav button:hover,header .brand:hover{color:inherit}
header nav>button:focus-visible,header .brand:focus-visible{outline-color:currentColor}
@media(max-width:600px){.detail-navigation:has(#detail-next.restart){grid-template-columns:44px 1fr minmax(110px,1fr)}
.detail-navigation #detail-next.restart span{font-size:10px;line-height:1.4;text-align:right}
.detail-navigation #detail-next.restart{gap:4px}}
/* Soft elevation separates open panels from their translucent backdrop. */
dialog{box-shadow:0 28px 72px var(--color-ink-83),0 8px 24px var(--color-ink-84)}
@media(max-width:600px){dialog{box-shadow:0 20px 48px var(--color-ink-83),0 6px 18px var(--color-ink-84)}}
/* Hallmark audit corrections: retain the alpine identity and improve access to the work. */
html,body{overflow-x:clip}
#experience{height:calc(100svh - 145px);min-height:0;max-height:none}
.hero{bottom:24px}
.hero h1{font-size:clamp(38px,4vw,62px)}
.hero p{font-size:14px;line-height:1.65}
.hero-action{bottom:32px}
:is(.primary,.contact-link,.footer-contact,header nav button,.detail-navigation button){white-space:nowrap}
.contact-actions{display:flex;align-items:center;gap:var(--space-lg);margin:28px 0 20px}
.contact-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;text-decoration:underline;text-underline-offset:5px}
#about-explore{background:none;border-color:var(--border);font-size:12px;padding:12px 16px;min-height:44px}
.footer-contact{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:12px}
.marker.active .label{background:var(--color-accent-surface);border-color:var(--color-accent);color:var(--color-paper)}
.marker.active .label small{color:var(--color-paper)}
.step.active b,#map-tools #map-view[aria-pressed=true]{background:var(--color-accent-surface);color:var(--color-paper);border-color:var(--color-accent)}
#map-tools #map-view[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--color-accent)}
::selection{background:var(--color-accent-surface);color:var(--color-paper)}
.brand small{font-size:10px}
.label small{font-size:11px}
.geographic-label small{font-size:10px}
.card-number,#detail-counter{font-size:11px}
.journey-heading,.journey-footer{font-size:10px}
.step span{font-size:11px}
.step b{font-size:10px}
.list-item small{font-size:12px}
.list-heading{font-size:11px}
.eyebrow{font-size:11px}
.map-credits,footer{font-size:11px}
.project-evidence{margin:28px 0 24px}
.project-evidence a{display:block;width:fit-content;max-width:100%;margin-inline:auto;background:transparent;border-radius:4px}
.project-evidence img{display:block;width:auto;max-width:100%;height:auto;border-radius:4px;box-shadow:0 4px 22px var(--color-evidence-shadow)}
.project-evidence figcaption{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted)}
@media(max-width:900px) and (min-width:601px){.hero{max-width:54%;padding:20px}
.hero h1{font-size:44px}
.hero-action{padding:12px;right:4.5%;bottom:32px}
.hero-action .primary{padding:var(--space-md);gap:var(--space-md)}
.hero-action p{font-size:10px}}
@media(max-width:600px){#experience{height:100svh;min-height:560px;max-height:none}
#scene{height:100%}
.hero{bottom:110px;padding:20px;left:16px;right:16px;max-width:none}
.hero h1{font-size:clamp(34px,10.5vw,44px)}
.hero p{font-size:13px;line-height:1.6}
.hero-action{bottom:16px;padding:0}
.hero-action p{font-size:11px}
.brand>span{font-size:20px}
.brand small{font-size:8px;letter-spacing:1px}
.project-card .card-number{font-size:11px}
.project-card .text-link{font-size:13px}
.detail-navigation #detail-index{padding:8px 4px}
.detail-navigation #detail-next.restart span{display:none}
.detail-navigation.has-restart{grid-template-columns:44px minmax(0,1fr) 44px}
.detail-navigation.has-restart #detail-next{grid-column:1/-1;grid-row:2;justify-content:center;min-height:44px;gap:12px}
.detail-navigation.has-restart #detail-next.restart span{display:inline;font-size:12px;line-height:1;text-align:center}
.detail-navigation.has-restart #detail-index{grid-column:2/4;grid-row:1;justify-content:flex-end}
.project-pdf{min-width:0;gap:12px;padding:16px 12px}
#project-pdf .pdf-copy{font-size:12px}
.contact-actions{gap:var(--space-md);flex-wrap:wrap}
.contact-actions .primary{padding:16px 20px;gap:var(--space-lg)}
.eyebrow,.list-heading{font-size:10px}
.label small{font-size:10px}}
@media(max-width:360px){.brand small{display:none}
.brand>span{font-size:19px}
.brand{gap:6px}
header{padding:0 16px}
header nav{gap:var(--space-sm)}
header nav button{font-size:11px}
header .count{margin-left:2px}
.hero{padding:18px}
.hero h1{font-size:34px}}
@media(max-height:620px) and (min-width:601px){.hero h1{font-size:36px}
.hero{padding:18px;bottom:16px}
.hero p{font-size:12px}
.hero-action{bottom:20px}}

/* Final responsive refinements from the audit verification. */
.rotation-tools>span{font-size:11px}
.project-evidence img{max-height:460px;object-fit:contain}
@media(max-width:600px){.brand small{display:none}.rotation-tools>span{display:none}.project-evidence img{max-height:360px}.about-note>span{font-size:11px}}

.detail-body:focus-visible{outline:2px solid var(--color-accent);outline-offset:-3px}

/* Footer content shares a centre line; action arrows use consistent vector strokes. */
footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-md)}
footer>span:first-child{justify-self:start}
footer>span:nth-child(2){justify-self:center;text-align:center}
footer>.footer-contact{grid-column:3;justify-self:end;line-height:1}
.direction-arrow>.arrow-glyph{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.direction-arrow{vertical-align:middle}

#detail-dialog #detail-title{margin-top:12px}

/* Project stories: approved narrative, choices and evidence share one reading space. */
#detail-dialog{width:min(1080px,calc(100% - 64px));max-width:1080px}
#detail-dialog .detail-body{padding:16px 44px 36px}
#detail-label{font:600 11px/1.6 var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--color-paper-53);margin:12px 48px 16px 0}
#detail-dialog #detail-title{font:400 clamp(28px,3vw,40px)/1.13 var(--font-display);text-transform:none;letter-spacing:-.02em;color:var(--ink);max-width:39ch;margin:0 0 36px;text-wrap:pretty}
.detail-story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:44px;margin:0 0 32px}
#detail-dialog:not(.has-evidence) .detail-story-layout{display:block}
#detail-dialog:not(.has-evidence){max-width:760px}
#detail-dialog .project-story{margin:0;max-width:65ch}
.project-story section+section{margin-top:28px}
#detail-dialog .project-story h3,.project-evidence h3{font:500 17px/1.4 var(--font-body);color:var(--ink);margin:0 0 12px;letter-spacing:0}
#detail-dialog .project-story p,#detail-dialog .project-story p:first-child{font:400 15px/1.8 var(--font-body);color:var(--color-paper-53);letter-spacing:0;margin:0}
#detail-dialog .project-evidence{min-width:0;margin:0}
#detail-dialog .project-evidence img{max-height:540px}
#detail-dialog .project-evidence figcaption{margin-top:16px}
#evidence-caption{font:400 13px/1.7 var(--font-body);margin:0 0 8px;color:var(--color-paper-53)}
#evidence-page{font-size:11px;line-height:1.5;color:var(--muted)}
.detail-footer{padding-inline:44px}
.project-card #card-type{max-width:calc(100% - 28px);line-height:1.5}
@media(max-width:800px){#detail-dialog{width:calc(100% - 40px)}
.detail-story-layout{grid-template-columns:minmax(0,1fr);gap:32px}
#detail-dialog #detail-title{max-width:34ch;font-size:32px}
#detail-dialog .project-evidence img{max-height:480px}}
@media(max-width:600px){#detail-dialog{width:calc(100% - 32px)}
#detail-dialog .detail-body{padding:12px 22px 28px}
#detail-label{font-size:10px;letter-spacing:.8px;margin-top:12px}
#detail-dialog #detail-title{font-size:28px;line-height:1.16;margin-bottom:28px}
#detail-dialog .project-story p,#detail-dialog .project-story p:first-child{font-size:15px;line-height:1.75}
#detail-dialog .project-story h3,.project-evidence h3{font-size:16px}
#detail-dialog .project-evidence img{max-height:420px}
.detail-footer{padding-inline:18px}
.project-card h2{font-size:25px}}

/* Roomier project preview with one readable identifying line. */
.project-card{width:440px;max-width:calc(100% - 48px);box-shadow:0 28px 72px var(--color-ink-83),0 8px 24px var(--color-ink-84)}
.project-card .card-top{align-items:center;margin-bottom:20px;gap:16px}
.project-card #card-type{display:block;font:500 13px/1.5 var(--font-body);letter-spacing:.02em;text-transform:none;color:var(--ink)}
@media(max-width:600px){.project-card{width:auto;max-width:none;box-shadow:0 20px 48px var(--color-ink-83),0 6px 18px var(--color-ink-84)}
.project-card .card-top{position:static;margin-bottom:10px;gap:12px;min-height:24px;padding-right:28px}
.project-card #card-type{font-size:12px;max-width:100%}
.project-card #close-card{position:absolute;top:4px;right:4px}}
@media(min-width:601px){.map-project-nav{left:16px;right:16px}}

/* Evidence edges follow the actual image, including portrait extracts. */
#detail-dialog #detail-title{margin-bottom:56px}
#detail-dialog .project-evidence{width:min(100%,calc(540px * var(--evidence-ratio,1.5)));justify-self:center}
#detail-dialog .project-evidence a{width:100%;margin-inline:0}
#detail-dialog .project-evidence img{width:100%;max-height:none}
html[data-input="pointer"] :focus-visible{outline:none}
@media(max-width:800px){#detail-dialog .project-evidence{width:min(100%,calc(480px * var(--evidence-ratio,1.5)))}}
@media(max-width:600px){#detail-dialog #detail-title{margin-bottom:40px}
#detail-dialog .project-evidence{width:min(100%,calc(420px * var(--evidence-ratio,1.5)))}}

/* The email uses a restrained dark shadow instead of the pale evidence halo. */
#detail-dialog[data-project="7"] .project-evidence img{box-shadow:0 8px 18px var(--color-ink-84)}

/* Golden proportions guide composition; readable copy and native image ratios take precedence. */
#detail-dialog{width:min(1120px,calc(100% - 64px));max-width:1120px}
#detail-dialog .detail-body{padding:var(--space-golden-md) var(--space-golden-xl) var(--space-golden-lg)}
.detail-story-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:var(--space-golden-xl);margin-bottom:var(--space-golden-lg)}
#detail-label{margin-bottom:var(--space-golden-md)}
#detail-dialog #detail-title{max-width:61.8%;margin-bottom:var(--space-golden-xl);font-size:clamp(32px,3vw,39px)}
#detail-dialog:not(.has-evidence) #detail-title{max-width:100%}
.project-story section+section{margin-top:var(--space-golden-lg)}
#detail-dialog .project-story h3,.project-evidence h3{margin-bottom:var(--space-golden-sm)}
#detail-dialog .project-evidence figcaption{margin-top:var(--space-golden-md)}
.detail-footer{padding-inline:var(--space-golden-xl)}
.project-card .card-top{margin-bottom:var(--space-golden-md)}
@media(max-width:900px){
.detail-story-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-golden-lg)}
#detail-dialog #detail-title{max-width:100%;font-size:32px}
#detail-dialog .detail-body{padding-inline:var(--space-golden-lg)}
.detail-footer{padding-inline:var(--space-golden-lg)}}
@media(max-width:600px){
#detail-dialog{width:calc(100% - 32px)}
#detail-dialog .detail-body{padding:var(--space-golden-sm) var(--space-golden-md) var(--space-golden-lg)}
#detail-dialog #detail-title{font-size:28px;margin-bottom:var(--space-golden-lg)}
.detail-footer{padding-inline:var(--space-golden-md)}
.project-card .card-top{margin-bottom:var(--space-golden-sm)}}

/* The full project action stays in view while the narrative scrolls. */
.detail-primary-action{display:flex;justify-content:flex-end;padding:var(--space-golden-sm) 0}
.detail-primary-action:has(#project-pdf[hidden]){display:none}
.detail-primary-action #project-pdf{margin:0;min-height:44px;padding:12px 18px;gap:var(--space-golden-md);min-width:0}
.detail-primary-action #project-pdf .pdf-copy{font-size:13px}
.detail-primary-action #project-pdf svg{width:20px;height:20px}
.detail-primary-action+.detail-navigation{border-top:1px solid var(--border);padding-top:6px}
.detail-primary-action:has(#project-pdf[hidden])+.detail-navigation{border-top:0;padding-top:0}
@media(max-width:600px){.detail-primary-action{padding:10px 0}
.detail-primary-action #project-pdf{width:100%;justify-content:space-between;padding:12px 14px}
.detail-primary-action #project-pdf .pdf-copy{font-size:12px}}