/* ============================================================
   The Painted Bunting — Global Styles
   buntingrating.com
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,900;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@400;600;700&display=swap');

/* --- Design Tokens --- */
:root {
  /* Lean colours — semantic, non-negotiable */
  --colour-left:   #2e73be;
  --colour-centre: #7b54a5;
  --colour-right:  #dc2f31;

  /* Tri-gradient */
  --gradient-tri: linear-gradient(90deg, #2e73be 0%, #7b54a5 50%, #dc2f31 100%);

  /* Ink scale */
  --ink-dark:  #111d2d;
  --ink-mid:   #323241;
  --ink-faint: #9b96a0;
  --ink-rule:  #dcdae1;

  /* Wing Green (accent) */
  --accent:    #88b137;

  /* Amber (Key Finding) */
  --amber:        #b87820;
  --amber-bg:     #fef8ec;
  --amber-border: #dcb964;

  /* Panels */
  --off-white: #f7f6f4;

  /* Direction A — Research publication */
  --a-bg:         #ffffff;
  --a-headline:   #111d2d;
  --a-body:       #323241;
  --a-secondary:  #9b96a0;
  --a-divider:    #dcdae1;
  --a-accent:     #88b137;
  --a-display:    'Playfair Display', Georgia, serif;
  --a-body-font:  'Barlow', system-ui, sans-serif;

  /* Direction B — Editorial brand */
  --b-bg:         #F5F0E8;
  --b-headline:   #1B2D4B;
  --b-body:       #1B2D4B;
  --b-display:    'Source Serif 4', Georgia, serif;
  --b-body-font:  'Barlow', system-ui, sans-serif;
  --b-eyebrow:    'Barlow Condensed', system-ui, sans-serif;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Palette A (default, body[data-palette="a"] or no attribute) --- */
body,
body[data-palette="a"] {
  background-color: var(--a-bg);
  color: var(--a-body);
  font-family: var(--a-body-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Palette B --- */
body[data-palette="b"] {
  background-color: var(--b-bg);
  color: var(--b-body);
  font-family: var(--b-body-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Shared utilities --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 2rem;
}

/* --- Tri-gradient rule --- */
.tri-rule {
  height: 3px;
  background: var(--gradient-tri);
  border: none;
}

/* --- Lean colour semantics --- */
.lean-left   { color: var(--colour-left); }
.lean-centre { color: var(--colour-centre); }
.lean-right  { color: var(--colour-right); }

/* --- Responsive container breakpoint --- */
@media (max-width: 768px) {
  .container {
    padding-inline: 1.25rem;
  }
}