/* ========== Monarch Neo (Old Money × Modern) ========== */
/* Distinct look: ivory parchment bg, deep emerald, muted gold, embossed borders, glass cards */

:root{
  --ivory:#f6f2e9;
  --ink:#1b1e1c;
  --slate:#5e615c;
  --emerald:#10392b;
  --emerald-2:#0b2a21;
  --gold:#c7a968;
  --gold-2:#e6d7a7;
  --line:rgba(16,24,20,.16);
  --glow:rgba(255,255,255,.55);
  --glass:rgba(255,255,255,.62);
  --radius:18px;
  --shadow-lg:0 24px 50px rgba(16,24,20,.18);
  --shadow:0 12px 24px rgba(16,24,20,.12);
  --shadow-sm:0 4px 12px rgba(16,24,20,.10);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at -10% -10%, rgba(199,169,104,.10), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(16,57,43,.09), transparent 55%),
    var(--ivory);
  line-height:1.75; letter-spacing:.1px;
}
.container{max-width:1120px;margin:0 auto;padding:28px 20px}

/* Ornamented separators */
.hr{
  height:1px; margin:18px 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0), var(--line), rgba(0,0,0,0));
}
.hr.gold{
  height:2px; margin:22px 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0), var(--gold), rgba(0,0,0,0));
}

/* Navbar (embossed + glass) */
.navbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; margin:12px 0 26px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.62));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  border-top:4px solid var(--gold);
}
.brand{
  display:flex; align-items:baseline; gap:10px;
}
.brand .title{
  font-family:"Merriweather", Georgia, Times, serif;
  font-weight:900; letter-spacing:.2px; color:var(--emerald);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.brand .tag{font-size:12px; color:var(--slate); font-weight:700}
.nav a{
  display:inline-block; margin-left:14px; padding:8px 12px;
  text-decoration:none; color:var(--emerald);
  border:1px solid transparent; border-radius:12px;
  transition:all .16s ease;
}
.nav a:hover{border-color:var(--gold); background:rgba(199,169,104,.12)}
.nav a.primary{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(199,169,104,.20), rgba(199,169,104,.12));
}

/* Crest-like hero (with gold edge + subtle crest bg) */
.hero{
  position:relative; overflow:hidden;
  padding:28px; border-radius:var(--radius);
  border:1px solid var(--line); border-left:6px solid var(--gold);
  background:
    radial-gradient(600px 400px at 15% -10%, rgba(199,169,104,.10), transparent 60%),
    radial-gradient(700px 450px at 90% -10%, rgba(16,57,43,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
}
.breadcrumbs{font-size:13px; color:var(--slate); margin-bottom:6px}
h1.display,h2.display{
  font-family:"Merriweather", Georgia, Times, serif;
  color:var(--emerald); letter-spacing:.2px;
}
.hero h1.display{font-size:34px; margin:0 0 6px}
.hero .sub{color:var(--slate); font-size:15px}
.pill{
  display:inline-block; margin-top:10px; font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--emerald), #1d5c48);
  border:1px solid rgba(16,57,43,.25); padding:6px 12px; border-radius:999px;
}

/* Grid + Cards */
.grid{display:grid; gap:22px}
@media(min-width:900px){.cols-2{grid-template-columns:2fr 1fr}}

.card{
  position:relative;
  padding:20px; border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, var(--glass), rgba(255,255,255,.54));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow-sm);
}
.card.emboss{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.04),
    var(--shadow-sm);
}
.card.double{
  border:0; padding:0; overflow:hidden;
  background:transparent; box-shadow:none;
}
.card.double .inner{
  padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border:1px solid var(--line); border-radius:calc(var(--radius) - 6px);
  margin:10px; box-shadow:var(--shadow-sm);
}
.ribbon{
  position:absolute; top:12px; left:-6px; padding:6px 12px 6px 18px;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#2b2109; font-weight:900; font-size:12px; letter-spacing:.04em;
  border-top-right-radius:10px; border-bottom-right-radius:10px;
  box-shadow:0 6px 14px rgba(39,30,8,.18);
}

/* Lists */
.list{list-style:none; margin:8px 0; padding:0}
.list li{position:relative; padding-left:26px; margin:8px 0}
.list li:before{
  content:"◆"; position:absolute; left:0; top:0; line-height:1.2; font-weight:900;
  background:linear-gradient(135deg, var(--gold), #efdfb2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Badges / chips */
.badge{
  display:inline-block; border:1px solid var(--line);
  padding:4px 10px; border-radius:999px; font-size:12px;
  background:rgba(255,255,255,.9)
}
.badge.gold{
  border-color:rgba(199,169,104,.5);
  background:linear-gradient(180deg, rgba(199,169,104,.22), rgba(199,169,104,.10));
  font-weight:800;
}

/* Footer */
footer{
  margin-top:28px; padding:16px; text-align:center; font-size:14px; color:var(--slate);
  border-top:1px solid var(--line)
}
footer a{color:var(--emerald); text-decoration:none}
footer a:hover{text-decoration:underline}

/* Accents */
blockquote{
  margin:12px 0; padding:14px 16px; border-left:4px solid var(--emerald);
  background:rgba(16,57,43,.06); border-radius:12px; color:#223b31;
}
.kicker{font-size:12px; color:var(--slate); letter-spacing:.18em}
.lede{font-size:18px; color:#2a2e2b}
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  text-decoration:none; color:var(--emerald); transition:all .16s ease;
}
.btn:hover{border-color:var(--gold); background:rgba(199,169,104,.10)}