/* Page-specific layouts. Anything reused belongs in components.css. */

/* =========================================================
   Homepage
   ========================================================= */

/* ---------- Legacy (history intro) ---------- */
.legacy { overflow: hidden; }
.legacy__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6rem; align-items: center; }
.legacy__lede { font-family: var(--font-display); font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.35; color: var(--c-heading); margin: 1.75rem 0 1.25rem; }
.legacy__facts { display: flex; margin: 2rem 0 2.5rem; border-block: 1px solid var(--c-border); }
.legacy__facts div { flex: 1; padding: 1.25rem 0; }
.legacy__facts div + div { border-left: 1px solid var(--c-border); padding-left: 1.5rem; }
.legacy__facts dt { font-size: .66rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-text-muted); }
.legacy__facts dd { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 2.4rem; line-height: 1.1; color: var(--c-heading); }
.feature-media { position: relative; z-index: 0; margin: 0 1.25rem 2rem 0; }
.feature-media::before { content: ''; position: absolute; top: 1.25rem; left: 1.25rem; right: -1.25rem; bottom: -1.25rem; border: 1px solid rgba(197, 160, 89, 0.55); z-index: -1; }
.feature-media__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-alt); border: 1px solid var(--c-border); box-shadow: 0 24px 48px rgba(31, 40, 127, 0.12); }
.feature-media__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease-out); }
.feature-media:hover .feature-media__frame img { transform: scale(1.05); }
.feature-media__year {
  position: absolute; left: -2.5rem; bottom: -2.75rem; z-index: 3; pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-size: clamp(5rem, 9vw, 8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--c-red);
}
.feature-media__caption {
  position: absolute; z-index: 2; right: -.5rem; bottom: 3rem; display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; border-radius: var(--radius-pill); background: var(--c-surface); box-shadow: 0 12px 30px rgba(13, 16, 43, 0.14);
  font-size: .78rem; font-weight: 500; color: var(--c-primary);
}
.feature-media__caption .icon { width: 1rem; height: 1rem; color: var(--c-red-ink); }
@media (max-width: 1100px) { .legacy__grid { gap: 4rem; } }
@media (max-width: 900px) {
  .legacy__grid { grid-template-columns: 1fr; gap: 4.5rem; }
  .feature-media { max-width: 480px; }
  .feature-media__year { left: -.5rem; font-size: 5rem; }
  .feature-media::before { right: -.75rem; bottom: -.75rem; }
  .legacy__facts dd { font-size: 1.9rem; }
  .legacy__facts div + div { padding-left: 1rem; }
}

/* ---------- Event list (rows that flood navy on hover) ---------- */
.event-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.event-list li { border-bottom: 1px solid var(--c-border); }
.event-row {
  position: relative; display: grid; grid-template-columns: 96px 220px 1fr 56px; align-items: center; gap: 2rem;
  padding: 1.75rem 1.5rem; overflow: hidden; isolation: isolate; text-decoration: none; color: inherit;
}
.event-row::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--c-navy), var(--c-blue));
  transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease);
}
.event-row:hover::before, .event-row:focus-visible::before { transform: scaleY(1); }
.event-row .date-tile { width: auto; align-self: center; }
.event-row__media { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--c-surface-alt); box-shadow: 0 10px 24px rgba(13, 16, 43, 0.12); }
.event-row__media img, .event-row__media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.event-row:hover .event-row__media img { transform: scale(1.06); }
.event-row__media .event-row__icon { position: absolute; left: .6rem; top: .6rem; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.92); border: 0; color: var(--c-blue); }
.event-row__media .event-row__icon .icon { width: 1.05rem; height: 1.05rem; }
.event-row:hover .event-row__media .event-row__icon { background: var(--c-red); color: #fff; }
.event-row__icon, .event-row__go {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); color: var(--c-primary); transition: var(--transition);
}
.event-row__icon .icon { width: 1.35rem; height: 1.35rem; }
.event-row__go .icon { width: 1.2rem; height: 1.2rem; transition: transform .4s var(--ease); }
.event-row__main { min-width: 0; }
.event-row__main .eyebrow { margin-bottom: .35rem; font-size: .66rem; }
.event-row__main strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; color: var(--c-heading); transition: color .4s ease; }
.event-row__main small { display: block; margin-top: .35rem; font-size: .92rem; color: var(--c-text-muted); transition: color .4s ease; }
.event-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-top: .75rem; font-size: .8rem; color: var(--c-text-muted); }
.event-row__meta > span:not(.chip) { display: inline-flex; align-items: center; gap: .35rem; }
.event-row__meta .icon { width: .9rem; height: .9rem; color: var(--c-red-ink); }
.event-row:hover .event-row__main strong, .event-row:focus-visible .event-row__main strong { color: #fff; }
.event-row:hover .event-row__main small, .event-row:hover .event-row__meta { color: rgba(255, 255, 255, 0.72); }
.event-row:hover .eyebrow { color: var(--c-gold); }
.event-row:hover .event-row__meta .icon { color: var(--c-gold); }
.event-row:hover .chip { background: rgba(255, 255, 255, 0.1); color: #fff; }
.event-row:hover .date-tile { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.event-row:hover .date-tile strong { color: var(--c-gold); }
.event-row:hover .date-tile small { color: rgba(255, 255, 255, 0.6); }
.event-row:hover .event-row__icon { color: var(--c-gold); border-color: rgba(255, 255, 255, 0.2); }
.event-row:hover .event-row__go { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.event-row:hover .event-row__go .icon { transform: rotate(45deg); }
.list-note { margin-top: 1.25rem; font-size: .85rem; color: var(--c-text-muted); }
@media (max-width: 900px) {
  .event-row { grid-template-columns: 72px 1fr 44px; gap: 1rem; padding: 1.25rem .5rem; }
  .event-row__media { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 7; }
  .event-row__main small, .event-row__meta .chip { display: none; }
  .event-row__go { width: 44px; height: 44px; }
  .event-row .date-tile strong { font-size: 1.6rem; }
}

@media (max-width: 1100px) and (min-width: 901px) { .event-row { grid-template-columns: 84px 160px 1fr 48px; gap: 1.25rem; } }

/* ---------- News grid (equal cards) ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 1100px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- Districts: pill finder + snap scroller ---------- */
.finder {
  position: relative; display: flex; align-items: center; gap: .75rem; max-width: 720px; margin-bottom: 1rem;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  padding: .4rem .4rem .4rem 1.4rem; box-shadow: var(--shadow-1); transition: border-color .3s ease, box-shadow .3s ease;
}
.finder:focus-within { border-color: var(--c-primary); box-shadow: 0 10px 30px rgba(31, 40, 127, 0.14); }
.finder__icon { width: 1.15rem; height: 1.15rem; color: var(--c-text-muted); }
.finder__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--c-text); padding: .6rem 0; }
.finder__input:focus-visible { outline: 0; }
/* ---------- Personality of the Month: feature ---------- */
.personality__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6rem; align-items: center; }
.personality__figure { position: relative; margin: 0 1.5rem 1.5rem 0; }
.personality__figure::before { content: ''; position: absolute; top: 1.5rem; left: 1.5rem; right: -1.5rem; bottom: -1.5rem; border: 1px solid rgba(197, 160, 89, 0.6); z-index: 0; }
.personality__frame { position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-alt); box-shadow: 0 30px 60px rgba(31, 40, 127, 0.16); }
.personality__frame img, .personality__frame .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease-out); }
.personality__figure:hover .personality__frame img { transform: scale(1.05); }
.personality__frame .avatar { position: absolute; inset: 0; margin: auto; }
.personality__month {
  position: absolute; top: 1.5rem; left: 1.5rem; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: .9rem 1.1rem;
  background: var(--g-navy); color: #fff; box-shadow: 0 12px 30px rgba(13, 16, 43, 0.3);
}
.personality__month small { font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); }
.personality__month strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.personality__figure figcaption {
  position: absolute; z-index: 2; right: -.5rem; bottom: 2.5rem; display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.15rem; border-radius: var(--radius-pill); background: var(--c-surface); box-shadow: 0 12px 30px rgba(13, 16, 43, 0.16);
  font-size: .8rem; font-weight: 500; color: var(--c-primary);
}
.personality__figure figcaption .icon { width: 1rem; height: 1rem; color: var(--c-red-ink); }
.personality__name { font-size: clamp(3rem, 5.5vw, 5rem); line-height: .98; margin-bottom: 1.5rem; }
.personality__name a { color: inherit; text-decoration: none; }
.personality__name em { display: block; }
.personality__roles { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 3rem; padding: 0; }
.personality__roles .chip { font-size: .78rem; padding: .35rem .85rem; }
.personality__roles .chip .icon { width: .9rem; height: .9rem; }
.personality__quote { position: relative; padding: 0 0 0 2rem; margin: 0 0 1.75rem; border-left: 2px solid var(--c-gold); font-size: clamp(1.4rem, 2.1vw, 1.85rem); }
.personality__quote-mark { position: absolute; left: -.6rem; top: -1.9rem; width: 2.6rem; height: 2.6rem; color: rgba(227, 27, 35, 0.18); stroke-width: 1; }
.personality__bio { color: var(--c-text-muted); font-size: 1.02rem; line-height: 1.8; margin-bottom: 2rem; max-width: 36rem; }
.personality__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-bottom: 2.25rem; font-size: .8rem; color: var(--c-text-muted); }
.personality__meta > * { display: inline-flex; align-items: center; gap: .35rem; }
.personality__meta .icon { width: .9rem; height: .9rem; color: var(--c-red-ink); }
@media (max-width: 1100px) { .personality__grid { gap: 4rem; } }
@media (max-width: 900px) {
  .personality__grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .personality__figure { max-width: 480px; margin: 0 1rem 1rem 0; }
  .personality__figure::before { top: 1rem; left: 1rem; right: -1rem; bottom: -1rem; }
  .personality__figure figcaption { right: -.5rem; bottom: 1.5rem; font-size: .72rem; }
}

/* ---------- Verse: wide band ---------- */
.verse-card--wide {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "tag tag" "quote actions" "meta actions"; column-gap: 3rem; align-items: end; padding: 3.5rem 4rem;
}
.verse-card--wide > .tag { grid-area: tag; justify-self: start; margin-bottom: 1.5rem; }
.verse-card--wide blockquote { grid-area: quote; max-width: 52rem; }
.verse-card--wide .verse-card__meta { grid-area: meta; margin-bottom: 0; }
.verse-card--wide .cluster { grid-area: actions; flex-direction: column; align-items: flex-end; gap: 1rem; }
.verse-card--wide .verse-card__quote { top: 2rem; right: 3rem; }
@media (max-width: 900px) {
  .verse-card--wide { grid-template-columns: 1fr; grid-template-areas: "tag" "quote" "meta" "actions"; padding: 2.5rem 1.5rem; }
  .verse-card--wide .cluster { flex-direction: row; align-items: center; margin-top: 1.75rem; }
  .verse-card--wide .verse-card__quote { display: none; }
}

/* ---------- Featured project ---------- */
.project { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-xl); overflow: hidden; }
.project__media { position: relative; min-height: 340px; background: var(--c-surface-alt); }
.project__media img, .project__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project__body { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.project__body h3 { font-size: 2.25rem; margin-bottom: .75rem; }
.project__body h3 a { color: inherit; text-decoration: none; }
.project__body h3 a:hover { color: var(--c-red-ink); }
.project__body > p { color: var(--c-text-muted); }
.project__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin: 0 0 1rem; font-size: .8rem; color: var(--c-text-muted); }
.project__meta > *:not(.badge) { display: inline-flex; align-items: center; gap: .35rem; }
.project__meta .icon { width: .9rem; height: .9rem; color: var(--c-red-ink); }
.project .progress { margin: 1rem 0 2rem; }
@media (max-width: 900px) { .project { grid-template-columns: 1fr; } .project__body { padding: 2rem 1.5rem; } .project__media { min-height: 240px; } }

/* ---------- Media strip (video + photos) ---------- */
.media-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.25rem; height: 520px; }
.media-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--c-navy); border: 0; padding: 0; color: #fff; text-align: left; text-decoration: none; display: block; width: 100%; }
.media-card--video { grid-row: span 2; }
.media-card:nth-child(4) { grid-column: span 2; }
.media-card img, .media-card .ph { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .9s var(--ease), opacity .4s ease; }
.media-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 16, 43, 0.85) 0%, rgba(13, 16, 43, 0) 60%); pointer-events: none; }
.media-card:hover img, .media-card:hover .ph { transform: scale(1.06); opacity: 1; }
.media-card__label {
  position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.4rem; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: #fff;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2;
}
.media-card__label .icon { width: 1.2rem; height: 1.2rem; color: var(--c-gold); }
.media-card__label small { flex-basis: 100%; font-family: var(--font-body); font-size: .85rem; color: rgba(255, 255, 255, 0.7); }
.media-card--video .media-card__label { font-size: 2.2rem; }
.media-card__play {
  position: absolute; z-index: 2; left: 50%; top: 45%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: var(--transition);
}
.media-card__play::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(197, 160, 89, 0.5); animation: pulseRing 2.4s ease-out infinite; }
.media-card__play .icon { width: 1.75rem; height: 1.75rem; margin-left: 4px; fill: currentColor; }
.media-card--video:hover .media-card__play { background: var(--c-red); border-color: var(--c-red); transform: scale(1.08); }
@media (max-width: 900px) {
  .media-strip { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 200px; height: auto; }
  .media-card--video { grid-column: span 2; grid-row: span 2; }
  .media-card__play { top: 38%; }
  .media-card--video .media-card__label { font-size: 1.6rem; }
}
@media (max-width: 480px) { .media-strip { grid-auto-rows: 160px; } .media-card__label { font-size: 1.2rem; left: 1rem; right: 1rem; bottom: 1rem; } }

/* ---------- Get involved ---------- */
.involved-grid { gap: 2rem; }

/* =========================================================
   Inner pages
   ========================================================= */

/* Personality page: current feature card */
.personality-card {
  display: grid; gap: var(--s-5) var(--s-6); align-content: start; align-items: center; padding: 2.5rem;
  border-radius: var(--radius-xl); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-1);
}
@media (min-width: 600px) { .personality-card { grid-template-columns: auto 1fr; } }
.personality-card :is(h2, h3) { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: var(--s-1); }
.personality-card :is(h2, h3) a { color: inherit; text-decoration: none; }
.personality-card :is(h2, h3) a:hover { color: var(--c-red-ink); }

/* Legacy feature-project (kept for other templates) */
.feature-project { display: grid; gap: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-xl); overflow: hidden; }
.feature-project > * { min-width: 0; }
.feature-project__body { padding: var(--s-6); display: grid; gap: var(--s-3); align-content: center; }
@media (min-width: 1024px) { .feature-project { grid-template-columns: 1.1fr 1fr; } .feature-project .media { aspect-ratio: auto; height: 100%; } }
.feature-pair { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .feature-pair { grid-template-columns: 1.4fr 1fr; } }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.photo-grid button { padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: none; }
.photo-grid .media { aspect-ratio: 1; }
.photo-grid button:hover img { transform: scale(1.06); }

/* District page header stats */
.district-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--s-6); font-variant-numeric: tabular-nums; border-block: 1px solid rgba(255, 255, 255, 0.16); max-width: 640px; }
.district-stats div { display: flex; flex-direction: column; flex: 1; min-width: 120px; padding: 1rem 1.5rem 1rem 0; }
.district-stats div + div { border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: 1.5rem; }
.district-stats strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 2.4rem; line-height: 1.1; color: var(--c-gold); }
.district-stats span { font-size: .66rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .8; }

/* Profile page */
.profile-head { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 600px) { .profile-head { grid-template-columns: auto 1fr; } }
.page-header .avatar { outline-color: rgba(197, 160, 89, 0.7); }

/* Article */
.article-head { max-width: var(--measure); }
.article-figure { margin: 0 0 var(--s-6); }
.article-figure .media { border-radius: var(--radius-xl); }
.article-figure figcaption { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: var(--s-3); }
.byline { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .8rem; color: var(--c-text-muted); margin-bottom: var(--s-5); }
.page-header .byline { color: rgba(255, 255, 255, 0.72); }
.interview dt { margin-top: var(--s-5); font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--c-heading); }
.interview dd { margin: var(--s-2) 0 0; padding-left: 1.25rem; border-left: 2px solid var(--c-gold); }

/* Officers */
.office-history { display: grid; gap: var(--s-6); }
.office-history > * { min-width: 0; }
@media (min-width: 1024px) { .office-history { grid-template-columns: repeat(3, 1fr); } }
.demo-panel { border: 1px dashed var(--c-gold); border-radius: var(--radius-xl); padding: 2rem; background: var(--c-surface-alt); }
.demo-panel h2 { font-size: 1.75rem; }

/* Org chart (About › structure) */
.org-chart { display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.org-chart__level { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.org-chart__node { padding: 1.1rem 1.6rem; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-border); min-width: 180px; box-shadow: var(--shadow-1); }
.org-chart__node strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: var(--c-heading); }
.org-chart__node span { font-size: var(--fs-xs); color: var(--c-text-muted); }
.org-chart__node--main { background: var(--g-navy); border-color: transparent; }
.org-chart__node--main strong { color: #fff; }
.org-chart__node--main span { color: var(--c-gold); }
.org-chart__arrow { width: 1px; height: 28px; font-size: 0; background: linear-gradient(180deg, var(--c-red), var(--c-gold)); }

/* 404 */
.not-found { text-align: center; padding-block: var(--s-9); }

/* =========================================================
   Presbytery Officers
   ========================================================= */
/* Officers through the years: one aligned card per office */
.office-history { align-items: stretch; }
.office-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-xl); overflow: hidden; min-width: 0; }
.office-card__head { display: flex; align-items: center; gap: 1rem; min-height: 136px; padding: 1.5rem 1.75rem; background: var(--g-navy); color: #fff; }
.office-card__head h2 { color: #fff; font-size: 1.6rem; line-height: 1.1; margin: 0; }
.office-card__head p { margin: .2rem 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); }
.office-card__icon { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(197, 160, 89, 0.18); color: var(--c-gold); }
.office-card__icon .icon { width: 1.4rem; height: 1.4rem; }
.office-card__current { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 2rem 1.5rem 1.75rem; border-bottom: 1px solid var(--c-border); text-decoration: none; color: inherit; background: var(--c-surface-alt); }
.office-card__current .avatar { margin-bottom: .75rem; }
.office-card__current strong { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; color: var(--c-heading); }
.office-card__current:hover strong { color: var(--c-red-ink); }
.office-card__term { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--c-red-ink); }
.office-card__list { list-style: none; margin: 0; padding: .5rem 1rem 1rem; flex: 1; }
.office-card__list li + li { border-top: 1px solid var(--c-border); }
.person-term { display: flex; align-items: center; gap: 1rem; padding: .85rem .5rem; text-decoration: none; color: inherit; border-radius: 12px; }
a.person-term:hover { background: var(--c-bg); }
.person-term > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.person-term strong { font-weight: 600; color: var(--c-text); line-height: 1.3; }
a.person-term:hover strong { color: var(--c-red-ink); }
.person-term small { font-size: .78rem; color: var(--c-text-muted); }

/* All terms: searchable cards */
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.term-card { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s ease; }
.term-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--c-red) 30%, transparent); }
.term-card.is-current { border-color: var(--c-gold); box-shadow: inset 3px 0 0 var(--c-gold); }
.term-card__body { min-width: 0; }
.term-card .eyebrow { margin-bottom: .2rem; font-size: .62rem; }
.term-card h3 { font-size: 1.3rem; margin: 0 0 .2rem; }
.term-card h3 a { color: var(--c-heading); text-decoration: none; }
.term-card h3 a::after { content: ''; position: absolute; inset: 0; }
.term-card:hover h3 a { color: var(--c-red-ink); }
.term-card__period { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; color: var(--c-text-muted); }
.term-card__period .icon { width: .9rem; height: .9rem; color: var(--c-red-ink); }

/* Homepage: officers band + carousel */
.officers-band { position: relative; overflow: hidden; isolation: isolate; padding: var(--s-9) 0; color: #fff; background: linear-gradient(150deg, var(--c-navy) 0%, var(--c-blue) 110%); }
.officers-band .container { position: relative; z-index: 2; }
.officers-band h2 { color: #fff; }
.officers-band .display em { color: var(--c-gold); }
.officers-band .section__sub { color: rgba(255, 255, 255, 0.72); }
.officers-band__numeral {
  position: absolute; right: -2vw; top: 8%; z-index: 1; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-style: italic; font-size: clamp(10rem, 22vw, 22rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(197, 160, 89, 0.18);
}
.officer-carousel { --carousel-duration: 8s; }
.officer-carousel__stage { display: grid; }
.officer-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5rem; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .9s var(--ease-out), visibility .9s;
}
.officer-slide.is-active { opacity: 1; visibility: visible; }
.officer-slide__figure { position: relative; margin: 0 1.5rem 1.5rem 0; }
.officer-slide__figure::before { content: ''; position: absolute; top: 1.5rem; left: 1.5rem; right: -1.5rem; bottom: -1.5rem; border: 1px solid rgba(197, 160, 89, 0.55); }
.officer-slide__figure .portrait { position: relative; z-index: 1; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); transform: scale(.96); transition: transform 1.2s var(--ease-out); }
.officer-slide.is-active .officer-slide__figure .portrait { transform: none; }
.officer-slide__num { position: absolute; z-index: 2; left: -1.25rem; bottom: -2.25rem; font-family: var(--font-display); font-style: italic; font-size: clamp(4.5rem, 8vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c-gold); pointer-events: none; }
.officer-slide__body > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.officer-slide.is-active .officer-slide__body > * { opacity: 1; transform: none; }
.officer-slide.is-active .officer-slide__body > *:nth-child(2) { transition-delay: .1s; }
.officer-slide.is-active .officer-slide__body > *:nth-child(3) { transition-delay: .2s; }
.officer-slide.is-active .officer-slide__body > *:nth-child(n+4) { transition-delay: .3s; }
.officer-slide__name { font-size: clamp(2.6rem, 2rem + 2.6vw, 4.5rem); line-height: .98; color: #fff; margin-bottom: 1rem; }
.officer-slide__name em { display: block; color: var(--c-gold); }
.officer-slide__since { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 1.25rem; }
.officer-slide__since .icon { width: .95rem; height: .95rem; color: var(--c-gold); }
.officer-slide__bio { color: rgba(255, 255, 255, 0.8); font-size: 1.02rem; max-width: 36rem; }
.officer-carousel__bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.officer-carousel__thumbs { display: flex; gap: .75rem; flex-wrap: wrap; }
.officer-thumb {
  display: flex; align-items: center; gap: .8rem; padding: .5rem 1.1rem .5rem .5rem; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; background: rgba(255, 255, 255, 0.04); color: #fff;
  transition: var(--transition);
}
.officer-thumb .avatar--sm { width: 44px; height: 55px; outline: none; }
.officer-thumb span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.officer-thumb small { font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); }
.officer-thumb strong { font-size: .88rem; font-weight: 600; }
.officer-thumb:hover { background: rgba(255, 255, 255, 0.1); }
.officer-thumb.is-active { background: #fff; color: var(--c-blue); border-color: #fff; }
.officer-thumb.is-active small { color: #C8161E; } /* always on white */
.officer-carousel__controls { display: flex; align-items: center; gap: .75rem; flex: none; }
.carousel__progress { position: relative; width: 140px; height: 1px; background: rgba(255, 255, 255, 0.2); overflow: hidden; margin-right: .75rem; }
.carousel__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--c-red), var(--c-gold)); }
.carousel__fill.is-running { animation: heroProgress var(--carousel-duration) linear forwards; }
.officer-carousel.is-paused .carousel__fill, .officer-carousel.is-offscreen .carousel__fill { animation-play-state: paused; }
.officer-carousel.no-autoplay .carousel__fill { animation: none; transform: scaleX(1); opacity: .35; }
.officer-carousel .js-carousel-pause .i-play { display: none; fill: currentColor; }
.officer-carousel .js-carousel-pause[aria-pressed="true"] .i-pause { display: none; }
.officer-carousel .js-carousel-pause[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 1100px) { .officer-slide { gap: 3rem; } .officer-carousel__bar { flex-direction: column; align-items: flex-start; } }
@media (max-width: 900px) {
  .officers-band { padding: 5rem 0; }
  .officer-slide { grid-template-columns: 1fr; gap: 3rem; }
  .officer-slide__figure { max-width: 380px; }
  .officer-thumb span:last-child { display: none; }
  .officer-thumb { padding: .35rem; }
}

/* Groups */
.group-section + .group-section { margin-top: var(--s-8); }
.officer-slide .portrait__note { left: auto; right: .75rem; bottom: auto; top: .75rem; }