/* ============================================================
   Alchemy of Intelligences - Watercolor Architecture system
   Palette + type sampled from Michal's design board.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* - Ground - */
  --paper:    #FCF9F6;   /* warm ivory */
  --paper-2:  #F6F1E9;   /* deeper panel */
  --paper-3:  #F1ECE1;   /* card / inset */

  /* - Ink - */
  --ink:      #23364A;   /* deep slate-navy - display + text */
  --ink-2:    #34465A;
  --body:     #444F5B;   /* body copy */
  --muted:    #7E8590;   /* captions / meta */

  /* - Watercolor pigments (use sparingly, as accents) - */
  --sage:     #9FB7A8;
  --teal:     #8FB3B5;
  --sky:      #A9C2D2;
  --peri:     #AAAACB;
  --ochre:    #C49A63;   /* divider line·dot, fine detail */
  --ochre-deep: #9F7C45;

  /* - Lines - */
  --hair:      rgba(35, 54, 74, 0.13);
  --hair-soft: rgba(35, 54, 74, 0.07);
  --ochre-line: rgba(196, 154, 99, 0.7);

  /* - Type - */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
}

.aoi * { box-sizing: border-box; }
.aoi {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

/* ---- Eyebrow / small-caps labels ---- */
.aoi .eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
}
.aoi .eyebrow.ochre { color: var(--ochre-deep); }

/* ---- Display serif ---- */
.aoi h1, .aoi h2, .aoi h3, .aoi .serif {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  text-wrap: pretty;
  margin: 0;
}
.aoi h1 { font-weight: 500; }
.aoi .display { font-weight: 600; }
.aoi em, .aoi .it { font-style: italic; }

/* ---- Body ---- */
.aoi p { text-wrap: pretty; margin: 0; }
.aoi .lead {
  font-size: 1.2rem; line-height: 1.65; color: var(--ink-2);
  font-family: var(--sans); font-weight: 400;
}
.aoi .body { font-size: 1.02rem; line-height: 1.68; color: var(--body); }

/* ---- Buttons ---- */
.aoi .btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.02em; white-space: nowrap;
  padding: 0.9em 1.6em; border-radius: 1px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.aoi .btn-primary { background: var(--ink); color: var(--paper); }
.aoi .btn-primary:hover { background: #16263a; }
.aoi .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.aoi .btn-ghost:hover { border-color: var(--ink); }
.aoi .link {
  color: var(--ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--ochre-line); padding-bottom: 2px;
}

/* ---- Hairlines ---- */
.aoi .rule { height: 1px; background: var(--hair); border: 0; width: 100%; }

/* ---- Watercolor imagery should blend into the ivory ground ---- */
.aoi .art { display: block; mix-blend-mode: multiply; }