/* River Rat Guide — shared site styles.
   Family-consistent with smithlink.llc (Cormorant Garamond / Inter / Spline Sans Mono, dark + refined)
   but with River Rat's own identity: deep river-navy + a warm gold accent. Static, no build step. */

:root{
  --bg:#132836;
  --bg-2:#1a3241;
  --bg-3:#1f3a4f;          /* brandNavy */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --ink:#dbe4ec;           /* body text */
  --ink-dim:#9fb0bd;
  --ink-faint:#6f8290;
  --hi:#f0f5f9;            /* headings */
  --gold:#c8a45c;          /* brandGold */
  --gold-dim:#a9812f;
  --gold-soft:#e0c489;
  --teal:#2a7a8c;          /* brandTeal */
  --amber:#c87820;         /* mapLockAmber */
  --gold-grad:linear-gradient(145deg,#e6c987 0%,#c8a45c 45%,#a9812f 72%,#e0c489 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#26506b;color:#fff}
a{color:var(--gold-soft);text-decoration:none;transition:color .16s}
a:hover{color:#f2dda6}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 55% at 50% -8%,rgba(212,168,75,.06),transparent 60%),
    radial-gradient(90% 55% at 50% 120%,rgba(0,0,0,.55),transparent 70%);
}
.wrap{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:0 26px}
.gold-rule{height:1px;border:0;background:var(--gold-grad);opacity:.55;margin:0}

/* header */
header{padding:24px 0}
.bar{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:21px;letter-spacing:.02em;color:var(--hi)}
.brand .rr{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(155deg,#1b344a,#0c1a27);
  border:1px solid var(--line-2);font-size:17px}
.brand .rr span{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
nav.top{display:flex;gap:26px;font-size:13.5px;font-weight:500;color:var(--ink-dim)}
nav.top a{color:var(--ink-dim)}
nav.top a:hover{color:var(--hi)}
@media(max-width:600px){nav.top{gap:18px;font-size:12.5px}}

/* hero (landing) */
.hero{padding:64px 0 52px;text-align:center}
.crest{width:104px;height:104px;margin:0 auto 30px;display:block;border-radius:24px;
  box-shadow:0 8px 26px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.eyebrow{font-family:'Spline Sans Mono',monospace;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:20px}
h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.3rem,6vw,3.8rem);
  line-height:1.08;color:var(--hi)}
h1 .thin{color:var(--ink-dim);font-weight:400}
.tagline{margin:26px auto 0;max-width:44ch;font-size:clamp(1rem,2.2vw,1.14rem);color:var(--ink-dim)}
.cta-row{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{font-family:'Spline Sans Mono',monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 22px;border-radius:9px;border:1px solid var(--line-2);color:var(--ink);transition:all .18s}
.btn:hover{border-color:var(--gold);color:var(--hi)}
.btn.primary{background:var(--gold-grad);color:#241a06;border:0;font-weight:600}
.btn.primary:hover{filter:brightness(1.06);color:#241a06}
.pillars{display:flex;justify-content:center;flex-wrap:wrap;margin-top:40px;
  font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.pillars span{padding:0 18px;position:relative}
.pillars span+span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--line-2)}

/* feature grid (landing) */
section{padding:52px 0}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--bg-3);border:1px solid var(--line);border-radius:11px;padding:24px}
.feat h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.28rem;color:var(--hi);margin-bottom:8px}
.feat p{color:var(--ink-dim);font-size:14.5px}
@media(max-width:720px){.features{grid-template-columns:1fr}}

/* document pages (privacy / terms / support) */
.doc{padding:46px 0 20px;max-width:760px}
.doc .eyebrow{text-align:left}
.doc h1{font-size:clamp(2rem,5vw,2.9rem);text-align:left;margin-bottom:10px}
.doc .updated{font-family:'Spline Sans Mono',monospace;font-size:12px;color:var(--ink-faint);margin-bottom:8px}
.doc h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.6rem;color:var(--hi);
  margin:38px 0 12px;letter-spacing:.01em}
.doc h3{font-size:1.02rem;font-weight:600;color:var(--hi);margin:22px 0 8px}
.doc p{color:var(--ink);font-size:15.5px;line-height:1.72;margin:12px 0}
.doc ul{margin:12px 0 12px 4px;padding-left:20px}
.doc li{color:var(--ink);font-size:15.5px;line-height:1.7;margin:7px 0}
.doc strong{color:var(--hi)}
.doc .lead{font-size:16.5px;color:var(--ink-dim)}
.callout{background:var(--bg-2);border:1px solid var(--line-2);border-left:3px solid var(--gold);
  border-radius:8px;padding:16px 20px;margin:20px 0}
.callout p{margin:6px 0}

/* footer */
footer{padding:44px 0 54px;margin-top:30px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-faint)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot nav a{color:var(--ink-dim)}
.foot nav a:hover{color:var(--hi)}
.foot .co{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.04em}

/* ---- brand mark (app icon + wordmark text) + coming-soon badge ---- */
.brand{gap:11px}
.brand img.icon{width:30px;height:30px;border-radius:8px;display:block;box-shadow:0 2px 8px rgba(0,0,0,.45)}
@media(max-width:600px){.brand img.icon{width:26px;height:26px}.brand{font-size:18px}}

.hero-icon{width:104px;height:104px;border-radius:24px;margin:0 auto 22px;display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
.wordmark{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(2.5rem,7.5vw,4.4rem);line-height:1.04;letter-spacing:.01em;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.feat h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.soon{font-family:'Spline Sans Mono',monospace;font-size:8.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);border:1px solid rgba(200,120,32,.45);
  border-radius:100px;padding:2px 8px;white-space:nowrap;line-height:1}
.feat.pending{opacity:.9}