@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* =============================================================
   The King's College — Design Tokens
   Import this file in any artifact:
       <link rel="stylesheet" href="colors_and_type.css">
   ============================================================= */

@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}



:root {
  /* ---------- BRAND COLOURS (supplied by the school) ---------- */
  --tkc-navy:       #003865;   /* primary */
  --tkc-gold:       #c5b783;   /* secondary / heritage */
  --tkc-red:        #862633;   /* burgundy heritage accent */
  --tkc-green:      #4a783c;   /* olive-branch green */

  /* Tints / shades for UI use (derived from brand) */
  --navy-900: #00223e;
  --navy-800: #002b50;
  --navy-700: #003865;   /* = --tkc-navy */
  --navy-600: #1a4f7a;
  --navy-500: #3a6b94;
  --navy-300: #8aa6c0;
  --navy-100: #d5e0ec;
  --navy-50:  #eef3f8;

  --gold-700: #9a8b5d;
  --gold-600: #b1a072;
  --gold-500: #c5b783;   /* = --tkc-gold */
  --gold-300: #ddd1ad;
  --gold-100: #f0e9d5;
  --gold-50:  #faf6ea;

  --red-700:  #6a1d28;
  --red-500:  #862633;   /* = --tkc-red */
  --red-300:  #c4828b;

  --green-700: #38602d;
  --green-500: #4a783c;  /* = --tkc-green */
  --green-300: #92b483;

  /* ---------- NEUTRALS (warm cream / parchment) ---------- */
  --cream-50:  #fbf8f1;
  --cream-100: #f6f1e4;
  --cream-200: #ece4d0;
  --stone-100: #ece8de;
  --stone-300: #c8c2b2;
  --stone-500: #8a8576;
  --stone-700: #4d4a40;
  --ink-900:   #1a1c20;

  /* ---------- SEMANTIC SURFACES ---------- */
  --surface:        #ffffff;
  --surface-cream:  var(--cream-50);
  --surface-muted:  var(--cream-100);
  --surface-deep:   var(--tkc-navy);
  --surface-deeper: var(--navy-900);

  /* ---------- TEXT ---------- */
  --fg-1: var(--ink-900);     /* primary */
  --fg-2: #43464c;            /* secondary body */
  --fg-3: var(--stone-500);   /* tertiary / meta */
  --fg-on-dark:    #ffffff;
  --fg-on-dark-2:  rgba(255,255,255,0.75);
  --fg-on-dark-3:  rgba(255,255,255,0.55);
  --fg-link:       var(--tkc-navy);
  --fg-link-hover: var(--navy-600);

  /* ---------- BORDERS / DIVIDERS ---------- */
  --border:        rgba(26, 28, 32, 0.10);
  --border-strong: rgba(26, 28, 32, 0.18);
  --border-gold:   var(--gold-300);
  --border-on-dark: rgba(255,255,255,0.18);

  /* ---------- SEMANTIC / STATUS ---------- */
  --success: var(--tkc-green);
  --warning: #b78521;
  --danger:  var(--tkc-red);
  --info:    var(--navy-600);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (rem-based, body = 16px) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  3.75rem;   /* 60 */
  --fs-5xl:  4.75rem;   /* 76 */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.18em;

  /* ---------- SPACING (4-pt grid) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- ELEVATION (warm-toned) ---------- */
  --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.06), 0 1px 3px rgba(40, 30, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(40, 30, 10, 0.08), 0 2px 4px rgba(40, 30, 10, 0.04);
  --shadow-lg: 0 16px 32px rgba(40, 30, 10, 0.10), 0 4px 12px rgba(40, 30, 10, 0.06);
  --shadow-xl: 0 28px 60px rgba(40, 30, 10, 0.14), 0 8px 20px rgba(40, 30, 10, 0.08);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--gold-500);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.1, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --measure:        640px;
  --nav-height:     80px;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Apply these by writing plain HTML — h1, h2, p, a, blockquote.
   Wrap a region in .tkc to scope.
   ============================================================= */

.tkc, .tkc * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tkc {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--surface-cream);
  text-wrap: pretty;
}

.tkc h1, .tkc .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--tkc-navy);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

.tkc h2, .tkc .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--tkc-navy);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.tkc h3, .tkc .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--tkc-navy);
  margin: 0 0 var(--space-3);
}

.tkc h4, .tkc .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--tkc-navy);
  margin: 0 0 var(--space-3);
}

.tkc .eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 var(--space-3);
  display: inline-block;
}

.tkc p, .tkc .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

.tkc .lede {
  font-size: var(--fs-md);
  color: var(--fg-1);
  line-height: var(--lh-relaxed);
}

.tkc small, .tkc .small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.tkc .meta {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

.tkc a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-500);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tkc a:hover { color: var(--fg-link-hover); border-color: var(--tkc-navy); }

.tkc blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--tkc-navy);
  border-left: 3px solid var(--gold-500);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
  max-width: var(--measure);
}

.tkc code, .tkc kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--cream-200);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

.tkc hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

/* ---------- BUTTON SYSTEM ---------- */
.tkc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.tkc-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tkc-btn:active { transform: scale(0.98); }

.tkc-btn--primary { background: var(--tkc-navy); color: #fff; }
.tkc-btn--primary:hover { background: var(--navy-800); }

.tkc-btn--secondary { background: var(--gold-500); color: var(--tkc-navy); }
.tkc-btn--secondary:hover { background: var(--gold-600); }

.tkc-btn--outline { background: transparent; color: var(--tkc-navy); border-color: var(--tkc-navy); }
.tkc-btn--outline:hover { background: var(--navy-50); }

.tkc-btn--ghost { background: transparent; color: var(--tkc-navy); }
.tkc-btn--ghost:hover { background: var(--navy-50); }

.tkc-btn--lg { font-size: var(--fs-base); padding: 16px 32px; }
.tkc-btn--sm { font-size: var(--fs-xs); padding: 8px 16px; }

.tkc-btn[disabled], .tkc-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- CHIP / BADGE ---------- */
.tkc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  color: var(--gold-700);
}
.tkc-chip--navy   { background: var(--navy-50);  color: var(--tkc-navy); }
.tkc-chip--red    { background: #f8e8ea;         color: var(--red-700); }
.tkc-chip--green  { background: #e6efe1;         color: var(--green-700); }

/* ---------- CARD ---------- */
.tkc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ---------- INPUT ---------- */
.tkc-input {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg-1);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tkc-input:focus { outline: none; border-color: var(--tkc-navy); box-shadow: var(--focus-ring); }

/* ---------- UTILS ---------- */
.tkc-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }
.tkc-on-navy { background: var(--tkc-navy); color: var(--fg-on-dark); }
.tkc-on-navy h1, .tkc-on-navy h2, .tkc-on-navy h3, .tkc-on-navy h4 { color: var(--fg-on-dark); }
.tkc-on-navy p { color: var(--fg-on-dark-2); }
.tkc-on-navy .eyebrow { color: var(--gold-500); }