/* Full-bleed river light, with a real overlap between successive scenes. */
html,body{overflow-x:clip}
.site-footer .competition-note{font-size:clamp(13px,.9vw,16px);line-height:1.6}
.hero{box-sizing:border-box;max-width:none;width:100%;padding-inline:clamp(24px,3.2vw,80px);overflow:visible}
.hero-atmosphere{inset:-85px -5vw -8%;mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%)}
.hero-atmosphere-image{animation:river-crossfade 30s linear infinite;opacity:0;transform:scale(1.025);filter:grayscale(.35) saturate(.75)}
.hero-atmosphere-0{animation-delay:-4s}.hero-atmosphere-1{animation-delay:6s}.hero-atmosphere-2{animation-delay:16s}
@keyframes river-crossfade{0%{opacity:0}12%,33.33%{opacity:.105}45.33%,100%{opacity:0}}
@media(prefers-color-scheme:dark){.hero-atmosphere-image{animation-name:river-crossfade-dark;filter:grayscale(.55) brightness(.65)}@keyframes river-crossfade-dark{0%{opacity:0}12%,33.33%{opacity:.12}45.33%,100%{opacity:0}}}
.hero .lede{max-width:620px;font-size:clamp(14px,.95vw,18px);line-height:2.05}
.hero-art .envelope{max-width:min(420px,82%)}
@media(min-width:1050px){.hero-art{min-height:clamp(600px,36vw,700px)}}
.culture-ribbon{max-width:none;margin-inline:clamp(18px,2.5vw,60px)}
.culture-story{max-width:none;padding-inline:clamp(24px,3.5vw,80px)}
.journey{max-width:none;width:100%;box-sizing:border-box;padding-inline:clamp(24px,4vw,96px)}
.scene-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,120px)}
/* The journey keeps its reading column generous while fitting the choices into shorter screens. */
.view-journey .site-header{height:58px}
.view-journey .journey{padding-top:8px}
.view-journey .chapters{margin:10px 0 20px}
.view-journey .scene-text{box-sizing:border-box;width:min(88%,700px);justify-self:center;padding:0}
.view-journey .scene-text .eyebrow{margin-bottom:13px}
.view-journey .scene-text h1{max-width:unset;font-size:clamp(34px,3.2vw,54px);line-height:1.32;margin-bottom:20px;overflow-wrap:anywhere}
.view-journey .story-body{max-width:690px;font-size:clamp(18px,1.25vw,23px);line-height:1.9;overflow-wrap:anywhere}
.view-journey .scene-note{max-width:690px;font-size:clamp(15px,1vw,18px);line-height:1.85;margin-top:18px;overflow-wrap:anywhere}
.view-journey .chapter-source{max-width:690px}
.view-journey .choices-label{font-size:14px;margin:2px 0 10px}
.view-journey .choice{font-size:clamp(14px,.85vw,17px)}
.view-journey .choice-reflection{margin:10px 0 0}
.view-journey .scene-nav{margin-top:10px}
@media(min-width:701px){.view-journey .scene-answer{width:100%;max-width:clamp(350px,calc((100svh - 500px)*1.5),100%);justify-self:end}}
.choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.choice{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:36px minmax(0,1fr) 25px;grid-template-rows:auto 1fr;align-content:start;gap:0 8px;padding:0 12px 16px 0;min-height:0}
.choice-art{position:relative;grid-column:1/-1;width:calc(100% + 12px);height:auto;aspect-ratio:3/2;display:block;overflow:hidden;pointer-events:none;opacity:0;filter:saturate(.65);transition:opacity .8s ease;margin-bottom:14px;background:var(--soft)}
.choice .letter{margin-left:12px}.choice>span:not(.letter):not(.mark){line-height:1.65}.choice .mark{text-align:center}
.choice[data-choice="0"]{--toward-x:4px;--toward-y:4px}
.choice[data-choice="1"]{--toward-x:-4px;--toward-y:4px}
.choice[data-choice="2"]{--toward-x:4px;--toward-y:-4px}
.choice[data-choice="3"]{--toward-x:-4px;--toward-y:-4px}
.choice{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.choice:hover{transform:none}
.choice::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 48%);opacity:0;transition:opacity .3s ease}
.choice:focus-visible{transform:translate(var(--toward-x),var(--toward-y));z-index:1}
.choice:focus-visible::after,.choice[aria-checked=true]::after{opacity:1}
@media(hover:hover) and (pointer:fine){.choice:hover{transform:translate(var(--toward-x),var(--toward-y));z-index:1}.choice:hover::after{opacity:1}}
.choice:active{transform:translate(var(--toward-x),var(--toward-y)) scale(.99)}
.choice.just-chosen{animation:choice-paper .45s ease}
@keyframes choice-paper{0%{box-shadow:0 0 0 0 #b69c7b70,0 2px 12px var(--shadow)}55%{box-shadow:0 0 0 5px #b69c7b25,0 8px 20px var(--shadow)}100%{box-shadow:0 0 0 2px #b69c7b18,0 5px 17px var(--shadow)}}
.choice-art.ready{opacity:.34}.choice:hover .choice-art.ready,.choice:focus-visible .choice-art.ready,.choice[aria-checked=true] .choice-art.ready{opacity:.48}
@media(prefers-color-scheme:dark){.choice-art{filter:saturate(.55) brightness(.7)}.choice-art.ready{opacity:.38}.choice:hover .choice-art.ready,.choice:focus-visible .choice-art.ready,.choice[aria-checked=true] .choice-art.ready{opacity:.5}}
@media(max-width:700px){.hero{padding-inline:6vw}.hero-atmosphere{inset:-70px -6vw -5%}.hero .lede{font-size:14px}.journey{padding-inline:5.5vw}.scene-grid{grid-template-columns:1fr;gap:25px}.culture-ribbon{margin-inline:4vw}.culture-story{padding-inline:5vw}}
@media(max-width:700px){.choices{gap:10px}.choice{grid-template-columns:27px minmax(0,1fr);gap:0 6px;padding:0 10px 14px 0}.choice .letter{width:22px;height:22px;margin-left:7px}.choice .mark{position:absolute;right:9px;top:9px;width:24px;height:24px;border-radius:50%;background:var(--surface);display:grid;place-items:center}.choice-art{width:calc(100% + 10px);margin-bottom:12px}}
@media(max-width:700px){.site-footer .competition-note{font-size:13px;max-width:72%}.view-journey .site-header{height:58px}.view-journey .scene-text{width:100%;padding:0}.view-journey .scene-text h1{font-size:32px}.view-journey .story-body{font-size:17px}.view-journey .scene-note{font-size:14px}.view-journey .chapters{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.hero-atmosphere-image{animation:none!important;opacity:0}.hero-atmosphere-0{opacity:.105}.choice-art{transition:none}.choice:hover,.choice:focus-visible,.choice:active{transform:none}.choice.just-chosen{animation:none}}
/* A small ink-and-paper cursor; keep native text and drag cursors. */
@media(pointer:fine) and (forced-colors:none){
 body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M4 2L5 23l5-5 4 9 3-1-4-9 8-1z' fill='%23fffdf8' stroke='%2378634e' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto}
 button:not(:disabled),a,[role=button],[role=radio]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' viewBox='0 0 28 30'%3E%3Cpath d='M4 2L5 23l5-5 4 9 3-1-4-9 8-1z' fill='%23fffdf8' stroke='%2378634e' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='22' cy='6' r='3' fill='%23b59b73'/%3E%3C/svg%3E") 4 2,pointer}
 input,textarea,[contenteditable=true]{cursor:text}.envelope,[data-tilt],#tilt{cursor:grab}.envelope:active,[data-tilt]:active,#tilt:active{cursor:grabbing}button:disabled{cursor:not-allowed}
}