/* XAI's established dark ink, blue accents, and editorial typography. */
.portfolio-toolbar{max-width:1680px;margin:auto;padding:0 7% 25px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#a7c7df}
.portfolio-toolbar>.eyebrow{font-size:9px}.view-switch{display:flex;gap:8px}.view-switch button{font-size:12px;padding:12px 16px;border:1px solid #a7c7df40;display:flex;gap:16px;align-items:center}.view-switch button[aria-pressed=true]{background:#a7c7df;color:#101419}.view-switch button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.portfolio-list.is-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.portfolio-list.is-grid .portfolio-row{display:flex;flex-direction:column;gap:26px}.portfolio-list.is-grid .portfolio-image{order:-1}.portfolio-list.is-grid .portfolio-info{display:flex;flex:1}.portfolio-list.is-grid .portfolio-info h2{font-size:36px}.portfolio-list.is-grid .portfolio-description{max-width:100%;margin-bottom:24px}.portfolio-list.is-grid .portfolio-number{margin-bottom:14px}
@media(max-width:700px){.portfolio-list.is-grid{grid-template-columns:1fr}.portfolio-toolbar{padding-bottom:18px}.view-switch button{padding:10px;gap:8px}}
.projects-page{background:var(--ink);color:var(--paper)}
.projects-page .header:before{opacity:.98}
.portfolio-header-actions{display:flex;align-items:center;gap:34px}
.portfolio-header-actions .menu-toggle{position:relative;inset:auto;width:44px;height:44px;transform:none}
.portfolio-intro,.portfolio-list,.portfolio-connect{max-width:1680px;margin:auto;padding-inline:7%}
.portfolio-intro{padding-top:205px;padding-bottom:75px}
.portfolio-intro>.eyebrow{color:#91b6d3;margin-bottom:30px;font-size:10px}
.portfolio-intro h1{font-size:clamp(52px,6.3vw,96px);font-weight:500;line-height:1.08;letter-spacing:-.045em}
.portfolio-intro h1 em{color:#a7c7df}
.portfolio-intro-bottom{margin-top:42px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.portfolio-intro-bottom p{font-size:15px;line-height:1.8;color:#a5afb9}
.portfolio-index{display:inline-flex;align-items:center;gap:30px;font-size:9px;letter-spacing:.13em;padding-bottom:10px;border-bottom:1px solid #a7c7df55}
.portfolio-index span{font-size:17px;color:#a7c7df}
.portfolio-row{display:grid;grid-template-columns:29% minmax(0,1fr);gap:5%;padding:32px 0 42px;border-top:1px solid #c2d6e02b;scroll-margin-top:120px}
.portfolio-info{display:flex;flex-direction:column;align-items:flex-start;padding:5px 0 8px}
.portfolio-number{color:#89a2b8;font-size:9px;margin-bottom:25px;letter-spacing:.12em}
.portfolio-info h2{font-size:clamp(36px,3.4vw,54px);font-weight:500;line-height:1.15;letter-spacing:-.035em}
.portfolio-category{font-size:9px;letter-spacing:.14em;color:#a8c4d9;margin-top:25px}
.portfolio-description{max-width:245px;font-size:14px;line-height:1.8;color:#94a2af;margin:22px 0 40px}
.portfolio-open{display:flex;gap:45px;justify-content:space-between;align-items:center;border-bottom:1px solid #b9c7d05c;padding:12px 0;font-size:12px;margin-top:auto}
.portfolio-open span{color:#a7c7df;transition:transform .3s}.portfolio-open:hover span{transform:translate(3px,-3px)}
.portfolio-image{display:block;position:relative;overflow:hidden;padding:0;width:100%;aspect-ratio:1.6;background:#0b1016;border-radius:2px;text-align:left}
.portfolio-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.portfolio-image:hover img,.portfolio-image:focus-visible img{transform:scale(1.055)}
.portfolio-image-contain img{object-fit:contain;background:#020302;padding:8%}
.portfolio-image-hint{position:absolute;right:24px;bottom:24px;background:#101419d9;color:#eef4f9;padding:12px 16px;font-size:9px;letter-spacing:.12em;opacity:0;translate:0 8px;transition:opacity .3s,translate .3s}
.portfolio-image:hover .portfolio-image-hint,.portfolio-image:focus-visible .portfolio-image-hint{opacity:1;translate:0 0}
.portfolio-list{padding-bottom:65px}
.portfolio-connect{padding-top:80px;padding-bottom:100px;border-top:1px solid #c2d6e02b}
.portfolio-connect .eyebrow{color:#91b6d3;margin-bottom:26px}
.portfolio-connect h2{font-size:clamp(39px,4.6vw,68px);font-weight:500}
.portfolio-connect h2 em{color:#a7c7df}
.portfolio-connect .contact-link{font-size:18px;border-color:#b9c7d05c;margin-top:35px}
.projects-page .footer{border-top:1px solid #c2d6e016}
.projects-page .detail-dialog{background:#171f27}.projects-page .detail-dialog h2{font-size:clamp(32px,4vw,52px)}
@media(max-width:800px){.portfolio-header-actions{gap:12px}.portfolio-intro{padding-top:155px;padding-bottom:50px}.portfolio-intro h1{font-size:clamp(43px,8vw,64px)}.portfolio-intro-bottom{align-items:flex-start;flex-direction:column;gap:25px;margin-top:28px}.portfolio-intro-bottom p{font-size:14px}.portfolio-row{grid-template-columns:1fr;gap:25px;padding:28px 0 36px}.portfolio-info{display:grid;grid-template-columns:1fr auto;column-gap:20px}.portfolio-number,.portfolio-info h2,.portfolio-category,.portfolio-description{grid-column:1}.portfolio-number{margin-bottom:16px}.portfolio-info h2{font-size:39px}.portfolio-category{margin-top:18px}.portfolio-description{margin:18px 0 0;max-width:330px}.portfolio-open{grid-column:2;grid-row:2 / 5;align-self:end;gap:15px;font-size:11px;margin:0}.portfolio-image{aspect-ratio:1.4}.portfolio-image-hint{display:none}.portfolio-connect{padding-top:55px;padding-bottom:65px}.portfolio-connect h2{font-size:40px}.portfolio-list{padding-bottom:30px}}
@media(max-width:400px){.portfolio-info{grid-template-columns:1fr}.portfolio-open{grid-column:1;grid-row:auto;justify-self:start;margin-top:20px;gap:40px}.portfolio-intro h1{font-size:43px}.portfolio-connect h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.portfolio-image:hover img,.portfolio-image:focus-visible img{transform:none}}