/* A single shelf for all work. The original work keeps its own colours. */
body.portfolio .ei-intro { padding-block:35px 30px; grid-template-columns:1.35fr .65fr; gap:8%; }
body.portfolio .ei-intro h1 { font-size:clamp(43px,5vw,72px); line-height:1.06; }
body.portfolio .ei-intro .eyebrow { margin-bottom:15px; }
body.portfolio .ei-note { max-width:350px; }
body.portfolio .portfolio-carousel { margin-bottom:70px; }
body.portfolio .carousel-controls { display:flex; align-items:center; gap:10px; padding:18px 0; border-top:1px solid var(--line); }
body.portfolio .carousel-label { margin-right:auto; }
body.portfolio .carousel-arrow { flex:none; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font:24px Georgia,serif; cursor:pointer; transition:background .15s,color .15s; }
body.portfolio .carousel-arrow:hover { background:var(--ink); color:var(--paper); }
body.portfolio .carousel-picker { position:relative; width:clamp(220px,29vw,420px); }
body.portfolio .carousel-picker .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.portfolio .carousel-picker select { appearance:none; -webkit-appearance:none; width:100%; height:46px; border:1px solid var(--line); border-radius:30px; padding:0 44px 0 19px; color:var(--ink); background:var(--mount); font:500 13px Manrope,Arial,sans-serif; cursor:pointer; text-overflow:ellipsis; }
body.portfolio .carousel-picker:after { content:""; position:absolute; top:50%; right:19px; width:7px; height:7px; border-right:1.5px solid var(--copper); border-bottom:1.5px solid var(--copper); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
body.portfolio .carousel-picker select:hover { border-color:var(--copper); }
body.portfolio .carousel-picker select:focus-visible { outline:2px solid var(--copper); outline-offset:3px; }
body.portfolio .carousel-count { min-width:65px; text-align:right; color:var(--muted); font:11px Manrope,Arial,sans-serif; font-variant-numeric:tabular-nums; }
body.portfolio .portfolio-carousel .device-showcase { margin:0; }
body.portfolio .portfolio-carousel .device-stage { padding:30px 38px 32px; gap:5%; border-radius:12px; background:radial-gradient(ellipse at 70% 22%,#f9f6ef 0%,#e5ded2 75%); }
body.portfolio .carousel-caption { display:grid; grid-template-columns:1fr auto; gap:30px; padding-top:25px; }
body.portfolio .carousel-heading { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
body.portfolio .carousel-heading h2 { margin:0; font:400 clamp(28px,3vw,41px)/1.15 Georgia,serif; letter-spacing:-.035em; }
body.portfolio .carousel-summary p { max-width:720px; font-size:13px; line-height:1.8; margin:12px 0 9px; }
body.portfolio .carousel-mode { display:inline-block; color:var(--copper); font-size:10px; letter-spacing:.04em; }
body.portfolio .carousel-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; max-width:350px; align-self:start; padding-top:3px; }
body.portfolio .carousel-actions a { white-space:nowrap; }
body.portfolio .carousel-refresh { border:0; background:transparent; cursor:pointer; padding:8px 0; font-family:inherit; font-size:10px; color:var(--muted); }
body.portfolio .carousel-hint { margin:18px 0 0; color:var(--muted); font-size:10px; }
body.portfolio .ei-about-with-portrait { border-top:1px solid var(--line); padding-top:65px; }
@media(max-width:900px){
 body.portfolio .carousel-caption { grid-template-columns:1fr; gap:18px; }
 body.portfolio .carousel-actions { justify-content:flex-start; max-width:none; }
 body.portfolio .portfolio-carousel .device-stage { padding-inline:25px; }
}
@media(max-width:620px){
 body.portfolio .ei-intro { grid-template-columns:1fr; gap:20px; padding-block:30px; }
 body.portfolio .ei-intro h1 { font-size:clamp(40px,9.6vw,58px); }
 body.portfolio .ei-note { font-size:12px; max-width:390px; }
 body.portfolio .carousel-controls { gap:7px; flex-wrap:wrap; }
 body.portfolio .carousel-label { flex-basis:calc(100% - 90px); }
 body.portfolio .carousel-count { order:1; margin-left:auto; }
 body.portfolio .carousel-arrow { order:2; width:44px; height:44px; }
 body.portfolio .carousel-picker { order:2; flex:1; width:calc(100% - 102px); }
 body.portfolio .carousel-picker select { padding-left:13px; font-size:12px; }
 body.portfolio .portfolio-carousel .device-stage { padding:23px 21px 29px; }
 body.portfolio .carousel-actions { gap:15px; }
 body.portfolio .carousel-actions .button { padding:12px 17px; }
 body.portfolio .ei-about-with-portrait { padding-top:40px; }
}
@media(prefers-reduced-motion:reduce){body.portfolio .carousel-arrow { transition:none; }}
@media(forced-colors:active){
 body.portfolio .carousel-picker select { appearance:auto; -webkit-appearance:auto; }
 body.portfolio .carousel-picker:after { display:none; }
 body.portfolio .carousel-picker select:focus-visible { outline-color:Highlight; }
}