/* Portfolio artwork stays inside the existing orbiting, pinned journal cards. */
.portfolio-cover-art,.portfolio-cover-study,.portfolio-cover-photo{position:relative;isolation:isolate;overflow:hidden;border:1px solid #b9a98530}
.portfolio-cover-art{background:radial-gradient(ellipse at 80% 16%,#fff9ec99,transparent 55%),linear-gradient(135deg,#e5ddca,#ccc0a6);color:#33372b}
.portfolio-cover-art:before{content:'';position:absolute;inset:8%;border:1px solid #85734e20;pointer-events:none}
.portfolio-cover-art>span{max-width:70%;color:#383a2d;text-shadow:0 1px 0 #fff6}
.portfolio-mobile{position:absolute;right:9%;top:8%;width:40%;height:84%;border:clamp(4px,.65vw,8px) solid #383d32;border-radius:clamp(12px,1.8vw,23px);background:radial-gradient(ellipse at 80% 60%,#64563b45,transparent 65%),#191d16;box-shadow:12px 20px 28px #51452e38,inset 0 0 0 1px #d7c6a547,0 0 0 1px #f1e8cf88;transform:perspective(850px) rotateY(-16deg) rotateZ(10deg);pointer-events:none}
.portfolio-mobile:before{content:'';position:absolute;top:4%;left:36%;width:28%;height:3px;background:#9c957f55;border-radius:10px}
.portfolio-mobile:after{content:'';position:absolute;left:13%;right:13%;bottom:10%;height:13%;background:repeating-linear-gradient(transparent 0 5px,#c9bb962b 5px 6px,transparent 6px 11px);border-top:1px solid #c9bb9655}
.portfolio-mobile .mini-mark{position:absolute;top:18%;left:13%;font:italic clamp(32px,5vw,72px)/.9 var(--serif);color:#e7d7b5;letter-spacing:-.075em}
.portfolio-mobile .mini-ring{position:absolute;right:-4%;bottom:25%;width:70%;aspect-ratio:1;border:clamp(4px,.7vw,9px) solid #bdab7f;border-radius:50%;background:transparent;box-shadow:inset 1px 2px 4px #f7ebcd99,2px 5px 12px #0007;transform:rotateY(42deg) rotateZ(-18deg)}
.portfolio-mobile .mini-ring:before,.portfolio-mobile .mini-ring:after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.portfolio-mobile .mini-ring:before{inset:13%;border:1px solid #ecdbb98c}
.portfolio-mobile .mini-ring:after{inset:-21%;border:1px solid #cbb58277;transform:rotateY(-48deg) rotateZ(26deg)}
.portfolio-cover-study{background:radial-gradient(ellipse at 85% 27%,#9b805538,transparent 58%),linear-gradient(125deg,#17231d,#394332 65%,#1c291f);color:#e8e2d2}
.portfolio-cover-study>span{max-width:76%;color:#efe6d1;text-shadow:0 3px 20px #111b1670}
.study-orbit{position:absolute;top:18%;right:-7%;width:78%;aspect-ratio:1.7;border:1px solid #e4d5ad88;background:linear-gradient(135deg,#c4ad7655,transparent 47%),linear-gradient(20deg,#202c24,#45503b 60%,#b09f7533);box-shadow:14px 23px 27px #101a1677,inset 0 0 0 9px #111a1688;transform:perspective(800px) rotateY(-24deg) rotateZ(-9deg);pointer-events:none}
.study-orbit:before,.study-orbit:after{content:'';position:absolute;border:1px solid #e7d8b34d}
.study-orbit:before{inset:13% 9%;border-left-color:transparent;border-right-color:transparent}
.study-orbit:after{inset:36% 39%;border-radius:50%;border-color:#e3d6af70}
.study-axis{position:absolute;width:95%;height:60%;right:-5%;top:3%;background:linear-gradient(153deg,transparent 30%,#d3ba7e1a 39%,#e8d29c44 45%,#d3ba7e12 51%,transparent 57%);transform:rotate(-15deg);pointer-events:none}
.study-axis:before,.study-axis:after{content:'';position:absolute;background:#d8c9a445}
.study-axis:before{left:46%;width:25%;height:1px;top:46%}
.study-axis:after{top:25%;height:41%;width:1px;left:58%}
.portfolio-cover-photo{background:radial-gradient(ellipse at 25% 20%,#fff9e788,transparent 65%),#d9d0bb;color:#363d2c}
.portfolio-cover-photo>span{max-width:77%;color:#3d422f;text-shadow:0 1px 0 #fff5}
.photo-contact-sheet{position:absolute;top:-11%;right:-7%;width:69%;height:121%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;padding:8px;background:#f2ead7;box-shadow:10px 17px 25px #5143293d;transform:rotate(11deg);pointer-events:none}
.photo-contact-sheet i{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,#e9e1cf 25%,#abae9266 25% 58%,#f1ecdf 58%);border:1px solid #aaa08122}
.photo-contact-sheet i:before{content:'';position:absolute;width:63%;height:91%;left:22%;top:14%;border:1px solid #a69570;border-radius:50% 50% 0 0;background:linear-gradient(90deg,#d2c5a8,#eee5d0 48%,#8b967f44)}
.photo-contact-sheet i:after{content:'';position:absolute;width:30%;height:150%;right:2%;top:-17%;background:linear-gradient(90deg,#f7f0df,#b6ab91);transform:rotate(-27deg);box-shadow:-5px 0 10px #786f5422}
.photo-contact-sheet i:nth-child(2n){background:#52614b}
.photo-contact-sheet i:nth-child(2n):before{left:-5%;top:27%;border-color:#b5c0a377;background:linear-gradient(120deg,#819172,#c5caaa77,#344632)}
.photo-contact-sheet i:nth-child(3n):after{right:28%;transform:rotate(24deg)}

/* Project reading surfaces retain native dialog scrolling and sheet mechanics. */
.portfolio-dialog{width:min(56rem,calc(100% - 2rem))}
.portfolio-dialog .article-body{padding:2.5rem 3.5rem 3rem}
.portfolio-dialog .article-body>h2{max-width:46rem;font-size:clamp(2.5rem,1.5rem + 3vw,4.25rem);line-height:1.04;letter-spacing:-.035em;color:var(--ink);margin:1.25rem 0 1.5rem;overflow-wrap:break-word}
.portfolio-dialog .article-body>.article-lead{font-size:clamp(1.45rem,1rem + 1vw,1.875rem);line-height:1.4;color:#3d4436;max-width:42rem}
.project-visual{position:relative;margin:2rem 0;overflow:hidden;border:1px solid #b3a47f42;border-radius:1rem;isolation:isolate}
.project-facts{margin:2rem 0 2.5rem;padding:1.5rem 0;border-top:1px solid #c7bfab;border-bottom:1px solid #d3ccbc;display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));gap:1.5rem 2rem}
.project-facts>div{min-width:0}
.project-facts dt{font:.625rem/1.5 var(--sans);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#666c5d}
.project-facts dd{margin:.5rem 0 0;font-size:.875rem;line-height:1.55;color:#333c2d;overflow-wrap:anywhere}
.project-sections{margin:2.5rem 0}
.project-sections>article{padding:1.5rem 0;border-top:1px solid #d2c8b2}
.project-sections>article>.eyebrow{color:#716044}
.project-sections>article>h3{margin:.75rem 0 1rem;font-size:2rem;line-height:1.1;letter-spacing:-.025em}
.project-sections>article>p{max-width:42rem}
.project-step{border-top:1px solid #cec4ad}
.project-step:last-child{border-bottom:1px solid #cec4ad}
.project-step>summary{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 1.75rem;gap:.75rem;align-items:center;min-height:4.5rem;padding:1.25rem .125rem;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.project-step>summary::-webkit-details-marker{display:none}
.project-step>summary::marker{content:''}
.project-step>summary>.eyebrow{font-size:.6875rem;letter-spacing:.08em;color:#776345}
.project-step>summary>h3{margin:0;font-size:clamp(1.5rem,1.25rem + 1vw,2rem);line-height:1.12;letter-spacing:-.025em;color:#323a2b}
.project-step>summary>span[aria-hidden]{justify-self:end;display:grid;place-items:center;width:1.75rem;height:1.75rem;border:1px solid #b8a47c70;border-radius:50%;font:300 1.25rem/1 var(--sans);color:#75623e;transition:transform 180ms ease,background 180ms ease}
.project-step[open]>summary>span[aria-hidden]{transform:rotate(45deg);background:#d9cdb2}
.project-step[open]>summary>h3{color:#574a31}
.project-step>summary:focus-visible{outline:2px solid #695331;outline-offset:4px;border-radius:.25rem}
.portfolio-dialog .project-step>p{margin:0 2.75rem 1.5rem 3rem;font-size:.9375rem;line-height:1.8;color:#555d4c;max-width:41rem}
.project-preview-note{margin:1.75rem 0;padding:1rem 1.125rem;border-left:2px solid #ac9060;background:#e7e0d0;color:#5c6352;font-size:.75rem;line-height:1.7}
.project-preview-note a{color:#4e593f;text-decoration:underline;text-underline-offset:3px}

/* Three distinct portfolio templates; the artwork is a scaffold for future media. */
.portfolio .journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.portfolio .journal-entry{min-width:0}
.portfolio .journal-cover>span{font-size:clamp(40px,4.2vw,68px)}
.immersive:not(.scroll-cinema) .portfolio .journal-entry{position:relative;left:auto;top:auto;margin-left:0;width:100%}
.immersive:not(.scroll-cinema) .portfolio .journal-cover{min-height:230px}
.scroll-cinema .portfolio .journal-track{height:300svh}
.scroll-cinema .portfolio .journal-grid{--project-card-width:min(550px,58%);height:calc(100svh - 285px);position:relative;display:block;perspective:1600px;pointer-events:none}
.scroll-cinema .portfolio .journal-entry{position:absolute;top:0;left:50%;width:var(--project-card-width);margin-left:calc(var(--project-card-width) / -2)}
.scroll-cinema .portfolio .journal-entry:not([inert]){pointer-events:auto}
.scroll-cinema .portfolio .journal-cover{height:min(36svh,280px);min-height:0}
.portfolio .journal-wayfinding{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.portfolio .journal-wayfinding button{min-width:0;overflow-wrap:normal}
.visual-ai,.visual-cinema,.visual-photo{min-height:20rem;padding:2.5rem;display:flex;align-items:center}
.visual-ai{background:radial-gradient(ellipse at 76% 29%,#81704c,#3e4835 44%,#1d271d 85%)}
.visual-ai:before{content:'';position:absolute;right:1%;top:10%;width:61%;aspect-ratio:1;border-radius:50%;border:clamp(20px,4vw,42px) solid #c2b18b;box-shadow:inset 2px 4px 9px #fff2cf9c,8px 17px 28px #0d1a1380;transform:perspective(800px) rotateY(42deg) rotateZ(-26deg)}
.visual-ai:after{content:'';position:absolute;right:-10%;top:4%;width:78%;aspect-ratio:1;border:1px solid #e0cfaa88;border-radius:50%;transform:perspective(800px) rotateY(-38deg) rotateZ(31deg)}
.visual-cinema{background:radial-gradient(ellipse at 90% 10%,#b5985844,transparent 62%),#243126}
.visual-cinema:before{content:'';position:absolute;right:-3%;top:15%;width:75%;height:67%;border:1px solid #e2d0a380;background:linear-gradient(140deg,#c2ad7d66,transparent 45%),linear-gradient(20deg,#15271d,#4c5b43);box-shadow:inset 0 0 0 12px #16251c99,10px 25px 40px #08190f66;transform:perspective(950px) rotateY(-26deg) rotateZ(-9deg)}
.visual-cinema:after{content:'';position:absolute;inset:-25%;background:linear-gradient(152deg,transparent 34%,#e7d09933 43%,transparent 50%);transform:rotate(-9deg)}
.visual-photo{background:#dfd6c1}
.visual-photo:before{content:'';position:absolute;right:-9%;top:-19%;width:68%;height:140%;border:12px solid #f0e8d6;background:linear-gradient(90deg,transparent 48%,#f0e8d6 48% 52%,transparent 52%),linear-gradient(transparent 31%,#f0e8d6 31% 34%,transparent 34% 65%,#f0e8d6 65% 68%,transparent 68%),linear-gradient(135deg,#c1b898 22%,#a0aa8a 22% 44%,#ede5d2 44% 68%,#798b6e 68%);box-shadow:15px 23px 30px #63503530;transform:rotate(13deg)}
.visual-photo:after{content:'';position:absolute;right:10%;top:10%;width:24%;height:80%;border:1px solid #8c927a;border-radius:50% 50% 0 0;background:linear-gradient(90deg,#c6b89870,#f2e6ccaa,#7d8e7060);transform:rotate(13deg)}
.visual-ai .project-visual-mark,.visual-cinema .project-visual-mark,.visual-photo .project-visual-mark{position:relative;z-index:1;max-width:80%;font:italic clamp(3.25rem,7vw,6rem)/.94 var(--serif);letter-spacing:-.045em;overflow-wrap:break-word}
.visual-ai .project-visual-mark,.visual-cinema .project-visual-mark{color:#efe5cc;text-shadow:0 5px 28px #10231570}
.visual-photo .project-visual-mark{color:#3d4532;text-shadow:0 1px 0 #fff6}
@media(max-height:740px) and (min-width:761px){.scroll-cinema .portfolio .journal-cover{height:32svh}.scroll-cinema .portfolio .journal-entry h3{font-size:27px}}

@media(max-width:760px){
 .portfolio-cover-art>span,.portfolio-cover-study>span{max-width:78%}
 .portfolio-mobile{right:8%;top:9%;height:83%;width:39%;border-radius:15px}
 .portfolio-mobile .mini-mark{font-size:clamp(30px,8.5vw,48px)}
 .portfolio-mobile .mini-ring{border-width:5px}
 .portfolio-dialog{width:100%}
 .portfolio-dialog .article-body{padding:1.75rem 1.5rem max(2rem,env(safe-area-inset-bottom))}
 .portfolio-dialog .article-body>h2{font-size:clamp(2.125rem,1.25rem + 4.5vw,3rem);line-height:1.06;margin:1rem 0 1.25rem}
 .portfolio-dialog .article-body>.article-lead{font-size:1.5rem}
 .project-visual{margin:1.5rem 0;border-radius:.75rem}
 .project-facts{margin:1.5rem 0 2rem;padding:1.25rem 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
 .project-facts dt{font-size:.625rem;letter-spacing:.08em}
 .project-facts dd{font-size:.8125rem}
 .project-sections{margin:2rem 0}
 .project-step>summary{grid-template-columns:1.5rem minmax(0,1fr) 1.625rem;gap:.5rem;min-height:4.25rem;padding:1.125rem .125rem}
 .project-step>summary>h3{font-size:1.625rem;line-height:1.1}
 .project-step>summary>.eyebrow{font-size:.625rem}
 .project-step>summary>span[aria-hidden]{width:1.625rem;height:1.625rem}
 .portfolio-dialog .project-step>p{margin:0 0 1.375rem;font-size:.875rem;line-height:1.8}
 .project-preview-note{padding:.875rem 1rem;font-size:.75rem}
 .portfolio .journal-grid{grid-template-columns:1fr;gap:42px}
 .portfolio .journal-cover>span{font-size:clamp(44px,13.5vw,60px)}
 .scroll-cinema .portfolio .journal-track{height:320svh}
 .scroll-cinema .portfolio .journal-grid{--project-card-width:100%;height:calc(100svh - 285px);display:block;position:relative;perspective:1100px}
 .scroll-cinema .portfolio .journal-entry{position:absolute;left:0;top:0;width:100%;margin-left:0}
 .scroll-cinema .portfolio .journal-cover{height:clamp(150px,calc(100svh - 475px),260px);min-height:0}
 .portfolio .journal-wayfinding{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .portfolio .journal-wayfinding button{font-size:9px;gap:6px;line-height:1.4}
 .portfolio .journal-wayfinding button span{font-size:8px}
 .visual-ai,.visual-cinema,.visual-photo{min-height:16rem;padding:1.5rem}
 .visual-ai .project-visual-mark,.visual-cinema .project-visual-mark,.visual-photo .project-visual-mark{font-size:clamp(3rem,11vw,4.5rem)}
}
@media(max-width:370px){
 .portfolio-mobile{right:7%;width:40%;border-width:4px}
 .portfolio-mobile .mini-mark{font-size:29px}
 .portfolio-dialog .article-body{padding-left:1.25rem;padding-right:1.25rem}
 .portfolio-dialog .article-body>h2{font-size:2.125rem}
 .project-facts{grid-template-columns:1fr}
 .project-step>summary>h3{font-size:1.5rem}
 .portfolio .journal-cover>span{font-size:44px}
 .portfolio .journal-wayfinding{gap:8px}
 .portfolio .journal-wayfinding button{font-size:8.5px;gap:4px}
 .visual-ai,.visual-cinema,.visual-photo{min-height:14rem;padding:1.25rem}
 .visual-ai .project-visual-mark,.visual-cinema .project-visual-mark,.visual-photo .project-visual-mark{font-size:3rem}
}
@media(prefers-reduced-motion:reduce){.project-step>summary>span[aria-hidden]{transition:none}}
@media(prefers-contrast:more){.project-facts dt,.project-facts dd,.portfolio-dialog .project-step>p,.project-preview-note{color:#30382a}.project-step,.project-step:last-child{border-color:#71674f}}
@media(forced-colors:active){.project-step,.project-facts,.project-preview-note{border-color:CanvasText}.project-step>summary>span[aria-hidden]{border-color:ButtonText}.project-step>summary:focus-visible{outline-color:Highlight}}