:root {
  /* ── Surfaces ────────────────────────────────────────── */
  --bg:           #251108;        /* desk / body background          */
  --paper:        #f4efe6;        /* light text on dark bg           */
  --paper-aged:   #ddd6cc;        /* photo print / card surface      */
  --paper-dark:   #e4ddd0;        /* image-wrap loading placeholder  */

  /* ── Ink ─────────────────────────────────────────────── */
  --ink:          #2c2416;        /* dark text on paper              */
  --ink-muted:    #6b5a4a;        /* secondary dark text on paper    */
  --ink-paper:    #3a1c06;        /* body ink on aged-paper surfaces */
  --ink-paper-rgb: 58, 28, 6;    /* rgb components for opacity use  */
  --sepia-rgb:    100, 55, 10;    /* lighter sepia — card borders/labels */

  /* ── Accent ──────────────────────────────────────────── */
  --accent:       #c4a882;        /* warm amber                      */
  --accent-rgb:   196, 168, 130;  /* rgb components for opacity use  */

  /* Accent opacity steps — all derived from --accent */
  --accent-faint:  rgba(196, 168, 130, 0.12); /* barely visible borders  */
  --accent-subtle: rgba(196, 168, 130, 0.18); /* soft dividers           */
  --accent-border: rgba(196, 168, 130, 0.3);  /* standard borders        */
  --accent-dim:    rgba(196, 168, 130, 0.5);  /* secondary UI            */
  --accent-ui:     rgba(196, 168, 130, 0.65); /* active UI elements      */
  --accent-body:   rgba(196, 168, 130, 0.9);  /* readable accent text    */

  /* ── On-dark (lightbox / overlay context) ────────────── */
  --paper-rgb:    244, 239, 230;  /* rgb components for opacity use  */
  --on-dark:      #e8d5b8;        /* warm primary text on dark bg    */
  --paper-faint:  rgba(244, 239, 230, 0.5);   /* dim, close button       */
  --paper-dim:    rgba(244, 239, 230, 0.55);  /* inactive buttons        */
  --paper-body:   rgba(244, 239, 230, 0.9);   /* descriptions            */
  --paper-strong: rgba(244, 239, 230, 0.92);  /* hover emphasis          */

  /* ── Special ─────────────────────────────────────────── */
  --stamp:        #e8a020;        /* amber date-stamp colour         */
  --stamp-rgb:    232, 160, 32;   /* rgb components for opacity use  */
  --overlay:      rgba(10, 6, 3, 0.96); /* lightbox / modal backdrop */

  /* ── Typography — fonts ──────────────────────────────── */
  --font-serif:     'Schoolbell', cursive;
  --font-mono:      'VT323', monospace;
  --font-mono-read: 'IBM Plex Mono', monospace;
  --font-ibm-sans:  'IBM Plex Sans', sans-serif;
  --font-sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Typography — size scale ─────────────────────────── */
  --text-2xs:  0.6rem;    /* tiny: exif table, action buttons        */
  --text-xs:   0.68rem;   /* small: UI buttons, tabs, labels         */
  --text-sm:   0.72rem;   /* standard small: meta, counters, links   */
  --text-base: 0.85rem;   /* body: descriptions, card back text      */
  --text-sub:  0.92rem;   /* sub-heading: subtitle, gallery empty    */
  --text-md:   1rem;      /* default: titles, footers                */
  --text-lg:   1.35rem;   /* large: site title                       */
  --text-xl:   1.5rem;    /* x-large: close button, footer link      */
  --text-2xl:  1.9rem;    /* 2x-large: nav arrows                    */

  /* ── Motion ─────────────────────────────────────────── */
  --dur-fast:  0.15s;
  --dur-med:   0.22s;
  --dur-slow:  0.35s;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  color: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}