/* Ruby Reckless — site design v2 · 2026-10-26
   Palette: black #14100E · coal #221812 · ruby #C8102E · ruby-dark #8F0A20 ·
   ruby-lt #FF5A68 (display accents on dark only) · gold #C9A227 (rules/borders only) ·
   gold-lt #E9CD7A (accents on dark only) · cream #FFF6E9 · paper #FFFDF8 ·
   ink #221A14 · ink-soft #57493C. Leopard = thin accent strips only.
   All critical rules are scoped under body.ruby-site so their specificity
   beats the platform theme layer (/pocketpapi-theme.css). */
:root{--black:#14100e;--coal:#221812;--ruby:#c8102e;--ruby-dark:#8f0a20;--ruby-lt:#ff5a68;--gold:#c9a227;--gold-lt:#e9cd7a;--cream:#fff6e9;--paper:#fffdf8;--ink:#221a14;--ink-soft:#57493c;--line:#e3d3b8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html[data-site-theme="1"] body.ruby-site{margin:0;background:var(--black);color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.65}
body.ruby-site a{color:var(--ruby-dark);text-underline-offset:3px}
body.ruby-site ::selection{background:var(--ruby);color:#fff}

/* ---------- header ---------- */
body.ruby-site header.site{background:#0d0a09;border-bottom:3px solid var(--gold);padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;position:relative;z-index:5}
body.ruby-site header.site img.logo{height:64px;width:auto!important;max-width:62vw}
body.ruby-site nav.main{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
body.ruby-site nav.main a{color:var(--cream);text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-weight:bold;letter-spacing:.08em;text-transform:uppercase;font-size:14px;padding:12px 15px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
body.ruby-site nav.main a:hover{background:#2b1114;color:#fff}
body.ruby-site nav.main a.active{background:var(--ruby);color:#fff}
.leo-strip{height:10px;background-color:#c99e4e;background-image:radial-gradient(ellipse 14px 6px at 18px 5px,rgba(74,46,14,.85) 58%,transparent 62%),radial-gradient(ellipse 10px 5px at 52px 3px,rgba(74,46,14,.8) 58%,transparent 62%),radial-gradient(ellipse 16px 6px at 84px 6px,rgba(94,60,18,.85) 58%,transparent 62%),radial-gradient(ellipse 9px 4px at 116px 4px,rgba(74,46,14,.75) 58%,transparent 62%);background-size:132px 10px;background-repeat:repeat-x}

/* ---------- type ---------- */
body.ruby-site h1{font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:clamp(36px,6vw,60px);line-height:1.04;margin:16px 0 10px;color:#fff;letter-spacing:.01em}
body.ruby-site h1 .ruby{color:var(--ruby-lt)}
body.ruby-site h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(27px,4vw,38px);line-height:1.15;color:var(--ink);margin:38px 0 14px}
body.ruby-site h2 .ruby{color:var(--ruby-dark)}
body.ruby-site main h2{border-bottom:3px solid var(--gold);display:inline-block;padding-bottom:7px}
body.ruby-site main h2.center{display:block;text-align:center;border-bottom:none}
body.ruby-site main h2.center::after{content:"";display:block;width:84px;height:3px;background:var(--gold);margin:10px auto 0}
.kicker{font-family:Arial,Helvetica,sans-serif;font-weight:bold;letter-spacing:.34em;text-transform:uppercase;font-size:12px;color:var(--gold-lt);margin:0 0 6px;text-align:center}
.tagline{font-size:clamp(19px,3vw,24px);font-style:italic;color:var(--cream)}
.lede{font-size:19px;line-height:1.7;max-width:780px;color:var(--ink)}
.center{text-align:center}
.center .lede,main .center.lede{margin-left:auto;margin-right:auto}

/* ---------- hero + page heads (dark) ---------- */
.hero{background:radial-gradient(ellipse 85% 55% at 50% -5%,#43101c 0%,var(--black) 62%);max-width:none;margin:0;padding:54px 20px 62px;text-align:center;color:var(--cream)}
.hero .bio{color:var(--cream)}
.page-head{background:radial-gradient(ellipse 85% 60% at 50% -10%,#43101c 0%,var(--black) 65%);padding:46px 20px 44px;text-align:center;color:var(--cream)}
.page-head h1{margin-top:6px}
.page-head .lede{color:var(--cream);margin-left:auto;margin-right:auto}
.page-head .status{color:var(--gold-lt);border-color:var(--gold);background:transparent}

/* ---------- image integrity: aspect is explicit, never distort ---------- */
body.ruby-site img{max-width:100%}
body.ruby-site .hero img.photo{width:min(400px,86vw);aspect-ratio:2/3;height:auto!important;object-fit:cover;object-position:50% 20%;border-radius:20px;border:3px solid var(--gold);outline:1px solid #6e5518;box-shadow:0 24px 60px rgba(0,0,0,.65);display:block;margin:0 auto}
body.ruby-site .hero img.lockup{width:min(500px,88vw);aspect-ratio:1000/689;height:auto!important;display:block;margin:16px auto 0;filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))}
body.ruby-site .card img{width:100%;aspect-ratio:1/1;height:auto!important;object-fit:cover;border-radius:12px;background:#000}
body.ruby-site .card.product img{aspect-ratio:4/5;object-position:50% 16%}

/* ---------- content (light) ---------- */
body.ruby-site main{display:block;background:var(--cream);color:var(--ink);max-width:none;margin:0;padding:52px 20px 66px}
body.ruby-site main>*{max-width:1100px;margin-left:auto;margin-right:auto}
.bio{max-width:640px;margin:14px auto;font-size:18px;line-height:1.6}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:28px 0 4px}
body.ruby-site a.btn,body.ruby-site .btn{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:15px 32px;min-height:52px;border-radius:999px;font-size:15px}
body.ruby-site a.btn.btn-primary{background:var(--ruby)!important;color:#fff!important;border:2px solid var(--ruby)!important}
body.ruby-site a.btn.btn-primary:hover{background:var(--ruby-dark)!important;border-color:var(--ruby-dark)!important}
body.ruby-site a.btn.btn-gold{background:transparent!important;color:var(--gold-lt)!important;border:2px solid var(--gold)!important}
body.ruby-site a.btn.btn-gold:hover{background:var(--gold)!important;color:#14100e!important}
body.ruby-site main a.btn.btn-gold{background:transparent!important;color:var(--ruby-dark)!important;border:2px solid var(--ruby-dark)!important}
body.ruby-site main a.btn.btn-gold:hover{background:var(--ruby)!important;color:#fff!important;border-color:var(--ruby)!important}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin:26px 0}
.card{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--ruby);border-radius:16px;padding:20px;text-align:center;box-shadow:0 12px 30px rgba(34,26,20,.10)}
.card h3{color:var(--ink);margin:12px 0 6px;font-size:21px}
.card p{color:var(--ink-soft);line-height:1.6;font-size:16.5px}
.status{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase;color:var(--ruby-dark);border:1.5px solid var(--ruby);background:#fdeef0;border-radius:999px;padding:6px 13px}
ul.facts{line-height:1.75;font-size:17px;color:var(--ink)}
ul.facts strong{color:var(--ruby-dark)}
.disclosure{background:#2a1216;border:2px solid var(--gold);border-radius:16px;padding:26px;max-width:840px;margin:30px auto;color:var(--cream)}
body.ruby-site .disclosure h2{color:#fff;border-bottom:none;margin-top:0}
.disclosure p{color:var(--cream);line-height:1.7}
.disclosure a{color:var(--gold-lt)}
.linklist{max-width:580px;margin:26px auto;display:grid;gap:14px}
.linkbtn{display:block;text-align:center;background:var(--paper);border:2px solid var(--ruby);color:var(--ink);text-decoration:none;padding:17px 18px;border-radius:999px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;letter-spacing:.04em;font-size:16.5px}
.linkbtn:hover{background:var(--ruby);color:#fff}
.linkbtn.soon{border-color:#b9a888;color:var(--ink-soft);background:#f7ecd9}
.linkbtn.soon:hover{background:#f7ecd9;color:var(--ink-soft)}

/* ---------- footer ---------- */
body.ruby-site footer.site{border-top:3px solid var(--gold);background:#0d0a09;padding:28px 20px 32px;text-align:center;color:#d9cdb8;font-size:15px;line-height:1.65}
body.ruby-site footer.site nav{display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
body.ruby-site footer.site nav a{color:var(--cream);text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase;padding:8px 4px}

/* ---------- mobile ---------- */
@media (max-width:640px){
  body.ruby-site header.site{justify-content:center;padding:10px 12px}
  body.ruby-site header.site img.logo{height:52px}
  body.ruby-site nav.main{margin-left:0;justify-content:center}
  body.ruby-site nav.main a{padding:12px 12px;font-size:13px}
  .hero{padding:38px 16px 46px}
  .page-head{padding:36px 16px 34px}
  body.ruby-site main{padding:40px 16px 52px}
  .disclosure{padding:20px}
  body.ruby-site a.btn,body.ruby-site .btn{padding:15px 26px}
}