/* Figma "Frame 8": dithered sky under a glass panel. The panel ("Frame 11")
   is taller than the block and bleeds off the bottom, so it scrolls here. */
.manifesto-panel {
  position: relative;
  min-width: 0;
  min-height: 640px;
  overflow: hidden;
  perspective: 1400px;
}

/* Glass, frosted backdrop and thumb tilt together as one plate;
   src/ui/plateTilt.js drives --tilt-x and --tilt-y from the pointer. */
.plate {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}

.manifesto-panel__bg {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
}

/* Figma Glass: refraction 20, specular -45deg at 80%, bevel 1, aberration 0.5.
   The rim lives here; src/ui/glass.js adds edge refraction in Chromium. */
.glass {
  position: absolute;
  inset: 32px 18px 0 32px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px 16px 64px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(rgb(255 255 255 / 0), #999999) local;
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 0.8),
    inset -1px 0 0 rgb(255 255 255 / 0.25);
  color: var(--white);
}

.glass::-webkit-scrollbar { display: none; }

/* Frosted copy of the sky, drawn by src/effects/GlassBackdrop.js. It shares
   the panel's box so the blur stops exactly at the glass edge. */
.glass-backdrop {
  position: absolute;
  inset: 32px 18px 0 32px;
  width: calc(100% - 50px);
  height: calc(100% - 32px);
  border-radius: 15px 15px 0 0;
}

.glass__mark { display: block; }

.glass__label {
  position: absolute;
  top: 25px;
  right: 31px;
  font: 16px / var(--lh-mono) var(--mono);
  opacity: 0.3;
}

.manifesto {
  max-width: 545px;
  margin-top: 9.7px;
  font: 16px / var(--lh-mono) var(--mono);
}

.manifesto h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: var(--lh-mono);
}

.manifesto p + p { margin-top: calc(1em * var(--lh-mono)); }
.manifesto strong { font-weight: 700; }
.manifesto .semi { font-weight: 600; }
.manifesto a { text-underline-offset: 2px; }
.manifesto__indent { padding-left: 13ch; }

/* "Rectangle 1": the glass scroll thumb. */
.glass-thumb {
  position: absolute;
  top: 53px;
  right: 24px;
  width: 15px;
  height: 216px;
  border-radius: 62px;
  background: rgb(255 255 255 / 0.06);
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 0.8),
    inset -1px -1px 0 rgb(255 255 255 / 0.2);
  touch-action: none;
  cursor: grab;
}

.glass-thumb:active { cursor: grabbing; }

@media (max-width: 900px) {
  .manifesto-panel { height: min(88vh, 900px); }
  .glass,
  .glass-backdrop { inset: 24px 16px 0; }
  .glass-backdrop { width: calc(100% - 32px); height: calc(100% - 24px); }
  .glass-thumb { top: 45px; right: 22px; }
}

@media (max-width: 600px) {
  .glass__label { display: none; }
  .manifesto__indent { padding-left: 0; }
}