/* ==========================================================================
   fun.limited : style.css

   Direction D. A warm neutral base, with the five section colours used
   only as territory markers: section headers, index cards and the home
   entry blocks. Section colours never sit behind body text.

   Type follows the fun.limited type system of 10 September 2026,
   website and apps context: Archivo headings over Open Sans text by
   default, with Spectral and IBM Plex Serif available as pairings.

   Contents
     1. Fonts
     2. Design tokens
     3. Base elements
     4. Layout
     5. Header, wordmark and navigation
     6. Footer
     7. Page head and section markers
     8. Running text
     9. Type pairings
    10. Utilities
    11. Style guide page
    12. Entry pages: studies, guides and apps
    13. Print
   ========================================================================== */


/* 1. Fonts ------------------------------------------------------------------
   Self-hosted, so every character in the practice's notation is served
   (± µ ≥ ≤ ′ ″ ² ³ × ° – —). Licences sit beside each font's files.       */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/Archivo-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/Archivo-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/Archivo-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/OpenSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/OpenSans-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral/Spectral-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral/Spectral-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif/IBMPlexSerif-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif/IBMPlexSerif-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Permanent Marker";
  src: url("../fonts/permanent-marker/PermanentMarker-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}


/* 2. Design tokens ---------------------------------------------------------
   Change a colour or a face here and it changes everywhere.              */

:root {
  color-scheme: light;

  /* Direction D, structure. Contrast ratios are against the page base. */
  --base:    #F2F1EE;   /* page background */
  --raised:  #E8E6E1;   /* panels and cards */
  --ink:     #1A1A18;   /* text, 15.4:1 */
  --muted:   #6B6A66;   /* secondary text, 4.8:1 on the base and 4.3:1
                           on raised; kept as is, cards included */
  --rule:    #DBD8D1;   /* hairlines */

  /* Direction D, sections */
  --apps:       #0B63C5;  /* cobalt, 5.2:1 */
  --research:   #C2262A;  /* vermilion, 5.2:1 */
  --guides:     #B8860B;  /* ochre, 2.9:1; used for text, cards
                             included, and for bars */
  --training:   #1F7A4D;  /* viridian, 4.7:1 */
  --consulting: #5B3A9E;  /* violet, 7.3:1 */

  /* Brighter versions and pale tints, approved 11 September 2026.
     The brighter versions are for lines and blocks of colour, never for
     running text. The tints are for highlighting; black text reads
     clearly on all five. All five brighter versions together in large
     blocks read as Google, so use them sparingly. */
  --apps-bright:       #2B8AFF;   --apps-tint:       #D2E5FF;
  --research-bright:   #FC4544;   --research-tint:   #FFD9D4;
  --guides-bright:     #F4BA0E;   --guides-tint:     #F6E0BA;
  --training-bright:   #3CA46E;   --training-tint:   #C6EFD4;
  --consulting-bright: #815CD4;   --consulting-tint: #E4DEFF;

  /* The current page's territory colour. Ink unless a section sets it. */
  --section: var(--ink);

  /* Type, website and apps context */
  --font-heading:       "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-text:          "Open Sans", "Segoe UI", system-ui, sans-serif;
  --font-ui:            "Open Sans", "Segoe UI", system-ui, sans-serif;
  --font-serif-heading: "Spectral", Georgia, "Times New Roman", serif;
  --font-serif-text:    "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-wordmark:      "Permanent Marker", "Archivo", sans-serif;

  --heading-weight:   700;
  --heading-tracking: -0.018em;

  /* Sizes. Headings scale with the window between phone and desktop. */
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --h1: clamp(2.1rem, 1.45rem + 2.8vw, 3.25rem);
  --h2: clamp(1.55rem, 1.25rem + 1.3vw, 2.1rem);
  --h3: 1.3rem;
  --h4: 1.0625rem;

  --measure: 68ch;                    /* longest comfortable text line */
  --wrap:    72rem;                   /* widest the page content goes */
  --gutter:  clamp(1rem, 4vw, 2.5rem);
}

.section-apps       { --section: var(--apps);       --section-bright: var(--apps-bright);       --section-tint: var(--apps-tint); }
.section-research   { --section: var(--research);   --section-bright: var(--research-bright);   --section-tint: var(--research-tint); }
.section-guides     { --section: var(--guides);     --section-bright: var(--guides-bright);     --section-tint: var(--guides-tint); }
.section-training   { --section: var(--training);   --section-bright: var(--training-bright);   --section-tint: var(--training-tint); }
.section-consulting { --section: var(--consulting); --section-bright: var(--consulting-bright); --section-tint: var(--consulting-tint); }


/* 3. Base elements ---------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  font-kerning: normal;
  font-synthesis: none;   /* never fake a bold or italic the font lacks */

  /* keeps the footer at the bottom of the window on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.08; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -0.01em; }
h4 { font-size: var(--h4); letter-spacing: 0; }

p, ul, ol, dl, blockquote, table, figure { margin: 0 0 1em; }
p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

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

strong, b { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}


/* 4. Layout ----------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main {
  display: block;
  flex: 1 0 auto;
  padding-bottom: 4rem;
}
.site-main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--base);
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }


/* 5. Header, wordmark and navigation --------------------------------------- */

.site-header { border-bottom: 1px solid var(--rule); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 0.9rem;
}

/* Permanent Marker, still to be reviewed (type system, open item). */
.wordmark {
  font-family: var(--font-wordmark);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.35rem;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each item carries its own section colour, shown only on hover and on
   the page you are in, so the five never appear together at full
   strength outside the home page. */
.site-nav__link {
  --accent: var(--ink);
  display: inline-block;
  padding-block: 0.55rem 0.4rem;
  border-bottom: 3px solid transparent;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.975rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
.site-nav__link[data-section="apps"]       { --accent: var(--apps); }
.site-nav__link[data-section="research"]   { --accent: var(--research); }
.site-nav__link[data-section="guides"]     { --accent: var(--guides); }
.site-nav__link[data-section="training"]   { --accent: var(--training); }
.site-nav__link[data-section="consulting"] { --accent: var(--consulting); }

.site-nav__link:hover,
.site-nav__link[aria-current] { border-bottom-color: var(--accent); }

/* Windows high-contrast mode repaints transparent borders, which would
   underline every item; keep the underline for the current page only. */
@media (forced-colors: active) {
  .site-nav__link { border-bottom-color: Canvas; }
  .site-nav__link:hover,
  .site-nav__link[aria-current] { border-bottom-color: LinkText; }
}

@media (max-width: 36rem) {
  .site-header__inner { padding-block: 0.75rem 0.25rem; }
  .site-nav { width: 100%; }
  .site-nav__list { gap: 0 1.1rem; }
}


/* 6. Footer ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.75rem 2.5rem;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--ink); }
.site-footer__legal span { white-space: nowrap; }


/* 7. Page head and section markers ------------------------------------------
   The bar above each page title is the territory marker: it takes the
   section's colour, or ink on pages outside the five sections.          */

.page-head {
  max-width: 52rem;
  padding-block: clamp(2.25rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.page-head::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 0.375rem;
  margin-bottom: 1.5rem;
  background: var(--section);
}
.page-title { margin-bottom: 0.35em; }
.page-lede {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.6vw, var(--text-lg));
  line-height: 1.5;
  color: var(--muted);
}


/* 8. Running text ----------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.35em; }

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--rule);
}

.table-scroll { overflow-x: auto; margin: 0 0 1.5em; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums lining-nums;
}
.prose th,
.prose td {
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.prose th {
  border-bottom-color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
}
.prose .num { text-align: right; }
.prose td:first-child,
.prose .num { white-space: nowrap; }

figcaption, .caption {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
}


/* 9. Type pairings -----------------------------------------------------------
   Sans over sans (Archivo over Open Sans) is the default and needs no
   class. Add one of these to a page or block to switch pairing.
   Interface text (menus, table headers, captions) stays Open Sans.      */

/* Sans over serif: Archivo headings over IBM Plex Serif running text. */
.pairing-sans-serif {
  --font-text: var(--font-serif-text);
  font-family: var(--font-text);
}

/* Serif over sans: Spectral headings over Open Sans running text. */
.pairing-serif-sans {
  --font-heading: var(--font-serif-heading);
  --heading-weight: 600;
  --heading-tracking: -0.01em;
}


/* 10. Utilities ------------------------------------------------------------- */

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

/* Archivo's figures are proportional by default; this lines them up. */
.tnum { font-variant-numeric: tabular-nums; }


/* 11. Style guide page -------------------------------------------------------
   Used only by /styleguide/, the review page for this stylesheet.       */

.sg-block { padding-block: 2.5rem 0.5rem; border-top: 1px solid var(--rule); }
.sg-block:first-of-type { border-top: 0; }

.sg-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sg-note { max-width: var(--measure); color: var(--muted); }
.sg-note strong { color: var(--ink); }

.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
.sg-swatch { margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; }
.sg-swatch__chip {
  height: 4.5rem;
  margin-bottom: 0.6rem;
  border: 1px solid rgba(26, 26, 24, 0.12);
}
.sg-swatch__name { display: block; font-weight: 600; }
.sg-swatch__value { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
.sg-swatch__fail { display: block; color: var(--research); font-weight: 600; }

.sg-face { padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.sg-face:last-child { border-bottom: 0; }
.sg-face__name { margin: 0 0 0.4rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.1; }
.sg-face__glyphs { margin: 0.25rem 0; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); letter-spacing: 0.06em; line-height: 1.35; }
.sg-face__sample { margin: 0.35rem 0 0; font-size: 1.125rem; }
.sg-face__role { margin: 0.75rem 0 0; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--muted); }

.sg-pairings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* lets wide tables scroll inside */
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.sg-pairing { padding: 1.5rem clamp(1rem, 3vw, 2rem) 1rem; border: 1px solid var(--rule); }
.sg-pairing > .sg-label { margin-bottom: 1.25rem; }
.sg-pairing > .sg-label + h3 { margin-top: 0; }

.sg-markers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem 2rem;
  margin-top: 1.25rem;
}
.sg-marker .page-head { padding-block: 0.5rem; }
.sg-marker .page-head::before { margin-bottom: 0.9rem; }
.sg-marker h3 { margin: 0; }

.sg-notation { max-width: var(--measure); padding-left: 1.25em; }
.sg-notation li + li { margin-top: 0.5em; }
.sg-notation code {
  font-family: var(--font-ui);
  font-size: 0.9em;
  padding: 0.05em 0.35em;
  background: var(--raised);
}

.sg-wordmark {
  margin: 0.5rem 0 0.75rem;
  font-family: var(--font-wordmark);
  font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
  line-height: 1.1;
}

.sg-templates { max-width: var(--measure); margin: 1.25rem 0 0; padding: 0; list-style: none; }
.sg-templates li { padding-block: 0.6rem; border-bottom: 1px solid var(--rule); }
.sg-templates li:first-child { border-top: 1px solid var(--rule); }
.sg-templates a { font-weight: 600; }
.sg-templates span { display: block; color: var(--muted); font-size: var(--text-sm); }


/* 12. Entry pages: studies, guides and apps -----------------------------------
   Every study, guide and app page is built from one of the three templates
   in _layouts/. The section colour appears only in the small label above
   the title, the bar above that and thin rules, never behind text.
   Every block on an entry page shares one width, 40rem, so their right
   edges line up whatever the font size inside.                          */

.entry-head .page-title { margin-bottom: 0.25em; }

.entry-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--section);
}
.entry-kicker a { color: inherit; text-decoration: none; }
.entry-kicker a:hover { text-decoration: underline; }

.entry-byline {
  margin: 0.5rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  line-height: 1.4;
}
.entry-author { display: inline-block; }   /* keeps a name with its affiliation */
.entry-affiliation { color: var(--muted); }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin: 0.9rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
}
.entry-meta a { color: var(--ink); }

/* Status words such as In progress, Published or Beta. */
.status {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

.entry-lede { margin-top: 1.25rem; }
.entry-lede p:last-child { margin-bottom: 0; }

.entry-warning {
  margin: 1rem 0 0;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--research);
}

/* Small capital labels over the summary, the pass threshold and the like. */
.entry-label {
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}

/* The plain-language summary: the block a funder reads first. */
.entry-summary {
  max-width: 40rem;
  margin: 0 0 2.25rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--section);
}
.entry-summary p {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}
.entry-summary p:last-child { margin-bottom: 0; }

.entry-facts {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
  gap: 0.55rem 1.75rem;
  max-width: 40rem;
  margin: 0 0 2.25rem;
  padding-block: 1rem;
  border-block: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.entry-facts dt { color: var(--muted); }
.entry-facts dd { margin: 0; min-width: 0; }

/* The pass threshold, stated before any results exist. */
.entry-callout {
  max-width: 40rem;
  margin: 0 0 2.25rem;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--section);
  background: var(--raised);
}
.entry-callout .entry-label { color: var(--ink); }
.entry-callout p:last-child { margin-bottom: 0; }
.entry-callout__note { font-family: var(--font-ui); font-size: var(--text-sm); }

.entry-pending {
  max-width: 40rem;
  margin: 0 0 2.25rem;
  font-family: var(--font-ui);
  font-weight: 600;
}

.entry-body { max-width: 40rem; margin-bottom: 1rem; }

/* Tables written in an entry's text: labels may wrap, and a table too wide
   for a phone scrolls sideways inside itself rather than moving the page. */
.entry-body table { display: block; max-width: 100%; overflow-x: auto; }
.entry-body td:first-child { white-space: normal; }
.entry-body td[style*="right"] { white-space: nowrap; }   /* number columns */
.entry-section { max-width: 40rem; margin-top: 2.5rem; }
.entry-section > h2:first-child { margin-top: 0; }

.entry-links { margin: 0; padding: 0; list-style: none; }
.entry-links li { padding-block: 0.6rem; border-bottom: 1px solid var(--rule); }
.entry-links li:first-child { border-top: 1px solid var(--rule); }
.entry-links a { font-weight: 600; }
.entry-links__meta {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
}

.entry-cite {
  max-width: 40rem;
  margin-top: 3rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.entry-cite p { margin: 0; overflow-wrap: anywhere; }

.entry-download { max-width: 40rem; margin: 0 0 2.25rem; }
.entry-download p { margin: 0; }
.entry-download .entry-download__note {
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Download and store buttons: outlined in the section colour, never filled. */
.button {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 2px solid var(--section);
  border-radius: 0.25rem;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.button:hover { background: var(--raised); }
.store-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* Numbered steps in guides, with the numbers in the heading face. */
.guide-body > ol { padding-left: 0; list-style: none; counter-reset: step; }
.guide-body > ol > li {
  position: relative;
  margin-top: 1.75rem;
  padding-left: 2.75rem;
  counter-increment: step;
}
.guide-body > ol > li:first-child { margin-top: 0; }
.guide-body > ol > li::before {
  content: counter(step);
  position: absolute;
  top: -0.2rem;
  left: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.guide-body img {
  display: block;
  width: 100%;
  max-width: 12.5rem;
  margin: 0.75rem 0 0.5rem;
  border: 1px solid var(--rule);
}

.trouble { margin: 0; }
.trouble dt { margin-top: 1.25rem; font-weight: 600; }
.trouble dt:first-child { margin-top: 0; }
.trouble dd { margin: 0.3rem 0 0; }
.trouble dd p:last-child { margin-bottom: 0; }

.app-head { display: flex; align-items: flex-start; gap: 1.25rem; }
.app-head__text { min-width: 0; }
.app-icon { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; }

.data-use {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem 2.5rem;
}
.data-use h3 { margin: 0 0 0.5rem; font-size: var(--h4); }
.data-use ul { margin: 0; padding-left: 1.2em; }
.data-use li + li { margin-top: 0.35em; }

/* The notice on template samples, which come down before launch. */
.sample-notice {
  max-width: 40rem;
  margin: 0 0 2.25rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

@media (max-width: 36rem) {
  .entry-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .entry-facts dd + dt { margin-top: 0.7rem; }
  .app-head { gap: 1rem; }
  .app-icon { width: 3.5rem; height: 3.5rem; border-radius: 0.85rem; }
}


/* 14. Home page and section indexes -------------------------------------------
   The home page is the one page where several section colours appear at
   full strength together. Every other page carries one colour only.
   Index rows and cards reuse the same parts, so a study, a guide and an
   app all list the same way.                                             */

/* --- The home page opening ------------------------------------------------ */

.home-head { max-width: 46rem; padding-block: clamp(2.25rem, 7vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem); }
.home-head::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 0.375rem;
  margin-bottom: 1.5rem;
  background: var(--ink);
}
.home-statement { margin: 0; }

/* --- The four entry blocks ------------------------------------------------- */

.home-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 0 clamp(3rem, 7vw, 4.5rem);
  padding: 0;
  list-style: none;
}

.home-block {
  position: relative;
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 0.375rem solid var(--section);
}
.home-block[data-section="apps"]       { --section: var(--apps); }
.home-block[data-section="research"]   { --section: var(--research); }
.home-block[data-section="guides"]     { --section: var(--guides); }
.home-block[data-section="training"]   { --section: var(--training); }
.home-block[data-section="consulting"] { --section: var(--consulting); }

.home-block__title { margin: 0 0 0.35rem; font-size: var(--h3); }

/* One real link per block, stretched so the whole block is the target. */
.home-block__title a { text-decoration: none; }
.home-block__title a::after { content: ""; position: absolute; inset: 0; }
.home-block:hover .home-block__title a { text-decoration: underline; text-decoration-thickness: 2px; }
.home-block:focus-within { outline: 2px solid var(--ink); outline-offset: 0.75rem; }
.home-block__title a:focus-visible { outline: none; }

.home-block__line { margin: 0; max-width: 26rem; color: var(--muted); }

@media (max-width: 44rem) {
  .home-blocks { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* --- A block on the home page introducing one thing ------------------------ */

.home-panel {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--raised);
}
.home-panel > :last-child { margin-bottom: 0; }
.home-panel__label {
  margin: 0 0 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Index lists: research, guides, and anything else listed in rows ------- */

.index-intro { max-width: 40rem; margin-bottom: 2.5rem; }
.index-intro > :last-child { margin-bottom: 0; }

.index-list { max-width: 46rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.index-list:last-child { margin-bottom: 0; }

.index-item { padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
.index-item:first-child { border-top: 1px solid var(--rule); }

.index-item__title { margin: 0 0 0.3rem; font-size: var(--h3); }
.index-item__title a { text-decoration-thickness: 1px; }

.index-item__lede { margin: 0.4rem 0 0; max-width: 40rem; color: var(--muted); }

/* The line of small facts under an index title: kind, date, apps, status. */
.index-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--muted);
}
.index-meta__kind { font-weight: 600; color: var(--section); }
.index-meta time { font-variant-numeric: tabular-nums; }

/* Groups on the Guides index: one per stage of the work. */
.index-group { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }
.index-group:last-child { margin-bottom: 0; }
.index-group__head { max-width: 40rem; margin-bottom: 1.25rem; }
.index-group__title { margin: 0 0 0.3rem; }
.index-group__line { margin: 0; color: var(--muted); }

/* --- Index cards: the Apps grid -------------------------------------------- */

.index-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1.25rem;
  background: var(--raised);
  border-top: 0.375rem solid var(--section);
}
.index-card__icon { width: 3rem; height: 3rem; border-radius: 0.75rem; }
.index-card__title { margin: 0; font-size: var(--h3); }
.index-card__title a { text-decoration: none; }
.index-card__title a::after { content: ""; position: absolute; inset: 0; }
.index-card:hover .index-card__title a { text-decoration: underline; text-decoration-thickness: 2px; }
.index-card:focus-within { outline: 2px solid var(--ink); outline-offset: 0.4rem; }
.index-card__title a:focus-visible { outline: none; }
.index-card__line { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.index-card .index-meta { margin-top: auto; padding-top: 0.4rem; }

/* --- Nothing here yet ------------------------------------------------------ */

.index-empty {
  max-width: 40rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px dashed var(--rule);
  color: var(--muted);
}
.index-empty > :last-child { margin-bottom: 0; }
.index-empty strong { color: var(--ink); }

/* The quieter version, for one empty group inside a section that has
   other groups. A dashed box four times down a page is too much weight
   for "not yet". */
.index-none { max-width: 40rem; margin: 0; color: var(--muted); }

/* A heading that opens a new block on a section page needs air above it.
   Headings carry no top margin by default, so without this the next
   heading sits hard against the block before it. */
.index-intro + h2,
.index-empty + h2,
.index-list + h2,
.index-cards + h2,
.offer-list + h2,
.signup + h2 { margin-top: clamp(2.5rem, 6vw, 3.5rem); }

/* --- Plain blocks on the Consulting and About pages ------------------------ */

.offer-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 52rem;
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
  padding: 0;
  list-style: none;
}
.offer { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.offer h3 { margin: 0 0 0.35rem; }
.offer p { margin: 0; color: var(--muted); }
.offer p + p { margin-top: 0.5rem; }
.offer__for { font-family: var(--font-ui); font-size: var(--text-sm); }

/* --- The signup and waitlist block ----------------------------------------- */

.signup {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rule);
  background: var(--raised);
}
.signup h2 { margin: 0 0 0.4rem; font-size: var(--h3); }
.signup p { margin: 0 0 1rem; max-width: 34rem; color: var(--muted); }
.signup .button { --section: var(--ink); }
.signup__note { margin: 0.9rem 0 0; font-family: var(--font-ui); font-size: var(--text-sm); }

/* --- A note to Sean, shown only while the site is in preview --------------- */

.editor-note {
  max-width: 46rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border-left: 0.375rem solid var(--research);
  background: var(--raised);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.editor-note > :last-child { margin-bottom: 0; }
.editor-note strong { font-weight: 600; }
.editor-note__label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--research);
}

/* --- The review list, shown only while the site is in preview -------------- */

.review-list {
  max-width: 46rem;
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
.review-list h2 { margin: 0 0 0.3rem; font-size: var(--h4); }
.review-list > p { margin: 0 0 0.75rem; color: var(--muted); }
.review-list ul { margin: 0; padding-left: 1.1em; }
.review-list li { margin-bottom: 0.3rem; }

@media print {
  .signup, .editor-note, .review-list { display: none; }
}



/* 15. The splash --------------------------------------------------------------
   Two seconds of every typeface the site will never use, resolving into the
   one it does. Settled 12 September 2026: 200 ms a step, ten colours in
   spread order, each face once.

   All ten faces carry FLSplash names because they are cut down to the ten
   characters in "fun.limited", and eight of the ten are licensed with a
   Reserved Font Name that a modified version may not use. The original face
   each one came from is named beside it below, and in the README in
   /assets/fonts/splash/. Do not rename them back.                        */

@font-face { font-family: "FLSplash Static";       /* Rubik Glitch    */ src: url("../fonts/splash/static.woff2")      format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Dimensional";  /* Bungee Shade    */ src: url("../fonts/splash/dimensional.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Deco";         /* Monoton         */ src: url("../fonts/splash/deco.woff2")        format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Pixel";        /* Press Start 2P  */ src: url("../fonts/splash/pixel.woff2")       format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Typewriter";   /* Special Elite   */ src: url("../fonts/splash/typewriter.woff2")  format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Script";       /* Homemade Apple  */ src: url("../fonts/splash/script.woff2")      format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Heavy";        /* Stalinist One   */ src: url("../fonts/splash/heavy.woff2")       format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Drip";         /* Creepster       */ src: url("../fonts/splash/drip.woff2")        format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Poster";       /* Anton           */ src: url("../fonts/splash/poster.woff2")      format("woff2"); font-display: block; }
@font-face { font-family: "FLSplash Terminal";     /* Space Mono      */ src: url("../fonts/splash/terminal.woff2")    format("woff2"); font-display: block; }

/* While the splash is up the page underneath must not scroll away behind it. */
.splash-open { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--base);
  transform: translateY(0);
}
.splash.is-lifting {
  transform: translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Permanent Marker in ink is the resting state, and the state it lands on.
   It shows from the first frame, so a visitor whose faces never arrive sees a
   clean wordmark rather than a broken sequence. */
.splash__mark {
  margin: 0;
  font-family: var(--font-wordmark);
  font-size: clamp(2.25rem, 1.2rem + 6vw, 6rem);
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  text-align: center;
}

/* Nothing here should ever reach a printer. */
@media print { .splash { display: none; } }


/* 13. Print -------------------------------------------------------------------
   Studies and guides must print cleanly and stay citable: no menu, black
   text on white, and web addresses written out after links.             */

@media print {
  :root { --base: #fff; --raised: #fff; --muted: #444; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .skip-link, .site-nav, .store-links { display: none; }
  .site-header { border-bottom: 1px solid #999; }
  .site-main { padding-bottom: 0; }
  .page-head { padding-block: 1rem 0.75rem; }
  a { color: inherit; text-decoration: none; }
  .entry-body a[href^="http"]::after,
  .entry-callout a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  .page-head::before, .entry-summary, .entry-callout, .entry-kicker {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  h1, h2, h3, h4 { break-after: avoid; }
  figure, img, table, .entry-callout, .entry-cite, .entry-facts, .trouble dd { break-inside: avoid; }
}