:root{
  /* Field Manual palette */
  --bg:#070a08;
  --surface:#0f1410;
  --surface2:#0b100c;
  --text:#e8eef6;
  --muted:#b8c2b4;
  --muted2:#8da08e;
  --border:#233126;
  --border2:#334a36;
  --accent:#5f7d3b;      /* OD green */
  --accentHover:#7aa24b;
  --link:#c9e27b;        /* lichen */
  --warn:#d9a441;        /* brass */
  --radius:14px;
  --shadow:0 10px 35px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1200px 800px at 18% 0%, rgba(95,125,59,.18), transparent 58%),
    radial-gradient(1000px 700px at 92% 12%, rgba(217,164,65,.10), transparent 62%),
    /* subtle grid/texture */
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 34px),
    var(--bg);
  color:var(--text);
}
a{color:var(--link);text-decoration:none}
a:hover{color:#e6f3b6}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:24px}
.wrap{max-width:1120px;margin:0 auto;padding:24px} /* legacy */

/* Header/Nav */
.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(135%) blur(10px);
  background:rgba(7,10,8,.78);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.4px;text-transform:uppercase;font-size:13px}
.brand-badge{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--warn),var(--accent))}
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:750;letter-spacing:.2px;padding:10px 10px;border-radius:10px;border:1px solid transparent}
.nav a:hover{color:var(--text);border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.03)}

/* Type */
.h1{font-size:40px;line-height:1.08;margin:0 0 10px;font-weight:950;letter-spacing:-.2px}
.lede{color:var(--muted);line-height:1.6;max-width:76ch}
.kicker{display:inline-flex;gap:8px;align-items:center;color:var(--muted2);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:16px}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,20,16,.96), rgba(15,20,16,.86));
  padding:16px;
  box-shadow:none;
}
.card:hover{border-color:rgba(201,226,123,.45);transform:translateY(-1px);transition:120ms ease}
.card h3{margin:0 0 8px;font-size:18px;font-weight:950}
.card p{margin:0;color:var(--muted);line-height:1.55}

.badge{display:inline-block;font-size:12px;color:var(--muted);border:1px solid var(--border2);border-radius:999px;padding:5px 10px;margin-bottom:10px;background:rgba(255,255,255,.02)}

.list{margin:10px 0 0 18px;color:var(--muted);line-height:1.6}

.box{border:1px solid var(--border2);border-radius:var(--radius);padding:14px;background:rgba(95,125,59,.10);margin-top:14px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:12px;border:1px solid var(--border2);
  color:var(--text);text-decoration:none;font-weight:900;letter-spacing:.2px;
  background:rgba(201,226,123,.06);
}
.btn:hover{border-color:rgba(201,226,123,.55);background:rgba(201,226,123,.09)}
.btn.primary{background:linear-gradient(180deg, rgba(95,125,59,.42), rgba(95,125,59,.20));border-color:rgba(95,125,59,.75)}
.btn.primary:hover{border-color:rgba(122,162,75,.95)}

.tile{width:100%;height:150px;object-fit:cover;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.02);margin-bottom:10px}
.icon{width:18px;height:18px;display:inline-block;vertical-align:-3px}

.footer{color:var(--muted2);font-size:13px;line-height:1.55;margin-top:24px;border-top:1px solid var(--border);padding-top:16px}
.small{color:var(--muted2);font-size:13px;line-height:1.55}
hr{border:0;border-top:1px solid var(--border);margin:18px 0}
code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:8px}

img{max-width:100%;height:auto}

@media (max-width:640px){
  .h1{font-size:32px}
  .header-inner{padding:12px 16px}
  .container,.wrap{padding:18px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .card:hover{transform:none;transition:none}
}


.hero-banner{width:100%;height:auto;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.02);box-shadow:var(--shadow);margin:14px 0 10px}


/* --- Legacy picks page helpers (for older pages that use .h/.p/.k/.thumb) --- */
.thumb{width:44px;height:44px;display:block;margin:0 0 10px;opacity:.95}
.h{font-weight:950;font-size:18px;margin:0 0 6px}
.p{margin:0;color:var(--muted);line-height:1.6}
.k{font-weight:900;color:var(--text);margin-top:10px;letter-spacing:.2px}

/* Related picks block */
.related{margin-top:18px}
.related .grid{margin-top:12px}
.related a{display:block}