:root{
  --blue:#12244d;
  --blue2:#1f3d78;
  --night:#081224;
  --gold:#c7a449;
  --gold2:#e5cf86;
  --red:#8d2727;
  --ivory:#f8f1df;
  --paper:#fffaf0;
  --ink:#211b14;
  --line:#d3bd82;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:1.18rem;
  line-height:1.7;
}
body:before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 10% 0%,rgba(199,164,73,.12),transparent 35%),
    radial-gradient(circle at 90% 100%,rgba(31,61,120,.10),transparent 35%),
    linear-gradient(90deg,rgba(255,255,255,.25),transparent 30%,transparent 70%,rgba(255,255,255,.25));
}
a{color:var(--blue2);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{color:var(--red);border-color:var(--red)}
.wrap{max-width:1080px;margin:auto;padding:0 1.35rem}
.narrow{max-width:820px}
.topbar{
  background:var(--night);
  border-bottom:3px double var(--gold);
  position:sticky;top:0;z-index:10;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.35rem;flex-wrap:wrap}
.brand{
  font-family:"Cinzel",serif;
  color:var(--ivory);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:1rem;
  border:0;
}
.brand strong{font-family:"UnifrakturCook",serif;font-size:1.8rem;letter-spacing:.02em;text-transform:none;color:white}
.nav{display:flex;gap:1rem;flex-wrap:wrap}
.nav a{font-family:"Cinzel",serif;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold2);border:0}
.nav a:hover,.nav a.active{color:white}
.hero{
  color:white;
  text-align:center;
  padding:5.2rem 1.3rem 4.5rem;
  background:
    linear-gradient(rgba(8,18,36,.56),rgba(8,18,36,.84)),
    radial-gradient(circle at 50% 0%,rgba(229,207,134,.32),transparent 42%),
    linear-gradient(145deg,var(--blue2),var(--night));
  border-bottom:3px double var(--gold);
  position:relative;
  overflow:hidden;
}
.hero:before{content:"";position:absolute;inset:20px;border:1px solid rgba(229,207,134,.42)}
.hero .orn{color:var(--gold2);letter-spacing:.5em;margin-bottom:1rem}
h1,h2,h3{font-family:"Cinzel",serif;line-height:1.16}
.hero h1{
  font-family:"UnifrakturCook",serif;
  font-size:clamp(3rem,8vw,5.8rem);
  text-shadow:0 5px 25px rgba(0,0,0,.45);
}
.hero .sub{
  display:block;
  margin-top:1rem;
  font-family:"Cinzel",serif;
  font-size:clamp(.78rem,2vw,1rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold2);
}
.lede{max-width:760px;margin:1.5rem auto 0;font-size:1.35rem;font-style:italic;color:#f5e8c6}
section{padding:4rem 0}
.tinted{background:#efe4ca;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{text-align:center;margin-bottom:2.25rem}
.eyebrow{font-family:"Cinzel",serif;color:var(--red);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase}
.section-head h2{font-size:clamp(2rem,4vw,3.15rem);color:var(--blue);margin-top:.5rem}
.rule{width:90px;border-top:2px solid var(--gold);margin:1.1rem auto 0;position:relative}
.rule:before,.rule:after{content:"✠";position:absolute;top:-.77rem;color:var(--gold);font-size:.9rem}
.rule:before{left:-30px}.rule:after{right:-30px}
.dropcap:first-letter{
  float:left;
  font-family:"UnifrakturCook",serif;
  font-size:4.8rem;
  line-height:.78;
  color:var(--red);
  margin:.4rem .65rem 0 0;
  text-shadow:1px 1px 0 var(--gold);
}
.grid{display:grid;gap:1.3rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:4px solid var(--gold);
  padding:1.55rem;
  box-shadow:0 16px 30px -28px var(--night);
}
.card h3{color:var(--blue);font-size:1.35rem;margin-bottom:.35rem}
.card .latin{display:block;color:var(--red);font-family:"Cinzel",serif;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.55rem}
.btnrow{text-align:center;margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;
  font-family:"Cinzel",serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  padding:.85rem 1.5rem;
  border:1px solid var(--gold);
  color:var(--blue);
  background:transparent;
}
.btn.solid{background:var(--blue);border-color:var(--blue);color:white}
.btn:hover{background:var(--gold);color:white;border-color:var(--gold)}
.authorbox{
  background:var(--paper);
  border:2px solid var(--gold);
  padding:1.5rem;
  margin-top:2.2rem;
}
.authorbox h3{color:var(--blue);font-size:1.35rem}
.article-meta{font-family:"Cinzel",serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:.5rem 0 1.5rem}
.pull{
  text-align:center;
  color:var(--blue);
  font-size:1.55rem;
  font-style:italic;
  max-width:720px;
  margin:auto;
}
footer{
  background:var(--night);
  color:var(--gold2);
  text-align:center;
  border-top:3px double var(--gold);
  padding:2.6rem 1.3rem;
  font-size:.96rem;
}
footer a{color:var(--gold2);border:0}
footer a:hover{color:white}
@media(max-width:720px){
  .nav{gap:.75rem}
  .hero{padding:4rem 1rem}
  section{padding:3rem 0}
}


/* ============================================================
   Header navigation spacing fix
   Ensures menu links do not run together on interior pages.
   ============================================================ */
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
}

.nav a {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .topbar .wrap {
    justify-content: center;
    text-align: center;
  }

  .nav {
    justify-content: center;
    gap: 0.55rem 0.95rem;
  }

  .nav a {
    font-size: 0.68rem;
  }
}