/* base.css — reset, design tokens, page layout */

:root {
  /* palette */
  --bg: #849bcc;            /* soft blue background */
  --ink: #1a2633;           /* primary text */
  --ink-soft: #334155;      /* secondary text */

  /* type */
  --font: "Georgia", "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  
  /* stage geometry — everything scales with screen height (vh) */
  --camera-h: 30vh;                                   /* 1.webp + 2.webp: 30% of screen height */
  --photo-h: 35vh;                                   /* 3.webp height */
  --camera-w: calc(var(--camera-h) * 1200 / 991);    /* camera width from its 1200x991 canvas */
  --photo-w: calc(var(--photo-h) * 970 / 1184);      /* photo width from its 970x1184 canvas */
  --photo-gap: -3.5vh;                               /* gap between camera bottom and photo top (needs a unit: a bare 0 makes the height calc type-invalid) */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1.5rem, 5vh, 3rem) 1rem;
}