/* as-such — styles. Colors, type and panel layout live here. */
:root { --read: clamp(0.85rem, 1.1vw, 1.1rem); }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100vh; height: 100dvh; height: var(--app-h, 100dvh);   /* --app-h: the height the browser is actually showing */
  overflow: hidden;
  font-family: 'Times New Roman', Times, serif;
  background: #000;
  color: #fff;
}

#root {
  position: relative;
  width: 100%; height: 100%;
}

/* ── Panel ──────────────────────────────────────────────────── */
.panel {
  position: absolute;
  overflow: hidden;
}

.panel-inner {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.1rem;
  overflow-y: auto;
  scrollbar-width: none;
  transition: background 0.1s;
}
.panel-inner::-webkit-scrollbar { display: none; }

.panel.splittable { cursor: pointer; }
.panel.splittable .panel-inner:hover { background: rgba(255,255,255,0.06); }
.panel.slides .panel-inner:hover { background: transparent; }
.panel.inverted .panel-inner, .panel.inverted .panel-inner:hover { background: #fff; }
.panel.inverted h1, .panel.inverted p { color: #000; }

/* ── Typography ─────────────────────────────────────────────── */
.panel-inner h1 {
  font-size: clamp(0.6rem, 1.5vw, 1.2rem);
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: pre-line;
}
.panel-inner p {
  font-size: clamp(0.5rem, 0.8vw, 0.72rem);
  margin-top: 0.5em;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
}

/* ── Home page: centered names ─────────────────────────────── */
.panel.center .panel-inner { justify-content: center; align-items: center; text-align: center; }
.panel.center .panel-inner h1 { font-size: clamp(0.8rem, 1.15vw, 1.15rem); letter-spacing: 0; }

/* ── Prose panels (about + news) ──────────────────────────── */
.panel.prose .panel-inner { justify-content: flex-start; padding: 1.4rem 1.6rem; }
.panel.prose .panel-inner p, .panel.prose .panel-inner div { color: #fff; }
.panel.prose a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.panel.prose a:hover { opacity: 0.6; }
.panel.prose .about { font-size: clamp(0.9rem, 1.5vw, 1.35rem); line-height: 1.35; }
.panel.prose .news-item { font-size: clamp(0.65rem, 0.9vw, 0.85rem); line-height: 1.5; margin-bottom: 1.1em; }
.panel.ctrl .panel-inner { padding: 0; }
.panel.ctrl h1 { font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: normal; white-space: nowrap; }
@media (max-width: 700px) { .panel.ctrl h1 { font-size: 0.9rem; } }
.index-link { cursor: pointer; }
.index-link:hover { opacity: 0.6; }
.panel.prose .index-head { font-size: clamp(0.65rem, 0.9vw, 0.85rem); margin: 0 0 1.1em; }
.panel.prose .news-date { color: rgba(255,255,255,0.55); }

/* ── Quote panels (bitmap + live caption) ───────────────────── */
.panel.prose.quote .panel-inner { justify-content: center; }
.panel.prose .quote-img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: none; }
.panel.prose .quote-text { font-size: var(--read); line-height: 1.4; text-align: justify; hyphens: auto; margin: 0; }
.panel.prose .quote-text.big { font-size: clamp(1rem, 1.7vw, 1.6rem); line-height: 1.3; text-align: left; hyphens: none; }
.panel.prose .quote-text.indent { text-indent: 1.5em; margin-bottom: 0.3em; }
.panel.prose .hl { background: rgba(255,255,255,0.28); }
.panel.prose .quote-text.note { font-size: clamp(0.55rem, 0.75vw, 0.75rem); margin-top: 0.8em; padding-top: 0.5em; border-top: 1px solid rgba(255,255,255,0.4); font-size: calc(var(--read) * 0.82); }
.panel.prose.long .panel-inner { justify-content: flex-start; overflow-y: auto; padding: 1rem 1.2rem; scrollbar-width: thin; }
.pir-overlay { position: absolute; top: 0; height: 100%; z-index: 50; background: #fff; display: flex; align-items: center; justify-content: center; }
.pir-overlay img { width: 100%; height: 100%; object-fit: cover; }
.panel.prose .cite-img { cursor: pointer; filter: none; display: block; width: min(60%, 260px); height: auto; margin: 0 0 1em; }
.panel.prose .cite p { font-size: var(--read); line-height: 1.5; margin: 0 0 1em; }
.panel.prose .quote-cap { font-size: calc(var(--read) * 0.85); margin-top: 0.9em; text-align: right; color: rgba(255,255,255,0.7); }

/* ── Project info box + gallery slides ──────────────────────── */
.panel.info .panel-inner { justify-content: center; align-items: center; text-align: center; padding: 0.5rem 1rem; }
.panel.info p { color: #fff; font-size: clamp(0.62rem, 0.8vw, 0.8rem); line-height: 1.35; margin: 0; }
/* mobile: when an info box gets small, keep only title + collaborator */
.panel.info { container-type: size; }
@media (max-width: 700px) {
  @container (max-height: 95px) { .info-extra { display: none; } }
  @container (max-width: 210px) { .info-extra { display: none; } }
}
.panel.info a { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.panel.info a:hover { opacity: 0.6; }
.panel.info p.info-title { font-size: clamp(0.7rem, 0.95vw, 0.95rem); margin-bottom: 0.2em; }

.panel.slides { cursor: pointer; }
.panel.slides .panel-inner { justify-content: flex-start; align-items: stretch; padding: 1.5rem; }
.panel.slides { cursor: none; }
.panel.slides a { cursor: pointer; }
.panel.slides .slide-img { cursor: none; display: block; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; filter: none; }
.panel.slides .slide-text { margin: auto; max-width: 62ch; text-align: left; }
.panel.slides .slide-text p { color: #fff; font-size: var(--read); line-height: 1.45; margin: 0 0 1em; }
.panel.slides .slide-text p.slide-break { text-align: center; margin: -0.2em 0 1em; letter-spacing: 0.2em; }
.panel.slides .slide-text p.slide-credit { text-align: center; margin-bottom: 2em; }
.panel.slides .slide-text .slide-title { color: #fff; font: inherit; font-weight: normal; font-size: calc(var(--read) * 1.7); line-height: 1.2; text-align: center; margin: 3em 0 2em; padding: 0 1rem; }
.panel.slides .slide-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.panel.slides .slide-count { position: absolute; left: 0.6rem; bottom: 0.5rem; z-index: 2; padding: 0.2rem 0.45rem; background: #000; pointer-events: none; font-size: 0.62rem; letter-spacing: 0.07em;
                             color: rgba(255,255,255,0.55); }


.panel-inner img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: invert(1);
}

/* ── Dividers ───────────────────────────────────────────────── */
.divider { position: absolute; z-index: 100; }
.divider-v { width: 9px; transform: translateX(-4px); cursor: col-resize; }
.divider-v::after {
  content: ''; position: absolute;
  left: 4px; top: 0; bottom: 0; width: 1px; background: #fff;
}
.divider-h { height: 9px; transform: translateY(-4px); cursor: row-resize; }
.divider-h::after {
  content: ''; position: absolute;
  top: 4px; left: 0; right: 0; height: 1px; background: #fff;
}
.divider { touch-action: none; }
/* touch screens: a wider invisible grab area; the visible line stays 1px */
@media (pointer: coarse) {
  .divider-v { width: 32px; transform: translateX(-15px); }
  .divider-v::after { left: 15px; }
  .divider-h { height: 32px; transform: translateY(-15px); }
  .divider-h::after { top: 15px; }
}

/* ── Appear animation ───────────────────────────────────────── */
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.panel.new, .divider.new { animation: appear 0.22s ease forwards; }