
:root{
  --bg: #fffaf0;           /* parchment */
  --surface:#ffffff;
  --text:#2c2a28;
  --muted:#6b5f57;
  --brand:#7f1d1d;         /* deep crimson */
  --brand-2:#d4af37;       /* light gold */
  --ring:#b0852b;
  --card:#ffffff;
  --border:#e8e0cf;
  --shadow: 0 8px 24px rgba(123,88,49,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(107,70,193,.06), transparent),
    radial-gradient(1000px 800px at 110% 0%, rgba(14,165,233,.06), transparent),
    var(--bg);
}
a{color:#2151b0;text-decoration:none}
a:hover{color:#13336f}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border)
}
.nav{display:flex; align-items:center; gap:12px}
.nav img{height:36px}
.spacer{flex:1}
.nav a{padding:10px 14px;border-radius:10px;color:#4b3a2a}
.nav a.active,.nav a:hover{background:linear-gradient(90deg, rgba(107,70,193,.12), rgba(14,165,233,.10));}
.hero{padding:80px 0 32px}
h1{font-family: Georgia, 'Times New Roman', serif; font-size:42px;line-height:1.1;margin:0 0 6px}
h2{font-family: Georgia, 'Times New Roman', serif; font-size:28px;margin:30px 0 10px}
.lead{color:var(--muted);max-width:780px}
.grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:28px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(14,165,233,.12);border:1px solid var(--border);font-size:12px;color:#0f4a63}
.kicker{letter-spacing:.12em;color:var(--brand-2);text-transform:uppercase;font-weight:700;font-size:12px}
.footer{padding:32px 0;color:#6b7280;border-top:1px solid var(--border);margin-top:48px;background:#f9fbfd}
.cta{
  display:inline-block;margin-top:14px;padding:12px 16px;border-radius:12px;
  background: var(--brand);color:white;font-weight:700;box-shadow:var(--shadow);border:0
}
.input, textarea, select{
  width:100%;padding:12px 14px;background:#fbfdff;color:var(--text);
  border:1px solid var(--border);border-radius:12px
}
label{display:block;margin:12px 0 6px}
form .row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:700px){form .row{grid-template-columns:1fr}}
.table{width:100%;border-collapse:separate;border-spacing:0 12px}
.table th,.table td{padding:12px 14px;background:#ffffff;border:1px solid var(--border)}
.table th{color:#475569;text-align:left;background:#f5f7fb}
.table tr td:first-child,.table tr th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child,.table tr th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.note{font-size:14px;color:var(--muted)}
.calendar-embed{aspect-ratio:16/9;width:100%;border:0;border-radius:14px;box-shadow:var(--shadow)}
.small{font-size:14px;color:#6b7280}
.footer a{color:#425b8a}

.cta:hover{background: var(--brand-2); color:#4b2a1b}

.card ul{margin:8px 0 0 18px}
.card li{margin:6px 0}

.container{padding-bottom:32px}

.hero-image{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow);margin:8px 0 18px}

.hero-image-divider{height:1px;background:linear-gradient(90deg, rgba(212,175,55,.0), rgba(212,175,55,.5), rgba(212,175,55,.0));margin:6px 0 18px;border:0}


/* Responsive foundations */
:root{
  --mx: clamp(16px, 3vw, 28px);
}

/* Fluid typography */
h1{font-family: Georgia,'Times New Roman',serif; font-size:clamp(28px, 3.5vw, 42px); line-height:1.15; margin:0 0 8px}
h2{font-family: Georgia,'Times New Roman',serif; font-size:clamp(20px, 2.2vw, 28px); line-height:1.2}
.lead{font-size:clamp(15px, 1.7vw, 18px)}

/* Container padding adjusts on mobile */
.container{max-width:1100px; margin:0 auto; padding:var(--mx)}

/* Mobile nav */
.nav{display:flex; align-items:center; gap:12px}
.nav img{height:34px}
.menu-toggle{margin-left:auto; display:none; border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:10px}
.menu-toggle:focus{outline:2px solid var(--ring)}
.nav-links{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.nav a{padding:12px 14px; border-radius:10px}

/* Cards/images */
.hero-image{display:block; width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow); margin:8px 0 14px}
.grid{display:grid; gap:28px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); margin:28px 0}
.card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:clamp(14px, 3vw, 22px); box-shadow:var(--shadow)}

/* Tables on mobile */
.table{width:100%; border-collapse:separate; border-spacing:0 10px; font-size:clamp(14px, 1.6vw, 16px)}

/* Inputs tap targets */
.input, textarea, select, .cta, .menu-toggle{margin-left:auto; display:none; border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:10px}

/* Footer spacing */
.footer{padding: clamp(18px, 3vw, 32px) 0}

/* Reduce animation if user prefers */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Small screens */

  .nav-links{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  .nav-links.open{display:flex}
  .nav a{display:block; width:100%;}
  .header{position:sticky; top:0}
}

/* Extra small screens */
@media (max-width: 480px){
  .nav img{height:30px}
  .cta{width:100%; text-align:center}
}

@media (max-width: 820px){
  .menu-toggle{display:block}
  .nav-links{display:none; width:100%; flex-direction:column; align-items:stretch; gap:6px; padding:10px 0}
  .nav-links.open{display:flex}
  .nav a{display:block; width:100%}
}


/* --- Navbar polish --- */
.header{position:sticky; top:0; z-index:50; background:#ffffffcc; backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border)}
.navbar{display:flex; align-items:center; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:40px; display:block}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:6px}
.nav-links a{
  padding:10px 14px; border-radius:12px; position:relative; color:#4b3a2a;
}
.nav-links a:hover{background:rgba(212,175,55,.12)}
.nav-links a.active::after{
  content:''; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:linear-gradient(90deg, rgba(212,175,55,.2), rgba(212,175,55,1), rgba(212,175,55,.2));
  border-radius:2px;
}
.menu-toggle{margin-left:12px; display:none; border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:10px}
.menu-toggle:focus{outline:2px solid var(--ring)}

/* Mobile breakpoint */
@media (max-width: 820px){
  .menu-toggle{display:block}
  .nav-links{display:none; width:100%; flex-direction:column; align-items:stretch; gap:6px; padding:10px 0; margin-left:0}
  .nav-links.open{display:flex}
  .nav-links a{display:block; width:100%}
}
