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

:root{
  /* responsive spacing: smaller on short screens */
  --pad: clamp(6px, 1.2vh, 10px);
  --gap: clamp(4px, 1.1vh, 10px);

  /* if you still need extra cushion above Safari UI, try 16px or 24px */
  --ios-toolbar: 0px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10pt;
  background: #fff;
  color: #000;
}

/* HARD lock the viewport (no scroll, no rubber-band) */
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;

  /* fallback */
  height: 100vh;
}

/* iOS/modern: stable on load (prevents the “jump”) */
@supports (height: 100svh) {
  body { height: 100svh; }
}

/* if svh not supported, use dvh */
@supports not (height: 100svh) {
  @supports (height: 100dvh) {
    body { height: 100dvh; }
  }
}

/* older iOS Safari */
@supports (-webkit-touch-callout: none) {
  body { height: -webkit-fill-available; }
}

/* 3-row layout */
body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gap);

  /* safe-areas + padding (TOP/LEFT/RIGHT only; bottom handled by footer) */
  padding-top:    calc(var(--pad) + env(safe-area-inset-top));
  padding-left:   calc(var(--pad) + env(safe-area-inset-left));
  padding-right:  calc(var(--pad) + env(safe-area-inset-right));
  padding-bottom: var(--pad);
}

/* Header */
#topText { line-height: 1.35; }
#email, #intro { display: block; width: 100%; }

#intro {
  margin-top: 3px;   /* smaller */
  max-width: 680px;
}

/* Media area centered */
#mediaArea {
  width: 100%;
  height: 100%;
  min-height: 0;     /* CRITICAL: allows middle row to shrink so footer stays visible */
  display: grid;
  place-items: center;
  overflow: hidden;

  /* prevents iOS gestures from turning into scroll */
  touch-action: manipulation;
}

/* Hide by default */
#img, #video, #svg-container {
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Consistent media box */
#img, #video, #svg-container {
  width: 100%;
  height: 100%;
}

/* Image + video */
#img, #video { object-fit: contain; }

/* SVG sequence container */
#svg-container {
  position: relative;
  overflow: hidden;
}

/* Preloaded frames stacked */
#svg-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.12s linear;
}

/* Footer overlay (desc left, count right) */
#overlay {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;

  /* Keep text above iOS bottom UI */
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--ios-toolbar));
}

/* Description */
#desc {
  max-width: 85%;
  color: #777;
}
#desc .title { color: #000; }

/* Counter */
#count { font-variant-numeric: tabular-nums; }
#count .current { color: #000; }
#count .slash { color: #777; }

/* Extra tightening for short screens */
@media (max-height: 740px) {
  :root { --gap: 4px; --pad: 6px; }
  html, body { font-size: 9.5pt; }
  #intro { margin-top: 2px; }
}