/* thedripnews.com — jojobet theme */
:root{
  --bg:#0f0f10;
  --bg-2:#17171a;
  --card:#1c1c20;
  --line:#2a2a30;
  --text:#eaeaea;
  --text-2:#b4b4bc;
  --mute:#80808a;
  --accent:#ff4b2b;
  --accent-2:#ff8f00;
  --gold:#f4c84a;
  --ok:#28c76f;
  --bad:#ef4444;
  --warn:#f59e0b;
  --r:12px;
  --max:1180px;
  --fnt:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fnt);background:var(--bg);color:var(--text);line-height:1.62;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none;transition:color .18s}
a:hover{color:var(--accent)}
h1,h2,h3,h4,h5{color:#fff;line-height:1.22;font-weight:700}
h1{font-size:2.2rem;margin-bottom:.5em}
h2{font-size:1.55rem;margin:1.6em 0 .5em;letter-spacing:-.3px}
h3{font-size:1.18rem;margin:1.1em 0 .4em}
p{color:var(--text-2);margin-bottom:.95em}
ul,ol{color:var(--text-2);padding-left:1.3em;margin-bottom:1em}
li{margin-bottom:.35em}
code{background:#242428;padding:.1em .35em;border-radius:4px;font-size:.9em;color:#ffd7a0}
blockquote{border-left:3px solid var(--accent);padding:.8em 1em;background:#1a1a1e;margin:1.3em 0;color:#d0d0d6;font-style:italic;border-radius:0 6px 6px 0}
.container{max-width:var(--max);margin:0 auto;padding:0 1.1rem}
.container.narrow{max-width:820px}

/* top warning strip */
.warn-bar{background:linear-gradient(90deg,#390,#590);background:linear-gradient(90deg,#2a0,#4b0);background:#1a0a00;border-bottom:1px solid #3a1500;color:#f5c84a;font-size:.82rem;padding:.4em 0;text-align:center}

/* header */
.site-header{background:#0a0a0c;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.2rem;color:#fff}
.brand em{color:var(--accent);font-style:normal}
.brand img{border-radius:8px}
nav.main{display:flex;gap:.15rem;flex-wrap:wrap}
nav.main a{color:#c8c8d0;padding:.5rem .85rem;border-radius:6px;font-size:.9rem;font-weight:500}
nav.main a:hover{background:#1e1e24;color:#fff}
nav.main a.active{background:var(--accent);color:#fff}
.burger{display:none;background:transparent;border:1px solid var(--line);color:#fff;font-size:1.3rem;padding:.3rem .7rem;border-radius:6px;cursor:pointer}

/* hero */
.hero{padding:3.5rem 0 2.5rem;background:radial-gradient(circle at 20% 10%,rgba(255,75,43,.12),transparent 60%),linear-gradient(180deg,#1a0d08 0%,var(--bg) 70%);border-bottom:1px solid var(--line)}
.hero.compact{padding:2.2rem 0 1.8rem}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2.5rem;align-items:center}
.eyebrow{display:inline-block;background:#301808;color:var(--accent-2);font-size:.78rem;letter-spacing:1px;padding:.25em .7em;border-radius:999px;font-weight:700;margin-bottom:.8em;text-transform:uppercase}
.hero h1{font-size:2.6rem;background:linear-gradient(90deg,#fff 30%,var(--gold) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.5em}
.hero p.lead{font-size:1.08rem;color:var(--text-2);margin-bottom:1.4em;max-width:620px}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.3em}
.hero-pills{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.hero-pills li{background:#1b1b20;border:1px solid var(--line);padding:.3rem .75rem;border-radius:999px;font-size:.82rem;color:#d0d0d6}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.hero-card h3{margin-top:0}
.hero-card ol.start{margin:0 0 1em 1.2em;color:var(--text-2)}
.hero-card .link{display:inline-block;margin-top:.4em;color:var(--gold);font-weight:600}

/* btn */
.btn{display:inline-block;padding:.75em 1.3em;border-radius:9px;font-weight:700;text-align:center;font-size:.97rem;cursor:pointer;border:0;transition:transform .12s,box-shadow .2s;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),#c2301a);color:#fff;box-shadow:0 4px 14px rgba(255,75,43,.3)}
.btn-primary:hover{transform:translateY(-1px);color:#fff;box-shadow:0 7px 20px rgba(255,75,43,.5)}
.btn-ghost{background:transparent;color:#fff;border:1px solid #3a3a44}
.btn-ghost:hover{border-color:var(--accent);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),#c89b1a);color:#1a1200}

/* features */
.features{padding:2.8rem 0;background:var(--bg-2);border-bottom:1px solid var(--line)}
.features h2{text-align:center;margin-bottom:1.4em}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;text-align:center;transition:transform .15s,border-color .2s}
.feat:hover{transform:translateY(-3px);border-color:var(--accent)}
.feat .ic{font-size:1.8rem;display:block;margin-bottom:.5em}
.feat h3{color:#fff;margin:.3em 0 .4em;font-size:1.08rem}
.feat p{font-size:.9rem;color:var(--mute)}

/* latest */
.latest{padding:2.5rem 0;border-bottom:1px solid var(--line)}
.post-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1em}
.post{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;color:#fff;transition:all .18s}
.post:hover{border-color:var(--accent);color:#fff}
.post .tag{display:inline-block;background:#301808;color:var(--accent-2);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;padding:.2em .6em;border-radius:4px;margin-bottom:.6em}
.post h3{margin:0 0 .3em;font-size:1.08rem}
.post p{font-size:.9rem;color:var(--text-2);margin:0}

/* browse */
.browse{padding:2.5rem 0}
.browse h2{text-align:center;margin-bottom:1em}
.browse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.55rem}
.browse-item{background:var(--card);border:1px solid var(--line);padding:.9rem 1rem;border-radius:9px;color:#e0e0e6;font-weight:500;font-size:.94rem;text-align:center}
.browse-item:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* page-head */
.page-head{padding:2.4rem 0 1.4rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#160a05 0%,var(--bg) 100%)}
.page-head.alt{background:linear-gradient(180deg,#120a1a 0%,var(--bg) 100%)}
.page-head h1{font-size:2rem;margin-bottom:.3em}
.page-head .sub{font-size:1.02rem;color:var(--text-2);max-width:720px}
.crumbs{font-size:.84rem;color:var(--mute);margin-bottom:.9em}
.crumbs a{color:#c8c8d0}
.crumbs span{margin:0 .3em;color:var(--mute)}
.dateline{display:block;font-size:.8rem;color:var(--mute);margin-bottom:.7em;letter-spacing:.3px}

/* content */
.content{padding:2.5rem 0 3rem}
.content h2{border-left:3px solid var(--accent);padding-left:.7em;margin-top:1.7em}
.content h2:first-child{margin-top:0}
.content h3{color:var(--gold)}

/* dropcap for article */
.dropcap::first-letter{font-size:3rem;font-weight:800;float:left;line-height:.95;padding:.1em .22em .1em 0;color:var(--accent)}

/* TOC aside */
.toc{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);padding:1rem 1.3rem;border-radius:0 var(--r) var(--r) 0;margin-bottom:1.6em}
.toc strong{display:block;color:#fff;margin-bottom:.4em;font-size:.95rem;letter-spacing:.3px}
.toc ol{margin:0 0 0 1.1em;padding:0}
.toc li{color:var(--text-2);font-size:.92rem}

/* box / warn */
.box{background:#1a1a1e;border-left:3px solid var(--gold);padding:1em 1.2em;border-radius:0 8px 8px 0;margin:1.5em 0;color:var(--text-2)}
.box strong{color:var(--gold)}
.box.warn{border-left-color:var(--warn)}
.box.warn strong{color:var(--warn)}
.aside{background:var(--bg-2);border:1px dashed #3a3a44;padding:1.2em;border-radius:var(--r);margin:1.5em 0}
.aside h4{color:var(--gold);margin:0 0 .3em;font-size:1rem}
.aside p{margin:0;font-size:.92rem}

/* lists */
ul.dashed{list-style:none;padding-left:0}
ul.dashed li{position:relative;padding-left:1.3em}
ul.dashed li::before{content:'—';position:absolute;left:0;color:var(--accent)}
ul.checklist{list-style:none;padding-left:0}
ul.checklist li{position:relative;padding-left:1.6em;margin-bottom:.6em}
ul.checklist li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}
ol.steps{list-style:none;counter-reset:s;padding-left:0}
ol.steps li{counter-increment:s;position:relative;padding-left:2.4em;margin-bottom:.9em;color:var(--text-2)}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:1.6em;height:1.6em;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}
ol.steps li strong{color:#fff}

/* qa / details */
.qa details{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.9rem 1.1rem;margin-bottom:.55em}
.qa details[open]{border-color:var(--accent)}
.qa summary{cursor:pointer;color:#fff;font-weight:600;list-style:none;position:relative;padding-right:2em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:0;top:-.1em;font-size:1.4em;color:var(--gold);transition:transform .2s;line-height:1}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{margin:.6em 0 0}
.qa.compact details{padding:.7rem .9rem}

/* interlink */
.interlink{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:1.2em 1.4em;margin:2em 0}
.interlink h3{color:#fff;margin:0 0 .4em;font-size:1rem}
.interlink ul{margin:0;padding-left:1.2em}
.interlink li{color:var(--gold)}

/* footer nav (article) */
.footer-nav{display:flex;justify-content:space-between;gap:1rem;margin:2em 0 0;padding-top:1.3em;border-top:1px solid var(--line);flex-wrap:wrap}
.footer-nav a{font-weight:600;color:#fff}
.footer-nav a:hover{color:var(--accent)}

/* table */
.t-wrap{overflow-x:auto;margin:1.4em 0}
table.t-list{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;font-size:.94rem}
table.t-list th{background:#201810;color:#fff;text-align:left;padding:.75em 1em;font-weight:700;border-bottom:1px solid var(--line)}
table.t-list td{padding:.75em 1em;border-top:1px solid var(--line);color:var(--text-2)}
table.t-list tr:hover td{background:#22222a}
.ok{color:var(--ok);font-weight:600}
.warn{color:var(--warn);font-weight:600}
.bad{color:var(--bad);font-weight:600}

/* cta strip */
.cta-strip{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#2a1105 0%,#3a1a08 100%);border:1px solid #4a2810;border-radius:var(--r);padding:1.5em 1.8em;margin:2em 0;gap:1.5rem;flex-wrap:wrap}
.cta-strip h3{color:#fff;margin:0 0 .2em}
.cta-strip p{color:var(--text-2);margin:0}

/* offer cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1.3em 0 2em}
.offer{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3em 1.4em;transition:border-color .2s,transform .15s;position:relative;overflow:hidden}
.offer:hover{border-color:var(--accent);transform:translateY(-2px)}
.offer-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6em}
.chip{display:inline-block;background:#302010;color:var(--accent-2);font-size:.72rem;text-transform:uppercase;padding:.2em .55em;border-radius:4px;letter-spacing:.5px;font-weight:700}
.offer strong{font-size:1.6rem;color:var(--gold)}
.offer h3{margin:.1em 0 .3em;color:#fff;font-size:1.08rem}
.offer p{font-size:.9rem;color:var(--text-2)}
.offer ul{margin:.6em 0 0 1.1em;font-size:.86rem}

/* footer */
.site-footer{background:#07070a;border-top:1px solid var(--line);padding:2.5rem 0 1.5rem;margin-top:3rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.6rem;margin-bottom:1.8rem}
.foot-grid h4{color:#fff;font-size:.98rem;margin-bottom:.7em}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid ul li{margin-bottom:.4em}
.foot-grid ul a{color:#b4b4bc;font-size:.9rem}
.foot-grid ul a:hover{color:var(--gold)}
.foot-grid .small{font-size:.86rem;color:var(--mute);margin-top:.5em}
.brand.foot{font-size:1.05rem}
.foot-bottom{text-align:center;color:var(--mute);font-size:.82rem;padding-top:1.2em;border-top:1px solid var(--line)}

@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:1.6rem}
  .hero h1{font-size:2rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#0a0a0c;flex-direction:column;padding:.8rem;border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5)}
  nav.main.open{display:flex}
  nav.main a{padding:.75em 1em;width:100%;border-radius:6px}
  .burger{display:inline-block}
  .page-head h1{font-size:1.6rem}
  .content h2{font-size:1.3rem}
  .cta-strip{flex-direction:column;align-items:stretch;text-align:center}
}
@media(max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:2.4rem 0 1.8rem}
  .hero h1{font-size:1.7rem}
  h1{font-size:1.6rem}
  .btn{padding:.65em 1.1em;font-size:.92rem}
}