/* Primer — design tokens */
:root {
  /* Warm-neutral canvas */
  --paper:      #FBF8F1;
  --cream:      #F6F1E7;
  --cream-deep: #F0E8D9;
  --oat:        #E9E0CD;

  /* Ink */
  --ink:        #2C2820;
  --ink-soft:   #4A4236;
  --muted:      #837868;
  --faint:      #A89C88;
  --line:       #DDD3BF;
  --line-soft:  #EAE2D2;

  /* Sage — trust / positive */
  --sage:       #6E7C5C;
  --sage-deep:  #5A6749;
  --sage-2:     #8A9A77;
  --sage-tint:  #E5E9DB;
  --sage-tint2: #D9DFC8;

  /* Clay / terracotta — caution (never harsh red) */
  --clay:       #B07B62;
  --clay-deep:  #98624B;
  --clay-tint:  #EFE0D6;

  /* Chocolate */
  --choco:      #43392C;

  --radius:     18px;
  --radius-sm:  12px;
  --radius-lg:  26px;
  --shadow:     0 1px 2px rgba(44,40,32,.04), 0 8px 30px rgba(44,40,32,.06);
  --shadow-lg:  0 2px 6px rgba(44,40,32,.05), 0 18px 50px rgba(44,40,32,.10);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "Newsreader", ui-monospace, monospace;
}

* { box-sizing: border-box; }

.ph {
  background-color: var(--oat);
  background-image: repeating-linear-gradient(135deg, transparent 0 17px, rgba(67,57,44,.035) 17px 34px);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-family: ui-monospace, monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 20px;
}