/* Personal Geography — shared core (palette + reveal base).
   Loaded on every page that uses a PG widget. Colours/fonts are ALSO exposed as
   Elementor Global (Kit) values; these :root defaults make widgets look right
   before any editing. All widget CSS uses the --pg-* names below (scoped to each
   widget wrapper) so generic class names never collide between pages. */

:root{
  --pg-bone:       #F4EFE6;
  --pg-bone-soft:  #ECE5D8;
  --pg-bone-warm:  #EFE7D5;
  --pg-bone-deep:  #E8E0D2;
  --pg-bone-card:  #ECE5D8;
  --pg-bone-faint: rgba(244,239,230,.45);
  --pg-ink:        #1A1816;
  --pg-ink-soft:   #4A4744;
  --pg-ink-pale:   #6E6961;
  --pg-ink-hair:   rgba(26,24,22,.10);
  --pg-ink-mist:   rgba(26,24,22,.06);
  --pg-ink-thread: rgba(26,24,22,.18);
  --pg-ink-line:   rgba(26,24,22,.40);
  --pg-terracotta: #B4533A;
  --pg-teal:       #2F4A4A;
  --pg-ochre:      #C8923D;
  --pg-ease:       cubic-bezier(.32,.72,0,1);
  --pg-ease-soft:  cubic-bezier(.22,1,.36,1);
  --pg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pg-font-italic:  'Instrument Serif', Georgia, serif;
  --pg-font-sans:    'Jost', system-ui, -apple-system, sans-serif;
}

/* ::selection echoes the brand. */
::selection{ background: var(--pg-terracotta); color: var(--pg-bone); }

/* Generic opt-in reveal (add class .pg-reveal to any element). Per-widget CSS
   may define richer entrances; this is the shared default. */
.pg-reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity 900ms var(--pg-ease), transform 900ms var(--pg-ease);
  /* No permanent will-change here — it was kept on every revealing element at
     once, forcing dozens of GPU layers and stuttering the first scroll. The
     browser composites opacity/transform fine for the duration of the
     transition without the hint. */
}
.pg-reveal.pg-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .pg-reveal, .pg-reveal.pg-in{ opacity:1; transform:none; transition:none; }
}