/* ================================================================
   RODFATHER EXPEDITIONS — brand stylesheet
   Aesthetic: hydrographic chart. Pale chart paper, spruce ink,
   deep-pool teal, blaze lure orange reserved for CTAs + the gauge.
   Type: Bricolage Grotesque (display) / Source Sans 3 (body)
         / IBM Plex Mono (data readouts, coordinates)
   ================================================================ */
:root{
  --chart:#E9F0EC; --ink:#10211C; --pool:#0E4A47; --pool-2:#156B66;
  --lure:#F26419; --brass:#B98A2F; --line:#C9D6CF; --white:#FDFDFB;
  --danger:#B3401E; --ok:#2E7D4F;
  --ff-display:"Bricolage Grotesque",system-ui,sans-serif;
  --ff-body:"Source Sans 3",system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;
  --maxw:1080px; --rad:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--chart);
  background-image:url("contours.svg");background-size:900px;line-height:1.55;font-size:17px}
a{color:var(--pool);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--lure);outline-offset:2px}
img{max-width:100%}

/* ---- masthead / chart plate ---- */
header.mast{background:var(--ink);color:var(--white);border-bottom:4px solid var(--lure)}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand .rf{font-family:var(--ff-display);font-weight:800;font-size:1.05rem;letter-spacing:.02em;
  border:2px solid var(--lure);color:var(--lure);padding:4px 8px;border-radius:6px}
.brand .nm{font-family:var(--ff-display);font-weight:800;font-size:1.25rem;letter-spacing:.01em}
nav.top{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav.top a{color:var(--chart);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 10px;border-radius:6px}
nav.top a:hover,nav.top a[aria-current]{background:rgba(255,255,255,.12)}
.coordstrip{background:var(--pool);color:#CFE5E0;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;
  text-align:center;padding:5px 10px;text-transform:uppercase}

/* ---- layout ---- */
main{max-width:var(--maxw);margin:0 auto;padding:28px 20px 64px}
.grid{display:grid;gap:20px}
@media(min-width:820px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:22px}
.card h3{margin-top:0;font-family:var(--ff-display)}
h1,h2{font-family:var(--ff-display);font-weight:800;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5vw,3rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.3rem,3.4vw,1.8rem);margin-top:1.6em}
.eyebrow{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pool-2)}
.mono{font-family:var(--ff-mono);font-size:.85rem}
.muted{color:#4E5E58}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ---- buttons & forms ---- */
.btn{display:inline-block;background:var(--lure);color:#fff;font-family:var(--ff-display);font-weight:800;
  border:0;border-radius:8px;padding:13px 22px;font-size:1.02rem;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.07)}
.btn.secondary{background:var(--pool)}
.btn.ghost{background:transparent;color:var(--pool);border:2px solid var(--pool)}
.btn:disabled{opacity:.55;cursor:wait}
label{display:block;font-weight:700;margin:14px 0 5px;font-size:.95rem}
input,select,textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:8px;
  font:inherit;background:var(--white);color:var(--ink)}
.formrow{display:grid;gap:12px}
@media(min-width:700px){.formrow{grid-template-columns:2fr 1fr 1fr auto;align-items:end}}
.note{font-size:.85rem;color:#4E5E58;margin-top:8px}

/* ---- hero (the tool IS the hero) ---- */
.hero{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px;margin-top:8px;
  box-shadow:0 2px 0 var(--line)}
.hero .tag{font-family:var(--ff-mono);color:var(--pool-2);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}

/* ---- bite gauge (signature element) ---- */
.gauge-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gauge{width:150px;height:88px;flex:0 0 auto}
.gauge .track{stroke:var(--line);stroke-width:14;fill:none}
.gauge .val{stroke:var(--lure);stroke-width:14;fill:none;stroke-linecap:round;transition:stroke-dashoffset .9s ease}
.gauge text{font-family:var(--ff-display);font-weight:800;fill:var(--ink)}
.gauge-label{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pool-2)}

/* ---- report output ---- */
.report{background:var(--white);border:1px solid var(--line);border-radius:var(--rad)}
.report-head{background:var(--ink);color:var(--white);padding:18px 22px;border-radius:var(--rad) var(--rad) 0 0}
.report-head .mono{color:#BFD6D0}
.report-body{padding:22px}
.report h3{font-family:var(--ff-display);border-bottom:2px solid var(--line);padding-bottom:6px;margin-top:1.4em}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.kv div{background:var(--chart);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.kv b{display:block;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pool-2)}
.kv span{font-family:var(--ff-display);font-weight:800;font-size:1.05rem}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th{background:var(--pool);color:#fff;text-align:left;padding:9px 10px;font-family:var(--ff-display);font-size:.85rem}
td{padding:9px 10px;border-bottom:1px solid var(--line)}
tr:nth-child(even) td{background:#F3F7F4}
.badge{display:inline-block;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.08em;padding:3px 9px;
  border-radius:20px;background:var(--pool);color:#fff;text-transform:uppercase}
.badge.brass{background:var(--brass)}
.badge.warn{background:var(--danger)}
.callout{border-left:5px solid var(--lure);background:#FFF4EC;padding:14px 16px;border-radius:0 8px 8px 0;margin:16px 0}
.callout.safety{border-color:var(--danger);background:#FBEFEA}
.callout.go{border-color:var(--ok);background:#EDF6F0}
.lock{filter:blur(6px);user-select:none;pointer-events:none}
.paywall{border:2px dashed var(--brass);border-radius:10px;padding:22px;text-align:center;margin-top:-70px;
  position:relative;background:rgba(253,253,251,.96)}

/* ---- ads ---- */
.adslot{min-height:100px;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;
  justify-content:center;color:#8AA097;font-family:var(--ff-mono);font-size:.72rem;margin:26px 0;background:#F3F7F4}

/* ---- product rail / shop ---- */
.prod{display:flex;flex-direction:column;gap:10px}
.prod .art{aspect-ratio:4/3;background:linear-gradient(150deg,var(--pool),var(--pool-2));border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:#CFE5E0;font-family:var(--ff-mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:12px}
.price{font-family:var(--ff-display);font-weight:800;font-size:1.2rem}
.price s{color:#8AA097;font-weight:400;font-size:.9rem}

/* ---- footer ---- */
footer{background:var(--ink);color:#BFD6D0;margin-top:40px}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:30px 20px;display:grid;gap:18px}
@media(min-width:760px){.foot-in{grid-template-columns:2fr 1fr 1fr 1fr}}
footer a{color:#E4EFEA}
footer .mono{font-size:.72rem;color:#7FA39B}
.attrib{font-size:.75rem;color:#7FA39B;line-height:1.6}
.spin{display:inline-block;width:18px;height:18px;border:3px solid #fff;border-top-color:transparent;border-radius:50%;animation:sp 1s linear infinite;vertical-align:-4px}
@keyframes sp{to{transform:rotate(360deg)}}