/* How five-card hover study — isolated preview, 16 October 2026. */
body{background:#F6F3EE;transition:background-color 360ms ease}
.how-cards-page{background:#F6F3EE;color:#1E2A23;min-height:calc(100vh - 112px);padding:48px 0 88px;transition:background-color 360ms ease;overflow-wrap:break-word}
.how-cards-page:focus{outline:none}
.how-cards-inner{width:min(1440px,calc(100% - 64px));margin:0 auto}
.how-cards-page .site-page-title{margin-bottom:32px!important}
.how-introduction{max-width:66ch;margin-bottom:36px;font:400 clamp(18px,1.4vw,20px)/1.6 var(--sans)}
.how-card-item{min-width:0;margin-top:30px;border:1px solid rgba(30,42,35,.32);border-radius:22px;background:#F6F3EE;isolation:isolate;transition:background-color 250ms ease,border-color 250ms ease,box-shadow 250ms ease}
.how-card-heading{margin:0;font-size:inherit;line-height:inherit;font-weight:400;min-width:0}
.how-card-button{appearance:none;display:flex;flex-direction:column;align-items:center;width:100%;padding:20px 14px 18px;border:0;border-radius:21px;background:transparent;color:inherit;text-align:center;font:inherit;cursor:default;touch-action:manipulation}
.how-card-button:disabled{opacity:1;color:inherit;-webkit-text-fill-color:currentColor}
.how-card-button:focus-visible{outline:3px solid #1E2A23;outline-offset:4px}
.how-card-art{display:flex;align-items:center;justify-content:center;width:100%;height:160px;flex:none;margin-bottom:18px}
.how-card-art img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.09)}
.how-card-title{display:flex;align-items:center;justify-content:center;min-width:0;max-width:24ch;font:400 clamp(22px,1.8vw,28px)/1.13 var(--serif);letter-spacing:-.025em}
.how-card-indicator{display:none}
.how-card-panel{padding:0 22px 28px;font:400 17px/1.65 var(--sans)}
.how-card-panel p{max-width:none;margin:0}
.how-card-panel p+p{margin-top:1.1em}
.how-card-panel .how-wheel-movements{font:400 clamp(24px,2.1vw,30px)/1.25 var(--serif);letter-spacing:-.015em;margin:1em 0}
.how-card-panel .how-wheel-movements strong{font-weight:500}
.how-card-panel[hidden]{display:none!important}
.how-cards-ready .how-cards-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;transition:grid-template-columns 800ms cubic-bezier(.22,.61,.36,1)}
.how-cards-ready .how-cards-grid[data-active-index="0"]{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.how-cards-ready .how-cards-grid[data-active-index="1"]{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.how-cards-ready .how-cards-grid[data-active-index="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr)}
.how-cards-ready .how-cards-grid[data-active-index="3"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr)}
.how-cards-ready .how-cards-grid[data-active-index="4"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2.4fr)}
.how-cards-ready .how-card-item{margin:0}
.how-cards-ready .how-card-button{height:420px;cursor:pointer}
.how-cards-ready .how-card-art{height:125px}
.how-cards-ready .how-card-title{flex:1}
.how-cards-ready .how-card-indicator{display:none}


.how-cards-ready .how-card-item.is-expanded{background:rgba(255,255,255,.3);border-color:rgba(30,42,35,.6);box-shadow:0 10px 28px rgba(30,42,35,.055)}
.how-cards-ready .how-card-panel{padding-top:0}
@media(max-width:1000px){
 .how-cards-inner{width:calc(100% - 48px);max-width:700px}
 .how-cards-ready .how-cards-grid,.how-cards-ready .how-cards-grid[data-active-index]{grid-template-columns:minmax(0,1fr);gap:22px}
 .how-cards-ready .how-card-button{height:auto;min-height:210px;padding:24px 22px 18px}
 .how-cards-ready .how-card-art{height:220px;margin-bottom:20px}
 .how-cards-ready .how-card-title{font-size:32px;flex:none}
 .how-cards-ready .how-card-button--text{min-height:210px;justify-content:center}
 .how-card-panel{padding:0 26px 30px;font-size:18px}
 .how-cards-ready .how-card-indicator{margin-top:16px}
}
@media(max-width:520px){
 .how-cards-page{padding:44px 0 60px}
 .how-cards-inner{width:calc(100% - 38px)}
 .how-cards-page .site-page-title{margin-bottom:28px!important}
 .how-introduction{font-size:18px;line-height:1.65;margin-bottom:28px}
 .how-cards-ready .how-card-button{padding:20px 16px 16px}
 .how-cards-ready .how-card-art{height:185px}
 .how-cards-ready .how-card-title{font-size:30px}
 .how-card-panel{padding:0 20px 26px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){body,.how-cards-page,.how-cards-ready .how-cards-grid,.how-card-item{transition:none!important}}
@media print{body,.how-cards-page{background:white!important;color:black!important}.how-cards-ready .how-cards-grid{display:block}.how-cards-ready .how-card-item{display:block;margin-bottom:25px;break-inside:avoid}.how-cards-ready .how-card-button{height:auto}.how-card-panel[hidden]{display:block!important}.how-card-indicator{display:none!important}}

/* Reserve the tallest open card before interaction; prose never clips. */
@media(min-width:1001px){
 .how-cards-ready .how-cards-grid{height:var(--how-row-height,1200px);align-items:start;overflow-anchor:none}
 .how-cards-ready .how-card-item{min-height:420px;overflow:visible}
 .how-cards-ready .how-card-button{height:420px}
 .how-cards-ready .is-expanded .how-card-button{height:auto;min-height:0;padding:16px 14px 22px}
 .how-cards-ready .is-expanded .how-card-art{height:auto;aspect-ratio:1;margin-bottom:18px}
 .how-cards-ready .is-expanded .how-card-art img{height:100%;width:100%}
 .how-cards-ready .is-expanded .how-card-title{flex:none}
 .how-cards-ready .how-card-panel{overflow:visible}
 .how-cards-ready .how-card-title{font-size:clamp(20px,1.8vw,28px)}
 .how-cards-ready .how-measure{position:absolute!important;visibility:hidden!important;pointer-events:none!important;left:0;top:0;transition:none!important}
}
.how-card-panel:focus-visible{outline:2px solid #1E2A23;outline-offset:-5px}
.how-cards-ready .how-card-art img{transition:width 800ms cubic-bezier(.22,.61,.36,1),height 800ms cubic-bezier(.22,.61,.36,1)}
@media print{.how-cards-ready .how-cards-grid,.how-cards-ready .how-card-item,.how-cards-ready .how-card-button{height:auto;min-height:0}.how-cards-ready .how-card-panel{overflow:visible}}
@media(prefers-reduced-motion:reduce){.how-cards-ready .how-card-art img{transition:none}}

@media(min-width:1001px){
 .how-cards-ready .how-card-art{width:100%;height:auto;aspect-ratio:1;transition:width 800ms cubic-bezier(.22,.61,.36,1)}
 .how-cards-ready .is-expanded .how-card-art{width:100%}
 .how-cards-ready .how-measure *{transition:none!important}
}
@media(prefers-reduced-motion:reduce){.how-cards-ready .how-card-art{transition:none}}

@media(min-width:1001px){
 .how-cards-ready .how-card-item{height:422px;overflow:hidden;transition:height 800ms cubic-bezier(.22,.61,.36,1),background-color 800ms ease,border-color 250ms ease}
 .how-cards-ready .how-card-item.is-expanded{height:var(--open-height)}
 .how-cards-ready .how-card-button{transition:height 800ms cubic-bezier(.22,.61,.36,1);padding:20px 14px 18px}
 .how-cards-ready .is-expanded .how-card-button{height:var(--open-header);padding:20px 14px 18px}
 .how-cards-ready .how-measure{height:auto!important;overflow:visible!important}
 .how-cards-ready .how-measure .how-card-button{height:auto!important}
 .how-cards-ready .how-card-art,.how-cards-ready .how-card-art img{transition:none}
}
@media(prefers-reduced-motion:reduce){.how-cards-ready .how-card-button{transition:none!important}}
@media print{.how-cards-ready .how-card-item,.how-cards-ready .how-card-button{height:auto!important;overflow:visible!important}}