/* ───────────────────────────────────────────────────────────────────────────────────────────────────
   Typefaces, served by Kengele rather than by Google.

   Until 9 October 2026 every page loaded these from fonts.googleapis.com and fonts.gstatic.com,
   which disclosed each visitor's address, user agent and referring page to Google before a word of
   the privacy policy had been read - including on the privacy policy itself, which is the URL
   submitted to connector providers. The policy said there were "no cookies, no analytics and no
   advertising trackers", which was true and read as "no third party learns anything about you",
   which was not. Gate 5 found it; a disclosure paragraph was the first fix and self-hosting is the
   real one.

   What it also buys: two fewer DNS lookups and a TLS handshake on every page load, a
   Content-Security-Policy that can name `self` without exceptions, and no dependency on a third
   party for whether the site renders.

   Instrument Sans, Instrument Serif and IBM Plex Mono are all under the SIL Open Font Licence,
   which permits this. The files are the same woff2 subsets Google serves, fetched once on
   9 October 2026, latin and latin-ext only - 165 KB in total, cached for a year under the
   /assets/* behaviour.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-normal-400to700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-normal-400to700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-italic-400to700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-italic-400to700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kengele — kengele.com
   Issue #265. Tokens from brand-assets README; layout from design/locked-design.png.
   Roles are fixed in REFERENCE-LOCK.md: terracotta is accent and CTA fill only,
   Instrument Serif is display only, the photograph is the hero surface. */

:root {
  --terracotta: #B86445;
  --terracotta-lift: #C97356;
  --charcoal: #242B2D;
  --charcoal-deep: #1A1F21;
  --cream: #F4EFE6;
  --sand: #EADDCB;

  --ink: var(--cream);
  --ink-soft: rgb(244 239 230 / 0.78);
  --ink-faint: rgb(244 239 230 / 0.52);
  --rule: rgb(244 239 230 / 0.14);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 6.7vw, 6rem);
  --measure: 34rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--terracotta-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cream); color: var(--charcoal);
  padding: 0.75rem 1rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 1rem;
}

/* ── navigation ─────────────────────────────────────────────── */

.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 2.6vw, 2.25rem) var(--gutter);
}

.nav__brand img { height: clamp(34px, 3.4vw, 44px); width: auto; }

.nav__right { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }

.nav__link {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; color: var(--ink);
  transition: color 0.18s ease;
}
.nav__link:hover { color: var(--terracotta-lift); }

.nav__menu {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 50%;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.nav__menu:hover { border-color: rgb(244 239 230 / 0.4); background: rgb(244 239 230 / 0.06); }

.nav__bars, .nav__bars::before, .nav__bars::after {
  content: ""; display: block;
  width: 16px; height: 1.5px; border-radius: 1px;
  background: var(--ink);
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav__bars { position: relative; }
.nav__bars::before { position: absolute; top: -5px; }
.nav__bars::after  { position: absolute; top: 5px; }

.nav__menu[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__menu[aria-expanded="true"] .nav__bars::before { top: 0; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__bars::after  { top: 0; transform: rotate(-45deg); }

.menu {
  position: absolute; z-index: 9;
  top: calc(clamp(1.25rem, 2.6vw, 2.25rem) * 2 + 44px);
  right: var(--gutter);
  background: rgb(26 31 33 / 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 0.5rem;
  min-width: 15rem;
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list a {
  display: block; padding: 0.7rem 0.9rem; border-radius: 9px;
  text-decoration: none; font-size: 0.95rem;
}
.menu__list a:hover { background: rgb(244 239 230 / 0.08); }
.menu__rule { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--rule); }

/* ── hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: clamp(34rem, 100svh, 58rem);
  display: flex; align-items: flex-end;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* The photograph is the hero surface. These only protect legibility over it:
   a left-weighted wash for the text column, and a short top veil for the nav. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      rgb(26 31 33 / 0.92) 0%,
      rgb(26 31 33 / 0.78) 26%,
      rgb(26 31 33 / 0.32) 52%,
      rgb(26 31 33 / 0.05) 74%),
    linear-gradient(to bottom,
      rgb(26 31 33 / 0.55) 0%,
      rgb(26 31 33 / 0) 22%);
}

.hero__inner {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: var(--gutter);
  padding-block-end: clamp(3rem, 12vh, 8rem);
  max-width: 56rem;
}

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.15rem + 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 clamp(1.25rem, 2.6vw, 1.9rem);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__line { display: block; }
.hero__line--accent { font-style: italic; color: var(--terracotta); }

.hero__sub {
  margin: 0 0 clamp(1.75rem, 3.4vw, 2.5rem);
  max-width: var(--measure);
  font-size: clamp(1rem, 0.94rem + 0.36vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ── buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 1.125rem 2rem;
  border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.btn--primary { background: var(--terracotta); color: var(--charcoal); }
.btn--primary:hover { background: var(--terracotta-lift); }
.btn--primary:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ── enquiry page ───────────────────────────────────────────── */

/* The landing page is the hero and nothing else, so the nav floats over the
   photograph. Every other page needs it to sit on the canvas instead. */
.nav--solid {
  position: static;
  border-bottom: 1px solid var(--rule);
}

.page {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}

.page h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.page__lede { margin: 0; color: var(--ink-soft); max-width: 30rem; text-wrap: pretty; }
.page__lede + .page__lede { margin-top: 1rem; }

/* The no-JavaScript error path redirects to #error. :target is CSS, so this
   works on plain static hosting where nothing can render a message server-side. */
.alert {
  display: none;
  grid-column: 1 / -1;
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgb(212 120 92 / 0.5);
  border-radius: 10px;
  background: rgb(212 120 92 / 0.12);
  color: #E79A82;
  font-size: 0.9375rem;
}
.alert:target { display: block; }

.page__aside {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-faint);
  max-width: 30rem;
}
.page__aside a { color: var(--terracotta); text-decoration: none; font-weight: 600; }
.page__aside a:hover { color: var(--terracotta-lift); text-decoration: underline; }

/* ── prose pages ────────────────────────────────────────────── */

/* box-sizing is border-box, so max-width would otherwise include the gutter
   and the measure would come out two gutters narrower than intended. */
.prose {
  max-width: calc(42rem + var(--gutter) * 2);
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}

.prose h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.08; letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.prose h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  line-height: 1.2;
  margin: 2.75rem 0 0.75rem;
  text-wrap: balance;
}

.prose p { margin: 0 0 1.1rem; color: var(--ink-soft); text-wrap: pretty; }
.prose__lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--ink); }
.prose a { color: var(--terracotta); text-decoration: none; font-weight: 600; }
.prose a:hover { color: var(--terracotta-lift); text-decoration: underline; }
.prose code { font-family: var(--mono); font-size: 0.9em; color: var(--sand); }

.prose__list { margin: 0 0 1.1rem; padding-left: 1.2rem; color: var(--ink-soft); }
.prose__list li { margin-bottom: 0.5rem; text-wrap: pretty; }

.prose__aside {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem; color: var(--ink-faint);
}

.tbl { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.9375rem; }
.tbl th, .tbl td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
.tbl td { color: var(--ink-soft); }
.opt { color: var(--ink-faint); font-size: 0.875em; }

/* Unmissable on purpose: these documents must not be published as they stand. */
.draft {
  margin: 0 0 2.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--terracotta);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgb(184 100 69 / 0.14);
  color: var(--ink);
  font-size: 0.9375rem;
}
.draft strong { color: var(--terracotta-lift); }

.todo {
  display: inline-block;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal); background: var(--terracotta);
  padding: 0.15rem 0.45rem; border-radius: 4px;
  margin-right: 0.4rem;
}

.todo-block {
  padding: 0.9rem 1.1rem;
  border: 1px dashed rgb(184 100 69 / 0.55);
  border-radius: 10px;
  background: rgb(184 100 69 / 0.07);
}

/* ── form ───────────────────────────────────────────────────── */

.form { display: grid; gap: 1.25rem; max-width: 30rem; }

.field { display: grid; gap: 0.4rem; margin: 0; padding: 0; border: 0; }

.field label, .field legend {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0;
}

.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: rgb(244 239 230 / 0.05);
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(244 239 230 / 0.28); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--terracotta); background: rgb(244 239 230 / 0.08); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: right 1.15rem center, right 0.85rem center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--charcoal); color: var(--ink); }

.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: #D4785C; }

.field textarea { resize: vertical; min-height: 7rem; line-height: 1.55; font-family: var(--body); }

.field__opt {
  font-family: var(--body); font-size: 0.75rem; letter-spacing: 0;
  text-transform: none; color: var(--ink-faint); opacity: 0.8;
}

.field__hint { margin: 0; font-size: 0.8125rem; color: var(--ink-faint); }

.field__error { margin: 0; font-size: 0.8125rem; color: #E79A82; }

.field--choice { gap: 0.6rem; }
.choice {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--body); font-size: 0.95rem;
  letter-spacing: 0; text-transform: none; color: var(--ink-soft);
  cursor: pointer;
}
.choice input { accent-color: var(--terracotta); width: 1rem; height: 1rem; margin: 0; }

.form__note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); text-wrap: pretty; }

.form .btn { justify-self: start; }

.form__status { margin: 0; font-size: 0.9375rem; min-height: 1.4em; }
.form__status[data-state="ok"]   { color: var(--sand); }
.form__status[data-state="fail"] { color: #E79A82; }

/* ── hero-only landing page ─────────────────────────────────── */

.is-hero-only { overflow: hidden; }
.is-hero-only main { min-height: 100svh; }

/* ── footer ─────────────────────────────────────────────────── */

.foot {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem; color: var(--ink-faint);
}
.foot__mark { width: 26px; height: 26px; }
.foot__line { margin: 0; }
.foot__meta { margin: 0 0 0 auto; }
.foot__meta a { text-decoration: none; }
.foot__meta a:hover { color: var(--terracotta-lift); }

/* ── narrow ─────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .nav__link { display: none; }
  .hero__media img { object-position: 70% 50%; }
  .hero::before {
    background:
      linear-gradient(to bottom,
        rgb(26 31 33 / 0.72) 0%,
        rgb(26 31 33 / 0.35) 34%,
        rgb(26 31 33 / 0.86) 100%);
  }
  .foot__meta { margin-left: 0; width: 100%; }
}

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

/* The one inline style attribute the site used to carry, moved here so the Content-Security-Policy
   can set style-src to 'self' with no 'unsafe-inline'. An inline style ATTRIBUTE is blocked by
   style-src just as a <style> block is, which is easy to miss when auditing for inline script. */
.back { margin-top: 2rem; }