/* ============================================================
   Mostowy Lab — mostowylab.com
   Typeface: Lato (Google Fonts)
   Palette: Deep Ocean — exact from context.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ── Design tokens ── */
:root {
  --color-primary:      #003087;
  --color-accent:       #0066CC;
  --color-bg-page:      #FFFFFF;
  --color-bg-surface:   #F4F7FB;
  --color-bg-footer:    #111827;
  --color-text-primary: #1A1A2E;
  --color-text-muted:   #4B5563;
  --color-text-faint:   #9CA3AF;
  --color-border:       #E5E9F0;
  --color-border-light: #C7D3E8;
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Lato', sans-serif !important;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

/* ── Global link ── */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--color-primary); text-decoration: none; }

/* ── Navbar ── */
.navbar {
  height: 58px !important;
  background-color: #FFFFFF !important;
  border-bottom: 0.5px solid var(--color-border) !important;
  box-shadow: none !important;
  padding: 0 32px !important;
}

/* 3-column grid: [spacer] [logo+links centered] [icons right] */
.navbar > .container-fluid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  height: 58px;
}

/* The brand (logo) and collapse (links) form the center column together */
.navbar-brand {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

.navbar-collapse {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
}

/* Right-side icons pushed to the far right */
.navbar-nav:last-child,
#quarto-header .navbar-nav[aria-label],
.navbar > .container-fluid > *:last-child {
  grid-column: 3 !important;
  justify-self: end !important;
  margin-left: auto !important;
}

/* Logo */
.navbar-brand img {
  height: 28px !important;
  width: auto;
  mix-blend-mode: multiply;
  margin-right: 20px;
}

/* Hide text title when logo is present */
.navbar-brand .navbar-title { display: none !important; }

.navbar-nav .nav-link {
  font-family: 'Lato', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--color-text-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 14px !important;
  transition: color 0.15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
}

/* Mobile: revert to stacked */
@media (max-width: 991px) {
  .navbar > .container-fluid {
    display: flex !important;
  }
  .navbar-brand { grid-column: unset !important; }
  .navbar-collapse { grid-column: unset !important; display: block !important; }
}


/* ── Page layout — strip Quarto's default column padding ── */
/* page-layout: full removes Bootstrap container, so we manage width ourselves */
#quarto-content > * { padding: 0 !important; }
.page-full { padding: 0 !important; }

/* ── Section wrapper pattern ── */
/* Each section is full-bleed; inner div caps content at max-width */
.section-wrap {
  padding: 48px 32px;
}
.section-wrap--surface { background: var(--color-bg-surface); }
.section-wrap--white   { background: var(--color-bg-page); }

.section-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* ── Eyebrow + H2 section title pattern ── */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.section-title {
  font-family: 'Lato', sans-serif !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-bottom: 0 !important;
}

.section-sub {
  font-size: 14.5px;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 620px;
  margin-bottom: 24px;
}

.section-more {
  display: inline-block;
  font-size: 13px;
  color: var(--color-accent);
  margin-top: 14px;
  font-weight: 400;
  border: none;
}
.section-more:hover { color: var(--color-primary); border: none; }

/* ── Hero ── */
.hero-section {
  background: var(--color-primary);
  padding: 64px 32px 56px;
}

.hero-inner {
  max-width: 860px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}

.hero-h1 strong { font-weight: 700 !important; }
.hero-h1 {
  font-family: 'Lato', sans-serif !important;
  font-size: 40px !important;
  font-weight: 300 !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  margin: 0 0 20px !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.hero-sub {
  font-size: 14.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  max-width: 460px;
  line-height: 1.75;
  margin-bottom: 24px;
}

.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 24px;
}

.hero-cta {
  display: inline-block;
  background: #ffffff;
  color: var(--color-primary) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 5px;
  border: none !important;
  transition: opacity 0.15s;
}
.hero-cta:hover { opacity: 0.9; color: var(--color-primary) !important; border: none !important; }

/* ── Research cards ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.research-card {
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-top: 2.5px solid var(--color-primary);
  border-radius: 8px;
  padding: 18px;
}

.card-area {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.card-title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.card-body {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ── Publication cards ── */
.pub-list { margin-top: 8px; }

.pub-year-group { margin-bottom: 28px; }

.pub-year-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  padding-left: 12px;
  border-left: 2.5px solid var(--color-primary);
}

.pub-card {
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 16px;
  align-items: start;
}

.pub-year-big {
  font-size: 28px;
  font-weight: 300;
  color: #D0D8E8;
  text-align: right;
  line-height: 1;
  padding-top: 2px;
}

.pub-badges { margin-bottom: 6px; }

.pub-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 5px;
  text-transform: uppercase;
}
.badge-preprint  { background: #EAF3DE; color: #27500A; }
.badge-published { background: #E6F1FB; color: #0C447C; }

.pub-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin-bottom: 5px;
}

.pub-authors {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 3px;
}
.pub-authors .pi { font-weight: 700; color: var(--color-text-primary); }

.pub-journal {
  font-size: 12.5px;
  color: var(--color-accent);
  font-style: italic;
}

.pub-doi {
  font-size: 12px;
  color: var(--color-accent);
  font-style: normal;
  margin-left: 6px;
  border: none;
}
.pub-doi:hover { color: var(--color-primary); }

/* ── News list ── */
.news-list { margin-top: 8px; }

.news-row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--color-border);
  align-items: baseline;
}
.news-row:last-child { border-bottom: none; }

.news-date {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-faint);
  min-width: 68px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.news-text {
  font-size: 13.5px;
  color: var(--color-text-primary);
  line-height: 1.55;
}

/* ── Funder strip ── */
.funder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 16px;
}
.funder-row img { height: 80px; border: none; }
.funder-row--past img { opacity: 0.5; height: 64px; }
.funder-past-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-top: 20px;
  margin-bottom: 8px;
}

/* ── Quarto overrides ── */

/* Strip default h2 styling from flatly */
h1, h2, h3, h4 {
  font-family: 'Lato', sans-serif !important;
}

/* Inner-page h2 (non-homepage) */
main h2 {
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--color-text-primary) !important;
  border-bottom: 0.5px solid var(--color-border) !important;
  padding-bottom: 8px !important;
  margin-top: 40px !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Inner-page h3 */
main h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-text-primary) !important;
  margin-top: 28px !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
}

/* Inner-page h1 (page title) */
.quarto-title h1.title {
  font-size: 32px !important;
  font-weight: 300 !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  text-transform: none !important;
  padding-bottom: 0 !important;
}
.quarto-title {
  border-bottom: 0.5px solid var(--color-border);
  padding-bottom: 20px;
  margin-bottom: 32px;
}
.quarto-title-meta { display: none !important; }

/* ── Consistent content width on ALL pages ──
   Targets both default-layout and article-layout subpages */
.column-body,
.page-layout-article,
#quarto-content > .page-full > main,
#quarto-content > main {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 48px 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Body paragraph */
p { font-size: 15px; line-height: 1.65; color: var(--color-text-primary); margin-bottom: 14px; }

/* Blockquote */
blockquote {
  border-left: 3px solid var(--color-primary) !important;
  background: var(--color-bg-surface);
  padding: 14px 20px !important;
  color: var(--color-text-muted) !important;
  font-style: italic;
  border-radius: 0 4px 4px 0;
  margin: 20px 0 !important;
}

/* Knowledge gap boxes (research page) */
.knowledge-gap {
  background: var(--color-bg-surface);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.knowledge-gap .gap-num {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.knowledge-gap p { margin-bottom: 0; font-size: 14px; }

/* Central question — two-column layout */
.central-question-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 16px 0 22px 0;
}

.central-question-grid img {
  width: 100%;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .central-question-grid {
    grid-template-columns: 1fr;
  }
}

/* Model system */

.model-system-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 16px;
}

.model-system-grid img {
  width: 100%;
  border-radius: 8px;
}

/* Vision section — centred figure */
.vision-figure {
  text-align: center;
  margin: 16px 0 28px 0;
}

.vision-figure img {
  max-width: 480px;
  width: 100%;
}

.vision-figure figcaption {
  font-size: 12px;
  color: var(--color-text-faint);
  margin-top: 8px;
  font-style: italic;
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.team-card {
  border: 0.5px solid var(--color-border);
  border-radius: 6px;
  padding: 16px 18px;
  background: #fff;
  transition: border-color 0.15s;
}
.team-card:hover { border-color: var(--color-primary); }
.team-card .name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 2px; }
.team-card .role { font-size: 13px; color: var(--color-text-muted); }
.team-card .since { font-size: 12px; color: var(--color-text-faint); margin-top: 6px; }
.team-card a { color: var(--color-accent); font-size: 12px; border: none; }

/* Alumni table */
.alumni-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 16px; }
.alumni-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-text-muted); border-bottom: 1.5px solid var(--color-border);
  padding: 8px 12px; text-align: left;
}
.alumni-table td { padding: 10px 12px; border-bottom: 0.5px solid var(--color-border); vertical-align: top; }
.alumni-table tr:last-child td { border-bottom: none; }

/* Footer override */
.nav-footer {
  background: var(--color-bg-footer) !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  padding: 24px 32px !important;
  border-top: none !important;
}
.nav-footer a { color: rgba(255,255,255,0.35) !important; border: none; }
.nav-footer a:hover { color: rgba(255,255,255,0.7) !important; }
.nav-footer p, .nav-footer strong { color: rgba(255,255,255,0.35); margin: 0; font-weight: 400; }
.nav-footer-right { text-align: right; }
.nav-footer .nav-footer-right a { font-size: 12px; color: rgba(255,255,255,0.25) !important; }

/* Button */
.btn-lab {
  display: inline-block;
  background: var(--color-primary);
  color: #fff !important;
  font-size: 13px; font-weight: 600;
  padding: 9px 20px;
  border-radius: 5px;
  border: none !important;
  margin-top: 14px;
  transition: opacity 0.15s;
}
.btn-lab:hover { opacity: 0.88; color: #fff !important; }

/* HR */
hr { border: none !important; border-top: 0.5px solid var(--color-border) !important; margin: 32px 0 !important; }

/* Responsive */
@media (max-width: 720px) {
  .cards-grid { grid-template-columns: 1fr; }
  .section-wrap { padding: 36px 20px; }
  .hero-section { padding: 44px 20px 40px; }
  .hero-h1 strong { font-weight: 700 !important; }
.hero-h1 { font-size: 30px !important; }
  .pub-card { grid-template-columns: 1fr; }
  .pub-year-big { display: none; }
  .news-row { flex-direction: column; gap: 4px; }
}

/* ── News items (also handles Quarto fenced div syntax) ── */
.news-row {
  display: flex !important;
  gap: 16px !important;
  padding: 12px 0 !important;
  border-bottom: 0.5px solid var(--color-border) !important;
  align-items: baseline !important;
}
.news-row:last-child { border-bottom: none !important; }
.news-row p { margin: 0 !important; }

/* ── Outreach page ── */
.outreach-list { margin-top: 8px; }

.outreach-entry {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 0.5px solid var(--color-border);
  align-items: start;
}
.outreach-entry:first-child { border-top: 0.5px solid var(--color-border); }

.outreach-year {
  font-size: 36px;
  font-weight: 300;
  color: #D0D8E8;
  line-height: 1;
  margin-bottom: 8px;
}

.outreach-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 9px;
  border-radius: 3px;
}
.pill-comic   { background: #EAF3DE; color: #27500A; }
.pill-film    { background: #E6F1FB; color: #0C447C; }
.pill-lecture { background: #F3F4F6; color: #374151; }
.pill-interview { background: #FEF3C7; color: #92400E; }  /* amber */

.outreach-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.outreach-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0 0 12px 0;
}
.outreach-links { display: flex; flex-wrap: wrap; gap: 16px; }
.outreach-links a { font-size: 13px; color: var(--color-accent); border: none; }
.outreach-links a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .outreach-entry { grid-template-columns: 1fr; gap: 12px; }
}