/* Three editorial zones; frozen copy, geometry, and two-color pairings. */
.poems {grid-auto-columns:min(100%,676px);column-gap:24px;padding-block:15px 26px;align-items:start;scroll-snap-type:x mandatory}
.poem[data-card] {container-type:inline-size;display:flex;flex-direction:column;min-width:0;--sheet:var(--card-silver,#d5d5d5);--type:var(--support-plum,#5e4b74);--grain:.17;--blend:soft-light}
.poem[data-card="1"] {--sheet:var(--support-dusty-violet,#765F8A);--type:var(--card-white,#fff)}
.poem[data-card="2"] {--sheet:var(--support-plum,#5e4b74);--type:var(--card-silver,#d5d5d5)}
.poem[data-card="3"] {--sheet:var(--support-pale-violet,#eae5f1);--type:var(--card-graphite,#575757);--grain:.08}
.poem[data-card="4"] {--sheet:var(--card-white,#fff);--type:var(--support-dusty-violet,#765F8A);--grain:.055;--blend:multiply}
.poem[data-card="5"] {--sheet:var(--card-graphite,#575757);--type:var(--support-pale-violet,#eae5f1);--grain:.055;--blend:soft-light}
.poem-frame {min-width:0;padding-bottom:16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--type) transparent}
.poem-frame:focus-visible {outline:2px solid var(--signature-violet,#7046b5);outline-offset:3px}
.poem[data-card] .poem-paper {container-type:normal;position:relative;isolation:isolate;display:block;width:var(--canvas-width,100%);min-width:17.75rem;min-height:0;aspect-ratio:148/105;padding:0;color:var(--type);background:var(--sheet);border:0;border-radius:.6px;box-shadow:0 1px 1px #00000025,0 3px 0 -1px color-mix(in srgb,var(--sheet) 86%,#000),0 11px 21px -15px #00000063;overflow:visible}
.poem[data-card] .poem-paper::before {content:"";position:absolute;inset:0;z-index:0;pointer-events:none;box-shadow:inset 0 1px .7px #ffffff28,inset 0 -1px .8px #00000020}
.poem[data-card] .poem-paper::after {content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/haiku-paper-grain.svg') center/240px;mix-blend-mode:var(--blend);opacity:var(--grain)}
.poem[data-card] .card-symbol {position:absolute;top:84%;left:6%;bottom:auto;transform:translateY(-50%);width:var(--symbol-size,clamp(24.9px,8cqw,35.7px));height:auto;aspect-ratio:748.4 / 661.7;z-index:1;color:var(--type);background:currentColor;opacity:1;mask:var(--haiku-symbol) center/contain no-repeat;-webkit-mask:var(--haiku-symbol) center/contain no-repeat;filter:drop-shadow(0 .4px .2px color-mix(in srgb,var(--sheet) 72%,transparent))}
.poem[data-card] .poem-question {position:absolute;z-index:1;top:21%;left:6%;width:88%;min-height:0;transform:translateY(-50%);margin:0;padding:0;color:var(--type);font:400 var(--question-size,clamp(1.2rem,6.6cqw,2.5rem))/1.2 var(--serif,'Noto Serif',Georgia,serif);letter-spacing:-.025em;text-align:center;white-space:nowrap;text-shadow:0 .4px .2px color-mix(in srgb,var(--sheet) 72%,transparent)}
.poem[data-card] .poem-question em {display:block;color:inherit;font-weight:400;white-space:nowrap;overflow-wrap:normal}
.poem[data-card] .poem-lines {position:absolute;inset:0;z-index:1;display:block;width:100%;margin:0;padding:0;color:var(--type);font:400 var(--body-size,clamp(.875rem,4.55cqw,1.25rem))/1.2 var(--sans,'Inter',Arial,'Noto Sans',sans-serif);letter-spacing:-.012em;text-align:left;text-shadow:0 .4px .2px color-mix(in srgb,var(--sheet) 72%,transparent)}
.poem[data-card] .poem-lines span {margin:0;white-space:nowrap}
.poem[data-card] .poem-step {position:absolute;display:block;left:6%;width:max-content;max-width:none;transform:translateY(-50%);padding:0}
.poem[data-card] .poem-step[data-step="0"] {top:38%}
.poem[data-card] .poem-step[data-step="1"] {top:50%;left:calc(6% + var(--step,3cqw))}
.poem[data-card] .poem-step[data-step="2"] {top:62%;left:calc(6% + var(--step,3cqw)*2)}
.poem[data-card] .poem-step[data-step="3"] {top:84%;left:auto;right:6%;margin:0}
.poem[data-card] .poem-copy {display:block;white-space:nowrap;overflow-wrap:normal;hyphens:none;text-wrap:nowrap}
.poem[data-card] .poem-lines .punch {position:relative;isolation:isolate;display:block;max-width:none;margin:0;padding:.45em .65em;background:var(--type);color:var(--sheet);border:0;border-radius:.25px;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:left;text-shadow:none;box-shadow:inset 0 .8px .7px color-mix(in srgb,var(--type) 82%,var(--sheet)),0 .65px .3px color-mix(in srgb,var(--sheet) 85%,var(--type))}
.poem[data-card] .punch::before {content:"";position:absolute;inset:0;z-index:-1;background:url('assets/haiku-paper-grain.svg') 40% 70%/170px;mix-blend-mode:soft-light;opacity:.08;pointer-events:none}
.poem[data-card] .poem-link {font-size:14px;min-height:48px;margin:0 1px}
.poem-controls {gap:12px;flex-wrap:wrap;margin-bottom:2px}
.poem-controls>div {display:flex;align-items:center;gap:10px;margin-left:auto}
.poem-controls .fine {font-size:12px}.poem-controls .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}.poem-controls .carousel-count{min-width:61px;text-align:center;font-size:12px}
@media(max-width:480px){.poem-controls>.fine{display:none}.poem-controls>div{margin-left:0;width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.poems,.poem-frame{scroll-behavior:auto}}
@media print{.poems{display:block;overflow:visible;padding:0;margin:0}.poem[data-card]{width:148mm;break-inside:avoid;page-break-inside:avoid;margin-bottom:10mm}.poem-frame{overflow:visible;padding:0}.poem[data-card] .poem-paper{width:148mm;min-width:0;min-height:0;aspect-ratio:148/105;box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}.poem[data-card] .poem-link,.poem-controls{display:none}}
