@charset "UTF-8";
/* scss/default.scss — all-grid entry point

   Every file is loaded with @use, so CodeKit (and any other tool) can see it and
   recompile this file when it changes.
   The ORDER below is the cascade: when two selectors are equally specific, the later
   file wins. So keep selectors flat (one class, BEM), and put each site partial
   straight after the kit folder it extends. */
/* scss/1-base/_index.scss — tokens + element selectors (and the b_ prose helpers) */
/* scss/1-base/_b_tokens.scss
   Design tokens as custom properties. Sites override these (see sites/artedomus/_tokens.scss);
   components should only ever read tokens, never raw values. */
:root {
  /* Type ---------------------------------------------------------------- */
  --font-sans: system-ui, sans-serif;
  --font-serif: Baskerville, serif;
  --font-mono: ui-monospace, monospace;
  --font-body: var(--font-sans);
  --font-heading: var(--font-body);
  --font-input: var(--font-body);
  --font-normal: 400;
  --font-heavy: 600;
  --font-size: clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem);
  --line-height: 1.5;
  --heading-line-height: 1.15;
  --type-measure: 84ch;
  --h0-min: 2rem;
  --h0-fluid: min(11vmin, 9rem);
  --h0-max: 5rem;
  --h1: 3.052em;
  --h2: 2.441em;
  --h3: 1.953em;
  --h4: 1.563em;
  --h5: 1.25em;
  --h6: 1em;
  --small: .875em;
  --smallest: .75em;
  /* Space ---------------------------------------------------------------
     One root line-height. `rlh`, not `lh`: lh resolves wherever it's used, so
     padding inside an h1 would balloon; rlh is the same rhythm everywhere. */
  --base-unit: 1rlh;
  --base-unit--ss: calc(var(--base-unit) / 4);
  --base-unit--s: calc(var(--base-unit) / 2);
  --base-unit--b: calc(var(--base-unit) * 2);
  --base-unit--bb: calc(var(--base-unit) * 4);
  --base-unit--neg: calc(var(--base-unit) * -1);
  --gap: var(--base-unit);
  --gutter: var(--base-unit);
}
@media (width < 960px) {
  :root {
    --gap: var(--base-unit--s);
    --gutter: var(--base-unit--s);
  }
}
:root {
  /* Viewport widths ---------------------------------------------------------------
  See _breakpoints.scss */
  --width-desktop: 1280px;
  --width-large: 1720px;
  /* Lines, motion, stacking --------------------------------------------- */
  --border-width: 2px;
  --duration: .3s;
  --ease: ease;
  --z-sticky: 100;
  --z-menu: 200;
  --z-overlay: 1000;
}

/* scss/1-base/_b_colours.scss
   Two tiers:
   1. Palette  — raw colours, named for what they ARE: Le Corbusier's 63
      (0-settings/_corbu.scss: --bleu-outremer-31, --jaune-vif …) plus plain white and black.
   2. Semantic — named for what they DO (--clr-text, --clr-bg). Components read
      only these, and theme scopes (.bg--brand) swap only these.
   Sites choose in site/_colours.scss: --brand: var(--jaune-vif); */
:root {
  /* 1. Palette ---------------------------------------------------------- */
  --blanc: #eadbc0;
  --gris-fonce-31: #5e6061;
  --gris-31: #929494;
  --gris-moyen: #a7a8a5;
  --gris-clair-31: #bcbbb6;
  --bleu-outremer-31: #4d6aa8;
  --outremer-moyen: #8fabc9;
  --outremer-clair: #abbdc8;
  --outremer-pale: #b6c6ce;
  --outremer-gris: #d9e1dd;
  --bleu-ceruleen-31: #3e6e90;
  --ceruleen-vif: #679dae;
  --ceruleen-moyen: #8ab5ba;
  --ceruleen-clair: #a8c4c1;
  --ceruleen-pale: #c6d5cc;
  --vert-anglais: #406e58;
  --vert-anglais-clair: #91afa1;
  --vert-anglais-pale: #becbb7;
  --vert-fonce: #3e6f42;
  --vert-31: #7fa25a;
  --vert-clair: #abc17a;
  --vert-jaune-clair: #c4d39b;
  --ocre: #eacfa6;
  --orange: #d46c40;
  --orange-clair: #dc8d67;
  --orange-pale: #eacfb9;
  --rouge-vermillon-31: #9b3738;
  --rose-pale: #e6cdbf;
  --rouge-carmin: #8f3a43;
  --rouge-rubia: #943a4d;
  --rose-clair: #d6afa6;
  --ocre-rouge: #8b4d3e;
  --ocre-rouge-moyen: #cd9886;
  --ocre-rouge-clair: #dbbeaa;
  --terre-sienne-brulee-31: #68443c;
  --terre-sienne-brique: #b67b66;
  --terre-sienne-claire-31: #d8b29a;
  --terre-sienne-pale: #e2cbb5;
  --terre-ombre-brulee-31: #4c423d;
  --ombre-brulee-claire: #b7a392;
  --ombre-naturelle-31: #5a5550;
  --ombre-naturelle-moyenne: #928a7e;
  --ombre-naturelle-claire: #b7ac9d;
  --rouge-vermillon-59: #ac443a;
  --blanc-ivoire: #eae4d7;
  --rose-vif: #dba3af;
  --terre-sienne-brulee-59: #744438;
  --noir-ivoire: #3a3b3b;
  --vert-olive-vif: #b8a136;
  --vert-59: #428f70;
  --gris-59: #81868b;
  --terre-ombre-brulee-59: #403c3a;
  --bleu-outremer-59: #3957a5;
  --ocre-jaune-clair: #dbb07f;
  --rubis: #74393b;
  --bleu-ceruleen-59: #7aa7cb;
  --gris-clair-59: #92969a;
  --terre-sienne-claire-59: #ddbf99;
  --ombre-naturelle-59: #45423e;
  --orange-vif: #c45e3a;
  --bleu-outremer-fonce: #313d6b;
  --gris-fonce-59: #60646a;
  --jaune-vif: #f2bb1d;
  --white: hsl(0 0% 100%);
  --black: hsl(0 0% 12%);
  --brand: var(--black);
  /* 2. Semantic --------------------------------------------------------- */
  --clr-text: var(--black);
  --clr-bg: var(--white);
  --clr-brand: var(--brand);
  --clr-muted: var(--gris-59);
  --clr-surface: var(--blanc-ivoire);
  --clr-border: currentcolor;
  --clr-success: var(--vert-31);
  --clr-warning: var(--jaune-vif);
  --clr-error: var(--rouge-vermillon-59);
  --clr-scrim: linear-gradient(
    to bottom,
    transparent,
    color-mix(in oklch, var(--black) 38%, transparent)
  );
  color-scheme: light;
}

/* scss/1-base/_b_reset.scss — merged from v1 _b_reset and all-grid _normalise */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
ul, ol, dl, dd,
pre {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}

ul,
ol {
  padding: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

html:focus-within {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* scss/1-base/_b_body.scss */
html {
  font-size: var(--font-size);
  line-height: var(--line-height);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-weight: var(--font-normal);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

strong,
b,
dt,
th {
  font-weight: var(--font-heavy);
}

small {
  font-size: var(--small);
}

hr {
  border: 0;
  block-size: var(--border-width);
  background-color: currentcolor;
}

::selection {
  background-color: var(--clr-brand);
  color: var(--clr-bg);
}

:focus-visible {
  outline: var(--border-width) solid var(--clr-brand);
  outline-offset: var(--border-width);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--small);
}

pre {
  overflow: auto;
  white-space: pre-wrap;
}

/* scss/1-base/_b_headings.scss — elements only; the .hN-style classes live in 2-atoms */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
  line-height: var(--heading-line-height);
}

h2 {
  font-size: var(--h2);
  line-height: var(--heading-line-height);
}

h3 {
  font-size: var(--h3);
  line-height: var(--heading-line-height);
}

h4 {
  font-size: var(--h4);
  line-height: var(--heading-line-height);
}

h5 {
  font-size: var(--h5);
  line-height: var(--heading-line-height);
}

h6 {
  font-size: var(--h6);
  line-height: var(--heading-line-height);
  font-weight: var(--font-heavy);
}

/* scss/1-base/_b_links.scss */
a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.15em;
}
a:hover {
  text-decoration-line: underline;
}

/* scss/1-base/_b_media.scss */
figure > img {
  inline-size: 100%;
  background-color: var(--clr-surface);
  color: transparent;
}

figcaption {
  margin-block-start: var(--base-unit--s);
  font-size: var(--small);
  max-inline-size: var(--type-measure);
}

video,
iframe {
  inline-size: 100%;
  border: 0;
}

video {
  object-fit: cover;
}

/* scss/1-base/_b_forms.scss — bare elements; styled buttons are .a_button */
label {
  display: inline-block;
}

input,
textarea,
select {
  font-family: var(--font-input);
  padding: var(--base-unit--ss) var(--base-unit--s);
  border: var(--border-width) solid var(--clr-border);
  border-radius: 0;
  background-color: transparent;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--border-width) solid var(--clr-brand);
  outline-offset: var(--border-width);
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--clr-muted);
}

textarea {
  inline-size: 100%;
  max-block-size: 75vh;
  field-sizing: content;
  min-block-size: calc(var(--base-unit) * 4);
}

select {
  appearance: none;
  padding-inline-end: var(--base-unit--b);
  background-repeat: no-repeat;
  background-position: right var(--base-unit--s) center;
  background-size: 0.75em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 7'%3E%3Cpolyline fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' points='0 .6 6.3 6.5 12.6 .6'/%3E%3C/svg%3E");
}

button {
  cursor: pointer;
  padding: 0;
  border: 0;
  background: transparent;
}

[type=submit] {
  cursor: pointer;
}

[type=checkbox],
[type=radio] {
  margin: 0;
  accent-color: var(--clr-brand);
}

@media (width < 720px) {
  [type=text],
  [type=email],
  [type=search],
  [type=tel],
  [type=url] {
    inline-size: 100%;
  }
}

/* scss/1-base/_b_tables.scss */
table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--small);
}

tr {
  border-block-end: var(--border-width) solid var(--clr-border);
}

th,
td {
  text-align: start;
  vertical-align: baseline;
  padding: var(--base-unit--ss) var(--base-unit--s) var(--base-unit--ss) 0;
}

/* scss/1-base/_b_details.scss
   +/− marker from v1; swap the glyphs per site with --summary-closed / --summary-open
   (e.g. an icon-font codepoint, as all-grid does with core-line). */
summary {
  --summary-closed: "+";
  --summary-open: "−";
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--base-unit);
}
summary::-webkit-details-marker, summary::marker {
  display: none;
}
summary::after {
  content: var(--summary-closed);
  font-weight: var(--font-normal);
  font-size: 4em;
  transition: transform var(--duration) var(--ease);
}
summary:hover::after {
  transform: scale(1.5);
}
details[open] > summary {
  margin-block-end: var(--base-unit--s);
}
details[open] > summary::after {
  content: var(--summary-open);
}

details[open] {
  padding-block-end: var(--base-unit);
}

/* scss/1-base/_b_definition-list.scss */
dl {
  overflow: auto;
}

dt {
  clear: left;
  font-weight: var(--font-heavy);
}

dt,
dd {
  text-indent: 0;
  float: left;
  margin-inline-end: var(--base-unit--s);
}

/* scss/1-base/_b_typeset.scss
   .b_typeset — long-form prose wrapper for TXP body/excerpt output.
   Flow spacing (owl selector) instead of per-element margins, so whatever
   Textile produces gets consistent rhythm. */
.b_typeset {
  --flow-space: var(--base-unit);
}
.b_typeset > * + * {
  margin-block-start: var(--flow-space);
}
.b_typeset > :is(h2, h3, h4) {
  --flow-space: var(--base-unit--b);
}
.b_typeset > :is(h2, h3, h4, h5, h6) + * {
  --flow-space: var(--base-unit--s);
}
.b_typeset > :is(p, ul, ol, dl, blockquote, pre, table, details) {
  max-inline-size: var(--type-measure);
}
.b_typeset a:not([class]) {
  text-decoration-line: underline;
}
.b_typeset ul,
.b_typeset ol {
  padding-inline-start: var(--base-unit);
}
.b_typeset ul {
  list-style-type: square;
}
.b_typeset li + li {
  margin-block-start: var(--base-unit--ss);
}
.b_typeset blockquote {
  font-family: var(--font-serif);
  font-size: var(--h5);
  padding-inline-start: var(--base-unit);
}
.b_typeset hr {
  margin-block: var(--base-unit--b);
}
.b_typeset--lede {
  font-size: var(--h4);
  line-height: 1.35;
}
@media (width >= 720px) {
  .b_typeset--columns {
    columns: 2 36ch;
    column-gap: var(--base-unit--b);
  }
}

.b_small {
  font-size: var(--small);
}

.b_smallest {
  font-size: var(--smallest);
}

.b_muted {
  color: var(--clr-muted);
}

.b_centered {
  text-align: center;
}

.b_caps {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--smallest);
}

.b_lc {
  text-transform: lowercase;
}

/* site/_tokens.scss
   Site overrides of kit tokens. Loaded straight after the kit's base, so these win.*/
:root {
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* site/_colours.scss
   This site's colour choices. The kit (1-base/_b_colours.scss) has already written
   Le Corbusier's palette as custom properties, so pick by name. Browse them at
   /themes/all-grid/corbu.html, or in kit/0-settings/_corbu.scss.
   Loaded after the kit's base, so these win. Only set what differs from the kit.

   While designing, you can try colours straight in your browser’s Inspector.
   Change --brand: var(--black) to var(--rouge-rubia) on :root and the whole
   site follows, because every Corbusier name is already in the CSS.
   When a design settles, list the colours you used in
   $corbu-use (scss/kit/0-settings/_corbu.scss), then reload corbu.html.
   Anything hatched has been trimmed out, which makes it easy to check you
   haven’t dropped one you still need.*/
/* scss/2-atoms/_index.scss */
/* scss/2-atoms/_a_bg.scss
   Theme scopes. A scope only swaps SEMANTIC tokens; everything inside follows —
   text, borders (currentcolor), focus rings, the logo (--clr-brand).
   This replaces every `.bg--brand & { … }` override in v1: components never need
   to know which scope they're in.

   Note: a token that references another (e.g. --clr-bg: var(--clr-brand)) resolves
   where it's DECLARED, so scopes set values from the palette, not from other
   semantic tokens. Set every semantic token a scope's contrast depends on
   (bg, text, muted, brand), or a dark page will bleed through. */
.bg--brand {
  --clr-bg: var(--brand);
  --clr-text: var(--white);
  --clr-brand: var(--white);
  --clr-muted: color-mix(in oklch, var(--white) 70%, transparent);
  background-color: var(--clr-bg);
  color: var(--clr-text);
}

.bg--surface {
  --clr-bg: var(--blanc-ivoire);
  --clr-text: var(--black);
  --clr-muted: var(--gris-fonce-31);
  --clr-brand: var(--brand);
  background-color: var(--clr-bg);
  color: var(--clr-text);
}

.bg--dark {
  --clr-bg: var(--black);
  --clr-text: var(--white);
  --clr-brand: var(--white);
  --clr-muted: var(--gris-moyen);
  color-scheme: dark;
  background-color: var(--clr-bg);
  color: var(--clr-text);
}

/* scss/2-atoms/_a_heading.scss
   Style anything as a heading, independent of document outline.
   Written out plainly so each size can be tuned on its own. */
.a_heading {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.a_heading--ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.h0-style {
  font-size: clamp(var(--h0-min, 2rem), var(--h0-fluid, min(11vmin, 9rem)) / var(--l-cols, 1), var(--h0-max, 5rem));
  line-height: 0.9;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.h1-style {
  font-size: var(--h1);
  line-height: 1.05;
}

.h2-style {
  font-size: var(--h2);
  line-height: 1.1;
}

.h3-style {
  font-size: var(--h3);
  line-height: 1.15;
}

.h4-style {
  font-size: var(--h4);
  line-height: 1.2;
}

.h5-style {
  font-size: var(--h5);
  line-height: 1.3;
}

.h6-style {
  font-size: var(--h6);
  line-height: 1.4;
}

.p-style {
  font-size: 1rem;
  line-height: var(--line-height);
}

@media (width >= 720px) {
  .h0-style\@small {
    font-size: clamp(var(--h0-min, 2rem), var(--h0-fluid, min(11vmin, 9rem)) / var(--l-cols, 1), var(--h0-max, 5rem));
    line-height: 0.9;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .h1-style\@small {
    font-size: var(--h1);
    line-height: 1.05;
  }
  .h2-style\@small {
    font-size: var(--h2);
    line-height: 1.1;
  }
  .h3-style\@small {
    font-size: var(--h3);
    line-height: 1.15;
  }
  .h4-style\@small {
    font-size: var(--h4);
    line-height: 1.2;
  }
  .h5-style\@small {
    font-size: var(--h5);
    line-height: 1.3;
  }
  .h6-style\@small {
    font-size: var(--h6);
    line-height: 1.4;
  }
  .p-style\@small {
    font-size: 1rem;
    line-height: var(--line-height);
  }
}
@media (width >= 960px) {
  .h0-style\@medium {
    font-size: clamp(var(--h0-min, 2rem), var(--h0-fluid, min(11vmin, 9rem)) / var(--l-cols, 1), var(--h0-max, 5rem));
    line-height: 0.9;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .h1-style\@medium {
    font-size: var(--h1);
    line-height: 1.05;
  }
  .h2-style\@medium {
    font-size: var(--h2);
    line-height: 1.1;
  }
  .h3-style\@medium {
    font-size: var(--h3);
    line-height: 1.15;
  }
  .h4-style\@medium {
    font-size: var(--h4);
    line-height: 1.2;
  }
  .h5-style\@medium {
    font-size: var(--h5);
    line-height: 1.3;
  }
  .h6-style\@medium {
    font-size: var(--h6);
    line-height: 1.4;
  }
  .p-style\@medium {
    font-size: 1rem;
    line-height: var(--line-height);
  }
}
@media (width >= 1280px) {
  .h0-style\@desktop {
    font-size: clamp(var(--h0-min, 2rem), var(--h0-fluid, min(11vmin, 9rem)) / var(--l-cols, 1), var(--h0-max, 5rem));
    line-height: 0.9;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .h1-style\@desktop {
    font-size: var(--h1);
    line-height: 1.05;
  }
  .h2-style\@desktop {
    font-size: var(--h2);
    line-height: 1.1;
  }
  .h3-style\@desktop {
    font-size: var(--h3);
    line-height: 1.15;
  }
  .h4-style\@desktop {
    font-size: var(--h4);
    line-height: 1.2;
  }
  .h5-style\@desktop {
    font-size: var(--h5);
    line-height: 1.3;
  }
  .h6-style\@desktop {
    font-size: var(--h6);
    line-height: 1.4;
  }
  .p-style\@desktop {
    font-size: 1rem;
    line-height: var(--line-height);
  }
}
/* scss/2-atoms/_a_button.scss — for <button>, <a> or [type=submit] */
.a_button {
  display: inline-flex;
  align-items: center;
  gap: var(--base-unit--s);
  padding: var(--base-unit--ss) var(--base-unit--s);
  border: var(--border-width) solid var(--clr-border);
  background-color: transparent;
  color: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.a_button:hover {
  background-color: var(--clr-text);
  color: var(--clr-bg);
  text-decoration: none;
}
.a_button--solid {
  background-color: var(--clr-text);
  color: var(--clr-bg);
}
.a_button--solid:hover {
  background-color: transparent;
  color: var(--clr-text);
}
.a_button--scrim {
  --clr-text: var(--white);
  --clr-bg: var(--black);
  background-color: color-mix(in oklch, var(--black) 20%, transparent);
}
.a_button--plain {
  padding: 0;
  border: 0;
}
.a_button--plain:hover {
  background-color: transparent;
  color: inherit;
  opacity: 0.6;
}

/* scss/2-atoms/_a_image.scss — <figure class="a_image"> wrapping a TXP image */
.a_image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.a_image--contain img {
  block-size: auto;
  object-fit: contain;
}
.a_image--fold-limited img {
  max-block-size: 66vh;
}
.a_image--pan {
  overflow: hidden;
}
.a_image--hide-caption figcaption,
.a_image figcaption:empty {
  display: none;
}
@media (width >= 720px) {
  .a_image--inline {
    float: inline-end;
    clear: inline-end;
    inline-size: calc(50% - var(--base-unit--s));
    margin-inline-start: var(--base-unit);
    margin-block-end: var(--base-unit);
  }
}

/* scss/2-atoms/_a_ratio.scss
   One class family for aspect ratios (v1 had a_image--1x1 AND u_aspect-ratio--1x1).
   Children fill the box. Responsive: .a_ratio--1x1.a_ratio--gm@medium */
.a_ratio--1x1 {
  aspect-ratio: 1 / 1;
}

.a_ratio--4x3 {
  aspect-ratio: 4 / 3;
}

.a_ratio--3x2 {
  aspect-ratio: 3 / 2;
}

.a_ratio--2x3 {
  aspect-ratio: 2 / 3;
}

.a_ratio--3x4 {
  aspect-ratio: 3 / 4;
}

.a_ratio--2x1 {
  aspect-ratio: 2 / 1;
}

.a_ratio--16x9 {
  aspect-ratio: 16 / 9;
}

.a_ratio--gm {
  aspect-ratio: 1.618 / 1;
}

@media (width >= 720px) {
  .a_ratio--1x1\@small {
    aspect-ratio: 1 / 1;
  }
  .a_ratio--4x3\@small {
    aspect-ratio: 4 / 3;
  }
  .a_ratio--3x2\@small {
    aspect-ratio: 3 / 2;
  }
  .a_ratio--2x3\@small {
    aspect-ratio: 2 / 3;
  }
  .a_ratio--3x4\@small {
    aspect-ratio: 3 / 4;
  }
  .a_ratio--2x1\@small {
    aspect-ratio: 2 / 1;
  }
  .a_ratio--16x9\@small {
    aspect-ratio: 16 / 9;
  }
  .a_ratio--gm\@small {
    aspect-ratio: 1.618 / 1;
  }
}
@media (width >= 960px) {
  .a_ratio--1x1\@medium {
    aspect-ratio: 1 / 1;
  }
  .a_ratio--4x3\@medium {
    aspect-ratio: 4 / 3;
  }
  .a_ratio--3x2\@medium {
    aspect-ratio: 3 / 2;
  }
  .a_ratio--2x3\@medium {
    aspect-ratio: 2 / 3;
  }
  .a_ratio--3x4\@medium {
    aspect-ratio: 3 / 4;
  }
  .a_ratio--2x1\@medium {
    aspect-ratio: 2 / 1;
  }
  .a_ratio--16x9\@medium {
    aspect-ratio: 16 / 9;
  }
  .a_ratio--gm\@medium {
    aspect-ratio: 1.618 / 1;
  }
}
@media (width >= 1280px) {
  .a_ratio--1x1\@desktop {
    aspect-ratio: 1 / 1;
  }
  .a_ratio--4x3\@desktop {
    aspect-ratio: 4 / 3;
  }
  .a_ratio--3x2\@desktop {
    aspect-ratio: 3 / 2;
  }
  .a_ratio--2x3\@desktop {
    aspect-ratio: 2 / 3;
  }
  .a_ratio--3x4\@desktop {
    aspect-ratio: 3 / 4;
  }
  .a_ratio--2x1\@desktop {
    aspect-ratio: 2 / 1;
  }
  .a_ratio--16x9\@desktop {
    aspect-ratio: 16 / 9;
  }
  .a_ratio--gm\@desktop {
    aspect-ratio: 1.618 / 1;
  }
}
[class*=a_ratio--] > :is(img, video, iframe, picture) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* scss/2-atoms/_a_icon.scss — inline SVG icons; size follows text, colour follows currentcolor */
.a_icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  fill: currentcolor;
  flex-shrink: 0;
}
.a_icon--small {
  font-size: var(--small);
}
.a_icon--large {
  font-size: var(--h5);
}
.a_icon--muted {
  opacity: 0.5;
}
:hover > .a_icon--muted {
  opacity: 1;
}
.a_icon--flipx {
  transform: scaleX(-1);
}

/* scss/2-atoms/_a_list-bare.scss */
.a_list-bare {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* scss/3-molecules/_index.scss */
/* scss/3-molecules/_m_menu.scss
   One menu, three looks. The markup is the same for all of them (forms/misc/o_nav.txp);
   the modifier on .m_menu picks the look:

     .m_menu--inline     links in a row (the default)
     .m_menu--compact    select-like: a button showing the current section opens a dropdown
     .m_menu--overlay    a "Menu" button opens a full-page menu in big type

     .m_menu--inline@small / @medium / @desktop
                         back to inline from that width up. Replaces all-grid's two
                         headers (hamburger + desktop): class="m_menu--overlay m_menu--inline@medium"

   Markup (o_nav.txp writes it):
     nav.m_menu
       button.m_menu__toggle[popovertarget]   hidden when inline
       div.m_menu__panel[popover]             the browser opens and closes it: no script
         button.m_menu__close                 overlay only
         ul.m_menu__list > li.m_menu__child > a[aria-current="page"]

   Knobs (set on the menu, any parent, or style=""):
     --m-menu-size           link size               (default: inherit)
     --m-menu-gap            space between links
     --m-menu-justify        inline row: start | end | center
     --m-menu-drop           compact dropdown: span-inline-end (grows right, default) |
                             span-inline-start (grows left) | center
     --m-menu-overlay-size   overlay link size       (default: --h1)
     --m-menu-overlay-bg     overlay colours         (default: the page's)
     --m-menu-overlay-ink

   The old forms (m_menuCategories, m_menuSections) also use .m_menu on a <ul>.
   Nothing here styles .m_menu itself, so they're unaffected. */
.m_menu {
  anchor-scope: --m-menu;
}
.m_menu .m_menu__toggle,
.m_menu .m_menu__close {
  display: none;
}
.m_menu .m_menu__panel {
  display: contents;
  color: inherit;
}
.m_menu .m_menu__list {
  flex-direction: row;
  justify-content: var(--m-menu-justify, start);
  gap: var(--m-menu-gap, var(--base-unit--ss) var(--base-unit));
  font-size: var(--m-menu-size, inherit);
}

.m_menu__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m_menu__toggle,
.m_menu__close {
  align-items: center;
  gap: 0.4em;
  color: inherit;
  font-size: var(--m-menu-size, inherit);
}

.m_menu [aria-current=page],
.m_menu__child--active > a {
  text-decoration-line: underline;
}

.m_menu--compact .m_menu__toggle {
  display: inline-flex;
  anchor-name: --m-menu;
}
.m_menu--compact .m_menu__toggle::after {
  content: "";
  inline-size: 0.45em;
  block-size: 0.45em;
  border-inline-end: 1px solid;
  border-block-end: 1px solid;
  translate: 0 -0.15em;
  rotate: 45deg;
  transition: rotate var(--duration) var(--ease), translate var(--duration) var(--ease);
}
.m_menu--compact:has(:popover-open) .m_menu__toggle::after {
  translate: 0 0.1em;
  rotate: 225deg;
}
.m_menu--compact .m_menu__toggle:has(.m_menu__current) .m_menu__label {
  display: none;
}
.m_menu--compact .m_menu__panel {
  display: none;
  position-anchor: --m-menu;
  position-area: block-end var(--m-menu-drop, span-inline-end);
  position-try-fallbacks: flip-inline, flip-block;
  inset: auto;
  min-inline-size: anchor-size(inline);
  margin: var(--base-unit--ss) 0 0;
  padding: var(--base-unit--s);
  border: 1px solid color-mix(in oklch, var(--clr-text) 20%, transparent);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.m_menu--compact .m_menu__panel:popover-open {
  display: block;
}
.m_menu--compact .m_menu__list {
  flex-direction: column;
  gap: var(--base-unit--ss);
}

@supports not (anchor-name: --a) {
  .m_menu--compact .m_menu__panel {
    inset: var(--base-unit--b) var(--gutter) auto auto;
  }
}
.m_menu--overlay .m_menu__toggle {
  display: inline-flex;
  anchor-name: --m-menu;
}
.m_menu--overlay .m_menu__toggle .m_menu__current {
  display: none;
}
.m_menu--overlay .m_menu__panel {
  display: none;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: var(--base-unit--bb) var(--gutter);
  border: 0;
  overflow: auto;
  align-content: center;
  background-color: var(--m-menu-overlay-bg, var(--clr-bg));
  color: var(--m-menu-overlay-ink, var(--clr-text));
  opacity: 0;
  transition: opacity var(--duration) var(--ease), display var(--duration) allow-discrete, overlay var(--duration) allow-discrete;
}
.m_menu--overlay .m_menu__panel:popover-open {
  display: grid;
  opacity: 1;
}
@starting-style {
  .m_menu--overlay .m_menu__panel:popover-open {
    opacity: 0;
  }
}
.m_menu--overlay .m_menu__list {
  flex-direction: column;
  gap: var(--base-unit);
  font-size: var(--m-menu-overlay-size, var(--h1));
  line-height: 1.05;
}
.m_menu--overlay .m_menu__close {
  display: inline-flex;
  position: fixed;
  inset-block-start: var(--base-unit);
  inset-inline-end: var(--gutter);
}

@supports (anchor-name: --a) {
  .m_menu--overlay .m_menu__close {
    position-anchor: --m-menu;
    inset: auto;
    top: anchor(top);
    right: anchor(right);
  }
}
html:has(.m_menu--overlay .m_menu__panel:popover-open) {
  overflow: hidden;
}

@media (width >= 720px) {
  .m_menu--inline\@small .m_menu__toggle,
  .m_menu--inline\@small .m_menu__close {
    display: none;
  }
  .m_menu--inline\@small .m_menu__panel {
    display: contents;
    color: inherit;
  }
  .m_menu--inline\@small .m_menu__list {
    flex-direction: row;
    justify-content: var(--m-menu-justify, start);
    gap: var(--m-menu-gap, var(--base-unit--ss) var(--base-unit));
    font-size: var(--m-menu-size, inherit);
  }
  .m_menu--inline\@small .m_menu__list {
    font-weight: inherit;
    line-height: inherit;
    text-transform: none;
  }
}
@media (width >= 960px) {
  .m_menu--inline\@medium .m_menu__toggle,
  .m_menu--inline\@medium .m_menu__close {
    display: none;
  }
  .m_menu--inline\@medium .m_menu__panel {
    display: contents;
    color: inherit;
  }
  .m_menu--inline\@medium .m_menu__list {
    flex-direction: row;
    justify-content: var(--m-menu-justify, start);
    gap: var(--m-menu-gap, var(--base-unit--ss) var(--base-unit));
    font-size: var(--m-menu-size, inherit);
  }
  .m_menu--inline\@medium .m_menu__list {
    font-weight: inherit;
    line-height: inherit;
    text-transform: none;
  }
}
@media (width >= 1280px) {
  .m_menu--inline\@desktop .m_menu__toggle,
  .m_menu--inline\@desktop .m_menu__close {
    display: none;
  }
  .m_menu--inline\@desktop .m_menu__panel {
    display: contents;
    color: inherit;
  }
  .m_menu--inline\@desktop .m_menu__list {
    flex-direction: row;
    justify-content: var(--m-menu-justify, start);
    gap: var(--m-menu-gap, var(--base-unit--ss) var(--base-unit));
    font-size: var(--m-menu-size, inherit);
  }
  .m_menu--inline\@desktop .m_menu__list {
    font-weight: inherit;
    line-height: inherit;
    text-transform: none;
  }
}
/* scss/3-molecules/_m_thumb.scss
   Article/product thumbnail. Responds to its SLOT width (container query), not the
   viewport — the same thumb works in a 2-up, 4-up or sidebar list without
   [data-section] or @media exceptions.

   <article class="m_thumb">
     <a href="…">
       <figure class="m_thumb__image a_ratio--gm"><img …></figure>
       <div class="m_thumb__inner">
         <h3 class="m_thumb__title">…</h3>
         <div class="m_thumb__description">…</div>
       </div>
     </a>
   </article>

   Modifier --over puts the inner over the image (v1 l_superimposed + m_thumb__inner). */
.m_thumb:not(.m_thumb.l_grid__sub) {
  container: thumb/inline-size;
}
.m_thumb {
  position: relative;
  --l-cols: 1;
  --h0-fluid: var(--m-thumb-h0, 18cqi);
}
.m_thumb.l_grid__sub .l_superimposed {
  container-type: inline-size;
}
.m_thumb > a {
  display: block;
  text-decoration: none;
}
.m_thumb__inner {
  --l-x: start;
  --l-y: end;
  --l-spread: initial;
  --l-gap: var(--gap);
  gap: var(--l-gap);
  display: flex;
  flex-direction: column;
  justify-content: var(--l-spread, var(--l-y));
  align-items: var(--l-x);
  --l-gap: var(--base-unit--ss);
  padding-block: var(--base-unit--s);
}
.m_thumb__title {
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
a:hover .m_thumb__title {
  text-decoration-line: underline;
}
.m_thumb__description {
  display: none;
  font-size: var(--small);
  color: var(--clr-muted);
}
@container thumb (width >= 24rem) {
  .m_thumb__description {
    display: block;
  }
}
.m_thumb--over > a {
  display: grid;
}
.m_thumb--over > a > * {
  grid-area: 1/1;
}
.m_thumb--over .m_thumb__inner {
  position: relative;
  --clr-text: var(--white);
  --clr-muted: var(--blanc-ivoire);
  color: var(--clr-text);
  background: var(--clr-scrim);
  padding: var(--base-unit);
}
@container thumb (width < 20rem) {
  .m_thumb--over .m_thumb__inner {
    padding: var(--base-unit--s);
  }
}
@container thumb (width >= 36rem) {
  .m_thumb--over .m_thumb__title {
    font-size: var(--h3);
  }
}

/* scss/4-organisms/_index.scss */
/* scss/4-organisms/_o_header.scss
   The site header: brand (name + slogan, or a logo), nav, and an optional extra slot.
   Markup comes from forms/misc/o_header.txp. Each switch below is independent, so
   mix freely: class="o_header--split o_header--sticky o_header--shrink"
   (the debug toolbar's Header panel flips them live and copies the tag for you).

   Arrangement (pick one; each also has @small @medium @desktop variants)
     --split      brand left, nav right (default)
     --inline     nav straight after the brand
     --stacked    nav on its own row below
     --centred    everything centred, one per row

   Position
     --sticky     sticks to the top of the window
     --over       sits on top of what follows (a full-width image), transparent
                  with white ink. With --sticky it's fixed instead.
     --over-hero  --over, but only on pages that have a .u_hero (the full-width image
                  or block the header should sit on). Elsewhere it's a normal header.
                  So one header serves every page: the content decides, not TXP logic.
                  Mark the hero in the page or form: class="l_superimposed u_hero"
                  (or put u_hero in the body class to force it for a whole page)
     --forehead   empty space above, on windows tall enough to spare it

   Once scrolled (js/o_header.js adds .is-scrolled when a sticky header is stuck)
     --shrink     less padding, smaller name, no slogan
     --solidify   page colours and a hairline: for --over headers

   Knobs (style="--o-header-name: var(--h1)", or per site on :root)
     --o-header-name / -name-small     site name size, before and after --shrink
     --o-header-slogan                 slogan size
     --o-header-nav                    nav link size
     --o-header-pad / -pad-small       padding above and below
     --o-header-max                    width to line up with, e.g. 1720px for l_width-limited--large;
                                       the background stays full width
     --o-header-align                  vertical alignment: end | center | start | last baseline
     --o-header-bg / -ink              colours
     --o-header-over-bg / -over-ink    colours with --over
     --o-header-solid-bg / -solid-ink  colours with --solidify, once scrolled
     --o-header-forehead               space above with --forehead (default 25svh) */
.o_header {
  display: flex;
  flex-direction: var(--o-header-dir, row);
  flex-wrap: wrap;
  align-items: var(--o-header-align, end);
  gap: var(--base-unit--s) var(--gap);
  padding-block: var(--o-header-pad, var(--base-unit));
  padding-inline: max(var(--gutter), (100% - var(--o-header-max, 100%)) / 2 + var(--gutter));
  background: var(--o-header-bg, var(--clr-bg));
  color: var(--o-header-ink, var(--clr-text));
  text-align: var(--o-header-text-align, start);
  transition: padding var(--duration) var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.o_header__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;
  justify-content: var(--o-header-brand-justify, start);
  gap: 0 var(--base-unit--s);
  color: inherit;
}
.o_header__brand:hover {
  text-decoration-line: none;
}

.o_header__name {
  font-family: var(--font-heading);
  font-size: var(--o-header-name, var(--h3));
  line-height: 1.1;
  transition: font-size var(--duration) var(--ease);
}

.o_header__slogan {
  font-size: var(--o-header-slogan, var(--h5));
  line-height: 1.3;
}

.o_header__name svg {
  display: block;
  block-size: var(--logo-height, 1lh);
  inline-size: auto;
  fill: currentcolor;
}

.o_header__nav {
  order: var(--o-header-nav-order, 1);
  flex-basis: var(--o-header-nav-basis, auto);
  margin-inline-start: var(--o-header-nav-push, auto);
  --m-menu-size: var(--o-header-nav, var(--h5));
  --m-menu-justify: var(--o-header-nav-justify, start);
}

.o_header__extra {
  order: 2;
  margin-inline-start: var(--o-header-extra-push, 0);
}

.o_header--split {
  --m-menu-drop: span-inline-start;
  --o-header-dir: row;
  --o-header-align: end;
  --o-header-nav-order: 1;
  --o-header-nav-basis: auto;
  --o-header-nav-push: auto;
  --o-header-extra-push: 0;
  --o-header-nav-justify: start;
  --o-header-brand-justify: start;
  --o-header-text-align: start;
}

.o_header--inline {
  --m-menu-drop: span-inline-end;
  --o-header-dir: row;
  --o-header-align: end;
  --o-header-nav-order: 1;
  --o-header-nav-basis: auto;
  --o-header-nav-push: 0;
  --o-header-extra-push: auto;
  --o-header-nav-justify: start;
  --o-header-brand-justify: start;
  --o-header-text-align: start;
}

.o_header--stacked {
  --m-menu-drop: span-inline-end;
  --o-header-dir: row;
  --o-header-align: end;
  --o-header-nav-order: 3;
  --o-header-nav-basis: 100%;
  --o-header-nav-push: 0;
  --o-header-extra-push: auto;
  --o-header-nav-justify: start;
  --o-header-brand-justify: start;
  --o-header-text-align: start;
}

.o_header--centred {
  --m-menu-drop: center;
  --o-header-dir: column;
  --o-header-align: center;
  --o-header-nav-order: 1;
  --o-header-nav-basis: auto;
  --o-header-nav-push: 0;
  --o-header-extra-push: 0;
  --o-header-nav-justify: center;
  --o-header-brand-justify: center;
  --o-header-text-align: center;
}

@media (width >= 720px) {
  .o_header--split\@small {
    --m-menu-drop: span-inline-start;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: auto;
    --o-header-extra-push: 0;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--inline\@small {
    --m-menu-drop: span-inline-end;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: 0;
    --o-header-extra-push: auto;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--stacked\@small {
    --m-menu-drop: span-inline-end;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 3;
    --o-header-nav-basis: 100%;
    --o-header-nav-push: 0;
    --o-header-extra-push: auto;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--centred\@small {
    --m-menu-drop: center;
    --o-header-dir: column;
    --o-header-align: center;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: 0;
    --o-header-extra-push: 0;
    --o-header-nav-justify: center;
    --o-header-brand-justify: center;
    --o-header-text-align: center;
  }
}
@media (width >= 960px) {
  .o_header--split\@medium {
    --m-menu-drop: span-inline-start;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: auto;
    --o-header-extra-push: 0;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--inline\@medium {
    --m-menu-drop: span-inline-end;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: 0;
    --o-header-extra-push: auto;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--stacked\@medium {
    --m-menu-drop: span-inline-end;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 3;
    --o-header-nav-basis: 100%;
    --o-header-nav-push: 0;
    --o-header-extra-push: auto;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--centred\@medium {
    --m-menu-drop: center;
    --o-header-dir: column;
    --o-header-align: center;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: 0;
    --o-header-extra-push: 0;
    --o-header-nav-justify: center;
    --o-header-brand-justify: center;
    --o-header-text-align: center;
  }
}
@media (width >= 1280px) {
  .o_header--split\@desktop {
    --m-menu-drop: span-inline-start;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: auto;
    --o-header-extra-push: 0;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--inline\@desktop {
    --m-menu-drop: span-inline-end;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: 0;
    --o-header-extra-push: auto;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--stacked\@desktop {
    --m-menu-drop: span-inline-end;
    --o-header-dir: row;
    --o-header-align: end;
    --o-header-nav-order: 3;
    --o-header-nav-basis: 100%;
    --o-header-nav-push: 0;
    --o-header-extra-push: auto;
    --o-header-nav-justify: start;
    --o-header-brand-justify: start;
    --o-header-text-align: start;
  }
  .o_header--centred\@desktop {
    --m-menu-drop: center;
    --o-header-dir: column;
    --o-header-align: center;
    --o-header-nav-order: 1;
    --o-header-nav-basis: auto;
    --o-header-nav-push: 0;
    --o-header-extra-push: 0;
    --o-header-nav-justify: center;
    --o-header-brand-justify: center;
    --o-header-text-align: center;
  }
}
.o_header--sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
}

.o_header--over,
:where(:root:has(.u_hero)) .o_header--over-hero {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--o-header-over-bg, transparent);
  color: var(--o-header-over-ink, var(--white));
}

.o_header--over.o_header--sticky,
:where(:root:has(.u_hero)) .o_header--over-hero.o_header--sticky {
  position: fixed;
  margin-block-start: initial;
}

@media (height >= 40rem) {
  .o_header--forehead {
    margin-block-start: var(--o-header-forehead, 12svh);
  }
}
.o_header--shrink.is-scrolled {
  padding-block: var(--o-header-pad-small, var(--base-unit--s));
}

.o_header--shrink.is-scrolled .o_header__name {
  font-size: var(--o-header-name-small, var(--h5));
}

.o_header--shrink.is-scrolled .o_header__slogan {
  display: none;
}

.o_header--solidify.is-scrolled {
  background: var(--o-header-solid-bg, var(--clr-bg));
  color: var(--o-header-solid-ink, var(--clr-text));
  box-shadow: 0 1px 0 color-mix(in oklch, currentcolor 15%, transparent);
}

/* scss/4-organisms/_o_nav.scss
   The nav on its own, outside the header (forms/misc/o_nav.txp, called directly).
   The menu itself is styled by 3-molecules/_m_menu.scss; this only places the bar.

     .o_nav--sticky   a bar that sticks to the top of the window, for pages whose
                      header scrolls away: <txp::o_header nav="0" /> … <txp::o_nav class="o_nav--sticky" />

   Knobs: --o-nav-bg, --o-nav-pad */
.o_nav--sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  padding: var(--o-nav-pad, var(--base-unit--s)) var(--gutter);
  background: var(--o-nav-bg, var(--clr-bg));
  transition: box-shadow var(--duration) var(--ease);
}
.o_nav--sticky.is-scrolled {
  box-shadow: 0 1px 0 color-mix(in oklch, currentcolor 15%, transparent);
}

/* scss/4-organisms/_o_gallery.scss
   Image gallery from v1 Artedomus, tidied. Figures carry .landscape / .portrait /
   .square (from TXP image dimensions); captions line up via subgrid. */
.o_gallery {
  --l-x: normal;
  --l-y: normal;
  --l-spread: initial;
  --l-gap: var(--gap);
  gap: var(--l-gap);
  --l-cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--l-cols), minmax(0, 1fr));
  justify-content: var(--l-spread, normal);
  justify-items: var(--l-x);
  align-items: var(--l-y);
  grid-auto-flow: dense;
  margin-block: var(--base-unit--b);
}
.o_gallery figure {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}
.o_gallery figure img {
  block-size: 100%;
}
.o_gallery .landscape,
.o_gallery .square {
  grid-column: span 2;
}
.o_gallery .landscape img {
  aspect-ratio: 3/2;
}
.o_gallery .portrait img {
  aspect-ratio: 2/3;
}
.o_gallery .landscape:has(+ .landscape),
.o_gallery .landscape + .landscape {
  grid-column: span 1;
}
.o_gallery:has(> figure:only-child) {
  display: block;
  max-inline-size: var(--type-measure);
  margin-inline: auto;
}
@media (width >= 720px) {
  .o_gallery--tri {
    --l-cols: 3;
  }
  .o_gallery--quad {
    --l-cols: 4;
  }
}

/* scss/4-organisms/_o_pan.scss
   Ken Burns slideshow: the images crossfade, each one slowly zooming while it shows.
   Markup from forms/misc/o_figure_pan.txp; js/o_pan.js runs it.

   <figure class="o_pan a_ratio--2x1" data-zoom="random" data-drift="center top-left">
     <img …> <img …> <img …>
   </figure>

   Without the script (or before it starts) the first image just sits there.
   One image: it zooms in and out, slowly, for ever.
   Reduced motion (an OS setting): no zoom, the crossfade stays.

   Knobs (style="--o-pan-slide: 10s", or per site on :root)
     --o-pan-slide   time each image shows (default 7s)
     --o-pan-fade    crossfade (default 1.5s)
     --o-pan-zoom    how far it zooms (default 1.2)

   Set on the figure, read by the script
     data-zoom    in | out | alternate | random (default)
     data-drift   which point it zooms towards, picked at random per slide from:
                  center top top-left top-right left right bottom bottom-left bottom-right
                  (default: all of them)
     data-order   random: shuffle; otherwise in page order */
.o_pan {
  display: grid;
  z-index: 0;
  overflow: hidden;
}
.o_pan > img {
  grid-area: 1/1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform-origin: var(--o-pan-origin, 50% 50%);
}
.o_pan > img:not(:first-child) {
  opacity: 0;
}
.o_pan.is-running > img {
  opacity: 0;
}
.o_pan.is-running > .is-current {
  z-index: 2;
  opacity: 1;
  transition: opacity var(--o-pan-fade, 1.5s) ease;
}
.o_pan.is-running > .is-leaving {
  z-index: 1;
  opacity: 1;
}
.o_pan.is-running > .is-current, .o_pan.is-running > .is-leaving {
  animation: o-pan-in calc(var(--o-pan-slide, 7s) + var(--o-pan-fade, 1.5s)) linear both;
}
.o_pan.is-running > .is-out {
  animation-name: o-pan-out;
}
.o_pan.is-running > .is-solo {
  animation: o-pan-in calc(var(--o-pan-slide, 7s) * 2) ease-in-out infinite alternate;
}
.o_pan.is-paused > img {
  animation-play-state: paused;
}

@keyframes o-pan-in {
  from {
    scale: 1;
  }
  to {
    scale: var(--o-pan-zoom, 1.2);
  }
}
@keyframes o-pan-out {
  from {
    scale: var(--o-pan-zoom, 1.2);
  }
  to {
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .o_pan > img {
    animation: none !important;
  }
}
/* scss/4-organisms/_o_tiles.scss
   Image tiles that change by themselves: all-grid's "shifty", without jQuery.
   Markup from forms/misc/o_figure_shifty.txp; js/o_tiles.js runs it.

   <figure class="o_tiles o_tiles--shift a_ratio--1x1">
     <img …> <img …> …
     <div class="o_tiles__card bg--brand"><p class="h3-style">Text on colour</p></div>
   </figure>

   Three modes
     --shift    (default) small tiles; every few seconds one slides out as another slides in
     --panels   the same, slower and with big panels: calm enough for a large area
     --spiral   Fibonacci blocks (8 5 3 2 1 1) spiral in, hold, spiral out, and come back
                with new images and a new turn. Each block arrives as a colour and its image
                fades in over it; on the way out the image fades back to the colour, and the
                next spiral's colours arrive over those, so it never goes back to white.
                Best on a golden-ish box: a_ratio--gm

   The tile count follows the box: as many columns and rows as fit --o-tiles-min, so
   tiles never get too small. Some tiles span two or four cells. Cards (anything that
   isn't an img) only go in tiles at least --o-tiles-card-min wide, so text has room.

   Without the script: a plain grid of the images. Reduced motion (an OS setting):
   fades instead of slides. Pauses off screen and in hidden tabs.

   Knobs, on the figure (style="--o-tiles-min: 14rem", or a class)
     --o-tiles-min       smallest tile           shift 10rem   panels 22rem
     --o-tiles-every     time between changes    shift 3s      panels 7s    spiral: the hold
     --o-tiles-move      length of a change      shift 1s      panels 2.5s  spiral 1.2s
     --o-tiles-card-min  narrowest tile a card may use (default 15rem)
     --o-tiles-stagger   spiral: delay between blocks (default .25s)
     --o-tiles-tints     spiral: comma-separated colours the blocks pick from at random
                         (default: the kit's non-white semantic colours, so a .bg-- scope
                         or a site's own --clr-… follow). none: no colour
     --o-tiles-gap       space between tiles (default --base-unit--ss) */
:where(.o_tiles) {
  --o-tiles-min: 10rem;
  --o-tiles-every: 3s;
  --o-tiles-move: 1s;
  aspect-ratio: 1;
}

:where(.o_tiles--panels) {
  --o-tiles-min: 22rem;
  --o-tiles-every: 7s;
  --o-tiles-move: 2.5s;
}

:where(.o_tiles--spiral) {
  --o-tiles-every: 4s;
  --o-tiles-move: 1.2s;
  --o-tiles-tints: var(--clr-text), var(--clr-brand), var(--clr-muted),
    var(--clr-success), var(--clr-warning), var(--clr-error);
}

.o_tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--o-tiles-min), 100%), 1fr));
  gap: var(--o-tiles-gap, var(--base-unit--ss));
  position: relative;
  overflow: hidden;
}
.o_tiles > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.o_tiles.is-running {
  grid-template-columns: repeat(var(--o-tiles-cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--o-tiles-rows, 1), minmax(0, 1fr));
}

.o_tiles__probe {
  position: absolute;
  inline-size: var(--o-tiles-min);
  block-size: 0;
  visibility: hidden;
  pointer-events: none;
}
.o_tiles__probe--card {
  inline-size: var(--o-tiles-card-min, 15rem);
}

.o_tiles__cell {
  display: grid;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
}
.o_tiles__cell > * {
  grid-area: 1/1;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
}
.o_tiles__cell > img {
  object-fit: cover;
}

.o_tiles__card {
  display: grid;
  place-content: center;
  padding: var(--base-unit);
  overflow: hidden;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  text-align: center;
}

.o_tiles__cell > .is-entering {
  animation: o-tiles-in var(--o-tiles-move) cubic-bezier(0.65, 0, 0.25, 1) both;
}

.o_tiles__cell > .is-leaving {
  animation: o-tiles-out var(--o-tiles-move) cubic-bezier(0.65, 0, 0.25, 1) both;
}

@keyframes o-tiles-in {
  from {
    translate: var(--o-tiles-dx, 100%) var(--o-tiles-dy, 0%);
  }
}
@keyframes o-tiles-out {
  to {
    translate: calc(var(--o-tiles-dx, 100%) * -1) calc(var(--o-tiles-dy, 0%) * -1);
  }
}
.o_tiles--spiral .o_tiles__cell {
  --_in: calc(var(--i, 0) * var(--o-tiles-stagger, .25s));
  --_out: calc((5 - var(--i, 0)) * var(--o-tiles-stagger, .25s));
  --_lag: calc(var(--o-tiles-move) * .6);
  background-color: var(--o-tiles-tint, transparent);
  opacity: 0;
  scale: 0.92;
  transition: opacity var(--o-tiles-move) ease, scale var(--o-tiles-move) ease;
  transition-delay: var(--_in);
}
.o_tiles--spiral .o_tiles__cell.is-shown {
  opacity: 1;
  scale: 1;
}
.o_tiles--spiral .o_tiles__cell > * {
  opacity: 0;
  transition: opacity var(--o-tiles-move) ease;
  transition-delay: var(--_out);
}

.o_tiles--spiral.is-in .o_tiles__cell > * {
  opacity: 1;
  transition-delay: calc(var(--_in) + var(--_lag));
}

.o_tiles.is-paused .o_tiles__cell > * {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .o_tiles__cell > .is-entering {
    animation-name: o-tiles-fade-in;
  }
  .o_tiles__cell > .is-leaving {
    animation-name: o-tiles-fade-out;
  }
  .o_tiles--spiral .o_tiles__cell {
    scale: 1;
  }
}
@keyframes o-tiles-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes o-tiles-fade-out {
  to {
    opacity: 0;
  }
}
/* site/_header.scss
 Site overrides of o_header */
/* scss/5-layouts/_index.scss
   Order matters here: primitives declare their defaults first,
   then _l_align's shared modifiers (same specificity) override them. */
/* scss/5-layouts/_l_beam.scss — row that wraps. Defaults: start, baseline. */
.l_beam {
  --l-x: start;
  --l-y: baseline;
  --l-spread: initial;
  --l-gap: var(--gap);
  gap: var(--l-gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--l-spread, var(--l-x));
  align-items: var(--l-y);
}
.l_beam--nowrap {
  flex-wrap: nowrap;
}
.l_beam--auto {
  inline-size: max-content;
}

/* scss/5-layouts/_l_column.scss — vertical stack. Defaults: start, start.
   Add .u_fill (or give it a height) for .middlev / .bottom to have room to act. */
.l_column {
  --l-x: start;
  --l-y: start;
  --l-spread: initial;
  --l-gap: var(--gap);
  gap: var(--l-gap);
  display: flex;
  flex-direction: column;
  justify-content: var(--l-spread, var(--l-y));
  align-items: var(--l-x);
}

/* scss/5-layouts/_l_grid.scss
   .l_grid                       1 column
   .l_grid--twin / --tri / --quad   fixed counts, each with @small @medium @desktop
   .l_grid--auto                 as many as fit; tune with style="--l-min: 12rem"
   .l_grid__sub                  child that subgrids rows (v1 l_grid--sub, all-grid --parent-rules)
   .l_grid--stagger              every second column sits lower, with @small @medium @desktop

   e.g. class="l_grid l_grid--twin l_grid--quad@medium" */
.l_grid {
  --l-x: normal;
  --l-y: normal;
  --l-spread: initial;
  --l-gap: var(--gap);
  gap: var(--l-gap);
  --l-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--l-cols), minmax(0, 1fr));
  justify-content: var(--l-spread, normal);
  justify-items: var(--l-x);
  align-items: var(--l-y);
}

.l_grid--twin {
  --l-cols: 2;
}

.l_grid--tri {
  --l-cols: 3;
}

.l_grid--quad {
  --l-cols: 4;
}

@media (width >= 720px) {
  .l_grid--twin\@small {
    --l-cols: 2;
  }
  .l_grid--tri\@small {
    --l-cols: 3;
  }
  .l_grid--quad\@small {
    --l-cols: 4;
  }
}
@media (width >= 960px) {
  .l_grid--twin\@medium {
    --l-cols: 2;
  }
  .l_grid--tri\@medium {
    --l-cols: 3;
  }
  .l_grid--quad\@medium {
    --l-cols: 4;
  }
}
@media (width >= 1280px) {
  .l_grid--twin\@desktop {
    --l-cols: 2;
  }
  .l_grid--tri\@desktop {
    --l-cols: 3;
  }
  .l_grid--quad\@desktop {
    --l-cols: 4;
  }
}
.l_grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--l-min, 16rem), 100%), 1fr));
}
@media (width < 960px) {
  .l_grid--auto--tight {
    --l-min: 10rem;
  }
}

.l_grid--dense {
  grid-auto-flow: dense;
}

.l_grid--stagger > :nth-child(even) {
  translate: 0 var(--l-stagger, 50%);
}

@media (width >= 720px) {
  .l_grid--stagger\@small > :nth-child(even) {
    translate: 0 var(--l-stagger, 50%);
  }
}
@media (width >= 960px) {
  .l_grid--stagger\@medium > :nth-child(even) {
    translate: 0 var(--l-stagger, 50%);
  }
}
@media (width >= 1280px) {
  .l_grid--stagger\@desktop > :nth-child(even) {
    translate: 0 var(--l-stagger, 50%);
  }
}
.l_grid__sub {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--l-rows, 3);
  gap: calc(var(--gap) * 0.75);
}

/* scss/5-layouts/_l_superimposed.scss
   Children share one grid cell instead of absolute positioning: the container
   grows to fit the copy, so text can't spill out of a short image.
   __inner keeps its v1 name and is a column, so .bottom / .middlev / .middle work on it.

   <div class="l_superimposed">
     <figure>…</figure>
     <div class="l_superimposed__inner bottom">…</div>
   </div>

   --grow: the image grows with the copy (at least --l-min-block tall)
   --fullscreen: at least the window's height */
.l_superimposed {
  display: grid;
}
.l_superimposed > * {
  grid-area: 1/1;
}
.l_superimposed {
  --l-cols: 1;
}
.l_superimposed__inner {
  --l-x: start;
  --l-y: start;
  --l-spread: initial;
  --l-gap: var(--gap);
  gap: var(--l-gap);
  display: flex;
  flex-direction: column;
  justify-content: var(--l-spread, var(--l-y));
  align-items: var(--l-x);
  position: relative;
  padding: var(--base-unit);
  color: var(--white);
}
.l_superimposed__inner.scrim {
  background: var(--clr-scrim);
}
.l_superimposed--grow {
  position: relative;
  min-block-size: var(--l-min-block, 80svh);
}
.l_superimposed--grow > :is(figure, picture, img, video) {
  position: absolute;
  inset: 0;
}
.l_superimposed--grow > figure :is(img, video) {
  block-size: 100%;
  max-block-size: none;
}
.l_superimposed--fullscreen {
  min-block-size: 100dvh;
}
.l_superimposed--fullscreen > :is(figure, img, video) {
  block-size: 100%;
}

/* scss/5-layouts/_l_width-limited.scss */
.l_width-limited {
  max-inline-size: var(--l-max, 1280px);
  margin-inline: max(0px, (100% - var(--l-max, 1280px)) / 2);
}
.l_width-limited--large {
  --l-max: 1720px;
}
.l_width-limited--measure {
  --l-max: var(--type-measure);
}

/* scss/5-layouts/_l_align.scss
   Short, shared alignment modifiers — defined ONCE, used on any layout primitive.
   They only set axis variables; each primitive maps them to its own axes
   (see 0-settings/_layout.scss). On a non-layout element they do nothing.

     x:      .left  .middle   .right
     y:      .top   .middlev  .bottom  .baseline  .stretch
     spread: .space-between  .space-around  .space-evenly
     gap:    .l_gap--none  .l_gap--small  .l_gap--large

   All have @small @medium @desktop variants:  class="l_beam middle@medium"
   Must load after the primitives (same specificity — source order decides). */
.left {
  --l-x: start;
}

.middle {
  --l-x: center;
}

.right {
  --l-x: end;
}

.top {
  --l-y: start;
}

.middlev {
  --l-y: center;
}

.bottom {
  --l-y: end;
}

.baseline {
  --l-y: baseline;
}

.stretch {
  --l-y: stretch;
}

.space-between {
  --l-spread: space-between;
}

.space-around {
  --l-spread: space-around;
}

.space-evenly {
  --l-spread: space-evenly;
}

.l_gap--none {
  --l-gap: 0;
}

.l_gap--small {
  --l-gap: var(--base-unit--s);
}

.l_gap--large {
  --l-gap: var(--base-unit--b);
}

@media (width >= 720px) {
  .left\@small {
    --l-x: start;
  }
  .middle\@small {
    --l-x: center;
  }
  .right\@small {
    --l-x: end;
  }
  .top\@small {
    --l-y: start;
  }
  .middlev\@small {
    --l-y: center;
  }
  .bottom\@small {
    --l-y: end;
  }
  .baseline\@small {
    --l-y: baseline;
  }
  .stretch\@small {
    --l-y: stretch;
  }
  .space-between\@small {
    --l-spread: space-between;
  }
  .space-around\@small {
    --l-spread: space-around;
  }
  .space-evenly\@small {
    --l-spread: space-evenly;
  }
  .l_gap--none\@small {
    --l-gap: 0;
  }
  .l_gap--small\@small {
    --l-gap: var(--base-unit--s);
  }
  .l_gap--large\@small {
    --l-gap: var(--base-unit--b);
  }
}
@media (width >= 960px) {
  .left\@medium {
    --l-x: start;
  }
  .middle\@medium {
    --l-x: center;
  }
  .right\@medium {
    --l-x: end;
  }
  .top\@medium {
    --l-y: start;
  }
  .middlev\@medium {
    --l-y: center;
  }
  .bottom\@medium {
    --l-y: end;
  }
  .baseline\@medium {
    --l-y: baseline;
  }
  .stretch\@medium {
    --l-y: stretch;
  }
  .space-between\@medium {
    --l-spread: space-between;
  }
  .space-around\@medium {
    --l-spread: space-around;
  }
  .space-evenly\@medium {
    --l-spread: space-evenly;
  }
  .l_gap--none\@medium {
    --l-gap: 0;
  }
  .l_gap--small\@medium {
    --l-gap: var(--base-unit--s);
  }
  .l_gap--large\@medium {
    --l-gap: var(--base-unit--b);
  }
}
@media (width >= 1280px) {
  .left\@desktop {
    --l-x: start;
  }
  .middle\@desktop {
    --l-x: center;
  }
  .right\@desktop {
    --l-x: end;
  }
  .top\@desktop {
    --l-y: start;
  }
  .middlev\@desktop {
    --l-y: center;
  }
  .bottom\@desktop {
    --l-y: end;
  }
  .baseline\@desktop {
    --l-y: baseline;
  }
  .stretch\@desktop {
    --l-y: stretch;
  }
  .space-between\@desktop {
    --l-spread: space-between;
  }
  .space-around\@desktop {
    --l-spread: space-around;
  }
  .space-evenly\@desktop {
    --l-spread: space-evenly;
  }
  .l_gap--none\@desktop {
    --l-gap: 0;
  }
  .l_gap--small\@desktop {
    --l-gap: var(--base-unit--s);
  }
  .l_gap--large\@desktop {
    --l-gap: var(--base-unit--b);
  }
}
/* scss/6-utilities/_index.scss
   Loaded last, so a utility beats any component rule of equal specificity
   (one class). A more specific selector still wins: see the README. */
/* scss/6-utilities/_u_space.scss
   all-grid naming kept:  u_m / u_p  +  --t --b --l --r  +  size suffix
     (none) = base unit    -  = half    tt/bb/ll/rr = double    0 = none
   e.g. .u_p--t  .u_m--bb  .u_p--l-  .u_m--t0
   Logical properties, so it's right for RTL too. */
.u_m {
  margin: var(--base-unit);
}

.u_m--t {
  margin-block-start: var(--base-unit);
}

.u_m--t- {
  margin-block-start: var(--base-unit--s);
}

.u_m--tt {
  margin-block-start: var(--base-unit--b);
}

.u_m--t0 {
  margin-block-start: 0;
}

.u_m--b {
  margin-block-end: var(--base-unit);
}

.u_m--b- {
  margin-block-end: var(--base-unit--s);
}

.u_m--bb {
  margin-block-end: var(--base-unit--b);
}

.u_m--b0 {
  margin-block-end: 0;
}

.u_m--l {
  margin-inline-start: var(--base-unit);
}

.u_m--l- {
  margin-inline-start: var(--base-unit--s);
}

.u_m--ll {
  margin-inline-start: var(--base-unit--b);
}

.u_m--l0 {
  margin-inline-start: 0;
}

.u_m--r {
  margin-inline-end: var(--base-unit);
}

.u_m--r- {
  margin-inline-end: var(--base-unit--s);
}

.u_m--rr {
  margin-inline-end: var(--base-unit--b);
}

.u_m--r0 {
  margin-inline-end: 0;
}

.u_p {
  padding: var(--base-unit);
}

.u_p--t {
  padding-block-start: var(--base-unit);
}

.u_p--t- {
  padding-block-start: var(--base-unit--s);
}

.u_p--tt {
  padding-block-start: var(--base-unit--b);
}

.u_p--t0 {
  padding-block-start: 0;
}

.u_p--b {
  padding-block-end: var(--base-unit);
}

.u_p--b- {
  padding-block-end: var(--base-unit--s);
}

.u_p--bb {
  padding-block-end: var(--base-unit--b);
}

.u_p--b0 {
  padding-block-end: 0;
}

.u_p--l {
  padding-inline-start: var(--base-unit);
}

.u_p--l- {
  padding-inline-start: var(--base-unit--s);
}

.u_p--ll {
  padding-inline-start: var(--base-unit--b);
}

.u_p--l0 {
  padding-inline-start: 0;
}

.u_p--r {
  padding-inline-end: var(--base-unit);
}

.u_p--r- {
  padding-inline-end: var(--base-unit--s);
}

.u_p--rr {
  padding-inline-end: var(--base-unit--b);
}

.u_p--r0 {
  padding-inline-end: 0;
}

.u_gutter {
  padding-inline: var(--gutter);
}

.u_tallface {
  padding-block: 7.5vh;
}

/* scss/6-utilities/_u_span.scss — grid-child spans, with @small @medium @desktop */
.u_span--full-width {
  grid-column: 1 / -1;
}

.u_span--2cols {
  grid-column: span 2;
}

.u_span--2rows {
  grid-row: span 2;
}

.u_span--3cols {
  grid-column: span 3;
}

.u_span--3rows {
  grid-row: span 3;
}

.u_span--4cols {
  grid-column: span 4;
}

.u_span--4rows {
  grid-row: span 4;
}

@media (width >= 720px) {
  .u_span--full-width\@small {
    grid-column: 1 / -1;
  }
  .u_span--2cols\@small {
    grid-column: span 2;
  }
  .u_span--2rows\@small {
    grid-row: span 2;
  }
  .u_span--3cols\@small {
    grid-column: span 3;
  }
  .u_span--3rows\@small {
    grid-row: span 3;
  }
  .u_span--4cols\@small {
    grid-column: span 4;
  }
  .u_span--4rows\@small {
    grid-row: span 4;
  }
}
@media (width >= 960px) {
  .u_span--full-width\@medium {
    grid-column: 1 / -1;
  }
  .u_span--2cols\@medium {
    grid-column: span 2;
  }
  .u_span--2rows\@medium {
    grid-row: span 2;
  }
  .u_span--3cols\@medium {
    grid-column: span 3;
  }
  .u_span--3rows\@medium {
    grid-row: span 3;
  }
  .u_span--4cols\@medium {
    grid-column: span 4;
  }
  .u_span--4rows\@medium {
    grid-row: span 4;
  }
}
@media (width >= 1280px) {
  .u_span--full-width\@desktop {
    grid-column: 1 / -1;
  }
  .u_span--2cols\@desktop {
    grid-column: span 2;
  }
  .u_span--2rows\@desktop {
    grid-row: span 2;
  }
  .u_span--3cols\@desktop {
    grid-column: span 3;
  }
  .u_span--3rows\@desktop {
    grid-row: span 3;
  }
  .u_span--4cols\@desktop {
    grid-column: span 4;
  }
  .u_span--4rows\@desktop {
    grid-row: span 4;
  }
}
/* scss/6-utilities/_u_self.scss
   Align ONE child within its beam/column/grid (all-grid u_self-position--*).
   Same x/y vocabulary as the shared modifiers. */
.u_self--left {
  justify-self: start;
}

.u_self--middle {
  justify-self: center;
}

.u_self--right {
  justify-self: end;
  margin-inline-start: auto;
}

.u_self--top {
  align-self: start;
}

.u_self--middlev {
  align-self: center;
}

.u_self--bottom {
  align-self: end;
}

@media (width >= 720px) {
  .u_self--left\@small {
    justify-self: start;
  }
  .u_self--middle\@small {
    justify-self: center;
  }
  .u_self--right\@small {
    justify-self: end;
    margin-inline-start: auto;
  }
  .u_self--top\@small {
    align-self: start;
  }
  .u_self--middlev\@small {
    align-self: center;
  }
  .u_self--bottom\@small {
    align-self: end;
  }
}
@media (width >= 960px) {
  .u_self--left\@medium {
    justify-self: start;
  }
  .u_self--middle\@medium {
    justify-self: center;
  }
  .u_self--right\@medium {
    justify-self: end;
    margin-inline-start: auto;
  }
  .u_self--top\@medium {
    align-self: start;
  }
  .u_self--middlev\@medium {
    align-self: center;
  }
  .u_self--bottom\@medium {
    align-self: end;
  }
}
@media (width >= 1280px) {
  .u_self--left\@desktop {
    justify-self: start;
  }
  .u_self--middle\@desktop {
    justify-self: center;
  }
  .u_self--right\@desktop {
    justify-self: end;
    margin-inline-start: auto;
  }
  .u_self--top\@desktop {
    align-self: start;
  }
  .u_self--middlev\@desktop {
    align-self: center;
  }
  .u_self--bottom\@desktop {
    align-self: end;
  }
}
/* scss/6-utilities/_u_hide.scss
   .u_hide                   always
   .u_hide@medium            from medium up       (consistent with every other @bp)
   .u_hide--until-medium     below medium
   .u_visually-hidden        hidden but read by screen readers */
.u_hide {
  display: none;
}

@media (width >= 380px) {
  .u_hide\@mobile {
    display: none;
  }
}
@media (width >= 720px) {
  .u_hide\@small {
    display: none;
  }
}
@media (width >= 960px) {
  .u_hide\@medium {
    display: none;
  }
}
@media (width >= 1280px) {
  .u_hide\@desktop {
    display: none;
  }
}
@media (width >= 1720px) {
  .u_hide\@large {
    display: none;
  }
}
@media (width < 380px) {
  .u_hide--until-mobile {
    display: none;
  }
}
@media (width < 720px) {
  .u_hide--until-small {
    display: none;
  }
}
@media (width < 960px) {
  .u_hide--until-medium {
    display: none;
  }
}
@media (width < 1280px) {
  .u_hide--until-desktop {
    display: none;
  }
}
@media (width < 1720px) {
  .u_hide--until-large {
    display: none;
  }
}
.u_visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* scss/6-utilities/_u_misc.scss — small single-purpose helpers */
.u_contents {
  display: contents !important;
}

.u_fill {
  block-size: 100%;
}

.u_sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
}

.u_measure {
  max-inline-size: var(--type-measure);
}

.u_flow {
  --flow-space: var(--base-unit);
}
.u_flow > *:not(meta) + * {
  margin-block-start: var(--flow-space);
}
.u_flow--small {
  --flow-space: var(--base-unit--s);
}
.u_flow--large {
  --flow-space: var(--base-unit--b);
}

.u_clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 1);
  line-clamp: var(--lines, 1);
  overflow: hidden;
}
.u_clamp--2 {
  --lines: 2;
}
.u_clamp--3 {
  --lines: 3;
}

/* scss/6-utilities/_u_edit-in-txp.scss — admin "edit" link overlaid on articles/images */
:where(*:has(> .u_edit-in-txp)) {
  position: relative;
}

.u_edit-in-txp {
  position: absolute;
  z-index: 1;
  inset-block-end: 0;
  opacity: 0.5;
  text-decoration: none;
}
.u_edit-in-txp:hover {
  opacity: 1;
}
.u_edit-in-txp a {
  display: block;
}
.u_edit-in-txp img {
  inline-size: var(--base-unit);
  max-inline-size: none;
  block-size: auto;
  max-block-size: none;
  object-fit: contain;
}
.u_edit-in-txp--image {
  filter: invert(100%);
}

:root {
  --u-debug-breakpoints: "mobile:380px small:720px medium:960px desktop:1280px large:1720px ";
}

.u_debug *:not(:where(.u_debug-ui, .u_debug-ui *, .u_debug-bar, .u_debug-bar *, :focus-visible)) {
  outline: 1px dotted color-mix(in oklch, var(--clr-brand) 15%, transparent);
  outline-offset: -1px;
}

.u_debug-ui {
  position: absolute;
  inset: 0 0 auto 0;
  overflow: clip;
  pointer-events: none;
  z-index: 2147483000;
  font: 500 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #f2f2f2;
  text-align: start;
}

.u_debug-ui__grid {
  display: none;
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--base-unit) - 1px), rgba(0, 160, 255, 0.1) 0 var(--base-unit)), repeating-linear-gradient(to bottom, transparent 0 calc(var(--base-unit--s) - 1px), rgba(0, 160, 255, 0.05) 0 var(--base-unit--s));
}
.u_debug--grid .u_debug-ui__grid {
  display: block;
}
.u_debug-ui__grid::before, .u_debug-ui__grid::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: var(--gutter);
  background-color: rgba(255, 0, 170, 0.07);
}
.u_debug-ui__grid::before {
  inset-inline-start: 0;
}
.u_debug-ui__grid::after {
  inset-inline-end: 0;
}

.u_debug-ui__bp {
  position: absolute;
  inset-block: 0;
  border-inline-start: 1px dashed currentcolor;
}
.u_debug-ui__bp span {
  position: sticky;
  inset-block-start: 6px;
  display: inline-block;
  margin-inline-start: 3px;
  padding: 1px 4px;
  background-color: #1d1d1f;
  color: inherit;
  white-space: nowrap;
}

.u_debug-ui__label {
  position: absolute;
  padding: 1px 4px;
  background-color: rgba(29, 29, 31, 0.8);
  white-space: nowrap;
  opacity: 0.6;
}
.u_debug-ui__label.is-active {
  background-color: #ff5a36;
  opacity: 1;
  z-index: 1;
}

.u_debug-ui__box {
  position: absolute;
  outline: 2px solid #ff5a36;
  outline-offset: -1px;
}

.u_debug-ui__container {
  position: absolute;
  border: 1px dashed rgb(0, 150, 110);
}
.u_debug-ui__container span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  padding: 1px 4px;
  background-color: rgb(0, 150, 110);
  color: #fff;
  white-space: nowrap;
}

.u_debug-bar {
  position: fixed;
  z-index: 2147483001;
  inset-block-end: max(var(--base-unit), env(safe-area-inset-bottom, 0px));
  inset-inline-start: max(8px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-inline-size: calc(100vw - 16px);
  padding: 3px;
  border-radius: 6px;
  background-color: #1d1d1f;
  color: #f2f2f2;
  font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.u_debug-bar button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 4px;
  color: #a3a3a3;
}
.u_debug-bar button:hover {
  color: #f2f2f2;
  background-color: rgba(255, 255, 255, 0.08);
}
.u_debug-bar button[aria-pressed=true] {
  color: #f2f2f2;
  background-color: rgba(255, 255, 255, 0.18);
}
.u_debug-bar button:focus-visible {
  outline: 2px solid #ff5a36;
}
.u_debug-bar__toggle {
  display: flex;
}
.u_debug-bar__toggle svg {
  inline-size: 16px;
  block-size: 16px;
  fill: currentcolor;
}
.u_debug-bar__toggle[aria-expanded=true] {
  color: #ff5a36 !important;
}
.u_debug-bar__info {
  padding-inline: 6px;
  white-space: nowrap;
  color: #a3a3a3;
}
.u_debug-bar__info b {
  color: #f2f2f2;
  font-weight: 600;
}
.u_debug-bar:not(.is-open) > :not(.u_debug-bar__toggle) {
  display: none;
}
.u_debug-bar__panel {
  order: -1;
  flex-basis: 100%;
  padding: 4px 4px 6px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
.u_debug-bar__panel[hidden] {
  display: none;
}
.u_debug-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.u_debug-bar__row-label {
  inline-size: 80px;
  color: #a3a3a3;
}
.u_debug-bar__tag {
  flex: 1;
  max-inline-size: 420px;
  margin-block-start: 4px;
  padding: 5px 7px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.06);
  color: #f2f2f2;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

/*# sourceMappingURL=default.css.map */