/* hospital-sim project page. Layout in the style of academic project pages (Nerfies); written from scratch. */
:root {
  --ink: #1f2733;
  --muted: #5b6472;
  --line: #e6e9ee;
  --accent: #2f7fd8;
  --soft: #f6f8fb;
}
body { font-family: "Noto Sans", sans-serif; color: var(--ink); background: #fff; }
.title, .subtitle, h2, h3 { font-family: "Google Sans", "Noto Sans", sans-serif; }
.publication-title { font-size: 2.6rem; line-height: 1.2; }
.publication-subtitle { color: var(--muted); font-size: 1.35rem; margin-top: .4rem; }
.publication-authors { font-size: 1.15rem; margin-top: 1rem; }
.publication-authors a { color: var(--accent); }
.link-buttons { margin-top: 1.25rem; }
.link-buttons .button { margin: .25rem; }
.status-badge { display: inline-block; margin-top: 1rem; padding: .3rem .8rem; border-radius: 999px;
  background: #eefaf2; color: #23744a; font-size: .95rem; }

.section-nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.section-nav .container { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; padding: .7rem 1rem; }
.section-nav a { color: var(--muted); font-weight: 500; }
.section-nav a:hover { color: var(--accent); }

/* not ".hero-video": Bulma uses that name for absolutely positioned background videos */
.feature-video video { width: 100%; border-radius: 12px; display: block; }
video { aspect-ratio: 16 / 9; object-fit: contain; }
.section { padding: 3.5rem 1.5rem; }
.section.alt { background: var(--soft); }
h2.title.is-3 { margin-bottom: 1.25rem; }
.content p { line-height: 1.7; }
.lead { font-size: 1.1rem; }

figure.clip { margin: 0 0 2rem 0; }
figure.clip video { width: 100%; border-radius: 10px; display: block; background: #0a0c10; }
figure.clip figcaption { margin-top: .7rem; font-size: .97rem; line-height: 1.6; color: var(--ink); }
figure.clip figcaption .clip-title { font-weight: 700; }
figure.clip figcaption .clip-sub { color: var(--muted); }
figure.clip details { margin-top: .4rem; }
figure.clip summary { cursor: pointer; color: var(--accent); font-weight: 500; }
figure.clip details ul { margin: .4rem 0 0 1.1rem; list-style: disc; color: var(--muted); }
figure.clip details li { margin: .15rem 0; }
figure.clip .credits { display: block; margin-top: .35rem; font-size: .85rem; color: var(--muted); }
figure.clip .repo-link { font-size: .88rem; margin-left: .35rem; }

.figure-img { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.callout { border-left: 4px solid var(--accent); background: #fff; padding: 1rem 1.25rem; border-radius: 6px; }
.status-table td, .status-table th { vertical-align: top; }
.tag.done { background: #e8f6ee; color: #23744a; }
.tag.part { background: #fff4e0; color: #8a5a00; }
.tag.todo { background: #eef1f5; color: #4a5462; }
pre.bibtex { background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: .88rem; white-space: pre-wrap; }
.footer { background: #fff; border-top: 1px solid var(--line); padding: 2rem 1.5rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 768px) { .publication-title { font-size: 1.9rem; } .section { padding: 2.5rem 1rem; } }

/* version 2 */
.section.v2 { background: linear-gradient(180deg, #f2f8f4 0%, #ffffff 100%); border-top: 1px solid var(--line); }
.version-pill { display: inline-block; background: #23744a; color: #fff; font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; padding: .2rem .7rem; border-radius: 999px; margin-bottom: .6rem; }
.v2-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.v2-card { margin: 0; }
.v2-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; }
.v2-card figcaption { font-size: .88rem; line-height: 1.5; margin-top: .4rem; color: var(--muted); }
.v2-card figcaption strong { color: var(--ink); }
.version-links { font-size: .95rem; color: var(--muted); }
.v1-banner { background: #fff4e0; color: #5c3d00; text-align: center; padding: .6rem 1rem; font-size: .95rem; }
@media (max-width: 900px) { .v2-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-gallery { grid-template-columns: 1fr; } }