/* Flow-field grid: green dots that turn white where the air force is strongest */
.s-misc .misc-flowfield {
  display: none;
}
.s-misc .misc-flowdot {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 3px;
  /* background-color paints faster than text glyphs. */
  background-color: rgb(120, 223, 113);
  will-change: background-color;
}
/* 8 quantised color buckets between green (#78df71) and white (#ffffff). */
.s-misc .misc-flowdot.b0 { background-color: rgb(120, 223, 113); }
.s-misc .misc-flowdot.b1 { background-color: rgb(139, 228, 133); }
.s-misc .misc-flowdot.b2 { background-color: rgb(159, 232, 153); }
.s-misc .misc-flowdot.b3 { background-color: rgb(178, 237, 173); }
.s-misc .misc-flowdot.b4 { background-color: rgb(197, 241, 193); }
.s-misc .misc-flowdot.b5 { background-color: rgb(217, 245, 214); }
.s-misc .misc-flowdot.b6 { background-color: rgb(236, 250, 234); }
.s-misc .misc-flowdot.b7 { background-color: rgb(255, 255, 255); }

/* Section: Miscellaneous — Flat editorial with orbit */
.s-misc {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  background-color: #fff;
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Top title */
.s-misc .misc-bio-txt {
  position: absolute; top: 0; left: 0; width: 100%;
  text-align: center;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.5px; line-height: 1;
  padding: 14px 24px; color: #000;
  z-index: 15; pointer-events: none;
  opacity: 1;
  transition: opacity 1.94s cubic-bezier(0.4, 0, 0.2, 1);
}
.s-misc .misc-bio-txt.hidden { opacity: 0; transition: opacity 1.08s ease; }

/* Dialogue layout */
.s-misc .misc-dialogue-wrap {
  padding: 80px 40px 80px 40px;
}

/* No nav needed */
.s-misc .misc-dialogue-nav { display: none; }

/* Text container */
.s-misc .misc-dialogue-content {
  width: 100%;
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

/* Multi-column text container — flows into columns when content exceeds viewport */
.s-misc .misc-text-col {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: #222;
  column-width: 338px;     /* match GT — narrower columns */
  column-gap: 40px;
  column-fill: auto;
  column-rule: none;
  height: calc(100vh - 160px);
}

/* Paragraph block — each group of header+items flows inline */
.s-misc .misc-para-block {
  margin-bottom: 20px;
  break-inside: avoid;
}

/* All inline text spans within a paragraph */
.s-misc .misc-span {
  transition: background-color 0.2s ease, color 0.2s ease;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Pretext-style word spans — reflow around moving orbit images */
.s-misc .misc-word {
  display: inline-block;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  will-change: opacity, transform;
}

/* Header spans */
.s-misc .misc-span-header {
  color: #000;
}

/* Item spans — body text, hoverable */
.s-misc .misc-span-item {
  color: #444;
  cursor: pointer;
}
.s-misc .misc-span-item:hover {
  background-color: #000;
  color: #fff;
}

/* Background flock — projects not referenced in dialogue text */
.s-misc .misc-bg-flock {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.s-misc .misc-bg-particle {
  position: absolute;
  left: 0; top: 0;
  width: 42px;
  will-change: transform;
}
.s-misc .misc-bg-particle img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) brightness(0.7) contrast(0.9);
  opacity: 0.35;
  pointer-events: none;
}

/* Orbit layers — persistent, never destroyed */
.s-misc .misc-orbit-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.s-misc .misc-orbit-path-layer {
  z-index: 15;
}

.s-misc .misc-orbit-image-layer {
  z-index: 17;
}
.s-misc .misc-orbit-img {
  position: absolute;
  top: 0; left: 0;
  /* Element hugs the actual image: max bound 180px on the longer side. */
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 180px;
  will-change: transform, opacity;
  transform-origin: center center;
  filter: grayscale(1);
  /* opacity is multiplied by JS-controlled per-item opacity at the layer level */
}
.s-misc .misc-orbit-image-layer { opacity: 0.8; }

.s-misc .misc-orbit-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}

.s-misc .misc-orbit-item {
  position: absolute;
  width: 80px; height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity, transform, left, top;
}
.s-misc .misc-orbit-item img {
  width: 100%; height: auto;
  max-width: 180px; max-height: 180px;
  object-fit: contain;
  display: block;
}

/* Responsive: column-width handles count automatically; only override at narrow widths */
@media (max-width: 767px) {
  /* Match Q-section caption (.column3) sizing on mobile */
  .s-misc .misc-text-col {
    column-width: auto;
    column-count: 1;
    height: auto;
    font-size: 12px;
    line-height: 17px;
  }
  .s-misc .misc-dialogue-wrap {
    padding: 60px 20px;
  }

  /* Mobile freeze fix: hide dialogue/orbit/bio so only the "work-in-progress"
     overlay renders. Also drop the expensive mix-blend-mode + invert filter,
     which alone can stall iOS Safari at 200px font size. */
  .s-misc.mobile-static .misc-dialogue-wrap,
  .s-misc.mobile-static .misc-bio-txt,
  .s-misc.mobile-static .misc-orbit-layer,
  .s-misc.mobile-static .misc-bg-flock,
  .s-misc.mobile-static .misc-flowfield {
    display: none !important;
  }
  .s-misc.mobile-static {
    background-color: #fff;
    color: #000;
  }
  .s-misc .misc-under-construction {
    /* Lighter compositing on mobile — no blend mode, no inversion. */
    mix-blend-mode: normal;
    filter: none;
    color: #000;
    /* Smaller font + allow natural wrap at the spaces between "Work in Progress". */
    font-size: clamp(48px, 16vw, 140px);
    white-space: normal;
    max-width: 100vw;
  }
}

/* Big "Under Construction" overlay — centered, 200px */
.s-misc .misc-under-construction {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 200px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #000;
  text-align: center;
  z-index: 1000;
  pointer-events: none;
  mix-blend-mode: difference;
  filter: invert(1);
}
/* PC: keep on a single line even if it overflows the viewport. Scoped to ≥768px
   so the mobile rule (white-space: normal) above stays in effect on phones. */
@media (min-width: 768px) {
  .s-misc .misc-under-construction { white-space: nowrap; }
}