/* Keep every control inside the wrapper, including at 320px. */
#flow .flow-carousel{position:relative;width:100%;max-width:1000px;margin-inline:auto;min-width:0;--flow-accent:#a54432}
#flow .flow-track{display:flex;position:relative;gap:20px;list-style:none;margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#a3b0a5 #e7e8df;-webkit-overflow-scrolling:touch;scroll-behavior:auto}
#flow .flow-card{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;background:#faf9f5}
#flow .flow-photo{position:relative;isolation:isolate;overflow:hidden;animation:none;clip-path:none;opacity:1;transform:none}
#flow .flow-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}
#flow .flow-photo::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#12231c80)}
#flow .flow-label{position:absolute;z-index:1;right:16px;bottom:12px;color:#fff;text-shadow:0 2px 8px #0009;font:500 clamp(22px,4vw,42px)/1.2 var(--sans);letter-spacing:.12em}
#flow .flow-copy{padding:22px 20px 28px}
#flow .flow-step{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;color:var(--flow-accent);font:500 11px/1.5 var(--sans);letter-spacing:.12em}
#flow .flow-step span{font:500 27px/1 Georgia,'Times New Roman',serif;font-feature-settings:normal;letter-spacing:0}
#flow .flow-copy h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.6;margin:0 0 12px;letter-spacing:.02em}
#flow .flow-copy>p:last-child{font-size:15px;line-height:1.9;color:#4a4a4a}
#flow .flow-tools{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:14px}
#flow .flow-tools[hidden]{display:none}
#flow .flow-tools button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #b7c3b7;background:transparent;color:var(--green);font:24px/1 var(--sans);cursor:pointer}
#flow .flow-tools button:disabled{opacity:.3;cursor:default}
#flow .flow-tools button:focus-visible,#flow .flow-track:focus-visible{outline:2px solid var(--green);outline-offset:3px}
#flow .flow-tools button:not(:disabled):hover{background:#e7ebe2}
#flow .flow-dots{display:flex;justify-content:center;min-width:0;gap:0}
#flow .flow-dots button{width:32px;min-height:44px;border:0}
#flow .flow-dots button::before{content:'';width:7px;height:7px;border-radius:50%;background:#a4afa3}
#flow .flow-dots button[aria-current="true"]::before{background:var(--flow-accent);box-shadow:0 0 0 4px #a5443215}
#flow .flow-hint{text-align:center;font-size:11px;color:#4a4a4a;margin-top:10px;letter-spacing:.04em}
#flow .flow-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:390px){#flow .flow-dots button{width:44px}}
@media(min-width:761px){
 #flow .flow-carousel{padding-inline:60px}
 #flow .flow-copy{padding:30px 36px 36px}
 #flow .flow-copy h3{font-size:26px}
 #flow .flow-copy>p:last-child{font-size:16px}
 #flow .flow-tools{justify-content:center;margin-top:20px}
 #flow .flow-tools>[data-flow-direction]{position:absolute;top:calc((100% - 120px)*.35);left:0;width:44px;height:56px}
 #flow .flow-tools>[data-flow-direction="1"]{left:auto;right:0}
 #flow .flow-hint{display:none}
}
@media(prefers-reduced-motion:reduce){#flow .flow-track{scroll-behavior:auto}}
/* Override the previous static flow photograph dimensions. */
#flow .flow-photo{margin:0}
#flow .flow-photo img{height:auto}
@media(max-width:389px){
 #flow .flow-tools{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;row-gap:0}
 #flow .flow-tools[hidden]{display:none}
 #flow .flow-tools>[data-flow-direction="-1"]{grid-area:1/1}
 #flow .flow-tools>[data-flow-direction="1"]{grid-area:1/3}
 #flow .flow-dots{grid-row:2;grid-column:1/-1}
 #flow .flow-dots button{width:44px}
}