/* A paper-and-print backdrop, with a weighted curtain reveal. */
.cut-instruction{left:var(--pad);right:auto;top:31px;max-width:calc(100% - 2 * var(--pad));font-size:10px;letter-spacing:.035em;line-height:1.5;color:#303a30;background:#f5f3eedd;padding:4px 9px;gap:18px}
.cut-instruction span{white-space:nowrap}
.cut-handle{height:60px}
.cut-seam{height:44px}
.work-content{isolation:isolate;background:radial-gradient(ellipse at 100% 4%,#d9d2bd4d,transparent 34%),var(--paper)}
.work-content:before{content:'';position:absolute;inset:0;z-index:-1;background-image:url('media/studio-repeat.svg');background-size:480px 480px;opacity:.21;mask-image:linear-gradient(90deg,#000,transparent 14%,transparent 83%,#000),radial-gradient(ellipse 60% 280px at 85% 0,#000,transparent);pointer-events:none}
.work-intro{border-bottom:1px solid var(--rule);margin-bottom:12px;padding-top:80px;padding-bottom:66px}
.work-intro>p{padding:14px 0 14px 18px;border-left:2px solid #a13a2670;background:linear-gradient(90deg,#f5f3eef5,#f5f3ee00)}
.project-caption{background:#f5f3eee8;padding-bottom:14px}
.generators{position:relative;padding-top:15px}
.generator-intro{padding-bottom:12px}
.generator{background:#f5f3eef0}
.generator-title{border-top-width:2px}
.generator[data-generator=pattern]{--accent:#a13a26}
.pattern-showcase{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eee6d8;padding:26px}
#studio-pattern-preview{width:100%;height:100%}
#studio-pattern-preview svg{display:block;width:100%;height:100%}
#pattern-variation{position:absolute;right:12px;bottom:12px;background:var(--paper);border:1px solid var(--rule);padding:10px 14px;min-height:44px;font-size:11px}
#pattern-variation:hover{background:#fffdf8}
.is-revealing{max-height:100svh;overflow:hidden}
.is-revealing .garden-sheet{transform-origin:50% 0;transition:none;animation:curtain-drop 1900ms cubic-bezier(.42,0,.82,.65) both;box-shadow:0 -10px 38px #29292325;will-change:transform;clip-path:polygon(0.000% 0.000%,1.563% 0.067%,3.125% 0.261%,4.688% 0.554%,6.250% 0.903%,7.813% 1.257%,9.375% 1.562%,10.938% 1.771%,12.500% 1.852%,14.063% 1.792%,15.625% 1.599%,17.188% 1.302%,18.750% 0.947%,20.313% 0.587%,21.875% 0.280%,23.438% 0.073%,25.000% 0.000%,26.563% 0.074%,28.125% 0.285%,29.688% 0.603%,31.250% 0.980%,32.813% 1.359%,34.375% 1.683%,35.938% 1.902%,37.500% 1.982%,39.063% 1.910%,40.625% 1.698%,42.188% 1.378%,43.750% 0.998%,45.313% 0.617%,46.875% 0.293%,48.438% 0.076%,50.000% 0.000%,51.563% 0.076%,53.125% 0.293%,54.688% 0.617%,56.250% 0.998%,57.813% 1.378%,59.375% 1.698%,60.938% 1.910%,62.500% 1.982%,64.063% 1.902%,65.625% 1.683%,67.188% 1.359%,68.750% 0.980%,70.313% 0.603%,71.875% 0.285%,73.438% 0.074%,75.000% 0.000%,76.563% 0.073%,78.125% 0.280%,79.688% 0.587%,81.250% 0.947%,82.813% 1.302%,84.375% 1.599%,85.938% 1.792%,87.500% 1.852%,89.063% 1.771%,90.625% 1.562%,92.188% 1.257%,93.750% 0.903%,95.313% 0.554%,96.875% 0.261%,98.438% 0.067%,100.000% 0.000%,100% 100%,0 100%)}
.garden-sheet:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:10;opacity:0;background:repeating-linear-gradient(96deg,transparent 0 7%,#fffcf280 10%,transparent 13%,#2d2a2055 17%,transparent 22%);background-size:100% 100%;mix-blend-mode:normal}
.is-revealing .garden-sheet:after{animation:curtain-folds 1900ms ease-in both}
.is-revealing .work-content{animation:work-emerge 1900ms 400ms cubic-bezier(.22,.61,.36,1) both;pointer-events:none;max-height:calc(100svh - var(--mast));overflow:clip;contain:paint}
.is-revealed .work-content{opacity:1;transform:none}
/* One accelerating trajectory; the shallow folds are a static clipping edge. */
@keyframes curtain-drop{
  from{transform:var(--curtain-start,translate3d(0,0,0))}
  to{transform:translate3d(0,112svh,0) scale(.98,.9)}
}
@keyframes curtain-folds{0%{opacity:0}25%{opacity:.15}65%{opacity:.35}100%{opacity:.45}}
@keyframes work-emerge{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.reveal-instant .garden-sheet,.reveal-instant .garden-sheet:after,.reveal-instant .work-content{animation:none!important}
.reveal-instant.is-revealing .garden-sheet{visibility:hidden}
@media(max-width:600px){
  .cut-instruction{left:13px;right:13px;max-width:none;top:29px;padding:3px 7px;font-size:8px;gap:8px;justify-content:space-between}
  .cut-instruction>span:first-child{white-space:normal;max-width:34ch}
  .collection-bar{top:62px!important}
  .work-intro{padding:42px 0 34px}
  .work-intro>p{padding:10px 0 10px 14px;margin-top:24px}
  .work-content:before{background-size:320px 320px;opacity:.16}
}
@media(prefers-reduced-motion:reduce){.is-revealing .garden-sheet{visibility:hidden}.is-revealing .work-content{animation:none;opacity:1;transform:none}}

.work-content:focus{outline:none}

/* A short designer's note, reached by scrolling below the product demo. */
.demo-design-note{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,8vw,120px);padding:clamp(56px,7vw,104px) var(--pad) clamp(64px,8vw,116px);border-top:1px solid #24332b26;background-color:#f5f3ee;background-image:var(--paper-fibre);color:#24332b}
.design-note-heading .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:24px;color:#74796c}
.design-note-heading h2{font:400 clamp(32px,3.6vw,52px)/1.08 'Inter Tight',Arial,sans-serif;letter-spacing:-.04em}
.design-note-copy{max-width:540px;padding-top:4px}.design-note-copy p{font-size:15px;line-height:1.8;color:#596052}.design-note-copy p+p{margin-top:20px}
.design-note-copy button{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-height:46px;border-bottom:1px solid #24332b70;margin-top:26px;font-size:13px}.design-note-copy button:hover{color:#963820;border-color:#963820}
@media(max-width:700px){.demo-design-note{grid-template-columns:1fr;gap:28px;padding-top:46px;padding-bottom:56px}.design-note-heading .eyebrow{margin-bottom:17px}.design-note-copy p{font-size:14px;line-height:1.75}.design-note-copy button{margin-top:20px}}