/* The sticky scene sits in the middle of the space below the navigation. */
#how{--story-nav-height:81px;--story-height:min(600px,calc(100svh - var(--story-nav-height) - 64px))}
#how .story{align-items:start}
#how .stage-wrap{height:var(--story-height);top:calc(var(--story-nav-height) + (100svh - var(--story-nav-height) - var(--story-height))/2);align-self:start}
#how .stage{isolation:isolate;background:radial-gradient(ellipse at 40% 35%,#30312d,var(--noir-2) 75%)}
#how .stage-caption{position:absolute;inset:18px 18px auto;display:flex;justify-content:space-between;gap:16px;color:var(--paper);font:700 10px/1.4 var(--f-type);letter-spacing:.1em;border-bottom:1px solid #f2eee644;padding-bottom:12px}
#how .stage-caption span:last-child{color:#bdb7aa;letter-spacing:0;font-weight:400}
#how .stage .photo{margin:0;left:6%;top:18%;width:52%;padding:8px 8px 22px;z-index:2}
#how .stage .photo figcaption{font-size:11px}
#how .source-card{position:absolute;left:12%;bottom:17%;width:33%;margin:0;background:var(--paper);padding:7px 7px 15px;transform:rotate(6deg);box-shadow:0 12px 24px #0008;z-index:3;transition:all .65s ease}
#how .source-card img{aspect-ratio:1.4;object-fit:cover}
#how .source-card figcaption{font:11px/1.3 var(--f-type);margin-top:5px}
#how .capture-note{position:absolute;right:6%;top:20%;width:30%;color:var(--paper);transition:opacity .3s}
#how .capture-note b{font:italic 700 clamp(16px,1.7vw,23px)/1.25 var(--f-head);display:block}
#how .capture-note p{font:13px/1.6 var(--f-body);color:#c9c3b8;margin-top:14px}
#how .story-arrows{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
#how .story-arrows path{fill:none;stroke:var(--proof-lt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400}
#how .story-arrows .ink-echo{stroke-width:1;opacity:.6}
#how .story-arrows g{opacity:0;transition:opacity .3s}
#how .stage[data-step="1"] .arrow-capture,#how .stage[data-step="2"] .arrow-review,#how .stage[data-step="3"] .arrow-file{opacity:1}
#how .stage[data-step="1"] .arrow-capture path,#how .stage[data-step="2"] .arrow-review path,#how .stage[data-step="3"] .arrow-file path{animation:story-ink .65s .25s forwards}
@keyframes story-ink{to{stroke-dashoffset:0}}
#how .story-note{position:absolute;z-index:4;color:var(--proof-lt);font:italic 700 clamp(15px,1.55vw,21px)/1.2 var(--f-head);opacity:0;transform:rotate(-6deg);transition:opacity .35s}
#how .note-capture{left:60%;top:57%}
#how .note-review{left:7%;top:73%}
#how .note-file{right:4%;bottom:21%;max-width:22%}
#how .stage[data-step="1"] .note-capture,#how .stage[data-step="2"] .note-review,#how .stage[data-step="3"] .note-file{opacity:1}
#how .stage .rec{right:5%;top:20%;bottom:auto;width:53%;padding:15px;gap:9px;z-index:5;opacity:0;transform:translateY(25px);transition:transform .65s ease,opacity .45s ease,left .65s,top .65s,width .65s}
#how .stage .rec .nm{align-items:start;flex-direction:column;gap:5px}
#how .stage .rec .nm b{font-size:clamp(20px,2vw,27px);line-height:1.15}
#how .stage .rec .tag{font-size:9px;padding:3px 6px}
#how .rec .row{font-size:clamp(10px,1.05vw,14px);grid-template-columns:minmax(0,1fr) auto;gap:8px;line-height:1.35}
#how .rec .row small{font:700 9px/1.2 var(--f-body);display:block;color:#645e53;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
#how .rec .row>span{min-width:0;overflow-wrap:anywhere}
#how .rec .row i{font-size:10px;align-self:end;white-space:nowrap}
#how .rec .row .missing{color:#645e53}
#how .review-note{font:11px/1.5 var(--f-body);border-top:1px dashed #0003;padding-top:8px}
#how .source-count{font:700 9px/1.4 var(--f-type);color:#645e53;background:var(--news);padding:6px}
#how .stage[data-step="2"] .rec,#how .stage[data-step="3"] .rec{opacity:1;transform:none}
#how .stage[data-step="2"] .photo{left:5%;top:22%;width:32%;transform:rotate(-5deg)}
#how .stage[data-step="2"] .source-card{left:8%;bottom:35%;width:26%;transform:rotate(4deg)}
#how .stage[data-step="2"] .capture-note,#how .stage[data-step="3"] .capture-note{opacity:0}
#how .stage .folder{top:16%;right:6%;width:44%;z-index:5}
#how .folder .bodyf{font-size:12px;line-height:1.45;padding:13px}
#how .folder-name{font:700 clamp(17px,1.7vw,23px)/1.2 var(--f-head);display:block}
#how .folder-lead{background:#f2eee6aa;padding:7px;margin-top:12px;font-size:11px;border:1px solid #14141433}
#how .folder-lead>span{color:var(--proof);font-weight:700}
#how .folder-total{display:flex;align-items:baseline;gap:8px;margin-top:10px}
#how .folder .count{display:inline;font-size:28px}
#how .folder small{font-size:9px;display:block;margin-top:8px}
#how .stage[data-step="3"] .photo{left:7%;top:19%;width:29%;transform:rotate(-6deg)}
#how .stage[data-step="3"] .source-card{left:12%;bottom:50%;width:23%;transform:rotate(4deg)}
#how .stage[data-step="3"] .rec{left:7%;right:auto;top:49%;width:56%;transform:rotate(-2deg) scale(.9);transform-origin:top left}
#how .stage[data-step="3"] .rec .review-note,#how .stage[data-step="3"] .rec .row:nth-of-type(4){display:none}
#how .stage .step-label{left:18px;bottom:45px;color:var(--paper);font-size:10px;letter-spacing:.08em}
#how .story-progress{position:absolute;inset:auto 18px 17px;display:flex;gap:6px}
#how .stage .step-label,#how .story-progress{z-index:7}
#how .story-progress span{flex:1;border-top:2px solid #f2eee633;padding-top:6px;color:#c9c3b8;font:10px/1.2 var(--f-type)}
#how .stage[data-step="1"] .story-progress span:nth-child(1),#how .stage[data-step="2"] .story-progress span:nth-child(2),#how .stage[data-step="3"] .story-progress span:nth-child(3){border-color:var(--proof-lt);color:var(--white)}
#how .step{min-height:78svh;opacity:1;border-left-color:#14141422;scroll-margin-top:calc(var(--story-nav-height) + 16px)}
#how .step.on{border-left-color:var(--proof)}
#how .step .n{opacity:.6}
#how .step.on .n{opacity:1}
#how .step .step-result{font:700 13px/1.6 var(--f-type);color:var(--ink);border-top:1px dashed #14141455;padding-top:14px;margin-top:6px;max-width:44ch;text-wrap:pretty}
@media(max-width:1100px) and (min-width:901px){#how .story{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}#how .stage .rec{padding:10px}#how .rec .row{grid-template-columns:1fr}#how .rec .row i{display:none}#how .capture-note p{font-size:11px}}
@media(max-width:900px){
  #how{--story-height:clamp(300px,42svh,410px)}
  #how .stage-wrap{top:calc(var(--story-nav-height) + 12px);z-index:5}
  #how .stage{box-shadow:6px 6px 0 var(--ink)}
  #how .step{min-height:calc(100svh - var(--story-nav-height));padding-block:calc(var(--story-height) + 32px) 32px;justify-content:center}
  #how .step .n{font-size:40px}
  #how .step h3{font-size:28px}
  #how .step p{font-size:16px}
  #how .stage .photo{width:47%;top:19%;padding-bottom:17px}
  #how .source-card{width:27%;bottom:21%;padding-bottom:9px}
  #how .source-card figcaption{font-size:9px;white-space:nowrap}
  #how .note-capture{top:66%}
  #how .capture-note{width:34%;right:6%;top:23%}
  #how .capture-note b{font-size:18px}
  #how .capture-note p{font-size:11px;line-height:1.5;margin-top:9px}
  #how .stage .rec{top:14%;padding:9px;gap:5px;width:55%}
  #how .stage .rec .nm b{font-size:19px}
  #how .rec .row{font-size:10px;line-height:1.3;padding-top:5px;grid-template-columns:minmax(0,1fr)}
  #how .rec .row i{display:none}
  #how .rec .row small{font-size:8px}
  #how .review-note{font-size:10px;line-height:1.3;padding-top:5px}
  #how .source-count{font-size:8px;padding:4px}
  #how .stage[data-step="2"] .source-card{bottom:37%;width:26%}
  #how .note-review{top:73%;font-size:15px}
  #how .stage[data-step="3"] .rec{top:45%;width:61%;transform:rotate(-2deg) scale(.83)}
  #how .stage[data-step="3"] .photo figcaption{font-size:9px}
  #how .stage .folder{top:16%;width:45%}
  #how .folder .bodyf{padding:9px;font-size:10px}
  #how .folder-name{font-size:17px}
  #how .folder-lead{margin-top:7px;padding:5px;font-size:10px}
  #how .folder-total{margin-top:5px;font-size:9px;gap:6px}
  #how .folder .count{font-size:22px}
  #how .folder small{display:none}
  #how .stage-caption{inset:12px 12px auto;font-size:8px;padding-bottom:8px}
  #how .stage .step-label{left:12px;bottom:39px;font-size:9px}
  #how .story-progress{inset:auto 12px 12px}
  #how .story-progress span{font-size:9px}
}
@media(max-width:380px){#how .folder-name{font-size:14px}#how .stage .rec .nm b{font-size:17px}}
@media(prefers-reduced-motion:reduce){#how .story-arrows path{stroke-dashoffset:0;animation:none}#how .stage .flash{display:none}}