/* Development Journey: a short vertical story of chapters. Works without JavaScript; journey.js adds
   before/after sliders and pauses other videos when one plays. */
.jr-hero{padding:34px 0 36px}.jr-hero .breadcrumb{margin-bottom:28px}.jr-hero h1{font-size:clamp(40px,5vw,66px);margin:16px 0 14px}
.jr-hero .detail-lead{font-size:16px;margin:0 0 12px;max-width:640px}
.jr-suffix{font-size:.38em;letter-spacing:0;color:#bcb8ad;margin-left:.35em;vertical-align:middle}
.jr-note{color:#bcb8ad;font-size:13px;line-height:1.7;max-width:640px;margin:0;border-left:2px solid #6c665c;padding-left:14px}
.jr-index{margin-top:26px}.jr-index ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jr-index a{min-height:44px;display:flex;align-items:center;gap:9px;padding:8px 14px;border:1px solid #4a4842;color:#e8e2d4;font-size:13px}
.jr-index a:hover{border-color:#8e887c;background:#26251f}.jr-ix-n{font-weight:700;font-size:11px;color:#bcb8ad}
.jr-cta{margin:20px 0 0}.jr-cta .more-game{margin-top:0;color:#f2f0e8}
.jr-section{background:#1b1b19;color:#f2f0e8;padding:48px 0 72px;border-top:1px solid #34332f}
.jr-list{list-style:none;margin:0;padding:0;display:grid;gap:68px}.jr-ms{scroll-margin-top:20px}
.jr-head{max-width:860px}.jr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 12px;font-size:11px;letter-spacing:.16em;font-weight:700;color:#bcb8ad;text-transform:uppercase}
.jr-status{letter-spacing:.06em;text-transform:none;font-size:12px;padding:5px 10px;border:1px solid #bcb8ad;color:#e8e2d4}
.st-latest{border-color:#d4ae68;color:#f3dfb3}.st-review{border-color:#c69a5b;color:#f0d3a6;border-style:dashed}
.jr-head h2{font:400 clamp(30px,3.6vw,46px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;margin:0 0 10px}
.jr-caption{font:italic 400 clamp(18px,2vw,22px)/1.5 Georgia,serif;color:#e8e2d4;margin:0 0 10px;max-width:760px}
.jr-summary{color:#c6c0b3;font-size:15px;line-height:1.75;margin:0 0 22px;max-width:720px}
.jr-media{display:grid;gap:18px;max-width:940px}.jr-secondary{max-width:620px}
.jr-item{margin:0;min-width:0}.jr-item img,.jr-item video{width:100%;height:auto;display:block;background:#11110f;border:1px solid #3a3934}
.jr-item figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:13px;line-height:1.6;color:#bcb8ad}
.jr-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#c6c0b3}
.jr-subs{flex-basis:100%}
.jr-narrow{max-width:460px}
.jr-cmp-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.jr-side{position:relative;margin:0}.jr-tag{position:absolute;left:10px;top:10px;background:rgba(20,20,18,.85);color:#f2f0e8;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;z-index:1}
.jr-compare.is-slider .jr-cmp-stage{display:block;--pos:50%;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}.jr-compare.is-dragging .jr-handle,.jr-cmp-stage.is-dragging .jr-handle{cursor:grabbing}.jr-cmp-stage img{-webkit-user-drag:none;pointer-events:none}
.jr-compare.is-slider .jr-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.jr-compare.is-slider .jr-after img{height:100%;object-fit:cover}
.jr-compare.is-slider .jr-after .jr-tag{left:auto;right:10px}
.jr-compare.is-slider .jr-cmp-stage::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#f2f0e8;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
.jr-handle{position:absolute;left:var(--pos);top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#f2f0e8;color:#161615;display:grid;place-items:center;font-size:20px;z-index:2;box-shadow:0 2px 12px rgba(0,0,0,.45);touch-action:none;cursor:grab}
.jr-range{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jr-range:focus-visible~.jr-handle{outline:3px solid #d4ae68;outline-offset:3px}
.jr-planned{margin-top:20px;border:1px dashed #8e887c;padding:14px 20px;max-width:720px}.jr-planned-title{margin:0 0 6px;font-size:11px;letter-spacing:.16em;font-weight:700;color:#d4ae68;text-transform:uppercase}
.jr-planned ul{margin:0;padding-left:20px;color:#e8e2d4;font-size:14px;line-height:1.8}
.jr-back{margin:56px 0 0}.jr-back .more-game{color:#f2f0e8}
.jr-credit{margin:40px 0 0;color:#bcb8ad;font-size:13px;border-top:1px solid #34332f;padding-top:18px}.jr-credit .jr-preview-note{display:block;color:#d4ae68;font-size:11px;letter-spacing:.06em;margin-top:6px}
@media(max-width:800px){.jr-list{gap:52px}.jr-section{padding:36px 0 60px}}
@media(max-width:620px){.jr-cmp-stage{grid-template-columns:1fr}.jr-index a{padding:8px 11px;font-size:12px}.jr-tag{font-size:10px;padding:4px 7px}.jr-narrow,.jr-secondary{max-width:none}}
.jr-reset{margin-left:auto;min-height:36px;padding:6px 12px;background:transparent;border:1px solid #6c665c;color:#e8e2d4;font:inherit;font-size:12px;cursor:pointer}.jr-reset:hover{background:#2a2925;border-color:#8e887c}
@media(pointer:coarse){.jr-reset{min-height:44px}}
/* 'How it has changed' section on a game page (reuses the before/after component) */
.ch-section{padding:56px 0 64px}.ch-title{font:400 clamp(30px,3.6vw,46px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;margin:14px 0 10px}
.ch-grid{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:46px 30px}
.ch-item{min-width:0}.ch-item h3{font:400 26px/1.2 Georgia,serif;margin:0 0 6px}.ch-cap{color:#c6c0b3;font-size:14px;line-height:1.6;margin:0 0 14px}
.ch-item .jr-pair .jr-cmp-stage{gap:8px}
@media(max-width:800px){.ch-grid{grid-template-columns:1fr;gap:40px}}
/* Two development views (A: visual comparisons, B: short development stories) */
.dv-tabs{display:inline-flex;flex-wrap:wrap;border:1px solid #6c665c;margin:20px 0 28px}
.dv-tabs button{min-height:44px;padding:10px 18px;background:transparent;color:#e8e2d4;border:0;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.dv-tabs button:hover{background:#2a2925}.dv-tabs button[aria-selected="true"]{background:#f2f0e8;color:#161615}
.dv-tabs button:focus-visible{outline:2px solid #d4ae68;outline-offset:2px}
.dv-panel-title{font:400 24px Georgia,serif;margin:30px 0 18px}
.dv-views.is-ready .dv-panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dv-stories{list-style:none;margin:0;padding:0;display:grid;gap:48px}
.dv-story{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:center}
.dv-story:nth-child(even) .dv-shot{order:2}
.dv-shot{margin:0}.dv-shot img{width:100%;height:auto;display:block;border:1px solid #3a3934;background:#11110f}
.dv-shot figcaption{margin-top:8px;font-size:12px;color:#bcb8ad}
.dv-kicker{display:flex;align-items:center;gap:12px;margin:0 0 10px}.dv-n{font:400 30px Georgia,serif;color:#8e887c}
.dv-body h4{font:400 clamp(24px,2.6vw,32px)/1.15 Georgia,serif;letter-spacing:-.02em;margin:0 0 10px;color:#f2f0e8}
.dv-body p{color:#c6c0b3;font-size:15px;line-height:1.75;margin:0 0 8px}
.dv-earlier{margin-top:12px}.dv-earlier summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:#e8e2d4;border-bottom:1px solid #6c665c}
.dv-earlier img{margin-top:10px;width:100%;max-width:380px;height:auto;border:1px solid #3a3934}
.dv-focus{border:1px dashed #b5ad9c;padding:16px 20px;margin:28px 0}.dv-focus-title{margin:0 0 8px;font-size:11px;letter-spacing:.16em;font-weight:700;color:#686359;text-transform:uppercase}
.dv-focus ul{margin:0;padding:0;list-style:none}.dv-focus li{padding:7px 0;font-size:14px;line-height:1.7;color:#4f4b44;border-top:1px solid #e0d9cb}.dv-focus li:first-child{border-top:0}
.dv-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;margin-right:9px;border:1px solid}
.dv-dev{color:#2f5560;border-color:#7f9aa3}.dv-plan{color:#6e6557;border-color:#a99f8e;border-style:dashed}
.dv-vote{background:#22221f;color:#f2f0e8;padding:56px 0 60px;border-top:1px solid #34332f}
.dv-vote h2{font:400 clamp(28px,3.2vw,40px)/1.15 Georgia,serif;letter-spacing:-.02em;margin:14px 0 10px}
.dv-vote-intro{color:#c6c0b3;font-size:15px;line-height:1.75;max-width:640px;margin:0 0 18px}
.dv-options-label{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#bcb8ad}.dv-options{margin:0 0 22px;padding-left:20px;color:#e8e2d4;font-size:15px;line-height:1.9}
.dv-note{color:#bcb8ad;font-size:12px;line-height:1.6;max-width:640px;margin:16px 0 0}
@media(max-width:800px){.dv-story{grid-template-columns:1fr;gap:16px}.dv-story:nth-child(even) .dv-shot{order:0}}
@media(max-width:620px){.dv-tabs{display:flex;width:100%}.dv-tabs button{flex:1 1 50%;padding:10px 8px;font-size:13px}.dv-vote .button{width:100%}}
