body[data-story-style="codex"] .codex{margin:0 4%;padding:40px 3%;gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);background:linear-gradient(90deg,#10131bf7 0%,#10131bf7 36%,#080c14fa 37%,#10131bfa 38%)}
.codex-art #card-flip{width:100%;margin:0;max-width:none}
.story-card-slot{width:100%}.story-flip-hint{font:11px/1.6 Arial;color:#bdc6d8;margin:12px 0 0}
body[data-story-style="codex"] .story-copy p{font-size:20px;line-height:1.73}
.story-copy{max-width:64ch}
.story-simulation{margin:0 auto 24px;max-width:92%;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.story-simulation button{background:#101724;color:#dce4ed;border:1px solid #65758b;padding:10px 14px;cursor:pointer;font:12px Arial;min-height:44px}
.story-simulation button[aria-pressed="true"]{border-color:#d9bd80;color:#f2dfb5}
body[data-reading-layout="a"] .codex{margin:0 9%;padding:54px 5%;gap:46px;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
body[data-reading-layout="c"] .codex{display:block;max-width:860px;margin:auto;background:#10131bf7}
body[data-reading-layout="c"] .codex-art{position:static;max-width:390px;margin:0 auto 36px}
body[data-reading-layout="c"] .story-copy{margin:auto}
@media(max-width:900px){body[data-story-style="codex"] .codex{display:block;margin:0 5%;padding:28px 6%;background:#10131bf7}body[data-story-style="codex"] .codex-art{position:static;max-width:390px;margin:0 auto 32px}body[data-story-style="codex"] .story-copy{margin:auto}body[data-story-style="codex"] .story-copy p{font-size:19px}.story-simulation{gap:5px}.story-simulation button{font-size:11px;padding:8px}.codex-art blockquote{margin:16px 0}}
@media(prefers-reduced-motion:reduce){.card-shell{transition:none}}

.brand-home-link{display:block;width:fit-content;max-width:100%;margin-inline:auto;text-decoration:none}.brand-home-link:focus-visible{outline:2px solid #e5d3a4;outline-offset:6px;border-radius:3px}

.card-media-retry{display:none;position:absolute;bottom:6%;left:50%;transform:translateX(-50%);z-index:4;background:#101725e8;border:1px solid #c6b48c;color:#fff0ce;padding:10px 15px;font:12px Arial;cursor:pointer}
.card-flip[data-media-state="retry"] .card-media-retry{display:block}
.card-flip[data-media-state="loading"]:after{content:'Loading animation…';position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:#101725d9;color:#dce2ed;padding:7px 10px;font:11px Arial;pointer-events:none}

.card-flip[data-flip-state]:after{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:#101725eb;color:#e1e7ef;padding:8px 12px;font:12px/1.4 Arial;pointer-events:none;z-index:5;white-space:nowrap}
.card-flip[data-flip-state="loading"]:after{content:'Preparing card…'}
.card-flip[data-flip-state="error"]:after{content:'Could not load. Click to retry.'}

/* Keep the decoded poster visible until a video frame has actually been presented. */
.card-face video{visibility:hidden}