/* Navigation */
.navigation{justify-content:flex-start}
.navigation .wordmark{display:inline-flex;align-items:baseline;gap:.5em;font:500 clamp(17px,1.55vw,23px)/1 'Manrope',sans-serif;letter-spacing:.08em;white-space:nowrap;text-shadow:0 2px 22px #001a;transition:opacity .25s ease,transform .25s ease}
.navigation .wordmark span{font:inherit;letter-spacing:inherit}
.navigation .wordmark:hover{opacity:1;transform:translateY(-1px)}
.navigation nav{margin-left:auto}

/* Two rows of translucent folders; preview images remain fully opaque. */
.folder-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:930px;gap:155px 180px;margin:auto}
.folder-project{font-size:26px}
.folder-type,.folder-file span{font-size:10px}
.folder-caption{font-size:14px}
.floating-title{max-width:850px;margin:0 auto 115px}

/* Vertical clock dial, directly below the clock button. */
.time-panel{width:170px;height:330px;right:calc(4.5vw - 39px);top:88px;padding:0;background:none;box-shadow:none;border:0;backdrop-filter:none;border-radius:0}
.time-panel[hidden]{display:none!important}
.time-dial{position:absolute;right:39px;top:15px;width:48px;height:260px}
.time-ticks{position:absolute;inset:0;pointer-events:none}
.time-ticks i{position:absolute;height:1px;right:0;width:23px;background:#ffffff90;transform:translateY(-50%)}
.time-ticks i.major{width:47px;background:#ffffffcd}
.time-ticks i.medium{width:34px}
.time-panel input#hour{position:absolute;inset:0;width:48px;height:260px;margin:0;writing-mode:vertical-lr;direction:rtl;opacity:0;cursor:ns-resize;touch-action:none}
.time-dial:focus-within{outline:1px solid #ffffff50;outline-offset:10px;border-radius:2px}
.time-marker{position:absolute;right:-7px;top:var(--clock-position,27%);height:1px;width:64px;background:#fff;box-shadow:0 0 8px #ffffff60;pointer-events:none;transition:top .07s linear}
.time-panel #time-value{position:absolute;right:61px;top:var(--clock-position,27%);transform:translateY(-50%);font:italic 15px Georgia,serif;color:#fff;white-space:nowrap;text-shadow:0 2px 8px #000;pointer-events:none}
.time-panel #local-time{position:absolute;top:293px;right:18px;width:130px;margin:0;text-align:center;font:italic 12px Georgia,serif;color:#ffffffc7;text-shadow:0 2px 8px #000}

/* Shared footer: watercolor edges blend into the page with real image alpha. */
#bio-story{background:linear-gradient(#03080b00,#03080be8 16%,#000 82%,#000)}
.footer-art{background:#000;min-height:0;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.5fr);grid-template-rows:auto 1fr auto;padding:72px 0 0 7vw;gap:0 4vw}
.footer-art::before,.footer-art::after{content:none}
.footer-content{display:contents}
.footer-content>div{grid-column:1;grid-row:1;position:relative;z-index:1;padding-right:1vw}
.footer-art h2{max-width:600px;font-size:clamp(36px,4.2vw,64px);line-height:1.1;margin:0;letter-spacing:-.05em}
.footer-art .eyebrow{font-size:12px;letter-spacing:1.6px;margin:0 0 22px;line-height:1.8}
.footer-art .footer-email{display:inline-block;font-size:clamp(15px,1.3vw,19px);margin-top:25px;margin-bottom:0;overflow-wrap:anywhere;max-width:100%}
.footer-nav{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1.25fr;align-self:end;gap:32px;padding:70px 1vw 28px 0;position:relative;z-index:1}
.footer-nav>div{display:flex;flex-direction:column;align-items:flex-start;gap:18px;font-size:14px}
.footer-nav span{color:#8b9698;font-size:12px;margin-bottom:8px}
.footer-landscape{display:block;position:relative;grid-column:2;grid-row:1/4;align-self:end;width:100%;height:auto;margin:0;opacity:1;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.62) 13%,#000 24%);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.62) 13%,#000 24%)}
.footer-art .footer-line{position:relative;grid-column:1;grid-row:3;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:14px 1vw 28px 0;margin:0;font-size:12px;line-height:1.5;color:#c6cece;background:#000;text-shadow:none;z-index:1}
.advanced-features{margin:70px 0 45px}
.advanced-features>h2{font:500 clamp(30px,3.2vw,46px)/1.15 'Manrope',sans-serif;letter-spacing:-.045em;max-width:680px;margin:0 0 38px}
.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px 50px}
.advanced-feature{border-top:1px solid #ffffff25;padding-top:22px}
.advanced-feature>span{display:block;font-size:11px;letter-spacing:1.2px;color:#9cb6b9;margin-bottom:12px}
.advanced-feature h3{font:500 21px/1.35 'Manrope',sans-serif;letter-spacing:-.035em;margin:0 0 12px}
.advanced-feature p{font-size:15px;line-height:1.8;color:#c6d0d0;margin:0}
.detail-intro h2{line-height:1.5}
@media(max-width:700px){.advanced-grid{grid-template-columns:1fr;gap:28px}.advanced-features{margin-top:45px}.advanced-feature h3{font-size:21px}}
/* Project navigation belongs to the scrolling project panel, not the hidden hero. */
#project-overlay{background:#080e11;backdrop-filter:none;scrollbar-gutter:stable}
.project-navigation{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 4.5vw;background:#080e11f5;border-bottom:1px solid #ffffff14;backdrop-filter:blur(16px)}
.project-navigation .wordmark{display:inline-flex;align-items:baseline;gap:.5em;font:500 23px/1 'Manrope',sans-serif;letter-spacing:.08em;white-space:nowrap}
.project-navigation .wordmark span{font:inherit;letter-spacing:inherit}
.project-navigation nav{display:flex;align-items:center;gap:32px;font-size:14px}
.project-navigation sup{font-size:10px;opacity:.6;margin-left:4px}
.project-navigation a[aria-current]{text-decoration:underline;text-underline-offset:7px}
.project-navigation .detail-close{margin:0;width:38px;height:38px;display:grid;place-items:center;border:1px solid #ffffff38;border-radius:50%;font-size:26px;line-height:1}
.project-detail{padding:30px 7vw 65px;animation:none;max-width:1450px}
.detail-topline{position:static;background:none;backdrop-filter:none;padding:0;min-height:35px;font-size:14px}
.detail-topline>span{font-size:12px}
.detail-gallery img,.detail-visual img{height:auto}
.modal-open>.navigation{visibility:hidden}
.folder-file{will-change:auto}
.folder-card:hover .folder-file,.folder-card:focus-visible .folder-file{will-change:transform}
.footer-nav a,.navigation a,.project-navigation nav a{min-height:30px;display:inline-flex;align-items:center}
.footer-nav>div:last-child::after{content:"";display:block;width:150px;height:52px;margin:8px 0 0;background:url('/corso-signature.png?v=3') left center/contain no-repeat;opacity:.95;pointer-events:none}

@media(max-width:1000px){
 .folder-grid{gap:135px 90px;max-width:795px}
}
@media(max-width:700px){
 .folder-grid{gap:110px 40px}
 .folder-project{font-size:16px}
 .folder-type{font-size:7px;letter-spacing:.6px}
 .folder-file span{font-size:7px}
 .folder-caption{font-size:11px}
 .floating-title{margin-bottom:80px}
 .time-panel{right:calc(6vw - 44px);top:74px;width:165px;height:225px}
 .time-dial,.time-panel input#hour{height:170px}
 .time-panel #local-time{top:197px}
 .navigation{gap:12px}
 .navigation .wordmark{font-size:17px}
 .navigation nav{gap:14px}
 .footer-art{display:flex;padding:48px 0 0;gap:0}
 .footer-content{display:grid;grid-template-columns:1fr;gap:38px;padding:0 7vw}
 .footer-content>div{padding:0}
 .footer-art h2{max-width:390px;font-size:39px}
 .footer-art .eyebrow{font-size:11px}
 .footer-nav{display:grid;gap:24px;padding:0}
 .footer-nav>div{gap:10px;font-size:14px}
 .footer-landscape{width:100%;max-width:none;align-self:center;margin-top:26px;order:2;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 8%,#000 18%);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 8%,#000 18%)}
 .footer-art .footer-line{padding:20px 7vw 24px;gap:15px;font-size:12px;flex-wrap:wrap;order:3}
 .project-navigation{padding:17px 6vw;gap:12px}
 .project-navigation .wordmark{font-size:18px}
 .project-navigation nav{gap:14px;font-size:13px}
 .project-navigation .detail-close{width:32px;height:32px;font-size:23px}
 .project-detail{padding:23px 6vw 45px}
 .detail-intro h1{font-size:clamp(36px,11vw,51px)}
 .next-project a{align-items:flex-start;gap:16px}
 .next-project span{text-align:right}
}
@media(prefers-reduced-motion:reduce){.time-marker{transition:none}}

/* Project video and a quiet decorative backdrop behind a project sheet. */
.detail-video video{display:block;width:100%;height:auto;max-height:680px;aspect-ratio:16/9;background:#0b1a22;border-radius:3px;box-shadow:0 15px 35px #0005}
.detail-gallery figure:last-child:nth-child(odd){grid-column:1/-1}
.detail-gallery figure:last-child:nth-child(odd) img{aspect-ratio:auto;max-height:640px}
.project-backdrop{pointer-events:none;z-index:0}
.project-backdrop img{display:block;width:100%;height:100%;object-fit:cover}
.project-backdrop~.project-detail,.project-backdrop~.footer-art{position:relative;z-index:1}
/* Meridian: a quiet Art Nouveau line drawing that draws itself once. */
.project-backdrop--line{position:fixed;right:-2vw;bottom:-4vh;width:min(44vw,700px,80vh);opacity:.1;mask-image:linear-gradient(to top,#000 55%,transparent);-webkit-mask-image:linear-gradient(to top,#000 55%,transparent)}
.project-backdrop--line img{height:auto;object-fit:contain}
/* PolyQuant: an explorer's desk at candlelight opening the sheet, fading into the page. */
.project-backdrop--scene{position:absolute;left:0;right:0;top:0;height:min(100vh,980px);opacity:.42;overflow:hidden;mask-image:linear-gradient(#000 45%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);-webkit-mask-image:linear-gradient(#000 45%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.project-backdrop--scene img{object-position:62% 55%;animation:backdrop-drift 26s ease-in-out infinite alternate}
@keyframes backdrop-drift{from{transform:scale(1.06) translateX(-1.2%)}to{transform:scale(1) translateX(0)}}
@media(prefers-reduced-motion:reduce){.project-backdrop--scene img{animation:none}}
@media(max-width:700px){.project-backdrop--line{display:none}.project-backdrop--scene{height:70vh;opacity:.34}.project-backdrop--scene img{object-position:52% 50%}}