@import url("../../tokens.css");
@import url("../fonts/fonts.css");

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;overflow-x:clip;scroll-behavior:smooth}
html{scroll-padding-top:7rem}
body{font-family:var(--font-body);color:var(--color-ink);background:var(--color-paper);line-height:1.75}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select{font:inherit}
button{color:inherit}
:focus-visible{outline:3px solid var(--color-cyan);outline-offset:3px}
.skip-link{position:fixed;left:var(--space-md);top:-5rem;z-index:200;padding:var(--space-sm) var(--space-md);background:var(--color-white);border:var(--rule-bold) solid var(--color-ink);font-weight:800;transition:transform var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:var(--space-md)}
.container{width:min(1180px,calc(100% - 2rem));margin-inline:auto}
.narrow{width:min(820px,calc(100% - 2rem));margin-inline:auto}
.promo{min-height:2.25rem;display:flex;align-items:center;justify-content:center;padding:.35rem var(--space-md);background:var(--color-berry);color:var(--color-white);font-size:var(--text-sm);font-weight:800;text-align:center}
.site-header{position:sticky;top:0;z-index:90;background:var(--color-ink);color:var(--color-white);border-bottom:var(--rule-bold) solid var(--color-orange)}
.nav-wrap{min-height:4.5rem;display:flex;align-items:center;gap:var(--space-lg)}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:900;white-space:nowrap}
.brand-mark{width:2.25rem;aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--color-cyan);background:var(--color-forest);font-family:var(--font-display);font-size:var(--text-lg);transform:rotate(-2deg)}
.brand small{display:block;color:var(--color-paper-3);font-size:.65rem;letter-spacing:.12em;line-height:1}
.site-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.site-nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.55rem .78rem;text-decoration:none;border-bottom:2px solid transparent;font-size:var(--text-sm);font-weight:700;white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--color-orange);border-color:var(--color-orange)}
.site-nav a:active{background:var(--color-forest-dark)}
.site-nav .nav-cta{margin-left:.35rem;border:2px solid var(--color-orange);background:var(--color-orange);color:var(--color-ink)}
.site-nav .nav-cta:hover{color:var(--color-ink);background:var(--color-yellow)}
.nav-toggle{display:none;margin-left:auto;border:2px solid var(--color-white);background:transparent;color:var(--color-white);padding:.55rem .75rem;font-weight:800}
.hero{position:relative;min-height:calc(100svh - 6.75rem);display:grid;align-items:end;color:var(--color-white);isolation:isolate;background:var(--color-ink)}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);animation:heroBreath 16s var(--ease-in-out) infinite alternate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--color-overlay) 0%,oklch(13% 0.045 270 / .68) 52%,oklch(13% 0.045 270 / .3) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:7rem;background:linear-gradient(0deg,var(--color-paper),transparent);z-index:-1}
@keyframes heroBreath{to{transform:scale(1.055)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.55fr);gap:var(--space-2xl);align-items:end;padding-block:clamp(5rem,13vh,9rem) var(--space-4xl)}
.hero-copy{min-width:0}
.tag-row,.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.tag{display:inline-flex;align-items:center;min-height:2rem;padding:.2rem .65rem;border:1px solid oklch(100% 0 0 / .52);background:oklch(10% 0.03 270 / .65);font-size:var(--text-xs);font-weight:800;letter-spacing:.04em;white-space:nowrap}
.tag.hot{border-color:var(--color-orange);color:var(--color-orange)}
.hero h1,.page-hero h1{margin:.7rem 0 .85rem;font-family:var(--font-display);font-style:normal;font-weight:900;line-height:1.04;letter-spacing:-.04em;overflow-wrap:anywhere;min-width:0}
.hero h1{font-size:var(--text-display-s);text-shadow:0 3px 18px var(--color-black)}
.hero h1 span{display:block;margin-top:.35rem;font-family:var(--font-body);font-size:clamp(1.1rem,2.8vw,1.8rem);letter-spacing:.06em;color:var(--color-cyan)}
.hero-lede{max-width:44rem;margin:0 0 var(--space-lg);font-size:clamp(1rem,2vw,1.25rem);font-weight:600;color:var(--color-paper-2)}
.metric-row{display:flex;flex-wrap:wrap;gap:.65rem;margin:var(--space-lg) 0}
.metric{padding:.65rem .8rem;background:oklch(10% 0.03 270 / .62);border-left:3px solid var(--color-pink);font-size:var(--text-sm)}
.metric strong{display:block;color:var(--color-white);font-size:var(--text-base)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:3.2rem;padding:.72rem 1.25rem;border:2px solid var(--color-ink);background:var(--color-paper-2);color:var(--color-ink);font-weight:900;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:hover,.btn.is-hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--color-ink)}
.btn:active,.btn.is-active{transform:translateY(1px);box-shadow:1px 1px 0 var(--color-ink)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn[data-state="loading"]::after{content:"";width:.9rem;height:.9rem;margin-left:.55rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn[data-state="success"]{background:var(--color-success);color:var(--color-white)}
.btn[data-state="error"]{background:var(--color-error);color:var(--color-white)}
.btn-primary{overflow:hidden;border-color:var(--color-orange-dark);background:var(--color-orange);color:var(--color-ink);box-shadow:6px 6px 0 var(--color-berry)}
.btn-primary::before{content:"";position:absolute;inset:-40% auto -40% -35%;width:24%;background:oklch(100% 0 0 / .65);transform:skewX(-18deg);transition:transform var(--dur-slow) var(--ease-out)}
.btn-primary:hover::before{transform:translateX(650%) skewX(-18deg)}
.btn-ghost{border-color:var(--color-white);background:oklch(10% 0.03 270 / .42);color:var(--color-white)}
.btn-ghost:hover{background:var(--color-white);color:var(--color-ink);box-shadow:5px 5px 0 var(--color-cyan)}
.hero-card{position:relative;max-width:320px;justify-self:end;background:var(--color-paper-2);color:var(--color-ink);padding:.65rem;border:var(--rule-bold) solid var(--color-ink);box-shadow:12px 12px 0 var(--color-orange);transform:rotate(1.2deg)}
.hero-card img{width:100%;aspect-ratio:1;object-fit:cover}
.hero-card figcaption{padding:.75rem .3rem .2rem;font-weight:800;font-size:var(--text-sm)}
.hero-card::before{content:"PICK";position:absolute;right:-.8rem;top:-.9rem;padding:.35rem .55rem;background:var(--color-cyan);color:var(--color-ink);border:2px solid var(--color-ink);font-size:.68rem;font-weight:900;letter-spacing:.12em;transform:rotate(4deg)}
.info-strip{position:relative;margin-top:-2.25rem;z-index:4}
.info-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--color-white);border:var(--rule-bold) solid var(--color-ink);box-shadow:8px 8px 0 var(--color-forest)}
.info-item{min-width:0;padding:1rem;border-right:1px solid var(--color-rule)}
.info-item:last-child{border-right:0}
.info-item small{display:block;color:var(--color-ink-soft);font-size:.7rem;font-weight:800;letter-spacing:.08em}
.info-item strong{display:block;margin-top:.2rem;overflow-wrap:anywhere}
.section{padding-block:var(--space-4xl)}
.section.white{background:var(--color-paper-2)}
.section.dark{background:var(--color-ink);color:var(--color-white)}
.section-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--space-xl);align-items:end;margin-bottom:var(--space-2xl);padding-bottom:var(--space-md);border-bottom:var(--rule-bold) solid var(--color-ink)}
.dark .section-head{border-color:var(--color-white)}
.section-head h2{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);font-style:normal;line-height:1.2;overflow-wrap:anywhere}
.section-head p{margin:0;color:var(--color-ink-soft)}
.dark .section-head p{color:var(--color-paper-3)}
.story-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);gap:var(--space-3xl);align-items:start}
.story-copy{font-size:var(--text-lg)}
.story-copy p:first-child::first-letter{float:left;margin:.08em .12em 0 0;font-family:var(--font-display);font-size:4.3rem;line-height:.78;color:var(--color-berry)}
.story-aside{position:sticky;top:7rem;padding:var(--space-lg);border:var(--rule-bold) solid var(--color-ink);background:var(--color-yellow);box-shadow:8px 8px 0 var(--color-earth)}
.story-aside h3{margin-top:0;font-family:var(--font-display);font-style:normal}
.story-aside ol{padding-left:1.25rem;margin-bottom:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.feature-card{position:relative;min-width:0;padding:var(--space-lg);background:var(--color-white);border:2px solid var(--color-ink);box-shadow:4px 4px 0 var(--color-rule);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.feature-card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--color-cyan)}
.feature-card:nth-child(2){box-shadow-color:var(--color-pink)}
.feature-card:nth-child(3){box-shadow-color:var(--color-orange)}
.feature-card .num{display:grid;place-items:center;width:2.1rem;height:2.1rem;margin-bottom:var(--space-lg);background:var(--color-forest);color:var(--color-white);font-weight:900;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}
.feature-card h3{margin:.2rem 0 .45rem;font-family:var(--font-display);font-style:normal;font-size:var(--text-xl)}
.feature-card p{margin:0;color:var(--color-ink-soft)}
.media-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:var(--space-md)}
.media-main{position:relative;overflow:hidden;border:var(--rule-bold) solid var(--color-ink);background:var(--color-ink);cursor:zoom-in}
.media-main img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out)}
.media-main:hover img{transform:scale(1.025);filter:brightness(1.06)}
.thumb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
.thumb{padding:0;border:2px solid var(--color-ink);background:var(--color-ink);cursor:pointer;overflow:hidden}
.thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)}
.thumb:hover img{transform:scale(1.06);filter:brightness(1.12)}
.thumb[aria-current="true"]{border-color:var(--color-orange);box-shadow:0 0 0 2px var(--color-orange)}
.system-grid,.review-grid,.download-grid,.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.cast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm);list-style:none;padding:0;margin:0}
.cast-grid li{min-width:0;padding:var(--space-md);background:var(--color-white);border:2px solid var(--color-ink);border-left:6px solid var(--color-berry);font-weight:800;overflow-wrap:anywhere}
.system-card,.review-card,.download-card,.guide-card{min-width:0;padding:var(--space-lg);background:var(--color-white);border:2px solid var(--color-ink)}
.system-card h3,.review-card h3,.download-card h3,.guide-card h3{margin-top:0;font-family:var(--font-display);font-style:normal}
.review-card{border-top:6px solid var(--color-forest)}
.review-card:nth-child(2){border-top-color:var(--color-berry)}
.review-card:nth-child(3){border-top-color:var(--color-orange)}
.rating-band{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-xl);margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--color-forest-dark);color:var(--color-white);border-left:8px solid var(--color-orange)}
.rating-score{font-family:var(--font-display);font-size:3rem;line-height:1;font-weight:900}
.rating-band p{margin:0}
.timeline{position:relative;display:grid;gap:var(--space-md);padding-left:2rem}
.timeline::before{content:"";position:absolute;left:.62rem;top:.7rem;bottom:.7rem;width:3px;background:var(--color-forest)}
.timeline article{position:relative;padding:var(--space-lg);background:var(--color-white);border:2px solid var(--color-ink)}
.timeline article::before{content:"";position:absolute;left:-1.72rem;top:1.35rem;width:.9rem;height:.9rem;background:var(--color-orange);border:2px solid var(--color-ink);transform:rotate(45deg)}
.timeline time{font-weight:900;color:var(--color-berry)}
.timeline h3{margin:.15rem 0 .35rem;font-family:var(--font-display);font-style:normal}
.timeline p{margin:0;color:var(--color-ink-soft)}
.accordion{display:grid;gap:.65rem}
.accordion-item{background:var(--color-white);border:2px solid var(--color-ink)}
.accordion-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border:0;background:transparent;text-align:left;font-weight:900;cursor:pointer}
.accordion-button:hover{background:var(--color-paper-3)}
.accordion-button::after{content:"+";flex:0 0 auto;display:grid;place-items:center;width:1.8rem;height:1.8rem;background:var(--color-ink);color:var(--color-white);font-size:1.25rem}
.accordion-button[aria-expanded="true"]::after{content:"-";background:var(--color-berry)}
.accordion-panel{padding:0 1.1rem 1.1rem;color:var(--color-ink-soft)}
.accordion-panel[hidden]{display:none}
.final-cta{position:relative;overflow:hidden;padding-block:var(--space-4xl);background:var(--color-forest-dark);color:var(--color-white);text-align:center}
.final-cta::before,.final-cta::after{content:"";position:absolute;width:13rem;height:13rem;border:2px solid var(--color-cyan);transform:rotate(18deg);opacity:.25}
.final-cta::before{left:-6rem;top:-5rem}.final-cta::after{right:-5rem;bottom:-7rem;border-color:var(--color-pink)}
.final-cta h2{margin:0 auto .75rem;max-width:18ch;font-family:var(--font-display);font-style:normal;font-size:var(--text-2xl)}
.final-cta p{max-width:42rem;margin:0 auto var(--space-lg);color:var(--color-paper-3)}
.final-cta .actions{justify-content:center}
.site-footer{padding:var(--space-3xl) 0 6rem;background:var(--color-ink);color:var(--color-white)}
.footer-grid{display:grid;grid-template-columns:1.25fr .65fr 1.1fr;gap:var(--space-2xl)}
.footer-grid h2,.footer-grid h3{font-family:var(--font-display);font-style:normal}
.footer-grid h2{margin:0}.footer-grid h3{margin-top:0}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li+li{margin-top:.4rem}
.footer-grid a{color:var(--color-paper-3);text-decoration-thickness:1px;text-underline-offset:3px}
.footer-grid a:hover{color:var(--color-orange)}
.legal{margin-top:var(--space-2xl);padding-top:var(--space-md);border-top:1px solid oklch(100% 0 0 / .2);color:var(--color-paper-3);font-size:var(--text-xs)}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;padding:.65rem max(1rem,env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:var(--color-ink);border-top:2px solid var(--color-orange)}
.sticky-cta .btn{width:100%}
.back-top{position:fixed;right:1rem;bottom:6rem;z-index:70;width:2.8rem;height:2.8rem;border:2px solid var(--color-ink);background:var(--color-white);font-weight:900;opacity:0;pointer-events:none;transform:translateY(.5rem);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.back-top.visible{opacity:1;pointer-events:auto;transform:none}
.page-hero{padding:clamp(4rem,10vw,7rem) 0 var(--space-3xl);background:var(--color-ink);color:var(--color-white);border-bottom:8px solid var(--color-orange)}
.page-hero h1{max-width:13ch;font-size:var(--text-display-s)}
.page-hero p{max-width:48rem;margin:0;color:var(--color-paper-3);font-size:var(--text-lg)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-xl);font-size:var(--text-sm);color:var(--color-paper-3)}
.breadcrumbs a{white-space:nowrap}
.filter-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-xl)}
.filter-tab{min-height:2.75rem;padding:.5rem 1rem;border:2px solid var(--color-ink);background:var(--color-white);font-weight:900;white-space:nowrap;cursor:pointer}
.filter-tab[aria-selected="true"]{background:var(--color-forest);color:var(--color-white);box-shadow:4px 4px 0 var(--color-orange)}
.nav-toggle[disabled],.filter-tab[disabled],.accordion-button[disabled],.thumb[disabled]{opacity:.45;pointer-events:none}
.nav-toggle:active,.filter-tab:active,.accordion-button:active,.thumb:active{transform:translateY(1px)}
.filter-tab[data-state="loading"],.accordion-button[data-state="loading"]{cursor:progress;color:var(--color-ink-soft)}
.filter-tab[data-state="error"],.accordion-button[data-state="error"]{border-color:var(--color-error)}
.filter-tab[data-state="success"],.accordion-button[data-state="success"]{border-color:var(--color-success)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.gallery-item{margin:0;min-width:0;background:var(--color-white);border:2px solid var(--color-ink);overflow:hidden;cursor:zoom-in}
.gallery-item[hidden]{display:none}
.gallery-item img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)}
.gallery-item:hover img{transform:scale(1.035);filter:brightness(1.08)}
.gallery-item figcaption{padding:.75rem;font-size:var(--text-sm);font-weight:700}
.lightbox{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:1rem;overflow-y:auto;background:oklch(5% 0.02 270 / .94)}
.lightbox[hidden]{display:none}
.lightbox-dialog{position:relative;width:min(1180px,100%);color:var(--color-white)}
.lightbox img{width:100%;max-height:80vh;object-fit:contain;background:var(--color-black)}
.lightbox-caption{margin:.6rem 4rem 0;text-align:center}
.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;border:2px solid var(--color-white);background:var(--color-ink);color:var(--color-white);font-weight:900;cursor:pointer}
.lightbox-close{right:0;top:-3.5rem}.lightbox-prev{left:.5rem;top:50%}.lightbox-next{right:.5rem;top:50%}
.lightbox button:hover{background:var(--color-orange);color:var(--color-ink)}
.download-card{position:relative;display:flex;flex-direction:column}
.download-card.recommended{border-color:var(--color-forest);box-shadow:9px 9px 0 var(--color-forest)}
.download-card .badge{position:absolute;right:.8rem;top:-.8rem;padding:.25rem .55rem;background:var(--color-orange);border:2px solid var(--color-ink);font-size:var(--text-xs);font-weight:900}
.download-card .btn{margin-top:auto}
.spec-table{width:100%;border-collapse:collapse;background:var(--color-white);border:2px solid var(--color-ink)}
.spec-table th,.spec-table td{padding:.85rem;text-align:left;border:1px solid var(--color-rule);vertical-align:top}
.spec-table th{background:var(--color-forest-dark);color:var(--color-white)}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.step{counter-increment:step;padding:var(--space-lg);background:var(--color-white);border:2px solid var(--color-ink)}
.step::before{content:counter(step);display:grid;place-items:center;width:2.4rem;height:2.4rem;margin-bottom:var(--space-md);background:var(--color-orange);border-radius:50%;border:2px solid var(--color-ink);font-weight:900}
.step h3{font-family:var(--font-display);font-style:normal}
.toc{position:sticky;top:6rem;padding:var(--space-lg);background:var(--color-ink);color:var(--color-white);border-bottom:5px solid var(--color-orange)}
.toc strong{display:block;margin-bottom:.6rem;font-family:var(--font-display)}
.toc a{display:inline-flex;margin:.2rem .7rem .2rem 0;color:var(--color-paper-3);font-size:var(--text-sm);white-space:nowrap}
.toc a:hover{color:var(--color-orange)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-2xl);align-items:start}
.article-content{min-width:0}
.article-content section{scroll-margin-top:10rem;padding-bottom:var(--space-3xl)}
.article-content h2{font-family:var(--font-display);font-size:var(--text-2xl);font-style:normal;line-height:1.2;border-bottom:3px solid var(--color-forest);padding-bottom:.55rem}
.article-content h3{font-family:var(--font-display);font-style:normal;font-size:var(--text-xl)}
.article-content p,.article-content li{font-size:var(--text-lg)}
.article-content li+li{margin-top:.4rem}
.guide-side{position:sticky;top:10rem;padding:var(--space-lg);background:var(--color-white);border:2px solid var(--color-ink);box-shadow:6px 6px 0 var(--color-yellow)}
.guide-side h2{font-family:var(--font-display);font-style:normal;font-size:var(--text-xl)}
.guide-side a{display:block;margin:.55rem 0;font-weight:700}
.notice{padding:var(--space-lg);background:var(--color-yellow);border:2px solid var(--color-ink);border-left:8px solid var(--color-berry)}
.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:1.6rem}
.checklist li::before{content:"";position:absolute;left:0;top:.65em;width:.75rem;height:.45rem;border-left:3px solid var(--color-forest);border-bottom:3px solid var(--color-forest);transform:rotate(-45deg)}

@media (max-width:900px){
  .site-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;padding:.6rem 1rem 1rem;background:var(--color-ink);border-bottom:3px solid var(--color-orange)}
  .site-nav.open{display:flex}.site-nav a{justify-content:center}.nav-toggle{display:block}
  .hero-grid{grid-template-columns:minmax(0,1fr);padding-bottom:5rem}.hero-card{display:none}
  .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.info-item:nth-child(2n){border-right:0}.info-item:last-child{grid-column:1/-1;border-top:1px solid var(--color-rule)}
  .feature-grid,.system-grid,.review-grid,.cast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-layout{grid-template-columns:minmax(0,1fr)}.thumb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .story-layout{grid-template-columns:minmax(0,1fr)}.story-aside{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
  .article-layout{grid-template-columns:minmax(0,1fr)}.guide-side{position:static;order:-1}
}
@media (max-width:640px){
  .container,.narrow{width:min(100% - 1.25rem,1180px)}
  .promo{font-size:.72rem}.nav-wrap{min-height:4rem}.brand small{display:none}
  .hero{min-height:calc(100svh - 6.25rem)}.hero-grid{padding-block:4rem 4.5rem}.hero::before{background:var(--color-overlay)}
  .hero h1{font-size:clamp(2.35rem,14vw,3.8rem)}.hero-lede{font-size:1rem}.metric{flex:1 1 9rem}
  .actions{align-items:stretch}.actions .btn{flex:1 1 100%}
  .info-strip{margin-top:-1.5rem}.info-grid{grid-template-columns:minmax(0,1fr)}.info-item{border-right:0;border-bottom:1px solid var(--color-rule)}.info-item:last-child{grid-column:auto;border-bottom:0}
  .section{padding-block:var(--space-3xl)}.section-head{grid-template-columns:minmax(0,1fr);gap:.65rem}
  .feature-grid,.system-grid,.review-grid,.cast-grid,.download-grid,.guide-grid,.steps,.gallery-grid{grid-template-columns:minmax(0,1fr)}
  .thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rating-band{align-items:start;gap:var(--space-md)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}.footer-grid>div:first-child{grid-column:auto}
  .sticky-cta{display:block}.back-top{bottom:6.2rem}.site-footer{padding-bottom:7rem}
  .lightbox-prev,.lightbox-next{top:auto;bottom:-3.8rem}.lightbox-close{top:-3.4rem}.lightbox-caption{margin:.6rem 3.4rem 0}
  .page-hero h1{font-size:clamp(2.35rem,12vw,3.8rem)}.toc{top:6.2rem;overflow-x:auto;white-space:nowrap;margin-inline:-.625rem;padding-inline:1rem}
  .spec-table{font-size:var(--text-sm)}.spec-table th,.spec-table td{padding:.55rem}
}
@media (prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto}.hero-media img{animation:none;transform:none}.btn,.btn::before,.feature-card,.media-main img,.thumb img,.gallery-item img,.back-top{transition-duration:var(--dur-fast)}
  .btn-primary::before{display:none}
}