/* Preview direction: interfaces first. Scoped to the studio home. */
.portfolio-next{background:#f5f4ef;color:#20211f}
.portfolio-next .nav{background:#f5f4ef;max-width:none;width:100%;padding-inline:max(5vw,calc((100vw - 1480px)/2));border-bottom:1px solid #deded6}
.portfolio-next .wrap{max-width:1640px;padding-inline:5vw}
.folio-hero{padding-top:32px;padding-bottom:0}
.folio-kicker{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.09em;color:#67695f}
.folio-opening{display:grid;grid-template-columns:.9fr 1.1fr;gap:5%;align-items:center;padding:48px 0 62px}
.folio-statement h1{font-size:clamp(48px,5.1vw,82px);line-height:1.05;letter-spacing:-.065em;font-weight:500;margin:0 0 30px}
.folio-statement h1 em,.folio-work-heading h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}
.folio-statement>p{max-width:390px;font-size:14px;line-height:1.8;color:#64665e;margin:0 0 30px}
.folio-link{display:inline-flex;align-items:center;gap:28px;font-size:13px;font-weight:600;border-bottom:1px solid #20211f;padding-bottom:9px;text-decoration:none}
.folio-link span{font-size:10px;font-weight:400}
.hero-exhibit{display:block;position:relative;min-height:520px;background:#dedfd5;color:#34372c;text-decoration:none;overflow:hidden}
.exhibit-label{position:absolute;left:30px;top:27px;font-size:9px;letter-spacing:.08em}
.hero-desktop{position:absolute;left:7%;top:104px;width:92%;box-shadow:0 24px 48px #30332c25;transform:rotate(-4deg);transition:transform .45s}
.hero-exhibit:hover .hero-desktop{transform:rotate(-2deg) translateY(-4px)}
.browser-rail{height:21px;background:#fafaf6;display:flex;align-items:center;gap:4px;padding:0 9px;border-bottom:1px solid #e4e4dd}
.browser-rail i{width:4px;height:4px;border:1px solid #aaa99f;border-radius:100%}
.browser-rail span{margin:auto;font-size:6px;letter-spacing:.04em;color:#77786d}
.hero-desktop img,.hero-phone img,.interface-window img{display:block;width:100%;height:auto}
.hero-phone{position:absolute;right:7%;bottom:61px;width:25%;border:5px solid #282a24;border-radius:19px;overflow:hidden;box-shadow:0 18px 28px #20211f30;transform:rotate(5deg)}
.exhibit-foot{position:absolute;bottom:24px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:10px}.exhibit-foot>span{text-decoration:underline;text-underline-offset:4px}
.folio-baseline{border-top:1px solid #cecec5;border-bottom:1px solid #cecec5;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;padding:25px 0;gap:20px}
.folio-baseline p{font-size:22px;letter-spacing:-.04em;line-height:1.25;margin:0}.folio-baseline>span{font-size:11px;color:#696b63;line-height:1.7}.folio-baseline>a{background:#20211f;color:#fff;padding:17px 24px;font-size:12px;text-decoration:none}
.folio-work{padding-top:100px;padding-bottom:90px}
.folio-work-heading{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;align-items:end;margin-bottom:50px}.folio-work-heading>.eyebrow{grid-column:1/-1}.folio-work-heading h2{font-size:clamp(38px,4vw,62px);line-height:1.1;letter-spacing:-.055em;font-weight:500;margin:0}.folio-work-heading>p{max-width:340px;justify-self:end;font-size:12px;line-height:1.8;color:#6d6d64;margin:0}
.alma-case{display:grid;grid-template-columns:.65fr 1.35fr;gap:6%;align-items:center;margin-bottom:90px;background:#e8e9df;padding:40px}
.alma-case-copy h3{font-family:Georgia,serif;font-size:76px;line-height:1;letter-spacing:-.06em;font-weight:400;margin:20px 0}.alma-case-copy .project-intent{font-size:20px;line-height:1.35;letter-spacing:-.04em;color:#30332b}.alma-case-copy>p{font-size:12px;color:#676b5b;line-height:1.8;max-width:280px}
.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0}.project-tags span{font-size:8px;border:1px solid #bbc0ad;padding:5px 8px}.secondary-demo{display:block;font-size:11px;margin-top:18px;text-underline-offset:4px}.alma-case-copy small{display:block;font-size:9px;color:#717563;margin-top:24px}.alma-detail{display:block;text-decoration:none;color:inherit}.alma-detail img{display:block;width:100%;box-shadow:0 16px 36px #3033241a}.alma-detail>span{display:block;font-size:8px;letter-spacing:.08em;margin-top:18px}
.folio-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px 34px}.interface-project:nth-child(even){padding-top:100px}.interface-stage{display:block;position:relative;padding:55px 28px 45px;background:#e2e3e2;overflow:hidden;text-decoration:none}.matin-project .interface-stage{background:#e8e0d4}.seve-project .interface-stage{background:#dcded2}.tige-project .interface-stage{background:#e5dbe0}.interface-window{box-shadow:0 16px 32px #20211f1b;transition:transform .35s}.interface-stage:hover .interface-window{transform:translateY(-7px)}.stage-action{display:block;text-align:right;font-size:9px;color:#34342e;margin-top:22px;text-decoration:underline;text-underline-offset:4px}.interface-caption{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #d9d9d0}.interface-caption .eyebrow{font-size:8px}.interface-caption h3{font-size:30px;letter-spacing:-.055em;font-weight:500;margin:9px 0 0}.interface-caption h3 a{text-decoration:none}.interface-caption p{font-size:11px;line-height:1.8;color:#686a60;margin:0}.portfolio-next .deckit-feature{margin-top:60px}
@media(min-width:1600px){.hero-exhibit{min-height:600px}.hero-desktop{top:120px}}
@media(max-width:1000px){.folio-opening{gap:30px;grid-template-columns:1fr 1fr}.hero-exhibit{min-height:450px}.hero-desktop{top:100px;width:110%}.hero-phone{width:32%}.alma-case{padding:25px;gap:25px}.interface-caption{grid-template-columns:1fr}}
@media(max-width:760px){.portfolio-next .wrap{padding-inline:22px}.portfolio-next .nav{padding-inline:22px}.folio-hero{padding-top:25px}.folio-kicker{font-size:8px}.folio-kicker span:last-child{display:none}.folio-opening{grid-template-columns:1fr;padding:28px 0 28px;gap:32px}.folio-statement h1{font-size:clamp(43px,11.8vw,70px);line-height:1.06;margin-bottom:21px}.folio-statement>p{font-size:12px;line-height:1.75;max-width:340px;margin-bottom:20px}.folio-link{font-size:12px}.hero-exhibit{min-height:360px;margin-inline:-6px}.exhibit-label{left:20px;top:22px;font-size:8px}.hero-desktop{top:75px;left:5%;width:94%}.hero-phone{width:27%;right:8%;bottom:45px;border-width:3px;border-radius:12px}.exhibit-foot{left:20px;right:20px;bottom:19px;font-size:8px}.folio-baseline{grid-template-columns:1fr auto;padding:23px 0}.folio-baseline p{font-size:17px}.folio-baseline>span{display:none}.folio-baseline>a{font-size:10px;padding:14px}.folio-work{padding-top:60px;padding-bottom:55px}.folio-work-heading{grid-template-columns:1fr;gap:18px;margin-bottom:30px}.folio-work-heading h2{font-size:38px}.folio-work-heading>p{justify-self:start;font-size:11px}.alma-case{grid-template-columns:1fr;padding:25px 20px;margin-inline:-6px;margin-bottom:45px;gap:30px}.alma-case-copy h3{font-size:56px;margin:16px 0}.alma-case-copy .project-intent{font-size:22px}.alma-case-copy>p{max-width:none}.alma-case-copy small{margin-top:18px}.alma-detail{margin-inline:-8px}.folio-project-grid{grid-template-columns:1fr;gap:35px}.interface-project:nth-child(even){padding-top:0}.interface-stage{padding:35px 18px 20px}.interface-caption{grid-template-columns:1fr 1fr;gap:15px;padding:18px 0}.interface-caption h3{font-size:27px}.interface-caption p{font-size:10px}.interface-caption .eyebrow{font-size:7px}.portfolio-next .deckit-feature{margin-top:35px}}
@media(prefers-reduced-motion:reduce){.hero-desktop,.interface-window{transition:none}}
/* Keep the exhibit captions outside the screen composition. */
.hero-desktop{width:85%;left:6%;top:86px}
.exhibit-foot{z-index:2;background:#dedfd5;padding-top:10px;bottom:20px}
@media(min-width:1600px){.hero-desktop{top:110px}}
@media(max-width:1000px) and (min-width:761px){.hero-desktop{width:100%;top:95px}}
@media(max-width:760px){.hero-desktop{width:92%;top:75px}.exhibit-foot{bottom:16px}}
.alma-detail img{height:auto}
.interface-caption p{font-size:12px}.interface-caption .eyebrow{font-size:9px}.project-tags span{font-size:10px}.alma-case-copy small{font-size:10px}.stage-action{font-size:11px}
@media(max-width:760px){.interface-caption{grid-template-columns:1fr;gap:12px}.interface-caption p{font-size:12px}.interface-caption .eyebrow{font-size:9px}.alma-detail>span{font-size:9px}}
#interfaces{scroll-margin-top:110px}