/* ============================================================
   PHOENIX REVIVAL ASSOCIATION
   Palette built from the org's own black-and-gold phoenix mark,
   plus an ember accent for the "rising from ashes" idea.
   ============================================================ */

:root{
  --onyx:#15110D;
  --onyx-soft:#2A241D;
  --cream:#F7F3EA;
  --parchment:#EFE6D3;
  --gold:#C9A44C;
  --gold-bright:#E4C878;
  --ember:#D9542E;
  --ash:#69625A;
  --line:#DED2B8;
  --radius:2px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--onyx);
  font-family:'Karla', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Frank Ruhl Libre', serif;
  color:var(--onyx);
  line-height:1.1;
  margin:0;
  font-weight:600;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------------- Nav ---------------- */
header.site-nav{background:var(--onyx); color:var(--cream);}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:38px; width:38px; object-fit:contain;}
.brand-text{font-family:'Frank Ruhl Libre',serif; font-weight:600; font-size:1.15rem; color:var(--cream); line-height:1.1;}
.brand-text span{display:block; font-family:'Karla',sans-serif; font-weight:400; font-size:0.68rem; color:var(--gold); letter-spacing:0.08em;}

nav.links{display:flex; gap:30px; font-size:0.92rem;}
nav.links a{color:rgba(247,243,234,0.75); padding-bottom:4px; border-bottom:1px solid transparent; transition:all .15s;}
nav.links a:hover, nav.links a.active{color:var(--gold-bright); border-color:var(--gold-bright);}
.nav-cta{color:var(--onyx) !important; background:var(--gold); padding:9px 18px; border-radius:var(--radius); border-bottom:none !important;}
.nav-cta:hover{background:var(--gold-bright) !important;}
.menu-btn{display:none; background:none; border:none; font-size:1.5rem; color:var(--cream); cursor:pointer;}

@media (max-width:960px){
  nav.links{
    position:fixed; inset:66px 0 0 0; background:var(--onyx);
    flex-direction:column; padding:30px 28px; gap:22px; font-size:1.1rem;
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
  }
  nav.links.open{transform:translateX(0);}
  .menu-btn{display:block;}
}

/* ---------------- Page header ---------------- */
.page-header{background:var(--onyx); color:var(--cream); padding:58px 0 48px;}
.page-header .kicker{color:var(--gold); font-size:0.9rem; letter-spacing:0.03em; display:block; margin-bottom:12px; font-family:'Karla',sans-serif;}
.page-header h1{color:var(--cream); font-size:clamp(2.2rem, 5vw, 3.4rem);}
.page-header p{margin-top:16px; color:rgba(247,243,234,0.72); max-width:58ch; font-size:1.04rem; font-family:'Karla',sans-serif;}
.breadcrumb{font-size:0.84rem; color:rgba(247,243,234,0.5); margin-bottom:16px; font-family:'Karla',sans-serif;}
.breadcrumb a:hover{color:var(--gold);}

/* ---------------- Hero ---------------- */
.hero{background:var(--onyx); color:var(--cream); position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1fr 0.95fr; align-items:center; gap:0;}
.hero-text{padding:76px 32px 76px 0;}
.hero-text .kicker{color:var(--gold); font-family:'Karla',sans-serif; font-size:0.95rem; letter-spacing:0.02em; display:block; margin-bottom:18px;}
.hero-text h1{font-size:clamp(2.4rem, 5vw, 3.8rem); max-width:13ch; color:var(--cream);}
.hero-text p.lede{margin-top:22px; font-size:1.08rem; color:rgba(247,243,234,0.72); max-width:48ch; font-family:'Karla',sans-serif;}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-photo{position:relative; height:100%; min-height:460px;}
.hero-photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--onyx) 0%, transparent 18%);
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-text{padding:56px 24px 40px;}
  .hero-photo{min-height:320px;}
  .hero-photo::after{background:linear-gradient(0deg, var(--onyx) 0%, transparent 22%);}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; font-size:0.93rem; font-weight:600; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition:all .15s;
  font-family:'Karla',sans-serif;
}
.btn-gold{background:var(--gold); color:var(--onyx);}
.btn-gold:hover{background:var(--gold-bright);}
.btn-outline-light{border-color:rgba(247,243,234,0.5); color:var(--cream);}
.btn-outline-light:hover{background:rgba(247,243,234,0.1); border-color:var(--cream);}
.btn-ember{background:var(--ember); color:#fff;}
.btn-ember:hover{background:#b8431f;}
.btn-outline-dark{border-color:var(--onyx); color:var(--onyx);}
.btn-outline-dark:hover{background:var(--onyx); color:var(--cream);}

/* ---------------- Recognition strip ---------------- */
.recognition-strip{background:var(--parchment); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0;}
.recognition-strip .wrap{display:flex; align-items:center; gap:32px; flex-wrap:wrap; justify-content:space-between;}
.recognition-strip .label{font-family:'Karla',sans-serif; font-size:0.82rem; color:var(--ash); white-space:nowrap;}
.recognition-strip .items{display:flex; gap:28px; flex-wrap:wrap; font-family:'Frank Ruhl Libre',serif; font-size:1rem; color:var(--onyx);}

/* ---------------- Section shell ---------------- */
section{padding:80px 0;}
.section-head{margin-bottom:46px; max-width:62ch;}
.section-head .kicker{color:var(--ember); font-size:0.92rem; margin-bottom:10px; display:block; font-family:'Karla',sans-serif;}
.section-head h2{font-size:clamp(1.9rem, 4vw, 2.7rem);}
.section-head p{color:var(--ash); font-size:1.02rem; margin-top:14px; font-family:'Karla',sans-serif;}
.parchment{background:var(--parchment);}
.onyx-section{background:var(--onyx); color:var(--cream);}
.onyx-section .section-head h2{color:var(--cream);}
.onyx-section .section-head p{color:rgba(247,243,234,0.7);}

/* ---------------- Founder block ---------------- */
.founder-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:52px; align-items:center;}
.founder-photo{border:1px solid var(--line);}
.founder-copy blockquote{
  font-family:'Frank Ruhl Libre',serif; font-size:clamp(1.4rem,2.6vw,1.9rem); font-style:italic;
  color:var(--onyx); line-height:1.4; margin:0;
}
.founder-copy cite{display:block; margin-top:22px; font-style:normal; font-family:'Karla',sans-serif; font-weight:700; color:var(--ash); font-size:0.95rem;}
.founder-copy .role{font-family:'Karla',sans-serif; color:var(--ember); font-size:0.88rem; margin-bottom:16px; display:block;}
@media (max-width:860px){.founder-grid{grid-template-columns:1fr;}}

/* ---------------- Milestone timeline (real sequence) ---------------- */
.timeline{border-left:2px solid var(--line); margin-left:6px;}
.timeline-item{position:relative; padding:0 0 40px 34px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:''; position:absolute; left:-7px; top:3px; width:12px; height:12px;
  background:var(--gold); border:2px solid var(--onyx); border-radius:50%;
}
.timeline-item .date{font-family:'Karla',sans-serif; font-size:0.85rem; color:var(--gold); margin-bottom:6px; display:block;}
.timeline-item h3{font-size:1.3rem; margin-bottom:8px; color:var(--cream);}
.timeline-item p{font-family:'Karla',sans-serif; color:rgba(247,243,234,0.72); font-size:0.98rem;}

/* ---------------- Focus areas ---------------- */
.focus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.focus-item{background:var(--cream); padding:34px 30px;}
.focus-item h3{font-size:1.2rem; margin-bottom:12px;}
.focus-item p{font-family:'Karla',sans-serif; color:var(--ash); font-size:0.96rem;}
@media (max-width:860px){.focus-grid{grid-template-columns:1fr;}}

/* ---------------- Program feature (poster-based) ---------------- */
.program-feature{display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; border:1px solid var(--line); background:#fff;}
.program-feature img{width:100%; height:100%; object-fit:cover;}
.program-feature .copy{padding:44px 40px; display:flex; flex-direction:column; justify-content:center;}
.program-feature .copy .meta{font-family:'Karla',sans-serif; font-size:0.85rem; color:var(--ember); margin-bottom:10px;}
.program-feature .copy h3{font-size:1.7rem; margin-bottom:16px;}
.program-feature .copy p{font-family:'Karla',sans-serif; color:var(--ash); font-size:1rem; margin-bottom:10px;}
.program-feature .copy dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin-top:18px; font-family:'Karla',sans-serif; font-size:0.92rem;}
.program-feature .copy dt{color:var(--ash);}
.program-feature .copy dd{margin:0; font-weight:600;}
.program-feature.flip{grid-template-columns:1.1fr 0.9fr;}
.program-feature.flip .copy{order:2;}
@media (max-width:900px){
  .program-feature, .program-feature.flip{grid-template-columns:1fr;}
  .program-feature.flip .copy{order:0;}
  .program-feature img{aspect-ratio:16/9;}
}

.track-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.track-pill{border:1px solid var(--line); padding:7px 14px; border-radius:100px; font-family:'Karla',sans-serif; font-size:0.85rem; color:var(--onyx);}

/* ---------------- Gallery (event posters, embraced as real material) ---------------- */
.poster-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.poster-item{border:1px solid var(--line); background:#fff;}
.poster-item img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top;}
.poster-item .cap{padding:14px 16px; font-family:'Karla',sans-serif; font-size:0.9rem; color:var(--ash);}
@media (max-width:900px){.poster-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------------- Get involved ---------------- */
.involve-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.involve-item{background:var(--cream); padding:36px 30px;}
.involve-item h3{font-size:1.25rem; margin-bottom:12px;}
.involve-item p{font-family:'Karla',sans-serif; color:var(--ash); font-size:0.96rem; margin-bottom:18px;}
@media (max-width:860px){.involve-grid{grid-template-columns:1fr;}}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px;}
.contact-list dt{font-family:'Frank Ruhl Libre',serif; font-size:1rem; color:var(--ember); margin-bottom:4px;}
.contact-list dd{margin:0 0 26px; font-family:'Karla',sans-serif; font-size:1.02rem;}
.contact-list dd a:hover{color:var(--ember);}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

form.contact-form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
label{font-size:0.85rem; color:var(--ash); display:block; margin-bottom:6px; font-weight:600; font-family:'Karla',sans-serif;}
input, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:#fff;
  font-family:'Karla',sans-serif; font-size:0.95rem; border-radius:var(--radius); color:var(--onyx);
}
textarea{resize:vertical; min-height:120px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

/* ---------------- CTA ---------------- */
.cta-banner{
  background:var(--onyx); color:var(--cream); padding:56px 48px;
  display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;
  border-left:4px solid var(--gold);
}
.cta-banner h2{color:var(--cream); font-size:clamp(1.7rem,3.6vw,2.3rem); max-width:20ch;}

/* ---------------- Footer ---------------- */
footer.site-footer{background:var(--onyx); color:rgba(247,243,234,0.68); padding-top:56px; border-top:3px solid var(--gold);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand img{height:32px; width:32px;}
.footer-brand span{font-family:'Frank Ruhl Libre',serif; font-size:1.1rem; color:var(--cream);}
.footer-col p{font-size:0.9rem; color:rgba(247,243,234,0.58); max-width:32ch; font-family:'Karla',sans-serif;}
footer.site-footer h4{color:var(--gold); font-size:0.88rem; margin-bottom:14px; font-family:'Karla',sans-serif; letter-spacing:0.04em;}
footer.site-footer ul li{margin-bottom:10px; font-size:0.9rem; font-family:'Karla',sans-serif;}
footer.site-footer a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid rgba(247,243,234,0.12); padding:20px 0; font-size:0.8rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:rgba(247,243,234,0.45);
  font-family:'Karla',sans-serif;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}