/* =========================================================
   SPACING, GEOMETRY, SURFACE & MOTION — Coastline
   The guide is a 9:16 mobile-first page. Corners are square,
   photos are full-bleed (not cards), elevation is reserved for
   the page object floating on the dark backdrop.
   ========================================================= */
:root {
  /* ---- PAGE GEOMETRY (9:16 field-guide page) ----------- */
  --page-aspect: 9 / 16; /* @kind other */
  --page-w: min(480px, 92vw);     /* @kind spacing */ /* on-screen page width cap */
  --page-pad: clamp(20px, 4.8vw, 32px); /* @kind spacing */ /* page side padding */
  --page-export: 1080 / 1920;     /* @kind other */ /* print/PDF export resolution note */

  /* ---- SPACING SCALE (em-relative, tracks page size) --- */
  --sp-1: 0.4em;
  --sp-2: 0.6em;
  --sp-3: 0.9em;
  --sp-4: 1.2em;
  --sp-5: 1.6em;
  --sp-6: 2.2em;
  --sp-7: 3.2em;
  --sp-8: 4.4em;   /* top padding of interior text pages */

  /* Fixed UI spacing (cards, kit chrome) */
  --gap-page: 24px;     /* gap between pages in the scroll */
  --pad-app:  32px;

  /* ---- RADII — square by intent ------------------------ */
  --radius-none: 0;     /* photos, pages, wells, chips: all square */
  --radius-pill: 999px; /* the brand dot + QR finder rings only */
  --radius:      var(--radius-none);

  /* ---- BORDERS ----------------------------------------- */
  --border-w:        1px;
  --border-accent-w: 2px;   /* ember/sea left-rule on wells */

  /* ---- ELEVATION --------------------------------------- */
  /* The page floats on the dark backdrop. Components on the
     page get NO shadow — flat, print-like. */
  --shadow-page: 0 24px 60px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04);
  --shadow-none: none;

  /* ---- GRAIN — every photo carries a fine multiply grain */
  --grain-dot:  rgba(26,28,32,0.06); /* @kind color */
  --grain-size: 3px; /* @kind spacing */

  /* ---- VEILS — gradient scrims over full-bleed photos --- */
  --veil-bottom: linear-gradient(180deg,
    rgba(17,15,12,0.18) 0%,
    rgba(17,15,12,0.0) 28%,
    rgba(17,15,12,0.0) 50%,
    rgba(17,15,12,0.85) 100%) /* @kind other */;
  --veil-flagship: linear-gradient(180deg,
    rgba(17,15,12,0.55) 0%,
    rgba(17,15,12,0.0) 28%,
    rgba(17,15,12,0.0) 55%,
    rgba(17,15,12,0.85) 100%) /* @kind other */;
  --veil-icon: linear-gradient(180deg,
    rgba(17,15,12,0.62) 0%,
    rgba(17,15,12,0.18) 22%,
    rgba(17,15,12,0.0) 42%,
    rgba(17,15,12,0.0) 58%,
    rgba(17,15,12,0.18) 78%,
    rgba(17,15,12,0.74) 100%) /* @kind other */;

  /* ---- MOTION — quiet. Calm fades, no bounce. ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast:  160ms; /* @kind other */
  --dur:       240ms; /* @kind other */
  --dur-slow:  420ms; /* @kind other */
}