/* ============================================================
   4 CLOVER EQUINE — Brand Design System
   "Blue Ribbon" — approachable, photo-forward, neat & cool
   ============================================================ */

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

:root {
  /* ---- Core: royal navy + ribbon blue ---- */
  --pine-950: #0C1428;   /* deepest navy */
  --pine-900: #12203B;   /* deep navy — footers, dark bands */
  --forest-800: #1B2C5B; /* PRIMARY royal navy */
  --forest-700: #26396E;
  --clover-600: #3563D9; /* ribbon blue */
  --clover-500: #4F79E2;

  /* ---- Cool neutrals ---- */
  --paper: #FBFBF9;      /* chalk white page */
  --cream: #EEF0F3;      /* cool light card */
  --sand: #DCE0E7;       /* light steel */
  --sand-deep: #AEB6C2;  /* steel */

  /* ---- Accent: ribbon blue + steel-blue (was brass) ---- */
  --brass-600: #2A4FB3;  /* deep ribbon blue — eyebrows/links on light */
  --brass-500: #3563D9;  /* ribbon blue accent */
  --brass-300: #9FB0DA;  /* light steel-blue — accents on navy */

  /* ---- Ink ---- */
  --ink-900: #14161C;
  --ink-700: #3B3F49;
  --ink-500: #6C717B;
  --line: #2E416B;       /* hairline on navy */
  --line-light: #E0E2E8; /* hairline on light */

  /* ---- Type ---- */
  --serif: 'Newsreader', Georgia, serif;
  --display: 'Newsreader', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--paper);
  font-weight: 400;
}

/* ---- Reusable label / eyebrow ---- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---- Image placeholder ---- */
.ph {
  position: relative;
  background-color: var(--sand);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(27,44,91,0.07) 0,
    rgba(27,44,91,0.07) 1px,
    transparent 1px,
    transparent 11px
  );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--forest-800);
  opacity: 0.5;
  text-align: center;
  padding: 0 1em;
  text-transform: uppercase;
}
.ph.on-dark {
  background-color: #1f3160;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 11px
  );
}
.ph.on-dark::after { color: var(--brass-300); opacity: 0.7; }