@font-face {
  font-family: 'ABC Diatype';
  src: url('ABCDiatype-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --green-light: #d8e6c9;
  --green-dark:  #1d3823;
  --page-bg:     #f4f2ec;   /* warm off-white */
  --col-max: 920px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--page-bg); }
body {
  background: var(--page-bg);
  color: var(--green-dark);
  font-family: 'ABC Diatype', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============ HIDDEN VIDEO ELEMENT ============
   Kept in-viewport (browsers can pause off-screen video) but visually
   invisible — used only as a frame source for the canvas. */
.cover-video {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 70px;
  opacity: 0;
  pointer-events: none;
  z-index: -10;
}

/* ============ FLAG STAGE (fixed, full screen, fully transparent) ============ */
.flag-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

#flag-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============ PUBLICATION (scroll spacer only) ============ */
.publication {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1400vh;
  pointer-events: none;
  background: transparent;
}

/* ============ SELECTABLE TEXT OVERLAY ============ */
.text-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  padding-top: 8vh;
  padding-bottom: 8vh;
  cursor: text;
}

.text-overlay-inner {
  position: relative;
  width: min(var(--col-max), 56vw);
  font-family: 'ABC Diatype', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.45vw, 26px);
  line-height: 1.55;
  letter-spacing: -0.03em;
  color: transparent;
  user-select: text;
  -webkit-user-select: text;
  will-change: transform;
  flex-shrink: 0;
  height: max-content;
}

@media (max-width: 900px) {
  .text-overlay { padding-top: 4vh; padding-bottom: 4vh; }
  .text-overlay-inner { width: calc(100vw - 1rem); font-size: clamp(16px, 4.2vw, 22px); }
  .scroll-back-hint, .space-hint { display: none !important; }
}

.text-overlay-inner p {
  margin: 0 0 0.7em 0;
  color: transparent;
}
.text-overlay-inner p.toc { margin: 0; }
.text-overlay-inner p.indent { text-indent: 2.2em; }
.text-overlay-inner .sp { height: 2.4em; }
.text-overlay-inner > *:first-child { margin-top: 0; }

/* Spacer that reserves the room the video occupies at the top of the canvas */
.text-overlay-inner .video-spacer {
  width: 100%;
  margin-bottom: 1.6em;
}

/* Spacer per figure — the image itself is drawn onto the flag texture.
   Height is set inline from JS once the image's natural aspect is known. */
.text-overlay-inner .image-spacer {
  width: 100%;
  height: 0;
  margin-top: 0.55em;
}

/* Figure caption — selectable, sits on the cloth below the image */
.text-overlay-inner p.caption {
  font-size: 0.78em;
  line-height: 1.45;
  margin: 0 0 1.8em 0;
}

/* TOC anchor links — invisible but clickable; selection paints them dark green */
.text-overlay-inner a {
  color: transparent;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  padding: 0.05em 0;
}

/* Whole TOC line is the click target — main.js delegates the click on
   p.toc to the link inside, so the hit area is the full line box rather
   than the narrow glyph run. No inline padding tricks, which used to
   make neighbouring lines' hit areas overlap. */
.text-overlay-inner p.toc { cursor: pointer; }

/* Selection is handled by the canvas (rectangles painted on the cloth
   texture so they wave with the geometry). Hide the browser's default
   selection paint here so it doesn't double-up over the flag. */
::selection {
  background: transparent;
  color: transparent;
}
::-moz-selection {
  background: transparent;
  color: transparent;
}

/* ============ HINTS ============ */
.hint {
  position: fixed;
  z-index: 10;
  font-family: 'ABC Diatype', system-ui, sans-serif;
  font-weight: bold;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--green-dark);
  transition: opacity 0.5s ease, transform 0.2s ease;
  bottom: 1.4rem;
  opacity: 0;
  pointer-events: none;
}
.hint.visible {
  opacity: 0.85;
  pointer-events: auto;
}
.hint:hover { opacity: 1; transform: translateY(-2px); }

.scroll-hint {
  left: 50%;
  transform: translateX(-50%);
}
.scroll-hint:hover { transform: translateX(-50%) translateY(-2px); }
.scroll-hint.fade { opacity: 0; pointer-events: none; }

.scroll-back-hint { left: 1.6rem; }
.space-hint       { right: 1.6rem; }

/* ============ A11Y FALLBACK ============ */
.a11y-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============ CREDITS ============ */
.credits {
  position: relative;
  z-index: 5;
  background: var(--page-bg);
  color: var(--green-dark);
  padding: 2.5rem 4vw;
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
}
.credits p { margin: 0; }
.credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.credits a:hover { opacity: 0.7; }