/* ============================================================
   ALPHA CHI OMEGA — CHAPTER SITE
   Token system
   Color:   baby pink #D9748C / pink-soft #EFAEBE / sage #93A87E
            sage-deep #62755A / parchment #FBF3F1 / ink #3E362F / gold #BE9A54
   Type:    Header    — "Pinyon Script"        (main headers, hero wordmark)
            Sub-header— "Petit Formal Script"  (section titles, card titles)
            Body      — "Karla"                (paragraphs, simple + legible)
            Signature— hand-drawn SVG stroke (see main.js)
   Signature element: the Lyre Divider — a thin gold line-art lyre
   whose strings shimmer into view on scroll, marking every section
   break and tying the whole site back to the founding symbol.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Petit+Formal+Script&family=Karla:wght@300;400;500;600&family=EB+Garamond:wght@500;600&display=swap');

:root{
  --scarlet: #F8A8BB;
  --scarlet-bright: #FFE6EC;
  --scarlet-deep: #D9748C;
  --olive: #D4E8C2;
  --olive-dark: #A3B18A;
  --parchment: #FBF3F1;
  --parchment-dim: #F3E4E4;
  --ink: #3E362F;
  --gold: #BE9A54;
  --gold-soft: #DECB99;

  --display: 'Pinyon Script', cursive;
  --subheader: 'Petit Formal Script', cursive;
  --body: 'Karla', sans-serif;

  --max: 1180px;
}

/* Philanthropy page: scoped lavender + violet theme override.
   Since every component uses these same variables, redefining them
   here re-skins the whole page without touching any other page. */
body.page-philanthropy{
  --scarlet: #9B72AA;
  --scarlet-bright: #D8BCCB;
  --scarlet-deep: #6E4A80;
  --olive: #C9A9D9;
  --olive-dark: #7C5295;
  --parchment: #FBF7FA;
  --parchment-dim: #F3E8EF;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; }

/* Generic scroll-reveal fallback. Elements with a more specific rule
   (e.g. .letter-body, .timeline-item) override this further down. */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }

.eyebrow{
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

h1, h2, h3{
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
h1{ font-family: var(--display); }
h2, h3{ font-family: var(--subheader); }

.section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 5rem 1.75rem;
}

/* ---------- Site nav ---------- */
.site-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 2rem;
  background: linear-gradient(to bottom, rgba(36,31,24,0.55), transparent);
  transition: background 0.35s ease, box-shadow .35s ease;
}
.site-nav.scrolled{
  background: var(--parchment);
  box-shadow: 0 1px 0 rgba(36,31,24,0.08);
}
.site-nav .brand{
  display:flex; align-items:center; gap:.85rem;
  color: var(--parchment);
  transition: color .35s ease;
}
.site-nav.scrolled .brand{ color: var(--ink); }
.site-nav .brand-lyre{ width: 64px; height: auto; flex-shrink: 0; display: block; }
.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-text .brand-main{
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: .02em;
}
.brand-text .brand-sub{
  font-family: var(--body);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: .2rem;
}

.nav-links{
  display:flex; align-items:center;
  list-style:none; margin:0; padding:0;
}
.nav-links li{ margin-right: 2.1rem; }
.nav-links li:last-child{ margin-right: 0; }
.nav-links a{
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--parchment);
  opacity: .88;
  transition: color .35s ease, opacity .2s ease;
}
.site-nav.scrolled .nav-links a{ color: var(--ink); }
.nav-links a:hover{ opacity: 1; color: var(--gold); }
.nav-links .join-pill{
  border: 1px solid currentColor;
  padding: .5rem 1rem;
  border-radius: 999px;
}
.nav-toggle{ display:none; }

/* ---------- Hero carousel ---------- */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-slide{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  background-size: cover;
  background-position: center;
}
.hero-slide.is-active{ opacity: 1; }
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(20,17,13,.52);
}
.hero-slide .placeholder-tag{
  position:absolute; bottom: 14px; right: 16px;
  font-size: .65rem; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(243,237,221,.65);
  z-index: 2;
  font-family: var(--body);
}

.hero-content{
  position: relative;
  z-index: 2;
  color: var(--parchment);
  padding: 0 1.5rem;
}
.hero-content .eyebrow{
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.hero-wordmark{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  letter-spacing: .01em;
  margin: .6rem 0 .8rem;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.hero-wordmark em{
  font-style: italic;
  font-weight: 400;
  color: #fff;
}
.hero-sub{
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.scroll-cue{
  position:absolute; bottom: 30px; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: rgba(243,237,221,.8);
}
.scroll-cue span{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-cue .stem{
  width:1px; height:34px;
  background: rgba(243,237,221,.6);
  position:relative; overflow:hidden;
}
.scroll-cue .stem::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--gold);
  animation: cueDrip 2.2s ease-in-out infinite;
}
@keyframes cueDrip{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

/* ---------- Lyre divider (signature element) ---------- */
.lyre-divider{
  display:flex; align-items:center; justify-content:center;
  padding: 2.6rem 1rem;
  max-width: var(--max); margin: 0 auto;
}
.lyre-divider-img{
  width: min(92px, 24%);
  height: auto;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.lyre-divider.in-view .lyre-divider-img{
  opacity: 1;
  transform: scale(1);
}

/* ---------- Welcome letter ---------- */
.letter-section{ background: var(--parchment); }
.letter-grid{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3.5rem;
  align-items: start;
}
.letter-portrait{
  position: sticky;
  top: 6.5rem;
}
.portrait-frame{
  aspect-ratio: 4/5;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 20%, rgba(190,154,84,.35), transparent 55%),
    linear-gradient(160deg, var(--olive-dark), var(--scarlet) 120%);
  position: relative;
  display:flex; align-items:center; justify-content:center;
  color: rgba(62,54,47,.75);
  font-size: .7rem; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; padding: 1rem;
  border: 1px solid rgba(190,154,84,.4);
}
.letter-portrait .name{
  margin-top: 1.1rem;
  font-family: var(--subheader);
  font-size: 1.3rem;
}
.letter-portrait .role{
  font-size: .75rem; letter-spacing:.16em; text-transform:uppercase; color: var(--olive-dark);
  margin-top: .2rem;
}

.letter-body{
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.letter-body.in-view{ opacity: 1; transform: translateY(0); }
.letter-body p{
  font-size: 1.05rem;
  margin: 0 0 1.15rem;
  color: #3a332a;
}
.letter-body p:first-of-type::first-letter{
  font-family: var(--display);
  font-size: 3.4rem;
  float: left;
  line-height: .82;
  padding: .08em .1em 0 0;
  color: var(--scarlet);
}
.letter-close{ margin-top: 1.8rem; }
.letter-close .valediction{
  font-style: italic;
  font-family: var(--display);
  color: #3a332a;
  margin-bottom: .3rem;
}

/* animated signature */
.signature-wrap{ margin-top: .4rem; }
.signature-gif{
  width: 220px;
  height: auto;
  opacity: 0;
  transition: opacity .3s ease;
  mix-blend-mode: multiply;
}
.signature-wrap.in-view .signature-gif{ opacity: 1; }
.signature-caption{
  font-size: .68rem; letter-spacing:.14em; text-transform:uppercase; color:#8a7f6b;
  margin-top: .3rem;
}

/* ---------- Nav grid tiles ---------- */
.grid-intro{ text-align:center; max-width: 640px; margin: 0 auto 3rem; }
.grid-intro h2{ font-size: clamp(1.8rem,3.4vw,2.5rem); margin-top:.5rem; }
.grid-intro p{ color:#5a5142; margin-top:.9rem; }

.tile-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.tile{
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 3px;
  overflow: hidden;
  display:flex; align-items:flex-end;
  isolation: isolate;
}
.tile .tile-bg{
  position:absolute; inset:0;
  background-size: cover; background-position:center;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.tile:hover .tile-bg{ transform: scale(1.09); }
.tile::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(36,31,24,0) 40%, rgba(36,31,24,.82) 100%);
  z-index:1;
}
.tile-label{
  position: relative; z-index: 2;
  padding: 1.1rem 1rem;
  color: var(--parchment);
  width: 100%;
}
.tile-label .num{
  font-size: .65rem; letter-spacing:.14em; color: var(--gold-soft);
  display:block; margin-bottom:.25rem;
}
.tile-label .lbl{
  font-family: var(--subheader);
  font-size: 1.15rem;
}
.tile-tag{
  position:absolute; top: 10px; right: 12px; z-index:2;
  font-size: .6rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(243,237,221,.6);
}

/* ---------- Join CTA banner ---------- */
.join-banner{
  background: linear-gradient(120deg, var(--scarlet) 0%, var(--scarlet-bright) 55%, var(--olive-dark) 130%);
  color: var(--ink);
  text-align: center;
  padding: 5.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.join-banner h2{
  color: var(--ink);
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: .6rem 0 1.6rem;
}
.join-banner .eyebrow{ color: var(--ink); }
.btn-join{
  display: inline-block;
  background: var(--scarlet-deep);
  color: var(--scarlet-bright);
  padding: 1rem 2.4rem;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.btn-join:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.24); }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink);
  color: rgba(243,237,221,.7);
  padding: 3rem 1.75rem 2rem;
  text-align: center;
  font-size: .8rem;
}
.site-footer .lyre-mark{ width: 42px; height: auto; margin: 0 auto 1rem; opacity: .9; }
.site-footer nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 1.2rem;
  margin: 1.2rem 0;
}
.site-footer nav a{ opacity:.75; letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; }
.site-footer nav a:hover{ opacity:1; color: var(--gold-soft); }
.site-footer .fine{ opacity:.45; font-size:.72rem; margin-top:1rem; }

/* ---------- Simple sub-page layout ---------- */
.page-hero{
  padding: 9.5rem 1.75rem 3.5rem;
  max-width: var(--max); margin: 0 auto;
  border-bottom: 1px solid rgba(36,31,24,.1);
}
.page-hero .eyebrow{ color: var(--scarlet); }
.page-hero h1{ font-size: clamp(2.2rem,5vw,3.4rem); margin-top:.5rem; }
.page-body{
  max-width: 760px; margin: 0 auto; padding: 3rem 1.75rem 6rem;
  color:#3a332a; font-size: 1.05rem;
}
.page-body p{ margin-bottom: 1.2rem; }
.placeholder-note{
  border: 1px dashed var(--gold);
  background: rgba(184,147,63,.08);
  padding: 1.2rem 1.4rem;
  border-radius: 4px;
  font-size: .85rem;
  color: #5a5142;
  margin-top: 2rem;
}

/* ---------- Symbols page: timeline ---------- */
.timeline-section{ background: var(--parchment); }
.timeline{
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding-left: 2px;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 32px;
  top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--gold), var(--olive), var(--gold));
  opacity: .55;
}
.timeline-item{
  position: relative;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 1.6rem;
  padding-bottom: 3.4rem;
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.timeline-item.in-view{ opacity: 1; transform: translateY(0); }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-dot{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--parchment);
  border: 2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--body);
  font-size: .8rem;
  color: var(--ink);
  z-index: 1;
  box-shadow: 0 4px 14px rgba(190,154,84,.18);
}
.timeline-card{
  background: #fff;
  border: 1px solid rgba(190,154,84,.25);
  border-radius: 6px;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 8px 24px rgba(62,54,47,.06);
}
.timeline-card .eyebrow{ color: var(--scarlet); }
.timeline-card h3{ font-size: 1.35rem; margin: .35rem 0 .7rem; }
.timeline-card p{ color: #5a5142; margin: 0 0 1rem; font-size: .98rem; }
.timeline-photo{
  aspect-ratio: 16/9;
  border-radius: 4px;
  background-size: cover; background-position:center;
  display:flex; align-items:flex-end;
  color: rgba(255,255,255,.85);
  font-size: .65rem; letter-spacing:.08em; text-transform:uppercase;
  position: relative;
  overflow:hidden;
}
.timeline-photo span{
  position:relative; padding: .5rem .7rem; z-index:1;
}
.timeline-photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.timeline-photo-row{
  display:grid; grid-template-columns: 1fr 1fr; gap: .7rem;
}

/* ---------- Symbols page: badge annotation ---------- */
.badge-section{
  background: var(--parchment-dim);
}
.badge-layout{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.5rem;
  align-items: center;
}
.badge-figure{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
}
.badge-photo{
  width: min(400px, 90%);
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(62,54,47,.22));
}

.annotation-list{
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.annotation-item{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1rem;
  opacity: 0; transform: translateX(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.annotation-item.in-view{ opacity:1; transform: translateX(0); }
.annotation-num{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--body);
  font-size: .9rem;
  flex-shrink: 0;
}
.annotation-item h4{
  font-family: var(--subheader);
  font-size: 1.05rem;
  margin: 0 0 .3rem;
  color: var(--ink);
}
.annotation-item h4.greek-title{
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .01em;
  font-style: italic;
}
.annotation-item p{
  margin: 0; font-size: .92rem; color: #5a5142;
}

/* ---------- Symbols page: stats ---------- */
.map-section{ background: var(--parchment); text-align: center; }

.stat-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 780px;
  margin: 2.6rem auto 0;
}
.stat-card{
  background: #fff;
  border: 1px solid rgba(190,154,84,.25);
  border-radius: 6px;
  padding: 1.6rem 1rem;
}
.stat-card .num{
  font-family: var(--display);
  font-size: 2.6rem;
  color: var(--scarlet);
}
.stat-card .lbl{
  font-size: .72rem; letter-spacing:.1em; text-transform:uppercase;
  color: #7c7261; margin-top: .3rem;
}

/* ---------- Reusable photo carousel (Our House, etc.) ---------- */
.gallery-carousel{
  position: relative;
  height: 100vh;
  min-height: 650px;
  max-height: 1000px;
  border-radius: 6px;
  overflow: hidden;
}
.gallery-slide{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  background-size: cover;
  background-position: center;
}
.gallery-slide.is-active{ opacity: 1; }
.gallery-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(62,54,47,0) 55%, rgba(62,54,47,.55) 100%);
}
.gallery-slide .placeholder-tag{
  position:absolute; bottom: 14px; right: 16px; z-index: 2;
  font-size: .65rem; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(251,243,241,.8);
  font-family: var(--body);
}
.gallery-dots{
  position:absolute; bottom: 14px; left: 16px; z-index: 2;
  display:flex; gap: .4rem;
}
.gallery-dots span{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(251,243,241,.45);
  transition: background .3s ease, transform .3s ease;
}
.gallery-dots span.is-active{ background: var(--gold-soft); transform: scale(1.3); }

/* ---------- House tour video ---------- */
.tour-section{ background: var(--parchment-dim); }
.tour-layout{ max-width: 820px; margin: 0 auto; text-align: center; }
.tour-frame{
  position: relative;
  margin-top: 2.2rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(190,154,84,.3);
  box-shadow: 0 14px 34px rgba(62,54,47,.1);
  background: linear-gradient(135deg, var(--olive-dark), var(--scarlet));
  aspect-ratio: 16/9;
}
.tour-frame video{
  width: 100%; height: 100%;
  display:block;
  object-fit: cover;
  background: #000;
}
.tour-fallback{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: .8rem;
  color: rgba(62,54,47,.9);
  text-align:center;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--olive-dark), var(--scarlet));
}
.tour-fallback svg{ width: 46px; height: 46px; opacity: .85; }
.tour-fallback .headline{
  font-family: var(--subheader);
  font-size: 1.1rem;
}
.tour-fallback .sub{
  font-size: .72rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(62,54,47,.65);
  max-width: 340px;
}
.tour-caption{
  margin-top: 1rem;
  font-size: .72rem; letter-spacing:.08em; text-transform:uppercase;
  color: #9a8f7c;
}

/* ---------- Philanthropy page: opening statement ---------- */
.statement-section{ text-align: center; padding-bottom: 1rem; }
.statement-text{
  font-family: var(--subheader);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.32;
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink);
}
.statement-text em{
  font-style: italic;
  color: var(--scarlet);
}
.statement-sub{
  margin: 1.5rem auto 0;
  max-width: 620px;
  color: #5a5142;
  font-size: 1rem;
}

/* ---------- YouTube link card ---------- */
.youtube-card{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 520px;
  margin: 2.4rem auto 0;
  background: #fff;
  border: 1px solid rgba(190,154,84,.3);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  box-shadow: 0 10px 26px rgba(62,54,47,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: left;
}
.youtube-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(62,54,47,.13);
}
.youtube-icon{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--scarlet);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.youtube-icon svg{ width: 20px; height: 20px; fill: var(--ink); margin-left: 2px; }
.youtube-copy .eyebrow{ color: var(--scarlet); }
.youtube-copy h4{
  font-family: var(--subheader);
  font-size: 1.05rem;
  margin: .2rem 0 .2rem;
  color: var(--ink);
}
.youtube-copy .link-out{
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive-dark);
}

/* ---------- Executive Board ---------- */
.exec-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
}
.exec-card{
  background: #fff;
  border: 1px solid rgba(190,154,84,.25);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(62,54,47,.06);
  display: flex;
  flex-direction: column;
  width: calc(25% - 1.05rem);
  flex-grow: 0;
  flex-shrink: 0;
}
.exec-photo{
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: top center;
  position: relative;
}
.exec-photo .placeholder-tag{
  position:absolute; bottom: 10px; right: 10px;
  font-size: .6rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(251,243,241,.8);
  font-family: var(--body);
}
.exec-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(62,54,47,0) 60%, rgba(62,54,47,.5) 100%);
}
.exec-photo-secret{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--olive-dark), var(--scarlet-deep));
}
.exec-photo-secret::after{ content: none; }
.secret-mark{
  font-family: var(--display);
  font-size: 4.5rem;
  color: rgba(255,255,255,.85);
}
.secret-name{
  font-family: var(--subheader);
  color: var(--scarlet-deep);
}
.exec-card.is-secret{
  border-style: dashed;
  border-color: rgba(190,154,84,.5);
}
.exec-body{ padding: 1.15rem 1.25rem 1.4rem; }
.exec-body .role{
  color: var(--scarlet);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.exec-body h3{
  font-family: var(--subheader);
  font-size: 1.15rem;
  margin: .35rem 0 .25rem;
  color: var(--ink);
}
.exec-meta{
  font-size: .76rem;
  color: #7c7261;
  margin-bottom: .5rem;
  letter-spacing: .02em;
}
.exec-email{
  display: inline-block;
  font-size: .76rem;
  color: var(--olive-dark);
  margin-bottom: .8rem;
  border-bottom: 1px solid rgba(98,117,90,.35);
  transition: color .2s ease, border-color .2s ease;
}
.exec-email:hover{
  color: var(--scarlet);
  border-color: var(--scarlet);
}
.exec-summary{
  font-size: .86rem;
  color: #5a5142;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Events page ---------- */
.event-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  align-items: center;
  margin-bottom: 4rem;
}
.event-row:last-child{ margin-bottom: 0; }
.event-row:nth-child(even) .event-photo{ order: 2; }
.event-row:nth-child(even) .event-text{ order: 1; }
.event-photo{
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
}
.event-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(62,54,47,0) 60%, rgba(62,54,47,.45) 100%);
}
.event-photo .placeholder-tag{
  position:absolute; bottom: 12px; right: 14px; z-index: 1;
  font-size: .65rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(251,243,241,.8);
  font-family: var(--body);
}
.event-text .eyebrow{ color: var(--scarlet); }
.event-text h3{
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: .4rem 0 .8rem;
  color: var(--ink);
}
.event-text p{
  font-size: .98rem;
  color: #5a5142;
  line-height: 1.65;
  margin: 0;
}

/* ---------- Financial Information: table ---------- */
.finance-table-wrap{
  overflow-x: auto;
  margin-top: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(190,154,84,.3);
  box-shadow: 0 8px 22px rgba(62,54,47,.06);
}
.finance-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 480px;
}
.finance-table thead th{
  background: var(--scarlet);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 1rem 1.3rem;
}
.finance-table tbody td{
  padding: 1rem 1.3rem;
  font-size: .92rem;
  color: #3e362f;
  border-bottom: 1px solid rgba(190,154,84,.15);
}
.finance-table tbody tr:last-child td{ border-bottom: none; }
.finance-table tbody tr:nth-child(even){ background: var(--parchment-dim); }
.finance-table tbody td:first-child{
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

/* ---------- Financial Information: scholarships ---------- */
.scholarship-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 2rem;
}
.scholarship-card{
  background: #fff;
  border: 1px solid rgba(190,154,84,.3);
  border-radius: 8px;
  padding: 1.8rem 1.7rem;
  box-shadow: 0 8px 22px rgba(62,54,47,.06);
  display: flex;
  flex-direction: column;
}
.scholarship-card .eyebrow{ color: var(--scarlet); }
.scholarship-card h3{
  font-family: var(--subheader);
  font-size: 1.25rem;
  margin: .4rem 0 .8rem;
  color: var(--ink);
}
.scholarship-card p{
  font-size: .92rem;
  color: #5a5142;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}
.btn-apply{
  align-self: flex-start;
  display: inline-block;
  background: var(--scarlet-deep);
  color: var(--scarlet-bright);
  padding: .75rem 1.5rem;
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-apply:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(217,116,140,.35);
}
.btn-register{
  padding: 1.3rem 2.8rem;
  font-size: .95rem;
  letter-spacing: .16em;
}
.btn-closed{
  background: #e8e2d8;
  color: #9a8f7c;
  cursor: default;
  box-shadow: none;
}
.btn-closed:hover{
  transform: none;
  box-shadow: none;
}

/* ---------- Recruitment page: primary recruitment days ---------- */
.day-block{ margin-bottom: 3.4rem; }
.day-block:last-of-type{ margin-bottom: 2.2rem; }
.day-block .eyebrow{ color: var(--scarlet); }
.day-block h3{
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  margin: .4rem 0 1.2rem;
  color: var(--ink);
}
.day-block .gallery-carousel{
  height: 92vh;
  min-height: 600px;
  max-height: 920px;
  margin-bottom: 1.3rem;
}
.day-block p{
  color: #5a5142;
  font-size: .98rem;
  line-height: 1.65;
  max-width: 700px;
  margin: 0;
}
.register-cta{ text-align: center; margin-top: 2.6rem; }

/* ---------- Recruitment page: COB ---------- */
.cob-section{ background: var(--parchment-dim); }
.cob-section .btn-apply{ margin-top: .5rem; }

/* ---------- Symbols page: symbols flip grid ---------- */
.symbols-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 620px;
  margin: 2.6rem auto 0;
}
.symbol-card{
  aspect-ratio: 1/1;
  perspective: 1200px;
  cursor: pointer;
}
.symbol-card-inner{
  position: relative;
  width: 100%; height: 100%;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.symbol-card.is-flipped .symbol-card-inner{ transform: rotateY(180deg); }
.symbol-face{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}
.symbol-face-front{
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 22px rgba(62,54,47,.12);
}
.symbol-face-front::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(62,54,47,0) 55%, rgba(62,54,47,.65) 100%);
}
.symbol-face-front .symbol-label{
  position:absolute; bottom: 14px; left: 16px; right: 16px; z-index: 1;
  font-family: var(--display);
  font-size: 1.6rem;
  color: #fff;
}
.symbol-face-front .symbol-hint{
  position:absolute; top: 12px; right: 14px; z-index: 1;
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.symbol-face-back{
  transform: rotateY(180deg);
  background: var(--scarlet-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.4rem 1.3rem;
  box-shadow: 0 8px 22px rgba(62,54,47,.12);
}
.symbol-face-back h4{
  font-family: var(--display);
  font-size: 1.6rem;
  color: #fff;
  margin: 0 0 .7rem;
}
.symbol-face-back p{
  font-size: .85rem;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .letter-grid{ grid-template-columns: 1fr; }
  .letter-portrait{ position: static; max-width: 260px; margin: 0 auto 2rem; }
  .tile-grid{ grid-template-columns: repeat(2, 1fr); }
  .badge-layout{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr; }
  .timeline-photo-row{ grid-template-columns: 1fr; }
  .exec-card{ width: calc(50% - .7rem); }
}
@media (max-width: 700px){
  .event-row{ grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2.6rem; }
  .event-row:nth-child(even) .event-photo{ order: 0; }
  .event-row:nth-child(even) .event-text{ order: 0; }
  .scholarship-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .timeline::before{ left: 22px; }
  .timeline-item{ grid-template-columns: 44px 1fr; gap: 1rem; }
  .timeline-dot{ width: 44px; height: 44px; font-size: .78rem; }
  .gallery-carousel{ height: 72vh; min-height: 480px; }
  .exec-card{ width: 100%; }
  .day-block .gallery-carousel{ height: 66vh; min-height: 440px; }
  .symbols-grid{ gap: .9rem; }
  .symbols-grid{ grid-template-columns: 1fr; gap: 1.1rem; max-width: 320px; }
  .symbol-card{ aspect-ratio: 4/3; }
  .symbol-face-front .symbol-label{ font-size: 1.05rem; }
}
@media (max-width: 640px){
  .nav-links{
    position: fixed; inset: 0 0 0 auto;
    width: 78%; max-width: 320px;
    background: var(--parchment);
    flex-direction: column; align-items: flex-start;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  .nav-links.open{ transform: translateX(0); box-shadow: -12px 0 30px rgba(0,0,0,.15); }
  .nav-links li{ margin-right: 0; margin-bottom: 1.5rem; }
  .nav-links li:last-child{ margin-bottom: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(62,54,47,.12); width: 100%; }
  .nav-links a{ color: var(--ink); font-size: .95rem; }
  .nav-links .join-pill{
    display: block;
    text-align: center;
    background: var(--scarlet-deep);
    color: var(--scarlet-bright);
    border: none;
    padding: .9rem 1rem;
    font-weight: 500;
  }
  .nav-toggle{
    display:block; background:none; border:none; color: var(--parchment);
    z-index: 60; position:relative;
  }
  .site-nav.scrolled .nav-toggle{ color: var(--ink); }
  .nav-toggle svg{ width: 24px; height: 24px; }
}