.how-intro{max-width:1200px;margin:auto;padding:80px 6% 65px}.how-intro h1{font-size:clamp(43px,5.6vw,78px);max-width:17ch;margin:25px 0}.how-intro .lead{max-width:660px;font-size:17px}.how-intro .text-link{display:inline-block;margin-top:15px}.how-story{position:relative;max-width:1140px;margin:0 auto;padding:35px 6% 110px;isolation:isolate}.how-steps{display:grid;gap:115px;padding-bottom:15vh}.note-anchor{display:block;height:0;scroll-margin-top:30px}.how-step{position:sticky;top:calc(28px + var(--note-index)*19px);z-index:calc(1 + var(--note-index));padding:52px;min-height:510px;display:grid;grid-template-columns:1.4fr .8fr;gap:50px;align-items:center;background:var(--note-paper);color:#263125;border:1px solid #9da68f;box-shadow:0 18px 40px #0003;transform:perspective(1400px) rotateX(1deg) rotateZ(var(--note-angle));transform-origin:50% 20%;scroll-margin-top:100px}.how-step:before{content:'';position:absolute;top:-17px;left:43%;width:120px;height:36px;background:#d6d4b5a6;box-shadow:0 1px 1px #0001;transform:rotate(-4deg);pointer-events:none}.how-step:after{content:'';position:absolute;right:0;bottom:0;width:28px;height:28px;background:linear-gradient(135deg,#0000000a 0 49%,#10120f 50%);pointer-events:none}.note-body{min-width:0}.how-step-number{font:500 12px/1.5 Inter,sans-serif;letter-spacing:.1em;border-bottom:1px solid #728264;padding-bottom:10px;display:block}.how-step h2{font-size:clamp(33px,3.6vw,49px);line-height:1.1;margin:24px 0;max-width:17ch}.how-step p{font-size:15px;line-height:1.8}.how-step ul{padding:18px 0 0;list-style:none;display:grid;gap:12px;margin:24px 0 0;border-top:1px solid #9ba48d}.how-step li{font:400 13px/1.7 Inter,sans-serif;display:flex;gap:12px}.how-step li:before{content:'↗';font-size:15px}.how-step .text-link{display:inline-block;margin-top:25px;color:inherit;border-color:#68765c;font-size:13px}.note-art{min-width:0;transform:rotate(4deg);font-family:Inter,sans-serif;align-self:center}.note-art strong{font-family:'Bricolage Grotesque',Inter,sans-serif;font-size:33px;line-height:1.1;display:block;margin:20px 0}.note-message{border:1px solid #8b9475;background:#fffdf0;padding:24px;box-shadow:6px 6px 0 #43513616}.note-message p{font-size:12px;border-top:1px solid #b8bda8;padding-top:12px}.note-art small{font:500 10px/1.6 Inter,sans-serif}.note-art-image{border:1px solid #9ba48d;background:#fffdf0;padding:8px;box-shadow:5px 5px 0 #26312518}.note-art-image img{display:block;width:100%;height:auto}.note-art-image small{display:block;padding:12px 5px 5px}.note-art-type{display:flex;gap:8px;flex-wrap:wrap}.note-art-type>span{display:grid;place-items:center;border:1px solid #869579;width:75px;height:90px;background:#f8f6eb;font-size:44px}.note-art-type>span:nth-child(2){font-family:Georgia,serif;font-style:italic;background:#d6dfc8}.note-art-type>span:nth-child(3){font-family:monospace;background:#f4e2cb}.note-art-type>small{flex-basis:100%;margin-top:12px}.note-checklist{border-top:3px double #7e8b73;border-bottom:3px double #7e8b73;padding:15px 0}.note-checklist p{display:flex;gap:14px;border-bottom:1px solid #a8b09a;padding-bottom:14px;font-size:13px}.note-checklist p:last-child{border:0;margin-bottom:0}
.how-step h2{color:#263125}.how-step p{color:#3d4936;opacity:1}.how-step .note-art p{color:#3d4936}
@media(max-width:900px){.how-step{gap:25px;padding:38px;grid-template-columns:1.5fr .8fr}.how-step h2{font-size:36px}.note-message{padding:18px}.note-art strong{font-size:28px}.note-art-type>span{width:54px;height:65px;font-size:34px}.how-step p{font-size:14px}}
@media(max-width:700px){.how-intro{padding:50px 6% 40px}.how-intro h1{font-size:43px}.how-intro .lead{font-size:16px}.how-story{padding:25px 6% 65px}.how-steps{gap:75px;padding-bottom:12vh}.how-step{grid-template-columns:1fr;padding:28px 25px;min-height:0;top:calc(16px + var(--note-index)*13px);transform:rotateZ(var(--note-angle))}.note-art{display:none}.how-step h2{font-size:32px;margin:22px 0;max-width:18ch}.how-step p{font-size:14px}.how-step li{font-size:12px}.how-step ul{margin-top:20px;padding-top:16px}.how-step .text-link{margin-top:22px;font-size:12px}.how-step:before{left:35%;width:95px;height:30px;top:-13px}.note-anchor{scroll-margin-top:18px}}
@media(max-height:700px){.how-step{position:relative;top:auto}.how-steps{gap:45px;padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.how-step{position:relative!important;top:auto!important;transform:none!important;box-shadow:none}.how-steps{gap:45px;padding-bottom:0}.note-art{transform:none}}
@media(forced-colors:active){.how-step{border:2px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}.how-step:before,.how-step:after{display:none}.how-step .text-link{color:LinkText}}

/* The paper rises into place as it enters the view, then settles for reading. */
@media (min-width:801px) and (min-height:801px) and (prefers-reduced-motion:no-preference) {
  .how-story.has-paper-depth .how-step {
    transform-style:preserve-3d;
    transform:perspective(1200px) translateY(var(--depth-shift,0px)) scale(var(--depth-scale,1)) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg)) rotateZ(var(--note-angle));
    box-shadow:0 2px 0 #fff5, 0 5px 0 #52604b45, 0 9px 0 #27322825, 0 28px 48px #0005;
  }
  .how-story.has-paper-depth .note-body { transform:translateZ(10px); }
  .how-story.has-paper-depth .note-art { transform:translateZ(35px) rotate(4deg); }
  .how-story.has-paper-depth .how-step:before { transform:translateZ(14px) rotate(-4deg); }
}