/* Fonts are loaded dynamically by applyTheme() (common.js) based on the
   admin-configured theme -- see content.theme.fontHeading/fontBody/fontMono.
   The --font-* custom properties below are fallback values only, used for
   the brief moment before JS runs (or if it fails to), matching the site's
   Georgetown-aligned default theme. */
:root{
  --font-heading:'Libre Caslon Text', Georgia, serif;
  --font-body:'Jost', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ink:#12161d;
  --ink-soft:#3a4048;
  --muted:#666d74;
  --paper:#f4f5f2;
  --surface:#e7e9e4;
  --surface-2:#dde0da;
  --line:#c9cdc5;
  --teal:#041E42;
  --teal-deep:#041E42;
  --coral:#63666A;
  --accent-cta:#D50032;
  --card:#fbfbf9;
  --shadow: 0 1px 2px rgba(18,22,29,.05), 0 8px 24px -12px rgba(18,22,29,.18);
  --focus:#041E42;
  --header-bg:#041E42;
  --header-opacity:100%;
  --header-text:#FFFFFF;
  --footer-bg:#e7e9e4;
  --footer-opacity:100%;
  --footer-text:#3a4048;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef0ee;
    --ink-soft:#c7ccc9;
    --muted:#9aa19b;
    --paper:#12151a;
    --surface:#191d23;
    --surface-2:#20252c;
    --line:#2b3138;
    --teal:#5fb6bf;
    --teal-deep:#8fd0d6;
    --coral:#e8825d;
    --card:#171b21;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
    --focus:#5fb6bf;
  }
}
:root[data-theme="dark"]{
  --ink:#eef0ee;
  --ink-soft:#c7ccc9;
  --muted:#9aa19b;
  --paper:#12151a;
  --surface:#191d23;
  --surface-2:#20252c;
  --line:#2b3138;
  --teal:#5fb6bf;
  --teal-deep:#8fd0d6;
  --coral:#e8825d;
  --card:#171b21;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
  --focus:#5fb6bf;
}

*{box-sizing:border-box;}
html{overflow-x:hidden; max-width:100%;}
/* Optional admin-uploaded background image (Look and Feel) -- fixed behind
   every page's content, kept to a low opacity by default so it reads as
   atmosphere/texture, not something competing with the foreground. */
#site-bg{
  position:fixed; inset:0; z-index:-1;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  pointer-events:none;
}
body{
  overflow-x:hidden; max-width:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  padding-inline:0;
  line-height:1.5;
  margin:0;
  padding-top:64px; /* compensates for the fixed .nav so content isn't covered */
}
/* Fixed footer is opt-in (Admin -> Footer -> "Fixed footer") -- off by
   default, since a fixed footer's reserved body padding assumes a single
   line of footer content; with few items it can still look fine on
   desktop but wrap to multiple lines on a narrow phone screen, where the
   footer either overlaps page content or crowds itself. */
html[data-footer-fixed="on"] body{ padding-bottom:58px; }
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:2px solid var(--focus); outline-offset:3px;}
h1,h2,h3{font-family:var(--font-heading); text-wrap:balance; margin:0; font-weight:600; color:var(--ink);}
.mono{font-family:var(--font-mono);}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:24px;}
@media (max-width:640px){ .wrap{padding-inline:18px;} }

/* ---------- Large display / conference monitor mode ----------
   Admin-set to one of three modes (off by default):
   - "auto": applies only on genuinely large screens (>=1600px, e.g. a
     projector/conference-room monitor) -- a visitor's own laptop/desktop
     is untouched even with this mode selected.
   - "on": applies unconditionally, any screen size.
   - "off": never applies.
   Widens the content column and scales type/grids up so the landing page
   reads clearly from across a room instead of looking like a narrow strip
   down the middle of a huge display. */
html[data-large-display="on"] .wrap{max-width:1680px;}
html[data-large-display="on"] body{font-size:1.2rem;}
html[data-large-display="on"] .hero-inner h1{font-size:clamp(2.8rem,4.2vw,4.2rem);}
html[data-large-display="on"] .research-grid{grid-template-columns:repeat(4,1fr);}
html[data-large-display="on"] .member-grid{grid-template-columns:repeat(4,1fr);}
@media (min-width:1600px){
  html[data-large-display="auto"] .wrap{max-width:1680px;}
  html[data-large-display="auto"] body{font-size:1.2rem;}
  html[data-large-display="auto"] .hero-inner h1{font-size:clamp(2.8rem,4.2vw,4.2rem);}
  html[data-large-display="auto"] .research-grid{grid-template-columns:repeat(4,1fr);}
  html[data-large-display="auto"] .member-grid{grid-template-columns:repeat(4,1fr);}
}
/* "Always on" has no screen-size condition of its own (that's the point --
   it's meant to force the large-display look regardless of viewport), but
   that must still have a floor on an actual phone: a 4-column grid forced
   onto a 375px-wide screen overflows horizontally, and when that happens a
   mobile browser responds by zooming the *entire page* out to fit it --
   not just that one grid -- which is what makes a phone visitor see what
   looks like a full desktop layout shrunk down, unrelated to anything else
   on the page. Needs equal selector specificity to win over the
   unconditional rules above via source order (this block comes later). */
@media (max-width:600px){
  html[data-large-display="on"] .wrap{max-width:100%;}
  html[data-large-display="on"] body{font-size:1rem;}
  html[data-large-display="on"] .research-grid{grid-template-columns:repeat(2,1fr);}
  html[data-large-display="on"] .member-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  background:color-mix(in srgb, var(--header-bg) var(--header-opacity), transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  color:var(--header-text);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding-block:14px; min-width:0;}
.brand{display:flex; align-items:flex-end; gap:10px; font-family:var(--font-heading); font-weight:600; font-size:1.05rem; letter-spacing:.01em; text-decoration:none; color:inherit; min-width:0; flex-shrink:1;}
.brand span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.university-icon{height:30px; width:auto; display:block; object-fit:contain; flex-shrink:0;}
.navlinks{display:flex; gap:28px; font-size:.86rem; letter-spacing:.02em;}
.navlinks a{text-decoration:none; color:var(--header-text); opacity:.8; padding-block:4px; border-bottom:1px solid transparent;}
.navlinks a:hover{opacity:1; border-color:var(--header-text);}
.nav-hamburger{display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;}
.nav-hamburger span{display:block; width:100%; height:2px; background:var(--header-text); border-radius:1px;}
@media (max-width:720px){
  .nav-hamburger{display:flex;}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:8px 0;
    background:color-mix(in srgb, var(--header-bg) 97%, transparent);
    border-bottom:1px solid var(--line);
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 24px; border-bottom:none;}
  .nav-inner{position:relative;}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center; padding-block:76px 56px;}
html[data-bg-image="on"] .hero{padding-block:32px;}
html[data-bg-image="on"] .hero-inner{
  padding:48px 44px;
  background:var(--section-bg); border:1px solid var(--line); border-radius:var(--section-radius);
}
@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr; padding-block:44px 32px; position:relative;}
  html[data-bg-image="on"] .hero-inner{padding:32px 28px;}
  /* Small thumbnail pinned near the eyebrow/title instead of a large
     block sitting below the full text column (including the CTA
     buttons) -- grid items ignore float, so this uses absolute
     positioning to sit alongside the top of the text instead. */
  .hero-media-col{position:absolute; top:0; right:0; width:72px;}
  .hero-media-col .ot-canvas-wrap{max-width:72px;}
  .hero-media-col .ot-caption{display:none;}
  .hero-text{padding-right:88px;}
}
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--teal-deep);}
.hero h1{font-size:clamp(2.1rem, 4.4vw, 3.3rem); line-height:1.08; letter-spacing:-.01em;}
.hero h1 em{font-style:italic; color:var(--teal-deep);}
.hero p.lede{margin-top:20px; font-size:1.08rem; color:var(--ink-soft); max-width:52ch; line-height:1.6;}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
.hero-cta[hidden]{display:none;}
.btn{
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  padding:12px 20px; border-radius:3px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; cursor:pointer;
}
.btn[hidden]{display:none;}
.btn-primary{background:var(--accent-cta); color:#fff;}
.btn-primary:hover{background:color-mix(in srgb, var(--accent-cta) 82%, black);}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}

.ot-canvas-wrap{position:relative; aspect-ratio:1/1; max-width:440px; margin-inline:auto; width:100%;}
canvas#ot{width:100%; height:100%; display:block;}
.ot-caption{
  font-family:var(--font-mono); font-size:.68rem; color:var(--muted); text-align:center; margin-top:10px;
  letter-spacing:.03em;
}

/* ---------- Stat strip ---------- */
.stats{border-bottom:1px solid var(--line); background:var(--surface);}
.stats-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media (max-width:720px){ .stats-inner{grid-template-columns:repeat(2,1fr);} }
.stat{
  padding:26px 20px; border-right:1px solid var(--line); text-align:left;
}
.stat:last-child{border-right:none;}
@media (max-width:720px){ .stat:nth-child(2n){border-right:none;} .stat{border-bottom:1px solid var(--line);} .stat:nth-last-child(-n+2){border-bottom:none;} }
.stat .num{font-family:var(--font-mono); font-size:1.8rem; font-variant-numeric:tabular-nums; color:var(--teal-deep); font-weight:500;}
.stat .label{font-size:.8rem; color:var(--muted); margin-top:4px;}

/* ---------- Section shell ---------- */
section{padding-block:64px; scroll-margin-top:76px;}
#page-sections > section{border-bottom:1px solid var(--line);}
#page-sections > section:last-child{border-bottom:none;}
/* Wraps a section's heading (title/subtitle/"See all" link) together with
   its grid/list content in one panel, so the whole section -- not just
   the list -- reads as its own container against the page/background
   image (admin-configurable color + corner style, Look and Feel ->
   Section containers). */
html[data-bg-image="on"] .section-panel{
  background:var(--section-bg); border:1px solid var(--line); border-radius:var(--section-radius);
  padding:28px 28px 24px;
}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; flex-wrap:wrap;}
.section-head h2{font-size:1.7rem;}
.section-head .sub{color:var(--muted); font-size:.95rem; max-width:46ch;}
.see-all{font-size:.85rem; font-weight:600; text-decoration:none; color:var(--teal-deep); white-space:nowrap; border-bottom:1px solid currentColor; padding-bottom:1px;}

/* ---------- Research grid ---------- */
/* No background color on the grid itself -- a grid with more cells than
   items (e.g. 5 cards in a 3-column grid) leaves the last row's empty
   cells showing whatever the grid's own background is, which read as a
   stray "blank card" with visible contrast against the page. Each real
   card gets its own border instead, so an empty cell is simply absent,
   not a mismatched-colored box. */
.research-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;}
@media (max-width:900px){ .research-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .research-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .rcard{padding:16px 14px; min-height:0; gap:8px;}
  .rcard h3{font-size:.92rem;}
  .rcard .richtext, .rcard p{font-size:.8rem; line-height:1.4;}
}
.rcard{
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:26px 24px 24px; display:flex; flex-direction:column; gap:14px; min-height:230px;
  color:inherit; text-decoration:none; position:relative;
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
a.rcard:hover{box-shadow:0 6px 20px rgba(0,0,0,.08); border-color:var(--teal-deep); transform:translateY(-2px); background:var(--surface);}
a.rcard:hover h3{color:var(--teal-deep);}
.rcard .glyph{width:38px; height:38px;}
.rcard .glyph.custom-icon{object-fit:contain;}
.rcard h3{font-size:1.1rem; line-height:1.3; font-weight:650;}
.rcard p{margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.6;}
.rcard .richtext{flex:1; color:var(--ink-soft); font-size:.9rem; line-height:1.6;}
.rcard .tag{font-family:var(--font-mono); font-size:.68rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase;}
.rcard-photo{width:100%; max-height:200px; object-fit:contain; border-radius:4px; background:var(--surface);}
.rcard-arrow{
  position:absolute; top:20px; right:20px; color:var(--teal-deep); font-size:1.1rem;
  opacity:0; transform:translate(-3px,3px); transition:opacity .15s ease, transform .15s ease;
}
a.rcard:hover .rcard-arrow{opacity:1; transform:translate(0,0);}

/* ---------- Research: list view (two alternatives to the card grid) --- */
/* "Two-column row" -- fixed-width title column on the left, description
   on the right, a thin divider between rows (same skimmable rhythm as the
   publications/people row-lists elsewhere on the site). */
.research-rows{display:flex; flex-direction:column;}
.research-row{
  display:grid; grid-template-columns:240px 1fr; gap:28px; padding:22px 16px;
  margin-inline:-16px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none;
  position:relative; border-radius:6px; transition:background-color .15s ease;
}
.research-rows > .research-row:last-child{border-bottom:none;}
a.research-row:hover{background:color-mix(in srgb, var(--teal-deep) var(--research-hover-tint, 12%), var(--paper));}
a.research-row:hover h3{color:var(--teal-deep); font-weight:800;}
@media (max-width:720px){ .research-row{grid-template-columns:1fr; gap:8px;} }
.research-row-title h3{margin:0; font-size:1.05rem; line-height:1.3; font-weight:650; transition:color .15s ease, font-weight .15s ease;}
.research-row-tag{
  display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:.68rem;
  color:var(--muted); letter-spacing:.04em; text-transform:uppercase;
}
.research-row-body{color:var(--ink-soft); font-size:.92rem; line-height:1.65;}
.research-row-body .richtext{color:inherit;}
.research-row .rcard-arrow{
  position:static; display:inline-block; margin-left:6px; opacity:0; transform:translate(-3px,0);
  transition:opacity .15s ease, transform .15s ease;
}
a.research-row:hover .rcard-arrow{opacity:1; transform:translate(0,0);}

/* "Stacked narrative" -- heading directly over the description, no outer
   box, a colored left-border accent instead, and the tag as a small
   metadata label above the heading rather than an inline badge. Two
   variants share this same markup/JS (see common.js researchStackedItemHtml)
   with a modifier class: "plain" drops the left-border accent entirely;
   "block" also drops it but wraps each item in a barely-visible full
   border with softly rounded corners instead, so the clickable area reads
   as a loose, low-contrast card rather than a flush rule. */
.research-stacked{display:flex; flex-direction:column; gap:16px;}
.research-stacked-item{
  display:block; padding:14px 16px 14px 20px; margin-inline:-16px;
  border-left:3px solid var(--teal-deep); border-radius:0 6px 6px 0;
  color:inherit; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
a.research-stacked-item:hover{background:color-mix(in srgb, var(--teal-deep) var(--research-hover-tint, 12%), var(--paper)); border-left-color:var(--coral);}
a.research-stacked-item:hover h3{color:var(--teal-deep); font-weight:800;}
.research-stacked-tag{
  display:block; margin-bottom:8px; font-family:var(--font-mono); font-size:.68rem;
  color:var(--coral); letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.research-stacked-item h3{margin:0 0 8px; font-size:1.2rem; line-height:1.3; font-weight:650; transition:color .15s ease, font-weight .15s ease;}
.research-stacked-item .richtext{color:var(--ink-soft); font-size:.95rem; line-height:1.7;}
.research-stacked-item .rcard-arrow{
  position:static; display:inline-block; margin-left:6px; opacity:0; transform:translate(-3px,0);
  transition:opacity .15s ease, transform .15s ease;
}
a.research-stacked-item:hover .rcard-arrow{opacity:1; transform:translate(0,0);}

/* "Plain stacked narrative" -- same as above, minus the left-border accent. */
.research-stacked--plain .research-stacked-item{border-left:none; border-radius:6px; padding-left:16px;}
.research-stacked--plain a.research-stacked-item:hover{border-left:none;}

/* "Block stacked narrative" -- no left-border accent, instead a full,
   barely-visible border with softly curved corners around each item, and
   generous padding so the hover background reads as a clean card. */
.research-stacked--block .research-stacked-item{
  border:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius:10px; padding:18px 20px;
}
.research-stacked--block a.research-stacked-item:hover{border-color:var(--teal-deep);}

/* ---------- Publications ---------- */
.pub-footer-cta{
  display:block; width:fit-content; margin:0 auto 24px; font-size:.85rem; font-weight:600; color:var(--teal-deep);
  text-decoration:none; border:1px solid var(--line); border-radius:20px; padding:9px 20px;
  transition:border-color .15s ease, background-color .15s ease;
}
.pub-footer-cta:hover{border-color:var(--teal-deep); background:var(--surface);}

/* Row-list format shared by every publication listing on the site: the
   admin-managed Recent Publications teaser (homepage and the Publications
   page) and the full bibliography list beneath it both render into this
   same full-pub-* markup (see common.js publicationItemHtml). */
.full-pub-list{list-style:none; margin:0; padding:0;}
.full-pub-item{display:flex; gap:20px; padding-block:16px; border-bottom:1px solid var(--line);}
.full-pub-item:last-child{border-bottom:none;}
.full-pub-year{flex-shrink:0; width:3.5rem; font-family:var(--font-mono); font-size:.9rem; font-weight:700; color:var(--muted); padding-top:2px;}
.full-pub-content{flex:1;}
.full-pub-title{margin:0 0 5px; font-size:1rem; font-weight:600; line-height:1.4;}
.full-pub-title a{color:var(--ink); text-decoration:none;}
.full-pub-title a:hover{color:var(--teal-deep); text-decoration:underline;}
.full-pub-authors{margin:0 0 3px; font-size:.86rem; color:var(--ink-soft);}
.full-pub-venue{margin:0; font-size:.82rem; color:var(--muted); font-style:italic;}
.full-pub-badge{
  display:inline-block; font-style:normal; font-family:var(--font-mono); font-size:.72rem;
  padding:1px 7px; background:var(--surface); border-radius:4px; color:var(--ink-soft); margin-left:8px;
}
.pub-note{
  margin-top:20px; padding:14px 16px; background:var(--surface); border-left:3px solid var(--coral);
  font-size:.85rem; color:var(--ink-soft); border-radius:0 3px 3px 0;
}

/* ---------- People ---------- */
/* Each Group is its own card (consistent with every other section's card
   treatment -- var(--section-bg)/var(--section-radius)), with a left-
   aligned, top-to-bottom stack of name + subtitle(s) inside -- name and
   role share one left margin instead of being pulled to opposite edges, so
   wide screens don't force horizontal eye travel to connect the two. */
.roster h3{font-size:.98rem; margin-bottom:14px;}
.roster-group{
  margin-bottom:24px; background:var(--section-bg); border:1px solid var(--line);
  border-radius:var(--section-radius); padding:22px 26px;
}
.roster-group .kicker{
  font-family:var(--font-mono); font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:#0f172a; margin-bottom:12px; padding-bottom:10px; display:block;
  border-bottom:2px solid #0f172a;
}
/* As many columns as comfortably fit (auto-fit + minmax) -- 1 on mobile,
   up to 3+ on a wide desktop viewport -- rather than a fixed count, so a
   group's card reflows naturally with the browser width. Dividers between
   people are dropped in favor of the row/column gap itself: a horizontal
   rule reads as a stray line once people sit side by side instead of
   stacked, at any column count. */
.roster-members{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); column-gap:32px;}
.person{display:flex; flex-direction:column; gap:3px; padding-block:10px; font-size:1rem;}
.pname{font-weight:700; color:#0f172a;}
.person a{color:#2563eb; text-decoration:none;}
.person a:hover{text-decoration:underline;}
.psub{color:#475569; font-size:.88rem;}
.psub .dot-sep{color:#94a3b8; margin:0 2px;}
.psub2{color:#64748b; font-size:.82rem; font-style:italic;}
.date-badge{
  display:inline-block; margin-left:8px; padding:2px 10px; border-radius:999px;
  background:#f1f5f9; color:#475569; font-size:.74rem; font-variant-numeric:tabular-nums;
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.chip{font-family:var(--font-mono); font-size:.7rem; padding:4px 9px; border:1px solid var(--line); border-radius:20px; color:var(--muted);}

/* ---------- News ---------- */
.news{border-top:1px solid var(--line);}
#news-list{padding:4px 0; display:flex; flex-direction:column;}
.news-item{
  display:flex; align-items:center; gap:20px; padding-block:18px;
  border-bottom:1px solid rgba(0,0,0,.08); text-decoration:none; color:inherit;
  margin-inline:-20px; padding-inline:20px; border-radius:4px;
  transition:background-color .15s ease;
}
.news-item:last-child{border-bottom:none;}
a.news-item:hover{background:var(--surface);}
.news-item-date{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:4px 10px; white-space:nowrap; flex-shrink:0; align-self:flex-start;
}
.news-item-body{flex:1; min-width:0;}
.news-item-title{font-weight:600; color:var(--ink); font-size:1rem; margin-bottom:4px;}
.news-item-desc{margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5;}
.news-item-arrow{color:var(--accent-cta, var(--teal-deep)); font-size:1.1rem; flex-shrink:0; opacity:0; transform:translateX(-4px); transition:opacity .15s ease, transform .15s ease;}
a.news-item:hover .news-item-arrow{opacity:1; transform:translateX(0);}

/* ---------- Footer ---------- */
html[data-footer-fixed="on"] footer{ position:fixed; bottom:0; left:0; right:0; z-index:20; }
footer{
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--footer-bg) var(--footer-opacity), transparent);
  color:var(--footer-text);
}
.foot-inner{display:flex; justify-content:space-between; align-items:center; padding-block:16px; flex-wrap:wrap; gap:14px;}
.foot-inner .mono{font-size:.76rem; color:var(--footer-text); opacity:.75;}
.foot-links{display:flex; gap:18px; font-size:.82rem;}
.foot-links a{text-decoration:none; color:var(--footer-text); opacity:.75; padding-block:4px; border-bottom:1px solid transparent;}
.foot-links a:hover{opacity:1; border-color:var(--footer-text);}

/* Invisible admin-access hotspot, bottom-right corner of the viewport
   (over the fixed footer) -- the only way into /admin now that there's
   no visible nav link. Deliberately unstyled beyond position/size so it
   leaves no visual trace. */
.admin-hotspot{position:fixed; bottom:0; right:0; width:44px; height:44px; z-index:21; display:block;}

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

/* ---------- Featured-member cards (people/mentors) ---------- */
.member-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px;}
@media (max-width:820px){ .member-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .member-grid{grid-template-columns:1fr;} }
.member-card{background:var(--card); border:1px solid var(--line); padding:22px 20px; display:flex; flex-direction:column; gap:10px;}
.avatar{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:600; font-size:1.05rem; color:var(--card);
  background:var(--teal-deep);
}
.member-card:nth-child(3n-1) .avatar{background:var(--coral);}
.member-card:nth-child(3n) .avatar{background:var(--ink-soft);}
.avatar-photo{width:72px; height:72px; border-radius:50%; object-fit:cover; display:block;}
@media (max-width:820px){ .avatar-photo, .avatar{width:60px; height:60px;} }
@media (max-width:560px){ .avatar-photo, .avatar{width:52px; height:52px; font-size:.92rem;} }
.member-card .mname{font-weight:600; font-size:.98rem;}
.member-card .mrole{font-size:.8rem; color:var(--muted);}
.member-card .mloc{font-family:var(--font-mono); font-size:.7rem; color:var(--teal-deep); letter-spacing:.03em;}

/* ---------- Join / talent section ---------- */
.join-hero{
  border:1px solid var(--line); border-radius:4px; padding:44px 40px; background:var(--surface);
  display:flex; flex-direction:column; gap:10px; margin-bottom:40px;
}
.join-hero h2{font-size:1.9rem; max-width:34ch;}
.join-hero p{color:var(--ink-soft); max-width:58ch; font-size:1rem; line-height:1.6;}

.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px;}
@media (max-width:820px){ .benefit-grid{grid-template-columns:1fr;} }
.benefit-card{background:var(--card); border:1px solid var(--line); padding:26px 24px; display:flex; flex-direction:column; gap:10px;}
.benefit-card .num{font-family:var(--font-mono); font-size:.72rem; color:var(--coral); letter-spacing:.06em;}
.benefit-card h3{font-size:1.02rem; line-height:1.3;}
.benefit-card p{margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.55;}

.positions{padding:4px 0; margin-bottom:24px; display:flex; flex-direction:column;}
.position{
  display:flex; align-items:center; gap:18px; padding-block:18px;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-inline:-20px; padding-inline:20px;
}
.position:last-child{border-bottom:none;}
.position-main{flex:1; min-width:0;}
.position-title{font-weight:700; color:var(--ink); font-size:1rem;}
.position-meta{font-size:.84rem; color:var(--muted); margin-top:2px;}
.position-apply{
  font-size:.8rem; font-weight:700; color:#fff; background:var(--accent-cta, var(--teal-deep));
  text-decoration:none; border-radius:3px; padding:9px 18px; white-space:nowrap; flex-shrink:0;
  transition:opacity .15s ease;
}
.position-apply:hover{opacity:.85;}
.positions-note{font-size:.78rem; color:var(--muted); padding-top:14px; font-style:italic;}

.join-cta-box{border:1px solid var(--line); border-radius:var(--section-radius); padding:36px 40px; background:var(--section-bg); display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.join-cta-box > div{max-width:56ch;}
.join-cta-box h2{font-size:1.25rem;}
.join-cta-box > div > div{color:var(--ink-soft); margin-top:8px; font-size:.92rem;}
/* "Show email instead of button" mode -- the address itself, styled like
   a link, in place of the btn-primary CTA. */
.join-cta-email{
  font-family:var(--font-mono); font-size:.95rem; font-weight:600; color:var(--accent-cta, var(--teal-deep));
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap;
}
.join-cta-email:hover{opacity:.8;}

/* Transient "copied to clipboard" confirmation -- shared by any click-to-
   copy email on the site. Fixed near the bottom of the viewport so it
   doesn't shift page layout; fades in/out rather than popping. */
.copy-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,12px);
  max-width:min(92vw,420px); background:var(--ink); color:var(--paper);
  font-size:.85rem; line-height:1.5; padding:12px 18px; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:100;
}
.copy-toast.visible{opacity:1; transform:translate(-50%,0);}

.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:8px;}
@media (max-width:820px){ .quote-grid{grid-template-columns:1fr;} }
.quote-card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px 20px; display:flex; flex-direction:column; gap:12px;}
.quote-card blockquote{margin:0; font-family:var(--font-heading); font-size:.98rem; line-height:1.5; color:var(--ink); font-style:italic;}
.quote-card cite{font-style:normal; font-size:.78rem; color:var(--muted); font-family:var(--font-mono);}
.quotes-note{font-size:.78rem; color:var(--muted); margin-top:16px; font-style:italic;}

.empty-note{color:var(--muted); font-size:.9rem; font-style:italic; padding-block:20px;}

/* Rich-text containers: admin-authored HTML (bold/italic/underline/lists)
   rendered as trusted innerHTML. .richtext is block context (hero lede,
   join lede, benefit/research descriptions); .richtext-inline flattens any
   stray block-level wrapper so it still reads inline (quote text, news
   body, which sit inside an existing <p>/<blockquote>). */
.richtext p{margin:0 0 .6em;}
.richtext p:last-child{margin-bottom:0;}
.richtext ul, .richtext ol{margin:0 0 .6em; padding-left:1.4em;}
.richtext-inline, .richtext-inline p, .richtext-inline div{display:inline; margin:0;}

/* ---------- Custom pages (admin-created, page.html?slug=...) ---------- */
.page-blocks{display:flex; flex-direction:column; gap:28px; max-width:72ch;}
.page-blocks h3{font-size:1.2rem;}
.page-image-block{margin:0;}
.page-image-block img{max-width:100%; border-radius:4px; display:block;}
.page-image-block figcaption{font-size:.8rem; color:var(--muted); margin-top:8px;}

/* ---------- Style preset: classic (traditional academic department site) ---------
   Default style preset, paired with the Georgetown color preset. Centered
   section heads with a rule line, individually-bordered cards instead of
   the "modern" preset's grid-background-line card look, no mono-chip tags,
   single-tone avatars. The "modern" preset (data-style="modern") is simply
   the original design with no overrides needed here. */
:root[data-style="classic"] .section-head{flex-direction:column; align-items:center; text-align:center; border-bottom:1px solid var(--line); padding-bottom:28px;}
:root[data-style="classic"] .section-head .sub{max-width:60ch;}
:root[data-style="classic"] .see-all{margin-top:10px;}

:root[data-style="classic"] .eyebrow{font-family:var(--font-heading); font-style:italic; font-weight:500; text-transform:none; letter-spacing:0; font-size:.95rem;}
:root[data-style="classic"] .eyebrow::before{display:none;}

:root[data-style="classic"] .research-grid,
:root[data-style="classic"] .benefit-grid,
:root[data-style="classic"] .member-grid{background:none; border:none; gap:20px;}
:root[data-style="classic"] .rcard,
:root[data-style="classic"] .benefit-card,
:root[data-style="classic"] .member-card{border:1px solid var(--line); border-radius:4px;}
:root[data-style="classic"] .rcard .tag,
:root[data-style="classic"] .benefit-card .num{display:none;}

:root[data-style="classic"] .avatar{background:var(--ink) !important;}

:root[data-style="classic"] .stat .num{font-family:var(--font-heading); font-variant-numeric:normal;}
:root[data-style="classic"] .chip,
:root[data-style="classic"] .roster-group .kicker{font-family:var(--font-body); text-transform:none; letter-spacing:0;}

/* ---------- Style preset: minimal (flat, no borders, maximum whitespace) --
   No card backgrounds or borders anywhere -- content separated by
   whitespace and a single hairline rule per section, never a boxed card.
   Understated, quiet, content-forward. */
:root[data-style="minimal"] .research-grid,
:root[data-style="minimal"] .benefit-grid,
:root[data-style="minimal"] .member-grid{background:none; border:none; gap:40px 32px;}
:root[data-style="minimal"] .rcard,
:root[data-style="minimal"] .benefit-card,
:root[data-style="minimal"] .member-card,
:root[data-style="minimal"] .quote-card,
:root[data-style="minimal"] .roster-group,
:root[data-style="minimal"] .join-hero{background:none; border:none; padding-left:0; padding-right:0; box-shadow:none;}
:root[data-style="minimal"] .rcard .tag,
:root[data-style="minimal"] .benefit-card .num{display:none;}
:root[data-style="minimal"] section{padding-block:88px;}
:root[data-style="minimal"] .section-head{border:none; margin-bottom:48px;}
:root[data-style="minimal"] .eyebrow{font-weight:400; letter-spacing:.03em;}
:root[data-style="minimal"] .eyebrow::before{display:none;}
:root[data-style="minimal"] .avatar{background:none !important; border:1px solid var(--line); color:var(--ink);}
:root[data-style="minimal"] .full-pub-item{padding-block:24px;}
:root[data-style="minimal"] .positions{border-color:var(--line);}
:root[data-style="minimal"] .chip,
:root[data-style="minimal"] .roster-group .kicker{border:none; padding:0; background:none;}
:root[data-style="minimal"] .btn{border-radius:0;}
:root[data-style="minimal"] .stats{background:none; border-bottom:1px solid var(--line);}
:root[data-style="minimal"] .stat{border-right:none;}

/* ---------- Style preset: bold (high-contrast blocks, oversized type) ----
   Large, confident headings and solid-color card fills instead of hairline
   borders -- reads more like a modern consumer product site than an
   academic department page. */
:root[data-style="bold"] .hero h1{font-size:clamp(2.6rem, 6vw, 4.4rem); letter-spacing:-.02em;}
:root[data-style="bold"] .section-head h2,
:root[data-style="bold"] .join-hero h2{font-size:2.1rem; letter-spacing:-.01em;}
:root[data-style="bold"] .research-grid,
:root[data-style="bold"] .benefit-grid,
:root[data-style="bold"] .member-grid{gap:3px;}
:root[data-style="bold"] .rcard,
:root[data-style="bold"] .benefit-card{background:var(--ink); color:var(--paper);}
:root[data-style="bold"] .rcard h3,
:root[data-style="bold"] .benefit-card h3{color:var(--paper); font-size:1.3rem;}
:root[data-style="bold"] .rcard .richtext,
:root[data-style="bold"] .benefit-card p{color:color-mix(in srgb, var(--paper) 75%, transparent);}
:root[data-style="bold"] .rcard .tag,
:root[data-style="bold"] .benefit-card .num{color:var(--coral);}
:root[data-style="bold"] .rcard-arrow{color:var(--paper);}
:root[data-style="bold"] .stat .num{font-size:2.6rem;}
:root[data-style="bold"] .btn{border-radius:999px; padding:14px 26px; font-size:1rem;}
:root[data-style="bold"] .member-card:nth-child(odd){background:var(--surface);}
:root[data-style="bold"] .quote-card{background:var(--ink); color:var(--paper); border:none;}
:root[data-style="bold"] .quote-card blockquote{color:var(--paper); font-size:1.15rem;}
:root[data-style="bold"] .quote-card cite{color:color-mix(in srgb, var(--paper) 70%, transparent);}

/* ---------- Style preset: editorial (magazine-style, serif-forward) ------
   Wider serif measure, asymmetric two-column research grid, pull-quote
   treatment on alumni quotes -- reads like a long-form feature article
   rather than a grid of product cards. */
:root[data-style="editorial"] body{line-height:1.65;}
:root[data-style="editorial"] .hero p.lede{font-family:var(--font-heading); font-size:1.25rem; font-style:italic; max-width:56ch;}
:root[data-style="editorial"] .section-head h2{font-size:2rem;}
:root[data-style="editorial"] .research-grid{grid-template-columns:repeat(2,1fr); gap:1px;}
:root[data-style="editorial"] .rcard{padding:36px 32px;}
:root[data-style="editorial"] .rcard h3{font-size:1.35rem;}
:root[data-style="editorial"] .rcard .richtext{font-size:.96rem; line-height:1.7;}
:root[data-style="editorial"] .rcard .tag{font-family:var(--font-heading); font-style:italic; text-transform:none; letter-spacing:0; font-size:.78rem;}
:root[data-style="editorial"] .quote-grid{grid-template-columns:1fr; max-width:62ch; margin-inline:auto; gap:36px;}
:root[data-style="editorial"] .quote-card{border:none; border-left:3px solid var(--coral); border-radius:0; padding:4px 0 4px 28px; background:none;}
:root[data-style="editorial"] .quote-card blockquote{font-size:1.3rem; line-height:1.5;}
:root[data-style="editorial"] .full-pub-title{font-family:var(--font-heading); font-size:1.08rem;}
:root[data-style="editorial"] .join-hero h2{font-size:2.3rem; max-width:28ch;}

/* ---------- Style preset: compact (dense, dashboard-like) ----------------
   Smaller type and tighter spacing throughout -- fits meaningfully more
   content per screen, closer to an internal dashboard than a marketing
   page. Useful for an information-dense overview on a large display. */
:root[data-style="compact"] section{padding-block:36px;}
:root[data-style="compact"] .section-head{margin-bottom:18px;}
:root[data-style="compact"] .section-head h2{font-size:1.3rem;}
:root[data-style="compact"] .hero-inner{padding-block:36px 24px;}
:root[data-style="compact"] .hero h1{font-size:clamp(1.6rem, 3vw, 2.3rem);}
:root[data-style="compact"] .hero p.lede{font-size:.92rem; margin-top:10px;}
:root[data-style="compact"] .research-grid{grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:900px){ :root[data-style="compact"] .research-grid{grid-template-columns:repeat(2,1fr);} }
:root[data-style="compact"] .rcard{padding:18px 16px; gap:8px; min-height:160px;}
:root[data-style="compact"] .rcard h3{font-size:.95rem;}
:root[data-style="compact"] .rcard .richtext{font-size:.8rem; line-height:1.5;}
:root[data-style="compact"] .benefit-grid,
:root[data-style="compact"] .member-grid{gap:1px;}
:root[data-style="compact"] .benefit-card,
:root[data-style="compact"] .member-card{padding:14px 12px;}
:root[data-style="compact"] .stat{padding:14px 12px;}
:root[data-style="compact"] .stat .num{font-size:1.3rem;}
:root[data-style="compact"] .full-pub-item{padding-block:10px;}
:root[data-style="compact"] .news-item{padding-block:8px;}
:root[data-style="compact"] .quote-grid{gap:10px;}
:root[data-style="compact"] .quote-card{padding:14px 12px;}
:root[data-style="compact"] .join-hero{padding:22px 24px;}