@font-face{font-family:Lora;src:url('../fonts/lora-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url('../fonts/lora-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url('../fonts/lora-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Fira Sans;src:url('../fonts/fira-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Fira Sans;src:url('../fonts/fira-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#25221c;
  --ink-2:#302c25;
  --paper:#dcddd4;
  --paper-2:#d1d2c9;
  --gold:#8d7746;
  --gold-bright:#b99a58;
  --bone:#e5e0d5;
  --muted:#a7a396;
  --line:rgba(141,119,70,.75);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shell:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);overflow-x:clip}
body{margin:0;color:var(--ink);font-family:Lora,Georgia,serif;background:var(--paper);overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
button{border:0;background:none;color:inherit}
.shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}
.content-shell{width:min(1152px,calc(100% - 48px));margin-inline:auto}
.body-copy{font-family:Fira Sans,Arial,sans-serif;line-height:1.55}
.body-copy p{margin:0}
.body-copy p+p{margin-top:24px}

/* Header */
.topbar{height:48px;position:fixed;inset:0 0 auto;z-index:50;color:var(--bone);font-family:Fira Sans,Arial,sans-serif;text-transform:uppercase}
.topbar::before{content:"";position:absolute;inset:0;background:rgba(37,34,28,.84);backdrop-filter:blur(7px)}
.topbar::after{content:"";position:absolute;left:0;right:0;top:48px;height:14px;background:url('../decor/torn-edge.png') center/500px 14px repeat-x;opacity:.72;transform:scaleY(-1)}
.topbar__nav{height:48px;position:relative;display:flex;align-items:center;justify-content:space-between;z-index:1}
.topbar__left,.topbar__right{display:flex;align-items:center;height:100%}
.topbar__left{gap:48px}
.crest{width:64px;height:94px;position:relative;align-self:flex-start;display:flex;justify-content:center;background:var(--paper);color:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 10px),0 100%);filter:drop-shadow(1px -1px 5px rgba(0,0,0,.75))}
.crest__mark{width:42px;height:52px;margin-top:17px;display:grid;place-items:center;border:1px solid var(--gold);font:600 29px/1 Lora,serif;letter-spacing:-.08em}
.desktop-nav{display:flex;align-items:center;gap:24px;padding-top:7px;font-size:14px;font-weight:600;letter-spacing:.1em}
.desktop-nav a,.utility-link,.language{transition:color .25s ease}
.desktop-nav a:hover,.utility-link:hover,.language:hover{color:var(--gold-bright)}
.topbar__right{gap:24px;padding-top:7px}
.nav-buy{width:200px;height:93px;margin-top:37px;position:relative;display:flex;align-items:center;justify-content:center;color:#c9ac68;font-family:Lora,serif;font-size:18px;letter-spacing:.08em;transform:translateY(-65px)}
.nav-buy::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:polygon(4% 8%,96% 8%,100% 20%,98% 88%,50% 100%,2% 88%,0 20%)}
.nav-buy::after{content:"";position:absolute;inset:15px 17px 23px;border:1px solid var(--gold)}
.nav-buy span{position:relative;z-index:1;margin-top:5px}
.language,.utility-link{font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.menu-button{display:none;width:28px;height:28px;position:relative;cursor:pointer}
.menu-button span{position:absolute;left:4px;right:4px;height:1px;background:currentColor;transition:.25s ease}
.menu-button span:first-child{top:10px}.menu-button span:last-child{top:17px}
.menu-button[aria-expanded="true"] span:first-child{top:14px;transform:rotate(45deg)}
.menu-button[aria-expanded="true"] span:last-child{top:14px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:48px 0 auto;z-index:45;padding:36px 24px 28px;background:rgba(37,34,28,.98);color:var(--bone);font-family:Fira Sans,Arial,sans-serif;text-transform:uppercase}
.mobile-menu a{display:block;padding:13px 0;border-bottom:1px solid rgba(141,119,70,.35);letter-spacing:.12em}

/* Hero */
.hero{height:600px;position:relative;overflow:hidden;background:var(--ink);color:var(--bone)}
.hero__stage,.hero__layer,.hero__foreground,.hero__light,.hero__shade{position:absolute;inset:0;width:100%;height:100%}
.hero__stage{overflow:hidden}
.hero__background{max-width:none;object-fit:cover;object-position:center top;filter:brightness(.77) saturate(.72);transform:translate3d(var(--hero-bg-x,0),var(--hero-bg-y,0),0) scale(1.035);transition:transform .2s ease-out}
.hero__foreground{pointer-events:none;transform:translate3d(0,var(--hero-fg-y,0),0)}
.hero__character{position:absolute;bottom:-65px;width:auto;height:720px;max-width:none;filter:brightness(.75) saturate(.7) drop-shadow(0 12px 18px rgba(0,0,0,.5));transition:transform .2s ease-out}
.hero__character--left{left:-110px;transform:translate3d(var(--hero-left-x,0),0,0) scaleX(-1)}
.hero__character--right{right:-110px;transform:translate3d(var(--hero-right-x,0),0,0)}
.hero__light{opacity:.48;mix-blend-mode:screen;background:radial-gradient(circle at 50% 30%,rgba(255,232,190,.34),transparent 24%),radial-gradient(circle at 50% 78%,rgba(206,174,109,.15),transparent 30%);animation:heroLight 5s ease-in-out infinite}
.hero__shade{background:linear-gradient(180deg,rgba(10,9,7,.3),transparent 30%,rgba(10,9,7,.15) 62%,var(--ink) 100%),radial-gradient(ellipse at center,transparent 25%,rgba(16,14,11,.55) 100%)}
.hero__brand{position:absolute;z-index:3;top:146px;left:50%;width:min(760px,70vw);transform:translateX(-50%);text-align:center;text-transform:uppercase;text-shadow:0 5px 22px rgba(0,0,0,.82)}
.hero__brand p{margin:0 0 9px;font-family:Fira Sans,Arial,sans-serif;font-size:11px;letter-spacing:.38em}
.hero__brand h1{margin:0;font-size:clamp(58px,7vw,102px);font-weight:400;line-height:.86;letter-spacing:.02em}
.hero__brand h1 span{display:block;color:#d9d3c7;font-size:.8em;letter-spacing:.09em}
.hero__brand i{display:block;width:86px;height:1px;margin:24px auto 0;background:var(--gold)}
.hero__actions{position:absolute;z-index:4;left:50%;bottom:48px;display:flex;gap:24px;transform:translateX(-50%)}
.frame-button{height:56px;min-width:184px;padding:2px;display:block;position:relative;text-transform:uppercase;font-size:15px;font-weight:400;letter-spacing:.05em;background:var(--ink)}
.frame-button::before,.frame-button::after{content:"";position:absolute;width:25px;height:20px;border-color:currentColor;pointer-events:none}
.frame-button::before{left:-3px;top:-3px;border-left:2px solid;border-top:2px solid}
.frame-button::after{right:-3px;bottom:-3px;border-right:2px solid;border-bottom:2px solid}
.frame-button span{height:100%;padding:0 26px;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;background:rgba(37,34,28,.78)}
.frame-button--gold{color:#c2a564;background:#332d22}
.frame-button--stone{color:#c5c0b5;background:#78766e}
.frame-button--wide{width:210px;margin-top:44px}
.frame-button:hover span{background:rgba(141,119,70,.2)}

/* Shared rough edge */
.rough-edge{position:absolute;left:0;right:0;height:14px;background:url('../decor/torn-edge.png') center/450px 14px repeat-x;z-index:5}
.rough-edge--top{top:-13px}
.rough-edge--bottom{bottom:-13px;transform:scaleY(-1)}

/* News */
.news-section{position:relative;z-index:4;margin-top:0;padding:42px 0 28px;background:var(--paper);color:var(--ink)}
.news-rule{position:absolute;left:0;right:0;top:262px;height:1px;background:var(--gold)}
.news-layout{display:flex;position:relative;gap:0}
.news-heading{width:25%;padding:76px 24px 0 0;font-weight:400}
.news-heading>span{display:block;font-size:30px;line-height:1.1}
.news-heading h2{margin:3px 0 0;color:var(--gold);font-size:48px;font-weight:400;line-height:1}
.top-rule-link{height:44px;margin-top:72px;padding:10px 0;display:inline-flex;align-items:center;gap:12px;border-top:4px solid var(--gold);font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.top-rule-link:hover{border-top-color:var(--ink)}
.top-rule-link b{font-size:11px;color:var(--gold)}
.news-cards{width:75%;padding-left:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow-x:auto}
.news-card{min-height:455px;padding:5px 4px;position:relative;display:flex;flex-direction:column;background:var(--ink);color:var(--bone)}
.news-card::before,.news-card::after{content:"";position:absolute;width:42px;height:34px;border-color:var(--gold);z-index:3;pointer-events:none}
.news-card::before{top:0;left:0;border-top:2px solid;border-left:2px solid}
.news-card::after{right:0;bottom:0;border-right:2px solid;border-bottom:2px solid}
.news-card__image{height:auto;position:relative;overflow:hidden;aspect-ratio:16/9}
.news-card__image::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink),transparent 46%)}
.news-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.news-card:hover .news-card__image img{transform:scale(1.04)}
.news-card__tag{align-self:flex-start;margin:-8px 0 0 -4px;padding:8px 12px;position:relative;z-index:2;background:var(--gold);color:#fff;font:12px/1 Fira Sans,Arial,sans-serif;text-transform:uppercase}
.news-card__copy{padding:22px 24px 10px;font-family:Fira Sans,Arial,sans-serif}
.news-card__copy h3{margin:0 0 12px;font-family:Lora,serif;font-size:20px;font-weight:400;line-height:1.35}
.news-card__copy time{display:block;color:var(--gold-bright);font-size:12px;font-style:italic}
.news-card__copy p{margin:12px 0 0;color:#a8a397;font-size:14px;line-height:1.45}
.news-card__more{width:96px;margin:auto 0 6px 24px;padding:8px 0;display:flex;gap:8px;border-top:2px solid var(--gold);color:var(--gold-bright);font:12px/1 Fira Sans,Arial,sans-serif;text-transform:uppercase}

/* Game intro */
.game-intro{min-height:820px;position:relative;overflow:hidden;background:var(--ink);color:var(--bone)}
.game-intro__backdrop{position:absolute;inset:0;background:url('../../images/finale.webp') center/cover no-repeat;filter:brightness(.5) saturate(.55);transform:scale(1.06)}
.game-intro__wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,34,28,.86),rgba(37,34,28,.94) 45%,var(--ink)),radial-gradient(circle at 70% 35%,rgba(141,119,70,.14),transparent 35%)}
.game-intro__layout{min-height:820px;padding:96px 24px;position:relative;display:flex;gap:48px;align-items:center}
.game-intro__copy{flex:1}
.game-intro__copy h2{max-width:580px;margin:0;color:var(--paper);font-size:60px;font-weight:400;line-height:1.05}
.game-intro__copy .body-copy{max-width:590px;margin-top:26px;color:#aaa69b}
.game-meta{margin-top:28px;font-family:Fira Sans,Arial,sans-serif}
.game-meta span{display:block;font-size:18px}
.game-meta strong{display:block;margin-top:3px;color:#c1a360;font-size:56px;line-height:1;font-weight:600}
.feature-list{margin:25px 0 0;padding:0;list-style:none;font:16px/1.7 Fira Sans,Arial,sans-serif}
.feature-list li{position:relative;padding-left:21px}
.feature-list li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
.game-intro__copy small{display:block;max-width:530px;margin-top:22px;color:#77746b;font:italic 12px/1.45 Fira Sans,Arial,sans-serif}
.game-intro__poster{width:46%;margin:0;align-self:stretch;display:flex;align-items:center;justify-content:flex-end}
.game-intro__poster img{width:min(528px,100%);height:756px;object-fit:cover;object-position:center;border:1px solid rgba(141,119,70,.25);box-shadow:0 28px 65px rgba(0,0,0,.45)}

/* Chapters */
.chapters{background:var(--ink)}
.chapter{height:clamp(800px,100vh,1024px);min-height:800px;position:relative;margin-top:-8px;overflow:hidden;color:var(--bone);clip-path:polygon(0 7px,5% 4px,12% 8px,20% 3px,30% 6px,40% 2px,50% 7px,62% 3px,72% 6px,82% 2px,92% 7px,100% 3px,100% 100%,0 100%)}
.chapter__media{position:absolute;inset:-8% 0;height:116%;overflow:hidden}
.chapter__media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(var(--chapter-brightness,.62)) saturate(.7);transform:translate3d(0,var(--chapter-y,0),0) scale(1.035);will-change:transform;transition:filter .5s ease}
.chapter__gradient{position:absolute;inset:0}
.chapter--copy-right .chapter__gradient{background:linear-gradient(90deg,rgba(37,34,28,0) 38%,rgba(37,34,28,.72) 50%,var(--ink) 62%),linear-gradient(0deg,var(--ink) 1%,transparent 17%)}
.chapter--copy-left .chapter__gradient{background:linear-gradient(-90deg,rgba(37,34,28,0) 38%,rgba(37,34,28,.72) 50%,var(--ink) 62%),linear-gradient(0deg,var(--ink) 1%,transparent 17%)}
.chapter__inner{height:100%;position:relative;display:flex;align-items:center}
.chapter--copy-right .chapter__inner{justify-content:flex-end}
.chapter--copy-left .chapter__inner{justify-content:flex-start}
.chapter__copy{width:50%;padding:48px 24px;color:var(--bone)}
.chapter__copy h2{margin:0 0 24px;padding:0 24px;color:var(--gold-bright);font-size:42px;font-weight:400;line-height:1.08;text-shadow:2px 8px 6px rgba(0,0,0,.35),0 -5px 35px rgba(0,0,0,.8)}
.chapter__ornament{height:27px;position:relative;display:flex;align-items:center}
.chapter__ornament::before{content:"";position:absolute;top:50%;height:1px;background:var(--gold)}
.chapter--copy-right .chapter__ornament{justify-content:flex-start}
.chapter--copy-right .chapter__ornament::before{left:0;right:calc(50% + 12px)}
.chapter--copy-left .chapter__ornament{justify-content:flex-end}
.chapter--copy-left .chapter__ornament::before{left:calc(50% + 12px);right:0}
.chapter__ornament span{width:24px;height:24px;display:grid;place-items:center;position:relative;color:var(--gold);font-size:14px;border:1px solid var(--gold);transform:rotate(45deg)}
.chapter__ornament span::first-letter{transform:rotate(-45deg)}
.chapter--copy-right .chapter__ornament span{margin-left:0}
.chapter--copy-left .chapter__ornament span{margin-right:0}
.chapter__text{max-width:560px;margin-top:22px;padding:0 24px 0 64px;color:#d0cbc0}
.chapter--copy-left .chapter__text{padding:0 64px 0 24px}

/* Community */
.community{padding:82px 0 92px;background:var(--paper);color:var(--ink)}
.section-label{font-size:30px;font-weight:400;line-height:1}
.section-label span{display:block;width:50%;padding-bottom:5px}
.section-label--content{margin-top:92px}
.community__rule{height:1px;margin-top:0;background:var(--gold)}
.community__layout,.creators{display:flex;align-items:flex-start;justify-content:space-between}
.community__copy{padding:4px 0 0;max-width:620px}
.community__copy h2,.creators h3{margin:0;color:var(--gold);font-size:58px;font-weight:400;line-height:1.05}
.community__copy p,.creators p{margin:24px 0 0;padding-left:24px;font:18px/1.55 Fira Sans,Arial,sans-serif}
.social-links{width:50%;display:flex;align-items:center;justify-content:flex-end;gap:5px}
.social-links a{width:48px;height:48px;display:grid;place-items:center;border-top:4px solid var(--gold);font:600 16px/1 Fira Sans,Arial,sans-serif;transition:.25s ease}
.social-links a:first-child{width:64px;height:64px;font-size:20px}
.social-links a:hover{background:var(--ink);color:var(--paper)}
.creators{padding-top:4px}
.creators>div{width:50%}
.creators .top-rule-link{margin-top:0}

/* Final CTA */
.final-cta{height:768px;min-height:720px;position:relative;overflow:hidden;background:var(--ink);color:var(--bone)}
.final-cta__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.58) saturate(.65)}
.final-cta__fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--paper) 0,rgba(220,221,212,0) 28%,rgba(37,34,28,.18) 55%,var(--ink) 100%),radial-gradient(circle at center,transparent 22%,rgba(20,18,15,.56) 100%)}
.final-cta__content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-shadow:0 6px 22px rgba(0,0,0,.7)}
.final-cta__content p{margin:0 0 16px;font:11px/1 Fira Sans,Arial,sans-serif;text-transform:uppercase;letter-spacing:.35em}
.final-cta__content h2{margin:0;font-size:76px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.final-cta__buttons{display:flex;gap:24px;margin-top:48px}

.footer{padding:28px 0;background:#1d1a16;color:#817d73;font:12px/1.4 Fira Sans,Arial,sans-serif}
.footer__layout{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer__brand{display:flex;flex-direction:column;color:#aaa498}
.footer__brand b{font-family:Lora,serif;font-size:18px;font-weight:400;letter-spacing:.08em}
.footer__brand span{font-size:9px;text-transform:uppercase;letter-spacing:.14em}
.footer a{color:#b69a5c;text-transform:uppercase;letter-spacing:.08em}

.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js .news-card:nth-child(2){transition-delay:.1s}.js .news-card:nth-child(3){transition-delay:.2s}

@keyframes heroLight{0%,100%{opacity:.48}50%{opacity:.22}}

@media (min-width:1600px){
  :root{--shell:1536px}
  .hero{height:680px}
  .hero__character{height:810px}
  .news-heading h2{font-size:56px}
  .news-card{min-height:490px}
}

@media (max-width:1120px){
  .desktop-nav{gap:17px;font-size:12px}.topbar__left{gap:28px}.topbar__right{gap:14px}.nav-buy{width:170px}
  .hero__character--left{left:-220px}.hero__character--right{right:-220px}
  .news-heading{width:26%}.news-cards{width:74%}.news-card__copy{padding-inline:18px}.news-card__more{margin-left:18px}
  .game-intro__copy h2{font-size:52px}.game-intro__poster img{height:690px}
  .chapter__copy h2{font-size:38px}
}

@media (max-width:900px){
  .shell,.content-shell{width:min(768px,calc(100% - 32px))}
  .desktop-nav,.utility-link,.language{display:none}.menu-button{display:block}.nav-buy{width:150px}
  .hero{height:600px}.hero__character{height:650px}.hero__character--left{left:-300px}.hero__character--right{right:-300px}.hero__brand{width:78vw}
  .news-layout{display:block}.news-heading{width:100%;padding:28px 0 0}.news-heading h2{font-size:48px}.news-heading .top-rule-link{margin-top:32px}.news-rule{top:198px}.news-cards{width:100%;margin-top:30px;padding-left:0;display:flex;scroll-snap-type:x mandatory}.news-card{flex:0 0 292px;scroll-snap-align:start}
  .game-intro__layout{padding-block:72px;gap:30px}.game-intro__copy h2{font-size:46px}.game-intro__poster{width:42%}.game-intro__poster img{height:600px}
  .chapter{height:800px}.chapter__copy{width:56%}.chapter__copy h2{font-size:34px}.chapter__text{padding-left:42px}.chapter--copy-left .chapter__text{padding-right:42px}
}

@media (max-width:640px){
  .shell,.content-shell{width:calc(100% - 30px)}
  .topbar__nav{width:calc(100% - 20px)}.crest{width:56px}.crest__mark{width:38px}.nav-buy{display:none}.topbar__right{padding-top:0}
  .hero{height:560px}.hero__background{object-position:46% top}.hero__character{height:530px;bottom:-25px;opacity:.68}.hero__character--left{left:-325px}.hero__character--right{right:-325px}.hero__brand{top:135px;width:92vw}.hero__brand p{font-size:9px}.hero__brand h1{font-size:54px}.hero__actions{bottom:38px;width:100%;padding:0 20px;gap:10px}.frame-button{min-width:0;flex:1;font-size:12px}.frame-button span{padding-inline:12px}
  .news-section{padding-top:30px}.news-rule{top:178px}.news-heading>span{font-size:24px}.news-heading h2{font-size:42px}.news-cards{margin-top:24px}.news-card{flex-basis:min(82vw,308px)}
  .game-intro{min-height:0}.game-intro__layout{min-height:0;padding:64px 0;display:flex;flex-direction:column-reverse;align-items:stretch}.game-intro__poster{width:100%;align-self:auto;justify-content:center}.game-intro__poster img{width:min(327px,92%);height:468px}.game-intro__copy h2{font-size:42px}.game-meta strong{font-size:48px}
  .chapter{height:auto;min-height:0;padding-bottom:62px;overflow:visible;clip-path:none;background:var(--ink)}
  .chapter__media{position:relative;inset:auto;height:auto;aspect-ratio:1/1;overflow:hidden}
  .chapter__media img{height:112%;transform:translate3d(0,var(--chapter-y,0),0) scale(1.04);object-position:center}
  .chapter__gradient{position:absolute;top:0;left:0;right:0;height:calc(100vw - 30px);background:linear-gradient(180deg,transparent 45%,var(--ink) 100%)!important}
  .chapter__inner{height:auto;display:block;width:100%}
  .chapter__copy{width:100%;padding:24px 15px 0}.chapter__copy h2{padding:0;font-size:34px}.chapter__ornament::before{left:25px!important;right:0!important}.chapter__ornament{justify-content:flex-start!important}.chapter__text,.chapter--copy-left .chapter__text{padding:0 0 0 38px;font-size:14px}
  .community{padding-block:64px}.section-label{font-size:22px}.community__layout,.creators{display:block}.community__copy,.creators>div{max-width:none;width:100%}.community__copy h2,.creators h3{font-size:44px}.community__copy p,.creators p{padding-left:0;font-size:16px}.social-links{width:100%;justify-content:flex-start;margin-top:38px}.section-label--content{margin-top:70px}.creators .top-rule-link{margin-top:32px}
  .final-cta{height:680px;min-height:620px}.final-cta__content h2{font-size:48px}.final-cta__buttons{width:100%;padding:0 20px;gap:10px}.footer__layout{flex-direction:column;text-align:center}.footer__brand{align-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__background,.hero__foreground,.hero__character,.chapter__media img{transform:none!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}

/* ===== v3: stable Pax-style header, hero and stacked media chapters ===== */

/* Keep content visible even in full-page captures; motion is handled by scene layers. */
.js [data-reveal]{opacity:1;transform:none;transition:none}

/* Header */
.topbar{
  height:48px;
  color:var(--bone);
  isolation:isolate;
}
.topbar::before{
  inset:0;
  height:48px;
  background:rgba(28,25,21,.86);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(8px);
}
.topbar::after{
  top:47px;
  bottom:auto;
  height:14px;
  background:url('../decor/rough-edge-pax.png') center top/1920px 14px repeat-x;
  opacity:.96;
  transform:none;
}
.topbar__nav{
  height:48px;
  padding-inline:0;
}
.topbar__left{gap:48px}
.crest{
  width:64px;
  height:94px;
  flex:0 0 64px;
  margin:0;
  background:#dedcd1;
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 10px),0 100%);
  filter:drop-shadow(1px -1px 5px rgba(0,0,0,.72));
}
.crest__mark{
  width:44px;
  height:54px;
  margin-top:14px;
  border-color:rgba(141,119,70,.78);
  font-size:29px;
}
.desktop-nav{
  gap:24px;
  padding-top:0;
  font-size:10px;
  line-height:1;
  letter-spacing:.14em;
}
.topbar__right{
  gap:22px;
  padding-top:0;
}
.language,.utility-link{
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
}
.nav-buy{
  width:146px;
  height:64px;
  margin:0;
  align-self:flex-start;
  transform:none;
  color:#d2b66f;
  font-size:14px;
  letter-spacing:.1em;
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
  background:#251f19;
}
.nav-buy::before{
  inset:0;
  background:#251f19;
  clip-path:none;
}
.nav-buy::after{
  inset:9px 11px 16px;
  border:1px solid rgba(185,154,88,.9);
}
.nav-buy span{margin-top:-8px}

/* Hero */
.hero{
  height:600px;
  min-height:600px;
  overflow:hidden;
}
.hero__background{
  object-position:center top;
  transform:translate3d(var(--hero-bg-x,0),var(--hero-bg-y,0),0) scale(1.025);
}
.hero__character{
  bottom:-72px;
  height:720px;
}
.hero__character--left{left:-105px}
.hero__character--right{right:-105px}
.hero__shade{
  background:
    linear-gradient(180deg,rgba(10,9,7,.22),transparent 25%,rgba(10,9,7,.12) 58%,rgba(20,18,15,.78) 88%,var(--ink) 100%),
    radial-gradient(ellipse at center,transparent 28%,rgba(16,14,11,.5) 100%);
}
.hero__brand{top:144px}
.hero__actions{
  bottom:106px;
  z-index:6;
}

/* Exact rough paper edges and safe hero overlap. */
.rough-edge{
  height:14px;
  background:url('../decor/rough-edge-pax.png') center top/1920px 14px repeat-x;
}
.rough-edge--top{top:-13px}
.rough-edge--bottom{bottom:-13px}
.news-section{
  z-index:8;
  margin-top:-64px;
  padding-top:94px;
}
.news-rule{top:314px}

/* Chapters: later scenes overlap the previous one through a clipped irregular edge. */
.chapters{
  position:relative;
  background:var(--ink);
  isolation:isolate;
}
.chapters::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  z-index:20;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0,rgba(141,119,70,.18) 5%,rgba(141,119,70,.44) 16%,rgba(141,119,70,.44) 84%,rgba(141,119,70,.14) 96%,transparent 100%);
  transform:translateX(-.5px);
}
.chapter{
  height:clamp(800px,100vh,1024px);
  min-height:800px;
  margin-top:-10px;
  overflow:hidden;
  background:var(--ink);
  clip-path:polygon(0 9px,3% 7px,7% 11px,12% 6px,18% 9px,24% 5px,31% 10px,38% 6px,46% 9px,53% 5px,61% 10px,69% 6px,76% 9px,84% 5px,91% 10px,96% 6px,100% 9px,100% 100%,0 100%);
  transform:translate3d(0,var(--chapter-stack-y,0),0);
  will-change:transform;
}
.chapter:first-child{margin-top:-6px}
.chapter:nth-child(1){z-index:1}
.chapter:nth-child(2){z-index:2}
.chapter:nth-child(3){z-index:3}
.chapter:nth-child(4){z-index:4}
.chapter__media{
  top:-8%;
  bottom:auto;
  height:116%;
  width:58%;
  overflow:hidden;
  transform:translate3d(0,var(--chapter-media-y,0),0);
  will-change:transform;
}
.chapter--copy-right .chapter__media{left:0;right:auto}
.chapter--copy-left .chapter__media{right:0;left:auto}
.chapter__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(var(--chapter-brightness,.62)) saturate(.72);
  transform:scale(1.045);
  transition:filter .35s ease;
}
.chapter__gradient{z-index:1}
.chapter--copy-right .chapter__gradient{
  background:
    linear-gradient(90deg,rgba(37,34,28,0) 34%,rgba(37,34,28,.2) 43%,rgba(37,34,28,.84) 55%,var(--ink) 63%),
    linear-gradient(180deg,rgba(37,34,28,.18),transparent 18%,transparent 78%,rgba(37,34,28,.72) 100%);
}
.chapter--copy-left .chapter__gradient{
  background:
    linear-gradient(-90deg,rgba(37,34,28,0) 34%,rgba(37,34,28,.2) 43%,rgba(37,34,28,.84) 55%,var(--ink) 63%),
    linear-gradient(180deg,rgba(37,34,28,.18),transparent 18%,transparent 78%,rgba(37,34,28,.72) 100%);
}
.chapter__inner{
  z-index:3;
  transform:translate3d(0,var(--chapter-copy-y,0),0);
  will-change:transform;
}
.chapter__copy{width:50%}
.chapter__copy h2{font-size:42px}
.chapter__ornament{overflow:visible}
.chapter__ornament::before{
  opacity:.9;
  transform:scaleX(var(--chapter-line-scale,.35));
  transition:transform .16s linear;
}
.chapter--copy-right .chapter__ornament::before{transform-origin:left center}
.chapter--copy-left .chapter__ornament::before{transform-origin:right center}
.chapter__ornament span{
  z-index:2;
  background:var(--ink);
}

/* Social icons */
.social-links{width:50%;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.social-link{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-top:4px solid var(--gold);
  color:var(--ink);
  transition:background .25s ease,color .25s ease;
}
.social-link:first-child{width:64px;height:64px}
.social-link svg{width:22px;height:22px;display:block}
.social-link:first-child svg{width:25px;height:25px}
.social-link:hover{background:var(--ink);color:var(--paper)}

@media (min-width:1600px){
  .hero{height:680px;min-height:680px}
  .hero__actions{bottom:122px}
  .hero__character{height:810px}
}

@media (max-width:1120px){
  .topbar__left{gap:28px}
  .desktop-nav{gap:16px;font-size:9px}
  .topbar__right{gap:14px}
  .nav-buy{width:128px}
  .hero__actions{bottom:98px}
  .chapter__media{width:62%}
}

@media (max-width:900px){
  .topbar::after{background-size:1280px 14px}
  .nav-buy{width:132px;height:60px}
  .hero{height:600px;min-height:600px}
  .hero__actions{bottom:92px}
  .news-section{margin-top:-44px;padding-top:72px}
  .news-rule{top:224px}
  .chapters::before{display:none}
  .chapter{margin-top:-8px}
  .chapter__media{width:66%}
}

@media (max-width:640px){
  .topbar__nav{width:calc(100% - 20px)}
  .topbar::after{height:10px;background-size:960px 10px}
  .crest{width:56px;height:88px;flex-basis:56px}
  .crest__mark{width:38px;height:50px;font-size:26px}
  .nav-buy{display:none}
  .hero{height:590px;min-height:590px}
  .hero__brand{top:136px}
  .hero__actions{bottom:72px}
  .news-section{margin-top:-28px;padding-top:56px}
  .news-rule{top:186px}
  .chapter{
    height:auto;
    min-height:0;
    margin-top:-6px;
    padding-bottom:62px;
    clip-path:polygon(0 7px,7% 5px,15% 8px,24% 4px,34% 7px,45% 5px,56% 8px,67% 4px,78% 7px,89% 5px,100% 8px,100% 100%,0 100%);
    transform:none;
  }
  .chapter__media{
    position:relative;
    top:auto;
    left:auto!important;
    right:auto!important;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    transform:none;
  }
  .chapter__media img{height:108%;transform:translateY(var(--chapter-mobile-y,0)) scale(1.04)}
  .chapter__gradient{height:calc(100vw - 30px)}
  .chapter__inner{transform:none}
}

/* Header palette follows the reference: translucent paper bar, dark hanging crest. */
.topbar{color:var(--ink)}
.topbar::before{
  background:rgba(220,221,212,.80);
  box-shadow:none;
  backdrop-filter:blur(7px);
}
.topbar::after{
  background-size:500px 14px;
  opacity:.80;
  transform:scale(-1);
}
.crest{
  background:var(--ink);
  color:var(--paper);
  filter:drop-shadow(1px -1px 5px rgba(220,221,212,.5));
}
.crest__mark{border-color:rgba(185,154,88,.72)}
.desktop-nav a:hover,.utility-link:hover,.language:hover{color:#6f5b31}
.nav-buy{
  color:#c8aa64;
  background:#251f19;
}
.nav-buy::before{background:#251f19}

/* =========================================================
   FIX: one centered hero image with both knights
   Existing HTML may still contain two <img> elements:
   .hero__character--left and .hero__character--right.
   The left element is used as the full pair image;
   the duplicate right element is hidden.
   ========================================================= */

.hero__stage{
  isolation:isolate;
}

.hero__background{
  z-index:1;
}

.hero__foreground{
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  transform:translate3d(0,var(--hero-fg-y,0),0);
  will-change:transform;
}

.hero__shade{
  z-index:3;
}

.hero__light{
  z-index:4;
}

.hero__brand{
  z-index:5;
}

.hero__actions{
  z-index:6;
}

/* Disable the old two-character positioning. */
.hero__character{
  filter:
    brightness(.76)
    saturate(.72)
    drop-shadow(0 18px 28px rgba(0,0,0,.42));
  transition:none;
}

/* Use only one copy of the wide image. */
.hero__character--right{
  display:none !important;
}

/* The uploaded image already contains both knights. */
.hero__character--left{
  display:block;
  position:absolute;
  inset:0;
  left:0;
  top:0;
  right:auto;
  bottom:auto;

  width:100%;
  height:100%;
  max-width:none;

  object-fit:cover;
  object-position:center 18%;

  opacity:1;
  transform:none !important;
}

/*
  Desktop tuning:
  the image is deliberately slightly larger than the hero,
  so the knights sit near the outer edges and the center stays free.
*/
@media (min-width:1121px){
  .hero__character--left{
    width:108%;
    height:108%;
    left:-4%;
    top:-2%;
    object-position:center 16%;
  }
}

@media (min-width:1600px){
  .hero__character--left{
    width:104%;
    height:110%;
    left:-2%;
    top:-3%;
    object-position:center 15%;
  }
}

@media (max-width:1120px){
  .hero__character--left{
    width:118%;
    height:106%;
    left:-9%;
    top:-1%;
    object-position:center 16%;
  }
}

@media (max-width:900px){
  .hero__character--left{
    width:138%;
    height:104%;
    left:-19%;
    top:0;
    object-position:center 15%;
  }
}

@media (max-width:640px){
  .hero__character--left{
    width:190%;
    height:100%;
    left:-45%;
    top:0;
    object-position:center 14%;
    opacity:.88;
  }

  .hero__brand{
    width:88vw;
  }
}

/* Keep the centered pair intact when reduced motion is enabled. */
@media (prefers-reduced-motion:reduce){
  .hero__foreground{
    transform:none !important;
  }

  .hero__character--left{
    transform:none !important;
  }
}

/* ===== FIX HERO CENTERING =====
   The generic .js [data-reveal] rule resets transform:none.
   These more specific selectors restore horizontal centering.
*/
.hero__brand,
.js .hero__brand[data-reveal],
.js .hero__brand[data-reveal].is-visible{
  left:50%;
  transform:translateX(-50%) !important;
}

.hero__actions,
.js .hero__actions[data-reveal],
.js .hero__actions[data-reveal].is-visible{
  left:50%;
  transform:translateX(-50%) !important;
}

/* Preserve centering for users with reduced motion enabled. */
@media (prefers-reduced-motion:reduce){
  .js .hero__brand[data-reveal],
  .js .hero__brand[data-reveal].is-visible,
  .js .hero__actions[data-reveal],
  .js .hero__actions[data-reveal].is-visible{
    transform:translateX(-50%) !important;
  }
}
/* =========================================================
   FINAL POLISH: living copy, safe motion, centered chapter axes
   ========================================================= */

.anchor-alias{position:absolute;top:-72px;left:0;width:1px;height:1px;pointer-events:none}

/* Header gains depth only after the first scroll. */
.topbar::before{transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.topbar.is-scrolled::before{
  background:rgba(220,221,212,.92);
  box-shadow:0 8px 30px rgba(23,20,16,.16);
  backdrop-filter:blur(12px);
}
.desktop-nav a{position:relative}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:50%;right:50%;bottom:-9px;
  height:1px;
  background:var(--gold);
  transition:left .28s var(--ease),right .28s var(--ease),opacity .28s ease;
  opacity:.55;
}
.desktop-nav a:hover::after,.desktop-nav a.is-active::after{left:0;right:0;opacity:1}

/* Hero: lightweight cinematic motion with no layout shifts. */
.hero{isolation:isolate}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 18% 28%,rgba(255,230,180,.13) 0 1px,transparent 1.8px),
    radial-gradient(circle at 72% 18%,rgba(255,230,180,.10) 0 1px,transparent 1.8px),
    radial-gradient(circle at 42% 72%,rgba(255,230,180,.08) 0 1px,transparent 1.8px);
  background-size:190px 170px,240px 210px,280px 250px;
  animation:heroDust 18s linear infinite;
}
.hero__foreground{
  transform:translate3d(var(--hero-fg-x,0),var(--hero-fg-y,0),0) scale(1.012);
  transition:transform .18s ease-out;
}
.hero__light{
  opacity:.5;
  background:
    radial-gradient(circle at calc(50% + var(--hero-light-x,0px)) calc(28% + var(--hero-light-y,0px)),rgba(255,232,190,.38),transparent 25%),
    radial-gradient(circle at 50% 78%,rgba(206,174,109,.15),transparent 31%);
}
.hero__brand p{animation:heroTextIn .8s .08s both var(--ease)}
.hero__brand h1{animation:heroTitleIn 1.05s .14s both var(--ease)}
.hero__brand i{animation:heroRuleIn .85s .65s both var(--ease);transform-origin:center}
.hero__actions{animation:heroActionsIn .85s .72s both var(--ease)}

.frame-button{overflow:hidden;transition:translate .25s var(--ease),filter .25s ease}
.frame-button::marker{display:none}
.frame-button span{position:relative;z-index:1;transition:background .25s ease,color .25s ease}
.frame-button span::after{
  content:"";
  position:absolute;
  top:-70%;bottom:-70%;left:-55%;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,245,215,.18),transparent);
  transform:skewX(-20deg);
  transition:left .7s var(--ease);
  pointer-events:none;
}
.frame-button:hover{translate:0 -3px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.frame-button:hover span::after{left:125%}

/* Reveal animation uses the independent translate property, so it never
   breaks transform-based centering or parallax. */
.js [data-reveal]{
  opacity:0;
  translate:0 30px;
  filter:blur(5px);
  transition:opacity .82s var(--ease),translate .82s var(--ease),filter .82s var(--ease);
}
.js [data-reveal].is-visible{opacity:1;translate:0 0;filter:blur(0)}
.js .hero__brand[data-reveal],.js .hero__actions[data-reveal]{opacity:1;translate:0 0;filter:none}
.js .news-card:nth-child(2){transition-delay:.1s}
.js .news-card:nth-child(3){transition-delay:.2s}
.js .chapter--copy-left .chapter__copy[data-reveal]{translate:-38px 0}
.js .chapter--copy-right .chapter__copy[data-reveal]{translate:38px 0}
.js .chapter .chapter__copy[data-reveal].is-visible{translate:0 0}

/* News cards feel tactile without becoming noisy. */
.news-card{
  transition:translate .42s var(--ease),box-shadow .42s var(--ease),border-color .42s ease;
  box-shadow:0 12px 28px rgba(20,18,15,.08);
}
.news-card:hover{translate:0 -9px;box-shadow:0 24px 48px rgba(20,18,15,.22)}
.news-card__image::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.11) 48%,transparent 61%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
}
.news-card:hover .news-card__image::before{transform:translateX(120%)}

/* Intro poster floats gently only after it is revealed. */
.game-intro__poster img{transition:transform .7s var(--ease),box-shadow .7s var(--ease),filter .7s ease}
.game-intro__poster:hover img{transform:translateY(-10px) rotate(.35deg);box-shadow:0 42px 82px rgba(0,0,0,.55);filter:brightness(1.04)}
.feature-list li{transition:translate .25s ease,color .25s ease}
.feature-list li:hover{translate:5px 0;color:var(--paper)}

/* Full-page chapter axes: diamond is exactly on the viewport center,
   horizontal rule runs from the center to the page edge. */
.chapters::before{
  left:50%;
  width:1px;
  background:linear-gradient(180deg,transparent 0,rgba(141,119,70,.14) 3%,rgba(141,119,70,.5) 14%,rgba(141,119,70,.5) 86%,rgba(141,119,70,.14) 97%,transparent 100%);
  box-shadow:0 0 16px rgba(141,119,70,.12);
}
.chapter__copy{
  height:min(470px,62vh);
  display:grid;
  grid-template-rows:1fr 1fr;
  align-content:center;
}
.chapter__copy h2{
  align-self:end;
  margin:0 0 46px;
}
.chapter__text{
  align-self:start;
  margin-top:46px;
}
.chapter__ornament{
  position:absolute;
  top:50%;
  width:50vw;
  height:30px;
  margin:0;
  display:block;
  overflow:visible;
  pointer-events:none;
  transform:translateY(-50%);
}
.chapter--copy-right .chapter__ornament{left:50%;right:auto}
.chapter--copy-left .chapter__ornament{right:50%;left:auto}
.chapter__ornament::before{
  content:"";
  position:absolute;
  top:50%;
  left:0!important;
  right:0!important;
  height:1px;
  opacity:1;
  transform:scaleX(var(--chapter-line-scale,.25));
  transition:transform .12s linear,filter .25s ease;
  filter:drop-shadow(0 0 4px rgba(185,154,88,.2));
}
.chapter--copy-right .chapter__ornament::before{
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(185,154,88,.96),rgba(141,119,70,.72) 55%,rgba(141,119,70,.22));
}
.chapter--copy-left .chapter__ornament::before{
  transform-origin:right center;
  background:linear-gradient(270deg,rgba(185,154,88,.96),rgba(141,119,70,.72) 55%,rgba(141,119,70,.22));
}
.chapter__ornament span{
  position:absolute;
  top:50%;
  width:22px;
  height:22px;
  margin:0!important;
  border:1px solid var(--gold-bright);
  background:rgba(37,34,28,.92);
  box-shadow:0 0 calc(18px * var(--chapter-focus,.25)) rgba(185,154,88,.5);
  font-size:0;
  z-index:4;
}
.chapter__ornament span::after{
  content:"";
  position:absolute;
  width:4px;height:4px;
  left:50%;top:50%;
  background:var(--gold-bright);
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(185,154,88,.8);
}
.chapter--copy-right .chapter__ornament span{
  left:0;right:auto;
  transform:translate(-50%,-50%) rotate(45deg) scale(var(--chapter-diamond-scale,.88));
}
.chapter--copy-left .chapter__ornament span{
  right:0;left:auto;
  transform:translate(50%,-50%) rotate(45deg) scale(var(--chapter-diamond-scale,.88));
}
.chapter__media img{transition:filter .35s ease,scale .7s var(--ease)}
.chapter:hover .chapter__media img{scale:1.012}

/* Beta checklist */
.beta-checks{
  margin:24px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 28px;
  font:16px/1.45 Fira Sans,Arial,sans-serif;
}
.beta-checks li{position:relative;padding-left:22px}
.beta-checks li::before{content:"✦";position:absolute;left:0;color:var(--gold)}

/* FAQ */
.faq{
  position:relative;
  z-index:6;
  padding:118px 0 126px;
  background:linear-gradient(180deg,var(--paper),#d4d5cc);
  color:var(--ink);
}
.faq__layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(460px,1.28fr);gap:88px;align-items:start}
.faq__heading>span{display:block;font:12px/1 Fira Sans,Arial,sans-serif;text-transform:uppercase;letter-spacing:.24em;color:#6f6b61}
.faq__heading h2{margin:14px 0 0;color:var(--gold);font-size:clamp(44px,5vw,72px);font-weight:400;line-height:1.02}
.faq__heading p{max-width:440px;margin:26px 0 0;font:17px/1.6 Fira Sans,Arial,sans-serif;color:#5d5a52}
.faq__items{border-bottom:1px solid rgba(141,119,70,.48)}
.faq details{border-top:1px solid rgba(141,119,70,.48)}
.faq summary{
  position:relative;
  padding:25px 58px 25px 0;
  list-style:none;
  cursor:pointer;
  font-size:22px;
  line-height:1.28;
  transition:color .25s ease,padding-left .25s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:12px;top:50%;width:18px;height:1px;background:var(--gold);transition:transform .32s var(--ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary{color:var(--gold);padding-left:12px}
.faq details[open] summary::after{transform:rotate(0)}
.faq details>div{overflow:hidden}
.faq details[open]>div{animation:faqOpen .42s var(--ease) both}
.faq details p{margin:0;padding:0 58px 27px 12px;font:16px/1.65 Fira Sans,Arial,sans-serif;color:#656158}
.final-cta__fade{background:linear-gradient(180deg,#d4d5cc 0,rgba(212,213,204,0) 28%,rgba(37,34,28,.18) 55%,var(--ink) 100%),radial-gradient(circle at center,transparent 22%,rgba(20,18,15,.56) 100%)}

@keyframes heroDust{to{background-position:190px -170px,-240px 210px,280px -250px}}
@keyframes heroTextIn{from{opacity:0;letter-spacing:.62em;translate:0 14px}to{opacity:1;letter-spacing:.38em;translate:0 0}}
@keyframes heroTitleIn{from{opacity:0;scale:.94;filter:blur(9px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes heroRuleIn{from{opacity:0;scale:0 1}to{opacity:1;scale:1 1}}
@keyframes heroActionsIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes faqOpen{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

@media (max-width:900px){
  .faq{padding:94px 0 104px}
  .faq__layout{grid-template-columns:1fr;gap:48px}
  .chapter__copy{height:min(440px,60vh)}
  .chapter__copy h2{margin-bottom:38px}
  .chapter__text{margin-top:38px}
}

@media (max-width:640px){
  .js .chapter--copy-left .chapter__copy[data-reveal],
  .js .chapter--copy-right .chapter__copy[data-reveal]{translate:0 24px}
  .js .chapter .chapter__copy[data-reveal].is-visible{translate:0 0}
  .chapter__copy{height:auto;display:block}
  .chapter__copy h2{margin:0 0 22px}
  .chapter__ornament{
    position:relative;
    top:auto;
    left:auto!important;
    right:auto!important;
    width:calc(100vw - 15px);
    height:26px;
    margin:0 0 24px;
    transform:none;
  }
  .chapter__ornament::before{left:0!important;right:0!important;transform-origin:left center!important;background:linear-gradient(90deg,rgba(185,154,88,.96),rgba(141,119,70,.28))!important}
  .chapter--copy-left .chapter__ornament span,
  .chapter--copy-right .chapter__ornament span{left:0;right:auto;transform:translate(-50%,-50%) rotate(45deg) scale(var(--chapter-diamond-scale,.88))}
  .chapter__text{margin-top:0}
  .beta-checks{grid-template-columns:1fr}
  .faq{padding:78px 0 88px}
  .faq__layout{gap:38px}
  .faq__heading h2{font-size:42px}
  .faq summary{font-size:19px;padding-right:46px}
  .faq details p{padding-right:38px}
}

@media (prefers-reduced-motion:reduce){
  .hero::after,.hero__brand p,.hero__brand h1,.hero__brand i,.hero__actions{animation:none!important}
  .hero__foreground{transform:none!important}
  .js [data-reveal]{opacity:1!important;translate:0 0!important;filter:none!important}
  .chapter__ornament::before{transform:scaleX(1)!important}
}

/* =========================================================
   FINAL FIX: center chapter diamonds and rules on viewport axis
   ========================================================= */

/*
  The ornament lives inside .chapter__copy. A transform/translate/filter on
  that parent changes the containing block for the absolute ornament and
  moves the diamond to the center of the text column. Keep the parent itself
  geometrically neutral; animate its children instead.
*/
.js .chapter__copy[data-reveal],
.js .chapter__copy[data-reveal].is-visible{
  opacity:1 !important;
  translate:none !important;
  transform:none !important;
  filter:none !important;
}

/* Animate the visible content without changing the ornament coordinate system. */
.js .chapter__copy[data-reveal] h2,
.js .chapter__copy[data-reveal] .chapter__text{
  opacity:0;
  filter:blur(4px);
  transition:
    opacity .78s var(--ease),
    translate .78s var(--ease),
    filter .78s var(--ease);
}

.js .chapter--copy-right .chapter__copy[data-reveal] h2,
.js .chapter--copy-right .chapter__copy[data-reveal] .chapter__text{
  translate:34px 0;
}

.js .chapter--copy-left .chapter__copy[data-reveal] h2,
.js .chapter--copy-left .chapter__copy[data-reveal] .chapter__text{
  translate:-34px 0;
}

.js .chapter__copy[data-reveal].is-visible h2,
.js .chapter__copy[data-reveal].is-visible .chapter__text{
  opacity:1;
  translate:0 0;
  filter:none;
}

/* The nearest positioned ancestor is now .chapter__inner (the centered shell). */
.chapter__ornament{
  top:50%;
  width:50vw;
  z-index:8;
}

.chapter--copy-right .chapter__ornament{
  left:50% !important;
  right:auto !important;
}

.chapter--copy-left .chapter__ornament{
  right:50% !important;
  left:auto !important;
}

/* The line begins exactly under the diamond and reaches the viewport edge. */
.chapter__ornament::before{
  left:0 !important;
  right:0 !important;
}

.chapter--copy-right .chapter__ornament span{
  left:0 !important;
  right:auto !important;
}

.chapter--copy-left .chapter__ornament span{
  right:0 !important;
  left:auto !important;
}

/* Keep the vertical axis and diamonds on the same exact pixel. */
.chapters::before{
  left:50% !important;
  transform:translateX(-.5px) !important;
}

@media (max-width:640px){
  /* Mobile keeps the compact inline rule; no full-width viewport axis. */
  .js .chapter__copy[data-reveal] h2,
  .js .chapter__copy[data-reveal] .chapter__text{
    translate:0 20px;
  }

  .js .chapter__copy[data-reveal].is-visible h2,
  .js .chapter__copy[data-reveal].is-visible .chapter__text{
    translate:0 0;
  }

  .chapter__ornament{
    width:calc(100vw - 15px);
    z-index:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .js .chapter__copy[data-reveal] h2,
  .js .chapter__copy[data-reveal] .chapter__text{
    opacity:1 !important;
    translate:none !important;
    filter:none !important;
  }
}

/* =========================================================
   COPY / ECONOMY PRESENTATION
   Keeps the existing chapter geometry and center-line system intact.
   ========================================================= */

.game-meta strong{
  max-width:620px;
  font-size:clamp(42px,4.2vw,56px);
  line-height:1.02;
}

.economy-points{
  margin-top:26px;
  border-top:1px solid rgba(185,154,88,.42);
  font-family:Fira Sans,Arial,sans-serif;
}

.economy-point{
  display:grid;
  grid-template-columns:minmax(126px,155px) 1fr;
  gap:18px;
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid rgba(185,154,88,.22);
  transition:background-color .28s ease,padding-left .28s ease;
}

.economy-point strong{
  color:var(--gold-bright);
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.economy-point span{
  color:#bdb8ad;
  font-size:13px;
  line-height:1.45;
}

.economy-point:hover{
  padding-left:10px;
  background:linear-gradient(90deg,rgba(185,154,88,.08),transparent 76%);
}

.js .chapter__copy[data-reveal] .economy-point{
  opacity:0;
  translate:0 10px;
  transition:
    opacity .5s var(--ease),
    translate .5s var(--ease),
    background-color .28s ease,
    padding-left .28s ease;
}

.js .chapter__copy[data-reveal].is-visible .economy-point{
  opacity:1;
  translate:0 0;
}

.js .chapter__copy[data-reveal].is-visible .economy-point:nth-child(1){transition-delay:.18s}
.js .chapter__copy[data-reveal].is-visible .economy-point:nth-child(2){transition-delay:.27s}
.js .chapter__copy[data-reveal].is-visible .economy-point:nth-child(3){transition-delay:.36s}

.economy-note{
  grid-column:1/-1;
  margin:8px 0 0;
  padding:22px 0 0;
  border-top:1px solid rgba(141,119,70,.35);
  color:#6c685f;
  font:13px/1.55 Fira Sans,Arial,sans-serif;
}

.final-cta__content h2{
  max-width:min(1100px,88vw);
}

@media (max-width:900px){
  .economy-point{
    grid-template-columns:140px 1fr;
  }
}

@media (max-width:640px){
  .game-meta strong{font-size:40px}

  .economy-points{margin-top:22px}

  .economy-point{
    grid-template-columns:1fr;
    gap:4px;
    padding:10px 0;
  }

  .economy-point:hover{padding-left:0;background:none}
  .economy-note{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .js .chapter__copy[data-reveal] .economy-point{
    opacity:1!important;
    translate:none!important;
    transition:none!important;
  }
}

/* =========================================================
   FINAL FIX: ornament follows the actual heading bottom
   JS writes --chapter-ornament-y after fonts/layout are ready.
   ========================================================= */
@media (min-width:641px){
  .chapter__ornament{
    top:var(--chapter-ornament-y,50%) !important;
    transform:translateY(-50%) !important;
  }
}

@media (max-width:640px){
  .chapter__ornament{
    top:auto !important;
    transform:none !important;
  }
}

/* =========================================================
   MOBILE PRESENTATION — FINAL PASS
   Desktop/tablet geometry above 640px is intentionally untouched.
   ========================================================= */
@media (max-width:640px){
  :root{
    --mobile-gutter:22px;
  }

  html{
    scroll-padding-top:54px;
    overflow-x:hidden;
  }

  body{
    min-width:320px;
    overflow-x:hidden;
    font-size:16px;
  }

  .shell,
  .content-shell{
    width:100%;
    max-width:none;
    padding-inline:var(--mobile-gutter);
    margin-inline:auto;
  }

  /* Header */
  .topbar,
  .topbar__nav{
    height:50px;
  }

  .topbar::before{
    height:50px;
  }

  .topbar::after{
    top:49px;
    height:9px;
    background-size:640px 9px;
  }

  .topbar__nav{
    width:100%;
    padding:0 14px 0 10px;
  }

  .topbar__left,
  .topbar__right{
    height:50px;
  }

  .crest{
    width:48px;
    height:72px;
    flex-basis:48px;
  }

  .crest__mark{
    width:34px;
    height:39px;
    margin-top:8px;
    font-size:23px;
  }

  .menu-button{
    display:block;
    width:38px;
    height:38px;
    margin-right:-4px;
  }

  .menu-button span{
    left:8px;
    right:8px;
  }

  .mobile-menu{
    inset:50px 0 auto;
    max-height:calc(100svh - 50px);
    overflow:auto;
    padding:30px var(--mobile-gutter) 34px;
  }

  .mobile-menu a{
    padding:15px 0;
    font-size:13px;
    letter-spacing:.13em;
  }

  /* Hero */
  .hero{
    height:450px;
    min-height:450px;
  }

  .hero__stage{
    overflow:hidden;
  }

  .hero__background{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% center;
    transform:scale(1.035)!important;
    filter:brightness(.69) saturate(.7);
  }

  .hero__foreground{
    transform:none!important;
  }

  .hero__character--left{
    width:164%!important;
    height:100%!important;
    left:-32%!important;
    top:0!important;
    bottom:auto!important;
    object-fit:cover!important;
    object-position:center 26%!important;
    opacity:.93!important;
    filter:brightness(.72) saturate(.72) drop-shadow(0 12px 22px rgba(0,0,0,.45));
  }

  .hero__shade{
    background:
      linear-gradient(180deg,rgba(10,9,7,.24),transparent 27%,rgba(10,9,7,.1) 54%,rgba(20,18,15,.66) 82%,var(--ink) 100%),
      radial-gradient(ellipse at center,transparent 20%,rgba(16,14,11,.46) 100%);
  }

  .hero__light{
    opacity:.34;
  }

  .hero__brand,
  .js .hero__brand[data-reveal],
  .js .hero__brand[data-reveal].is-visible{
    top:92px;
    width:calc(100% - 48px);
    transform:translateX(-50%)!important;
  }

  .hero__brand p{
    max-width:280px;
    margin:0 auto 10px;
    font-size:9px;
    line-height:1.45;
    letter-spacing:.24em;
  }

  .hero__brand h1{
    font-size:clamp(48px,14vw,62px);
    line-height:.9;
  }

  .hero__brand h1 span{
    font-size:.72em;
    letter-spacing:.08em;
  }

  .hero__brand i{
    width:66px;
    margin-top:18px;
  }

  .hero__actions,
  .js .hero__actions[data-reveal],
  .js .hero__actions[data-reveal].is-visible{
    left:50%;
    bottom:34px;
    width:calc(100% - 40px);
    padding:0;
    gap:10px;
    transform:translateX(-50%)!important;
  }

  .hero__actions .frame-button{
    flex:1 1 0;
    min-width:0;
    height:50px;
    font-size:11px;
    letter-spacing:.035em;
  }

  .hero__actions .frame-button span{
    padding:0 9px;
    white-space:nowrap;
  }

  /* News */
  .news-section{
    margin-top:0;
    padding:48px 0 54px;
  }

  .news-layout{
    display:block;
    padding-inline:var(--mobile-gutter);
  }

  .news-heading{
    width:100%;
    padding:4px 0 26px;
  }

  .news-heading>span{
    font-size:18px;
    line-height:1;
  }

  .news-heading h2{
    margin-top:4px;
    font-size:42px;
    line-height:.96;
  }

  .news-rule{
    top:124px;
  }

  .news-cards{
    width:calc(100% + var(--mobile-gutter));
    margin:0;
    padding:0 var(--mobile-gutter) 8px 0;
    display:flex;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .news-cards::-webkit-scrollbar{display:none}

  .news-card{
    flex:0 0 min(82vw,318px);
    min-height:418px;
    scroll-snap-align:start;
  }

  .news-card__copy{
    padding:20px 20px 18px;
  }

  .news-card__copy h3{
    font-size:22px;
    line-height:1.24;
  }

  .news-card__copy p{
    font-size:14px;
    line-height:1.58;
  }

  /* Main game introduction: poster first, readable copy below. */
  .game-intro{
    min-height:0;
    overflow:hidden;
  }

  .game-intro__layout{
    min-height:0;
    padding:0 0 68px;
    display:flex;
    flex-direction:column-reverse;
    gap:0;
    align-items:stretch;
  }

  .game-intro__poster{
    order:2;
    width:100%;
    height:auto;
    margin:0 0 42px;
    align-self:auto;
    justify-content:center;
  }

  .game-intro__poster img{
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:4/5;
    object-fit:cover;
    object-position:center;
    border:0;
    box-shadow:none;
  }

  .game-intro__copy{
    order:1;
    width:100%;
    padding-inline:var(--mobile-gutter);
  }

  .game-intro__copy h2{
    max-width:330px;
    margin:0;
    font-size:42px;
    line-height:1.02;
  }

  .game-intro__copy .body-copy{
    max-width:none;
    margin-top:24px;
    color:#c1bcb1;
    font-size:16px;
    line-height:1.62;
  }

  .body-copy p+p{
    margin-top:20px;
  }

  .game-meta{
    margin-top:30px;
  }

  .game-meta span{
    font-size:14px;
  }

  .game-meta strong{
    margin-top:6px;
    font-size:38px;
    line-height:1.05;
  }

  .feature-list{
    margin-top:24px;
    font-size:15px;
    line-height:1.62;
  }

  .feature-list li{
    padding-left:19px;
    margin-top:7px;
  }

  .frame-button--wide{
    width:min(230px,100%);
    margin-top:32px;
  }

  .game-intro__copy small{
    max-width:310px;
    margin-top:18px;
    font-size:11px;
    line-height:1.55;
  }

  /* Cinematic chapters become clear image + copy cards. */
  .chapters{
    overflow:hidden;
  }

  .chapters::before{
    display:none!important;
  }

  .chapter{
    height:auto;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    clip-path:none;
    transform:none!important;
  }

  .chapter:first-child{
    margin-top:0;
  }

  .chapter__media,
  .chapter--copy-right .chapter__media,
  .chapter--copy-left .chapter__media{
    position:relative;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    transform:none!important;
    overflow:hidden;
  }

  .chapter__media img{
    width:100%;
    height:100%!important;
    object-fit:cover;
    object-position:center;
    transform:none!important;
    scale:1!important;
    filter:brightness(.7) saturate(.76)!important;
  }

  #graphics .chapter__media img{object-position:42% center}
  #combat .chapter__media img{object-position:center 44%}
  #economy .chapter__media img{object-position:center 48%}
  #protection .chapter__media img{object-position:center 48%}

  .chapter__gradient{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:auto;
    aspect-ratio:4/3;
    z-index:1;
    background:linear-gradient(180deg,transparent 56%,rgba(37,34,28,.28) 76%,var(--ink) 100%)!important;
    pointer-events:none;
  }

  .chapter__inner,
  .chapter--copy-right .chapter__inner,
  .chapter--copy-left .chapter__inner{
    width:100%;
    height:auto;
    padding:0 var(--mobile-gutter);
    display:block;
    transform:none!important;
  }

  .chapter__copy{
    width:100%;
    height:auto;
    padding:38px 0 62px;
    display:block;
  }

  .chapter__copy h2{
    max-width:340px;
    margin:0;
    padding:0;
    font-size:36px;
    line-height:1.05;
    letter-spacing:-.015em;
  }

  .chapter__ornament,
  .chapter--copy-right .chapter__ornament,
  .chapter--copy-left .chapter__ornament{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:calc(100% + var(--mobile-gutter));
    height:24px;
    margin:22px 0 24px;
    transform:none!important;
  }

  .chapter__ornament::before{
    top:50%;
    left:0!important;
    right:0!important;
    transform:scaleX(var(--chapter-line-scale,.65))!important;
    transform-origin:left center!important;
    background:linear-gradient(90deg,rgba(185,154,88,.95),rgba(141,119,70,.18))!important;
  }

  .chapter--copy-left .chapter__ornament span,
  .chapter--copy-right .chapter__ornament span,
  .chapter__ornament span{
    left:0!important;
    right:auto!important;
    top:50%;
    width:20px;
    height:20px;
    transform:translate(-50%,-50%) rotate(45deg) scale(var(--chapter-diamond-scale,.92))!important;
  }

  .chapter__text,
  .chapter--copy-left .chapter__text{
    max-width:none;
    margin:0;
    padding:0;
    color:#d2cdc2;
    font-size:16px;
    line-height:1.64;
  }

  .economy-points{
    margin-top:26px;
  }

  .economy-point{
    grid-template-columns:1fr;
    gap:4px;
    padding:12px 0;
  }

  .economy-point strong{
    font-size:12px;
  }

  .economy-point span{
    font-size:14px;
  }

  /* Community */
  .community{
    padding:58px 0 66px;
  }

  .section-label{
    padding-inline:var(--mobile-gutter);
    font-size:16px;
  }

  .section-label span{
    width:100%;
  }

  .community__layout,
  .creators{
    display:block;
    padding-inline:var(--mobile-gutter);
  }

  .community__copy{
    max-width:none;
    padding-top:10px;
  }

  .community__copy h2,
  .creators h3{
    font-size:40px;
    line-height:1.05;
  }

  .community__copy p,
  .creators p{
    margin-top:20px;
    padding-left:0;
    font-size:16px;
    line-height:1.58;
  }

  .social-links{
    width:100%;
    margin-top:30px;
    justify-content:flex-start;
  }

  .social-link,
  .social-link:first-child{
    width:52px;
    height:52px;
  }

  .section-label--content{
    margin-top:58px;
  }

  .creators{
    padding-top:12px;
  }

  .creators>div{
    width:100%;
  }

  .beta-checks{
    margin-top:22px;
    grid-template-columns:1fr;
    gap:0;
    font-size:14px;
    line-height:1.55;
  }

  .creators .top-rule-link{
    margin-top:28px;
  }

  /* FAQ */
  .faq{
    padding:70px 0 78px;
  }

  .faq__layout{
    display:block;
    padding-inline:var(--mobile-gutter);
  }

  .faq__heading{
    max-width:none;
    margin-bottom:32px;
  }

  .faq__heading span{
    font-size:12px;
  }

  .faq__heading h2{
    margin-top:8px;
    font-size:42px;
    line-height:1.02;
  }

  .faq__heading p{
    margin-top:18px;
    font-size:15px;
    line-height:1.55;
  }

  .faq__items{
    width:100%;
  }

  .faq details{
    padding:0;
  }

  .faq summary{
    min-height:66px;
    padding:19px 42px 19px 0;
    font-size:18px;
    line-height:1.28;
  }

  .faq details p{
    padding:0 0 22px;
    font-size:15px;
    line-height:1.62;
  }

  .economy-note{
    margin-top:26px;
    padding-top:20px;
    font-size:12px;
    line-height:1.58;
  }

  /* Final CTA */
  .final-cta{
    height:560px;
    min-height:560px;
  }

  .final-cta__image{
    object-position:center;
  }

  .final-cta__content{
    padding:50px var(--mobile-gutter) 30px;
  }

  .final-cta__content p{
    max-width:280px;
    font-size:9px;
    line-height:1.5;
    letter-spacing:.24em;
  }

  .final-cta__content h2{
    max-width:100%;
    font-size:48px;
    line-height:.95;
  }

  .final-cta__buttons{
    width:min(250px,100%);
    margin-top:34px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .final-cta__buttons .frame-button{
    width:100%;
    min-width:0;
    height:50px;
    font-size:12px;
  }

  /* Footer */
  .footer{
    padding:30px var(--mobile-gutter);
  }

  .footer__layout{
    width:100%;
    padding:0;
    flex-direction:column;
    align-items:center;
    gap:16px;
    text-align:center;
  }

  .footer p{
    max-width:280px;
    margin:0;
  }

  /* Mobile motion: preserve reveals, remove crop-heavy parallax. */
  .chapter__media,
  .chapter__media img,
  .chapter__inner,
  .hero__foreground,
  .hero__background{
    will-change:auto;
  }

  .js .chapter--copy-left .chapter__copy[data-reveal] h2,
  .js .chapter--copy-left .chapter__copy[data-reveal] .chapter__text,
  .js .chapter--copy-right .chapter__copy[data-reveal] h2,
  .js .chapter--copy-right .chapter__copy[data-reveal] .chapter__text{
    translate:0 18px;
  }

  .js .chapter__copy[data-reveal].is-visible h2,
  .js .chapter__copy[data-reveal].is-visible .chapter__text{
    translate:0 0;
  }
}

@media (max-width:370px){
  :root{--mobile-gutter:18px}

  .hero__brand h1{font-size:47px}
  .hero__actions{width:calc(100% - 24px)}
  .hero__actions .frame-button{font-size:10px}
  .chapter__copy h2{font-size:33px}
  .game-intro__copy h2,
  .community__copy h2,
  .creators h3,
  .faq__heading h2{font-size:38px}
}

/* =========================================================
   MOBILE FINAL FIX
   Only affects screens up to 640px.
   - Native horizontal news slider without blocking page scroll.
   - Hero copy sits below the header.
   - Knights are larger, closer to center and slightly lower.
   ========================================================= */
@media (max-width:640px){

  /* ---------- HERO ---------- */
  .hero{
    height:380px !important;
    min-height:380px !important;
  }

  .hero__stage{
    overflow:hidden;
  }

  /* One wide image already contains both knights. */
  .hero__character--left{
    width:136% !important;
    height:auto !important;
    max-width:none !important;

    left:-18% !important;
    right:auto !important;
    top:45px !important;
    bottom:auto !important;

    object-fit:contain !important;
    object-position:center top !important;

    opacity:.95 !important;
    transform:none !important;
    filter:
      brightness(.74)
      saturate(.74)
      drop-shadow(0 12px 22px rgba(0,0,0,.44)) !important;
  }

  .hero__character--right{
    display:none !important;
  }

  /* Move subtitle and title safely below the fixed header. */
  .hero__brand,
  .js .hero__brand[data-reveal],
  .js .hero__brand[data-reveal].is-visible{
    top:82px !important;
    left:50% !important;
    width:calc(100% - 46px) !important;
    transform:translateX(-50%) !important;
  }

  .hero__brand p{
    max-width:290px !important;
    margin:0 auto 8px !important;
    font-size:8px !important;
    line-height:1.45 !important;
    letter-spacing:.25em !important;
  }

  .hero__brand h1{
    font-size:48px !important;
    line-height:.88 !important;
  }

  .hero__brand h1 span{
    font-size:.72em !important;
    letter-spacing:.075em !important;
  }

  .hero__brand i{
    width:62px !important;
    margin-top:13px !important;
  }

  /* Buttons sit on the bottom of the artwork. */
  .hero__actions,
  .js .hero__actions[data-reveal],
  .js .hero__actions[data-reveal].is-visible{
    left:50% !important;
    bottom:0 !important;
    width:calc(100% - 20px) !important;
    padding:0 !important;
    gap:8px !important;
    transform:translateX(-50%) !important;
    z-index:10 !important;
  }

  .hero__actions .frame-button{
    flex:1 1 0 !important;
    min-width:0 !important;
    height:48px !important;
    font-size:10px !important;
    letter-spacing:.025em !important;
  }

  .hero__actions .frame-button span{
    padding-inline:7px !important;
    white-space:nowrap !important;
    background:rgba(27,24,20,.88) !important;
    backdrop-filter:blur(3px);
  }

  /* ---------- NEWS SLIDER ---------- */
  .news-cards{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:12px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    /* Allows horizontal card scrolling and vertical page scrolling. */
    touch-action:manipulation !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch;

    scroll-snap-type:x proximity !important;
    scroll-behavior:smooth;
    scrollbar-width:none;

    user-select:none;
    -webkit-user-select:none;
  }

  .news-cards::-webkit-scrollbar{
    display:none;
  }

  .news-card{
    flex:0 0 min(82vw,318px) !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:normal !important;

    touch-action:manipulation !important;
    user-select:none;
    -webkit-user-select:none;
  }

  .news-card img{
    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    -webkit-user-drag:none !important;
  }

  .news-card a{
    -webkit-user-drag:none;
  }
}

@media (max-width:370px){
  .hero{
    height:370px !important;
    min-height:370px !important;
  }

  .hero__character--left{
    width:162% !important;
    left:-31% !important;
    top:36px !important;
  }

  .hero__brand,
  .js .hero__brand[data-reveal],
  .js .hero__brand[data-reveal].is-visible{
    top:78px !important;
    width:calc(100% - 34px) !important;
  }

  .hero__brand h1{
    font-size:45px !important;
  }

  .hero__actions,
  .js .hero__actions[data-reveal],
  .js .hero__actions[data-reveal].is-visible{
    width:calc(100% - 16px) !important;
    gap:6px !important;
  }

  .hero__actions .frame-button{
    font-size:9px !important;
  }
}

/* ===== REAL PHONE FIX: mobile news cards are always visible =====
   Mobile browser toolbars change the effective viewport height and can keep
   IntersectionObserver-based cards at opacity:0. The slider itself remains
   native and horizontally scrollable.
*/
@media (max-width:640px){
  .js .news-card[data-reveal],
  .js .news-card[data-reveal].is-visible{
    opacity:1 !important;
    visibility:visible !important;
    translate:none !important;
    transform:none !important;
    filter:none !important;
    transition:
      box-shadow .32s var(--ease),
      background-color .32s ease !important;
  }

  .news-cards{
    min-height:418px;
    align-items:stretch;
  }

  .news-card{
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* ===== DESKTOP HEADER — FINAL SCALE PASS =====
   The original 48px bar made the navigation feel undersized on wide screens.
   Keep the compact mobile header intact and give desktop a stronger silhouette.
*/
@media (min-width:901px){
  html{
    scroll-padding-top:84px;
  }

  .topbar,
  .topbar__nav{
    height:72px;
  }

  .topbar::before{
    height:72px;
  }

  .topbar::after{
    top:71px;
    height:14px;
    background-size:640px 14px;
  }

  .topbar__left,
  .topbar__right{
    height:72px;
  }

  .topbar__left{
    gap:42px;
  }

  .crest{
    width:78px;
    height:114px;
    flex-basis:78px;
  }

  .crest__mark{
    width:56px;
    height:66px;
    margin-top:14px;
    font-size:34px;
  }

  .desktop-nav{
    gap:29px;
    padding-top:0;
    font-size:12px;
    line-height:1;
    letter-spacing:.15em;
  }

  .desktop-nav a::after{
    bottom:-13px;
  }

  .topbar__right{
    gap:24px;
    padding-top:0;
  }

  .nav-buy{
    width:174px;
    height:86px;
    font-size:16px;
    letter-spacing:.12em;
    box-shadow:0 8px 22px rgba(28,24,19,.18);
  }

  .nav-buy::after{
    inset:11px 13px 18px;
  }

  .nav-buy span{
    margin-top:-8px;
  }
}

@media (min-width:901px) and (max-width:1120px){
  .topbar__left{
    gap:28px;
  }

  .crest{
    width:70px;
    height:106px;
    flex-basis:70px;
  }

  .crest__mark{
    width:50px;
    height:60px;
    font-size:31px;
  }

  .desktop-nav{
    gap:18px;
    font-size:10px;
  }

  .nav-buy{
    width:154px;
    height:82px;
    font-size:14px;
  }
}