:root {
  --dq-bg:#0b100e; --dq-surface:#111813; --dq-surface-2:#182019;
  --dq-text:#f0eadc; --dq-muted:#b7b8aa; --dq-moss:#b9ba86;
  --dq-gold:#e7c57b; --dq-burgundy:#e7c57b; --dq-line:rgba(224,204,155,.18);
}
html { background:var(--dq-bg); }
.resonance-page h1,.resonance-page h2 { font-family:"Trajan Quest",Georgia,serif; }
.resonance-page .dq-hero { height: min(820px, 88svh); min-height:600px; }
.resonance-page .dq-hero-image { object-position:center; }
.resonance-page .dq-hero-shade { background:linear-gradient(90deg,rgba(5,10,8,.87),rgba(5,10,8,.56) 35%,transparent 68%),linear-gradient(0deg,#0b100e,transparent 28%); box-shadow:none; }
.resonance-page .dq-hero-content { padding-bottom:70px; }
.resonance-page .dq-hero h1 { width:min(520px,48vw); margin:20px 0 28px; line-height:1; }
.resonance-page .resonance-logo { display:block; width:100%; height:auto; filter:drop-shadow(0 4px 7px #000); }
.resonance-page .dq-hero-copy { max-width:430px; font-size:18px; line-height:1.7; text-shadow:0 2px 4px #000; }
.resonance-page .dq-kicker,.resonance-page .dq-section-label { color:var(--dq-gold); letter-spacing:.14em; }
.resonance-page .dq-scene { grid-column:span 6; }
.resonance-page .dq-scene-frame { aspect-ratio:16 / 9; background:#111813; border-radius:3px; }
.resonance-page .dq-scene img { object-fit:cover; }
.resonance-page figcaption { display:flex; flex-direction:column; gap:7px; padding:20px 0 6px; color:var(--dq-muted); font-size:15px; }
.resonance-page .resonance-culture { font-family:"Trajan Quest",Georgia,serif; font-size:25px; color:var(--dq-gold); }
.resonance-art-note { max-width:640px; margin:0 0 30px; color:var(--dq-muted); line-height:1.7; }
.resonance-page .dq-status > span:first-child { background:var(--dq-gold); box-shadow:0 0 12px #e7c57b55; }
@media(max-width:700px) {
 .resonance-page .dq-hero { display:block; height:auto; min-height:0; max-height:none; padding-top:90px; }
 .resonance-page .dq-hero-image { position:relative; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; }
 .resonance-page .dq-hero-shade { display:none; }
 .resonance-page .dq-nav { padding:22px 0; gap:15px; }
 .resonance-page .dq-brand { width:155px; }
 .resonance-page .dq-nav-actions { gap:15px; }
 .resonance-page .dq-hero-content { width:calc(100% - 40px); margin:0 auto; padding:30px 0 42px; }
 .resonance-page .dq-hero h1 { width:min(450px,100%); margin:18px 0 22px; }
 .resonance-page .dq-hero-copy { max-width:none; font-size:17px; }
 .resonance-page .dq-scene { grid-column:1 / -1; }
}
.resonance-gameplay,.resonance-prologue { padding:75px 0; border-top:1px solid var(--dq-line); }
.resonance-gameplay h2,.resonance-prologue h2 { font-size:clamp(27px,3.3vw,44px); margin-bottom:32px; }
.resonance-screenshot-stage { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:linear-gradient(#08100be8,#08100be8),url('assets/resonance/maya-wide.webp') center/cover; border:1px solid var(--dq-line); border-radius:4px; }
.resonance-screenshot-pair { position:absolute; inset:5% 0; display:flex; justify-content:center; gap:7%; }
.resonance-phone { display:block; height:100%; aspect-ratio:1206 / 2622; flex:none; border:2px solid #3d4539; border-radius:12px; overflow:hidden; box-shadow:0 10px 35px #000a; }
.resonance-phone img { display:block; width:100%; height:100%; object-fit:contain; }
.resonance-phone:focus-visible { outline:3px solid var(--dq-gold); outline-offset:5px; }
@media(max-width:700px) { .resonance-gameplay,.resonance-prologue { padding:45px 0; } .resonance-phone { border-width:1px; border-radius:5px; } }