/* Riftgaze — editorial stylesheet. One file, every page on the domain. */
:root{
  --bone:#f7f3f0;
  --obsidian:#131713;
  --carbon:#000000;
  --ash:#bebcb9;
  --graphite:#5f5f5c;
  --graphite-on-dark:#a7a7a3;
  --accent:#131713;
  --radius-cut:14px;
  --gap-s:10px;
  --gap-m:20px;
  --gap-l:40px;
  --gap-xl:80px;
  --wrap:1200px;
  --font-display:'Riftgaze Display','Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Riftgaze Body','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Riftgaze Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-body-fallback:'Riftgaze Body Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/fraunces-600.woff2?v=1') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400.woff2?v=1') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/inter-600.woff2?v=1') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/jbmono-500.woff2?v=1') format('woff2');
}
/* metric-matched fallback so swap does not reshuffle line counts (P19 CLS) */
@font-face{
  font-family:'Riftgaze Body Fallback';
  src:local('Arial');
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22%;
  line-gap-override:0%;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--obsidian);
  font-family:var(--font-body),var(--font-body-fallback);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
ul,ol{padding-left:0;list-style:none;margin:0}
h1,h2,h3,h4,p,figure{margin:0}
table{border-collapse:collapse}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--obsidian);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px;width:100%}
@media(min-width:640px){.wrap{padding-inline:32px}}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;line-height:1.06}
h1{font-size:clamp(2.1rem,5vw + 1rem,3.6rem)}
h2{font-size:clamp(1.5rem,2.6vw + 1rem,2.3rem)}
h3{font-size:clamp(1.15rem,1.4vw + 0.9rem,1.5rem)}
p{max-width:72ch}
.lede{font-size:1.1rem;line-height:1.6;color:var(--obsidian)}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--graphite);
}
.eyebrow--on-dark{color:var(--graphite-on-dark)}

/* ---------------- Skip link ---------------- */
.skip{
  position:absolute;left:-999px;top:0;background:var(--obsidian);color:var(--bone);
  padding:12px 18px;z-index:200;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
}
.skip:focus{left:12px;top:12px}

/* ---------------- Top nav ---------------- */
.nav{background:var(--bone);position:relative;z-index:100}
.nav__bar{display:flex;align-items:center;justify-content:space-between;padding-block:18px;gap:16px}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.nav__mark{width:26px;height:26px;flex:none}
.nav__links{display:none;gap:28px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.nav__links a{text-decoration:none;padding-block:4px;border-bottom:1px solid transparent}
.nav__links a:hover,.nav__links a[aria-current="page"]{border-bottom-color:var(--carbon)}
.nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px}
.nav__toggle span{display:block;height:2px;background:var(--obsidian);border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__panel{display:none;flex-direction:column;gap:2px;padding-bottom:18px;font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.nav__panel[data-open="true"]{display:flex}
.nav__panel a{display:block;padding:12px 4px;text-decoration:none;border-top:1px solid var(--ash)}
@media(min-width:860px){
  .nav__toggle{display:none}
  .nav__links{display:flex}
  .nav__panel{display:none !important}
}

/* ---------------- Breadcrumbs ---------------- */
.crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);padding-block:16px}
.crumb a{text-decoration:none;color:var(--graphite)}
.crumb a:hover{color:var(--obsidian)}
.crumb__sep{margin-inline:8px;color:var(--ash)}

/* ---------------- Stage (hero) ---------------- */
.stage{position:relative;background:var(--obsidian);color:var(--bone);overflow:hidden}
.stage__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:0}
.stage__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,23,19,.55) 0%,rgba(19,23,19,.86) 78%,rgba(19,23,19,.96) 100%);z-index:1}
.stage__inner{position:relative;z-index:2;padding-block:76px 68px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.stage__inner p{margin-inline:auto;max-width:60ch}
.stage h1{color:var(--bone)}
.stage--plain{background:var(--obsidian)}
.stage--plain .stage__inner{padding-block:56px 48px;text-align:left;align-items:flex-start}
.stage--plain p{margin-inline:0}
.stage__cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.stage--plain .stage__cta{justify-content:flex-start}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 26px;text-decoration:none;
  clip-path:polygon(0 0,calc(100% - var(--radius-cut)) 0,100% var(--radius-cut),100% 100%,var(--radius-cut) 100%,0 calc(100% - var(--radius-cut)));
  background:var(--bone);color:var(--obsidian);
  box-shadow:4px 4px 0 0 var(--carbon);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--carbon)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 0 var(--carbon)}
.btn--dark{background:var(--obsidian);color:var(--bone);box-shadow:4px 4px 0 0 var(--bone)}
.btn--dark:hover{box-shadow:6px 6px 0 0 var(--bone)}
.btn--ghost{
  clip-path:none;border-radius:999px;border:1.5px solid currentColor;background:transparent;box-shadow:none;color:var(--obsidian);
}
.btn--ghost:hover{background:var(--obsidian);color:var(--bone);transform:none;box-shadow:none}
.stage .btn--ghost{color:var(--bone)}
.stage .btn--ghost:hover{background:var(--bone);color:var(--obsidian)}
.btn__arrow{transition:transform .15s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ---------------- Sections ---------------- */
.section{padding-block:var(--gap-xl)}
.section--tight{padding-block:52px}
.section--dark{background:var(--obsidian);color:var(--bone)}
.section--dark .eyebrow{color:var(--graphite-on-dark)}
.section__head{display:flex;flex-direction:column;gap:14px;margin-bottom:34px;max-width:70ch}
.section__head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;max-width:none}

/* ---------------- Reveal-on-scroll ---------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------------- Row card (game list, one per row) ---------------- */
.row-list{display:flex;flex-direction:column;gap:2px;width:100%}
.row{
  display:grid;grid-template-columns:1fr;gap:18px;
  padding-block:26px;border-top:1px solid var(--ash);
  width:100%;
}
.row-list .row:last-child{border-bottom:1px solid var(--ash)}
.row__media{border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:var(--ash)}
.row__media img{width:100%;height:100%;object-fit:cover}
.row__body{display:flex;flex-direction:column;gap:10px;min-width:0}
.row__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
.row__title{font-family:var(--font-display);font-weight:600;font-size:1.3rem;text-decoration:none;color:var(--obsidian)}
.row__title a{text-decoration:none;color:inherit}
.row__title a:hover{text-decoration:underline;text-underline-offset:4px}
.row__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);display:flex;flex-wrap:wrap;gap:6px 14px}
.row__desc{color:var(--obsidian);max-width:64ch}
.row__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
@media(min-width:700px){
  .row{grid-template-columns:220px 1fr;align-items:center;gap:28px}
  .row__media{aspect-ratio:4/3}
}

/* ---------------- Rating / score chips ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--carbon);border-radius:4px;padding:5px 10px;
}
.chip--muted{border-color:var(--ash);color:var(--graphite)}
.chip svg{width:12px;height:12px;flex:none}

/* ---------------- Genre showcase ---------------- */
.hubcards{display:flex;flex-direction:column;gap:24px}
.hubcard{
  display:grid;grid-template-columns:1fr;gap:22px;
  background:var(--obsidian);color:var(--bone);border-radius:4px;overflow:hidden;
}
.hubcard__media{aspect-ratio:16/9;overflow:hidden}
.hubcard__media img{width:100%;height:100%;object-fit:cover}
.hubcard__body{padding:28px 28px 32px;display:flex;flex-direction:column;gap:14px}
.hubcard__count{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite-on-dark)}
@media(min-width:820px){
  .hubcard{grid-template-columns:1.1fr 1fr}
  .hubcard:nth-child(even){grid-template-columns:1fr 1.1fr}
  .hubcard:nth-child(even) .hubcard__media{order:2}
}

/* ---------------- Fact card / verdict ---------------- */
.factcard{background:var(--bone);border:1px solid var(--carbon);border-radius:4px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.factcard__item dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-bottom:4px}
.factcard__item dd{margin:0;font-weight:600}
@media(min-width:640px){.factcard{grid-template-columns:repeat(3,1fr)}}

.verdict{
  background:var(--obsidian);color:var(--bone);border-radius:4px;padding:26px 28px;
  display:flex;flex-direction:column;gap:10px;
}
.verdict .eyebrow{color:var(--graphite-on-dark)}
.verdict p{font-family:var(--font-display);font-size:1.25rem;line-height:1.3;max-width:none}

.score{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono)}
.score__num{font-size:1.6rem;font-weight:500}
.score__of{font-size:11px;color:var(--graphite-on-dark)}

/* ---------------- Pros / cons ---------------- */
.proscons{display:grid;grid-template-columns:1fr;gap:24px}
.proscons__col h2{margin-bottom:14px;font-size:1.15rem}
.proscons__col ul{display:flex;flex-direction:column;gap:10px}
.proscons__col li{display:flex;gap:10px;align-items:flex-start}
.proscons__col svg{flex:none;margin-top:3px;width:16px;height:16px}
@media(min-width:640px){.proscons{grid-template-columns:1fr 1fr}}

/* ---------------- Article body ---------------- */
.article{display:flex;flex-direction:column;gap:var(--gap-l)}
.article__section{display:flex;flex-direction:column;gap:14px}
.article__section h2{max-width:40ch}
.article__section p{max-width:70ch}

/* ---------------- Similar games / sidebar ---------------- */
.similar{width:100%}
.similar h2{margin-bottom:18px}

/* ---------------- Table (comparisons) ---------------- */
.ledger-wrap{width:100%;overflow-x:auto}
.ledger{width:100%;border-collapse:collapse;font-size:.95rem}
.ledger caption{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);padding-bottom:12px}
.ledger thead th{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);
  text-align:left;padding:10px 16px;border-bottom:2px solid var(--carbon);white-space:nowrap;
}
.ledger tbody th,.ledger tbody td{padding:14px 16px;text-align:left;vertical-align:top}
.ledger tbody th{font-weight:600;font-family:var(--font-display);font-size:1.02rem}
.ledger tbody tr:nth-child(even){background:rgba(19,23,19,.05)}
.ledger tbody tr:hover{background:rgba(19,23,19,.09)}
.ledger__note{font-size:.85rem;color:var(--graphite);margin-top:14px;max-width:60ch}

/* ---------------- Versus table ---------------- */
.vs-ledger td:first-child{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--graphite);width:22%}

/* ---------------- FAQ / accordion ---------------- */
.qa{border-top:1px solid var(--ash);width:100%}
.qa:last-child{border-bottom:1px solid var(--ash)}
.qa__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.05rem}
.qa__q-label{flex:1 1 auto;min-width:0}
.qa__icon{flex:none;width:20px;height:20px;transition:transform .2s ease}
.qa__q[aria-expanded="true"] .qa__icon{transform:rotate(45deg)}
.qa__a{max-width:68ch;padding-bottom:0;overflow:hidden;max-height:0;transition:max-height .25s ease}
.qa__a[data-open="true"]{padding-bottom:20px;max-height:600px}

/* ---------------- Contact ---------------- */
.contactblock{
  background:var(--obsidian);color:var(--bone);border-radius:4px;
  padding:34px 28px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;width:100%;
}
.contactblock p{max-width:60ch}

/* ---------------- Footer ---------------- */
.foot{background:var(--bone);border-top:1px solid var(--carbon);padding-block:var(--gap-l) 30px}
.foot__grid{display:grid;grid-template-columns:1fr;gap:32px}
.foot__col h3{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-bottom:14px}
.foot__col a{display:block;text-decoration:none;padding-block:5px;font-size:.95rem}
.foot__col a:hover{text-decoration:underline}
.foot__mark{width:28px;height:28px;margin-bottom:10px}
.foot__bottom{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;margin-top:36px;padding-top:20px;border-top:1px solid var(--ash);font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite)}
@media(min-width:760px){.foot__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* ---------------- Cookie notice ---------------- */
.notice{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:300;
  background:var(--obsidian);color:var(--bone);border-radius:4px;
  padding:20px;display:flex;flex-direction:column;gap:16px;max-width:640px;margin-inline:auto;
  box-shadow:6px 6px 0 0 var(--carbon);
}
.notice[hidden]{display:none}
.notice p{font-size:.9rem;max-width:none}
.notice__row{display:flex;gap:12px;flex-wrap:wrap}
@media(min-width:600px){.notice{left:24px;right:auto;bottom:24px}}

/* ---------------- Back to top ---------------- */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:150;
  width:48px;height:48px;border-radius:999px;background:var(--obsidian);color:var(--bone);
  display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 0 var(--carbon);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .15s ease;
}
.totop[data-show="true"]{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-2px)}

/* ---------------- 404 ---------------- */
.notfound{min-height:52vh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding-block:60px}

/* ---------------- Legal pages ---------------- */
.legal{display:flex;flex-direction:column;gap:32px}
.legal__section{display:flex;flex-direction:column;gap:12px}
.legal__section p{max-width:74ch}

/* ---------------- Sitemap page ---------------- */
.sitemapcols{display:grid;grid-template-columns:1fr;gap:32px}
.sitemapcols h2{margin-bottom:12px}
.sitemapcols a{text-decoration:none;display:block;padding-block:6px}
.sitemapcols a:hover{text-decoration:underline}
@media(min-width:760px){.sitemapcols{grid-template-columns:repeat(3,1fr)}}

/* ---------------- Misc ---------------- */
.grain{position:relative}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:var(--gap-m)}
.small{font-size:.85rem;color:var(--graphite)}
.badge-icon{width:34px;height:34px;border-radius:4px;flex:none}