/* Valeria reference: a broad left column and stacked cards on the right. */
.reference-craft{grid-template-columns:minmax(0,.615fr) minmax(0,.826fr) minmax(0,1fr);grid-template-areas:"clarity clarity tools" "domains process tools" "domains process metric";grid-template-rows:270px 40px 330px;gap:24px}
.reference-craft .practice-card{height:auto;background:#e9edf2;border:0;border-radius:0}
.reference-craft .practice-clarity{grid-area:clarity;display:block;padding:0}
.reference-craft .practice-process{grid-area:process;--glow:#dfd7ef;--wash:#e8e1f0}
.reference-craft .craft-tools{grid-area:tools}
.reference-craft .practice-domains{grid-area:domains}
.reference-craft .practice-metric{grid-area:metric;--glow:#d8e5f9;--wash:#e5ebf6}
.reference-craft .practice-copy{padding:32px 32px 0;max-width:490px}
.reference-craft .practice-copy h2{font-size:26px;line-height:1.25;margin-bottom:12px}
.reference-craft .practice-copy p{font-size:14px;line-height:1.55;color:#737e89;max-width:390px}
.reference-craft .practice-clarity .practice-copy{width:45%;max-width:380px}
.clarity-blueprint{position:absolute;left:58%;right:-12%;top:30%;height:auto}
.clarity-image{position:relative;width:100%;aspect-ratio:1300/935;overflow:hidden;border-radius:7px;background:white}
.clarity-image img{position:absolute;left:-5.77%;top:-8.13%;width:111.4%;height:auto;max-width:none;display:block;clip-path:none}
.guide{position:absolute;display:block;opacity:.55;pointer-events:none;z-index:2}
.guide-top,.guide-bottom{left:-28px;right:0;border-top:1px solid #9caebd}
.guide-top{top:-12px}.guide-bottom{bottom:-12px}
.guide-left,.guide-right{top:-110px;bottom:-60px;border-left:1px dashed #9caebd}
.guide-left{left:-12px}.guide-right{right:20%}
.reference-craft .reference-folder{left:-5%;right:-5%;bottom:0;width:110%;max-width:none;height:64%;transform:none}
.process-folder-art{height:100%;width:100%;display:block;overflow:visible}
.folder-paper{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.reference-folder:hover .folder-design,.reference-folder:focus-visible .folder-design,.reference-folder.is-open .folder-design{transform:translateY(-27px)}
.reference-folder:hover .folder-lined,.reference-folder:focus-visible .folder-lined,.reference-folder.is-open .folder-lined{transform:translateY(-20px)}
.reference-folder:hover .folder-discovery,.reference-folder:focus-visible .folder-discovery,.reference-folder.is-open .folder-discovery{transform:translate(-5px,-12px)}
.reference-folder:hover .folder-ideation,.reference-folder:focus-visible .folder-ideation,.reference-folder.is-open .folder-ideation{transform:translate(5px,-17px)}
.static-tools{background:radial-gradient(ellipse at 50% 90%,#ecd4d8,transparent 78%),#e9edf2!important}
.static-tools:before{display:none!important}
.static-tools,.static-tools *{animation:none!important;transition:none!important}
.static-laptop{position:absolute;left:4%;right:4%;bottom:0;aspect-ratio:1.7;display:block;overflow:hidden}
.static-laptop img{position:absolute;left:0;top:0;width:100%;height:auto;max-height:none;display:block;clip-path:inset(7.2% 5.6% 6.2% 5.6% round 12px);transform:translateY(8.5%)}
.domain-rain{position:absolute;left:0;right:0;top:160px;bottom:0;overflow:hidden}
.reference-craft .practice-domains .domain-pile{left:7%;right:7%;bottom:28px;gap:12px 7px;max-width:none;padding:0}
.reference-craft .domain-pile button,.reference-craft .domain-pile button:last-child{font-size:clamp(12px,1.07vw,18px);padding:8px 9px;font-weight:400}
.impact-number{position:absolute;left:32px;right:26px;bottom:28px;color:#6c8bb9}
.impact-number strong{display:block;white-space:nowrap;font:500 clamp(80px,9vw,140px)/.92 HomeInter,Arial,sans-serif;letter-spacing:-6px}
@media(min-width:1600px){.reference-craft{grid-template-rows:320px 55px 385px}.reference-craft .practice-copy h2{font-size:30px}.reference-craft .practice-copy p{font-size:16px}.domain-rain{top:185px}}
@media(max-width:1100px){.reference-craft{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"clarity clarity" "process tools" "domains metric";grid-template-rows:270px 365px 410px;gap:20px}.reference-craft .practice-copy{padding:28px 27px 0}.reference-craft .practice-copy h2{font-size:24px}.reference-craft .practice-clarity .practice-copy{width:42%;padding-top:34px}.clarity-blueprint{left:64%;right:-6%;top:27%}.reference-craft .reference-folder{height:66%}.static-laptop{left:2%;right:2%;aspect-ratio:1.7}.domain-rain{top:150px}.reference-craft .practice-domains .domain-pile{bottom:35px;gap:16px 9px}.reference-craft .domain-pile button,.reference-craft .domain-pile button:last-child{font-size:17px;padding:10px 12px}.impact-number{left:27px;bottom:32px}.impact-number strong{font-size:clamp(70px,10vw,110px);letter-spacing:-5px}}
@media(max-width:600px){.reference-craft{grid-template-columns:1fr;grid-template-areas:"clarity" "process" "tools" "domains" "metric";grid-template-rows:350px 395px 380px 480px 320px;gap:18px}.reference-craft .practice-copy{padding:28px 25px 0}.reference-craft .practice-copy h2{font-size:24px}.reference-craft .practice-copy p{font-size:13px}.reference-craft .practice-clarity .practice-copy{width:auto;max-width:none;padding:28px 25px 0}.clarity-blueprint{left:38%;right:-7%;top:49%}.guide-left,.guide-right{top:-20px;bottom:-55px}.guide-top,.guide-bottom{left:-20px;right:0}.static-laptop{left:0;right:0;aspect-ratio:1.7}.domain-rain{top:155px}.reference-craft .practice-domains .domain-pile{bottom:38px;gap:16px 8px}.reference-craft .domain-pile button,.reference-craft .domain-pile button:last-child{font-size:18px;padding:10px 12px}.impact-number{left:25px;right:25px;bottom:32px}.impact-number strong{font-size:clamp(76px,24vw,105px);letter-spacing:-5px}}
@media(prefers-reduced-motion:reduce){.folder-paper{transition:none}}
/* Shared soft corners and a live, monochrome industry playground. */
.reference-craft .practice-card{border-radius:16px}
.reference-craft{grid-template-areas:"clarity clarity tools" "domains process tools" "domains process metric" "stack stack stack";grid-template-rows:270px 40px 330px 270px}
.reference-craft .practice-stack{grid-area:stack;background:#e8edea;display:grid;grid-template-columns:.85fr 1.3fr;gap:24px;align-items:center;padding-right:32px}
.reference-craft .practice-stack .practice-copy{padding-top:0}
.reference-craft .practice-stack h2{font-size:26px;letter-spacing:-.5px}
.stack-editor{min-width:0;background:#1e2426;color:#e7e9df;border-radius:12px;box-shadow:0 14px 28px #253b3320;overflow:hidden}
.editor-tabs{display:flex;align-items:center;gap:7px;padding:16px 20px;border-bottom:1px solid #ffffff10;font:11px/1.4 monospace;color:#8c9b96}.editor-tabs i{width:7px;height:7px;border-radius:50%;background:#d2b5a0}.editor-tabs i:nth-child(2){background:#d6cc99}.editor-tabs i:nth-child(3){background:#9bb8aa}.editor-tabs span{margin-left:14px}.stack-editor pre{margin:0;padding:22px 24px;overflow:auto;font:13px/1.9 monospace}.code-comment{color:#8a9b92}.code-purple{color:#c4b3de}.code-green{color:#bdd7a9}.code-caret{color:#cbd7c9;animation:code-blink 1.2s steps(2) infinite}@keyframes code-blink{50%{opacity:0}}
.reference-craft .domain-pile button,.reference-craft .domain-pile button:last-child{background:#faf9f5;color:#151515;border:1px solid #d6d7d3;border-radius:999px;font-family:Plex,'Courier New',monospace;box-shadow:0 2px 3px #00000009;cursor:grab;white-space:nowrap;touch-action:none}
.physics-ready .domain-pile{position:static!important;display:block!important;margin:0!important;padding:0!important}
.physics-ready .domain-pile button{position:absolute;left:0;top:0;margin:0;transition:none!important;transform-origin:center;will-change:transform}
.physics-ready.is-dragging button{cursor:grabbing}
@media(min-width:1600px){.reference-craft{grid-template-rows:320px 55px 385px 285px}}
@media(max-width:1100px){.reference-craft{grid-template-areas:"clarity clarity" "process tools" "domains metric" "stack stack";grid-template-rows:270px 365px 410px 270px}}
@media(max-width:600px){.reference-craft{grid-template-areas:"clarity" "process" "tools" "domains" "metric" "stack";grid-template-rows:350px 395px 380px 480px 320px 350px}.reference-craft .practice-stack{display:block;padding:0}.reference-craft .practice-stack .practice-copy{padding:28px 25px 0}.reference-craft .practice-stack h2{font-size:24px}.stack-editor{position:absolute;left:16px;right:16px;bottom:22px}.stack-editor pre{font-size:10px;padding:16px 12px}.editor-tabs{padding:12px}}
@media(prefers-reduced-motion:reduce){.code-caret{animation:none}}
/* Compact spacing and one consistent card surface. */
.reference-craft{gap:12px}.reference-craft .practice-stack{background:#e9edf2}.practice-stack:before{display:block}.practice-stack{--glow:#c7d8ef;--wash:#dce5f3}.industry-tap{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:128px;padding:0;background:none;border:0;color:#282d2e;z-index:5;cursor:pointer;touch-action:manipulation}.industry-tap svg{display:block;width:128px;height:103px;overflow:visible;filter:drop-shadow(0 5px 3px #26323318)}.tap-caption{display:inline-block;font:10px/1.4 Plex,monospace;padding:4px 9px;border:1px solid #9ca5a9;border-radius:20px;background:#f8faf9}.tap-handle{transform-origin:58px 32px;transition:transform .3s cubic-bezier(.2,.8,.3,1)}.industry-tap.is-flowing .tap-handle{transform:rotate(-28deg)}.industry-tap:hover .tap-caption{background:#fff}.physics-ready .domain-pile button{z-index:2}.domain-pile button[hidden]{display:none!important}
@media(max-width:1100px){.reference-craft{gap:12px}}@media(max-width:600px){.reference-craft{gap:10px}.industry-tap{top:3px}}
@media(prefers-reduced-motion:reduce){.tap-handle{transition:none}}
.industry-tap .tap-caption{position:absolute;right:-9px;top:0}
@media(min-width:1101px){.reference-craft .domain-pile button,.reference-craft .domain-pile button:last-child{font-size:clamp(11px,.95vw,17px)}}
@media(min-width:1101px){.static-laptop{left:15%;right:15%}}@media(min-width:601px) and (max-width:1100px){.static-laptop{left:6%;right:6%}}
.reference-craft .craft-tools{min-height:0}
@media(max-width:360px){.reference-craft{grid-template-rows:350px 395px 380px 480px 320px 365px}}

/* Keep the raised handle inside the clipped physics layer and the label clear of it. */
.domain-rain .industry-tap{top:16px}.industry-tap .tap-caption{right:-38px}

/* Extra fall distance keeps the settled industry pile clear of the faucet. */
.reference-craft{grid-template-rows:270px 40px 442px 270px}
@media(min-width:1600px){.reference-craft{grid-template-rows:320px 55px 497px 285px}}
@media(max-width:1100px){.reference-craft{grid-template-rows:270px 365px 522px 270px}}
@media(max-width:600px){.reference-craft{grid-template-rows:350px 395px 380px 592px 320px 350px}}
@media(max-width:360px){.reference-craft{grid-template-rows:350px 395px 380px 592px 320px 365px}}