/* =====================================================================
   REEL & RIDGE — independent editorial guide to browser games
   Calm editorial · warm paper + bordeaux + sage · Newsreader / Inter
   No photos — topographic contour motif. Original content.
   ===================================================================== */
:root{
  --paper:#f5efe2;
  --paper-2:#ede4d1;
  --paper-3:#e6dabf;
  --card:#fbf6ea;
  --card-2:#f5eeda;
  --ink:#241f18;
  --ink-soft:#4a4236;
  --muted:#746a58;
  --muted-2:#9c9179;
  --wine:#c05a2a;
  --wine-br:#d97a45;
  --wine-dp:#97441c;
  --sage:#3a7a6e;
  --sage-dp:#2c5c52;
  --line:rgba(36,31,24,0.12);
  --line-2:rgba(36,31,24,0.20);
  --line-wine:rgba(192,90,42,0.35);
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-sans:'Jost',-apple-system,sans-serif;
  --maxw:1180px;
  --hh:78px;
  --shadow:0 26px 60px -30px rgba(36,31,24,0.32);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh);-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);background:var(--paper);color:var(--ink-soft);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--f-serif);font-weight:500;line-height:1.12;color:var(--ink);letter-spacing:-.3px}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 30px}
.eyebrow{font-family:var(--f-sans);font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;color:var(--wine)}
.eyebrow.sage{color:var(--sage-dp)}
.serif-italic{font-family:var(--f-serif);font-style:italic;font-weight:500}

/* contour motif (topographic rings) */
.contour{position:absolute;pointer-events:none;z-index:0;opacity:.5}
.contour svg{display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-sans);font-size:.82rem;font-weight:600;letter-spacing:.3px;padding:14px 26px;border:1px solid transparent;border-radius:999px;transition:background .25s,color .25s,border-color .25s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn-wine{background:var(--wine);color:#fbefe6}
.btn-wine:hover{background:var(--wine-br)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-line{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--wine);color:var(--wine)}
.btn-sm{padding:10px 18px;font-size:.76rem}
.btn-block{width:100%}

/* =====================================================================
   Header
   ===================================================================== */
.site-header{position:sticky;top:0;z-index:60;height:var(--hh);background:rgba(244,239,228,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hrow{height:100%;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;flex:none}
.brand b{font-family:var(--f-serif);font-weight:600;font-size:1.3rem;color:var(--ink);letter-spacing:0}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{font-size:.86rem;color:var(--ink-soft);padding:8px 12px;border-radius:8px;transition:color .2s,background .2s}
.nav a:hover,.nav a.active{color:var(--wine);background:rgba(125,46,58,.06)}
.h-cta{margin-left:8px}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line-2);width:44px;height:44px;border-radius:8px;color:var(--ink);font-size:1.2rem}
.drawer{position:fixed;inset:0 0 0 auto;width:min(85vw,330px);background:var(--card);z-index:80;transform:translateX(100%);transition:transform .35s;padding:26px;border-left:1px solid var(--line);overflow-y:auto}
.drawer.open{transform:none}
.drawer .x{text-align:right;font-size:1.5rem;color:var(--ink);margin-bottom:14px}
.drawer a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(34,31,26,.4);z-index:79;display:none}.scrim.open{display:block}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;padding:78px 0 56px;overflow:hidden}
.hero .contour{top:-120px;right:-120px;width:560px;height:560px;opacity:.6}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr;gap:50px;align-items:end}
.hero .eyebrow{display:block;margin-bottom:24px}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:500;letter-spacing:-1.5px;max-width:16ch}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:52ch;margin:26px 0 32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-side{border-left:1px solid var(--line);padding-left:30px}
.hero-side .st{padding:14px 0;border-bottom:1px solid var(--line)}
.hero-side .st:last-child{border-bottom:none}
.hero-side .st b{font-family:var(--f-serif);font-size:2.2rem;font-weight:500;color:var(--wine);display:block;line-height:1}
.hero-side .st span{font-size:.82rem;color:var(--muted)}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;position:relative;z-index:1}
.trust span{font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:var(--card-2)}
.trust span::before{content:"◆";color:var(--sage);margin-right:8px;font-size:.7rem}

/* =====================================================================
   Section shell
   ===================================================================== */
.section{padding:92px 0;border-top:1px solid var(--line);position:relative}
.section.alt{background:var(--paper-2)}
.section.paper3{background:var(--paper-3)}
.sec-head{max-width:720px;margin-bottom:52px}
.sec-head.center{margin:0 auto 52px;text-align:center}
.sec-head .eyebrow{display:block;margin-bottom:18px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:500;margin-bottom:18px}
.sec-head p{color:var(--muted);font-size:1.05rem}

/* methodology / chapters */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.chapter{background:var(--card);border:1px solid var(--line);padding:32px;position:relative}
.chapter .cnum{font-family:var(--f-serif);font-size:.9rem;color:var(--wine);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.chapter .cnum .glyph{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-wine);display:grid;place-items:center;font-size:.85rem;color:var(--wine)}
.chapter h3{font-size:1.4rem;margin-bottom:12px}
.chapter p{color:var(--muted);font-size:.94rem;margin-bottom:18px}
.chapter .tags{display:flex;flex-wrap:wrap;gap:7px}
.chapter .tags span{font-size:.74rem;color:var(--ink-soft);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}

/* disclosure note */
.note{margin-top:34px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--sage);padding:22px 26px;display:flex;gap:18px;align-items:flex-start}
.note .lab{font-family:var(--f-sans);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--sage-dp);white-space:nowrap;padding-top:3px}
.note p{color:var(--muted);font-size:.94rem}
.note a{color:var(--wine);text-decoration:underline}

/* criteria grid */
.crit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--card)}
.crit{padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.crit:nth-child(3n){border-right:none}
.crit:nth-last-child(-n+3){border-bottom:none}
.crit .k{font-family:var(--f-serif);font-size:1.6rem;color:var(--wine);display:block;margin-bottom:10px}
.crit h3{font-size:1.15rem;margin-bottom:8px}
.crit p{color:var(--muted);font-size:.9rem}

/* =====================================================================
   Rankings
   ===================================================================== */
.rank-list{display:flex;flex-direction:column;gap:22px}
.rank{background:var(--card);border:1px solid var(--line);display:grid;grid-template-columns:186px 1fr 190px;gap:0;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s}
.rank:hover{border-color:var(--line-wine);box-shadow:var(--shadow);transform:translateY(-3px)}
.rank .r-cover{position:relative;border-right:1px solid var(--line);overflow:hidden;background:var(--paper-3)}
.rank .r-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.rank:hover .r-cover img{transform:scale(1.04)}
.rank .r-cover .r-rn{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;background:rgba(34,31,26,.74);color:var(--paper);font-family:var(--f-serif);font-size:1.2rem;display:grid;place-items:center;border:1px solid rgba(244,239,228,.35)}
.rank .r-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,31,26,.18),transparent 30%)}
.rank .r-body{padding:26px 30px}
.rank .r-badge{font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:var(--wine);margin-bottom:10px;display:inline-block}
.rank .r-badge.feat{background:var(--wine);color:#fbefe6;padding:4px 10px;border-radius:4px}
.rank h3{font-size:1.7rem;margin-bottom:4px}
.rank .r-cat{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage-dp);margin-bottom:14px}
.rank .r-desc{color:var(--muted);font-size:.96rem;margin-bottom:16px;max-width:62ch}
.rank .r-feats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.rank .r-feats span{font-size:.76rem;color:var(--ink-soft);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.rank .r-meta{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.rank .r-meta b{color:var(--ink-soft);font-weight:600}
.rank .r-side{border-left:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;text-align:center}
.rank .r-score .sc{font-family:var(--f-serif);font-size:2.6rem;color:var(--wine);line-height:1;font-weight:500}
.rank .r-score .sl{font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:block;margin-top:6px}
.rank .r-disc{font-size:.7rem;color:var(--muted-2);line-height:1.5}

/* lead feature */
.lead-feature{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.lead-feature .lf-left h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:16px}
.lead-feature .lf-left .lf-score{display:inline-flex;align-items:baseline;gap:10px;border:1px solid var(--line-wine);padding:12px 20px;margin-top:10px}
.lead-feature .lf-left .lf-score b{font-family:var(--f-serif);font-size:2rem;color:var(--wine)}
.lead-feature .lf-left .lf-score span{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.lf-block{margin-bottom:22px}
.lf-block h3{font-size:1.15rem;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.lf-block h3::before{content:"";width:22px;height:1px;background:var(--wine)}
.lf-block p{color:var(--muted);font-size:.96rem}
.lf-block ul li{color:var(--ink-soft);font-size:.94rem;padding:7px 0 7px 20px;position:relative}
.lf-block ul li::before{content:"—";position:absolute;left:0;color:var(--sage)}

/* play styles */
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.style{background:var(--card);border:1px solid var(--line);padding:28px}
.style .sk{font-family:var(--f-serif);font-style:italic;font-size:1.05rem;color:var(--wine);display:block;margin-bottom:10px}
.style h3{font-size:1.3rem;margin-bottom:10px}
.style p{color:var(--muted);font-size:.92rem}

/* devices / sessions rows */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.trio .t{padding:34px 30px 34px 0;border-right:1px solid var(--line)}
.trio .t:last-child{border-right:none;padding-right:0}
.trio .t .lab{font-family:var(--f-sans);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--sage-dp);display:block;margin-bottom:12px}
.trio .t h3{font-size:1.4rem;margin-bottom:10px}
.trio .t p{color:var(--muted);font-size:.94rem}

/* mindful play */
.mindful{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.mindful ul li{color:var(--ink-soft);padding:12px 0 12px 26px;position:relative;border-top:1px solid var(--line);font-size:.96rem}
.mindful ul li:first-child{border-top:none}
.mindful ul li::before{content:"✦";position:absolute;left:0;color:var(--wine);font-size:.8rem;top:14px}
.mindful .helpbox{background:var(--card);border:1px solid var(--line);padding:28px}
.mindful .helpbox h3{font-size:1.3rem;margin-bottom:10px}
.mindful .helpbox p{color:var(--muted);font-size:.94rem;margin-bottom:14px}
.mindful .helpbox .num{font-family:var(--f-serif);font-size:1.3rem;color:var(--wine)}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:var(--f-serif);font-size:1.25rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:1.5rem;color:var(--wine);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 40px 22px 0;font-size:.96rem}

/* contact / CTA */
.cta-band{text-align:center;background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.cta-band .contour{opacity:.12;top:-160px;left:50%;transform:translateX(-50%);width:700px;height:700px}
.cta-band .eyebrow{color:#d99}
.cta-band h2{color:var(--paper);font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:18px;position:relative;z-index:1}
.cta-band p{color:rgba(244,239,228,.7);max-width:52ch;margin:0 auto 30px;position:relative;z-index:1}

.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:var(--card);border:1px solid var(--line-2);color:var(--ink);padding:13px 15px;font-family:var(--f-sans);font-size:.96rem;outline:none;transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:var(--wine)}
.field textarea{min-height:130px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted);margin:4px 0 20px}
.consent input{margin-top:5px;accent-color:var(--wine)}
.form-note{display:none;margin-top:16px;padding:15px;border:1px solid var(--line-wine);background:rgba(125,46,58,.06);color:var(--wine);font-size:.92rem}
.form-note.show{display:block}

/* =====================================================================
   Footer + cookie
   ===================================================================== */
.site-footer{background:var(--paper-2);border-top:1px solid var(--line);padding:64px 0 30px}
.f-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;margin-bottom:40px}
.f-brand .brand{margin-bottom:16px}
.f-brand p{color:var(--muted);font-size:.9rem;max-width:42ch}
.f-col h4{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--wine);margin-bottom:16px}
.f-col a{display:block;color:var(--muted);font-size:.9rem;padding:6px 0;transition:color .2s}
.f-col a:hover{color:var(--wine)}
.f-disc{color:var(--muted);font-size:.82rem;line-height:1.8;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.f-disc strong{color:var(--ink-soft)}
.f-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted-2);font-size:.8rem;margin-top:18px}

.cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:70;max-width:860px;margin:0 auto;background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow);border-radius:14px;padding:20px 24px;display:none;align-items:center;gap:22px;flex-wrap:wrap}
.cookie.show{display:flex}
.cookie .ck{flex:1;min-width:240px;font-size:.88rem;color:var(--muted)}
.cookie .ck a{color:var(--wine);text-decoration:underline}
.cookie .cka{display:flex;gap:10px}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.js .reveal{opacity:0;transform:translateY(22px)}.js .reveal.in,.reveal.in{opacity:1;transform:none}

/* =====================================================================
   Legal pages
   ===================================================================== */
.page-hero{padding:60px 0 34px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.page-hero .crumb{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.page-hero .crumb a{color:var(--wine)}
.page-hero h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:500}
.page-hero .upd{font-size:.78rem;color:var(--muted);margin-top:12px}
.doc{max-width:800px;margin:0 auto;padding:50px 0 40px}
.doc h2{font-size:1.5rem;margin:34px 0 12px;color:var(--wine)}
.doc h3{font-size:1.15rem;margin:22px 0 8px;color:var(--ink)}
.doc p,.doc li{color:var(--muted);margin-bottom:12px}
.doc ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.doc a{color:var(--wine);text-decoration:underline}
.doc strong{color:var(--ink)}
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--sage);padding:18px 22px;margin:22px 0}

/* =====================================================================
   Responsive
   ===================================================================== */
@media(max-width:960px){
  .nav,.h-cta{display:none}.nav-toggle{display:grid;place-items:center}
  .hero-grid{grid-template-columns:1fr;gap:34px}.hero-side{border-left:none;border-top:1px solid var(--line);padding:24px 0 0}
  .hero-side{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hero-side .st{border-bottom:none}
  .chapters,.styles{grid-template-columns:1fr}
  .crit-grid{grid-template-columns:1fr}.crit{border-right:none}
  .rank{grid-template-columns:150px 1fr}.rank .r-side{grid-column:1/-1;border-left:none;border-top:1px solid var(--line);flex-direction:row;align-items:center;text-align:left}
  .lead-feature,.mindful,.contact-grid{grid-template-columns:1fr;gap:30px}
  .trio{grid-template-columns:1fr}.trio .t{border-right:none;border-bottom:1px solid var(--line);padding:26px 0}
  .f-top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  :root{--hh:64px}
  .section{padding:60px 0}.hero{padding:44px 0 34px}
  .hero-side{grid-template-columns:1fr}
  .rank{grid-template-columns:1fr}.rank .r-cover{height:200px;border-right:none;border-bottom:1px solid var(--line)}
  .f-top{grid-template-columns:1fr}.contour{display:none}
}

/* engine additions */
.hero h1 .l2{display:block}
.italic-brass{font-family:var(--f-serif);font-style:italic;font-weight:500;color:var(--wine)}