:root{
  --text:#111;
  --muted:#555;
  --border:#e6e6e6;

  --bg:#ffffff;
  --panel1:#f1f1f1;     /* TL;DR */
  --panel2:#f7f7f7;     /* Abstract */

  --max: 980px;         /* normal content width */
  --wide: 1600px;       /* wide-section max width */
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
  overflow-x: hidden; /* avoid scrollbars from 100vw rounding */
}

a{ color:#0b57d0; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ======================
   Layout containers
   ====================== */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 34px 18px 70px;
}

/* Full-bleed wrapper so blocks can extend to viewport width
.fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 18px;
} */

/* Wider-than-container inner wrapper (CRAFT-style wide content) */
.wide-section{
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 18px;
}

.wide-section, .container { overflow-x: hidden; }
video, img { max-width: 100%; }

/* ======================
   Header typography
   ====================== */
.page-title{
  text-align:center;
  font-size: 64px;
  line-height: 1.05;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
}

.subtitle{
  text-align:center;
  color: var(--muted);
  font-size: 28px; /* (was 40) closer to typical project pages */
  margin: 0 0 18px;
}

.authors{
  text-align:center;
  color: var(--muted);
  font-size: 20px;
  margin: 0 0 10px;
}

.affiliations{
  text-align:center;
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 18px;
}

.note{
  max-width: 820px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ======================
   Badges
   ====================== */
.badges{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 10px;
}

.badge{
  display:inline-block;
  border:1px solid var(--border);
  background:#fafafa;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
}

/* ======================
   Sections
   ====================== */
.section{
  margin-top: 26px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.section h2{
  margin: 0 0 12px;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.section h3{
  margin: 14px 0 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.small{
  color:var(--muted);
  font-size: 14px;
}

/* Gray panels for TL;DR + Abstract */
.panel{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 18px;
}

.panel h2{ margin-top: 0; }
.panel.tldr{ background: var(--panel1); }
.panel.abstract{ background: var(--panel2); }

/* Make TL;DR text a bit larger */
.panel.tldr p{
  font-size: 18px;
  line-height: 1.7;
}

/* Bigger typography for Method section */
.section.method h2{ font-size: 27px; }

/* ======================
   Media blocks
   ====================== */
.video, .figure{
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  background:#000;
}

.figure{ background:#fff; }

.video video, .video iframe, .figure img{
  width:100%;
  height:auto;
  display:block;
}

/* Slightly larger “result” videos */
.video-md video{
  width: 100%;
  height: auto;
  /* Optional (uncomment if you want consistent player height):
  aspect-ratio: 16 / 9;
  */
}

/* Smaller centered figure */
.figure-small{
  max-width: 720px;
  margin: 0 auto;
}
.figure-small img{
  width: 100%;
  height: auto;
}

/* ======================
   Grids (cards / video cells)
   ====================== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/* Two big videos side-by-side */
.grid.two-col{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

@media (max-width: 720px){
  .grid.two-col{ grid-template-columns: 1fr; }
}

/* Benchmark: force 3 columns in wide section */
.grid.grid-3wide{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

/* Responsive collapse: 3 -> 2 -> 1 */
@media (max-width: 1100px){
  .grid.grid-3wide{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .grid.grid-3wide{ grid-template-columns: 1fr; }
}

/* Video cell (no card border) */
.vidcell h3{
  margin: 0 0 6px;
}

/* Caption spans both columns in the 2-col grid */
.span-2{
  grid-column: 1 / -1;
}

/* Optional card style (if you ever use .card again) */
.card{
  border:1px solid var(--border);
  border-radius:16px;
  padding: 14px;
  background:#fff;
}

.card h3{
  margin:0 0 8px;
  font-size: 20px;
}

/* ======================
   Lists & code
   ====================== */
.bullets{
  margin: 8px 0 16px;
  padding-left: 20px;
}
.bullets li{ margin: 6px 0; }

ul{ padding-left: 20px; }

pre{
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  overflow:auto;
  background:#fafafa;
}

/* ======================
   Footer
   ====================== */
.footer{
  margin-top: 38px;
  color: var(--muted);
  font-size: 13px;
  text-align:center;
}