:root{
  --ink:#1C1815;
  --panel:#241F1A;
  --panel-line:#3A322A;
  --parchment:#F1E9D8;
  --parchment-dim:#E4D9C2;
  --gold:#B8923F;
  --gold-bright:#D4AF5F;
  --cardinal:#7A2331;
  --terracotta:#A8562E;
  --text-on-dark:#EDE4D3;
  --text-on-dark-dim:#A79A85;
  --text-on-light:#2A211A;
  --text-on-light-dim:#5C5045;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--text-on-dark);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

a{color:var(--gold-bright);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
}

h1,h2,h3{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  line-height:1.1;
}

small {
  font-size:0.65rem;
  color:var(--text-on-dark-dim);
}

.wrap{max-width:920px; margin:0 auto; padding:0 1.75rem;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:10;
  background:rgba(28,24,21,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--panel-line);
}
nav .wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-top:0.9rem; padding-bottom:0.9rem;
  max-width:920px;
}
nav .brand{justify-self:start; grid-column:1;}
nav ul{justify-self:center; grid-column:2;}
.nav-actions{justify-self:end; grid-column:3;}
nav .brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:700; font-size:1.15rem;
  letter-spacing:0.02em;
  color:var(--text-on-dark);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:0.55rem;
}
.seal-nav{
  width:28px;
  height:28px;
  flex-shrink:0;
  opacity:0.9;
}
nav ul{list-style:none; display:flex; gap:1.6rem;}
nav a{
  color:var(--text-on-dark-dim);
  text-decoration:none;
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:color 0.2s ease;
}
nav a:hover{color:var(--gold-bright);}

.nav-actions{display:flex; align-items:center; gap:0.5rem; order:1;}

.theme-toggle{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:3px;
  color:var(--gold-bright);
  cursor:pointer;
  transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover{
  color:var(--text-on-dark);
  border-color:var(--gold-bright);
  background:rgba(184,146,63,0.08);
}
.theme-toggle .icon-moon{display:none;}
.theme-toggle .icon-sun{display:inline-block;}

body.light-mode{
  --ink:#F6F2E8;
  --panel:#FFFFFF;
  --panel-line:#DDD5C6;
  --parchment:#4A3F33;
  --parchment-dim:#E4D9C2;
  --gold:#9A7A2E;
  --gold-bright:#B8923F;
  --cardinal:#7A2331;
  --terracotta:#A8562E;
  --text-on-dark:#2A211A;
  --text-on-dark-dim:#5C5045;
  --text-on-light:#2A211A;
  --text-on-light-dim:#5C5045;
}
body.light-mode nav{background:rgba(246,242,232,0.92);}
body.light-mode .bio-card{
  background:#FFFFFF;
  color:var(--text-on-light);
}
body.light-mode .peru h2{color:#fff;}
body.light-mode .p-card{background:var(--panel); border-color:var(--panel-line);}
body.light-mode .timeline{border-left-color:var(--panel-line);}
body.light-mode .tl-item::before{background:var(--ink);}
body.light-mode .menu-toggle span{background:var(--gold-bright);}

.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:3px;
  cursor:pointer;
  padding:0.55rem;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--gold-bright);
  border-radius:1px;
  transition:transform 0.25s ease, opacity 0.2s ease;
  transform-origin:center;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:640px){
  .menu-toggle{display:flex;}
  nav ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:center;
    background:var(--panel);
    border-bottom:1px solid var(--panel-line);
    padding:1rem 1.75rem;
    gap:0.7rem;
  }
  nav ul.is-open{display:flex;}
  nav ul li{width:100%; text-align:center;}
  nav ul a{display:block; padding:0.5rem 0;}
  nav .wrap{grid-template-columns:1fr auto;}
  nav .brand{grid-column:1;}
  .nav-actions{grid-column:2;}
  nav ul{order:2; grid-column:1 / -1; justify-self:stretch;}
}

/* ---------- HERO ---------- */
.hero{
  padding:5.5rem 0 4.5rem;
  text-align:center;
  position:relative;
}
.hero .eyebrow{display:block; margin-bottom:1rem;}
.hero h1{
  font-size:clamp(3rem, 9vw, 5.5rem);
  color:var(--parchment);
  margin-bottom:0.6rem;
}
.portrait-frame{
  width:157px;
  height:200px;
  border-radius:50% / 42%;
  overflow:hidden;
  margin:1.8rem auto;
  border:3px solid var(--gold);
  box-shadow:0 0 0 6px rgba(184,146,63,0.18), 0 20px 50px -10px rgba(0,0,0,0.7);
}
.portrait-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

.hero .subtitle{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.3rem;
  color:var(--gold-bright);
  margin-bottom:1.8rem;
}
.hero .lede{
  max-width:560px;
  margin:0 auto;
  color:var(--text-on-dark-dim);
  font-size:1.05rem;
}
.hero-meta{
  display:flex; justify-content:center; gap:2.5rem;
  margin-top:2.8rem;
  flex-wrap:wrap;
}
.hero-meta div{text-align:center;}
.hero-meta .num{
  font-family:'Space Mono', monospace;
  font-size:1.4rem;
  color:var(--gold-bright);
  display:block;
}
.hero-meta .lbl{
  font-family:'Space Mono', monospace;
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-on-dark-dim);
}

/* ---------- SECTION SHARED ---------- */
section{padding:4.5rem 0;}
.section-head{margin-bottom:2.5rem;}
.section-head h2{
  font-size:clamp(2rem, 5vw, 2.6rem);
  color:var(--parchment);
  margin-top:0.4rem;
}

/* ---------- BIO ---------- */
.bio-card{
  background:var(--parchment);
  color:var(--text-on-light);
  border-radius:2px;
  padding:2.8rem 2.8rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.6);
}
.bio-card p{margin-bottom:1.1rem; font-size:1.05rem;}
.bio-card p:last-child{margin-bottom:0;}
.drop-cap::first-letter{
  font-family:'Cormorant Garamond', serif;
  font-size:3.8rem;
  font-weight:700;
  float:left;
  line-height:0.8;
  padding:0.1rem 0.5rem 0 0;
  color:var(--cardinal);
}

/* ---------- TIMELINE ---------- */
.timeline{border-left:1px solid var(--panel-line); margin-left:0.6rem;}
.tl-item{
  position:relative;
  padding:0 0 2.6rem 2.4rem;
}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:'';
  position:absolute;
  left:-6px; top:0.3rem;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--gold);
}
.tl-item .tl-year{
  font-family:'Space Mono', monospace;
  color:var(--gold-bright);
  font-size:0.82rem;
  letter-spacing:0.06em;
  display:block;
  margin-bottom:0.35rem;
}
.tl-item h3{
  font-size:1.5rem;
  color:var(--parchment);
  margin-bottom:0.4rem;
  font-weight:600;
}
.tl-item p{color:var(--text-on-dark-dim); font-size:0.98rem; max-width:60ch;}

/* ---------- PERU CALLOUT ---------- */
.peru{
  background:linear-gradient(135deg, var(--terracotta), #7d3f1f);
  border-radius:2px;
  padding:3rem 2.8rem;
  color:#F5E9DA;
}
.peru .eyebrow{color:#F0D2B8;}
.peru h2{color:#fff; font-size:clamp(1.8rem, 4vw, 2.3rem); margin:0.4rem 0 1.1rem;}
.peru p{max-width:65ch; font-size:1.02rem;}
.peru .cities{
  display:flex; flex-wrap:wrap; gap:0.6rem;
  margin-top:1.6rem;
}
.peru .cities span{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.4);
  padding:0.35rem 0.75rem;
  border-radius:999px;
}

/* ---------- PAPACY ---------- */
.papacy-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
}
@media (max-width:640px){ .papacy-grid{grid-template-columns:1fr;} }
.p-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  padding:1.8rem;
  border-radius:2px;
}
.p-card .eyebrow{color:var(--terracotta);}
.p-card h3{color:var(--parchment); font-size:1.3rem; margin:0.5rem 0 0.6rem;}
.p-card p{color:var(--text-on-dark-dim); font-size:0.96rem;}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--panel-line);
  padding:3rem 0;
}
footer .wrap{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
}
footer p{color:var(--text-on-dark-dim); font-size:0.85rem; max-width:46ch;}
footer .sources{font-family:'Space Mono', monospace; font-size:0.7rem; color:var(--text-on-dark-dim);}
footer .sources a{display:block; margin-top:0.4rem; color:var(--text-on-dark-dim); text-decoration:underline;}
footer .sources a:hover{color:var(--gold-bright);}
