/* humanoid-packoff-cell 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 { height: auto; 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; } }
.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.figure-pair figure.clip img { width: 100%; border-radius: 10px; display: block; border: 1px solid var(--line); }
.figure-caption { color: var(--muted); font-size: .92rem; margin: .5rem 0 1.5rem; text-align: center; }
@media (max-width: 768px) { .figure-pair { grid-template-columns: 1fr; } }
.figure-img.narrow { max-width: 620px; display: block; margin: 0 auto; }
.nc-callout { border-left-color: #c2410c; background: #fff7ed; margin-top: 1.5rem; }
.nc-callout p { margin: 0; }