/*
 * officers.css
 * Styles for OfficersPage, extracted from static_templates/officers.html.
 * The Google Fonts (DM Serif Display, IBM Plex Mono) these rely on are
 * already loaded site-wide by base.html.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --cream:#f4efe5;--parch:#f8f4ec;
  --olive:#8a7d5a;--olive-l:#a89a72;--olive-d:#6b6045;
  --olive-line:rgba(138,125,90,.22);
  --td:#2a2723;--td2:#4a4640;--td3:#7a756c;
  --display:'DM Serif Display',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
}

.officers-page{
  background:var(--cream);
  color:var(--td);
  font-family:var(--mono);
  overflow-x:hidden;
  width:100%;
}

/* ── HERO ── */
.officers-hero{
  position:relative;
  height:85vh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}

.officers-hero-bg{
  position:absolute;
  left:0;top:-40px;
  width:100%;height:calc(100% + 80px);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-color:var(--td);
  will-change:transform;
}

.officers-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(42,39,35,.88) 0%,
    rgba(42,39,35,.4) 45%,
    rgba(42,39,35,.15) 100%);
}

.hero-inner{
  position:relative;z-index:2;
  padding:3rem 2.5rem;
  max-width:700px;
}

.hero-eyebrow{
  font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--olive-l);margin-bottom:1.2rem;
}

.hero-title{
  font-family:var(--display);
  font-size:clamp(2.2rem,6vw,3.8rem);
  color:var(--cream);line-height:1.05;
  letter-spacing:-.02em;margin-bottom:1rem;
}

.hero-sub{
  font-family:var(--display);font-style:italic;
  font-size:1rem;color:rgba(244,239,229,.55);
  line-height:1.8;max-width:540px;
}

.hero-pgm-note{
  margin-top:1.5rem;
  display:inline-block;
  border:1px solid rgba(138,125,90,.3);
  padding:.6rem 1.2rem;
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive-l);line-height:1.9;
}

/* ── OFFICER BLEED SECTIONS ── */
.officer-section{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
}

@media(max-width:768px){
  .officer-section{grid-template-columns:1fr}
}

.officer-section.lft .officer-photo{order:1}
.officer-section.lft .officer-content{order:2}
.officer-section.rgt .officer-photo{order:2}
.officer-section.rgt .officer-content{order:1}

@media(max-width:768px){
  .officer-section .officer-photo{order:1 !important}
  .officer-section .officer-content{order:2 !important}
}

.officer-photo{
  position:relative;
  min-height:520px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--td);
}

.officer-section.pale .officer-photo{background:#1e1c18}

.officer-emoji-placeholder{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  width:100%;height:100%;min-height:520px;
  gap:.5rem;
}

.officer-emoji{
  font-size:clamp(5rem,12vw,9rem);
  line-height:1;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.4));
}

.officer-emoji-suit{
  font-size:clamp(1.5rem,4vw,2.8rem);
  opacity:.35;letter-spacing:.08em;
  color:var(--olive-l);
}

.officer-content{
  background:var(--td);
  padding:4rem 3rem;
  display:flex;flex-direction:column;
  justify-content:center;
}

.officer-section.pale .officer-content{background:var(--parch)}

.officer-role{
  font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--olive-l);margin-bottom:.9rem;
}

.officer-name{
  font-family:var(--display);
  font-size:clamp(1.8rem,4vw,2.8rem);
  color:var(--cream);line-height:1.05;
  letter-spacing:-.02em;margin-bottom:.25rem;
}

.officer-section.pale .officer-name{color:var(--td)}

.officer-prefix{
  font-family:var(--display);font-style:italic;
  font-size:.88rem;color:var(--olive-l);
  margin-bottom:1.4rem;
}

.officer-section.pale .officer-prefix{color:var(--olive-d)}

.officer-divider{
  width:36px;height:1px;
  background:var(--olive-line);
  margin-bottom:1.4rem;
}

.officer-bio{
  font-family:var(--display);font-style:italic;
  font-size:.95rem;
  color:rgba(244,239,229,.55);
  line-height:1.85;max-width:440px;
}

.officer-section.pale .officer-bio{color:var(--td2)}

.officer-years{
  margin-top:1.2rem;
  font-size:.46rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(138,125,90,.45);
}

/* ── PAST MASTER RECOGNITION ── */
.past-master-section{
  background:var(--cream);
  padding:5rem 2.5rem;
  text-align:center;
}

.pm-inner{max-width:560px;margin:0 auto}

.pm-rule{
  width:1px;height:60px;
  background:linear-gradient(to bottom,transparent,var(--olive-line),transparent);
  margin:0 auto 2rem;
}

.pm-eyebrow{
  font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--olive);margin-bottom:1.2rem;
}

.pm-name{
  font-family:var(--display);
  font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--td);line-height:1.05;
  letter-spacing:-.02em;margin-bottom:.35rem;
}

.pm-title{
  font-family:var(--display);font-style:italic;
  font-size:1rem;color:var(--olive-d);
  margin-bottom:1.5rem;
}

.pm-body{
  font-family:var(--display);font-style:italic;
  font-size:.95rem;color:var(--td3);line-height:1.85;
}

.pm-rule-bottom{
  width:1px;height:40px;
  background:linear-gradient(to bottom,var(--olive-line),transparent);
  margin:2rem auto 0;
}

/* ── SUPPORTING OFFICERS STRIP ── */
.supporting-strip{
  background:var(--td);
  padding:3rem 2.5rem;
  border-top:1px solid rgba(138,125,90,.1);
}

.supporting-inner{max-width:900px;margin:0 auto}

.supporting-eyebrow{
  font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--olive-l);margin-bottom:1.8rem;
  display:flex;align-items:center;gap:.8rem;
}

.supporting-eyebrow::after{
  content:'';flex:1;height:1px;
  background:rgba(138,125,90,.15);
}

.supporting-grid-top{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-bottom:1.5rem;
  text-align:center;
}

.supporting-grid-bottom{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  text-align:center;
}

@media(max-width:600px){
  .supporting-grid-top{grid-template-columns:1fr}
  .supporting-grid-bottom{grid-template-columns:1fr}
}

.supporting-officer{display:flex;flex-direction:column;gap:.3rem}

.supporting-role{
  font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(138,125,90,.5);
}

.supporting-name{
  font-family:var(--display);font-style:italic;
  font-size:.9rem;color:rgba(244,239,229,.7);
}

.supporting-note{
  font-size:.44rem;letter-spacing:.08em;
  color:rgba(138,125,90,.35);
  font-style:italic;font-family:var(--display);
}

/* ── GL OFFICERS SECTION ── */
.gl-section{
  background:var(--td);
  padding:5rem 2.5rem;
  border-top:1px solid rgba(138,125,90,.12);
}

.gl-inner{max-width:900px;margin:0 auto}

.gl-header{
  text-align:center;margin-bottom:4rem;
}

.gl-eyebrow{
  font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--olive-l);margin-bottom:1rem;
}

.gl-title{
  font-family:var(--display);
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--cream);line-height:1.1;
  letter-spacing:-.02em;margin-bottom:.75rem;
}

.gl-sub{
  font-family:var(--display);font-style:italic;
  font-size:.9rem;color:rgba(244,239,229,.4);
  line-height:1.75;max-width:520px;margin:0 auto;
}

/* TIER 1 — PGMs */
.tier-label{
  font-size:.48rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(138,125,90,.4);
  margin-bottom:1.5rem;
  display:flex;align-items:center;gap:.8rem;
}

.tier-label::before,.tier-label::after{
  content:'';flex:1;height:1px;
  background:rgba(138,125,90,.12);
}

.pgm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-bottom:3.5rem;
}

@media(max-width:700px){.pgm-grid{grid-template-columns:1fr}}

.pgm-card{
  border:1px solid rgba(138,125,90,.18);
  padding:2.5rem;
  position:relative;
}

.pgm-card::before{
  content:'';
  position:absolute;top:0;left:2.5rem;right:2.5rem;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--olive),transparent);
}

.pgm-emoji{font-size:3rem;margin-bottom:1.2rem;display:block}

.pgm-card-role{
  font-size:.48rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--olive-l);margin-bottom:.4rem;
}

.pgm-card-name{
  font-family:var(--display);
  font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--cream);line-height:1.05;
  letter-spacing:-.02em;margin-bottom:.3rem;
}

.pgm-card-term{
  font-family:var(--display);font-style:italic;
  font-size:.78rem;color:var(--olive-l);
  margin-bottom:1.5rem;
}

.pgm-divider{
  width:24px;height:1px;
  background:var(--olive-line);
  margin-bottom:1.5rem;
}

.pgm-initiative-label{
  font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(138,125,90,.4);margin-bottom:.3rem;
}

.pgm-initiative-text{
  font-family:var(--display);font-style:italic;
  font-size:.85rem;color:rgba(244,239,229,.45);
  line-height:1.65;margin-bottom:1.5rem;
}

.pgm-quote-mark{
  font-family:var(--display);font-size:2.5rem;
  color:rgba(138,125,90,.18);line-height:.8;
  margin-bottom:.5rem;display:block;
}

.pgm-quote{
  font-family:var(--display);font-style:italic;
  font-size:.9rem;color:rgba(244,239,229,.42);
  line-height:1.75;
  border-left:1px solid rgba(138,125,90,.2);
  padding-left:1rem;
}

.pgm-placeholder-note{
  margin-top:1rem;
  font-size:.42rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(138,125,90,.22);
  font-style:italic;font-family:var(--display);
}

/* TIER 2 — Active GL Officer */
.gl-officer-card{
  border:1px solid rgba(138,125,90,.12);
  padding:2rem 2.5rem;
  margin-bottom:3.5rem;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  align-items:start;
}

@media(max-width:600px){
  .gl-officer-card{grid-template-columns:1fr}
}

.gl-officer-emoji{
  font-size:3.5rem;
  line-height:1;
  padding-top:.25rem;
}

.gl-officer-roles{
  display:flex;flex-direction:column;gap:.3rem;
  margin-bottom:1rem;
}

.gl-officer-role-item{
  font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive-l);
}

.gl-officer-name{
  font-family:var(--display);
  font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--cream);line-height:1.05;
  letter-spacing:-.02em;margin-bottom:.25rem;
}

.gl-officer-prefix{
  font-family:var(--display);font-style:italic;
  font-size:.82rem;color:var(--olive-l);
  margin-bottom:1rem;
}

.gl-officer-divider{
  width:24px;height:1px;
  background:var(--olive-line);
  margin-bottom:1rem;
}

.gl-officer-bio{
  font-family:var(--display);font-style:italic;
  font-size:.9rem;color:rgba(244,239,229,.45);
  line-height:1.8;
}

/* ── Real officer photos ──
   The static source only ever used emoji placeholders (no officer ever
   had a real uploaded photo), so it has no rule for an actual <img>.
   officer.photo is a real, optional field on the Officer snippet —
   this fills the same .officer-photo box (already position:relative)
   that the emoji placeholder absolutely-positions into. ── */
.officer-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}