/* ========================================================================
   Newcastle Canine Training — Base Tokens
   Premium serif + grotesque, warm cream / deep oxblood / charcoal
   ======================================================================== */

:root {
  /* Colour — light */
  --bg:           #F2EDE3;   /* warm cream */
  --bg-alt:       #EAE3D4;
  --surface:      #FAF6EC;   /* card */
  --surface-2:    #F6F0E2;
  --ink:          #1A1612;   /* charcoal-near-black */
  --ink-2:        #2B2620;
  --muted:        #6B6258;
  --muted-2:      #948B7D;
  --rule:         #D9CFBC;
  --rule-soft:    #E6DECB;
  --brand:        #8E1F1F;   /* deep oxblood */
  --brand-2:      #6E1414;
  --brand-soft:   #F3D7CE;
  --gold:         #B08545;

  /* Type */
  --f-display: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --f-body:    'Satoshi', 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    ui-monospace, 'JetBrains Mono', 'Menlo', monospace;

  /* Scale (clamped responsive) */
  --t-eyebrow: 0.78rem;       /* 12.5px */
  --t-body:   1.0625rem;      /* 17px */
  --t-body-sm: 0.95rem;
  --t-lead:   1.25rem;
  --t-h4:     clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem);
  --t-h3:     clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  --t-h2:     clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --t-h1:     clamp(2.6rem, 1.8rem + 4vw, 5.2rem);
  --t-display: clamp(3rem, 2rem + 5.6vw, 6.4rem);

  /* Spacing (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem;
  --s-9: 3rem; --s-10: 4rem; --s-12: 5rem; --s-14: 6rem; --s-16: 8rem;

  /* Layout */
  --container: 1180px;
  --container-wide: 1280px;
  --container-narrow: 760px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(26,22,18,.04), 0 0 0 1px rgba(26,22,18,.04);
  --shadow-md: 0 4px 24px -8px rgba(26,22,18,.12), 0 1px 2px rgba(26,22,18,.04);
  --shadow-lg: 0 30px 60px -25px rgba(26,22,18,.25), 0 8px 22px -10px rgba(26,22,18,.12);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --d-1: 140ms; --d-2: 240ms; --d-3: 420ms; --d-4: 700ms;
}

/* Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01','ss02','liga','kern';
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--brand); color: #fff; }

/* Type ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
}
h1 { font-size: var(--t-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.1; }
h4 { font-size: var(--t-h4); font-weight: 600; line-height: 1.2; }
p  { margin: 0 0 1em; max-width: 64ch; }
strong { font-weight: 700; }
em { font-style: italic; }

.display {
  font-family: var(--f-display);
  font-size: var(--t-display);
  letter-spacing: -0.03em;
  line-height: 0.96;
  font-weight: 400;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
}
.serif-italic { font-family: var(--f-display); font-style: italic; font-weight: 400; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow.on-dark { color: rgba(250,246,236,.7); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }

/* Skip link -------------------------------------------------------- */
.skip, .skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: var(--s-3) var(--s-4); z-index: 9999;
  text-decoration: none;
  border-radius: var(--r-sm);
}
.skip:focus, .skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* Container -------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--s-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-6); }

/* Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-7);
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--d-1) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand);
  color: #FAF6EC;
  box-shadow: 0 1px 0 rgba(0,0,0,.12) inset, 0 8px 24px -10px rgba(142,31,31,.55);
}
.btn-primary:hover { background: var(--brand-2); }
.btn-ink {
  background: var(--ink);
  color: var(--bg);
}
.btn-ink:hover { background: #000; }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.btn-on-dark { color: var(--bg); border-color: rgba(250,246,236,.4); }
.btn-on-dark:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn-sm { min-height: 42px; padding: 0 var(--s-5); font-size: 0.86rem; }
.btn-lg { min-height: 60px; padding: 0 var(--s-8); font-size: 1rem; }
@media (max-width: 480px) {
  .btn-lg { padding: 0 var(--s-6); font-size: 0.95rem; }
  .btn { max-width: 100%; }
}
.btn .arrow { display: inline-block; transition: transform var(--d-2) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600;
  color: var(--brand);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.link-arrow:hover { gap: var(--s-4); color: var(--brand-2); }

/* Tag chips -------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink-2);
}
.chip-dark { background: rgba(250,246,236,.08); border-color: rgba(250,246,236,.18); color: rgba(250,246,236,.85); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* Section utilities ----------------------------------------------- */
.section { padding: clamp(56px, 7vw, 110px) 0; }
.section-tight { padding: clamp(40px, 5vw, 80px) 0; }
.section-dark { background: var(--ink); color: var(--bg); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--bg); }
.section-dark .eyebrow { color: rgba(250,246,236,.65); }
.section-dark .lead { color: rgba(250,246,236,.78); }
.section-cream { background: var(--bg-alt); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Check list ------------------------------------------------------ */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 16px; height: 1px;
  background: var(--brand);
}
.section-dark .check-list li, .page-hero .check-list li { color: rgba(250,246,236,.85); }
.section-dark .check-list li::before, .page-hero .check-list li::before { background: #E6A479; }

/* Accessibility helpers ------------------------------------------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}