/* ============================================================
   HELLO TUESDAY — QUICK EDIT FILE
   Change the values in this file first.
   The rest of the layout lives in styles.css.
   ============================================================ */

:root {
  /* BRAND COLOURS */
  --wine: #924e74;       /* signature burgundy — use sparingly */
  --yellow: #ffdfae;     /* warm Hello Tuesday yellow */
  --lilac: #e8dcf7;     /* creative / playful */
  --peach: #fcbcb2;      /* warm accent */
  --mint: #cfe6d6;       /* fresh supporting colour */
  --green: #308887;      /* dark green — reserved for mint/lilac sections */
  --violet-ink: #8f6aa8; /* softened lilac-violet — designed to sit on yellow */
  --brick-slate: #58657f; /* blue-grey pulled from Katherine's brickwork, deepened for contrast */
  --chalk: #f2f3f4;      /* pale grey */
  --cream: #fffaf3;      /* warm off-white */
  --ink: #171719;        /* almost-black body copy */
  --white: #fffdf9;

  /* TYPOGRAPHY — swap these to change the whole site's feel */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  /* GLOBAL SCALE */
  --site-gutter: 5vw;
  --nav-height: 142px;
}

body { font-family: var(--font-sans); }
.hero-bottom em,
.recognise em,
.services-head em,
.proof em,
.about em,
.statement em,
.creative-filter em,
.services .tag,
.filter-lead,
.about .bigline { font-family: var(--font-serif); }

/* Photo: when you add assets/katherine-home.jpg, uncomment the background-image line below. */
.portrait-photo {
  background: var(--peach);
  background-size: cover;
  background-position: center;
  /* background-image: url('assets/katherine-home.jpg'); */
}

/* ===== QUICK SECTION COLOUR MAP ===== */
.hero { background: var(--yellow); }
.ticker.brand-ticker { background: var(--lilac); }
.recognise { background: var(--cream); }
.statement { background: var(--peach); }
.services { background: var(--white); }
.creative-filter { background: var(--mint); }
.proof { background: var(--cream); }
.about { background: var(--peach); }
.contact { background: var(--lilac); }
footer { background: var(--cream); }