/* Ideally Us — brand foundation
   Palette sampled directly from the logo mark. */
:root{
  /* Core brand */
  --teal-ink:   #042526;   /* deep teal-black (logo bg) */
  --teal-700:   #0a3a3a;
  --teal-600:   #0f4a49;
  --teal-500:   #16605d;
  --gold:       #ffbe0b;   /* marigold (logo mark) */
  --gold-soft:  #ffd45e;
  --gold-deep:  #e0a400;
  --coral:      #f82621;   /* hot coral (logo dot) */
  --coral-soft: #ff5e54;

  /* Warm neutrals */
  --cream:      #fbf6ec;   /* warm paper */
  --cream-2:    #f3ebda;   /* warm panel */
  --cream-3:    #ece1cb;
  --ink:        #1a1c1a;   /* near-black warm text */
  --ink-soft:   #4b524d;   /* muted body on light */
  --line:       #e3d9c4;

  /* Type */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --maxw: 1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* Striped image placeholder used across directions */
.ph{
  position:relative; overflow:hidden;
  background-image:repeating-linear-gradient(135deg,
     rgba(0,0,0,.05) 0 10px, rgba(0,0,0,0) 10px 20px);
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.ph[data-dark]{
  background-image:repeating-linear-gradient(135deg,
     rgba(255,255,255,.06) 0 10px, rgba(255,255,255,0) 10px 20px);
}
.ph .ph-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; opacity:.6; padding:10px 12px;
}