/* Portfolio is intentionally static and restrained: the work is the interaction. */
/* On the draft homepage only, keep the portfolio on the same working URL. */
#portfolio-preview-view{display:none}
#portfolio-preview-view:target{display:block}
body:has(#portfolio-preview-view:target) > #main{display:none}
.portfolio-preview-return{padding-top:24px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.portfolio-preview-return a{color:var(--cyan);font-weight:700}
#portfolio-preview-view .portfolio-intro{padding-top:42px}
@media(max-width:650px){.portfolio-preview-return{flex-direction:column;align-items:flex-start;gap:8px}}
.portfolio-page{background:#020e14;color:var(--ink)}
.portfolio-page .nav-row nav{padding-right:170px}
.portfolio-page .nav-row nav .is-current{color:var(--coral);border-bottom:1px solid var(--coral)}
.portfolio-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(295px,.65fr);gap:clamp(35px,6vw,130px);align-items:end;padding-block:clamp(65px,8vw,130px) 84px;border-bottom:1px solid var(--line)}
.portfolio-intro h1{font:clamp(57px,6vw,104px)/.98 var(--serif);margin:0 0 28px}
.portfolio-intro h1 em{color:var(--cyan)}
.portfolio-lead{font:clamp(21px,2.1vw,30px)/1.42 var(--serif);color:#cee2e8;max-width:830px;margin:0}
.portfolio-manifesto{border-top:2px solid var(--coral);background:#071d27;padding:27px 31px 31px}
.manifesto-index{font-size:12px;color:var(--coral);letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.portfolio-manifesto p{font-size:16px;line-height:1.75;color:#c5dae2;margin:17px 0 24px}
.portfolio-manifesto p em{color:var(--ink)}
.portfolio-manifesto a{font-size:13px;font-weight:700;color:var(--cyan);border-bottom:1px solid #34737a}
.portfolio-section{padding-block:95px 45px}
.section-heading{max-width:900px;margin-bottom:45px}
.section-heading h2{font:clamp(42px,4.3vw,67px)/1.03 var(--serif);letter-spacing:-.026em;margin:0 0 18px}
.section-heading>p:not(.eyebrow){font-size:18px;color:#bcd3dd;line-height:1.65;max-width:750px}
.case-study{display:grid;grid-template-columns:minmax(250px,.78fr) minmax(400px,1.22fr);gap:clamp(50px,7vw,140px);border-top:1px solid #265564;padding-block:56px 75px}
.case-side{align-self:start}
.case-number,.case-category{display:block;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.case-number{color:var(--coral);margin-bottom:32px}
.case-category{color:var(--cyan);margin-bottom:14px}
.case-side h3{font:clamp(36px,3.3vw,56px)/1.05 var(--serif);letter-spacing:-.025em;margin:0 0 25px}
.case-side>p{font:21px/1.5 var(--serif);color:#ccdee4;max-width:540px;margin-bottom:28px}
.case-main{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.case-main>div{border-left:1px solid #34606c;padding-left:22px}
.case-main h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:1px 0 11px}
.case-main p{font-size:16px;line-height:1.72;color:#bfd5dd;margin:0}
.case-main .case-caution{border-color:var(--coral);background:#0a2027;padding:17px 21px}
.case-caution strong{display:block;color:var(--coral);font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.portfolio-development{border-block:1px solid var(--line);padding-block:86px 92px;background:radial-gradient(ellipse at 18% 5%,#07404a55,transparent 52%),#051820}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.concept-card{border:1px solid #245363;background:#04131b;padding:36px 35px;min-width:0}
.concept-card .case-number{margin-bottom:27px}
.concept-card h3{font:clamp(31px,2.75vw,46px)/1.08 var(--serif);margin:0 0 18px}
.concept-card>p:not(.concept-note){font-size:17px;line-height:1.68;color:#c3d7df;margin-bottom:26px}
.concept-card h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.concept-card ul{padding-left:20px;color:#c6dce3;font-size:15px;line-height:1.9;margin:0 0 27px}
.concept-card li::marker{color:var(--cyan)}
.concept-card .concept-note{color:#ffc7b9;font-size:13px;font-weight:700;padding-top:22px;border-top:1px solid #245363;margin-bottom:0}
.portfolio-method{padding-block:95px 90px}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.method-grid>div{border-top:1px solid #35616c;padding-top:18px}
.method-grid span{color:var(--coral);font:32px var(--serif)}
.method-grid h3{font:30px/1.1 var(--serif);margin:16px 0}
.method-grid p{font-size:16px;color:#c1d7dd;line-height:1.7;max-width:440px}
.portfolio-disclosure{border-top:1px solid var(--line);font-size:14px;line-height:1.75;color:#bcd0d8;max-width:1120px;margin:45px 0 0;padding-top:30px}
.portfolio-disclosure strong{color:var(--ink)}
.portfolio-contact{border-top:1px solid var(--line)}
.portfolio-page a:hover{color:var(--cyan)}
.portfolio-page .button.coral:hover{color:#031015}
@media(max-width:1100px){.portfolio-page .nav-row nav{padding-right:0}.portfolio-intro{grid-template-columns:1fr .74fr;gap:40px}.case-study{gap:50px}.case-main{grid-template-columns:1fr}}
@media(max-width:800px){.portfolio-intro{grid-template-columns:1fr;padding-block:65px 55px}.portfolio-intro h1{font-size:clamp(52px,8vw,78px)}.portfolio-manifesto{max-width:640px}.portfolio-section{padding-top:65px}.case-study{grid-template-columns:1fr;gap:28px}.case-side h3{max-width:700px}.case-main{grid-template-columns:1fr 1fr}.portfolio-development,.portfolio-method{padding-block:64px}.method-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.portfolio-page .nav-row{gap:0;padding-bottom:14px}.portfolio-page .nav-row nav{display:flex!important;width:100%;flex-basis:100%;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:10px 22px;margin:11px 0 0;padding:10px 0 0;border-top:1px solid var(--line);font-size:12px}.portfolio-page .nav-row nav a{padding:4px 0}.portfolio-intro{padding-block:53px 46px}.portfolio-intro h1{font-size:clamp(46px,11vw,66px)}.portfolio-lead{font-size:22px}.portfolio-manifesto{padding:22px}.section-heading h2{font-size:42px}.section-heading>p:not(.eyebrow){font-size:16px}.portfolio-section{padding-block:56px 25px}.case-study{padding-block:37px 55px}.case-side h3{font-size:40px}.case-side>p{font-size:19px}.case-main,.concept-grid,.method-grid{grid-template-columns:1fr}.case-main>div{padding-left:17px}.concept-card{padding:27px 23px}.portfolio-development,.portfolio-method{padding-block:52px}.portfolio-disclosure{margin-top:28px}}
