/* One fixed photographic stage for covers and spreads, across homepage and catalogue. */
.edition-grid .edition-card:nth-child(n) .book-stage{height:auto;min-height:0;aspect-ratio:1.18;padding:0;overflow:hidden;position:relative;display:block;background:#f1f2f2;border-radius:0;isolation:isolate}
.edition-grid .edition-card .card-sheet{position:absolute;inset:32px;display:grid;place-items:center;container-type:size;opacity:0;visibility:hidden;transform:translateX(5px);transition:opacity .28s ease,transform .38s ease,visibility 0s .38s;pointer-events:none}
.edition-grid .edition-card .card-sheet.is-active{opacity:1;visibility:visible;transform:translateX(0);transition-delay:0s}
.edition-grid .edition-card .card-sheet.is-leaving{transform:translateX(-5px)}
.edition-grid .edition-card .card-object{position:relative;width:min(100%,calc(100cqh * var(--object-ratio)));aspect-ratio:var(--object-ratio);height:auto;max-height:100%;min-height:0;display:grid;place-items:center}
.edition-grid .edition-card:nth-child(n) .card-object>.book{width:100%;height:100%;max-width:none;max-height:none;margin:0;transform:none!important;transition:none;box-shadow:2px 2px 0 #d5d5d0,4px 4px 0 #eeeee9,6px 9px 16px #14141414} /* taste-skill-ignore: physical paper, spine and fold depth in the approved book presentation. */
.edition-grid .edition-card .card-object>.sample-spread{width:100%;height:100%;max-width:100%;aspect-ratio:var(--object-ratio);margin:0;animation:none;box-shadow:0 6px 16px #14141412;transform:none} /* taste-skill-ignore: physical paper, spine and fold depth in the approved book presentation. */
.edition-grid .edition-card .edition-info{padding-top:24px}
.card-progress{position:absolute;bottom:8px;inset-inline:0;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0;transition:opacity .2s;pointer-events:none}
.card-progress i{width:4px;height:4px;border-radius:50%;background:#c2c3c3}
.card-progress i.current{background:#555}
.edition-open:hover .card-progress,.edition-open:focus-visible .card-progress{opacity:1}
/* A visual explanation: photos, dialogue, editable book. */
.is-home .visual-how{padding:104px 0 80px;background:var(--paper)}
.is-home .visual-how>.wrap{display:block}
.how-visual-heading{margin-bottom:40px}
.how-visual-heading .how-kicker{font:500 12px/1.5 var(--sans);margin:0 0 14px;color:var(--muted)}
.is-home .how-visual-heading h2{font:550 clamp(30px,3.4vw,46px)/1.1 var(--sans);letter-spacing:-.04em;margin:0 0 16px}
.how-visual-heading>p:last-child{font:400 16px/1.6 var(--sans);color:var(--muted);margin:0}
.how-visual-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.how-visual-steps>li{position:relative;min-width:0}
.how-visual-steps>li:not(:last-child):after{content:'→';position:absolute;right:-25px;top:110px;font:300 19px var(--sans);color:#9ca2a9}
.how-demo{height:270px;padding:24px;background:var(--surface);border:0;border-radius:var(--radius-panel);overflow:hidden;position:relative;font:400 11px/1.4 var(--sans);color:var(--ink)}
.how-demo-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:18px;font-size:12px}
.how-demo-top>span:first-child{font-weight:550}.how-demo-top>span:last-child{color:var(--muted);font-size:11px}
.how-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:88px 88px;gap:8px}
.how-photo-grid>span{position:relative;min-width:0;overflow:hidden;border-radius:2px}
.how-photo-grid img{width:100%;height:100%;object-fit:cover}
.how-photo-grid i{position:absolute;bottom:5px;right:5px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;font:500 9px var(--sans);background:white;color:#202a26;font-style:normal}
.how-question,.how-answer{font-size:12px;line-height:1.4;padding:11px 13px;border-radius:8px;width:max-content;max-width:95%}
.how-question{background:white;margin:4px 0 10px}
.how-answer{background:#25282a;color:white;margin:0 0 20px auto}
.how-draft{display:flex;align-items:center;gap:12px;padding-top:15px}
.how-draft-book{display:block;flex:none;width:36px;height:48px;padding:4px;background:#e5e9df;box-shadow:none}
.how-draft-book img{width:100%;height:29px;object-fit:cover}
.how-draft strong{font-size:10px;font-weight:550;display:block;margin-bottom:4px}
.how-draft small{font-size:9px;color:var(--muted);display:block}
.how-editor-paper{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:24px auto 12px;width:91%;height:119px;background:#fafaf8;box-shadow:0 4px 14px #1111;border:1px solid #efefeb;padding:13px} /* taste-skill-ignore: physical paper, spine and fold depth in the approved book presentation. */
.how-editor-paper>div:first-child{padding:9px 8px;display:flex;flex-direction:column;justify-content:space-between}
.how-editor-title{font:500 13px/1.1 var(--sans);letter-spacing:-.04em}
.how-editor-caption{font:400 5px var(--sans);color:#737b7b}
.how-editor-fold{position:absolute;inset:0 auto 0 50%;width:10px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#0000000c,transparent)} /* taste-skill-ignore: physical paper, spine and fold depth in the approved book presentation. */
.how-editor-photo{position:relative;z-index:1;border:1px solid #3564a4;margin-left:7px;height:91px} /* taste-skill-ignore: real selection handles in the data-ui editor miniature. */
.how-editor-photo>img{width:100%;height:100%;object-fit:cover}
.how-editor-photo>i{position:absolute;width:5px;height:5px;border:1px solid #3564a4;background:white} /* taste-skill-ignore: real selection handles in the data-ui editor miniature. */
.how-editor-photo>i:nth-of-type(1){left:-3px;top:-3px}.how-editor-photo>i:nth-of-type(2){right:-3px;top:-3px}.how-editor-photo>i:nth-of-type(3){left:-3px;bottom:-3px}.how-editor-photo>i:nth-of-type(4){right:-3px;bottom:-3px}
.how-editor-cursor{position:absolute;right:-13px;bottom:-18px;width:18px;height:22px;fill:#25282a;stroke:white;stroke-width:1.5}
.how-editor-tools{display:flex;justify-content:center;gap:16px;font-size:9px;color:var(--muted);margin-top:17px}
.how-step-caption{display:flex;align-items:baseline;gap:12px;padding-top:22px}
.how-step-caption>span{font:400 13px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.is-home .how-step-caption h3{font:550 20px/1.25 var(--sans);letter-spacing:-.025em;margin:0 0 10px}
.is-home .how-step-caption p{font:400 15px/1.65 var(--sans);color:var(--muted);max-width:29ch;margin:0}
.how-preview-note{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-top:0;margin-top:36px;padding-top:0;font:400 13px/1.6 var(--sans);color:var(--muted)}
.how-preview-note>p{margin:0;max-width:75ch}.how-preview-note>details{max-width:330px;flex:none;padding:0;border:0}
.how-preview-note summary{font:400 13px/1.6 var(--sans);padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.how-preview-note details p{font:400 13px/1.65 var(--sans);margin:12px 0 0;max-width:34ch}
@media(max-width:1050px) and (min-width:761px){.how-visual-steps{gap:22px}.how-demo{padding:16px;height:230px}.how-photo-grid{grid-template-rows:75px 75px}.how-visual-steps>li:not(:last-child):after{right:-18px;font-size:15px}.how-answer,.how-question{font-size:10px;padding:10px}.how-demo-top{font-size:9px}.how-editor-paper{width:100%}.is-home .how-step-caption h3{font-size:18px}.is-home .how-step-caption p{font-size:13px}}
@media(max-width:760px){
 .edition-grid .edition-card:nth-child(n) .book-stage{aspect-ratio:1.2;height:auto;overflow:hidden;padding:0}
 .edition-grid .edition-card .card-sheet{inset:20px}
 .edition-grid .edition-card .edition-info{padding-top:22px}
 .is-home .visual-how{padding:56px 0 48px}
 .how-visual-heading{margin-bottom:28px}
 .is-home .how-visual-heading h2{font-size:32px;max-width:18ch}
 .how-visual-heading>p:last-child{font-size:14px;max-width:34ch}
 .how-visual-steps{grid-template-columns:1fr;gap:30px}
 .how-demo{height:230px;padding:20px 24px}
 .how-demo-top{margin-bottom:14px}
 .how-photo-grid{grid-template-rows:72px 72px;gap:8px}
 .how-visual-steps>li:not(:last-child):after{display:none}
 .how-step-caption{padding-top:16px;gap:12px}
 .is-home .how-step-caption h3{font-size:19px;margin-bottom:7px}
 .is-home .how-step-caption p{font-size:14px;max-width:33ch}
 .how-editor-paper{height:116px;margin-top:20px;max-width:270px}
 .how-editor-photo{height:88px}
 .how-editor-tools{margin-top:13px}
 .how-preview-note{display:block;margin-top:26px}
 .how-preview-note>details{margin-top:12px;max-width:none}
}
@media(prefers-reduced-motion:reduce){.edition-grid .edition-card .card-sheet{transition:none;transform:none}.card-progress{transition:none}}
.edition-grid .edition-card .book-stage{-webkit-user-select:none;user-select:none}
.how-preview-note summary{display:list-item;list-style:disclosure-closed}
.how-preview-note details[open] summary{list-style:disclosure-open}
.how-preview-note summary:after{display:none}

/* Edition artwork is the content: consistent scale, square paper, quiet captions. */
.edition-grid .edition-card .edition-info{text-align:left;padding:24px 0 0}
.edition-grid .edition-card .edition-info h3{font:550 22px/1.25 var(--sans);letter-spacing:-.025em}
.edition-grid .edition-card .edition-info p{font-size:14px;line-height:1.6;margin:9px 0 0;color:var(--muted)}
.edition-grid .edition-card .edition-meta{font-size:13px;margin-top:8px}
.edition-grid .edition-open:focus-visible{outline-offset:6px;border-radius:var(--radius-control)}
.how-visual-heading h2{max-width:23ch;text-wrap:balance}
.how-visual-steps>li:not(:last-child):after{display:none}
.how-step-caption{gap:14px}
.how-visual-steps .how-draft{border-top:0;background:white;padding:12px;border-radius:8px}

@media(max-width:760px){
 .edition-grid .edition-card .edition-info h3{font-size:22px}
 .edition-grid .edition-card .edition-info p{font-size:14px}
 .how-demo{height:250px}
 .how-demo-top{font-size:12px}
 .how-demo-top>span:last-child{font-size:11px}
 .how-question,.how-answer{font-size:12px}
 .how-visual-heading h2{max-width:18ch}
}