/* Keeptrust — design system
   Direction: warm and human. Real photography leads, an editorial serif carries the voice,
   forest green is the brand colour and old gold is used sparingly for detail. */
:root {
  --paper: #F6F2E9;
  --paper-2: #EFE9DC;
  --surface: #FFFDF8;
  --line: rgb(16 38 29 / 0.12);
  --line-strong: rgb(16 38 29 / 0.24);
  --ink: #13261E;
  --body: #3D4A43;
  --muted: #69736C;
  --green: #0F3D2E;
  --green-2: #185241;
  --green-ink: #F6F2E9;
  --green-soft: rgb(15 61 46 / 0.08);
  --gold: #B8913A;
  --gold-soft: rgb(184 145 58 / 0.14);
  --accent: var(--green);
  --accent-hover: var(--green-2);
  --accent-ink: #FFFDF8;
  --accent-soft: var(--green-soft);

  /* fixed dark surfaces (sidebar, bands) */
  --deep: #0F3D2E;
  --deep-2: #164A39;
  --deep-line: rgb(246 242 233 / 0.14);
  --deep-text: #F6F2E9;
  --deep-muted: #B9C7BF;
  --deep-accent: #D9B65E;

  --ok: #2D7A4B;   --ok-soft: rgb(45 122 75 / 0.12);
  --warn: #9A6410; --warn-soft: rgb(196 140 40 / 0.16);
  --crit: #A93A2C; --crit-soft: rgb(169 58 44 / 0.1);

  --ec-a: #1A9641; --ec-b: #52B151; --ec-c: #A6D96A; --ec-d: #F2E01D;
  --ec-e: #FDAE61; --ec-f: #F46D43; --ec-g: #D7191C;

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-xs: 0.78rem; --t-sm: 0.9rem; --t-base: 1.02rem; --t-lg: 1.15rem;
  --t-xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --t-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  --t-hero: clamp(2.6rem, 1.6rem + 4vw, 4.9rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  --r-sm: 4px; --r: 6px; --r-lg: 8px;
  --shadow-sm: 0 1px 2px rgb(19 38 30 / 0.06);
  --shadow-md: 0 8px 24px -8px rgb(19 38 30 / 0.16);
  --shadow-lg: 0 30px 60px -20px rgb(19 38 30 / 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1A15; --paper-2: #13231C; --surface: #15261F;
    --line: rgb(246 242 233 / 0.1); --line-strong: rgb(246 242 233 / 0.2);
    --ink: #F2EDE2; --body: #C9CFC9; --muted: #95A098;
    --green: #7FC4A3; --green-2: #9AD4B8; --green-ink: #0E1A15; --green-soft: rgb(127 196 163 / 0.12);
    --gold: #D9B65E; --gold-soft: rgb(217 182 94 / 0.14);
    --accent-ink: #0E1A15;
    --deep: #0A2C21; --deep-2: #113829;
    --ok: #6CC490; --ok-soft: rgb(108 196 144 / 0.14);
    --warn: #E8B058; --warn-soft: rgb(232 176 88 / 0.14);
    --crit: #EE8A7C; --crit-soft: rgb(238 138 124 / 0.14);
    --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1A15; --paper-2: #13231C; --surface: #15261F;
  --line: rgb(246 242 233 / 0.1); --line-strong: rgb(246 242 233 / 0.2);
  --ink: #F2EDE2; --body: #C9CFC9; --muted: #95A098;
  --green: #7FC4A3; --green-2: #9AD4B8; --green-ink: #0E1A15; --green-soft: rgb(127 196 163 / 0.12);
  --gold: #D9B65E; --gold-soft: rgb(217 182 94 / 0.14);
  --accent-ink: #0E1A15;
  --deep: #0A2C21; --deep-2: #113829;
  --ok: #6CC490; --ok-soft: rgb(108 196 144 / 0.14);
  --warn: #E8B058; --warn-soft: rgb(232 176 88 / 0.14);
  --crit: #EE8A7C; --crit-soft: rgb(238 138 124 / 0.14);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.12; text-wrap: balance; }
h1, h2 { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.015em; font-variation-settings: "opsz" 96; }
h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-weight: 600; }
p { margin: 0; max-width: 64ch; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }

.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  border-radius: 4px; border: 1px solid transparent;
  font-weight: 600; letter-spacing: .01em; font-size: var(--t-base); line-height: 1; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-gold { background: var(--gold); color: #1B160A; }
.btn-gold:hover { background: #A88231; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); background: var(--surface); }
.btn-ghost { background: transparent; color: var(--ink); padding: 0 var(--s-3); }
.btn-ghost:hover { background: var(--green-soft); }
.btn-sm { min-height: 38px; padding: 0 var(--s-4); font-size: var(--t-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 3px;
  font-size: var(--t-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--paper-2); color: var(--body);
}
.pill-accent { background: var(--green-soft); color: var(--green); }
.pill-gold { background: var(--gold-soft); color: #7A5C17; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-crit { background: var(--crit-soft); color: var(--crit); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.kicker { font-size: var(--t-sm); font-weight: 600; color: var(--gold); letter-spacing: .02em; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 34px; height: 34px; flex: none; }
.logo-word { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; }

.field { display: grid; gap: 6px; }
.field label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-base);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.hint { font-size: var(--t-xs); color: var(--muted); }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); }
.seg button { min-height: 34px; padding: 0 var(--s-4); border: 0; border-radius: 4px; background: transparent; font-size: var(--t-sm); font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s ease; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* photo frame with a soft, warm treatment */
.photo { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); font-size: var(--t-xs); color: #fff; background: rgb(15 30 24 / 0.55); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}