/* Mobile-first rustic theme (red accent) */

:root{
  --bg: #fbf7f0;         /* warm parchment */
  --panel: #ffffff;
  --ink: #1f1b16;        /* dark earthy */
  --muted: #6b5f55;      /* warm gray */
  --red: #8b1e1e;        /* barn red */
  --red2:#b83a3a;        /* lighter red for hovers */
  --line:#e7dfd3;        /* soft divider */
  --shadow: 0 10px 30px rgba(31,27,22,.08);
  --radius: 18px;
  --max: 1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 300px at 20% -10%, rgba(139,30,30,.12), transparent 55%),
    radial-gradient(700px 260px at 90% 0%, rgba(184,58,58,.08), transparent 50%),
    var(--bg);
  line-height:1.45;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 18px;
}

/* Rustic top band */
.topband{
  background: linear-gradient(90deg, rgba(139,30,30,.95), rgba(139,30,30,.70));
  color:#fff;
}
.topband .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Brand + logo */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand-badge{
  width:42px;
  height:42px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.5px;
}
.brand h1{
  margin:0;
  font-size: 1.05rem;
  line-height:1.1;
}
.brand small{
  display:block;
  opacity:.9;
  font-size:.78rem;
  font-weight:500;
}

.site-logo{
  height: 44px;         /* mobile */
  width: auto;
  max-width: 100%;
  display:block;
}

/* Mobile nav button */
.nav-toggle{
  appearance:none;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.14);
  color:#fff;
  padding:10px 12px;
  border-radius: 14px;
  font-weight:700;
}

/* Nav (mobile default visible) */
.nav{
  background: rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.18);
}
.nav .container{
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight:700;
  letter-spacing:.2px;
}
.nav a:hover{ background: rgba(255,255,255,.12); }
.nav a.active{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
}
.nav-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* OPTIONAL: Make mobile menu actually collapse (recommended)
   If you want the Menu button to show/hide the nav on phones, keep this ON.
   If you prefer nav always visible on mobile, delete this block. */
#nav{ display:none; }
#nav.open{ display:block; }

/* Desktop nav in top-right */
.desk-nav{
  display:none;
  align-items:center;
  gap:10px;
}
.desk-nav a{
  color:#fff;
  font-weight:800;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.desk-nav a:hover{ background: rgba(255,255,255,.14); }
.desk-nav a.active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

/* Hero */
.hero{ padding: 22px 0 10px; }

.hero-card{
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.hero-media{
  min-height: 210px;
  background:
    linear-gradient(180deg, rgba(31,27,22,.05), rgba(31,27,22,.25)),
    url("/images/hero.jpg") center/cover no-repeat;
}
.hero-body{ padding: 16px; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--red);
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  font-size: .78rem;
}
.kicker::before{
  content:"";
  width:10px;height:10px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(139,30,30,.12);
}
.hero h2{
  margin: 10px 0 8px;
  font-size: 1.35rem;
  line-height:1.15;
}
.hero p{
  margin: 0 0 14px;
  color: var(--muted);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight:800;
  border: 1px solid transparent;
  min-height: 44px;
}
.btn-primary{
  background: var(--red);
  color:#fff;
  box-shadow: 0 10px 18px rgba(139,30,30,.18);
}
.btn-primary:hover{ background: var(--red2); }

.btn-ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: rgba(139,30,30,.35); }

/* Sections + cards */
.section{ padding: 10px 0 22px; }

.section-title{
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing:.2px;
}
.section-sub{
  margin: -2px 0 14px;
  color: var(--muted);
  font-size: .98rem;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.card h3{
  margin: 0 0 8px;
  font-size: 1.02rem;
}
.meta{
  color: var(--muted);
  font-size: .92rem;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(139,30,30,.10);
  border: 1px solid rgba(139,30,30,.18);
  color: var(--red);
  font-weight:900;
  font-size:.82rem;
}

/* Rustic “paper” lists */
.list{
  margin: 10px 0 0;
  padding: 0;
  list-style:none;
  border-top: 1px dashed rgba(107,95,85,.35);
}
.list li{
  padding: 12px 0;
  border-bottom: 1px dashed rgba(107,95,85,.35);
}
.list li strong{
  display:block;
  margin-bottom: 2px;
  color: var(--red);
  font-size: 1.05rem;
  letter-spacing: .3px;
}

/* Footer */
.footer{
  margin-top: 26px;
  background: #191512;
  color: rgba(255,255,255,.86);
}
.footer .container{ padding: 20px 18px; }
.footer a{ color: #fff; }
.footer small{ color: rgba(255,255,255,.62); }

.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.footer .pill{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* Footer links (Quick Links) */
.footer-links ul{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:8px;
}

/* Desktop enhancements (all in one place) */
@media (min-width: 860px){
  /* header */
  .desk-nav{ display:flex; }
  .nav-toggle{ display:none; }
  .nav{ display:none; } /* hides the strip nav on desktop */
  .site-logo{ height: 58px; }

  /* layout */
  .hero-card{ display:grid; grid-template-columns: 1.2fr 1fr; }
  .hero-media{ min-height: 320px; }
  .hero-body{ padding: 22px; }
  .hero h2{ font-size: 1.85rem; }
  .grid{ grid-template-columns: repeat(3, 1fr); }

  .footer-grid{ grid-template-columns: 2fr 1fr 1fr; align-items:start; }

  /* Quick links aligned right */
  .footer-links{ text-align:right; justify-self:end; }
  .footer-links ul{ justify-items:end; }

  /* If you ever show a grid nav on desktop, make it 3 cols (you have 3 links) */
  .nav-grid{ grid-template-columns: repeat(3, 1fr); }
}
/* Center external market widgets */
.market-card{
  overflow-x: auto;
  justify-content: center;
}

.market-center{
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Safety: center any tables the widget injects */
.market-center table{
  margin-left: auto;
  margin-right: auto;
}