/* Approved r2 reference; scoped by scripts/port-r2-styles.mjs. */
/* First batch extensions. Reuses the approved Living Canvas shell. */
.portfolio{overflow-wrap:break-word}.portfolio .view[hidden]{display:none!important}.portfolio .project-story>p{font-size:16px;line-height:1.85;color:var(--muted);max-width:760px;margin:0 0 20px}.portfolio .project-story>:is(h2:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h2"])){font-size:clamp(31px,3.6vw,47px);font-weight:400;line-height:1.13;max-width:900px;margin:0 0 26px}.portfolio .project-story .section-kicker{display:block;font:10px/1.6 var(--mono);letter-spacing:1px;color:var(--orange);margin-bottom:16px}.portfolio .project-story>.figure-shell{margin-top:34px}.portfolio .project-jumps{display:flex;gap:25px;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line)}.portfolio .project-jump{font:11px/1.6 var(--mono);max-width:30%;display:flex;gap:9px;color:var(--muted)}.portfolio .project-jump .icon{width:14px;flex-shrink:0}.portfolio .project-jumps a:hover{color:var(--orange)}.portfolio .related-monogram{font:bold 150px/.9 var(--serif);color:#a35b3d;justify-self:center;align-self:center}.portfolio .project-southside .project-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:clamp(58px,6.8vw,89px)}.portfolio .project-mroot .project-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:clamp(63px,7.5vw,100px)}
/* Three dimensional editorial objects, not synthesized application evidence. */
.portfolio .special-hero{height:490px;position:relative;isolation:isolate;perspective:1100px;margin:0;min-width:0}.portfolio .hero-grid-lines{position:absolute;inset:35px 0 40px;background-image:linear-gradient(#78706814 1px,transparent 1px),linear-gradient(90deg,#78706814 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse,#000 25%,transparent 75%);z-index:-2}.portfolio .special-hero figcaption{position:absolute;bottom:0;left:0;right:0;font:10px/1.6 var(--mono);color:#b4ada5;max-width:440px}.portfolio .disc{position:absolute;width:290px;height:290px;border-radius:50%;top:10px;right:1%;background:repeating-radial-gradient(circle,#141414 0 2px,#2f2c29 2.5px 3px,#151515 3.5px 5px);box-shadow:0 15px 35px #000b,inset 0 0 0 1px #655548;transform:rotateX(18deg) rotateZ(16deg);transition:transform .65s cubic-bezier(.2,.7,.2,1);display:grid;place-items:center;z-index:1}.portfolio .disc:after{content:'';position:absolute;inset:0;border-radius:inherit;background:conic-gradient(transparent 0deg,#c1bdb929 70deg,transparent 90deg,transparent 250deg,#c1bdb92b 260deg,transparent 280deg);pointer-events:none}.portfolio .disc-label{width:105px;height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e58b60;border-radius:50%;color:#211e1b;font:9px var(--mono);letter-spacing:1px;position:relative;z-index:1}.portfolio .disc-label strong{font:bold 16px var(--sans);letter-spacing:-.5px}.portfolio .disc-label small{font-size:5px;letter-spacing:0;margin-top:10px}.portfolio .disc-label i{position:absolute;width:12px;height:12px;background:#191918;border-radius:50%;top:43%;left:44%;box-shadow:0 0 0 4px #ea956c;transform:translateY(-34px)}.portfolio .record-sleeve{position:absolute;right:0;top:220px;width:245px;min-height:170px;padding:22px;background:#d9d1c2;color:#292420;box-shadow:0 14px 30px #0006;transform:rotate(-7deg) rotateY(-8deg);transition:transform .65s}.portfolio .record-sleeve p{font:39px/1.03 var(--serif);margin:10px 0;color:#302b26}.portfolio .record-sleeve .eyebrow{color:#864422;font-size:7px}.portfolio .record-sleeve small{font:7px var(--mono)}.portfolio .south-photo{position:absolute;z-index:2;left:0;top:102px;max-width:276px;background:#191919;border:1px solid #605748;box-shadow:0 18px 35px #0009;transform:rotate(-6deg);transition:transform .65s}.portfolio .south-photo img{display:block;width:100%;height:auto}.portfolio .south-photo button{display:block;background:none;border:0;padding:0;cursor:zoom-in}.portfolio .south-photo>small{display:block;padding:10px;font:8px var(--mono);color:#d7cab8}.portfolio .depth-control{position:absolute;left:0;bottom:64px;z-index:5;background:#232220}.portfolio .depth-open .disc{transform:translate(8px,-22px) rotateX(38deg) rotateZ(50deg)}.portfolio .depth-open .south-photo{transform:translate(-4px,24px) rotate(-12deg)}.portfolio .depth-open .record-sleeve{transform:translateY(15px) rotate(8deg) rotateY(-8deg)}
.portfolio .source-sheet{position:absolute;left:6px;top:25px;width:290px;padding:25px;background:#252421;border:1px solid #635a50;transform:rotate(-9deg) rotateY(8deg);box-shadow:0 18px 45px #0007;transition:transform .65s}.portfolio .source-sheet>span{font:26px var(--mono);color:#f0ad84}.portfolio .source-sheet pre{font:12px/1.7 var(--mono);color:#d3c7b6;white-space:pre-wrap;margin:19px 0}.portfolio .source-sheet small{font:7px var(--mono);color:#aaa197}.portfolio .interface-sheet{position:absolute;box-shadow:0 17px 35px #0007;transition:transform .65s}.portfolio .website-sheet{top:150px;right:0;width:260px;padding:25px;background:#eee8da;color:#2b2824;transform:rotate(8deg)}.portfolio .website-sheet strong{display:block;font:35px/1.05 var(--serif);margin:16px 0}.portfolio .website-sheet strong em{color:#a94d27}.portfolio .website-sheet .eyebrow{color:#8d4c2e}.portfolio .sheet-line{display:block;width:100%;height:3px;background:#bdb3a5;margin:7px 0}.portfolio .sheet-line.short{width:64%}.portfolio .website-sheet small{font:7px var(--mono);display:block;margin-top:16px}.portfolio .ide-sheet{left:8px;bottom:85px;width:260px;background:#23221f;color:#e5dacc;border:1px solid #776453;transform:rotate(-5deg)}.portfolio .ide-sheet code{display:block;padding:19px;font:12px/1.6 var(--mono)}.portfolio .ide-sheet code b{color:#f4a27a}.portfolio .ide-sheet code span{color:#b8aea0}.portfolio .mroot-hero .depth-control{bottom:61px;left:auto;right:0}.portfolio .depth-open .source-sheet{transform:translate(-3px,-18px) rotate(-13deg) rotateY(13deg)}.portfolio .depth-open .website-sheet{transform:translate(4px,5px) rotate(12deg)}.portfolio .depth-open .ide-sheet{transform:translate(-3px,25px) rotate(-8deg)}
/* Accessible interactive figure system. */
.portfolio .figure-shell :is(h3:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h3"])){font-size:25px;font-weight:400;line-height:1.2;letter-spacing:-.6px;color:#eee8dd;margin:8px 0 0}.portfolio .figure-head .eyebrow{color:#e5a07c}.portfolio .figure-index{font:32px var(--mono);color:#b2a290}.portfolio .figure-caption,.portfolio .article-body .figure-caption{font-size:11px;line-height:1.75}.portfolio .content-map-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:28px}.portfolio .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.portfolio .panel-grid button{background:#24221f;border:1px solid #554c43;border-radius:3px;padding:18px 13px;display:flex;align-items:center;gap:10px;color:#e9e0d3;text-align:left;cursor:pointer;min-width:0;font-size:13px;transition:background .18s,transform .18s}.portfolio .panel-grid button[aria-pressed=true]{background:#e6d7c2;border-color:#e6d7c2;color:#312922;transform:translateY(-2px)}.portfolio .panel-grid button small{margin-left:auto;font:9px var(--mono);opacity:.8}.portfolio .panel-grid .icon{width:20px;flex-shrink:0}.portfolio .panel-detail{padding:25px;background:linear-gradient(135deg,#302b24,#24211d);border:1px solid #655440;position:relative;min-width:0}.portfolio .panel-glyph{font:80px/1 var(--serif);color:#746049;margin-bottom:20px}.portfolio .panel-detail :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font:37px/1.15 var(--serif);color:#f0e7d8;margin:10px 0}.portfolio .panel-detail p[data-panel-desc]{font-size:13px;line-height:1.75;color:#d4c9b9}.portfolio .module-foot{font:8px/1.7 var(--mono);color:#b6a895;display:block;margin-top:24px}.portfolio .demo-choice{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:25px}.portfolio .demo-choice button{background:#24231f;border:1px solid #655849;color:#e1d6c6;font:11px/1.4 var(--mono);padding:11px 13px;border-radius:3px;cursor:pointer;min-height:42px}.portfolio .demo-choice button[aria-pressed=true]{background:#df8b61;color:#211b17;border-color:#df8b61}.portfolio .audit-stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.portfolio .audit-stage{padding:24px 18px;background:#26231f;border:1px solid #62503e;position:relative;transition:background .3s,border-color .3s}.portfolio .audit-stage+ .audit-stage:before{content:'→';position:absolute;left:-19px;top:44%;color:#dc9268}.portfolio .audit-stage small{font:9px/1.7 var(--mono);color:#b4a797;display:block}.portfolio .audit-stage>.icon{width:30px;height:30px;margin:22px 0 12px;color:#dfb08b}.portfolio .audit-stage :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:20px;font-weight:400;line-height:1.2;color:#f2e4d3;margin:0 0 12px}.portfolio .audit-stage p{font-size:12px;line-height:1.7;color:#bdb1a0}.portfolio .audit-stage[data-state=pass]{border-color:#b8ad83;background:#2e3027}.portfolio .audit-stage[data-state=fail]{border-color:#e19a72;background:#3f2a23}.portfolio .audit-stage[data-state=skip]{border-style:dashed;background:#252422}.portfolio .audit-stage.active{box-shadow:0 0 0 2px #edaf78;transform:translateY(-3px)}.portfolio .audit-result{display:grid;grid-template-columns:50px 1fr;gap:18px;background:#302820;border-left:2px solid #ea9a6d;padding:24px;margin-top:25px;min-height:139px}.portfolio .audit-result :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:22px;color:#f4e4d1;font-weight:400;line-height:1.2;margin:0 0 10px}.portfolio .audit-result p{font-size:13px;line-height:1.75;color:#d0beaa}.portfolio .result-symbol{font:45px/1 var(--serif);color:#e9a375}.portfolio .demo-step-controls{margin-top:20px}.portfolio .image-rails{display:grid;grid-template-columns:1fr 30px 1fr;gap:12px;align-items:center}.portfolio .image-rails>div{padding:25px;background:#2b2823;border:1px solid #675541;min-height:118px}.portfolio .image-rails small{display:block;font:9px var(--mono);color:#c0b19c;margin-bottom:22px}.portfolio .image-rails strong{font-size:20px;display:flex;gap:14px;color:#efdfca;font-weight:400;align-items:center}.portfolio .path-divider{color:#e8ad7b;font-size:27px}.portfolio .module-status{font-size:13px;line-height:1.75;color:#cfc2b1;margin:20px 0 0!important;min-height:46px}.portfolio .image-path .module-status{margin-top:24px!important}.portfolio .source-editor{border:1px solid #5b5145;padding:0 18px 18px;background:#25231f}.portfolio .editor-heading{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid #534b42;font:10px var(--mono);color:#ccbcaa}.portfolio .editor-heading small{font-size:8px;color:#bcab94;margin-left:12px}.portfolio .file-dot{width:6px;height:6px;background:#f4a776;border-radius:50%;display:inline-block;flex-shrink:0}.portfolio .source-editor .editor-heading{margin:0 -18px 16px}.portfolio .source-editor label{display:flex;gap:15px;justify-content:space-between;font:11px/1.6 var(--mono);color:#ebd8bf;margin:15px 0 6px}.portfolio .source-editor label span{color:#bdad99;font-size:9px}.portfolio .content-demo input,.portfolio .content-demo textarea,.portfolio .route-demo input{width:100%;min-width:0;padding:12px;background:#191918;color:#f1e7d9;border:1px solid #6d5e4e;border-radius:3px;font:13px/1.6 var(--mono)}.portfolio .content-demo textarea{resize:vertical;min-height:74px;max-height:220px}.portfolio .shared-source-rule{display:flex;flex-direction:column;align-items:center;gap:0;font:9px var(--mono);color:#d2b494;padding:16px 0 10px}.portfolio .shared-source-rule b{font:25px var(--sans);letter-spacing:35px;margin-left:35px;color:#d8a078}.portfolio .dual-preview{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}.portfolio .render-card{padding:23px;background:#ede4d3;color:#2e2923;border:1px solid #bbae97;min-width:0}.portfolio .figure-shell .render-card .eyebrow{color:#885131}.portfolio .render-card :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font:30px/1.13 var(--serif);margin:22px 0 14px;color:#272521;overflow-wrap:anywhere}.portfolio .figure-shell .render-card p[data-render-summary]{color:#554a3e;font-size:13px;line-height:1.75;overflow-wrap:anywhere}.portfolio .demo-pill{font:8px/1.65 var(--mono);display:block;margin-top:23px;color:#8b5937}.portfolio .card-art{height:66px;display:flex;gap:8px;align-items:center;margin-top:14px}.portfolio .card-art i{display:block;width:37px;height:43px;border:1px solid #c69b72;background:#d4b18d;transform:skewY(-14deg)}.portfolio .card-art i:nth-child(2){height:59px;background:#a97950}.portfolio .card-art i:nth-child(3){height:36px;background:#e9d2b1}.portfolio .render-ide{background:#22221f;border:1px solid #615647;min-width:0;display:flex;flex-direction:column}.portfolio .ide-lines{display:grid;grid-template-columns:20px minmax(0,1fr);gap:20px 7px;padding:23px 15px;color:#dfb99a;flex:1}.portfolio .ide-lines>small{font:10px var(--mono);color:#9d8c76}.portfolio .ide-lines code{font:12px/1.7 var(--mono);overflow-wrap:anywhere;white-space:pre-wrap}.portfolio .ide-lines code span{color:#e1d5c5}.portfolio .ide-lines code.comment{color:#b7a58e}.portfolio .render-ide .demo-pill{padding:0 15px 19px;color:#bdad96;margin:0}.portfolio .build-stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.portfolio .build-stage-grid button{min-width:0;background:#28251f;border:1px solid #65543f;color:#e8d6c2;padding:19px 14px;text-align:left;cursor:pointer;transition:transform .25s}.portfolio .build-stage-grid button small{display:block;font:10px var(--mono);color:#c3ad91}.portfolio .build-stage-grid button .icon{display:block;width:27px;height:27px;margin:18px 0}.portfolio .build-stage-grid button strong{display:block;font-size:16px;font-weight:400;line-height:1.3}.portfolio .build-stage-grid button span{display:block;font:10px/1.6 var(--mono);margin-top:10px;color:#cbbba5}.portfolio .build-stage-grid button[aria-pressed=true]{background:#dbc5a6;color:#30251b;transform:translateY(-4px);border-color:#dcb898}.portfolio .build-stage-grid button[aria-pressed=true] :is(small,span){color:#634b34}.portfolio .build-detail{border-top:1px solid #5d4c3b;padding-top:22px;margin-top:24px;min-height:135px}.portfolio .build-detail :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font:28px var(--serif);color:#eddfca;margin:7px 0 13px}.portfolio .build-detail p[data-build-description]{font-size:13px;line-height:1.75;color:#cdbda7}.portfolio .route-demo label{display:block;color:#dec7aa;font:11px var(--mono);margin-bottom:9px}.portfolio .route-demo .demo-choice{margin-top:13px}.portfolio .route-output{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px;border:1px solid #7f6549;background:#332a21}.portfolio .route-output>span{font:9px var(--mono);color:#cdbba3}.portfolio .route-output output{font:20px/1.6 var(--mono);color:#eeb684;overflow-wrap:anywhere;min-width:0}.portfolio .article-body .figure-shell .source-editor :is(input,textarea){line-height:1.65}.portfolio .article-body .figure-shell :is(h3:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h3"])){font-size:24px}.portfolio .article-body .figure-shell .render-card p{color:#554a3e}.portfolio .article-body .figure-shell .render-card .eyebrow{color:#885131}.portfolio .article-body .figure-shell .module-status{color:#cfc2b1}.portfolio .article-body .figure-shell [data-panel-sub],.portfolio .article-body .figure-shell [data-build-label]{color:#e0a375}.portfolio .article-body .figure-shell :is(input,textarea):focus-visible{outline:2px solid #ffb388;outline-offset:3px}.portfolio .article-body .figure-shell .render-card .demo-pill{color:#795132}.portfolio .article-body .figure-shell .ide-lines code{background:none;border:0;padding:0;line-height:1.7}.portfolio .toc-links{display:flex;flex-direction:column;gap:14px;margin-top:20px}.portfolio .toc-links a{display:flex;align-items:start;gap:9px;font-size:11px;line-height:1.5}.portfolio .toc-links a span{font:8px/1.7 var(--mono);opacity:.7}.portfolio .toc-links a[aria-current=location]{color:var(--orange)}.portfolio .article-page.paper-dark .related-feature{background:#34312b;color:#eee4d6}.portfolio .article-page.paper-dark .related-feature p{color:#c6bbab}.portfolio .article-body .code-frame .code-bottom{font-size:10px}.portfolio .source-note summary{min-height:34px}
/* Collections / completion coverage. */
.portfolio .featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.portfolio .collection-heading{align-items:start;gap:25px}.portfolio .collection-heading>.text-link{white-space:nowrap;font-size:12px}.portfolio .collection-card{border:1px solid #4b4238;background:#201f1c;display:flex;flex-direction:column;min-width:0}.portfolio .collection-card-copy{padding:27px;display:flex;flex-direction:column;flex:1}.portfolio .collection-card .eyebrow{font-size:9px;color:#d8a17d}.portfolio .collection-card :is(h3:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h3"])){font-size:26px;font-weight:400;line-height:1.18;margin:15px 0 17px;letter-spacing:-.6px}.portfolio .collection-card p:not(.eyebrow){color:#bfb5a8;font-size:13px;line-height:1.8;margin:0 0 26px}.portfolio .card-bottom{margin-top:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.portfolio .card-bottom .text-link{font-size:12px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:#edb38d}.portfolio .review-state{font:8px var(--mono);color:#afa28f;white-space:nowrap}.portfolio .feature-art{height:220px;position:relative;padding:28px;background:radial-gradient(at 45% 30%,#493828,#24211b 70%);overflow:hidden;border-bottom:1px solid #4b4238}.portfolio .feature-art small{position:absolute;bottom:10px;left:16px;font:7px var(--mono);color:#c3b19a}.portfolio .nav-art img{width:100%;height:auto;display:block;max-width:297px}.portfolio .nav-art .browser-bar{max-width:297px}.portfolio .mini-disc{position:absolute;top:10px;right:25px;width:155px;height:155px;border-radius:50%;background:repeating-radial-gradient(circle,#1b1916 0 2px,#3d362e 2px 3px);display:grid;place-items:center;transform:rotate(14deg)}.portfolio .mini-disc span{font:bold 11px var(--sans);background:#e18f65;color:#291e16;text-align:center;border-radius:50%;width:72px;height:72px;display:grid;align-content:center}.portfolio .south-art img{position:absolute;left:25px;top:75px;width:180px;height:auto;transform:rotate(-6deg);box-shadow:0 10px 24px #0009;border:1px solid #79634b}.portfolio .mini-code{position:absolute;top:30px;left:28px;white-space:pre-wrap;font:17px/1.6 var(--mono);transform:rotate(-8deg);color:#c6b094}.portfolio .mini-paper{position:absolute;right:22px;bottom:28px;background:#e9dcc6;color:#352b21;font:27px/1.05 var(--serif);padding:26px 20px;transform:rotate(9deg);box-shadow:0 10px 20px #0007}.portfolio .mini-paper em{color:#94522d}.portfolio .collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.portfolio .compact-card{min-height:235px}.portfolio .batch-note{padding:45px;border:1px solid #66503a;margin:45px 0 75px;background:#28231d}.portfolio .batch-note :is(h2:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h2"])){font:39px/1.12 var(--serif);margin:19px 0}.portfolio .batch-note>p:not(.eyebrow){max-width:760px;color:#c9bca9;font-size:14px}.portfolio .batch-note>div{display:flex;flex-wrap:wrap;gap:25px;margin-top:25px}.portfolio .collection-hero{padding:45px 0}.portfolio .collection-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:clamp(60px,8vw,108px);font-weight:400;letter-spacing:-.055em;line-height:1;margin:25px 0}.portfolio .collection-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])) span{color:var(--orange)}.portfolio .collection-hero>p:not(.eyebrow){max-width:650px;font-size:16px;line-height:1.75;color:var(--muted)}.portfolio .collection-switch{display:flex;gap:12px;margin-top:26px}.portfolio .collection-toolbar{border-block:1px solid var(--line);padding:24px 0;margin-bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:25px}.portfolio .collection-toolbar>div>p:not(.eyebrow){font-size:12px;color:var(--muted);max-width:430px}.portfolio .search-label{display:block;width:300px;max-width:100%;font:9px var(--mono);color:#bbaf9f}.portfolio .search-label>span{display:block;margin-bottom:9px}.portfolio .search-label input{width:100%;padding:13px 15px;border:1px solid #75614b;background:#25221e;color:#ede2d4;border-radius:3px;font:13px var(--sans)}
/* Preview controls are separate from the portfolio. */
.portfolio .batch-dock{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:90;background:#ede5d7;color:#302920;box-shadow:0 10px 35px #0007;border:1px solid #baae9b;border-radius:8px;display:flex;align-items:center;gap:17px;padding:10px 12px 10px 20px;max-width:calc(100% - 24px)}.portfolio .batch-dock>div{white-space:nowrap}.portfolio .batch-dock strong{font:9px var(--mono);display:block}.portfolio .batch-dock span{display:block;font-size:9px;color:#645746;margin-top:3px}.portfolio .batch-dock label{font:10px var(--mono);white-space:nowrap}.portfolio .batch-dock select{font:12px var(--sans);background:#f4efe6;color:#30291f;border:1px solid #b7a991;padding:10px 12px;border-radius:4px;max-width:240px;min-width:0}.portfolio .batch-dock>a{font-size:20px;line-height:1;padding:8px}.portfolio .archive-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 22px;border-bottom:1px solid #5e4c3b}.portfolio .archive-bar :is(h2:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h2"])){font-size:17px;font-weight:400;line-height:1.3;margin:6px 0 0}.portfolio .archive-bar .eyebrow{font-size:8px}.portfolio .archive-bar button{background:transparent;border:1px solid #8d755b;color:#eed9bc;font-size:20px;min-width:42px;min-height:42px;cursor:pointer}.portfolio .image-dialog img{max-width:100%;height:auto}.portfolio.no-js .archive-open{display:none}.portfolio.no-js .batch-dock{display:none}.portfolio.no-js .special-hero button[data-depth-toggle]{display:none}.portfolio .motion-off .special-hero *{transition:none!important}
@media(max-width:1140px){.portfolio .featured-grid{gap:15px}.portfolio .collection-card-copy{padding:21px}.portfolio .feature-art{padding:22px;height:200px}.portfolio .special-hero{height:470px}.portfolio .south-photo{max-width:230px}.portfolio .disc{width:250px;height:250px}.portfolio .record-sleeve{width:220px}.portfolio .source-sheet{width:250px}.portfolio .website-sheet{width:220px}.portfolio .ide-sheet{width:245px}.portfolio .project-jumps{gap:15px}.portfolio .project-jump{font-size:10px}.portfolio .content-map-layout{gap:20px}.portfolio .article-body .content-map-layout{grid-template-columns:1fr}.portfolio .article-body .panel-glyph{float:right;font-size:55px;margin:0 0 10px 20px}.portfolio .article-body .build-stage-grid{grid-template-columns:1fr 1fr}.portfolio .article-body .audit-stage-grid{gap:15px}.portfolio .article-body .audit-stage{padding:17px 12px}.portfolio .article-body .audit-stage+.audit-stage:before{left:-14px}.portfolio .article-body .audit-stage :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:18px}}
@media(max-width:900px){.portfolio .featured-grid{grid-template-columns:1fr}.portfolio .featured-card{display:grid;grid-template-columns:240px 1fr}.portfolio .feature-art{height:100%;min-height:220px;border-bottom:0;border-right:1px solid #4b4238}.portfolio .nav-art img{margin-top:4px}.portfolio .feature-art .mini-paper{font-size:23px;right:15px}.portfolio .project-southside .project-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:61px}.portfolio .special-hero{height:440px}.portfolio .disc{width:210px;height:210px;right:0}.portfolio .south-photo{max-width:195px;top:115px}.portfolio .record-sleeve{width:185px;top:225px}.portfolio .record-sleeve p{font-size:32px}.portfolio .source-sheet{width:215px;padding:20px;left:0}.portfolio .source-sheet>span{font-size:22px}.portfolio .website-sheet{width:200px;padding:20px}.portfolio .website-sheet strong{font-size:28px}.portfolio .ide-sheet{width:220px}.portfolio .ide-sheet code{font-size:11px;padding:13px}.portfolio .content-map-layout{grid-template-columns:1fr}.portfolio .panel-detail{min-height:195px}.portfolio .panel-glyph{float:right;margin:0 0 10px 20px;font-size:65px}.portfolio .dual-preview{gap:12px}.portfolio .render-card{padding:18px}.portfolio .render-card :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:27px}.portfolio .article-body .dual-preview{grid-template-columns:1fr}.portfolio .audit-stage-grid{gap:15px}.portfolio .audit-stage{padding:18px 12px}.portfolio .audit-stage+.audit-stage:before{left:-14px}.portfolio .build-stage-grid{grid-template-columns:1fr 1fr}.portfolio .project-jumps{display:none}.portfolio .collection-toolbar{align-items:start}.portfolio .route-output{display:block}.portfolio .route-output output{display:block;margin-top:12px}.portfolio .batch-dock{gap:12px}.portfolio .batch-dock label{display:none}.portfolio .article-body .image-rails{grid-template-columns:1fr}.portfolio .article-body .path-divider{display:none}}
@media(max-width:680px){.portfolio .special-hero{height:460px;max-width:480px;margin:30px auto 0}.portfolio .disc{width:260px;height:260px;right:8px;top:5px}.portfolio .south-photo{max-width:235px;top:112px;left:0}.portfolio .record-sleeve{width:220px;top:228px;right:0}.portfolio .record-sleeve p{font-size:35px}.portfolio .special-hero figcaption{font-size:10px;max-width:95%}.portfolio .source-sheet{width:260px;left:10px;top:15px}.portfolio .website-sheet{width:245px;right:5px;top:160px}.portfolio .ide-sheet{width:250px;left:0;bottom:81px}.portfolio .mroot-hero .depth-control{bottom:58px}.portfolio .depth-control{font-size:10px}.portfolio .project-story>p{font-size:15px}.portfolio .project-story>:is(h2:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h2"])){font-size:34px}.portfolio .project-southside .project-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:67px}.portfolio .project-mroot .project-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:70px}.portfolio .related-monogram{display:none}.portfolio .featured-card{display:flex}.portfolio .feature-art{height:230px;min-height:230px;border-right:0;border-bottom:1px solid #4b4238;padding:23px}.portfolio .feature-art img{max-width:260px}.portfolio .nav-art .browser-bar{max-width:260px}.portfolio .feature-art .mini-code{font-size:22px;top:34px}.portfolio .feature-art .mini-paper{font-size:30px;right:28px}.portfolio .collection-grid{grid-template-columns:1fr;gap:15px}.portfolio .collection-card-copy{padding:25px}.portfolio .collection-card :is(h3:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h3"])){font-size:27px}.portfolio .collection-heading{display:block}.portfolio .collection-heading>.text-link{margin-top:20px}.portfolio .collection-heading>p{margin-bottom:20px}.portfolio .collection-toolbar{display:block}.portfolio .search-label{margin-top:20px;width:100%}.portfolio .batch-note{padding:28px 24px;margin-top:35px}.portfolio .batch-note :is(h2:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h2"])){font-size:32px}.portfolio .batch-note>div{display:grid;gap:17px}.portfolio .batch-dock{bottom:10px;padding:8px 9px 8px 13px;gap:10px;width:calc(100% - 24px);max-width:420px}.portfolio .batch-dock select{flex:1;max-width:none;width:155px;font-size:11px;padding:9px 7px}.portfolio .batch-dock>div{max-width:115px}.portfolio .batch-dock strong{font-size:8px}.portfolio .batch-dock span{font-size:8px;white-space:normal}.portfolio .batch-dock>a{display:none}.portfolio .figure-shell :is(h3:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h3"])){font-size:24px}.portfolio .figure-index{font-size:25px}.portfolio .content-map-layout{gap:17px}.portfolio .panel-grid button{padding:16px 12px;font-size:13px}.portfolio .panel-grid .icon{width:18px}.portfolio .panel-detail{padding:22px}.portfolio .panel-detail :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:32px}.portfolio .figure-caption,.portfolio .article-body .figure-caption{font-size:10px}.portfolio .audit-stage-grid{grid-template-columns:1fr;gap:20px}.portfolio .audit-stage{display:grid;grid-template-columns:35px 1fr;gap:7px 14px;padding:20px}.portfolio .audit-stage small{grid-column:1/-1;font-size:9px}.portfolio .audit-stage>.icon{width:25px;height:25px;grid-row:2/4;align-self:center;margin:5px 0}.portfolio .audit-stage :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){margin:4px 0;font-size:23px}.portfolio .audit-stage p{font-size:12px;margin:0}.portfolio .audit-stage+.audit-stage:before{content:'↓';left:31px;top:-24px}.portfolio .demo-choice{gap:7px}.portfolio .demo-choice button{font-size:10px;padding:10px 12px;flex:1}.portfolio .audit-result{grid-template-columns:25px 1fr;padding:20px 15px;gap:13px;min-height:165px}.portfolio .audit-result :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:22px}.portfolio .result-symbol{font-size:34px}.portfolio .audit-result p{font-size:12px}.portfolio .image-rails{grid-template-columns:1fr;gap:13px}.portfolio .image-rails .path-divider{display:none}.portfolio .image-rails>div{min-height:95px;padding:20px}.portfolio .image-rails small{margin-bottom:15px}.portfolio .image-rails strong{font-size:21px}.portfolio .source-editor{padding:0 13px 15px}.portfolio .source-editor .editor-heading{margin:0 -13px 15px;font-size:9px}.portfolio .editor-heading small{display:none}.portfolio .source-editor label{font-size:10px;display:block;margin-top:14px}.portfolio .source-editor label span{font-size:8px;display:block;margin-top:3px}.portfolio .content-demo input,.portfolio .content-demo textarea,.portfolio .route-demo input{font-size:12px;padding:11px}.portfolio .dual-preview{grid-template-columns:1fr}.portfolio .render-card{padding:23px}.portfolio .render-card :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:32px}.portfolio .render-card .card-art{height:55px}.portfolio .render-ide .ide-lines{padding:24px 18px}.portfolio .build-stage-grid{gap:11px}.portfolio .build-stage-grid button{padding:16px 13px}.portfolio .build-stage-grid button strong{font-size:17px}.portfolio .build-stage-grid button span{font-size:9px}.portfolio .build-detail{min-height:166px}.portfolio .route-output output{font-size:17px}.portfolio .archive-bar{padding:12px}.portfolio .archive-bar :is(h2:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h2"])){font-size:14px}.portfolio .archive-bar .eyebrow{font-size:7px}.portfolio .article-body .figure-head{gap:12px}.portfolio .article-body .figure-head :is(h3:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h3"])){font-size:23px}.portfolio .article-body .audit-stage{padding:18px}.portfolio .article-body .audit-stage :is(h4:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h4"])){font-size:22px}.portfolio .article-body .audit-stage+.audit-stage:before{left:28px}.portfolio .article-body .panel-grid button{font-size:12px}.portfolio .article-body .panel-grid .icon{width:16px}.portfolio .article-body .figure-shell .ide-lines code{font-size:12px}.portfolio .article-page .toc-mobile .toc-links{margin:20px 0}.portfolio .article-page .toc-mobile .toc-links a{font-size:13px}.portfolio .module-status{font-size:12px}.portfolio .no-js-note{margin:0}}
@media(max-width:380px){.portfolio .special-hero{height:435px}.portfolio .disc{width:215px;height:215px;right:0}.portfolio .south-photo{max-width:190px;top:120px}.portfolio .record-sleeve{width:185px;top:230px;padding:18px}.portfolio .record-sleeve p{font-size:30px}.portfolio .record-sleeve .eyebrow{font-size:6px}.portfolio .disc-label{width:85px;height:85px}.portfolio .disc-label strong{font-size:12px}.portfolio .source-sheet{width:220px;left:0}.portfolio .website-sheet{width:200px;right:0}.portfolio .ide-sheet{width:225px}.portfolio .project-southside .project-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:57px}.portfolio .project-mroot .project-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:60px}.portfolio .article-hero :is(h1:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h1"])){font-size:33px}.portfolio .card-bottom{flex-wrap:wrap}.portfolio .batch-dock strong{font-size:7px}.portfolio .batch-dock>div{max-width:95px}.portfolio .figure-shell :is(h3:not(:where([data-portfolio-heading-source])),:where([data-portfolio-heading-source="h3"])){font-size:22px}.portfolio .panel-grid button{padding:13px 9px;gap:7px}.portfolio .panel-grid button small{display:none}.portfolio .panel-glyph{font-size:48px}.portfolio .build-stage-grid button{padding:13px 10px}.portfolio .build-stage-grid button strong{font-size:15px}.portfolio .audit-result{grid-template-columns:1fr}.portfolio .result-symbol{display:none}}
@media print{.portfolio .batch-dock,.portfolio .source-editor,.portfolio .depth-control{display:none!important}.portfolio .special-hero{break-inside:avoid}.portfolio .project-story{padding:25px 0}.portfolio .figure-shell{break-inside:avoid}.portfolio .article-page{--paper-ink:#222}}

/* Keep rotated objects inside narrow viewports and clear of their captions. */
.portfolio .south-hero{height:520px}.portfolio .south-hero .record-sleeve{top:205px}
@media(max-width:900px){.portfolio .south-hero{height:495px}.portfolio .south-hero .record-sleeve{top:215px}.portfolio .south-hero .disc{right:30px}}
@media(max-width:680px){.portfolio .south-hero{height:485px}.portfolio .south-hero .record-sleeve{top:210px}.portfolio .south-hero .disc{right:32px}}
@media(max-width:380px){.portfolio .south-hero{height:470px}.portfolio .south-hero .record-sleeve{top:215px}.portfolio .south-hero .disc{right:32px}}
@media(max-width:680px){
 .portfolio .south-hero.depth-open .disc{transform:translate(0,-15px) rotateX(25deg) rotateZ(24deg)}
 .portfolio .south-hero.depth-open .south-photo{transform:translate(5px,20px) rotate(-5deg)}
 .portfolio .mroot-hero.depth-open .source-sheet{transform:translate(6px,-15px) rotate(-7deg) rotateY(5deg)}
 .portfolio .mroot-hero.depth-open .website-sheet{transform:translate(-8px,8px) rotate(8deg)}
 .portfolio .mroot-hero.depth-open .ide-sheet{transform:translate(4px,20px) rotate(-5deg)}
}