/* The intro keeps its natural layout unless scroll motion is available. */
.intro-journey{position:relative;--intro-scale:1;--intro-y:0px;--intro-copy-y:0px;--intro-copy-opacity:1}
.wordmark-motion{transform-origin:left top;transform:translate3d(0,var(--intro-y),0) scale(var(--intro-scale))}
.intro-journey .intro-bottom{transform:translateY(var(--intro-copy-y));opacity:var(--intro-copy-opacity)}
.scroll-intro .intro{position:sticky;top:24px}
.scroll-intro .wordmark-motion{will-change:transform}
.project-showcase{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:stretch;transform-origin:50% 0;transform:translateY(var(--showcase-y,0px)) scale(var(--showcase-scale,1))}
.project-showcase>.project-art{min-height:0;aspect-ratio:auto}
.live-preview{min-width:0;padding:clamp(12px,1.25vw,24px);background:#272923;color:var(--paper);display:flex;flex-direction:column;justify-content:center}
.preview-toolbar{min-height:42px;display:flex;align-items:center;gap:14px;padding:0 3px 12px}
.window-dots{display:flex;gap:5px;flex-shrink:0}.window-dots i{display:block;width:6px;height:6px;border:1px solid #8b8e80;border-radius:50%}
.preview-address{font-size:11px;color:#d2d2c8;letter-spacing:.01em;margin-right:auto}
.preview-toggle{background:none;border:1px solid #707368;color:var(--paper);border-radius:30px;min-height:32px;min-width:86px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:11px;cursor:pointer;padding:6px 10px;transition:background .2s,border-color .2s}
.preview-toggle:hover{background:#42463a;border-color:#b6b9aa}.preview-toggle[hidden]{display:none}
.preview-viewport{position:relative;aspect-ratio:3/2;overflow:hidden;background:#ffdf00;border-radius:3px;isolation:isolate;box-shadow:0 14px 36px #0003}
.preview-frame{position:absolute;left:0;top:0;width:1440px;height:960px;max-width:none;border:0;transform-origin:0 0;transform:scale(var(--preview-scale,.5));opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:1}
.has-preview .preview-frame{opacity:1}
.preview-placeholder{position:absolute;inset:0;overflow:hidden;color:#172748;padding:7%;transition:opacity .5s ease}
.preview-placeholder>span{font-size:clamp(11px,1.4vw,19px);font-weight:800;letter-spacing:-.06em}
.preview-placeholder p{position:absolute;left:7%;top:28%;font-size:clamp(34px,4vw,70px);font-weight:800;line-height:.95;letter-spacing:-.055em}
.preview-placeholder img{position:absolute;right:12%;top:12%;height:84%;width:25%;object-fit:contain;transform:rotate(12deg);filter:drop-shadow(8px 16px 9px #79500035)}
.has-preview .preview-placeholder{opacity:0}
.preview-open{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:18px}
.preview-open>span{display:inline-flex;align-items:center;gap:25px;background:var(--paper);color:var(--ink);border-radius:3px;padding:12px 16px;font-size:12px;opacity:0;transform:translateY(7px);transition:opacity .2s,transform .2s;box-shadow:0 3px 15px #0002}
.preview-open:hover>span,.preview-open:focus-visible>span{opacity:1;transform:none}.preview-open:focus-visible{outline-offset:-5px}
.preview-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 3px 1px;font-size:11px;line-height:1.5;color:#d2d2c8}
.preview-badge{white-space:nowrap;color:#a9ae9d}
.project-actions{display:flex;gap:12px;margin-top:28px}
.project-action{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;padding:17px 21px;border:1px solid var(--ink);border-radius:2px;font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.project-action>span{font-size:17px;line-height:1;letter-spacing:0;transition:transform .25s}.project-action:hover>span{transform:translate(2px,-2px)}
.action-story:hover{background:#e3e0d7}.action-demo{background:var(--ink);color:var(--paper)}.action-demo:hover{background:var(--accent);border-color:var(--accent)}


@media(min-width:1001px){
  .project-showcase .art-top{left:7%;right:7%;top:6%;align-items:flex-start;gap:16px}
  .project-showcase .art-top>span:last-child{max-width:118px;text-align:right;line-height:1.45;font-size:10px}
  .project-showcase .art-top>span:last-child span{margin-left:8px}
  .project-showcase .art-copy{font-size:clamp(40px,4.6vw,84px);top:24%;left:7%}
  .project-showcase .project-cup{right:0;top:20%;width:33%;height:78%}
  .project-showcase .project-lemon{right:-12%;top:61%;width:35%}
  .project-showcase .project-ice{right:12%;top:9%;width:15%}
  .project-showcase .art-bottom{left:7%;bottom:6%;max-width:165px;line-height:1.5;font-size:11px}
  .project-showcase .project-arrow{width:43px;height:43px;font-size:25px;right:6%;bottom:6%}
}
@media(max-width:1000px){
  .project-showcase{grid-template-columns:1fr;gap:14px}.project-showcase>.project-art{aspect-ratio:3/2;min-height:0}
  .live-preview{padding:18px}.preview-caption{padding-bottom:2px}.preview-placeholder p{font-size:7vw}
}
@media(max-width:680px){
  .project-showcase>.project-art{aspect-ratio:4/5;min-height:0}.live-preview{padding:11px}
  .preview-toolbar{gap:9px;min-height:41px}.preview-address{font-size:10px}.window-dots{gap:4px}.window-dots i{width:5px;height:5px}
  .preview-toggle{font-size:10px;min-width:71px;padding:5px 8px}.preview-caption{font-size:10px;gap:10px;padding-top:13px}.preview-caption>span:first-child{max-width:165px}
  .preview-badge{font-size:9px}.preview-placeholder p{font-size:9vw}.preview-open{padding:10px}.preview-open>span{font-size:10px;padding:9px 11px;gap:16px}
  .project-actions{gap:9px;margin-top:23px}.project-action{flex:1;gap:12px;font-size:10px;letter-spacing:.08em;padding:15px 12px}
}
@media(hover:none){.preview-open>span{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .intro-journey{height:auto!important}.scroll-intro .intro{position:static}.wordmark-motion,.intro-journey .intro-bottom,.project-showcase{transform:none!important;will-change:auto}.intro-journey .intro-bottom{opacity:1!important}
}