/* Self-hosted, not from a CDN: the family's sites make no third-party requests, and this
   one holds to that even though it has no CSP of its own to enforce it. Both faces are
   OFL-licensed; the licences are alongside the files in assets/fonts/. */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  strata-kit — the shared identity for the strata family of sites.

  This file is the canonical home of what used to be called "the lodger theme": the macaron
  palette, its type stack, and the slim navigation bar that ties the sites together. lodger's
  src/css/style.css and former's were the origin; both now import this file instead of carrying
  their own copy of the tokens, so a palette fix happens once.

  Deliberately not the noradz "Signal" system. These are tools people sit in front of for an
  hour at a time in an office, so the palette is warm rather than severe: confectionery pastels
  on a meringue ground, with a deep aubergine ink carrying the text.

  The rule that keeps a pastel scheme readable: the macarons are surfaces, fills and borders,
  never text colours. Every text tier's contrast ratio against its ground is recorded beside it
  and clears WCAG AA. Canonical values and their derivation: ~/git/workbench/lodger/SPEC.md,
  "Palette and type".

  What this file does NOT contain: page layout. Each site owns its own shell, masthead and
  components and builds them on these tokens. The kit is identity and navigation, nothing more.
*/

:root {
  color-scheme: light dark;

  /* Grounds */
  --ground: #fbf7f4;
  --surface: #ffffff;
  --surface-sunk: #f4ede8;
  --border: #ebe0da;
  --border-strong: #ddcec6;

  /* Ink — never pure black; a deep aubergine reads warmer against a warm ground */
  --ink: #2e2732;        /* 13.6:1 on ground */
  --ink-soft: #5a4e5d;   /*  7.4:1 */
  --ink-faint: #6f6272;  /*  5.4:1 */

  /* Action and status */
  --accent: #b33a5f;         /* white on it: 5.7:1 */
  --accent-text: #b33a5f;    /* 5.4:1 on ground */
  --accent-hover: #9c3053;
  --on-accent: #ffffff;
  --warn: #8a5a12;           /* 5.6:1 */
  --refuse: #a32f4f;         /* 6.4:1 */
  --ok: #2c6e4f;             /* 5.7:1 */

  /* The macarons. Each has a job rather than being sprinkled about. */
  --pistachio: #b8dec8;
  --rose: #f6c1ce;
  --lavender: #cdbdeb;
  --lemon: #faecb4;
  --caramel: #ebcba6;
  --bleuet: #b9d3ee;

  --shadow-soft: 0 1px 2px rgb(46 39 50 / 4%), 0 6px 20px rgb(46 39 50 / 6%);
  --shadow-lift: 0 2px 4px rgb(46 39 50 / 6%), 0 12px 32px rgb(46 39 50 / 10%);

  --radius-card: 14px;
  --radius-control: 9px;

  --font-display: 'Fraunces Variable', 'Fraunces', georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', menlo, monospace;
}

/*
  Declared as a mixin-by-duplication rather than with a media query alone: the toggle stamps
  data-theme on <html>, and it has to win in both directions — a light choice on a dark system
  as much as the reverse. The media-query block covers "the system says dark and the toggle
  hasn't overridden it"; the plain [data-theme='dark'] block after it covers "the toggle says
  dark regardless of the system". There is no [data-theme='light'] block because the base
  :root above already is the light theme.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #1e1922;
    --surface: #29222e;
    --surface-sunk: #171319;
    --border: #3a3040;
    --border-strong: #4b3f52;

    --ink: #f5eff3;        /* 15.2:1 on ground */
    --ink-soft: #c6b8c8;   /*  9.1:1 */
    --ink-faint: #a295a6;  /*  6.1:1 */

    --accent: #b33a5f;
    --accent-text: #f58ba8; /* 7.5:1 */
    --accent-hover: #c8446d;
    --warn: #e8b978;        /* 9.6:1 */
    --refuse: #f2879f;      /* 7.2:1 */
    --ok: #7ed2a6;          /* 9.6:1 */

    /* Same hues, brought down to surface weight rather than inverted. */
    --pistachio: #3e5f51;
    --rose: #5e3746;
    --lavender: #463b5c;
    --lemon: #5c5334;
    --caramel: #5a4536;
    --bleuet: #37485e;

    --shadow-soft: 0 1px 2px rgb(0 0 0 / 20%), 0 6px 20px rgb(0 0 0 / 24%);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 24%), 0 12px 32px rgb(0 0 0 / 32%);
  }
}

:root[data-theme='dark'] {
  --ground: #1e1922;
  --surface: #29222e;
  --surface-sunk: #171319;
  --border: #3a3040;
  --border-strong: #4b3f52;

  --ink: #f5eff3;        /* 15.2:1 on ground */
  --ink-soft: #c6b8c8;   /*  9.1:1 */
  --ink-faint: #a295a6;  /*  6.1:1 */

  --accent: #b33a5f;
  --accent-text: #f58ba8; /* 7.5:1 */
  --accent-hover: #c8446d;
  --warn: #e8b978;        /* 9.6:1 */
  --refuse: #f2879f;      /* 7.2:1 */
  --ok: #7ed2a6;          /* 9.6:1 */

  /* Same hues, brought down to surface weight rather than inverted. */
  --pistachio: #3e5f51;
  --rose: #5e3746;
  --lavender: #463b5c;
  --lemon: #5c5334;
  --caramel: #5a4536;
  --bleuet: #37485e;

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 20%), 0 6px 20px rgb(0 0 0 / 24%);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 24%), 0 12px 32px rgb(0 0 0 / 32%);
}

/* --- The family bar ------------------------------------------------------------------- */

/*
  A slim bar across the top of every site in the family, generated from projects.json by
  build.mjs into nav.html and inlined at each site's build time. It is markup and CSS only —
  no script, no fetch — because lodger and former ship a Content-Security-Policy with no
  connect-src, and a nav that phoned home would break the guarantee those sites are built on.

  Sticky rather than fixed: it scrolls with a long legislation page for a moment, then holds,
  which keeps it out of the way of a tool's own masthead on first paint.
*/
.kit-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding: 9px 24px;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.83rem;
}

.kit-nav-home {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 30;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.kit-nav-home .dot {
  color: var(--accent-text);
}

.kit-nav-home:hover {
  color: var(--accent-text);
}

.kit-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.kit-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--border-strong);
}

/*
  The current site is still rendered as a link — it is a real URL and middle-clicking it should
  work — but marked with aria-current so it reads as "here" to a screen reader as well as to
  the eye.
*/
.kit-nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.kit-nav a:focus-visible,
.kit-nav-home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (width <= 560px) {
  .kit-nav {
    padding: 8px 16px;
  }
}

/* --- Shared primitives ---------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

* { box-sizing: border-box; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--surface-sunk);
  color: var(--ink);
  padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; z-index: 30; }

a { color: var(--accent-text); }


/* The wash at the top of the page, carried over from lodger so the hub reads as the same
   product as the tools it links to. */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 420px;
  background:
    radial-gradient(60% 100% at 12% 0%, color-mix(in srgb, var(--rose) 46%, transparent), transparent 70%),
    radial-gradient(52% 100% at 88% 0%, color-mix(in srgb, var(--bleuet) 42%, transparent), transparent 70%),
    radial-gradient(40% 80% at 50% 0%, color-mix(in srgb, var(--lemon) 34%, transparent), transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.masthead {
  position: relative;
  margin-bottom: 36px;
  padding-right: 120px;
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

.wordmark .dot { color: var(--accent-text); }

.tagline {
  margin: 10px 0 0;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.theme-toggle {
  position: absolute;
  top: 4px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 22px 22px 60px;
  /* The macaron edge is what distinguishes one card from the next at a glance; it is a
     surface, never a text colour, which is the rule that keeps the pastel palette readable. */
  border-top: 4px solid var(--border-strong);
}
.card-legislation { border-top-color: var(--lavender); }
.card-lodger { border-top-color: var(--rose); }
.card-former { border-top-color: var(--bleuet); }
.card-noshow { border-top-color: var(--pistachio); }
.card-stencil { border-top-color: var(--caramel); }

.card h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 30;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.card h2 a { text-decoration: none; color: var(--ink); }
.card h2 a:hover { color: var(--accent-text); }

.chip {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--lemon);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: lowercase;
  vertical-align: middle;
}

.card-summary { margin: 0 0 10px; color: var(--ink); font-weight: 500; }
.card-blurb { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

.card-visit {
  /* Absolute against the tile itself, not the text flow — so it lands in the same corner of
     every card regardless of blurb length, and doesn't depend on flexbox stretch behaviour
     that some browsers (Safari included) get wrong on a grid item. */
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  /* Filled with the same macaron as the card's top edge — a surface, never a text colour,
     so it pairs with --ink rather than carrying the colour itself. */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-legislation .card-visit { background: var(--lavender); }
.card-lodger .card-visit { background: var(--rose); }
.card-former .card-visit { background: var(--bleuet); }
.card-noshow .card-visit { background: var(--pistachio); }
.card-stencil .card-visit { background: var(--caramel); }
.card-visit svg { flex: none; }
.card-visit:hover { box-shadow: var(--shadow-lift); transform: translate(1px, -1px); }
.card-visit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.about {
  margin-top: 48px;
  max-width: 62ch;
}
.about h2 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 30;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 10px;
}
.about p { color: var(--ink-soft); margin: 0 0 12px; }
.about .caveat { color: var(--ink-faint); font-size: 0.9rem; }

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