*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{position:relative;min-height:100vh;background:var(--bg);color:var(--color-argent);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
canvas{display:block}
/* hero: sticky stage, content flows after */
#hero{position:relative;height:260vh}
#pin{position:sticky;top:0;height:100vh;overflow:hidden}
#stage{position:absolute;inset:0;z-index:1}
#fallback{position:absolute;z-index:1;display:none;left:50%;top:46%;transform:translate(-50%,-50%);width:min(760px,92vw)}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 95% at 50% 42%,rgba(20,18,16,0) 34%,rgba(18,16,14,.55) 72%,var(--bg-deep) 100%)}
/* nav */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(22px,5vw,64px);pointer-events:none;transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent}
nav#nav.solid{background:rgba(18,16,14,.72);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}
/* Brandmark: the heraldic crest sits before the NSCOESN wordmark, mirroring the crest-before-title
   treatment on gg.ca. The crest is decorative (alt=""); the wordmark carries the accessible name.
   Height scales down a touch on narrow screens; it rides the nav's own show/hide, no extra rules. */
.brandmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--color-argent);text-decoration:none;pointer-events:auto}
.brandmark__crest{display:block;width:auto;height:clamp(38px,4.6vw,46px);flex:0 0 auto}
.brandmark__word{line-height:1}
.navwrap{display:flex;align-items:center;gap:26px;pointer-events:auto}
.navlinks{display:flex;gap:6px}
.item{position:relative;padding:6px 0}
.item>.top{font-size:14px;color:rgba(240,237,232,.72);text-decoration:none;padding:6px 12px;transition:color .2s;cursor:pointer;white-space:nowrap;background:none;border:0;font-family:var(--font-body)}
.item>.top:hover{color:var(--color-argent)}
.item>.top.red{color:var(--color-gules);font-weight:600}
.item>.top.red:hover{color:#c40000}
.dropdown{position:absolute;top:100%;left:0;min-width:220px;max-height:min(72vh,540px);overflow-y:auto;background:rgba(16,14,12,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--color-border);border-radius:7px;padding:7px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.item:hover .dropdown,.item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;font-size:13px;color:rgba(240,237,232,.66);text-decoration:none;border-radius:4px;white-space:nowrap}
.dropdown a:hover{color:var(--color-argent);background:rgba(240,237,232,.05)}
.dropdown-label{display:block;padding:12px 12px 5px;margin-top:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-or);border-top:1px solid var(--color-border);cursor:default;user-select:none}
.dropdown-label:first-child{border-top:0;margin-top:0}
.dropdown a.dropdown-sub{padding-left:24px}
.dropdown a.dropdown-sub::before{content:"";display:inline-block;width:6px;height:1px;background:var(--color-or);vertical-align:middle;margin-right:8px;opacity:.7}
.ovsub-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--color-or);padding:10px 0 3px;cursor:default;user-select:none}
.ovsub a.ov-sub{padding-left:18px;opacity:.92}
.dropdown a.dropdown-sub{padding-left:24px;position:relative}
.dropdown a.dropdown-sub::before{content:"";position:absolute;left:13px;top:50%;width:4px;height:1px;background:var(--color-border)}
.ovsub a.ov-sub{padding-left:18px}
.langtoggle{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;background:none;border:1px solid var(--color-border);color:var(--color-or);padding:6px 12px;border-radius:999px;cursor:pointer;text-decoration:none;transition:border-color .2s}
.langtoggle:hover{border-color:rgba(201,162,48,.6)}
.langswitch{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em}
.langswitch a{color:var(--color-or);text-decoration:none;padding:6px 12px;border:1px solid var(--color-border);border-radius:999px;line-height:1}
.langswitch a:hover{border-color:rgba(201,162,48,.6)}
.langswitch img,.langswitch .trp-flag-image{display:none!important}
.langswitch .trp-language-switcher,.langswitch .trp-ls-shortcode-language,.langswitch .trp-ls-shortcode-current-language{display:inline-flex;align-items:center;gap:6px;background:none;border:0;box-shadow:none;padding:0}
.hamburger{display:none;pointer-events:auto;width:34px;height:26px;background:none;border:0;cursor:pointer;position:relative}
.hamburger span{position:absolute;left:4px;right:4px;height:1.6px;background:var(--color-argent);transition:transform .32s,opacity .2s}
.hamburger span:nth-child(1){top:5px}.hamburger span:nth-child(2){top:12px}.hamburger span:nth-child(3){top:19px}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mobile overlay */
.overlay{position:fixed;inset:0;z-index:28;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow-y:auto;padding:80px 24px 40px;background:rgba(14,12,11,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;pointer-events:none}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.ov-group{display:flex;flex-direction:column;align-items:center}
.ovlink{font-family:var(--font-display);font-size:26px;color:var(--color-argent);text-decoration:none;padding:8px 0;opacity:.94;cursor:pointer;background:none;border:0}
.ovlink.red{color:var(--color-gules)}
.ov-parent::after{content:" +";color:var(--color-or);font-size:18px}
.ov-group.open .ov-parent::after{content:" \2013"}
.ovsub{display:none;flex-direction:column;align-items:center;gap:1px;margin:0 0 8px}
.ov-group.open .ovsub{display:flex}
.ovsub a{font-family:var(--font-body);font-size:15px;color:rgba(240,237,232,.6);text-decoration:none;padding:5px}
.ovbottom{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:16px}
.ovcta{background:var(--color-gules);color:var(--color-argent);text-decoration:none;font-size:15px;padding:13px 30px;border-radius:2px}
/* panels */
.panel{position:absolute;left:50%;z-index:4;width:min(720px,92vw);transform:translateX(-50%);text-align:center;pointer-events:none;will-change:transform,opacity}
.glass{display:inline-block;padding:26px 34px;border:1px solid var(--color-border);border-radius:6px;background:rgba(20,18,16,.4);backdrop-filter:blur(13px) saturate(1.08);-webkit-backdrop-filter:blur(13px) saturate(1.08);box-shadow:0 24px 60px rgba(0,0,0,.5)}
#panelA{top:58%}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--color-or);margin-bottom:13px}
h1.hero-title{font-family:var(--font-display);font-weight:700;line-height:1.05;font-size:clamp(27px,4vw,54px)}
.motto{margin-top:15px;font-family:var(--font-display);font-style:italic;font-size:14px;letter-spacing:.08em;color:var(--color-or)}
#panelB{top:46%;opacity:0}
.mission{font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:rgba(240,237,232,.85);max-width:50ch;margin:0 auto}
.triad{display:flex;justify-content:center;gap:30px;margin:24px auto 4px;max-width:620px}
.tcol{flex:1}
.tword{font-family:var(--font-display);font-size:20px;color:var(--color-argent)}
.tdesc{margin-top:6px;font-size:11.5px;line-height:1.5;color:rgba(240,237,232,.55)}
.cta{display:flex;justify-content:center;gap:14px;margin-top:24px;pointer-events:auto}
.cta a{font-size:14px;padding:12px 22px;border-radius:2px;text-decoration:none}
.cta .primary{background:var(--color-gules);color:var(--color-argent)}
.cta .ghost{border:1px solid var(--color-border);color:var(--color-argent)}
.hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,237,232,.4)}
.hint::after{content:"";display:block;width:1px;height:22px;margin:9px auto 0;background:linear-gradient(var(--color-or),transparent)}
/* Hero image note: a discreet "About this image" toggle in the bottom-right of
   the hero. Native <details> (works with no JS, keyboard-accessible); the panel
   opens UPWARD via column-reverse since the control sits at the bottom. Copy is
   editable + translatable (NSCOESN > Home page). */
.hero-imgnote{position:absolute;right:clamp(16px,3vw,34px);bottom:18px;z-index:5;display:flex;flex-direction:column-reverse;align-items:flex-end;max-width:min(360px,82vw)}
.hero-imgnote__toggle{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,237,232,.42);transition:color .2s;user-select:none;border-bottom:1px solid transparent;padding-bottom:2px}
.hero-imgnote__toggle::-webkit-details-marker{display:none}
.hero-imgnote__toggle::marker{content:""}
.hero-imgnote__toggle:hover{color:var(--color-or);border-bottom-color:rgba(201,162,48,.4)}
.hero-imgnote[open] .hero-imgnote__toggle{color:var(--color-or);border-bottom-color:rgba(201,162,48,.4)}
.hero-imgnote__panel{margin-bottom:10px;background:var(--color-surface-glass);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid var(--color-border);border-radius:10px;padding:15px 17px;text-align:left;color:rgba(240,237,232,.84);font-size:13px;line-height:1.62;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.hero-imgnote__panel p{margin:0}
/* content sections */
.section{position:relative;z-index:6;background:var(--bg-deep);padding:clamp(64px,10vw,120px) clamp(22px,5vw,64px)}
.wrap{max-width:1100px;margin:0 auto}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--color-or);margin-bottom:34px;text-align:center}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pillar{display:block;border:1px solid var(--color-border);border-radius:8px;padding:30px 26px;background:var(--color-surface-glass);text-decoration:none;color:inherit;transition:border-color .25s,transform .25s}
.pillar:hover{border-color:var(--color-gules);transform:translateY(-3px)}
.pillar h3{font-family:var(--font-display);font-size:24px;margin-bottom:12px}
.pillar p{font-size:14px;line-height:1.6;color:rgba(240,237,232,.7)}
/* footer */
.site-footer{position:relative;z-index:6;background:#0b0a09;border-top:1px solid var(--color-border);padding:52px clamp(22px,5vw,64px) 26px}
.foot-inner{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.fbrand{font-family:var(--font-display);font-weight:700;font-size:19px}
.faddr{margin-top:10px;font-size:12.5px;line-height:1.7;color:rgba(240,237,232,.55)}
.flinks{display:flex;flex-wrap:wrap;gap:18px}
.flinks a{font-size:13px;color:rgba(240,237,232,.62);text-decoration:none}
.flinks a:hover{color:var(--color-argent)}
.fcopy{margin-top:28px;padding-top:18px;border-top:1px solid var(--color-border);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:rgba(240,237,232,.4)}
/* inner pages */
.page-hero{position:relative;z-index:6;background:var(--bg);padding:clamp(118px,17vh,182px) clamp(22px,5vw,64px) clamp(40px,7vh,70px);border-bottom:1px solid var(--color-border)}
.page-hero .wrap{max-width:1100px;margin:0 auto}
.page-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--color-or);margin-bottom:16px}
.page-title{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.03}
.page-lead{margin-top:20px;max-width:58ch;font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:rgba(240,237,232,.8)}
.section--alt{background:var(--bg)}
.prose{max-width:66ch;margin:0 auto;color:rgba(240,237,232,.82);font-size:16px;line-height:1.75}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3vw,32px);color:var(--color-argent);margin:0 0 18px}
.prose p{margin:0 0 18px}.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--color-argent);font-weight:600}
.center{text-align:center}
.arms-figure{margin:0 auto 8px;max-width:520px;position:relative}
.arms-figure::before{content:"";position:absolute;inset:-10% -8% -2%;background:radial-gradient(58% 54% at 50% 42%,rgba(201,162,48,.13),rgba(20,18,16,0) 70%);z-index:0}
.arms-figure img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 24px 60px rgba(0,0,0,.55))}
.motto-big{font-family:var(--font-display);font-style:italic;font-size:clamp(22px,3.2vw,34px);color:var(--color-or);text-align:center;margin:30px 0 6px}
.motto-gloss{text-align:center;font-size:14px;letter-spacing:.05em;color:rgba(240,237,232,.6)}
.gglink{display:inline-block;margin-top:8px;font-size:13px;color:var(--color-or);text-decoration:none;border-bottom:1px solid rgba(201,162,48,.4);padding-bottom:2px}
.gglink:hover{color:var(--color-argent)}
/* organisation */
.deptgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:0 auto}
.dept{border:1px solid var(--color-border);border-radius:8px;padding:28px 24px;background:var(--color-surface-glass)}
.dept-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-or)}
.dept h3{font-family:var(--font-display);font-size:22px;margin:8px 0 12px}
.dept p{font-size:13.5px;line-height:1.6;color:rgba(240,237,232,.72);margin-bottom:16px}
.branches{list-style:none;padding:14px 0 0;margin:0;border-top:1px solid var(--color-border)}
.branches li{font-size:13px;color:rgba(240,237,232,.66);padding:4px 0}
/* department "Details" affordance (opens the shared modal used by People) */
.dept-more{display:inline-block;margin-top:14px;padding:0;background:none;border:0;cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--color-or);border-bottom:1px solid rgba(201,162,48,.4);line-height:1.4}
.dept-more:hover{color:var(--color-argent)}
.dept-more:focus-visible{outline:2px solid var(--color-or);outline-offset:3px;border-radius:2px}
.dept-more::after{content:" \2192"}
/* reusable boxed card (Courses, Research overview, and any future page). The
   colour and box live on the block class, so cards survive Columns/groups and
   any width, and render the same in the editor. Used as a Group block with
   className "info-card". */
.info-card{position:relative;height:100%;border:1px solid var(--color-border);border-left:4px solid var(--color-or);border-radius:12px;background:var(--color-surface-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:26px 28px;margin:0 0 22px;transition:border-color .25s,transform .25s,box-shadow .25s}
.info-card:hover{border-color:var(--color-or);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.info-card h3{margin:0 0 4px}
.info-card h4{margin:0 0 12px !important;text-align:left !important}
.info-card p{margin:0 0 14px}
.info-card p:last-child{margin:0}
.info-card .gglink{margin-top:2px}
/* even-height columns when they hold info-cards */
.page-body .wp-block-columns:has(.info-card) .wp-block-column{display:flex;flex-direction:column}
/* info-cards placed side by side in a bare Row/Columns wrapper (no info-grid class): fold each
   card's own bottom margin, give the wrapper the trailing rhythm a stacked group carries, and
   force even heights (core flex layout defaults to align-items:center, which left the cards
   vertically offset). On phones/portrait tablets the row stacks instead of squeezing. */
.page-body .wp-block-columns:has(.info-card),
.page-body .is-layout-flex:has(> .info-card){margin-bottom:22px}
.page-body .wp-block-columns:has(.info-card) .info-card,
.page-body .is-layout-flex:has(> .info-card) > .info-card{margin-bottom:0}
.page-body .is-layout-flex:has(> .info-card){align-items:stretch}
/* .info-grid: the canonical two-up card layout. Author it as a Group with className "info-grid"
   and drop the info-cards straight in. It renders the SAME on the front end AND in the editor,
   INDEPENDENT of the Gutenberg layout type: two even-height columns when there's room, one
   stacked column on small screens. We force grid over whatever is-layout-* class the editor emits
   (flow / constrained / flex - i.e. Group, Row, or Stack), so flipping the wrapper type no longer
   changes the result, leaves tall half-empty cards, or shows differently in the editor vs live. */
.info-grid,
.info-grid.is-layout-flow,
.info-grid.is-layout-constrained,
.info-grid.is-layout-flex{display:grid !important;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch;max-width:1080px;margin:0 auto 22px}
.info-grid > .info-card{margin:0;height:auto}
/* Stack on phones and portrait tablets. 781px so an iPad in portrait (768) stacks too;
   landscape / larger iPads keep the two columns. */
@media (max-width:781px){
  .info-grid,.info-grid.is-layout-flow,.info-grid.is-layout-constrained,.info-grid.is-layout-flex{grid-template-columns:1fr}
  .page-body .is-layout-flex:has(> .info-card){flex-direction:column}
}
.board{max-width:820px;margin:0 auto}
.board-item{border-top:1px solid var(--color-border);padding:20px 0}
.board-item:first-child{border-top:0}
.board-term{font-family:var(--font-display);font-size:19px;color:var(--color-argent);margin-bottom:6px}
.board-desc{font-size:14px;line-height:1.65;color:rgba(240,237,232,.72)}
/* editable page body */
.page-body{padding:56px 0 8px}
.page-body :where(p){font-size:16px;line-height:1.75;color:rgba(240,237,232,.82);margin:0 0 18px}
.page-body :where(h2){font-family:var(--font-display);font-weight:600;font-size:30px;color:var(--color-argent);margin:46px 0 16px}
.page-body :where(h3){font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--color-argent);margin:32px 0 12px}
/* H4 heading block = the small gold kicker label (replaces the old [nscoesn_kicker] shortcode; style lives here only) */
.page-body :where(h4){font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--color-or);margin:36px 0 16px}
.page-body h4:not([class*="has-text-align"]){text-align:center}
.page-body :where(ul,ol){color:rgba(240,237,232,.82);line-height:1.7;margin:0 0 18px;padding-left:1.2em}
.page-body :where(strong){color:var(--color-argent)}
.page-body :where(a){color:var(--color-or)}
.page-body > *{max-width:720px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px;box-sizing:border-box}
.page-body > .alignwide{max-width:1120px}
.page-body > .alignfull{max-width:none;padding-left:0;padding-right:0}
.page-body > section,.page-body > .section{max-width:none;padding-left:0;padding-right:0}
.arms-block{text-align:center;margin:36px auto}
.has-text-align-center{text-align:center}
.has-text-align-left{text-align:left}
.has-text-align-right{text-align:right}
.page-body .aligncenter{margin-left:auto;margin-right:auto}
/* people */
.peoplegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
.person-card{border:1px solid var(--color-border);border-radius:8px;padding:26px 22px;background:var(--color-surface-glass);text-align:center;transition:border-color .25s,transform .25s}
button.person-card--clickable{display:block;width:100%;font:inherit;color:inherit;cursor:pointer}
.person-card--clickable:hover{border-color:var(--color-gules);transform:translateY(-3px)}
.person-card--clickable:focus-visible{outline:2px solid var(--color-or);outline-offset:3px}
.person-photo{width:104px;height:104px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:1px solid var(--color-border)}
.person-photo img{width:100%;height:100%;object-fit:cover;display:block}
.person-photo--ph{display:flex;align-items:center;justify-content:center;background:rgba(240,237,232,.05)}
.person-photo--ph span{font-family:var(--font-display);font-size:38px;color:rgba(240,237,232,.4)}
.person-name{font-family:var(--font-display);font-size:20px}
.person-role{font-size:13px;color:var(--color-or);margin-top:4px}
.person-aff{font-size:12.5px;color:rgba(240,237,232,.55);margin-top:2px}
.person-bio{font-size:13px;line-height:1.6;color:rgba(240,237,232,.7);margin-top:12px}
.person-link{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-or);text-decoration:none;border-bottom:1px solid rgba(201,162,48,.4)}
.person-tagline{font-size:13px;line-height:1.55;color:rgba(240,237,232,.72);margin-top:10px}
.person-more{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-or)}
.person-card--clickable:hover .person-more{color:var(--color-argent)}
/* person bio modal: markup is in the page (hidden) so TranslatePress reaches it */
.person-modal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(40px,9vh,110px) 20px 40px}
.person-modal.is-open{display:flex}
.person-modal-backdrop{position:fixed;inset:0;background:rgba(14,12,11,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.person-modal-card{position:relative;z-index:1;width:100%;max-width:620px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:44px 40px 40px;text-align:center;animation:person-modal-in .28s ease}
@keyframes person-modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.person-modal-card .person-photo{width:120px;height:120px}
.person-modal-close{position:absolute;top:12px;right:16px;background:none;border:0;color:rgba(240,237,232,.6);font-size:30px;line-height:1;cursor:pointer;padding:4px 8px}
.person-modal-close:hover{color:var(--color-argent)}
.person-modal-close:focus-visible{outline:2px solid var(--color-or);outline-offset:2px;border-radius:4px}
.person-modal-name{font-family:var(--font-display);font-size:26px;color:var(--color-argent)}
.person-modal-bio{margin:20px auto 0;text-align:left;font-size:15px}
.person-modal-bio p:last-child{margin-bottom:0}
@media(max-width:820px){
 .navwrap{display:none}.hamburger{display:block}
 #panelA{top:50%}#panelB{top:50%}
 .glass{padding:20px 18px}
 h1.hero-title{font-size:27px}.mission{font-size:13.5px}
 .triad{flex-direction:column;gap:12px;text-align:center}
 .tword{font-size:17px}.tdesc{font-size:11px}
 .cta{flex-direction:column;gap:10px}
 .pillars{grid-template-columns:1fr;gap:16px}
 .deptgrid{grid-template-columns:1fr}
 .peoplegrid{grid-template-columns:1fr}
 .person-modal-card{padding:40px 22px 30px}
}
body.person-modal-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.person-modal-card{animation:none}}


/* ============================================================
   GC Advisory Board org chart ([nscoesn_board])
   Boxes are real (translatable) HTML text; layout only here.
   Connector lines are drawn into .bt-links by assets/js/board.js,
   so they follow any per-parent layout. Line look set by
   .board-tree--solid / --dashed / --dotted.
   ============================================================ */
.board-tree{ --bt-line: rgba(201,162,48,.6); --bt-gap: 32px;
  position:relative; overflow-x:auto; padding:10px 2px 14px; max-width:1100px; margin:0 auto; }
.board-tree ul{ list-style:none; margin:0; padding:0; }
.board-tree .bt-level{ display:flex; flex-direction:column; justify-content:center; }
.board-tree .bt-node{ display:flex; align-items:center; position:relative; }

/* left-to-right (default): children beside the parent */
.board-tree .bt-o-lr.bt-a-left{ flex-direction:row; align-items:flex-start; }
/* a parent with several children centres on its column, so it meets the spine's middle */
.board-tree .bt-o-lr.bt-a-left.bt-multi{ align-items:center; }
.board-tree .bt-o-lr.bt-a-left > .bt-level{ margin-left:var(--bt-gap); }
/* left-to-right + balanced: children split to the left and right */
.board-tree .bt-o-lr.bt-a-bal{ flex-direction:row; align-items:center; }
.board-tree .bt-o-lr.bt-a-bal > .bt-side-a{ margin-right:var(--bt-gap); }
.board-tree .bt-o-lr.bt-a-bal > .bt-side-b{ margin-left:var(--bt-gap); }
/* top-to-bottom: children below the parent */
.board-tree .bt-o-tb.bt-a-left{ flex-direction:column; align-items:flex-start; }
.board-tree .bt-o-tb.bt-a-left > .bt-level{ margin-top:var(--bt-gap); margin-left:var(--bt-gap); }
/* top-to-bottom + balanced: two equal columns below, parent centred over them.
   board.js equalizes the two columns to the same width; boxes then line up by
   their outer edges (bt-e-out) or their inner edges toward the trunk (bt-e-in).
   margin-top:0 keeps every vertical gap equal to the sibling gap (box margins). */
.board-tree .bt-o-tb.bt-a-bal{ flex-direction:column; align-items:center; }
.board-tree .bt-o-tb.bt-a-bal > .bt-split{ display:flex; flex-direction:row;
  gap:var(--bt-gap); margin-top:0; align-items:flex-start; }
.board-tree .bt-e-out > .bt-split > .bt-side-a > .bt-node{ justify-content:flex-start; }
.board-tree .bt-e-out > .bt-split > .bt-side-b > .bt-node{ justify-content:flex-end; }
.board-tree .bt-e-in  > .bt-split > .bt-side-a > .bt-node{ justify-content:flex-end; }
.board-tree .bt-e-in  > .bt-split > .bt-side-b > .bt-node{ justify-content:flex-start; }

.board-tree .bt-box{
  position:relative; z-index:1; display:inline-block; max-width:340px; white-space:normal;
  font-family:var(--font-body, "Inter", system-ui, sans-serif); font-size:14px; line-height:1.35;
  color:var(--color-argent, #F0EDE8); background:var(--color-surface-glass, rgba(36,36,36,.72));
  border:1px solid var(--color-border, rgba(240,237,232,.18)); border-radius:10px;
  padding:10px 14px; margin:8px 12px;
}
/* balanced-branch boxes: keep to one line, and drop side margins so a column is
   exactly as wide as its widest box (they fit tightly). */
.board-tree .bt-side-a > .bt-node > .bt-box,
.board-tree .bt-side-b > .bt-node > .bt-box{ white-space:nowrap; max-width:none; margin-left:0; margin-right:0; }
.board-tree .bt-box--root{
  font-family:var(--font-display, "Playfair Display", Georgia, serif); font-size:18px;
  color:var(--color-or, #C9A230); border-color:var(--color-or, #C9A230);
}

/* connector layer, drawn behind the boxes */
.board-tree .bt-links{ position:absolute; top:0; left:0; pointer-events:none; overflow:visible; z-index:0; }
.board-tree .bt-links path{ fill:none; stroke:var(--bt-line); stroke-width:2; }
.board-tree--dashed .bt-links path{ stroke-dasharray:7 5; }
.board-tree--dotted .bt-links path{ stroke-dasharray:1 5; stroke-linecap:round; }

/* Leaders' statements repository ([nscoesn_statements]) */
.nscoesn-statements .stmt-updated{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-or);margin:0 0 22px;text-align:right}
.nscoesn-statements .stmt-table{width:100%;max-width:1080px;margin:0 auto;border-collapse:collapse;font-size:15px}
.nscoesn-statements .stmt-table thead th{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--color-or);text-align:left;padding:0 18px 12px;border-bottom:1px solid var(--color-or)}
.nscoesn-statements .stmt-table tbody td{padding:14px 18px;border-bottom:1px solid var(--color-border);color:rgba(240,237,232,.82);vertical-align:top}
.nscoesn-statements .stmt-table tbody tr:hover td{background:var(--color-surface-glass)}
.nscoesn-statements .stmt-col-date{white-space:nowrap;font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--color-or);width:1%}
.nscoesn-statements .stmt-col-source{white-space:nowrap;color:var(--color-argent);width:1%}
.nscoesn-statements .stmt-col-title a{color:rgba(240,237,232,.9);text-decoration:none;border-bottom:1px solid rgba(201,162,48,.35);transition:color .2s,border-color .2s}
.nscoesn-statements .stmt-col-title a:hover{color:var(--color-or);border-color:var(--color-or)}
.nscoesn-statements .stmt-empty{max-width:720px;margin:0 auto;text-align:center}
.nscoesn-statements .stmt-empty-lead{font-size:16px;line-height:1.7;color:rgba(240,237,232,.82);margin:0 0 20px}
.nscoesn-statements .stmt-sources{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 22px;text-align:left}
.nscoesn-statements .stmt-sources li{border-top:1px solid var(--color-border);padding-top:10px}
.nscoesn-statements .stmt-src-country{display:block;font-size:15px;color:var(--color-argent)}
.nscoesn-statements .stmt-src-leader{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,237,232,.45)}
.nscoesn-statements .stmt-src-link{font-family:var(--font-mono);font-size:11px;color:var(--color-or);text-decoration:none}
@media (max-width:780px){
  .nscoesn-statements .stmt-table,.nscoesn-statements .stmt-table tbody,.nscoesn-statements .stmt-table tbody tr,.nscoesn-statements .stmt-table tbody td{display:block;width:auto}
  .nscoesn-statements .stmt-table thead{display:none}
  .nscoesn-statements .stmt-table tbody tr{padding:12px 0;border-bottom:1px solid var(--color-border)}
  .nscoesn-statements .stmt-table tbody td{border:0;padding:2px 0}
  .nscoesn-statements .stmt-col-source{color:var(--color-argent);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
}

/* Tracked-source table (leaders' statements). Wraps the plugin shortcode
   [nscoesn_leaders_sources], which renders a TWO-column table (Region + official
   channel), given the heraldic treatment of the compiled statements table so the
   two read as a matched pair. Region=argent (55%), channel=or mono link. Fills
   the width on both desktop and mobile (stacks on narrow screens). */
.nscoesn-source-table{margin:0 auto 8px}
.nscoesn-source-table .wp-block-table{margin:0 auto;max-width:1080px}
.nscoesn-source-table table{width:100%;border-collapse:collapse;font-size:15px}
.nscoesn-source-table thead th{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--color-or);text-align:left;padding:0 18px 12px;border:0;border-bottom:1px solid var(--color-or);background:transparent}
.nscoesn-source-table tbody td{padding:14px 18px;border:0;border-bottom:1px solid var(--color-border);color:rgba(240,237,232,.82);vertical-align:top;background:transparent}
.nscoesn-source-table tbody tr:hover td{background:var(--color-surface-glass)}
.nscoesn-source-table tbody td:first-child{width:55%;color:var(--color-argent)}
.nscoesn-source-table tbody td:last-child{font-family:var(--font-mono);font-size:12px}
.nscoesn-source-table tbody td:last-child a{color:var(--color-or);text-decoration:none;border-bottom:1px solid rgba(201,162,48,.35);transition:color .2s,border-color .2s}
.nscoesn-source-table tbody td:last-child a:hover{color:var(--color-or);border-color:var(--color-or)}
@media (max-width:780px){
  .nscoesn-source-table table,.nscoesn-source-table thead,.nscoesn-source-table tbody,.nscoesn-source-table tbody tr,.nscoesn-source-table tbody td{display:block;width:100%}
  .nscoesn-source-table thead{display:none}
  .nscoesn-source-table tbody tr{padding:12px 0;border-bottom:1px solid var(--color-border)}
  .nscoesn-source-table tbody td{border:0;padding:2px 0;width:100%}
  .nscoesn-source-table tbody td:first-child{width:100%}
}

/* ---- footer search (icon-only, expands on click; no visible text) ---- */
.fcopy{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-search{display:inline-flex;align-items:center;margin-left:auto}
.foot-search-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--color-border);border-radius:999px;color:var(--color-or);cursor:pointer;transition:border-color .2s,color .2s;flex:0 0 auto}
.foot-search-btn:hover{border-color:var(--color-or);color:var(--color-argent)}
.foot-search-btn svg{width:14px;height:14px;display:block}
.foot-search-field{width:0;opacity:0;margin-left:0;padding:5px 0;border:0;border-bottom:1px solid transparent;background:none;color:var(--color-argent);font-family:var(--font-body);font-size:13px;pointer-events:none;transition:width .28s ease,opacity .2s ease,margin-left .28s ease,border-color .2s}
.foot-search-toggle:checked ~ .foot-search-field{width:min(230px,52vw);opacity:1;margin-left:12px;border-bottom-color:var(--color-border);pointer-events:auto}
.foot-search-field:focus{outline:none;border-bottom-color:var(--color-or)}
.foot-search-field::-webkit-search-cancel-button{filter:invert(0.6)}

/* ---- search results page ---- */
.search-results{display:flex;flex-direction:column;gap:22px;max-width:none}
.search-hit{padding-bottom:20px;border-bottom:1px solid var(--color-border)}
.search-hit:last-child{border-bottom:0}
.search-hit-title{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.4vw,24px);line-height:1.2;margin:0 0 7px}
.search-hit-title a{color:var(--color-argent);text-decoration:none;transition:color .2s}
.search-hit-title a:hover{color:var(--color-or)}
.search-hit p{color:rgba(240,237,232,.66);font-size:15px;line-height:1.6;margin:0}
.search-nav{margin-top:34px;font-family:var(--font-mono);font-size:13px}
.search-nav a,.search-nav .page-numbers{color:var(--color-or);text-decoration:none;padding:4px 9px;border:1px solid var(--color-border);border-radius:2px;margin-right:6px}
.search-nav .page-numbers.current{color:var(--color-argent);border-color:var(--color-or)}

/* ---- Empty search results: a heraldic "nothing found" panel, in the same
   visual family as the error pages (dimmed arms mark + Playfair line). Centred
   in the standard content column. All copy is real text nodes, seeded FR. ---- */
.search-empty{text-align:center;padding:14px 0 8px}
.search-empty__mark{width:clamp(96px,16vw,140px);margin:0 auto 22px}
.search-empty__mark img{width:100%;height:auto;display:block}
.search-empty__line{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3.2vw,32px);line-height:1.12;margin:0 0 12px;color:var(--color-argent)}
.search-empty__term{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--color-or);margin:0 0 18px}
.search-empty__prose{max-width:46ch;margin:0 auto 26px;color:rgba(240,237,232,.82)}
.search-empty__search{display:flex;gap:8px;max-width:420px;margin:0 auto 24px}
.search-empty__search-field{flex:1;background:var(--color-surface);color:var(--color-argent);border:1px solid var(--color-border);border-radius:2px;padding:10px 12px;font-family:var(--font-body)}
.search-empty__search-field:focus{border-color:var(--color-or);outline:none;box-shadow:0 0 0 1px var(--color-or)}
.search-empty__search-field::placeholder{color:rgba(240,237,232,.5)}
.search-empty__search-btn{background:var(--color-surface);color:var(--color-or);border:1px solid var(--color-border);border-radius:2px;padding:10px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.search-empty__search-btn:hover{border-color:var(--color-or);color:var(--color-argent)}
.search-empty__btn{display:inline-block;background:var(--color-gules);color:var(--color-argent);border:1px solid var(--color-or);border-radius:12px;padding:12px 24px;font-size:14px;text-decoration:none;transition:background .18s,color .18s}
.search-empty__btn:hover{background:var(--color-or);color:var(--color-sable)}
@media (prefers-reduced-motion:reduce){.search-empty__btn{transition:none}}

/* ---- Fluent Forms (all forms) ---- */
/* Every rule here is keyed on .fluentform (not a form id) so ANY Fluent Form on the site
   inherits the heraldic theme - swapping the embedded form id (e.g. 1 -> 3) never resets the
   look. Anything a form could otherwise set only in Fluent Forms' own per-form settings (most
   visibly the submit button) is pinned here so the theme, not per-form config, is the source of
   truth. Labels + fields themed to the heraldic surface so the form reads as part of the site. */
.fluentform .ff-el-input--label label{color:var(--color-argent);font-family:var(--font-body)}
.fluentform .ff-el-form-control{background:var(--color-surface);color:var(--color-argent);border:1px solid var(--color-border);border-radius:2px;font-family:var(--font-body)}
.fluentform .ff-el-form-control:focus{border-color:var(--color-or);outline:none;box-shadow:0 0 0 1px var(--color-or)}
.fluentform .ff-el-form-control::placeholder{color:rgba(240,237,232,.5)}
/* required asterisk + validation errors in gules */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger{color:var(--color-gules)}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--color-gules)}
/* submit button - themed for every form (was previously set only in form id 1's Fluent Forms
   settings, so it reverted to FF's default blue when the embed was re-pointed). Matches the site
   CTA + form fields: gules fill, or rule, argent text, 2px radius; gold (or) fill with sable text
   on hover/focus. Selector carries three classes (.fluentform .ff-btn.ff-btn-submit) so it beats
   FF's default stylesheet and typical per-form class-scoped overrides without !important. */
.fluentform .ff-btn.ff-btn-submit{background:var(--color-gules);color:var(--color-argent);border:1px solid var(--color-or);border-radius:2px;box-shadow:none;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:12px 24px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.fluentform .ff-btn.ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:focus{background:var(--color-or);color:var(--color-sable);border-color:var(--color-or)}
.fluentform .ff-btn.ff-btn-submit:focus-visible{outline:2px solid var(--color-or);outline-offset:3px}
/* success confirmation box (AJAX-injected; its text is served per language server-side
   in inc/contact-form.php). Vert left rule marks a positive status; the explicit p colour
   beats the theme's low-specificity .page-body :where(p) rule. */
.ff-message-success{background:var(--color-surface);color:var(--color-argent);border:1px solid var(--color-border);border-left:3px solid var(--color-vert);border-radius:2px;padding:16px 20px;font-family:var(--font-body);line-height:1.6}
.ff-message-success p{margin:0;color:var(--color-argent)}

/* ---- Error pages (404 in theme chrome; the out-of-WordPress twins inline their
   own copy of this in error-static.php - keep the two in sync). One data-driven
   renderer (inc/error-page.php) serves every code; the big numeral rides over a
   dimmed arms watermark as a heraldic charge. No JS, no WebGL. ---- */
.errorpage{text-align:center}
.errorpage__inner{max-width:640px}
.errorpage__charge{position:relative;width:clamp(180px,34vw,300px);margin:0 auto 30px;aspect-ratio:1/1}
.errorpage__arms{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.18}
.errorpage__code{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:clamp(76px,17vw,148px);line-height:1;color:var(--color-or);text-shadow:0 2px 0 rgba(0,0,0,.4);letter-spacing:.02em}
.errorpage__eyebrow{margin-bottom:14px}
.errorpage__title{font-family:var(--font-display);font-weight:700;line-height:1.06;font-size:clamp(26px,5vw,44px);margin:0 0 16px}
.errorpage__prose{max-width:52ch;margin:0 auto 26px;color:rgba(240,237,232,.82);font-size:clamp(15px,1.4vw,17px)}
.errorpage__motto{font-family:var(--font-display);font-style:italic;color:var(--color-or);font-size:clamp(18px,2.6vw,26px);margin:0 0 4px}
.errorpage__gloss{color:rgba(240,237,232,.6);font-size:13px;letter-spacing:.05em;margin:0 0 30px}
.errorpage__search{display:flex;gap:8px;max-width:420px;margin:0 auto 26px}
.errorpage__search-field{flex:1;background:var(--color-surface);color:var(--color-argent);border:1px solid var(--color-border);border-radius:2px;padding:10px 12px;font-family:var(--font-body)}
.errorpage__search-field:focus{border-color:var(--color-or);outline:none;box-shadow:0 0 0 1px var(--color-or)}
.errorpage__search-field::placeholder{color:rgba(240,237,232,.5)}
.errorpage__search-btn{background:var(--color-surface);color:var(--color-or);border:1px solid var(--color-border);border-radius:2px;padding:10px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.errorpage__search-btn:hover{border-color:var(--color-or);color:var(--color-argent)}
.errorpage__actions{margin:0}
.errorpage__btn{display:inline-block;background:var(--color-gules);color:var(--color-argent);border:1px solid var(--color-or);border-radius:12px;padding:12px 24px;font-size:14px;text-decoration:none;transition:background .18s,color .18s}
.errorpage__btn:hover{background:var(--color-or);color:var(--color-sable)}
@media (prefers-reduced-motion:reduce){.errorpage__btn{transition:none}}