/* PonderCanvas palette: warm paper, deep ink, teal brushwork, and restrained orange. */
:root {
  --ink:         #17363b;
  --teal:        #087e80;
  --teal-dark:   #075f62;
  --teal-light:  #25a3a1;
  --orange:      #e58b2a;
  --paper:       #f7f0e6;
  --paper-light: #fffaf2;
  --border:      #ddcdb9;
  --text-dark:   #2d3b3d;
  --text-light:  #fff7eb;

  --font-heading: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Raleway', 'Segoe UI', Arial, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .72), transparent 55%),
    linear-gradient(180deg, #f8f3eb 0%, var(--paper) 100%);
  line-height: 1.75;
}

h1, h2, h3 { font-family: var(--font-heading); letter-spacing: .03em; line-height: 1.2; color: var(--ink); }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

.page-header { padding: 1rem 0; }
.ponder-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    url("../img/header_bg.png") center / min(162vw, 900px) auto no-repeat,
    radial-gradient(
      ellipse at 50% 35%,
      rgba(255, 255, 255, 0.65) 0%,
      transparent 75%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(215, 169, 120, 0.12) 0%,
      transparent 75%
    ),
    linear-gradient(
      135deg,
      #f8e9d8 0%,
      #fff5e8 45%,
      #f4dfc8 100%
    );
  border: 1px solid rgba(157, 110, 66, 0.25);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(80, 50, 20, 0.08);
}
.ponder-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: multiply;
}
.ponder-header > * { position: relative; z-index: 1; }
.page-header .container { text-align: center; }
.page-logo {
  display: block;
  width: min(100%, 500px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .24));
}
.page-hero { padding: 2rem 0 1.25rem; text-align: center; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
.hero-rule {
  width: 120px; height: 3px; margin: .9rem auto 1.1rem;
  background: linear-gradient(90deg, transparent, var(--teal) 35%, var(--orange) 50%, var(--teal) 65%, transparent);
}
.page-hero p { margin: 0; color: #647274; }

main { padding-bottom: 2.5rem; }

/* Keep image work areas quiet while tying controls to the header palette. */
.PWeditor {
  --pwe-accent: var(--teal);
  --pwe-accent-dark: var(--teal-dark);
  --pwe-accent-light: var(--teal-light);
  --pwe-slider-accent: #18a6a4;
  --pwe-accent-text: #fff;
  --pwe-panel-bg: rgba(23, 54, 59, .97);
  --pwe-panel-text: var(--text-light);
  --pwe-panel-divider: rgba(229, 139, 42, .3);
  --pwe-border: var(--border);
  --pwe-box-bg: rgba(255, 250, 242, .72);
  --pwe-font: var(--font-body);
  --pwe-heading-font: var(--font-heading);
}

.page-footer {
  border-top: 2px solid var(--teal);
  background: var(--ink);
  color: var(--text-light);
  text-align: center;
  padding: 1rem;
  font-size: .9rem;
}