/* ==========================================================================
   LAUBSCHER INSTITUTE FOR RESEARCH — COMMON STYLESHEET
   Linked on every page. Sections: TOKENS, RESET, LAYOUT, HEADER/NAV,
   MOBILE NAV, FOOTER, BUTTONS, SECTION LABEL, HERO, CARDS, BADGES, FORMS,
   LEGAL PAGE, UTILITIES.
   ========================================================================== */

/* ---------- PAGE TRANSITIONS ---------- */
/* Page-to-page transitions are handled by motion.js (curtain wipe). */
/* Native cross-document View Transitions: smooth crossfade between full page
   navigations, no JS routing required. Unsupported browsers just navigate normally. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---------- TOKENS ---------- */
:root {
  --color-navy: #1f3350;
  --color-bronze: #a98d68;
  --color-paper: #faf8f3;
  --color-desk: #e9e5df;
  --color-card: #f3efe7;
  --color-border: #ded7c9;
  --color-ink: #1c1a17;
  --color-body: #3a3731;
  --color-muted: #8f887d;
  --color-error: #b3261e;
  --color-success: #2e6e4e;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', Helvetica, Arial, sans-serif;

  --tracking-tight: 0.1em;
  --tracking: 0.16em;
  --tracking-wide: 0.24em;

  --max-width: 1200px;

  --nav-pad-x: 20px;
  --drawer-w: min(86vw, 340px);
  --drawer-pad-x: 26px;
}
@media (min-width: 768px) { :root { --nav-pad-x: 40px; } }

/* ---------- RESET ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-body);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); color: var(--color-ink); font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* ---------- LOADER ---------- */
html.is-loading, html.is-loading body { overflow: hidden; height: 100%; }
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 30%, #2a4267 0%, #1f3350 45%, #142235 100%);
  transition: opacity 0.6s cubic-bezier(.16,1,.3,1), visibility 0.6s;
}
.site-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loader-glyph { position: relative; display: flex; align-items: center; justify-content: center; }
.loader-glyph svg { position: relative; z-index: 2; width: 56px; height: auto; overflow: visible; }
.loader-beam-in {
  position: absolute;
  top: 50%; left: 50%;
  width: 70px;
  height: 2px;
  margin: -1px 0 0 -70px;
  opacity: 0;
  z-index: 1;
  background: linear-gradient(to right, transparent 0%, rgba(250, 248, 243, 0.6) 60%, rgba(250, 248, 243, 0.95) 100%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: beamIn 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
.loader-beam-in::after {
  content: '';
  position: absolute;
  right: -2px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: 0 0 9px 2px rgba(250, 248, 243, 0.75);
}
.loader-beams { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 1; }
.loader-beams i {
  position: absolute;
  top: -1px; left: 0;
  width: 100px;
  height: 2px;
  transform-origin: 0% 50%;
  transform: rotate(var(--rot));
  scale: 0.15 1;
  opacity: 0;
  background: linear-gradient(to right, rgba(250, 248, 243, 0.95) 0%, rgba(169, 141, 104, 0.5) 55%, transparent 100%);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  animation: beamOut 2.6s cubic-bezier(.16,1,.3,1) infinite;
  animation-delay: var(--bd, 0s);
}
.loader-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 130px; height: 130px;
  margin: -65px 0 0 -65px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 248, 243, 0.4) 0%, rgba(169, 141, 104, 0.16) 45%, transparent 72%);
  filter: blur(7px);
  z-index: 1;
  animation: glowPulse 2.6s ease-in-out infinite;
}
@keyframes beamIn {
  0% { opacity: 0; transform: translateX(-70px); }
  10% { opacity: 1; }
  40% { opacity: 1; transform: translateX(0); }
  88% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes beamOut {
  0%, 38% { opacity: 0; scale: 0.15 1; }
  50% { opacity: 1; scale: 0.75 1; }
  80% { opacity: 0.3; scale: 1.3 1.7; }
  100% { opacity: 0; scale: 1.6 2.1; }
}
@keyframes glowPulse {
  0%, 34% { opacity: 0.2; scale: 0.7; }
  50% { opacity: 0.9; scale: 1.2; }
  82% { opacity: 0.35; scale: 1.35; }
  100% { opacity: 0.2; scale: 0.7; }
}
.loader-mark svg path {
  fill: none;
  stroke: var(--color-paper);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: loaderDraw 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
.loader-mark svg path:nth-child(2) { animation-delay: 0.12s; }
.loader-word {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-desk);
  opacity: 0;
  animation: loaderWordIn 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes loaderDraw {
  0% { stroke-dashoffset: 220; opacity: 0.3; }
  38% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.4; }
}
@keyframes loaderWordIn {
  0%, 15% { opacity: 0; transform: translateY(4px); }
  40% { opacity: 0.65; transform: translateY(0); }
  88% { opacity: 0.65; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .loader-mark svg path { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .loader-word { animation: none; opacity: 0.6; }
  .loader-beam-in, .loader-beams { display: none; }
  .loader-glow { animation: none; opacity: 0.5; scale: 1; }
}

/* ---------- LAYOUT ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .container { padding: 0 40px; }
}
.section { padding: 80px 0; border-bottom: 1px solid var(--color-border); }
@media (max-width: 767px) {
  .section { padding: 56px 0; }
}
.section-navy { background: var(--color-navy); border-bottom: 1px solid var(--color-border); }
.section-card { background: var(--color-card); }

.hero-navy, .section-navy { position: relative; overflow: hidden; }
.hero-navy .container, .section-navy .container { position: relative; z-index: 1; }
.hero-wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-wave-canvas { opacity: 0.7; }
}
.section-tight { padding: 56px 0; }
.section-cta-pad { padding: 80px 0; }
@media (max-width: 767px) {
  .section-cta-pad { padding: 56px 0; }
}

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- LOGO ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--color-navy); }
.logo.logo-dark { color: var(--color-paper); }
.logo svg { height: 32px; width: auto; flex-shrink: 0; transition: filter 0.5s ease; }
.logo:hover svg { filter: drop-shadow(0 0 10px rgba(169, 141, 104, 0.55)); }
.logo-text { display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.logo-name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--color-ink); white-space: nowrap; transition: color 0.4s ease; }
.logo.logo-dark .logo-name { color: var(--color-paper); }
.logo-sub { font-family: var(--font-sans); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); white-space: nowrap; transition: color 0.4s ease; }
.logo.logo-dark .logo-sub { color: var(--color-desk); }
@media (max-width: 480px) {
  .logo svg { height: 26px; }
  .logo-text { gap: 4px; }
  .logo-name { font-size: 15px; }
  .logo-sub { font-size: 8.5px; letter-spacing: var(--tracking); }
}

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--color-navy);
  border-bottom: 1px solid transparent;
  transition: background 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease,
    padding-right 0.45s cubic-bezier(.16,1,.3,1);
}
.site-header.transparent {
  background: transparent;
  border-color: transparent;
}
.site-header.transparent::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(20, 30, 48, 0.68), rgba(20, 30, 48, 0.32) 70%, rgba(20, 30, 48, 0));
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.15) 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 25%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.15) 85%, transparent 100%);
}
.site-header.solid {
  /* An actual opaque bar — not just individually-white pills floating over
     whatever's beneath — so "solid" always reads as a clean, total white
     bar with nothing showing through the gaps between pills, regardless of
     what sits directly under the header (plain page content, or a navy
     section on solidAtTop pages before you've scrolled into a hero). */
  background: var(--color-paper);
  border-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(20, 30, 48, 0.04);
}
/* Solid = the header is sitting over plain page background, not a hero —
   there's nothing worth blurring behind the pills, so drop the glass
   entirely for a flat, crisp white pill with just a border. Every pill
   picks the blur back up the moment the header leaves "solid" (either by
   scrolling into a hero on transparentHero pages, or scrolling past the top
   on solidAtTop pages — see Site.mount). */
.site-header.solid .nav-logo-pill,
.site-header.solid .nav-links,
.site-header.solid .btn-signin,
.site-header.solid .nav-toggle,
.site-header.solid .nav-right {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.solid .logo.logo-dark { color: var(--color-navy); }
.site-header.solid .logo.logo-dark .logo-name { color: var(--color-ink); }
.site-header.solid .logo.logo-dark .logo-sub { color: var(--color-muted); }
.site-header.solid .nav-link { color: var(--color-body); }
.site-header.solid .nav-link:hover { color: var(--color-ink); }
.site-header.solid .nav-link.active { color: var(--color-bronze); }

/* Matches the header's actual rendered height at each breakpoint (measured:
   ~79px below 768px, ~88px at 768px+) — previously a flat 65px, which
   under-reserved space everywhere and let the header's own bottom edge (and,
   on solidAtTop pages, its pills) overlap whatever content started right
   below it instead of sitting cleanly on top of it. */
body.has-fixed-header { padding-top: 80px; }
@media (min-width: 768px) { body.has-fixed-header { padding-top: 96px; } }

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px var(--nav-pad-x);
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (min-width: 768px) { .nav { padding: 18px var(--nav-pad-x); } }
@media (min-width: 900px) { .nav { grid-template-columns: 1fr auto 1fr; } }

/* ---------- NAV GLASS PILLS ----------
   The logo and the nav-links group each sit in their own liquid-glass pill
   (same recipe as .btn-signin), rather than the header bar carrying one big
   blurred background — see .site-header.solid above. */
.nav-logo-pill {
  /* .nav is a 3-column grid and grid items default to justify-self:stretch —
     without this, the pill's background was stretching to fill the entire
     (flexible) first column while the logo content inside stayed left-
     aligned, leaving a large empty band of pill on the right. .nav-links
     and .nav-right both already set their own justify-self for the same
     reason. */
  justify-self: start;
  padding: 6px 16px 6px 12px;
  border: 1px solid rgba(233, 229, 223, 0.5);
  border-radius: 999px;
  background: rgba(20, 30, 48, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2);
  transition: background 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.45s cubic-bezier(.16,1,.3,1);
}
.site-header.solid .nav-logo-pill {
  background: rgba(250, 248, 243, 0.82);
  border-color: rgba(31, 51, 80, 0.16);
  box-shadow: 0 4px 16px rgba(20, 30, 48, 0.1);
}
/* The drawer only covers the right var(--drawer-w) of the screen, so once
   it's open, slide the logo pill right by that same margin — otherwise it's
   left stranded over the dimmed scrim instead of sitting inside the
   drawer's own header row alongside the close button. The extra
   --drawer-pad-x matches the drawer's own side padding so the pill lands
   flush with the drawer's content column instead of sitting right on its
   outer edge (where it used to read as half in/half out of the panel). */
.site-header.menu-open .nav-logo-pill {
  transform: translateX(calc(100vw - var(--drawer-w) - var(--nav-pad-x) + var(--drawer-pad-x)));
}
@media (min-width: 900px) {
  .site-header.menu-open .nav-logo-pill { transform: none; }
}
@media (max-width: 899px) {
  /* The wordmark is too wide to sit next to the account pill (avatar + bell
     + close, when signed in) inside the drawer's narrow content column
     without the two colliding — collapse to just the icon so the pill reads
     as a small brand mark alongside the other circular controls instead. */
  .site-header.menu-open .nav-logo-pill {
    padding: 11px;
  }
  .site-header.menu-open .nav-logo-pill .logo-text { display: none; }
}

.nav-links {
  position: relative;
  display: none;
  align-items: center;
  gap: 6px;
  justify-self: center;
  padding: 6px 10px;
  border: 1px solid rgba(233, 229, 223, 0.5);
  border-radius: 999px;
  background: rgba(20, 30, 48, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2);
  transition: background 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 900px) { .nav-links { display: flex; } }
.site-header.solid .nav-links {
  background: rgba(250, 248, 243, 0.82);
  border-color: rgba(31, 51, 80, 0.16);
  box-shadow: 0 4px 16px rgba(20, 30, 48, 0.1);
}
.site-header.menu-open .nav-logo-pill,
.site-header.menu-open .nav-links {
  background: rgba(20, 30, 48, 0.28) !important;
  border-color: rgba(233, 229, 223, 0.5) !important;
  box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2) !important;
}
/* Give the logo pill, nav-links pill and sign-in/profile pill matching
   heights so none of them reads as over- or under-sized next to the
   others. Scoped to desktop, where all three sit side by side — the mobile
   sign-in button is a plain icon circle and must keep equal width/height. */
@media (min-width: 900px) {
  .nav-logo-pill, .nav-links, .btn-signin {
    min-height: 48px;
    box-sizing: border-box;
  }
  /* True refractive glass for the nav pills specifically — kept to desktop
     only. The equivalent SVG filter was previously removed from the
     sign-in/profile pill after it rendered blank on some mobile browsers;
     restricting it to min-width:900px here gets the more prominent liquid
     effect where it matters most (the desktop nav) without reintroducing
     that risk on phones. */
  @supports (backdrop-filter: url(#tlir-liquid-glass-nav)) {
    .nav-logo-pill,
    .nav-links {
      backdrop-filter: url(#tlir-liquid-glass-nav) blur(3px) saturate(1.5);
    }
  }
}

.nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-desk);
  cursor: pointer;
  transition: color 0.3s ease;
  opacity: 0;
  transform: translateY(-6px);
  animation: navItemIn 0.6s cubic-bezier(.16,1,.3,1) forwards;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 1px;
  background: var(--color-bronze);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-paper); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link:active { opacity: 0.7; }
.nav-link.active { color: var(--color-bronze); }
.nav-link.active::after { transform: scaleX(1); }
.nav-link .chevron { transition: transform 0.3s ease; }
.nav-item-dropdown.open .nav-link .chevron { transform: rotate(180deg); }

@keyframes navItemIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- DROPDOWNS ---------- */
.nav-item-dropdown { position: relative; }
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(20, 30, 48, 0.18);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.nav-item-dropdown.open .nav-dropdown-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  color: var(--color-body);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-link:hover { background: var(--color-card); color: var(--color-ink); }
.nav-dropdown-link.active { color: var(--color-bronze); }
.nav-dropdown-link svg { flex-shrink: 0; opacity: 0.55; }

/* ---------- CUSTOM SELECT ---------- */
.tlir-select { position: relative; display: inline-block; min-width: 170px; }
.field .tlir-select, .field-row .tlir-select, .aa-edit-fields .tlir-select { display: block; width: 100%; }
.tlir-select-native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.tlir-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tlir-select-trigger .chevron { flex-shrink: 0; transition: transform 0.3s cubic-bezier(.16,1,.3,1); opacity: 0.6; }
.tlir-select.open .tlir-select-trigger .chevron { transform: rotate(180deg); }
.tlir-select.open .tlir-select-trigger,
.tlir-select-trigger:focus-visible { outline: none; border-color: var(--color-navy); }
.tlir-select.is-disabled .tlir-select-trigger { opacity: 0.55; cursor: not-allowed; }
.tlir-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlir-select-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(20, 30, 48, 0.18);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.tlir-select.open .tlir-select-panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
.tlir-select-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-body);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tlir-select-option:hover { background: var(--color-card); color: var(--color-ink); }
.tlir-select-option.active { color: var(--color-bronze); }

.profile-btn:active { transform: scale(0.96); }
.account-menu .nav-dropdown-panel { left: auto; right: 0; transform: translateY(-6px); }
.account-menu.open .nav-dropdown-panel { transform: translateY(0); }

.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; justify-self: end; }
/* lets the search toggle (hidden on mobile) participate directly in the
   .nav-right flex row instead of leaving a zero-width flex item that still
   claims a gap on either side */
#navSearchSlot { display: contents; }
.btn-signin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px 9px 16px;
  border: 1px solid rgba(233, 229, 223, 0.5);
  border-radius: 999px;
  background: rgba(20, 30, 48, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-paper);
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.3s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(-6px);
  animation: navItemIn 0.6s cubic-bezier(.16,1,.3,1) 0.3s forwards;
}
.btn-signin svg { flex-shrink: 0; }
.btn-signin:hover {
  background: rgba(20, 30, 48, 0.4);
  border-color: rgba(233, 229, 223, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(-1px);
}
.site-header.solid .btn-signin { color: var(--color-navy); border-color: rgba(31, 51, 80, 0.16); background: rgba(250, 248, 243, 0.82); box-shadow: 0 4px 16px rgba(20, 30, 48, 0.1); }
.site-header.solid .btn-signin:hover { background: rgba(250, 248, 243, 0.96); border-color: rgba(31, 51, 80, 0.3); }

/* ---------- PROFILE PILL (signed in) ---------- */
.profile-btn-expanded {
  gap: 10px;
  padding: 8px 20px 8px 8px;
  animation: profilePillGrow 0.5s cubic-bezier(.16,1,.3,1) forwards, navItemIn 0.6s cubic-bezier(.16,1,.3,1) 0.3s forwards;
}
@keyframes profilePillGrow {
  from { width: 40px; padding-left: 6px; padding-right: 6px; }
  to { width: auto; }
}
.profile-avatar {
  position: relative;
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bronze);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
/* Sits underneath the <img> (see .profile-avatar img) — if the photo fails
   to load, its onerror hides the <img> and these initials show through
   instead of a permanently blank circle. */
.profile-avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.profile-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.profile-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.profile-bell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.profile-bell:hover, .profile-bell:focus-visible { background: rgba(255, 255, 255, 0.18); outline: none; }
.site-header.solid .profile-bell:hover { background: rgba(31, 51, 80, 0.1); }
.profile-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.5s cubic-bezier(.34,1.56,.64,1), margin-left 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
}
.profile-chevron svg { transition: transform 0.3s ease; }
.profile-btn-expanded:hover .profile-chevron,
.profile-btn-expanded:focus-visible .profile-chevron { width: 12px; margin-left: 2px; opacity: 0.7; }
.account-menu.open .profile-chevron { width: 12px; margin-left: 2px; opacity: 0.7; }
.account-menu.open .profile-chevron svg { transform: rotate(180deg); }
.bell-dot {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--color-bronze);
  border: 1.5px solid var(--color-navy);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bellDotPop 0.4s cubic-bezier(.34,1.56,.64,1);
}
.bell-dot[hidden] { display: none; }
@keyframes bellDotPop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bell-dot { animation: none; } }
.site-header.solid .bell-dot { border-color: var(--color-paper); }

/* ---------- MOBILE NAV ---------- */
@media (max-width: 899px) {
  /* The profile pill and hamburger button used to each carry their own
     separate glass pill, reading as two disconnected circles — merge them
     into one shared pill on .nav-right instead, with each button going
     "plain" (no border/background of its own) inside it. */
  .nav-right {
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(233, 229, 223, 0.5);
    border-radius: 999px;
    background: rgba(20, 30, 48, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2);
    transition: background 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .site-header.solid .nav-right {
    background: rgba(250, 248, 243, 0.82);
    border-color: rgba(31, 51, 80, 0.16);
    box-shadow: 0 4px 16px rgba(20, 30, 48, 0.1);
  }
  .site-header.menu-open .nav-right {
    background: rgba(20, 30, 48, 0.28) !important;
    border-color: rgba(233, 229, 223, 0.5) !important;
    box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2) !important;
  }

  /* Scoped to the plain sign-in button's text label only — the expanded
     profile button's avatar/bell/chevron are spans too and must stay
     visible; .profile-name has its own explicit mobile hide below. */
  .btn-signin:not(.profile-btn-expanded) span { display: none; }
  .btn-signin:hover { background: none; }
  .btn-signin:not(.profile-btn-expanded) {
    padding: 11px;
    border-radius: 50%;
    animation-delay: 0.15s;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  .profile-btn-expanded .profile-name { display: none; }
  /* !important: .site-header.solid .btn-signin (3 classes deep) otherwise
     beats this on specificity alone, leaving the signed-in avatar pill with
     solid mode's cream background/shadow even here — a stray white oval
     inside the merged (and, once the drawer opens, forced-dark) nav-right
     pill. Mirrors the same !important escape hatch .menu-open already uses
     on .nav-right/.nav-toggle just below. */
  .btn-signin.profile-btn-expanded {
    padding: 4px 6px 4px 4px;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  .nav-right .nav-toggle { border: none !important; background: none !important; box-shadow: none !important; }
}

.nav-drawer-account { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.14); }
.nav-drawer-account-id { display: flex; align-items: center; gap: 12px; padding: 6px 0 14px; }
.nav-drawer-account-id .profile-avatar { width: 34px; height: 34px; font-size: 13px; }
.nav-drawer-account-name {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-drawer-account-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-desk);
}
.nav-drawer-account-link:hover { color: var(--color-paper); }
.nav-drawer-account-link svg { opacity: 0.75; flex-shrink: 0; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 210;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(233, 229, 223, 0.5);
  background: rgba(20, 30, 48, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2);
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), background 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 899px) { .nav-toggle { display: flex; } }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--color-desk); transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), background 0.3s; }
.nav-toggle.open { transform: rotate(90deg); }
.nav-toggle.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.site-header.solid .nav-toggle { background: rgba(250, 248, 243, 0.82); border-color: rgba(31, 51, 80, 0.16); box-shadow: 0 4px 16px rgba(20, 30, 48, 0.1); }
.site-header.solid .nav-toggle span { background: var(--color-navy); }
.site-header.menu-open .nav-toggle { background: rgba(20, 30, 48, 0.28) !important; border-color: rgba(233, 229, 223, 0.5) !important; box-shadow: 0 2px 10px rgba(10, 16, 27, 0.2) !important; }
.site-header.menu-open .nav-toggle span { background: var(--color-desk); }

/* ---------- SEARCH TOGGLE (nav search icon + archive page search) ----------
   Starts as a compact icon button and expands in place into a back button
   + text input; collapses again on close/click-outside unless it holds a
   value. One shared skin (light "paper" card) for in-page use, plus a
   .search-toggle-inline modifier for sitting inside the nav-links pill. */
.search-toggle {
  position: relative;
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  transition: width 0.45s cubic-bezier(.34,1.56,.64,1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.search-toggle.open { width: 240px; max-width: calc(100vw - 48px); }
.search-toggle-icon-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-muted);
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.search-toggle-icon-btn:hover { color: var(--color-ink); }
.search-toggle.open .search-toggle-icon-btn { opacity: 0; pointer-events: none; }
.search-toggle.has-value .search-toggle-icon-btn { color: var(--color-navy); }
.search-toggle-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.08s;
}
.search-toggle.open .search-toggle-panel { opacity: 1; pointer-events: auto; }
.search-toggle-back {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.search-toggle-back:hover { background: var(--color-card); color: var(--color-ink); }
.search-toggle-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink);
}
.search-toggle-input:focus { outline: none; }
.search-toggle-input::placeholder { color: var(--color-muted); }

/* inline skin — the nav search icon now lives inside .nav-links itself, so
   it takes on that pill's own glass background/border instead of carrying
   its own; only its icon/text colors need to track .nav-link's palette.
   Desktop-only, same breakpoint as .nav-links. */
.search-toggle-inline { display: none; }
@media (min-width: 900px) {
  .search-toggle-inline {
    display: flex;
    align-items: center;
    height: 36px; width: 36px;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 18px;
  }
  .search-toggle-inline.open { width: 200px; }
}
.search-toggle-inline .search-toggle-icon-btn,
.search-toggle-inline .search-toggle-back,
.search-toggle-inline .search-toggle-input { color: var(--color-desk); }
.search-toggle-inline .search-toggle-icon-btn:hover,
.search-toggle-inline .search-toggle-back:hover { color: var(--color-paper); }
.search-toggle-inline .search-toggle-back:hover { background: rgba(255, 255, 255, 0.14); }
.search-toggle-inline .search-toggle-input::placeholder { color: rgba(250, 248, 243, 0.55); }
.site-header.solid .search-toggle-inline .search-toggle-icon-btn,
.site-header.solid .search-toggle-inline .search-toggle-back,
.site-header.solid .search-toggle-inline .search-toggle-input { color: var(--color-body); }
.site-header.solid .search-toggle-inline .search-toggle-icon-btn:hover,
.site-header.solid .search-toggle-inline .search-toggle-back:hover { color: var(--color-ink); }
.site-header.solid .search-toggle-inline .search-toggle-back:hover { background: rgba(31, 51, 80, 0.08); }
.site-header.solid .search-toggle-inline .search-toggle-input::placeholder { color: var(--color-muted); }

/* drawer skin — the mobile drawer has plenty of width to spare, so this one
   sits permanently "open" (full-width field, icon just decorative) instead
   of using the collapse-in-place interaction the other two skins use. */
.search-toggle-drawer.search-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  border-radius: 999px;
  overflow: visible;
  border: 1px solid rgba(233, 229, 223, 0.24);
  background: rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  padding: 0 16px;
  flex-shrink: 0;
}
.search-toggle-drawer .search-toggle-icon-btn {
  position: static;
  opacity: 1 !important;
  pointer-events: none;
  width: auto;
  height: auto;
  flex-shrink: 0;
  margin-right: 10px;
  color: var(--color-desk);
}
.search-toggle-drawer .search-toggle-panel {
  position: static;
  opacity: 1;
  pointer-events: auto;
  flex: 1;
  padding: 0;
}
.search-toggle-drawer .search-toggle-back { display: none; }
.search-toggle-drawer .search-toggle-input { width: 100%; height: 100%; color: var(--color-paper); font-size: 14px; }
.search-toggle-drawer .search-toggle-input::placeholder { color: rgba(250, 248, 243, 0.5); }

/* While the drawer is open, the header bar itself goes fully transparent
   (previously a solid navy strip, which read as an ugly opaque band sitting
   on top of the glass drawer) — only the logo pill and the merged profile/
   hamburger pill carry visible chrome, consistent with every other header
   state where the bar itself is invisible and the pills do the work. */
.site-header.menu-open {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.site-header.menu-open .logo.logo-dark { color: var(--color-paper); }
.site-header.menu-open .logo.logo-dark .logo-name { color: var(--color-paper); }
.site-header.menu-open .logo.logo-dark .logo-sub { color: var(--color-desk); }
.site-header.menu-open .btn-signin { color: var(--color-paper); border-color: rgba(233, 229, 223, 0.4); }

/* Icon + label for every top-level drawer item (mobile only — the desktop
   nav pill stays icon-free). */
.nav-drawer-link-icon { display: inline-flex; flex-shrink: 0; opacity: 0.75; }
.nav-link.active .nav-drawer-link-icon,
.nav-drawer-trigger.active .nav-drawer-link-icon { opacity: 1; }
.nav-drawer .nav-link { display: flex; align-items: center; gap: 14px; position: relative; }

/* Current-page indicator: a dot on the left instead of the desktop pill's
   underline (the underline reads fine on a horizontal pill, but not on a
   vertical list of full-width rows). */
.nav-drawer .nav-link::after { content: none; }
.nav-drawer .nav-link::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-bronze);
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.nav-drawer .nav-link.active::before { transform: translateY(-50%) scale(1); }

.nav-drawer-group { display: flex; flex-direction: column; }
.nav-drawer-trigger {
  justify-content: flex-start;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  opacity: 1;
  transform: none;
  animation: none;
}
.nav-drawer-trigger .nav-drawer-link-label { flex: 1; }
.nav-drawer-trigger .chevron { transition: transform 0.35s cubic-bezier(.16,1,.3,1); }
.nav-drawer-group.open .nav-drawer-trigger .chevron { transform: rotate(180deg); }
/* grid-template-rows 0fr→1fr gives a height animation that always matches
   the sublist's real content height exactly, instead of transitioning to a
   guessed max-height (which either clips or leaves a pause at the end). */
.nav-drawer-sublist {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(.16,1,.3,1), margin-top 0.4s ease;
}
.nav-drawer-group.open .nav-drawer-sublist { grid-template-rows: 1fr; margin-top: 12px; }
.nav-drawer-sublist-inner { overflow: hidden; display: flex; flex-direction: column; }
.nav-drawer-sublink {
  font-size: 13px;
  color: var(--color-desk);
  padding: 8px 0 8px 32px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.16,1,.3,1);
}
.nav-drawer-group.open .nav-drawer-sublink { opacity: 1; transform: translateX(0); }
.nav-drawer-group.open .nav-drawer-sublink:nth-child(1) { transition-delay: 0.05s; }
.nav-drawer-group.open .nav-drawer-sublink:nth-child(2) { transition-delay: 0.09s; }
.nav-drawer-group.open .nav-drawer-sublink:nth-child(3) { transition-delay: 0.13s; }
.nav-drawer-sublink.active { color: var(--color-bronze); }
/* Dimmed + blurred scrim behind the drawer panel — a real <button> so
   click-outside-to-close is keyboard/screen-reader operable for free,
   same as the drawer's own Escape handling. */
.nav-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 94;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(10, 16, 27, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 0.35s ease, visibility 0s 0.35s;
}
.nav-drawer-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s 0s; }
@media (min-width: 900px) { .nav-drawer-scrim { display: none !important; } }

.nav-drawer {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--drawer-w);
  z-index: 95;
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(169, 141, 104, 0.22) 0%, transparent 45%),
    rgba(16, 24, 38, 0.82);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-left: 1px solid rgba(233, 229, 223, 0.16);
  box-shadow: -24px 0 60px rgba(10, 16, 27, 0.35);
  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--drawer-pad-x) calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(.16,1,.3,1), background 0.4s ease;
}
/* Same true refractive SVG filter used for the desktop nav pills, layered
   on top of the plain blur above wherever the browser actually honors a
   backdrop-filter url() reference — everywhere else keeps the plain blur. */
@supports (backdrop-filter: url(#tlir-liquid-glass-nav)) {
  .nav-drawer { backdrop-filter: url(#tlir-liquid-glass-nav) blur(9px) saturate(1.5); }
}
.nav-drawer.open { transform: translateX(0); pointer-events: auto; }
.nav-drawer .nav-link { font-size: 16px; opacity: 1; transform: none; animation: none; }

/* staggered reveal for each top-level drawer item, tuned to settle well inside the drawer's own 0.45s slide */
.nav-drawer > .nav-link,
.nav-drawer > .nav-drawer-group {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.16,1,.3,1);
}
.nav-drawer.open > .nav-link,
.nav-drawer.open > .nav-drawer-group {
  opacity: 1;
  transform: translateX(0);
}
.nav-drawer.open > *:nth-child(1) { transition-delay: 0.08s; }
.nav-drawer.open > *:nth-child(2) { transition-delay: 0.11s; }
.nav-drawer.open > *:nth-child(3) { transition-delay: 0.14s; }
.nav-drawer.open > *:nth-child(4) { transition-delay: 0.17s; }
.nav-drawer.open > *:nth-child(5) { transition-delay: 0.2s; }
@media (min-width: 900px) { .nav-drawer { display: none !important; } }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--color-navy); }
.footer-grid { display: grid; gap: 48px; padding: 64px 0; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-tagline { margin-top: 20px; max-width: 300px; font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--color-desk); }
.footer-label { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; color: rgba(233, 229, 223, 0.6); }
.footer-links { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.footer-links a, .footer-links span { font-family: var(--font-sans); font-size: 14px; color: var(--color-desk); }
.footer-links a:hover { color: var(--color-paper); }
.footer-bottom {
  border-top: 1px solid rgba(233, 229, 223, 0.15);
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(233, 229, 223, 0.6);
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- BUTTONS ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  border: 1px solid var(--color-navy);
  transition: opacity 0.15s, background 0.15s, color 0.15s, transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { opacity: 0; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-solid { background: var(--color-navy); color: var(--color-paper); }
.btn-solid:hover { opacity: 0.9; }
.btn-outline { color: var(--color-navy); background: transparent; }
.btn-outline:hover { background: var(--color-navy); color: var(--color-paper); }
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-arrow { gap: 0; }
.btn-arrow-icon {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(-6px);
  opacity: 0;
  transition: max-width 0.4s cubic-bezier(.34,1.56,.64,1), margin-left 0.4s cubic-bezier(.34,1.56,.64,1), transform 0.35s cubic-bezier(.16,1,.3,1), opacity 0.3s ease;
}
.btn-arrow:hover .btn-arrow-icon,
.btn-arrow.in-focus .btn-arrow-icon { max-width: 24px; margin-left: 8px; transform: translateX(0); opacity: 1; }

/* ---------- SECTION LABEL ---------- */
.section-label { display: flex; align-items: baseline; gap: 16px; border-top: 1px solid var(--color-border); padding-top: 14px; }
.section-label .num { font-family: var(--font-sans); font-size: 13px; color: var(--color-bronze); }
.section-label h2 { font-size: 30px; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}
.eyebrow-on-navy { color: var(--color-bronze); }

/* ---------- HERO ---------- */
.hero { padding: 96px 0 110px; }
.hero-navy { background: var(--color-navy); color: var(--color-paper); }
.hero h1 { font-size: 44px; line-height: 1.1; font-weight: 500; max-width: 620px; }
@media (min-width: 768px) { .hero h1 { font-size: 58px; } }
.hero-navy h1 { color: var(--color-paper); }
.hero p.lead { margin-top: 20px; max-width: 520px; font-size: 18px; line-height: 1.7; color: var(--color-body); }
.hero-navy p.lead { color: var(--color-desk); }
.hero-stats { display: flex; gap: 40px; margin-top: 44px; }
.hero-stat .num { font-family: var(--font-serif); font-size: 32px; color: var(--color-paper); }
.hero-stat .label { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: rgba(233, 229, 223, 0.6); margin-top: 4px; }

/* ---------- FULLBLEED BANNER HERO ---------- */
.hero-fullbleed {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: radial-gradient(120% 90% at 78% 8%, #2a4267 0%, #1f3350 42%, #142235 100%);
}
.hero-bg {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-bg svg {
  position: absolute;
  top: 50%; right: -8%;
  width: min(1400px, 130vw);
  height: auto;
  transform: translateY(-50%);
  stroke: var(--color-paper);
  opacity: 0.09;
}
.hero-bg-photo {
  background-size: cover;
  background-position: center 32%;
  filter: saturate(0.82) brightness(0.85) contrast(1.05);
}
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 16, 27, 0.85) 0%, rgba(10, 16, 27, 0.15) 45%, rgba(10, 16, 27, 0.35) 100%);
}
.hero-fullbleed-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  /* Top padding guarantees clearance under the fixed transparent header —
     .hero-fullbleed uses align-items:flex-end with only a min-height, so
     without this the content block can render tall enough (long heading,
     short/unmaximized browser window) that its top edge lands behind the
     header instead of below it. Because it's a min-height, adding this
     just grows the section a little taller rather than clipping anything. */
  padding: 110px 24px 96px;
}
@media (min-width: 768px) { .hero-fullbleed-inner { padding: 140px 40px 120px; } }
.hero-fullbleed h1 {
  color: var(--color-paper);
  font-size: 46px;
  line-height: 1.06;
  font-weight: 500;
  max-width: 780px;
}
@media (min-width: 768px) { .hero-fullbleed h1 { font-size: 76px; } }
.hero-fullbleed p.lead { margin-top: 24px; max-width: 520px; font-size: 18px; line-height: 1.75; color: var(--color-desk); }

/* shorter variant for page headers that aren't the homepage's full-viewport hero */
.hero-fullbleed-compact { min-height: 62vh; }
@media (max-width: 767px) { .hero-fullbleed-compact { min-height: 56vh; } }
.hero-fullbleed-compact h1 { font-size: 38px; }
@media (min-width: 768px) { .hero-fullbleed-compact h1 { font-size: 54px; } }

.scroll-cue {
  position: absolute;
  left: 24px; bottom: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.55);
}
@media (min-width: 768px) { .scroll-cue { left: 40px; } }
.scroll-cue .line { width: 1px; height: 40px; background: rgba(250, 248, 243, 0.3); position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: '';
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--color-bronze);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ---------- AUTH MODAL ---------- */
html.auth-modal-open, html.auth-modal-open body { overflow: hidden; }
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.4s;
}
.auth-modal.open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 27, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.auth-modal.open .auth-modal-backdrop { opacity: 1; }
.auth-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  background: var(--color-paper);
  border-radius: 20px;
  box-shadow: 0 40px 80px rgba(10, 16, 27, 0.35);
  overflow: hidden;
  opacity: 0;
  transform-origin: var(--auth-origin-x, 50%) var(--auth-origin-y, 50%);
  transform: scale(0.06);
  /* A springier curve (slight overshoot past 1, then settle) reads as the
     panel "morphing" out of the sign-in button rather than just fading/
     scaling in linearly — matching a spring(stiffness≈200, damping≈24) feel. */
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(.34,1.56,.64,1);
}
.auth-modal.open .auth-modal-panel { opacity: 1; transform: scale(1); }
.auth-modal-image {
  display: block;
  flex: 0 0 180px;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
}
@media (min-width: 900px) {
  .auth-modal-panel { flex-direction: row; max-width: 920px; }
  .auth-modal-image { flex: 0 0 52%; }
}
.auth-modal-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 88vh;
  overflow-y: auto;
  padding: 40px 32px 32px;
}
.auth-modal-body > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
}
.auth-modal.open .auth-modal-body > * { opacity: 1; transform: translateY(0); }
.auth-modal.open .auth-modal-body > *:nth-child(1) { transition-delay: 0.08s; }
.auth-modal.open .auth-modal-body > *:nth-child(2) { transition-delay: 0.12s; }
.auth-modal.open .auth-modal-body > *:nth-child(3) { transition-delay: 0.17s; }
.auth-modal.open .auth-modal-body > *:nth-child(4) { transition-delay: 0.22s; }
.auth-modal.open .auth-modal-body > *:nth-child(5) { transition-delay: 0.27s; }
.auth-modal.open .auth-modal-body > *:nth-child(6) { transition-delay: 0.32s; }
.auth-modal.open .auth-modal-body > *:nth-child(7) { transition-delay: 0.36s; }
.auth-modal-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.auth-modal-brand .logo.logo-dark { color: var(--color-navy); }
.auth-modal-brand .logo.logo-dark .logo-name { color: var(--color-ink); }
.auth-modal-brand .logo.logo-dark .logo-sub { color: var(--color-muted); }
.auth-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.auth-modal-close:hover { background: var(--color-paper); color: var(--color-navy); }
.auth-modal-close:active { transform: scale(0.9); }
.auth-modal-title { font-size: 26px; margin-bottom: 24px; }

/* ---------- NOTIFICATIONS MODAL ---------- */
.notif-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.4s;
}
.notif-modal.open { visibility: visible; pointer-events: auto; transition: visibility 0s linear 0s; }
.notif-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 16, 27, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.notif-modal.open .notif-modal-backdrop { opacity: 1; }
.notif-modal-panel {
  position: fixed;
  z-index: 1;
  width: min(360px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(31, 51, 80, 0.08);
  border-radius: 20px;
  box-shadow: 0 40px 80px rgba(10, 16, 27, 0.3);
  padding: 24px;
  opacity: 0;
  transform-origin: var(--notif-origin-x, 100%) var(--notif-origin-y, 0%);
  transform: scale(0.06);
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
}
@supports (backdrop-filter: url(#tlir-liquid-glass)) {
  .notif-modal-panel { backdrop-filter: url(#tlir-liquid-glass) blur(2px) saturate(1.4); }
}
.notif-modal.open .notif-modal-panel { opacity: 1; transform: scale(1); }
.notif-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(31, 51, 80, 0.06);
  color: var(--color-ink);
  transition: background 0.2s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.notif-modal-close:hover { background: rgba(31, 51, 80, 0.12); }
.notif-modal-close:active { transform: scale(0.9); }
.notif-modal-title { font-size: 20px; margin-bottom: 16px; padding-right: 30px; }
.notif-empty { padding: 24px 4px; text-align: center; font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }
.auth-tabs {
  position: relative;
  display: flex;
  gap: 4px;
  background: rgba(31, 51, 80, 0.06);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(31, 51, 80, 0.08);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 28px;
}
.auth-tab-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(31, 51, 80, 0.12);
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), width 0.45s cubic-bezier(.34,1.56,.64,1);
  z-index: 0;
  pointer-events: none;
}
.auth-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 10px 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.3s ease;
}
.auth-tab.active { color: var(--color-navy); }

/* social login */
.auth-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.auth-social-btn:hover { background: var(--color-card); border-color: rgba(31, 51, 80, 0.2); }
.auth-social-btn:active { transform: scale(0.97); }
.auth-social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 22px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-muted);
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* sliding crossfade between sign-in / sign-up forms */
.auth-forms { position: relative; overflow: hidden; }
.auth-form {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.16,1,.3,1), visibility 0s linear 0.45s;
}
.auth-form[data-auth-form="signin"] { transform: translateX(-18px); }
.auth-form[data-auth-form="signup"] { transform: translateX(18px); }
.auth-form.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
}
.auth-form .field:last-of-type { margin-bottom: 20px; }
.auth-form .btn { width: 100%; }
.auth-feedback:empty { display: none; }
.auth-feedback .form-error { margin-bottom: 16px; }
.auth-form.showing-result .field,
.auth-form.showing-result .btn { display: none; }
.auth-result { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 8px 8px; gap: 14px; }
.auth-result-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.auth-result.success .auth-result-icon {
  background: rgba(46, 110, 78, 0.12);
  color: var(--color-success);
  animation: authPop 0.5s cubic-bezier(.34,1.56,.64,1);
}
.auth-result.success .auth-result-icon svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: authCheckDraw 0.35s 0.2s cubic-bezier(.65,0,.35,1) forwards;
}
.auth-result.error .auth-result-icon {
  background: rgba(179, 38, 30, 0.1);
  color: var(--color-error);
  animation: authPop 0.4s cubic-bezier(.34,1.56,.64,1), authShake 0.5s 0.1s cubic-bezier(.36,.07,.19,.97);
}
.auth-result p { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink); margin: 0; max-width: 260px; line-height: 1.5; }
@keyframes authPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes authCheckDraw { to { stroke-dashoffset: 0; } }
@keyframes authShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.auth-switch { margin-top: 22px; text-align: center; font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }
.auth-switch[hidden] { display: none; }
.auth-switch button { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.auth-switch button:hover { color: var(--color-bronze); }

/* mobile: full-screen panel that materializes from the sign-in button */
@media (max-width: 899px) {
  .auth-modal { padding: 0; }
  .auth-modal-backdrop { background: var(--color-navy); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .auth-modal-panel {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    transform-origin: var(--auth-origin-x, 50%) var(--auth-origin-y, 12%);
    transform: scale(0.04);
    transition: transform 0.6s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease, border-radius 0.6s cubic-bezier(.34,1.56,.64,1);
  }
  .auth-modal.open .auth-modal-panel { transform: scale(1); border-radius: 0; }
  .auth-modal-image { flex-basis: calc(220px + env(safe-area-inset-top, 0px)); }
  .auth-modal-body {
    max-height: none;
    padding: 32px 28px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .auth-modal-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 20px; }
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1.in { transition-delay: 0.08s; }
.reveal-delay-2.in { transition-delay: 0.16s; }
.reveal-delay-3.in { transition-delay: 0.24s; }
.reveal-delay-4.in { transition-delay: 0.32s; }

/* cascade grid children (publication/announcement/project/person cards) as they reveal */
.grid > .reveal:nth-child(1) { transition-delay: 0s; }
.grid > .reveal:nth-child(2) { transition-delay: 0.09s; }
.grid > .reveal:nth-child(3) { transition-delay: 0.18s; }
.grid > .reveal:nth-child(4) { transition-delay: 0.27s; }
.grid > .reveal:nth-child(5) { transition-delay: 0.36s; }
.grid > .reveal:nth-child(6) { transition-delay: 0.45s; }
.grid > .reveal:nth-child(n+7) { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ---------- CARDS ---------- */
.card { border: 1px solid var(--color-border); background: var(--color-paper); transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s cubic-bezier(.16,1,.3,1), border-color 0.4s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(31, 51, 80, 0.12); border-color: rgba(31, 51, 80, 0.12); }
.pub-card { display: flex; flex-direction: column; padding: 28px; }
.pub-card-image {
  aspect-ratio: 16/9;
  background: linear-gradient(150deg, #24406a 0%, var(--color-navy) 55%, #16233a 100%);
  border-radius: 3px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pub-card-image svg { width: 34%; height: auto; stroke: var(--color-paper); opacity: 0.22; }
.pub-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.16,1,.3,1); }
.pub-card:hover .pub-card-image img { transform: scale(1.05); }
.pub-type-tag {
  display: inline-block;
  width: fit-content;
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-muted);
}
.pub-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pub-stats { display: flex; align-items: center; gap: 12px; }
.pub-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-muted);
}
.pub-stat svg { opacity: 0.6; flex-shrink: 0; }
.pub-card h4 { margin-top: 12px; font-size: 19px; line-height: 1.3; transition: transform 0.4s cubic-bezier(.16,1,.3,1); }
.pub-card .abstract { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--color-body); flex: 1; transition: transform 0.4s cubic-bezier(.16,1,.3,1); }
.pub-card .meta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-muted);
  transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.pub-card .meta .authors { color: var(--color-ink); }
.pub-card .meta .authors, .pub-featured-meta .authors { display: inline-flex; align-items: center; gap: 6px; }
.pub-card .meta .authors svg, .pub-featured-meta .authors svg { width: 12px; height: 12px; opacity: 0.55; flex-shrink: 0; }

/* View-publication reveal: space for this row is always reserved (so the
   card's height never changes on hover) — only the link inside it slides in
   from the left + fades in, while the title/abstract/meta above nudge
   upward slightly via transform so everything reads as "gathering closer
   together" as it appears, with zero layout reflow either way. */
.pub-card-reveal { margin-top: 18px; height: 18px; overflow: hidden; }
.pub-card-reveal-inner { display: inline-block; }
.pub-card .pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: 0;
  transform: translateX(-28px);
  transition: color 0.2s ease, gap 0.3s cubic-bezier(.16,1,.3,1), opacity 0.35s ease, transform 0.45s cubic-bezier(.16,1,.3,1);
}
.pub-card .pdf-link:hover { color: var(--color-bronze); gap: 10px; }
@media (hover: hover) and (pointer: fine) {
  .pub-card:hover .pdf-link { opacity: 1; transform: translateX(0); }
  .pub-card:hover h4, .pub-card:hover .abstract, .pub-card:hover .meta { transform: translateY(-2px); }
}
@media (hover: none) {
  .pub-card.in-focus .pdf-link { opacity: 1; transform: translateX(0); }
  .pub-card.in-focus h4, .pub-card.in-focus .abstract, .pub-card.in-focus .meta { transform: translateY(-2px); }
}

.pub-featured { display: grid; grid-template-columns: 1fr; border: 1px solid var(--color-border); background: var(--color-paper); margin-bottom: 24px; }
@media (min-width: 768px) { .pub-featured { grid-template-columns: 1fr 240px; } }
.pub-featured-body { padding: 40px; }
.pub-featured-body .pub-card-image { aspect-ratio: 21/9; margin-bottom: 22px; }
.pub-featured-body h3 { margin-top: 16px; font-size: 28px; line-height: 1.3; }
.pub-featured-body .abstract { margin-top: 12px; max-width: 620px; font-size: 16px; line-height: 1.65; color: var(--color-body); }
.pub-featured-meta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); }
.pub-featured-meta .authors { color: var(--color-ink); }
.pub-featured-panel { display: flex; flex-direction: column; justify-content: center; padding: 32px; background: var(--color-card); border-top: 1px solid var(--color-border); }
@media (min-width: 768px) { .pub-featured-panel { border-top: none; border-left: 1px solid var(--color-border); } }
.pub-featured-panel .label { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); margin-bottom: 12px; }
.pub-keywords { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-keyword { border: 1px solid var(--color-border); padding: 4px 10px; font-family: var(--font-sans); font-size: 11px; color: var(--color-body); }
.pub-featured-panel .year { font-family: var(--font-serif); font-size: 38px; font-weight: 300; color: var(--color-navy); }

/* ---------- PUBLICATION DETAIL PAGE ---------- */
.ref-pill { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-bronze); border: 1px solid rgba(169, 141, 104, 0.35); padding: 5px 12px; border-radius: 999px; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }

.citation-widget { margin-top: 20px; border: 1px solid var(--color-border); background: var(--color-card); padding: 20px; }
.citation-tabs { position: relative; display: inline-flex; gap: 4px; background: var(--color-paper); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.citation-tab-thumb { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); border-radius: 999px; background: var(--color-navy); transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), width 0.4s cubic-bezier(.34,1.56,.64,1); z-index: 0; }
.citation-tab { position: relative; z-index: 1; padding: 8px 18px; border-radius: 999px; font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-body); transition: color 0.25s ease; }
.citation-tab.active { color: var(--color-paper); }
.citation-panel { display: none; }
.citation-panel.active { display: block; }
.citation-text { white-space: pre-wrap; word-break: break-word; font-family: var(--font-serif); font-size: 14px; line-height: 1.6; color: var(--color-body); background: var(--color-paper); border: 1px solid var(--color-border); padding: 16px 18px; margin: 0 0 14px; }
.citation-copy.copied { border-color: var(--color-success); color: var(--color-success); }

/* ---------- PUBLIC ENGAGEMENT (like / share / comments) ---------- */
.pub-social { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.pub-social-actions { display: flex; gap: 12px; margin-bottom: 32px; }
.pub-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-body);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.2s ease;
}
.pub-social-btn:hover { border-color: var(--color-navy); color: var(--color-ink); }
.pub-social-btn:active { transform: scale(0.95); }
.pub-social-btn svg { transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
.pub-social-btn.liked { border-color: var(--color-bronze); color: var(--color-bronze); background: rgba(169, 141, 104, 0.08); }
.pub-social-btn.liked svg { fill: var(--color-bronze); stroke: var(--color-bronze); transform: scale(1.12); }
.pub-comments h3 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 16px; }
.pub-comments-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.pub-comment-row { display: flex; gap: 12px; align-items: flex-start; }
.pub-comment-body { flex: 1; min-width: 0; }
.pub-comment-meta { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); }
.pub-comment-meta strong { color: var(--color-ink); font-size: 13px; }
.pub-comment-body p { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--color-body); }
.pub-comment-signin { font-family: var(--font-sans); font-size: 14px; color: var(--color-muted); }
.pub-comment-signin a { color: var(--color-navy); text-decoration: underline; }
.pub-comment-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-ink);
  margin-bottom: 12px;
  resize: vertical;
}
.pub-comment-form textarea:focus { outline: none; border-color: var(--color-navy); }

/* ---------- PDF BODY CONTENT (shared by the generated PDF + the editor's live preview) ---------- */
.pdf-body-content h1, .pdf-body-content h2, .pdf-body-content h3 { margin: 0 0 12px; }
.pdf-body-content p { margin: 0 0 14px; }
.pdf-body-content ul, .pdf-body-content ol { margin: 0 0 14px; padding-left: 22px; }
.pdf-body-content ul { list-style: disc; }
.pdf-body-content ol { list-style: decimal; }
.pdf-body-content li { margin-bottom: 6px; }
.pdf-body-content blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid #ded7c9; font-style: italic; color: #4a463f; }
.pdf-body-content strong { font-weight: 600; }

/* ---------- EDITOR: EDIT / PREVIEW MODE SWITCH (sits above the ribbon, determines what's in it) ---------- */
.editor-mode-tabs { position: relative; display: inline-flex; gap: 4px; background: var(--color-card); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.editor-mode-thumb { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); border-radius: 999px; background: var(--color-navy); transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), width 0.4s cubic-bezier(.34,1.56,.64,1); z-index: 0; }
.editor-mode-tab { position: relative; z-index: 1; padding: 8px 20px; border-radius: 999px; font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-body); transition: color 0.25s ease; }
.editor-mode-tab.active { color: var(--color-paper); }
.editor-mode-panel { display: none; }
.editor-mode-panel.active { display: block; }

/* ---------- EDITOR: RIBBON (Word-style action bar: Save/Submit, formatting, Outline/Comments toggles) ---------- */
.editor-ribbon { position: sticky; top: 65px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 10px; margin-bottom: 28px; box-shadow: 0 8px 20px rgba(20, 30, 48, 0.06); }
.ribbon-group { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-right: 1px solid var(--color-border); }
.ribbon-group:last-child { border-right: none; }
.ribbon-actions .btn.btn-sm { padding: 9px 16px; font-size: 11px; }
.ribbon-format { flex: 1 1 auto; }
.ribbon-toggles { margin-left: auto; gap: 8px; }
@media (max-width: 720px) { .editor-ribbon { flex-direction: column; align-items: stretch; } .ribbon-group { border-right: none; border-bottom: 1px solid var(--color-border); padding: 10px 4px; } .ribbon-group:last-child { border-bottom: none; } .ribbon-toggles { margin-left: 0; } }

.ribbon-toggle-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-body); padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-paper); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1); }
.ribbon-toggle-btn:hover { background: var(--color-desk); }
.ribbon-toggle-btn:active { transform: scale(0.93); }
.ribbon-toggle-btn.active { background: var(--color-navy); color: var(--color-paper); border-color: var(--color-navy); }

.ribbon-stats { font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.autosave-indicator { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); opacity: 0; transition: opacity 0.3s ease; }
.autosave-indicator.state-saving, .autosave-indicator.state-saved, .autosave-indicator.state-error { opacity: 1; }
.autosave-indicator.state-saved { color: var(--color-success); }
.autosave-indicator.state-error { color: var(--color-error); }

.find-replace-panel { position: absolute; top: 100%; right: 14px; margin-top: 8px; width: 300px; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 20px 40px rgba(20, 30, 48, 0.2); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.96); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1), visibility 0s linear 0.25s; z-index: 12; }
.find-replace-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1), visibility 0s linear 0s; }
.find-replace-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.find-replace-row input { flex: 1 1 auto; border: 1px solid var(--color-border); background: var(--color-card); padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; }
.find-replace-count { font-family: var(--font-sans); font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.find-replace-wholeword { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); cursor: pointer; }
.find-replace-wholeword input { margin: 0; }
.find-replace-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.find-replace-actions .btn { padding: 7px 12px; font-size: 11px; }

#quillToolbar.ql-toolbar.ql-snow { border: none; background: none; padding: 0; }
#quillToolbar.ql-toolbar.ql-snow .ql-formats { margin-right: 0; padding: 0 10px; border-right: 1px solid var(--color-border); }
#quillToolbar.ql-toolbar.ql-snow .ql-formats:last-child { border-right: none; }
#quillToolbar.ql-toolbar.ql-snow button { transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.2s ease; border-radius: 5px; }
#quillToolbar.ql-toolbar.ql-snow button:hover { background: rgba(31, 51, 80, 0.08); transform: scale(1.08); }
#quillToolbar.ql-toolbar.ql-snow button.ql-active { background: rgba(31, 51, 80, 0.1); }
.ql-container.ql-snow { border-color: var(--color-border); border-radius: 4px; }

/* ---------- EDITOR: WORKSPACE (Outline sidebar left, Comments sidebar right, toggled via the ribbon) ---------- */
/* Both sidebars float beside the content rather than squeezing it — editor-main
   always keeps its full 960px reading width regardless of which sidebars are
   open. editor-workspace is a permanent full-bleed breakout (not just at wide
   viewports) so both sidebars' left/right offsets resolve against the actual
   viewport edges; on narrower viewports where there's no real margin to sit
   in, they overlay the content instead of squeezing it (an intentional
   trade-off — this is a researcher writing tool, not a phone-first surface). */
.editor-workspace { position: relative; width: 100vw; left: 50%; margin-left: -50vw; }
.editor-main { max-width: 960px; margin: 0 auto; }

/* Outline is a static heading list — no need to scroll with the document, so
   it's position:fixed (viewport-pinned): it never moves while scrolling and
   never takes layout space from editor-main. */
.outline-sidebar {
  /* Width shrinks to fit whatever margin actually exists (down to a 160px
   floor) instead of a fixed width that can overlap the content edge on
   narrower windows — left is then derived FROM that same width, so the
   two can never disagree with each other. */
  --sb-w: clamp(160px, calc((100vw - 960px) / 2 - 36px), 260px);
  position: fixed;
  top: 85px;
  bottom: 20px;
  left: calc(50vw - 480px - 20px - var(--sb-w));
  width: var(--sb-w);
  overflow-y: auto;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(20, 30, 48, 0.16);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-16px) scale(0.96);
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
  z-index: 40;
}
.outline-sidebar.open { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.outline-item { display: block; width: 100%; text-align: left; padding: 8px 12px; font-family: var(--font-sans); font-size: 13px; color: var(--color-body); border: none; background: none; cursor: pointer; border-radius: 6px; border-left: 2px solid transparent; transition: background 0.2s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1), border-color 0.2s ease, color 0.2s ease; }
.outline-item:hover { background: rgba(31, 51, 80, 0.06); color: var(--color-ink); }
.outline-item:active { transform: scale(0.97); }
.outline-item.level-2 { padding-left: 24px; font-size: 12px; }
.outline-item.level-3 { padding-left: 36px; font-size: 12px; color: var(--color-muted); }
.outline-item.current { border-left-color: var(--color-bronze); color: var(--color-navy); font-weight: 600; background: rgba(169, 141, 104, 0.08); }
.outline-empty { padding: 12px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); }

/* Comments must stay pinned to their anchor text, so unlike Outline it scrolls
   WITH the document — position:absolute within the permanently full-bleed
   workspace, never fixed. */
.comments-sidebar {
  --sb-w: clamp(160px, calc((100vw - 960px) / 2 - 36px), 260px);
  position: absolute;
  top: 0;
  right: calc(50vw - 480px - 20px - var(--sb-w));
  width: var(--sb-w);
  max-height: 80vh;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(20, 30, 48, 0.14);
  padding: 8px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px) scale(0.96);
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
  z-index: 10;
}
.comments-sidebar.open { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.comment-pin { position: absolute; left: 0; right: 0; transition: top 0.3s cubic-bezier(.34,1.56,.64,1); }

/* ---------- EDITOR: FULL SCREEN (DISTRACTION-FREE) MODE ---------- */
.ribbon-fullscreen-btn .icon-exit { display: none; }
.ribbon-fullscreen-btn.active .icon-enter { display: none; }
.ribbon-fullscreen-btn.active .icon-exit { display: inline-flex; }

#editor-content.fullscreen-active {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  background: var(--color-paper);
  padding: 20px clamp(20px, 4vw, 60px) 60px;
  animation: editorFullscreenIn 0.45s cubic-bezier(.16,1,.3,1);
}
#editor-content.fullscreen-exiting {
  animation: editorFullscreenOut 0.32s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes editorFullscreenIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes editorFullscreenOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.97); }
}
.fullscreen-active .editor-ribbon { top: 8px; }

/* ---------- EDITOR: LIVE PAGINATED PREVIEW ---------- */
.pdf-preview-scroll { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; background: var(--color-desk); border: 1px solid var(--color-border); border-radius: 4px; max-height: 640px; overflow-y: auto; }
.pdf-page-preview-outer { width: calc(794px * 0.68); height: calc(1125px * 0.68); overflow: hidden; box-shadow: 0 8px 24px rgba(20, 30, 48, 0.15); flex-shrink: 0; }
.pdf-page-preview-frame { width: 794px; min-height: 1123px; transform: scale(0.68); transform-origin: top left; }
.pdf-preview-empty { padding: 60px 20px; text-align: center; font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }

/* ---------- EDITOR / ADMIN: IN-TEXT COMMENTS ---------- */
.comments-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 900px) { .comments-layout { flex-direction: row; } }
.comments-preview { flex: 1 1 auto; min-width: 0; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.comments-list { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; }
.comment-item { border: 1px solid var(--color-border); background: var(--color-card); padding: 14px 16px; border-radius: 6px; }
.comment-item .quoted { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--color-muted); border-left: 2px solid var(--color-bronze); padding-left: 10px; margin-bottom: 8px; }
.comment-item .body-text { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--color-body); }
.comment-item .stale-note { margin-top: 8px; font-size: 11px; color: var(--color-error); }
.comments-empty { padding: 40px 20px; text-align: center; font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }

.review-comment-btn { position: absolute; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--color-navy); color: var(--color-paper); font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-tight); box-shadow: 0 8px 20px rgba(20, 30, 48, 0.25); opacity: 0; transform: translateY(4px) scale(0.9); pointer-events: none; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.review-comment-btn.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.review-comment-composer { position: absolute; z-index: 21; width: 280px; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 20px 40px rgba(20, 30, 48, 0.2); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.96); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1), visibility 0s linear 0.25s; }
.review-comment-composer.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1), visibility 0s linear 0s; }
.review-comment-composer textarea { width: 100%; border: 1px solid var(--color-border); background: var(--color-card); padding: 10px 12px; font-family: var(--font-sans); font-size: 13px; margin-bottom: 10px; resize: vertical; }
.review-comment-composer .row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- EDITOR: FIGURES, FOOTNOTES, CITATIONS (custom Quill blots) ---------- */
.ql-figure { margin: 0 0 20px; cursor: pointer; }
.ql-figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.ql-figure figcaption { font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); text-align: center; margin-top: 8px; }

.ql-footnote-marker { color: var(--color-bronze); cursor: pointer; font-weight: 600; }
.ql-footnote-marker .ql-footnote-num::before { content: '['; }
.ql-footnote-marker .ql-footnote-num::after { content: ']'; }

.ql-citation { color: var(--color-navy); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }

.ql-aux-heading { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--color-ink); margin: 28px 0 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.ql-footnote-item, .ql-bibliography-item { font-family: var(--font-sans); font-size: 13px; line-height: 1.7; color: var(--color-body); margin: 0 0 8px; }

.ql-custom-btn { font-family: var(--font-serif); font-size: 15px; }

/* Custom insert popovers reuse .review-comment-composer's floating idiom */
.citation-popover input { width: 100%; border: 1px solid var(--color-border); background: var(--color-card); padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; margin-bottom: 8px; }
.citation-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.citation-recent:empty { display: none; }
.citation-recent-item { font-family: var(--font-sans); font-size: 11px; color: var(--color-navy); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 10px; background: var(--color-paper); }
.citation-recent-item:hover { background: var(--color-card); }

.announce-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); background: var(--color-paper); overflow: hidden; transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s cubic-bezier(.16,1,.3,1), border-color 0.4s ease; }
.announce-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(31, 51, 80, 0.12); border-color: rgba(31, 51, 80, 0.12); }
.announce-img img { transition: transform 0.6s cubic-bezier(.16,1,.3,1); }
.announce-card:hover .announce-img img { transform: scale(1.05); }
.announce-img { position: relative; aspect-ratio: 16/9; background: var(--color-navy); overflow: hidden; }
.announce-card.featured .announce-img { aspect-ratio: 16/7; }
.announce-img img { width: 100%; height: 100%; object-fit: cover; }
.announce-img .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; font-size: 30px; color: rgba(250, 248, 243, 0.25); }
.announce-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.announce-card.featured .announce-body { padding: 32px; }
.announce-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 10px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--color-bronze); margin-bottom: 8px; }
.announce-tag::before { content: ''; width: 10px; height: 1px; background: var(--color-bronze); }
.announce-body h3 { font-size: 18px; line-height: 1.3; }
.announce-card.featured .announce-body h3 { font-size: 26px; }
.announce-body .desc { margin-top: 10px; flex: 1; font-size: 14px; line-height: 1.6; color: var(--color-body); }
.announce-body .date { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); }
.announce-body .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.announce-card.featured .desc { -webkit-line-clamp: 5; }
.announce-card.expanded .desc { -webkit-line-clamp: unset; overflow: visible; }
.announce-body .pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: 0;
  transform: translateX(-28px);
  transition: color 0.2s ease, gap 0.3s cubic-bezier(.16,1,.3,1), opacity 0.35s ease, transform 0.45s cubic-bezier(.16,1,.3,1);
}
.announce-body .pdf-link:hover { color: var(--color-bronze); gap: 10px; }
@media (hover: hover) and (pointer: fine) {
  .announce-card:hover .pdf-link, .announce-card.expanded .pdf-link { opacity: 1; transform: translateX(0); }
}
@media (hover: none) {
  .announce-card.in-focus .pdf-link, .announce-card.expanded .pdf-link { opacity: 1; transform: translateX(0); }
}

/* ---------- PEOPLE ---------- */
.person-card { text-align: left; }
.person-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color 0.4s ease;
}
.person-card:hover .person-photo { border-color: rgba(31, 51, 80, 0.16); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.16,1,.3,1); }
.person-card:hover .person-photo img { transform: scale(1.06); }
.person-photo span { font-family: var(--font-serif); font-size: 28px; color: var(--color-bronze); }
.person-card h4 { font-size: 17px; }
.person-role { margin-top: 4px; font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); }

/* ---------- STORY BLOCKS ---------- */
.story-block { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .story-block { grid-template-columns: 1fr 1fr; gap: 72px; } }
.story-block.reverse .story-image { order: -1; }
.story-text h2 { font-size: 34px; line-height: 1.2; max-width: 460px; }
@media (min-width: 768px) { .story-text h2 { font-size: 40px; } }
.story-text p { margin-top: 18px; font-size: 16px; line-height: 1.75; color: var(--color-body); max-width: 480px; }
.story-text p + p { margin-top: 14px; }
.story-image { aspect-ratio: 4/3; overflow: hidden; background: var(--color-navy); box-shadow: 0 28px 56px rgba(31, 51, 80, 0.16); }
.story-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.16,1,.3,1); }
.story-image:hover img { transform: scale(1.04); }
.story-image.pattern { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #24406a 0%, var(--color-navy) 55%, #16233a 100%); }
.story-image.pattern svg { width: 30%; height: auto; stroke: var(--color-paper); opacity: 0.18; }

/* ---------- TIMELINE ---------- */
.timeline { position: relative; max-width: 680px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--color-border); }
.timeline-item { position: relative; padding-left: 44px; margin-bottom: 52px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-marker { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-bronze); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; }
.timeline-item:hover .timeline-marker { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(169, 141, 104, 0.14); }
.timeline-year { font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--color-bronze); margin-bottom: 8px; }
.timeline-content h3 { font-size: 21px; line-height: 1.3; transition: color 0.25s ease; }
.timeline-item:hover .timeline-content h3 { color: var(--color-bronze); }
.timeline-content p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--color-body); max-width: 520px; }

/* ---------- VALUES ---------- */
.value-item {
  padding: 30px 26px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s cubic-bezier(.16,1,.3,1), border-color 0.4s ease;
}
.value-item:hover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(31, 51, 80, 0.12); border-color: rgba(31, 51, 80, 0.12); }
.value-item .value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(169, 141, 104, 0.12);
  color: var(--color-bronze);
  margin-bottom: 18px;
  transition: background 0.3s ease;
}
.value-item:hover .value-icon { background: rgba(169, 141, 104, 0.2); }
.value-item .value-icon svg { width: 22px; height: 22px; }
.value-item h4 { font-size: 18px; }
.value-item p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--color-body); }
@media (max-width: 479px) {
  .value-item { padding: 22px 18px; }
}

/* ---------- BADGES ---------- */
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 10px; letter-spacing: var(--tracking-tight); text-transform: uppercase; padding: 4px 10px; }
.status-pill .dot { width: 5px; height: 5px; border-radius: 50%; }
.status-pill.active { color: var(--color-success); background: rgba(46, 110, 78, 0.08); }
.status-pill.active .dot { background: var(--color-success); }
.status-pill.paused { color: #9a7540; background: rgba(169, 141, 104, 0.12); }
.status-pill.paused .dot { background: var(--color-bronze); }
.status-pill.completed { color: var(--color-muted); background: rgba(31, 51, 80, 0.06); }
.status-pill.completed .dot { background: var(--color-muted); }
.status-pill.draft { color: var(--color-muted); background: rgba(31, 51, 80, 0.06); }
.status-pill.draft .dot { background: var(--color-muted); }
.status-pill.submitted { color: #9a7540; background: rgba(169, 141, 104, 0.12); }
.status-pill.submitted .dot { background: var(--color-bronze); }
.status-pill.rejected { color: var(--color-error); background: rgba(179, 38, 30, 0.08); }
.status-pill.rejected .dot { background: var(--color-error); }
.status-pill.requested_revision { color: #6450a0; background: rgba(100, 80, 160, 0.1); }
.status-pill.requested_revision .dot { background: #6450a0; }
.status-pill.published { color: var(--color-success); background: rgba(46, 110, 78, 0.08); }
.status-pill.published .dot { background: var(--color-success); }

/* ---------- FORMS ---------- */
.field { margin-bottom: 24px; }
.field label { display: block; margin-bottom: 8px; font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--color-ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-navy); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 24px; }

/* ---------- INPUT ICONS ---------- */
.input-icon-wrap { position: relative; }
.input-icon-wrap > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
  transition: color 0.2s ease;
}
.input-icon-wrap input, .input-icon-wrap textarea { padding-left: 40px !important; }
.input-icon-wrap:focus-within > svg { color: var(--color-navy); }
.input-icon-wrap-top > svg { top: 16px; transform: none; }

/* ---------- GLASS CARD (frosted panel, reuses the same SVG liquid-glass filter) ---------- */
.glass-card {
  background: rgba(250, 248, 243, 0.65);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(31, 51, 80, 0.08);
}
@supports (backdrop-filter: url(#tlir-liquid-glass)) {
  .glass-card { backdrop-filter: url(#tlir-liquid-glass) blur(2px) saturate(1.3); }
}
.contact-form-card { padding: 32px; }
@media (max-width: 599px) { .contact-form-card { padding: 24px 20px; } }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-error { font-family: var(--font-sans); font-size: 13px; color: var(--color-error); margin-bottom: 16px; animation: feedbackIn 0.3s ease; }
.form-success { border: 1px solid rgba(46, 110, 78, 0.3); background: rgba(46, 110, 78, 0.05); padding: 32px; animation: feedbackIn 0.35s cubic-bezier(.16,1,.3,1); }
@keyframes feedbackIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-error, .form-success { animation: none; } }
.form-success p { font-family: var(--font-serif); font-size: 18px; line-height: 1.6; color: var(--color-ink); }

/* ---------- LEGAL PAGE ---------- */
.legal-layout { display: grid; grid-template-columns: 1fr; gap: 56px; padding: 64px 0; }
@media (min-width: 900px) { .legal-layout { grid-template-columns: 220px 1fr; } }
.toc-back { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-tight); color: var(--color-muted); }
.toc-back:hover { color: var(--color-navy); }

/* ---------- BACK NAV / BREADCRUMB ---------- */
.back-btn { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-sans); font-size: 13px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-navy); padding: 8px 4px; margin-bottom: 12px; transition: color 0.2s ease; }
.back-btn:hover { color: var(--color-bronze); }
.back-btn svg { flex-shrink: 0; }
.hero-navy .back-btn { color: var(--color-desk); }
.hero-navy .back-btn:hover { color: var(--color-paper); }
@media (min-width: 900px) { .back-btn { display: none; } }

.breadcrumb { display: none; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-tight); color: var(--color-muted); margin-bottom: 18px; }
@media (min-width: 900px) { .breadcrumb { display: flex; } }
.breadcrumb a { color: var(--color-muted); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--color-navy); }
.crumb-sep { opacity: 0.5; }
.crumb-current { color: var(--color-ink); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-label { margin-top: 40px; font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--color-muted); }
.toc-links { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.toc-links a { font-family: var(--font-sans); font-size: 13px; color: var(--color-body); }
.toc-links a:hover { color: var(--color-navy); }
.toc-siblings { margin-top: 40px; border-top: 1px solid var(--color-border); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.toc-siblings a { font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }
.toc-siblings a.current { color: var(--color-bronze); }
.legal-meta { display: grid; grid-template-columns: 1fr; gap: 16px; border: 1px solid var(--color-border); background: var(--color-card); padding: 24px; margin-bottom: 48px; font-family: var(--font-sans); font-size: 13px; }
@media (min-width: 640px) { .legal-meta { grid-template-columns: repeat(3, 1fr); } }
.legal-meta .key { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-tight); color: var(--color-muted); }
.legal-meta .val { margin-top: 4px; }
.legal-section { scroll-margin-top: 96px; margin-bottom: 64px; }
.legal-section-body { margin-top: 24px; max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--color-body); }
.legal-section-body h3 { margin-top: 24px; margin-bottom: 8px; font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-muted); }
.legal-section-body h3:first-child { margin-top: 0; }
.legal-section-body p { margin-bottom: 16px; }
.legal-section-body ul { margin-bottom: 16px; padding-left: 20px; list-style: disc; }
.legal-section-body li { margin-bottom: 8px; }
.legal-section-body strong { font-weight: 500; color: var(--color-ink); }
.legal-section-body a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-section-body a:hover { color: var(--color-bronze); }

/* ---------- UTILITIES ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.empty-state { border: 1px solid var(--color-border); background: var(--color-paper); padding: 80px 40px; text-align: center; }
.empty-state .title { font-family: var(--font-serif); font-size: 18px; color: var(--color-ink); }
.empty-state .sub { margin-top: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }
.skeleton { border: 1px solid var(--color-border); background: var(--color-paper); padding: 44px; }
.skeleton .sk-line { height: 12px; background: var(--color-border); opacity: 0.5; margin-bottom: 10px; }

/* ---------- DASHBOARD: SIDEBAR NAV (My Submissions / Review Queue / Staff / Analytics / ...) ---------- */
.dash-layout { display: flex; align-items: flex-start; gap: 48px; }
.dash-main { flex: 1 1 auto; min-width: 0; }

.dash-sidebar { position: relative; flex: 0 0 220px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 85px; padding-left: 14px; }
.dash-sidebar-thumb { position: absolute; top: 0; left: 0; width: 3px; height: 44px; border-radius: 2px; background: var(--color-navy); transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), height 0.3s cubic-bezier(.34,1.56,.64,1), width 0.3s ease; z-index: 0; }
.dash-nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-body);
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.dash-nav-item svg { flex-shrink: 0; opacity: 0.6; transition: opacity 0.2s ease; }
.dash-nav-item span { flex: 1 1 auto; }
.dash-nav-badge {
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-bronze);
  color: var(--color-paper);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}
.dash-nav-item:hover { background: var(--color-card); color: var(--color-ink); }
.dash-nav-item:hover svg { opacity: 0.9; }
.dash-nav-item:active { transform: scale(0.97); }
.dash-nav-item.active { color: var(--color-navy); font-weight: 600; }
.dash-nav-item.active svg { opacity: 1; }

.dash-tab-panel { display: none; }
.dash-tab-panel.active { display: block; animation: dashPanelIn 0.4s cubic-bezier(.16,1,.3,1); }
@keyframes dashPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 899px) {
  .dash-layout { flex-direction: column; gap: 20px; }
  .dash-sidebar {
    position: static;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    padding: 4px 4px 10px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .dash-sidebar-thumb { top: auto; bottom: 0; left: 0; width: 24px; height: 3px; }
  .dash-nav-item { flex-shrink: 0; padding: 10px 14px; }
  .dash-nav-item span { white-space: nowrap; }
}

/* ---------- DASHBOARD: STAFF TAB ---------- */
.staff-row { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.staff-row:first-child { border-top: 1px solid var(--color-border); }
.staff-row-main { flex: 1 1 auto; min-width: 0; }
.staff-row-main h4 { font-size: 16px; line-height: 1.3; }
.staff-row-main .meta { margin-top: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); }
.staff-row-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.staff-edit-fields { display: flex; gap: 10px; margin-top: 10px; }
.staff-edit-fields input { border: 1px solid var(--color-border); background: var(--color-paper); padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; width: 160px; }
.staff-admin-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); cursor: pointer; }
.staff-admin-toggle .switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--color-border); transition: background 0.25s ease; flex-shrink: 0; }
.staff-admin-toggle .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-paper); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); }
.staff-admin-toggle.is-admin .switch { background: var(--color-navy); }
.staff-admin-toggle.is-admin .switch::after { transform: translateX(16px); }
.staff-admin-toggle:disabled, .staff-admin-toggle.disabled { opacity: 0.4; cursor: not-allowed; }
.staff-btn { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-navy); background: none; border: none; cursor: pointer; padding: 4px; }
.staff-btn:hover { color: var(--color-bronze); }

/* ---------- DASHBOARD: ANALYTICS TAB ---------- */
.analytics-section-label { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--color-muted); margin: 32px 0 14px; }
.analytics-section-label:first-child { margin-top: 0; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat-card { border: 1px solid var(--color-border); background: var(--color-paper); padding: 20px; }
.stat-card .num { font-family: var(--font-serif); font-size: 32px; color: var(--color-navy); font-weight: 500; }
.stat-card .label { margin-top: 4px; font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); }
.sparkline { display: flex; align-items: flex-end; gap: 3px; height: 100px; padding: 12px; border: 1px solid var(--color-border); background: var(--color-paper); }
.sparkline-bar { flex: 1 1 auto; background: var(--color-navy); opacity: 0.75; border-radius: 2px 2px 0 0; min-height: 2px; transition: opacity 0.2s ease; }
.sparkline-bar:hover { opacity: 1; }
.analytics-table { width: 100%; border-collapse: collapse; }
.analytics-table th { text-align: left; font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-muted); padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.analytics-table td { padding: 10px 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-sans); font-size: 13px; color: var(--color-body); }
.analytics-table td.num { text-align: right; color: var(--color-ink); font-weight: 500; }
.analytics-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .analytics-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- PAPER HISTORY TIMELINE ---------- */
.paper-timeline { padding: 4px 4px 4px 6px; }
.paper-timeline .timeline-item { position: relative; padding: 0 0 22px 20px; border-left: 1px solid var(--color-border); margin-bottom: 0; }
.paper-timeline .timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-dot { position: absolute; left: -5px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-navy); border: 2px solid var(--color-paper); box-shadow: 0 0 0 1px var(--color-border); }
.timeline-label { font-family: var(--font-serif); font-size: 15px; color: var(--color-ink); }
.timeline-meta { margin-top: 2px; font-family: var(--font-sans); font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.timeline-note { margin-top: 6px; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--color-body); background: var(--color-card); padding: 8px 12px; border-radius: 6px; }
.timeline-empty { font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); padding: 12px; }

/* ---------- EDITOR: COVER IMAGE ---------- */
.cover-image-field { display: flex; align-items: center; gap: 16px; }
.cover-image-preview { width: 96px; height: 72px; flex-shrink: 0; border: 1px solid var(--color-border); background: var(--color-card); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cover-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-image-preview svg { width: 30%; height: auto; stroke: var(--color-muted); opacity: 0.5; }
.cover-image-actions { display: flex; gap: 10px; }

/* ---------- ANNOUNCEMENTS ---------- */
.announce-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border); }
.announce-form-row { display: flex; gap: 16px; }
.announce-form-row .field { flex: 1 1 0; }
.announce-toggles { display: flex; gap: 20px; }
.announce-toggle-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; color: var(--color-body); cursor: pointer; }
.announce-admin-row { display: flex; align-items: flex-start; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.announce-admin-row:first-child { border-top: 1px solid var(--color-border); }
.announce-admin-row-main { flex: 1 1 auto; min-width: 0; }
.announce-admin-row-main h4 { font-size: 16px; }
.announce-admin-row-main .meta { margin-top: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); }
.announce-admin-row-actions { display: flex; gap: 10px; flex-shrink: 0; padding-top: 2px; }

/* ---------- DASHBOARD: shared destructive action + pill filter bar ---------- */
.staff-btn-danger { color: var(--color-error); }
.staff-btn-danger:hover { color: #7a1a15; }
.pill-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pill-filter { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-body); background: var(--color-card); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.pill-filter:hover { border-color: var(--color-bronze); }
.pill-filter.active { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-paper); }

/* ---------- DASHBOARD: CONTACT INBOX ---------- */
.inbox-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.inbox-row:first-child { border-top: 1px solid var(--color-border); }
.inbox-row .dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-bronze); margin-top: 6px; opacity: 0; }
.inbox-row.unread .dot { opacity: 1; }
.inbox-row.unread .inbox-row-main h4 { font-weight: 600; }
.inbox-row-main { flex: 1 1 auto; min-width: 0; }
.inbox-row-main h4 { font-size: 15px; line-height: 1.3; }
.inbox-row-main .meta { margin-top: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); }
.inbox-row-main .snippet { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--color-body); }
.inbox-detail { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.inbox-detail-meta { font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); margin-bottom: 12px; }
.inbox-detail-body { font-size: 15px; line-height: 1.7; color: var(--color-body); white-space: pre-wrap; }
.inbox-detail-actions { margin-top: 16px; display: flex; gap: 12px; }

/* ---------- DASHBOARD: RESEARCH PROJECTS TAB ---------- */
.project-admin-row { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.project-admin-row:first-child { border-top: 1px solid var(--color-border); }
.project-admin-row-head { display: flex; align-items: flex-start; gap: 20px; }
.project-admin-row-main { flex: 1 1 auto; min-width: 0; }
.project-admin-row-main h4 { font-size: 16px; }
.project-admin-row-main .meta { margin-top: 4px; font-family: var(--font-sans); font-size: 12px; color: var(--color-muted); }
.project-admin-row-actions { display: flex; gap: 10px; flex-shrink: 0; padding-top: 2px; }
.project-team-panel { margin-top: 16px; padding: 16px; background: var(--color-card); border-radius: 6px; }
.project-team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.project-team-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-sans); font-size: 13px; color: var(--color-body); }
.project-team-add { display: flex; gap: 10px; flex-wrap: wrap; }
.project-team-add select, .project-team-add input { border: 1px solid var(--color-border); background: var(--color-paper); padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; }

/* ---------- DASHBOARD: NOTIFICATIONS ---------- */
.profile-photo-card { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.profile-photo-preview {
  flex-shrink: 0;
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bronze);
  color: var(--color-paper);
  font-family: var(--font-serif);
  font-size: 28px;
}
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-name { font-family: var(--font-serif); font-size: 20px; color: var(--color-ink); margin-bottom: 12px; }

.dash-notif-panel { margin-bottom: 32px; }
.dash-notif-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-notif-header h3 { font-family: var(--font-serif); font-size: 18px; color: var(--color-ink); }
.dash-notif-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.dash-notif-row:first-child { border-top: 1px solid var(--color-border); }
.dash-notif-row .dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-bronze); margin-top: 6px; opacity: 0; }
.dash-notif-row.unread .dot { opacity: 1; }
.dash-notif-row.unread h4 { font-weight: 600; }
.dash-notif-row-main { flex: 1 1 auto; min-width: 0; }
.dash-notif-row-main h4 { font-size: 14px; line-height: 1.3; }
.dash-notif-row-main .body { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--color-body); }
.dash-notif-row-main .meta { margin-top: 4px; font-family: var(--font-sans); font-size: 11px; color: var(--color-muted); }

/* ---------- MOBILE: equal-height pills + white open drawer ---------- */
@media (max-width: 899px) {
  .nav-logo-pill, .nav-right { height: 48px; box-sizing: border-box; display: flex; align-items: center; }
  .nav-logo-pill { padding-top: 0; padding-bottom: 0; }
  .site-header.menu-open .nav-logo-pill { padding: 0 12px; }

  .nav-drawer {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-left: 1px solid var(--color-border);
    box-shadow: -24px 0 60px rgba(10, 16, 27, 0.18);
  }
  .nav-drawer .nav-link, .nav-drawer .nav-drawer-sublink { color: var(--color-body); }
  .nav-drawer .nav-link:hover, .nav-drawer .nav-link:focus-visible { color: var(--color-ink); }
  .nav-drawer .nav-link.active, .nav-drawer .nav-drawer-sublink.active { color: var(--color-bronze); }
  .search-toggle-drawer.search-toggle { border-color: var(--color-border); background: var(--color-card); }
  .search-toggle-drawer .search-toggle-icon-btn { color: var(--color-muted); }
  .search-toggle-drawer .search-toggle-input { color: var(--color-ink); }
  .search-toggle-drawer .search-toggle-input::placeholder { color: var(--color-muted); }
  .nav-drawer-account { border-top-color: var(--color-border); }
  .nav-drawer-account-name { color: var(--color-ink); }
  .nav-drawer-account-link { color: var(--color-body); }
  .nav-drawer-account-link:hover { color: var(--color-ink); }

  /* header pills + wordmark switch to the light style while the drawer is open */
  .site-header.menu-open .nav-logo-pill,
  .site-header.menu-open .nav-right {
    background: #fff !important;
    border-color: var(--color-border) !important;
    box-shadow: 0 2px 10px rgba(20, 30, 48, 0.1) !important;
  }
  .site-header.menu-open .logo.logo-dark,
  .site-header.menu-open .logo.logo-dark .logo-name { color: var(--color-ink); }
  .site-header.menu-open .logo.logo-dark .logo-sub { color: var(--color-muted); }
  .site-header.menu-open .nav-toggle span { background: var(--color-navy); }
  .site-header.menu-open .btn-signin { color: var(--color-navy); }
  .site-header.menu-open .bell-dot { border-color: #fff; }
}