/* DAIM homepage, site-wide CSS tab. One font stack splits Montserrat and
   NanumSquare per character; brown-background toggles stay hidden. docs/super.md,
   "Fonts" and "The Navbar Over the Hero"; classes: docs.super.so/super-css-classes */

:root {
  --primary-font: Montserrat, NanumSquare, Inter, -apple-system, sans-serif;
  --secondary-font: var(--primary-font);

  /* the shared palette and identity metrics (docs/super.md, "Design
     Tokens"); a page overrides locally where its design departs */
  --ink: #212121;
  --sub: #3c454d;
  --muted: #7a858e;
  --rule: #e3e8ec;
  --accent: #00b8ff;
  --accent-deep: #0479b8;
  --kaist-blue: #004191;
  --icon-w: 34px;
  --photo-radius: 12px;
}

/* The injected footer band (and the full-bleed heroes) break out with 100vw,
   which includes the vertical scrollbar and overhangs half of it per side.
   Clipping the root eats that sideways scroll on every page; measured on
   /lab-news, a body-level overflow-x does not reach the viewport here */
html {
  overflow-x: clip;
}

.super-navbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 400;
  opacity: 1;
}

/* The nav icon sits centered above its label; the slot is always reserved,
   so its appearance on hover shifts nothing */
.super-navbar__item svg {
  margin: 0;
}

.super-navbar__item.active {
  font-weight: 600;
}

.super-navbar__item:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.super-navbar__item:not(.active):not(:hover) svg {
  visibility: hidden;
}

.notion-toggle.bg-brown {
  display: none !important;
}

/* A gallery inside a brown callout is the Gallery Carousel snippet
   (code/global.html); the collection title is chrome there, not content.
   people.css hides it page-wide for its own reasons; this covers the About
   deck carousels and any future one */
.notion-callout.bg-brown-light .notion-collection__header-wrapper {
  display: none;
}

/* The stock lightbox sheet only caps the image, so a low-res slide showed
   at its intrinsic width, smaller than the carousel it came from. Fill the
   viewport and letterbox inside; the deeper selector outranks the snippet's. */
#lightbox-overlay #lightbox-image {
  width: 94vw;
  height: 92vh;
  max-width: none;
  max-height: none;
  object-fit: contain;
}