/* ===========================================================================
   The Inner Temple — brand.css for static.innertemple.org.uk
   ---------------------------------------------------------------------------
   Shared stylesheet for embedded pages (iframes on innertemple.org.uk).
   Every embed links this with:
     <link rel="stylesheet" href="/assets/brand.css">
   Source of truth: brand.md (Brand Cloudlines) via inner-temple.css.
   Fonts: FS Siena web (woff2) — licensed for this subdomain only.
   =========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-Thin.woff2") format("woff2");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-ThinItalic.woff2") format("woff2");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-ExtraLight.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-LightItalic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-MediumItalic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FS Siena";
  src: url("/assets/fonts/FSSienaWeb-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ---- Primary palette ---- */
  --it-blue:                #0A1347;   /* Primary. Authors, headlines, base brand. */
  --it-bronze:              #B88865;   /* Secondary. Contemporary type accents. */

  /* Departmental colours */
  --it-education:           #00847E;
  --it-becoming-a-barrister:#00AEAA;
  --it-catering:            #DB8F29;
  --it-treasury:            #0A65AE;
  --it-estates:             #909090;
  --it-library:             #A24963;
  --it-garden:              #60983A;
  --it-archives:            #DC414B;

  /* ---- Digital palette ---- */
  --it-deep-blue:           #0E0830;
  --it-blue-50:             #8589A2;
  --it-blue-30:             #B6B8C7;
  --it-blue-10:             #E7E7EC;
  --it-blue-05:             #F3F3F6;

  --it-white:               #FFFFFF;
  --it-black:               #000000;
  --it-cream:               #F6F2EB;

  /* ---- Semantic colours ---- */
  --color-bg:               var(--it-white);
  --color-bg-subtle:        var(--it-blue-05);
  --color-bg-muted:         var(--it-blue-10);
  --color-bg-inverse:       var(--it-blue);
  --color-bg-deep:          var(--it-deep-blue);

  --color-fg:               var(--it-blue);
  --color-fg-muted:         var(--it-blue-50);
  --color-fg-subtle:        var(--it-blue-30);
  --color-fg-inverse:       var(--it-white);
  --color-accent:           var(--it-bronze);

  --color-rule:             var(--it-blue-10);
  --color-rule-strong:      var(--it-blue-30);
  --color-focus:            var(--it-treasury);

  /* ---- Typography ---- */
  --font-display:           "FS Siena", "Verdana", "Times New Roman", Georgia, serif;
  --font-body:              "FS Siena", "Verdana", system-ui, -apple-system, sans-serif;

  /* Type scale — embeds sit inside a content column, so the scale tops out
     lower than the full-site version. */
  --fs-overline:            0.6875rem;
  --fs-caption:             0.8125rem;
  --fs-body-sm:             0.9375rem;
  --fs-body:                1.0625rem;
  --fs-lede:                1.25rem;
  --fs-h6:                  1rem;
  --fs-h5:                  1.25rem;
  --fs-h4:                  1.625rem;
  --fs-h3:                  2rem;
  --fs-h2:                  2.5rem;
  --fs-h1:                  3.25rem;

  /* Letter-spacing */
  --tracking-tight:         -0.01em;
  --tracking-normal:        0;
  --tracking-wide:          0.06em;
  --tracking-wider:         0.16em;

  /* Line-heights */
  --lh-display:             0.98;
  --lh-heading:             1.12;
  --lh-body:                1.55;
  --lh-tight:               1.25;

  /* ---- Spacing scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ---- Corner radii — subtle; brand is print-led ---- */
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-pill: 999px;            /* tags/chips only */

  /* ---- Borders ---- */
  --hairline:        1px solid var(--color-rule);
  --hairline-strong: 1px solid var(--color-rule-strong);

  /* ---- Elevation — used sparingly ---- */
  --shadow-1: 0 1px 2px rgba(10, 19, 71, 0.06);
  --shadow-2: 0 6px 24px rgba(10, 19, 71, 0.08);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
}

/* ---------- Base styles for embeds ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;                        /* embeds fill their frame edge-to-edge */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-weight: 400;
}

/* Headlines: CAPITALS, weight decreases as size increases */
h1, .it-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 200;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}
h2, .it-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 200;
  line-height: var(--lh-heading);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
h3, .it-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: var(--lh-heading);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-4);
}
h4, .it-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}
h5, .it-h5 {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-3);
}
h6, .it-h6 {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-4); max-width: 64ch; }

/* Eyebrow — wide-tracked label above titles */
.it-eyebrow {
  font-size: var(--fs-overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-fg-muted);
}

.it-lede {
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.45;
  max-width: 56ch;
}

.it-caption {
  font-size: var(--fs-caption);
  color: var(--color-fg-muted);
  line-height: 1.45;
}

a {
  color: var(--it-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--it-bronze); }

strong, b { font-weight: 600; }

ul, ol { padding-left: 1.2em; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }

hr { border: 0; border-top: var(--hairline); margin: var(--space-6) 0; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

::selection { background: var(--it-blue); color: var(--it-white); }