/* =========================================================================
   org-chart.css — "Meet the team" org chart on the home page.
   Uses the page's palette; the red glow on the connector lines is the only
   new accent. Cards match the site's existing card style.
   ========================================================================= */

#org{ overflow-x:clip }

/* ---------- entry cue ---------- */
.org-cue{ display:flex; flex-direction:column; align-items:center; gap:14px; margin:0; text-align:center;
          font-size:14px; font-weight:500; letter-spacing:.02em; color:#C9BEB4 }
.org-cue-line{ width:1px; height:44px; background:linear-gradient(rgba(224,49,49,.9), rgba(224,49,49,0)) }
/* a small spark runs down the cue line a few times, then rests */
.org-cue-line{ position:relative; overflow:hidden }
.org-cue-line::after{ content:""; position:absolute; left:-1px; top:-14px; width:3px; height:14px; border-radius:2px; opacity:0;
                      background:linear-gradient(rgba(224,49,49,0), #E03131) }
.org-cue.is-live .org-cue-line::after{ animation:orgCue 1.9s cubic-bezier(.55,0,.45,1) .3s 3 both }
@keyframes orgCue{ 0%{ transform:translateY(0); opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ transform:translateY(58px); opacity:0 } }
.org-lead-in{ height:32vh; min-height:180px }          /* extra page so the chart arrives by scrolling */
#org .head{ margin-bottom:56px }

/* ---------- chart container + lines ---------- */
.org-chart{ position:relative }
.org-lines{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; z-index:0 }
.org-lines path{ fill:none; stroke:#E03131; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }

/* ---------- slots (static, measured) and cards (move in Stage 3) ---------- */
.org-slot{ position:relative; z-index:1 }
.org-card{ background:#141211; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
           padding:20px 16px 22px; height:100%; box-sizing:border-box }

/* person card: tall and vertical — avatar on top, then role, name, bio */
.org-body{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px }
.org-body > .photo{ width:56px; height:56px; border-radius:50%; margin-bottom:12px; flex:none }
.org-body > .photo .tile{ font-size:18px }
.org-role{ color:#D9A441; font-size:12.5px; font-weight:600; line-height:1.3 }
.org-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; line-height:1.25; letter-spacing:-.01em }

/* rank sets the height and scale */
.org-card[data-type="president"]{ min-height:300px; padding:30px 26px 30px }
.org-card[data-type="president"] .org-body > .photo{ width:96px; height:96px; margin-bottom:16px }
.org-card[data-type="president"] .photo .tile{ font-size:30px }
.org-card[data-type="president"] .org-role{ font-size:14px }
.org-card[data-type="president"] .org-name{ font-size:24px }
.org-card[data-type="vp"]{ min-height:262px; padding:26px 22px 26px }
.org-card[data-type="vp"] .org-body > .photo{ width:78px; height:78px; margin-bottom:14px }
.org-card[data-type="vp"] .org-name{ font-size:20px }
.org-card[data-type="officer"]{ min-height:232px }
.org-card[data-type="officer"] .org-body > .photo{ width:64px; height:64px }
.org-card[data-type="officer"] .org-name{ font-size:17px }
.org-card[data-type="director"]{ min-height:228px }
.org-card[data-type="lead"]{ min-height:206px }
.org-card[data-type="lead"] .org-body > .photo{ width:48px; height:48px }

/* clickable cards: content centred in the tall card; the bio opens in a pop-up */
.org-card[role="button"]{ display:flex; flex-direction:column; justify-content:center; cursor:pointer; transition:box-shadow .25s ease }
.org-card[role="button"]:hover, .org-card.is-open{ box-shadow:inset 0 0 0 1px rgba(217,164,65,.45) }
.org-card[role="button"]:focus-visible, .org-members li[role="button"]:focus-visible{ outline:2px solid #E03131; outline-offset:3px }

/* photos stay gray until their card (or member row) is hovered, focused, or open */
.org-chart .photo{ filter:grayscale(1); transition:filter .35s ease }
.org-card[role="button"]:hover .photo, .org-card[role="button"]:focus-visible .photo, .org-card.is-open .photo,
.org-members li:hover .photo, .org-members li:focus-visible .photo, .org-members li.is-open .photo{ filter:none }

/* crew (members) card */
.org-card[data-type="group"]{ background:#100e0d; padding:16px 14px 18px }
.org-card[data-type="group"] .org-body{ display:block; text-align:left }
.org-group-title{ font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; margin:0 0 12px; color:#F2EDE7 }
.org-members{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.org-members li{ display:grid; grid-template-columns:auto 1fr; gap:1px 9px; align-items:center;
                 cursor:pointer; border-radius:8px; padding:4px; margin:-4px; transition:background-color .2s ease }
.org-members li:hover, .org-members li.is-open{ background:rgba(255,255,255,.05) }
.org-members .photo{ width:28px; height:28px; border-radius:50%; grid-row:1 / span 2 }
.org-members .photo .tile svg{ width:70% !important; height:70% !important }
.org-m-name{ font-size:12.5px; font-weight:600; line-height:1.2 }
.org-m-role{ font-size:11.5px; color:#A89C92; line-height:1.2 }

/* =========================================================================
   TREE (wide screens)
   ========================================================================= */
.org-tree{ position:relative }
.org-row{ display:flex; justify-content:center; position:relative; z-index:1 }
.org-row + .org-row{ margin-top:72px }
.org-chain{ flex-direction:column; align-items:center; gap:22px }
.org-chain .org-slot[data-type="president"]{ width:min(360px, 100%) }
.org-chain .org-slot[data-type="vp"]{ width:min(310px, 100%) }
.org-chain .org-slot[data-type="group"]{ width:min(280px, 100%) }

/* officers hang off the VP line: left group | gap for the trunk | right group */
.org-officers{ display:grid; grid-template-columns:1fr 150px 1fr; align-items:start }
.org-side{ display:flex; gap:14px }
.org-side.left{ justify-content:flex-end }
.org-side.right{ justify-content:flex-start }
.org-officer{ display:flex; flex-direction:column; gap:22px; width:250px }

/* directors: one column each; leads stack on a spine down the column,
   and a crew sits directly under the person it belongs to */
.org-cols{ display:flex; justify-content:center; align-items:flex-start; gap:var(--org-col-gap, 14px) }
.org-col{ width:var(--org-col, 180px); display:flex; flex-direction:column; gap:22px }
.org-col .org-slot{ margin-left:calc(var(--depth, 0) * 22px) }
.org-col .org-card{ padding:18px 12px 20px }
.org-col .org-card[data-type="group"]{ padding:14px 10px 16px }
.org-col .org-members li{ gap:1px 7px }
.org-col .org-members .photo{ width:24px; height:24px }
.org-col .org-body > .photo{ width:48px; height:48px; margin-bottom:10px }
.org-col .org-card[data-type="director"] .org-body > .photo{ width:56px; height:56px }

/* =========================================================================
   STACK (narrow screens) — indented list, same spine-and-tick lines
   ========================================================================= */
.org-stack{ position:relative; display:flex; flex-direction:column; gap:16px }
.org-stack .org-slot{ margin-left:calc(min(var(--depth, 0), 4) * 24px) }
.org-stack .org-card{ min-height:0 }
.org-stack .org-card[data-type="president"]{ min-height:250px }
.org-stack .org-card[data-type="president"] .org-body > .photo{ width:80px; height:80px }
.org-stack .org-card[data-type="president"] .org-name{ font-size:21px }
.org-stack .org-card[data-type="vp"]{ min-height:220px }
.org-stack .org-card[data-type="officer"], .org-stack .org-card[data-type="director"]{ min-height:196px }
.org-stack .org-card[data-type="lead"]{ min-height:180px }

/* =========================================================================
   BIO POP-UP — centred on screen; the whole page blurs out behind it
   ========================================================================= */
.org-pop-backdrop{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px 16px;
                   background:rgba(11,10,10,.58); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
                   animation:orgFade .22s ease-out }
.org-pop-backdrop[hidden]{ display:none }
.org-pop{ position:relative; width:min(400px, 100%); max-height:calc(100vh - 48px); overflow:auto; box-sizing:border-box;
          padding:36px 30px 30px; text-align:center; background:#141211; border-radius:18px; color:#F2EDE7;
          box-shadow:inset 0 0 0 1px rgba(217,164,65,.3), 0 40px 100px -24px rgba(0,0,0,.9);
          animation:orgPopIn .32s cubic-bezier(.16,1,.3,1) }
@keyframes orgFade{ from{ opacity:0 } }
@keyframes orgPopIn{ from{ opacity:0; transform:translateY(10px) scale(.97) } }
.org-pop-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:9px;
                background:#1f1b19; color:#F2EDE7; font-size:20px; line-height:1; cursor:pointer }
.org-pop-close:hover{ background:#2a2522 }
.org-pop-close:focus-visible, .org-pop-link:focus-visible{ outline:2px solid #E03131; outline-offset:3px }
.org-pop-photo{ display:flex; justify-content:center; margin-bottom:18px }
.org-pop-photo .photo{ width:104px; height:104px; border-radius:50%; filter:none }
.org-pop-photo .photo .tile{ font-size:32px }
.org-pop-role{ margin:0; color:#D9A441; font-size:13.5px; font-weight:600; line-height:1.35 }
.org-pop-name{ margin:4px 0 14px; font-family:'Archivo',sans-serif; font-weight:700; font-size:24px; line-height:1.2; letter-spacing:-.01em }
.org-pop-bio{ margin:0; color:#C9BEB4; font-size:15px; line-height:1.6 }
.org-pop-link{ display:inline-block; margin-top:18px; padding:9px 16px; border-radius:8px; color:#D9A441; font-size:14px; font-weight:600;
               box-shadow:inset 0 0 0 1px rgba(217,164,65,.4) }
.org-pop-link:hover{ box-shadow:inset 0 0 0 1px #D9A441 }
.org-pop-link[hidden]{ display:none }
@media (prefers-reduced-motion: reduce){ .org-pop-backdrop, .org-pop{ animation:none } .org-chart .photo{ transition:none } }

/* =========================================================================
   REVEAL — only when org-chart.js adds .org-anim (never with reduced motion).
   A card waits hidden until its slot gets .is-in, which is never removed.
   Timings come from MOTION in org-chart.js.
   ========================================================================= */
.org-anim .org-card{ transition:transform var(--org-rise-ms) var(--org-ease), opacity var(--org-rise-ms) var(--org-ease), box-shadow .25s ease }
.org-anim .org-slot[data-enter="left"] .org-card,
.org-anim .org-slot[data-enter="right"] .org-card{ transition:transform var(--org-slide-ms) var(--org-ease), opacity .2s linear, box-shadow .25s ease }
.org-anim .org-slot:not(.is-in) .org-card{ opacity:0; transform:translateY(var(--org-rise-y)) }
.org-anim .org-slot[data-enter="right"]:not(.is-in) .org-card{ transform:translateX(var(--org-slide-x)) }
.org-anim .org-slot[data-enter="left"]:not(.is-in) .org-card{ transform:translateX(calc(-1 * var(--org-slide-x))) }
.org-anim .org-body{ transition:opacity var(--org-content-ms) ease var(--org-content-delay) }
.org-anim .org-slot:not(.is-in) .org-body{ opacity:0 }
.org-anim .org-lines path.is-hidden{ opacity:0 }
@media (prefers-reduced-motion: reduce){ .org-cue.is-live .org-cue-line::after{ animation:none } }