/* ==========================================================================
   JDS Decorations — global: brand variables, fonts, reset, base
   Brand (JDS brand colours and fonts sheet, The Chain, 2024):
   red J, orange/gold star, green S, deep navy-black text.
   Headings: Kannada MN (Apple) with self-hosted Mukta as the cross-device
   match; body: Arial.
   ========================================================================== */

@font-face { font-family: "Mukta"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/mukta-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/mukta-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Mukta"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/mukta-800-latin.woff2") format("woff2"); }

:root {
  /* Brand */
  --jds-red: #A3191E;
  --jds-red-bright: #C62127;
  --jds-orange: #F28C1E;
  --jds-gold: #F7B52C;
  --jds-green: #00924A;
  --jds-green-dark: #006B36;

  /* Standard names used across the site factory */
  --color-primary: var(--jds-red);
  --color-secondary: var(--jds-green);
  --color-accent: var(--jds-gold);
  --color-text: #140A20;          /* brand font colour */
  --color-text-light: #5B5466;
  --color-bg: #FFFFFF;
  --color-bg-soft: #FFF8EF;       /* warm cream */
  --color-bg-dark: #0C1224;       /* night navy */
  --color-bg-dark-2: #141C36;
  --color-line: #E8E1D6;
  --color-on-dark: #F4F1FA;
  --color-on-dark-muted: #B9B4CC;
  --glow-warm: #FFD9A0;

  --font-primary: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-heading: "Kannada MN", "Mukta", "Segoe UI", Arial, sans-serif;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 10, 32, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 10, 32, 0.10);
  --shadow-lg: 0 24px 60px rgba(8, 10, 30, 0.28);

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease;

  --container: 1200px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }
figure { margin: 0; }
img, video { height: auto; }
a { color: var(--jds-red); text-underline-offset: 0.18em; }
a:hover { color: var(--jds-red-bright); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--jds-gold); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 1000;
  background: var(--color-text); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}