:root {
  --bg: #f7f1e7;
  --paper: #fffaf2;
  --ink: #2b2019;
  --muted: #6b584b;
  --line: #dcc9b5;
  --accent: #855d36;
  --accent-dark: #5a3c22;
  --gold: #bb8b47;
  --shadow: 0 18px 40px rgba(73, 45, 24, 0.10);
  --radius: 22px;
  --max: 1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background:linear-gradient(180deg,#f9f4ec 0%, #f5ede1 100%);
  color:var(--ink);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.topbar{
  border-bottom:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(31,19,11,.95), rgba(31,19,11,.82));
  color:#fff4e5;
  position:sticky; top:0; z-index:20; backdrop-filter: blur(10px);
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.85rem}
.brand-mark{
  width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;font-weight:800;letter-spacing:.12em;background:rgba(255,255,255,.06)
}
.brand small{display:block;color:#dcc9b5;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.brand strong{display:block;font-size:1rem;letter-spacing:.03em}
nav{display:flex;flex-wrap:wrap;gap:.75rem}
nav a{padding:.65rem .9rem;border-radius:999px;color:#f8ead8;font-size:.95rem}
nav a:hover, nav a.active{background:rgba(255,255,255,.10)}
.hero{
  background:
  radial-gradient(circle at top right, rgba(212,159,86,.35), transparent 28%),
  linear-gradient(135deg, rgba(37,22,12,.96), rgba(73,45,24,.9)),
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="700" viewBox="0 0 1600 700"><g fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="2"><path d="M0 540 C160 500 240 480 400 500 S640 560 800 520 1120 430 1300 460 1500 520 1600 500"/><path d="M0 590 C120 560 230 520 370 550 520 585 670 635 830 590 970 550 1120 500 1280 520 1430 540 1520 580 1600 570"/></g></svg>') center/cover;
  color:#fff5ea;
}
.hero .container{padding:5.5rem 0 4rem}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:#f3ddbf}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:2rem;align-items:end;margin-top:1.5rem}
.hero h1{font-family: Georgia, "Times New Roman", serif;font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.02;margin:.7rem 0 1rem;max-width:13ch}
.hero p{font-size:1.08rem;color:#f0deca;max-width:62ch}
.hero-card{
  background:rgba(255,248,238,.08); border:1px solid rgba(255,255,255,.13); border-radius:var(--radius);
  padding:1.3rem; box-shadow: var(--shadow);
}
.hero-card h2{margin:.1rem 0 .6rem;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:#f1d1a5}
.hero-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.hero-card li{padding-bottom:.8rem;border-bottom:1px dashed rgba(255,255,255,.15)}
.hero-card li:last-child{border-bottom:none;padding-bottom:0}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.2rem;border-radius:999px;font-weight:700}
.btn-primary{background:linear-gradient(180deg, #d3a15c, #b17a3f);color:#2e1d11;box-shadow:0 12px 24px rgba(177,122,63,.25)}
.btn-secondary{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff6ec}
main section{padding:4rem 0}
.kicker{font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:800;margin-bottom:.8rem}
.section-title{font-family: Georgia, "Times New Roman", serif;font-size:clamp(2rem, 4vw, 3.1rem);line-height:1.08;margin:0 0 1rem}
.lead{font-size:1.08rem;color:var(--muted);max-width:70ch}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:start}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.5rem}
.card, .panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.45rem;
}
.card h3,.panel h3{margin:.1rem 0 .7rem;font-size:1.12rem}
.card p,.panel p{margin:0;color:var(--muted)}
.ribbon{
  display:inline-block; background:#efe2d0; color:var(--accent-dark); border:1px solid var(--line);
  border-radius:999px; padding:.3rem .7rem; font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.75rem;
}
.bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.band{padding:1.1rem;border-top:4px solid var(--gold);background:#fff8ef;border-radius:20px;border:1px solid var(--line)}
.band strong{display:block;font-size:1.85rem;font-family:Georgia,serif;margin-bottom:.2rem}
.band span{color:var(--muted);font-size:.95rem}
.split-quote{background:#2d1f15;color:#f7e7d3;border-radius:30px;padding:2rem;position:relative;overflow:hidden}
.split-quote::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 35%)}
.split-quote p{font-family:Georgia,serif;font-size:1.4rem;line-height:1.35;margin:0 0 1rem}
.split-quote small{color:#d7c1a7}
.timeline{display:grid;gap:1rem;margin-top:1.5rem}
.timeline article{display:grid;grid-template-columns:140px 1fr;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.timeline article:last-child{border-bottom:none}
.timeline strong{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.highlight{
  background:linear-gradient(180deg, #f4e5d1, #edd6ba); border:1px solid #d8b48a; color:#422b19;
  padding:1.2rem 1.3rem; border-radius:22px;
}
.list-clean{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.8rem}
.list-clean li{padding-left:1.6rem;position:relative;color:var(--muted)}
.list-clean li::before{content:"◆";position:absolute;left:0;top:0;color:var(--gold);font-size:.9rem}
.callout{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;background:#fffdf9;border:1px solid var(--line);padding:1.4rem;border-radius:24px;box-shadow:var(--shadow)}
.table-wrap{overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:1rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f3e3cf;font-size:.88rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-dark)}
tr:last-child td{border-bottom:none}
footer{padding:2.5rem 0;background:#24170e;color:#e8d6c0;margin-top:3rem}
footer .container{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
footer a{color:#f6e4cd}
.note{font-size:.95rem;color:var(--muted)}
.page-hero{padding:4rem 0;background:linear-gradient(135deg,#2a1c12,#644225);color:#fff4e5}
.page-hero h1{font-family:Georgia,serif;font-size:clamp(2.2rem,4vw,4rem);margin:.4rem 0 1rem}
.page-hero p{max-width:68ch;color:#ead8c3}
.breadcrumb{display:inline-block;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:#ead0ab}
.notice{font-size:.95rem;color:#61442a;background:#f6ead7;border:1px solid #dec2a2;padding:1rem 1.1rem;border-radius:18px}
.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
@media (max-width: 980px){
  .hero-grid,.grid-2,.footer .container,footer .container,.columns{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .bands{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  nav{display:none}
  .hero .container{padding:4.2rem 0 3.2rem}
  .cards,.bands{grid-template-columns:1fr}
  .timeline article{grid-template-columns:1fr}
  .callout{grid-template-columns:1fr}
}