:root{color-scheme:dark;--white:#fff;--soft:#d5d5da;--red:#ff152a;--visible-height:100vh;--frame-ratio:1.7768331562}
@supports(height:100svh){:root{--visible-height:100svh}}
@supports(height:100dvh){:root{--visible-height:100dvh}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080a0e;color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}a:focus{outline:3px solid #ff4050;outline-offset:4px}a:hover{color:#fff}.symbols{position:absolute;width:0;height:0;overflow:hidden}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{position:fixed;top:12px;left:12px;padding:14px 20px;background:#080a0e;z-index:20}
/* Test 1: full contained photo, with the existing cards over its lower edge. */
.page{min-height:var(--visible-height);padding:16px;display:flex;align-items:center;justify-content:center;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-left:calc(16px + env(safe-area-inset-left,0px))}
.composition{width:100%;max-width:calc((var(--visible-height) - 60px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 1.7768331562);display:grid;grid-template-columns:minmax(0,1fr);gap:12px;grid-gap:12px}
.photo{position:relative;width:100%;background:#080a0e;isolation:isolate}
.background{display:block;width:100%;height:auto;object-fit:contain}
.site-header{position:fixed;left:50vw;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));max-width:calc((var(--visible-height) - 60px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 1.7768331562);height:54px;padding:0 clamp(12px,1.5vw,28px) 0 0;display:flex;align-items:center;justify-content:flex-end;gap:20px;z-index:5}
.photo>.site-header{position:absolute;left:0;right:0;top:12px;transform:none;width:100%;max-width:none}
.site-header nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,38px)}.site-header nav a{position:relative;display:flex;align-items:center;min-height:44px;font-size:clamp(13px,1.15vw,18px);font-weight:500;letter-spacing:.2px;line-height:1.3;text-shadow:0 2px 5px #000,0 0 10px #000}.site-header nav a:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .15s}.site-header nav a[aria-current=page]:after,.site-header nav a:hover:after,.site-header nav a:focus:after{transform:scaleX(1)}
.intro{position:absolute;left:4%;top:5%;width:32%;z-index:1}.intro-content{width:100%}h1{margin:0;font-size:inherit;line-height:0}.signature{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 10px #000b)}.interests{position:relative;left:50%;transform:translateX(-50%);width:max-content;max-width:none;margin:12px 0 0;white-space:nowrap;text-align:center;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(12px,.9vw,15px);font-weight:400;line-height:1.5;letter-spacing:.075em;color:#e8e1dc;text-shadow:0 2px 4px #000,0 0 8px #000}
@media(min-width:900px){.intro{top:max(5%, calc(58px + env(safe-area-inset-top,0px)))}}
main{position:absolute;left:6%;right:6%;bottom:12px;z-index:3}.projects{min-width:0}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-gap:12px;list-style:none;padding:0;margin:0}.project{min-width:0;border:1px solid rgba(255,255,255,.23);border-radius:10px;background:rgba(5,9,15,.68);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 4px 18px #0002;transition:border-color .15s,background .15s,box-shadow .15s}.project:hover{border-color:#ffffff80;background:rgba(12,17,24,.8);box-shadow:0 5px 20px #0004}.project-link{height:100%;display:block;border-radius:10px}.project-info{display:grid;grid-template-columns:22px minmax(0,1fr) 14px;align-items:center;gap:10px;grid-gap:10px;padding:10px clamp(12px,1.4vw,24px);height:62px}.project-icon{width:22px;height:22px;stroke-width:1.7}h2{margin:0;font-size:clamp(12px,1.05vw,17px);line-height:1.4;font-weight:650;letter-spacing:.2px}.arrow{width:14px;height:14px;stroke-width:1.6;color:#d2d4da;transition:color .15s}.project:hover .arrow{color:#ff4050}
footer{display:flex;justify-content:center;align-items:center;gap:12px;text-align:center;color:#c5c5cb;font-size:12px;line-height:16px;height:16px}
footer a:hover,footer a:focus{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
@media(min-width:601px) and (max-width:1100px){.project-info{grid-template-columns:18px minmax(0,1fr) 12px;gap:6px;grid-gap:6px;padding:10px}.project-icon{width:18px;height:18px}.arrow{width:12px;height:12px}.site-header nav{gap:20px}}
/* Phones retain readable controls and may scroll; the full photo remains visible. */
@media(max-width:600px){
.page{padding:20px;min-height:var(--visible-height)}.composition{width:100%;max-width:none;gap:16px;grid-gap:16px}
.photo{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "visual" "links"}
.site-header{left:50%;width:calc(100% - 40px);padding:0 12px 0 0}
.photo>.site-header{grid-area:visual;position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:none;align-self:start}
.site-header nav{width:auto;gap:clamp(12px,3vw,20px)}.site-header nav a{font-size:13px;min-height:44px}
.intro{grid-area:intro;position:relative;left:auto;top:auto;width:100%;margin:0 0 24px}.intro-content{width:100%}.signature{width:75%;max-width:300px}.interests{left:50%;width:max-content;max-width:100%;margin:12px 0 0;white-space:normal;font-size:12px;letter-spacing:.035em}
.background{grid-area:visual}main{grid-area:links;position:static;margin-top:16px}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;grid-gap:12px}.project-info{height:74px;grid-template-columns:18px minmax(0,1fr) 12px;padding:10px;gap:6px;grid-gap:6px}.project-icon{width:18px;height:18px}h2{font-size:12px}.arrow{width:12px;height:12px}footer{height:auto;flex-wrap:wrap;gap:2px;font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Information pages share the portal's dark palette and native typography. */
.information-page{min-height:100vh;background:radial-gradient(ellipse at 20% 0%,#1b222b 0%,#080a0e 55%);color:#f5f3f1}
.information-shell{min-height:100vh;max-width:1120px;margin:auto;padding:105px clamp(22px,4vw,48px) 28px;display:flex;flex-direction:column}
.information-footer a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px}
.information-content{width:min(100%,720px);margin:clamp(36px,6vw,80px) auto 72px;position:static;z-index:auto;left:auto;right:auto;bottom:auto;order:0;scroll-margin-top:92px}
.information-content .eyebrow{color:#d4a9aa;letter-spacing:.19em;text-transform:uppercase;font-size:12px;font-weight:700;margin:0 0 10px}
.information-content h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,5vw,58px);font-weight:400;line-height:1.13;margin:0 0 28px}.information-content h1:after{content:"";display:block;width:68px;height:3px;background:var(--red);margin-top:24px}
.information-content h2{font-size:clamp(19px,2vw,24px);font-weight:600;margin:34px 0 10px;color:#fff}
.information-content p{font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:#d5d5da;margin:0 0 18px}
.information-content .notice{border-left:3px solid var(--red);background:#ffffff0b;padding:15px 18px;color:#f0e9e7}
.text-link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ff4050}.text-link:hover{color:#ff6a76}
.information-footer{height:auto;line-height:1.6;margin-top:auto;padding-top:22px;border-top:1px solid #ffffff23;font-size:13px;color:#c5c5cb;display:block;text-align:center}
@media(max-width:600px){.information-shell{padding:142px 20px 20px}.information-content{margin:38px auto 64px}.information-content h1{font-size:36px}}