/*
 * Gouache: a painter's sheet. The page is warm cotton paper with a faint tooth; each section heading has a watercolour
 * wash pooled behind it and a brush stroke laid under it; tinted bands are separate sheets with deckled edges; pictures
 * are cut from a pad with the same soft, torn edge; cards carry a strip of paint along their top like a paint chip;
 * buttons are dabs of paint; numbers sit in blots. The words stay plain and readable on top of all of it.
 *
 * This file: the paint (the masks every part uses, generated by .tmp/themes-157/gouache/art.mjs), the frame (header,
 * phone menu, footer, announcement, breadcrumbs, the page not found), the theme's own blocks (the split hero, the article
 * body, the divider), and the paint laid on the stock blocks the Theme Kit draws, by their type (data-block and data-wash,
 * includes/wash.php). The kit's own tokens and parts are in kit-theme.css. theme.css is linked before kit.css, so a rule
 * here for a kit class starts with .kit-root to outweigh the kit's own.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair: a website with its own
 * dark colours would get unreadable text. A dark palette is just other values for the same tokens: nothing here asks
 * whether the page is dark. The washes are faint (about an eighth of the colour) and lie mostly in the margin beside a
 * heading, so a word on one keeps its contrast.
 *
 * Type comes from the layout: --font-heading, --font-body, --gouache-heading-weight and --gouache-body-strong (the
 * heaviest weights the font palette loads) and --gouache-heading-light (its lightest heading weight). Never write a
 * font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --gouache-width: 72rem;
  --gouache-gutter: clamp(1rem, 4vw, 2.25rem);
  --gouache-bar: 4.5rem;
  --gouache-radius: 1rem;
  /* The button's dab of paint, the same as --kit-button-radius in kit-theme.css and the theme's line in resilience.css. */
  --gouache-button-radius: 1.6rem 1.1rem 1.5rem 1.2rem / 1.2rem 1.5rem 1.1rem 1.6rem;
  --gouache-heading-weight: 400;
  --gouache-heading-light: 400;
  --gouache-body-strong: 700;
  --gouache-speed: 180ms;
  --gouache-line: var(--border, #e0d3ba);
  /* The paints laid on the page, in turn: the accent, the main colour, the two mixed, and the main colour thinned with
     the paper. Decoration only: no word is ever set on one of these except the accent, with its own on-accent colour. */
  --gouache-ink-1: var(--accent, #c2461b);
  --gouache-ink-2: var(--primary, #22318a);
  --gouache-ink-3: color-mix(in srgb, var(--accent, #c2461b) 50%, var(--primary, #22318a));
  --gouache-ink-4: color-mix(in srgb, var(--primary, #22318a) 55%, var(--background, #f8f3e8));
  /* How strong a wash is: a little of the paint, the rest water. */
  --gouache-wash: 20%;
  /* The depth of a deckled edge. */
  --gouache-deckle: 0.9rem;
}

/* ------------------------------------------------------------------ The paint */

/* The masks: deckled paper edges for each side (a strip 240 by 16 that repeats), four watercolour washes (a pool with a
   darker rim and a lighter glaze), three brush strokes (full at the start, dry at the end), a dab, a paint chip, and the
   paper's grain (a picture, not a mask: light and dark specks that read on any colour). Generated, never edited by hand:
   node .tmp/themes-157/gouache/art.mjs. */
:where(:root) {
  --gouache-deckle-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cfilter id='f' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' seed='56'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M-4 26 L-4 7 L0 7 L1.6 5.5 L3.2 6.6 L4.8 7.4 L6.4 7.5 L8 8 L9.6 7.8 L11.2 7.8 L12.8 9 L14.4 9 L16 8.6 L17.6 9.4 L19.2 9.3 L20.8 10.9 L22.4 10.8 L24 11.1 L25.6 9.6 L27.2 8.7 L28.8 9.2 L30.4 8.9 L32 8.9 L33.6 8.1 L35.2 7.8 L36.8 8.1 L38.4 8.4 L40 7.6 L41.6 6.2 L43.2 5.6 L44.8 5.6 L46.4 6.5 L48 6.6 L49.6 5.5 L51.2 5.9 L52.8 6.7 L54.4 6.5 L56 7.1 L57.6 6.6 L59.2 6 L60.8 6.1 L62.4 6.3 L64 5.9 L65.6 5.4 L67.2 5.2 L68.8 4.8 L70.4 5.8 L72 6.5 L73.6 7 L75.2 6.9 L76.8 7.3 L78.4 7.2 L80 7.8 L81.6 7.6 L83.2 6.8 L84.8 6.4 L86.4 6.9 L88 7.5 L89.6 7 L91.2 7.2 L92.8 7.4 L94.4 8.1 L96 9 L97.6 8.8 L99.2 9.1 L100.8 8.8 L102.4 9 L104 9.3 L105.6 8.9 L107.2 8.6 L108.8 8.2 L110.4 9.8 L112 10.3 L113.6 12.4 L115.2 12.3 L116.8 12.5 L118.4 12.1 L120 11.4 L121.6 11.7 L123.2 10.6 L124.8 9.5 L126.4 8.1 L128 8.2 L129.6 7.5 L131.2 6.8 L132.8 6.1 L134.4 5.5 L136 5.7 L137.6 6.1 L139.2 6.2 L140.8 5.8 L142.4 6.6 L144 6.7 L145.6 7 L147.2 6.6 L148.8 6.1 L150.4 5.9 L152 5.5 L153.6 6.3 L155.2 6.2 L156.8 5.8 L158.4 5.7 L160 7 L161.6 7.1 L163.2 8.5 L164.8 8.4 L166.4 7.6 L168 7.7 L169.6 8.1 L171.2 8.4 L172.8 8.3 L174.4 7.2 L176 7.9 L177.6 8.4 L179.2 9.2 L180.8 9.3 L182.4 9.8 L184 9.4 L185.6 9.7 L187.2 10.5 L188.8 10.3 L190.4 8.8 L192 8.2 L193.6 7.9 L195.2 8.3 L196.8 7.1 L198.4 6.3 L200 6 L201.6 6.6 L203.2 7.1 L204.8 6.9 L206.4 7.2 L208 6.3 L209.6 6.6 L211.2 6.8 L212.8 6.6 L214.4 6 L216 5.5 L217.6 4.8 L219.2 5.2 L220.8 5.8 L222.4 5.1 L224 5.3 L225.6 5.9 L227.2 6.3 L228.8 7.2 L230.4 6.8 L232 6.6 L233.6 6.5 L235.2 6.8 L236.8 7.2 L238.4 7.1 L240 7 L244 7 L244 26 Z'/%3E%3C/svg%3E");
  --gouache-deckle-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cfilter id='f' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' seed='62'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cpath transform='matrix(1 0 0 -1 0 16)' filter='url(%23f)' d='M-4 26 L-4 7 L0 7 L1.6 7.6 L3.2 7.5 L4.8 7.4 L6.4 9 L8 9.6 L9.6 9.7 L11.2 8.8 L12.8 9 L14.4 9.5 L16 9.9 L17.6 9.5 L19.2 8.1 L20.8 7.8 L22.4 9 L24 8.9 L25.6 8.4 L27.2 8.4 L28.8 8 L30.4 8.2 L32 8.3 L33.6 8.6 L35.2 7.5 L36.8 6 L38.4 6.3 L40 6.3 L41.6 6.3 L43.2 5.1 L44.8 5.5 L46.4 5.4 L48 6.2 L49.6 6.6 L51.2 6.6 L52.8 6.3 L54.4 6.5 L56 6.8 L57.6 7.1 L59.2 6 L60.8 5.2 L62.4 5 L64 6.2 L65.6 6.4 L67.2 7.1 L68.8 7.7 L70.4 8.1 L72 9.8 L73.6 11.1 L75.2 10.6 L76.8 10.4 L78.4 10.1 L80 9.5 L81.6 8.9 L83.2 8.3 L84.8 8 L86.4 6.6 L88 7.8 L89.6 8.3 L91.2 8.4 L92.8 8.3 L94.4 8.3 L96 8.8 L97.6 8.8 L99.2 9.1 L100.8 8.1 L102.4 7.7 L104 7.5 L105.6 7.3 L107.2 7.1 L108.8 7 L110.4 6.7 L112 6.3 L113.6 7.2 L115.2 7.7 L116.8 7.6 L118.4 6.8 L120 6.5 L121.6 7.2 L123.2 6.9 L124.8 6.7 L126.4 5.3 L128 4.6 L129.6 4.8 L131.2 6 L132.8 6 L134.4 5.8 L136 6 L137.6 6.3 L139.2 6.7 L140.8 7.4 L142.4 6.9 L144 6.5 L145.6 6.5 L147.2 6.9 L148.8 7.2 L150.4 7.3 L152 6.7 L153.6 7.4 L155.2 8.3 L156.8 8.6 L158.4 8.5 L160 8.3 L161.6 8.6 L163.2 9.1 L164.8 9.5 L166.4 9.6 L168 8.7 L169.6 8.9 L171.2 10 L172.8 10.1 L174.4 9.7 L176 8.6 L177.6 8.1 L179.2 8.3 L180.8 9.1 L182.4 8.9 L184 8.6 L185.6 7.7 L187.2 8 L188.8 8.3 L190.4 8.2 L192 7.6 L193.6 7.1 L195.2 7.2 L196.8 7.3 L198.4 8.2 L200 7.4 L201.6 7.1 L203.2 7.4 L204.8 7.8 L206.4 7.9 L208 7.2 L209.6 6.5 L211.2 5.4 L212.8 5.7 L214.4 5.6 L216 5.2 L217.6 5 L219.2 5 L220.8 5.8 L222.4 6.7 L224 6.7 L225.6 6.9 L227.2 6.2 L228.8 7.3 L230.4 7.6 L232 7.3 L233.6 6.7 L235.2 6.5 L236.8 6.7 L238.4 6.7 L240 7 L244 7 L244 26 Z'/%3E%3C/svg%3E");
  --gouache-deckle-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='240' viewBox='0 0 16 240'%3E%3Cfilter id='f' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' seed='31'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cpath transform='matrix(0 1 1 0 0 0)' filter='url(%23f)' d='M-4 26 L-4 7 L0 7 L1.6 7.8 L3.2 7.3 L4.8 7.8 L6.4 8.6 L8 8.4 L9.6 7.9 L11.2 6.8 L12.8 6.2 L14.4 6.6 L16 6.7 L17.6 6.1 L19.2 5 L20.8 5.6 L22.4 6.6 L24 6.6 L25.6 6.6 L27.2 6 L28.8 6.9 L30.4 7 L32 7.7 L33.6 7.1 L35.2 7 L36.8 6.5 L38.4 7.2 L40 7.7 L41.6 8 L43.2 7.1 L44.8 6.9 L46.4 7.8 L48 8 L49.6 7.8 L51.2 7.5 L52.8 7.6 L54.4 8.2 L56 8.3 L57.6 8.7 L59.2 8.4 L60.8 8.4 L62.4 9.5 L64 10.4 L65.6 11.1 L67.2 11.2 L68.8 11 L70.4 11.4 L72 11.9 L73.6 12 L75.2 10.9 L76.8 9.1 L78.4 8.7 L80 8 L81.6 8.2 L83.2 7.8 L84.8 7.1 L86.4 7.2 L88 8.5 L89.6 9.3 L91.2 9.9 L92.8 10.1 L94.4 9.9 L96 10.5 L97.6 9.7 L99.2 9.1 L100.8 7.4 L102.4 6.2 L104 6.2 L105.6 6.1 L107.2 5.7 L108.8 6.1 L110.4 5.4 L112 5.7 L113.6 6.9 L115.2 6.7 L116.8 7 L118.4 5.7 L120 6.3 L121.6 6.1 L123.2 6.5 L124.8 6.1 L126.4 5.8 L128 5.5 L129.6 6.3 L131.2 7 L132.8 7.1 L134.4 7.1 L136 7.5 L137.6 8.5 L139.2 8.5 L140.8 8.2 L142.4 7.9 L144 7.1 L145.6 7 L147.2 7.4 L148.8 7.6 L150.4 7.4 L152 7.8 L153.6 8.8 L155.2 10.6 L156.8 10.6 L158.4 9.5 L160 8.7 L161.6 8 L163.2 8.1 L164.8 8.1 L166.4 7.2 L168 6.3 L169.6 5.8 L171.2 6.9 L172.8 7.3 L174.4 6.8 L176 6.7 L177.6 6.4 L179.2 7.2 L180.8 7.4 L182.4 6.7 L184 6.4 L185.6 5.4 L187.2 5.7 L188.8 5.6 L190.4 5.6 L192 4.8 L193.6 4.4 L195.2 5.1 L196.8 6.6 L198.4 6.8 L200 6.8 L201.6 6.5 L203.2 6.7 L204.8 7.7 L206.4 7.4 L208 6.8 L209.6 6.1 L211.2 6.3 L212.8 6.3 L214.4 6.7 L216 6.6 L217.6 6.7 L219.2 7.8 L220.8 8.5 L222.4 9.6 L224 9.9 L225.6 10.3 L227.2 10.2 L228.8 10.4 L230.4 9.8 L232 9.7 L233.6 7.9 L235.2 7.4 L236.8 7.4 L238.4 8.1 L240 7 L244 7 L244 26 Z'/%3E%3C/svg%3E");
  --gouache-deckle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='240' viewBox='0 0 16 240'%3E%3Cfilter id='f' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' seed='37'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cpath transform='matrix(0 1 -1 0 16 0)' filter='url(%23f)' d='M-4 26 L-4 7 L0 7 L1.6 5.3 L3.2 6 L4.8 7.5 L6.4 8.2 L8 8.8 L9.6 8.6 L11.2 9.7 L12.8 10.6 L14.4 11.1 L16 10.4 L17.6 9.8 L19.2 8.8 L20.8 9.4 L22.4 9.1 L24 9 L25.6 8.6 L27.2 8.3 L28.8 9.1 L30.4 9.6 L32 9.1 L33.6 8.2 L35.2 7.6 L36.8 7.9 L38.4 8.1 L40 8.1 L41.6 7.2 L43.2 7 L44.8 7.2 L46.4 7.3 L48 8 L49.6 7.8 L51.2 7.4 L52.8 7 L54.4 8.1 L56 7.5 L57.6 6.9 L59.2 5.9 L60.8 5.1 L62.4 5.5 L64 5.8 L65.6 5.5 L67.2 5.3 L68.8 5.3 L70.4 6 L72 7 L73.6 7.1 L75.2 6.1 L76.8 5.6 L78.4 6.2 L80 6.1 L81.6 5.8 L83.2 5.3 L84.8 4.8 L86.4 5.2 L88 6.2 L89.6 6.6 L91.2 6.7 L92.8 6.6 L94.4 7.4 L96 8.6 L97.6 8.3 L99.2 7.9 L100.8 7 L102.4 7.6 L104 7.6 L105.6 8 L107.2 6.9 L108.8 6.9 L110.4 7.2 L112 8.5 L113.6 9.3 L115.2 8.7 L116.8 9 L118.4 8.5 L120 9.1 L121.6 9.6 L123.2 9 L124.8 8.2 L126.4 7.5 L128 7.8 L129.6 7.7 L131.2 7.9 L132.8 7 L134.4 7.2 L136 7.3 L137.6 7.9 L139.2 7.7 L140.8 7.4 L142.4 6.3 L144 5.9 L145.6 6.1 L147.2 6.3 L148.8 5.3 L150.4 4.6 L152 4.7 L153.6 6.2 L155.2 6.1 L156.8 6.5 L158.4 6.6 L160 7.5 L161.6 8.5 L163.2 8.5 L164.8 9 L166.4 7.9 L168 8.5 L169.6 8.5 L171.2 8.5 L172.8 8.4 L174.4 7.7 L176 8.3 L177.6 8.4 L179.2 9.5 L180.8 9.6 L182.4 9.3 L184 8.8 L185.6 8.9 L187.2 10 L188.8 10.1 L190.4 9.2 L192 10 L193.6 10.1 L195.2 10.7 L196.8 11.2 L198.4 10.4 L200 9.5 L201.6 9.5 L203.2 9.8 L204.8 9.8 L206.4 8.4 L208 7.5 L209.6 7.3 L211.2 7.1 L212.8 7.1 L214.4 7 L216 7.1 L217.6 6.9 L219.2 7.4 L220.8 7.7 L222.4 7.7 L224 6.6 L225.6 6.3 L227.2 6.5 L228.8 7.2 L230.4 7.1 L232 6.1 L233.6 5 L235.2 5.6 L236.8 5.6 L238.4 6.1 L240 7 L244 7 L244 26 Z'/%3E%3C/svg%3E");
  --gouache-wash-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cfilter id='w' x='-20%25' y='-25%25' width='140%25' height='150%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='11' result='lo'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='lo' scale='70' xChannelSelector='R' yChannelSelector='G' result='shape'/%3E%3CfeGaussianBlur in='shape' stdDeviation='1.4' result='soft'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='16' result='hi'/%3E%3CfeColorMatrix in='hi' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0.3' result='grain'/%3E%3CfeComposite in='soft' in2='grain' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Cg filter='url(%23w)' fill='%23000' fill-opacity='0.5' stroke='%23000' stroke-opacity='0.9' stroke-width='5'%3E%3Cellipse cx='200' cy='150' rx='150' ry='96'/%3E%3Cellipse cx='245' cy='128' rx='92' ry='62' fill-opacity='0.35' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --gouache-wash-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cfilter id='w' x='-20%25' y='-25%25' width='140%25' height='150%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='23' result='lo'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='lo' scale='70' xChannelSelector='R' yChannelSelector='G' result='shape'/%3E%3CfeGaussianBlur in='shape' stdDeviation='1.4' result='soft'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='28' result='hi'/%3E%3CfeColorMatrix in='hi' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0.3' result='grain'/%3E%3CfeComposite in='soft' in2='grain' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Cg filter='url(%23w)' fill='%23000' fill-opacity='0.5' stroke='%23000' stroke-opacity='0.9' stroke-width='5'%3E%3Cpath d='M70 170 C60 90 150 60 230 70 C320 80 350 140 330 190 C305 245 200 250 140 235 C95 225 75 205 70 170 Z'/%3E%3Cellipse cx='170' cy='175' rx='80' ry='48' fill-opacity='0.3' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --gouache-wash-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cfilter id='w' x='-20%25' y='-25%25' width='140%25' height='150%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='37' result='lo'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='lo' scale='70' xChannelSelector='R' yChannelSelector='G' result='shape'/%3E%3CfeGaussianBlur in='shape' stdDeviation='1.4' result='soft'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='42' result='hi'/%3E%3CfeColorMatrix in='hi' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0.3' result='grain'/%3E%3CfeComposite in='soft' in2='grain' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Cg filter='url(%23w)' fill='%23000' fill-opacity='0.5' stroke='%23000' stroke-opacity='0.9' stroke-width='5'%3E%3Cpath d='M60 140 C80 80 170 70 250 85 C330 100 355 160 320 205 C285 245 190 240 130 225 C80 212 50 185 60 140 Z'/%3E%3Cellipse cx='260' cy='150' rx='70' ry='55' fill-opacity='0.32' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --gouache-wash-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Cfilter id='w' x='-20%25' y='-25%25' width='140%25' height='150%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='52' result='lo'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='lo' scale='70' xChannelSelector='R' yChannelSelector='G' result='shape'/%3E%3CfeGaussianBlur in='shape' stdDeviation='1.4' result='soft'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='57' result='hi'/%3E%3CfeColorMatrix in='hi' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0.3' result='grain'/%3E%3CfeComposite in='soft' in2='grain' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Cg filter='url(%23w)' fill='%23000' fill-opacity='0.5' stroke='%23000' stroke-opacity='0.9' stroke-width='5'%3E%3Cellipse cx='200' cy='150' rx='160' ry='88'/%3E%3Cellipse cx='150' cy='160' rx='85' ry='50' fill-opacity='0.3' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --gouache-stroke-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='30' viewBox='0 0 320 30' preserveAspectRatio='none'%3E%3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-opacity='1'/%3E%3Cstop offset='0.7' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-opacity='0.55'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-3%25' y='-40%25' width='106%25' height='180%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.3' numOctaves='2' seed='7' result='edge'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='edge' scale='5' result='shape'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.45' numOctaves='2' seed='10' result='streaks'/%3E%3CfeComponentTransfer in='streaks' result='dry'%3E%3CfeFuncA type='table' tableValues='0 0.25 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='shape' in2='dry' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='url(%23t)' d='M6 12 C40 5 110 4 190 5 C240 6 285 7 314 9 C292 17 240 22 180 24 C110 26 50 27 8 26 C2 22 2 15 6 12 Z'/%3E%3C/svg%3E");
  --gouache-stroke-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='30' viewBox='0 0 320 30' preserveAspectRatio='none'%3E%3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-opacity='1'/%3E%3Cstop offset='0.7' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-opacity='0.55'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-3%25' y='-40%25' width='106%25' height='180%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.3' numOctaves='2' seed='19' result='edge'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='edge' scale='5' result='shape'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.45' numOctaves='2' seed='22' result='streaks'/%3E%3CfeComponentTransfer in='streaks' result='dry'%3E%3CfeFuncA type='table' tableValues='0 0.25 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='shape' in2='dry' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='url(%23t)' d='M5 14 C50 7 120 5 200 7 C250 8 290 5 316 4 C302 13 262 21 200 23 C130 25 60 27 9 27 C2 24 1 18 5 14 Z'/%3E%3C/svg%3E");
  --gouache-stroke-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='30' viewBox='0 0 320 30' preserveAspectRatio='none'%3E%3ClinearGradient id='t' x1='0' x2='1'%3E%3Cstop offset='0' stop-opacity='1'/%3E%3Cstop offset='0.7' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-opacity='0.55'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-3%25' y='-40%25' width='106%25' height='180%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.3' numOctaves='2' seed='31' result='edge'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='edge' scale='5' result='shape'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.45' numOctaves='2' seed='34' result='streaks'/%3E%3CfeComponentTransfer in='streaks' result='dry'%3E%3CfeFuncA type='table' tableValues='0 0.25 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='shape' in2='dry' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='url(%23t)' d='M7 9 C60 6 130 9 200 7 C255 5 296 8 316 12 C294 19 246 21 190 23 C120 26 55 26 10 25 C3 21 3 13 7 9 Z'/%3E%3C/svg%3E");
  --gouache-dab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='d' x='-20%25' y='-20%25' width='140%25' height='140%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Cg filter='url(%23d)'%3E%3Ccircle cx='32' cy='32' r='24' fill='%23000' fill-opacity='0.82' stroke='%23000' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --gouache-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='c' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3'/%3E%3C/filter%3E%3Cpath filter='url(%23c)' d='M5 6 L58 4.5 L59.5 57 L6.5 59 Z'/%3E%3C/svg%3E");
  --gouache-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.18 0 0 0 -0.9 0.5'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Base */

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

html {
  scroll-padding-top: calc(var(--gouache-bar) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The paper, with its tooth. */
body {
  margin: 0;
  background-color: var(--background, #f8f3e8);
  background-image: var(--gouache-grain);
  color: var(--text-primary, #1d1f2c);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink, #9a3613);
  outline-offset: 3px;
}

.gouache-main {
  display: block;
  min-height: 40vh;
}

.gouache-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--gouache-button-radius);
  background: var(--primary, #22318a);
  color: var(--on-primary, #ffffff);
  font-weight: var(--gouache-body-strong);
  text-decoration: none;
}

.gouache-skip-link:focus {
  top: 1rem;
}

.gouache-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* A brush stroke under a heading: a short swipe of the accent, laid from the heading's start (its middle when the heading
   is centred). Decoration only, hidden from screen readers by being a pseudo-element without words. */
.kit-root .kit-heading-group:has(> .kit-heading--1, > .kit-heading--2)::after {
  content: "";
  display: block;
  inline-size: clamp(4.5rem, 12vw, 7.5rem);
  block-size: 0.7rem;
  margin-block-start: 0.55rem;
  background: var(--gouache-ink-1);
  -webkit-mask: var(--gouache-stroke-1) center / 100% 100% no-repeat;
  mask: var(--gouache-stroke-1) center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button the theme draws itself: a dab of paint. kit-theme.css gives the kit's buttons the same
   corner, and the line of this theme in resilience.css (--chrome-button-radius) gives it to the cookie notice and the
   phone action bar: theme-chrome.test.mjs holds the three together. A label may take two lines; it never runs out of the
   button. */
.gouache-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  max-width: 100%;
  padding: 0.65rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--gouache-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9688rem;
  font-weight: var(--gouache-body-strong);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--gouache-speed) ease, border-color var(--gouache-speed) ease, transform var(--gouache-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.gouache-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Under the pointer a dab tilts a little, as if just pressed onto the page. */
.gouache-button:hover,
.kit-root .kit-button:is(.kit-button--primary, .kit-button--secondary):hover {
  transform: rotate(-1.2deg);
}

.gouache-button--primary {
  background: var(--primary, #22318a);
  color: var(--on-primary, #ffffff);
}

.gouache-button--primary:hover {
  background: var(--primary-alt, #2f40a0);
}

.gouache-button--accent {
  background: var(--accent, #c2461b);
  color: var(--on-accent, #ffffff);
}

/* The hover is a ring in the words' colour, not a lighter fill: a lighter fill would bring the words' contrast under
   what the colour contract promises for this pair. */
.gouache-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 55%, transparent);
}

.gouache-button--secondary {
  border-color: var(--text-primary, #1d1f2c);
  background: transparent;
  color: var(--text-primary, #1d1f2c);
}

.gouache-button--secondary:hover {
  background: color-mix(in srgb, var(--accent, #c2461b) 12%, transparent);
}

.gouache-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.875rem;
}

.gouache-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement */

.gouache-announcement {
  background: var(--primary, #22318a);
  color: var(--on-primary, #ffffff);
  font-size: 0.875rem;
}

.gouache-announcement[hidden] {
  display: none;
}

.gouache-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: calc(var(--gouache-width) + 2 * var(--gouache-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--gouache-gutter);
  text-align: center;
}

.gouache-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

.gouache-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.gouache-announcement a {
  font-weight: var(--gouache-body-strong);
  text-underline-offset: 0.25em;
}

.gouache-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.gouache-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ------------------------------------------------------------------ Header */

/* A sheet of the lighter paper that stays at the top, its lower edge torn: the strip under it (::after) is the same
   paper, deckled, and lies over the page as it scrolls by. The bar has one height for every kind; the centred kind adds
   a row for the menu. */
.gouache-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--surface, #fffcf5);
  background-image: var(--gouache-grain);
  color: var(--text-primary, #1d1f2c);
}

.gouache-header::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  height: var(--gouache-deckle);
  background-color: var(--surface, #fffcf5);
  pointer-events: none;
  -webkit-mask: var(--gouache-deckle-bottom) 0 0 / 240px 100% repeat-x;
  mask: var(--gouache-deckle-bottom) 0 0 / 240px 100% repeat-x;
}

.gouache-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: var(--gouache-bar);
  max-width: calc(var(--gouache-width) + 2 * var(--gouache-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--gouache-gutter);
}

.gouache-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them. */
.gouache-header--centered .gouache-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.gouache-header--centered .gouache-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.gouache-header--centered .gouache-header__actions {
  grid-column: 3;
  justify-self: end;
}

.gouache-header__rail {
  max-width: calc(var(--gouache-width) + 2 * var(--gouache-gutter));
  margin-inline: auto;
  padding: 0 var(--gouache-gutter) 0.5rem;
}

.gouache-header__rail .gouache-nav {
  justify-content: center;
}

.gouache-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.gouache-header__phone {
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--gouache-body-strong);
  text-decoration: none;
  white-space: nowrap;
}

.gouache-header__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.gouache-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name, in the heading face, after a small paint chip in the accent (only when there is no logo: a logo is
   the mark). Its line height and the small padding leave room for what letters carry above and below (the caron of Š,
   the tail of Ų, the descender of g): a tighter line in a box that clips cuts them (theme-clipped-marks.test.mjs, with
   "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two balanced lines and the shared script
   sets it smaller before a word would break; this rule only sets its look. */
.gouache-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.gouache-brand__chip {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--gouache-ink-1);
  transform: rotate(-6deg);
  -webkit-mask: var(--gouache-chip) center / 100% 100% no-repeat;
  mask: var(--gouache-chip) center / 100% 100% no-repeat;
}

.gouache-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(27rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.375rem;
  font-weight: var(--gouache-heading-weight);
  letter-spacing: 0;
  line-height: 1.3;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.gouache-header .gouache-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .gouache-header .gouache-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.1875rem;
  }

  .gouache-brand__chip {
    width: 0.9rem;
    height: 0.9rem;
  }
}

.gouache-brand:has(.gouache-brand__logo, .brand-logo-original, .logo-mask) .gouache-brand__name {
  font-size: 1.125rem;
}

/* The shared render_logo() writes its own max-height inline, so the size here needs the !important. */
.gouache-header .gouache-brand__logo,
.gouache-header .brand-logo-original {
  max-height: 2.75rem !important;
  width: auto;
}

.gouache-header .logo-mask {
  background-color: var(--text-primary, #1d1f2c) !important;
}

/* ------------------------------------------------------------------ Topbar */

.gouache-topbar {
  border-bottom: 1px dashed var(--gouache-line);
  color: var(--text-secondary, #4d4b57);
  font-size: 0.8125rem;
}

.gouache-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--gouache-width) + 2 * var(--gouache-gutter));
  min-height: 2.25rem;
  margin-inline: auto;
  padding: 0 var(--gouache-gutter);
}

.gouache-topbar__contact {
  display: flex;
  gap: 1.5rem;
  min-width: 0;
}

.gouache-topbar a {
  color: inherit;
  text-decoration: none;
}

.gouache-topbar a:hover {
  text-decoration: underline;
}

.gouache-topbar__social,
.gouache-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gouache-topbar__social svg,
.gouache-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .gouache-topbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ Navigation */

.gouache-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  min-width: 0;
}

.gouache-header--simple .gouache-nav,
.gouache-header--topbar .gouache-nav {
  margin-left: auto;
}

.gouache-nav__item {
  position: relative;
}

/* A page's link. Under the pointer a small wash of the accent soaks in behind it; the page being shown has a brush stroke
   under its name. */
.gouache-nav__item > a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  color: inherit;
  font-size: 0.9688rem;
  font-weight: var(--gouache-body-strong);
  line-height: 1.3;
  text-decoration: none;
}

.gouache-nav__item > a::before {
  content: "";
  position: absolute;
  inset: -0.1rem -0.2rem;
  z-index: -1;
  background: color-mix(in srgb, var(--accent, #c2461b) 22%, transparent);
  opacity: 0;
  transition: opacity var(--gouache-speed) ease;
  -webkit-mask: var(--gouache-wash-4) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-4) center / 100% 100% no-repeat;
}

.gouache-nav__item > a:hover::before,
.gouache-nav__item--parent:focus-within > a::before {
  opacity: 1;
}

/* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu button.
   Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
.gouache-nav__item {
  min-width: 0;
}

.gouache-nav__item.is-current > a::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  bottom: 0.05rem;
  left: 0.6rem;
  height: 0.45rem;
  background: var(--gouache-ink-1);
  -webkit-mask: var(--gouache-stroke-2) center / 100% 100% no-repeat;
  mask: var(--gouache-stroke-2) center / 100% 100% no-repeat;
}

.gouache-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.gouache-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.45rem;
  border: 1px solid var(--gouache-line);
  border-radius: 1.1rem 0.8rem 1rem 0.9rem;
  background: var(--surface, #fffcf5);
  color: var(--text-primary, #1d1f2c);
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--text-primary, #1d1f2c) 40%, transparent);
  visibility: hidden;
  opacity: 0;
}

.gouache-nav__item--parent:is(:hover, :focus-within) > .gouache-nav__children {
  visibility: visible;
  opacity: 1;
}

.gouache-nav__children a {
  padding: 0.5rem 0.75rem;
  border-radius: 0.7rem 0.5rem 0.65rem 0.55rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.gouache-nav__children a:hover {
  background: color-mix(in srgb, var(--accent, #c2461b) 12%, transparent);
}

/* The menu button: three brush lines that turn into a cross. Hidden on a wide screen unless resilience.js folds the
   menu into it (theme-nav-compact on #site-header, whose shared rules show it). */
.gouache-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: var(--gouache-button-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.gouache-menu-button:hover {
  background: color-mix(in srgb, var(--accent, #c2461b) 14%, transparent);
}

.gouache-menu-button__lines {
  display: grid;
  gap: 0.28rem;
  width: 1.2rem;
}

.gouache-menu-button__lines i {
  display: block;
  height: 2.5px;
  border-radius: 2px 1px 2px 1px;
  background: currentColor;
  transition: transform var(--gouache-speed) ease, opacity var(--gouache-speed) ease;
}

.gouache-menu-button__lines i:nth-child(2) {
  width: 80%;
}

.gouache-menu-button[aria-expanded="true"] .gouache-menu-button__lines i:nth-child(1) {
  transform: translateY(0.41rem) rotate(45deg);
}

.gouache-menu-button[aria-expanded="true"] .gouache-menu-button__lines i:nth-child(2) {
  opacity: 0;
}

.gouache-menu-button[aria-expanded="true"] .gouache-menu-button__lines i:nth-child(3) {
  transform: translateY(-0.41rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A sheet under the bar with every page, its lower edge deckled like the bar's. It scrolls inside itself when the pages
   are many, so the last one is always reachable. */
.gouache-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 1;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--gouache-head). With the bar's own height here, the foot of a long menu lay under the window's edge and its last
     link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--gouache-head, var(--gouache-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--surface, #fffcf5);
  background-image: var(--gouache-grain);
  color: var(--text-primary, #1d1f2c);
  /* Its foot torn like the bar's. */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--gouache-deckle) + 3px) no-repeat,
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--gouache-deckle) + 3px) no-repeat,
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x;
}

.gouache-drawer[hidden] {
  display: none;
}

.gouache-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.5rem var(--gouache-gutter) 1.75rem;
}

.gouache-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gouache-drawer__nav {
  counter-reset: gouache-page;
}

.gouache-drawer__item {
  border-bottom: 1px dashed var(--gouache-line);
}

/* A page name in the heading face, after a paint chip of its own colour. data-fit-text (includes/chrome.php) lets the
   shared script set a long single word smaller instead of breaking it. */
.gouache-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  font-family: var(--font-heading, serif);
  font-size: 1.375rem;
  font-weight: var(--gouache-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.gouache-drawer__link::before {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--gouache-ink-1);
  -webkit-mask: var(--gouache-dab) center / 100% 100% no-repeat;
  mask: var(--gouache-dab) center / 100% 100% no-repeat;
}

.gouache-drawer__item:nth-child(4n + 2) .gouache-drawer__link::before { background: var(--gouache-ink-2); }
.gouache-drawer__item:nth-child(4n + 3) .gouache-drawer__link::before { background: var(--gouache-ink-3); }
.gouache-drawer__item:nth-child(4n + 4) .gouache-drawer__link::before { background: var(--gouache-ink-4); }

.gouache-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 1.7rem;
}

.gouache-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #4d4b57);
  text-decoration: none;
}

.gouache-drawer__footer {
  display: grid;
  gap: 0.6rem;
}

.gouache-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #4d4b57);
  text-decoration: none;
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .gouache-nav,
  .gouache-header__rail,
  .gouache-header__phone,
  .gouache-header__cta,
  .gouache-header__slot {
    display: none;
  }

  .gouache-menu-button {
    display: inline-flex;
  }

  .gouache-header--centered .gouache-header__inner {
    display: flex;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .gouache-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .gouache-header--simple .gouache-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ Breadcrumbs */

.gouache-breadcrumbs {
  max-width: calc(var(--gouache-width) + 2 * var(--gouache-gutter));
  margin-inline: auto;
  padding: 1.6rem var(--gouache-gutter) 0;
}

.gouache-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #4d4b57);
  font-size: 0.875rem;
  list-style: none;
}

.gouache-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Between two steps a small dab of the accent. */
.gouache-breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gouache-ink-1);
  -webkit-mask: var(--gouache-dab) center / 100% 100% no-repeat;
  mask: var(--gouache-dab) center / 100% 100% no-repeat;
}

.gouache-breadcrumbs a {
  text-decoration: none;
}

.gouache-breadcrumbs a:hover {
  text-decoration: underline;
}

.gouache-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #1d1f2c);
}

/* ------------------------------------------------------------------ Split hero */

/* The page's opening: the words on the paper, and beside them the picture cut from a pad with a deckled edge, laid a
   little askew on two washes of paint (the accent's under its lower corner, the main colour's above its upper one). */
.gouache-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--gouache-gutter) clamp(3rem, 7vw, 6rem);
}

.gouache-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--gouache-width);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .gouache-hero:not(.gouache-hero--words) .gouache-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.gouache-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.35rem;
  min-width: 0;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it. */
.gouache-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  font-weight: var(--gouache-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
}

.gouache-hero__title::after {
  content: "";
  display: block;
  inline-size: clamp(5.5rem, 16vw, 9.5rem);
  block-size: 0.8rem;
  margin-block-start: 0.7rem;
  background: var(--gouache-ink-1);
  -webkit-mask: var(--gouache-stroke-2) center / 100% 100% no-repeat;
  mask: var(--gouache-stroke-2) center / 100% 100% no-repeat;
}

.gouache-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #4d4b57);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.gouache-hero__points {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.gouache-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

/* Each point's icon on a small blot of its own. */
.gouache-hero__icon {
  box-sizing: content-box;
  margin-top: -0.05em;
  padding: 0.3rem;
  border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%;
  background: color-mix(in srgb, var(--accent, #c2461b) 16%, transparent);
  color: var(--accent-ink, #9a3613);
}

.gouache-hero__actions,
.gouache-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.gouache-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #4d4b57);
  font-size: 0.9375rem;
}

.gouache-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.gouache-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, var(--text-primary, #1d1f2c) 20%, transparent);
}

.gouache-stars svg.is-full {
  fill: var(--accent-ink, #9a3613);
}

.gouache-hero__trustpilot {
  color: var(--accent-ink, #9a3613);
  font-weight: var(--gouache-body-strong);
}

.gouache-hero__media {
  position: relative;
  margin: 0;
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

.gouache-hero__media::before,
.gouache-hero__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.gouache-hero__media::before {
  right: 18%;
  bottom: -22%;
  left: -24%;
  height: 88%;
  background: color-mix(in srgb, var(--accent, #c2461b) 36%, transparent);
  -webkit-mask: var(--gouache-wash-2) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-2) center / 100% 100% no-repeat;
}

.gouache-hero__media::after {
  top: -18%;
  right: -18%;
  width: 82%;
  height: 74%;
  background: color-mix(in srgb, var(--primary, #22318a) 24%, transparent);
  -webkit-mask: var(--gouache-wash-1) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-1) center / 100% 100% no-repeat;
}

.gouache-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: rotate(1.4deg);
}

/* Without a picture the words stand alone, centred, on a wide wash of the accent. */
.gouache-hero--words {
  text-align: center;
}

.gouache-hero--words::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  z-index: -1;
  width: min(58rem, 130%);
  height: 84%;
  background: color-mix(in srgb, var(--accent, #c2461b) var(--gouache-wash), transparent);
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask: var(--gouache-wash-4) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-4) center / 100% 100% no-repeat;
}

.gouache-hero--words .gouache-hero__copy {
  justify-items: center;
  max-width: 46rem;
  margin-inline: auto;
}

.gouache-hero--words .gouache-hero__title::after {
  margin-inline: auto;
}

.gouache-hero--words :is(.gouache-hero__actions, .gouache-hero__badges) {
  justify-content: center;
}

/* ------------------------------------------------------------------ Pictures cut from a pad */

/* Every picture of the page's own (the split hero's, a picture beside text, a picture in an article, a card's picture)
   has the soft, torn edge of watercolour paper: four deckled strips round the picture and its middle left whole. */
.gouache-hero__image,
.gouache-prose img,
.kit-root .kit-section:not(.kit-section--image) .kit-picture:not(.kit-fit--contain),
.kit-root .kit-gallery__image {
  -webkit-mask:
    var(--gouache-deckle-top) 0 0 / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-left) 0 0 / var(--gouache-deckle) 240px repeat-y,
    var(--gouache-deckle-right) 100% 0 / var(--gouache-deckle) 240px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--gouache-deckle) + 6px) calc(100% - 2 * var(--gouache-deckle) + 6px) no-repeat;
  mask:
    var(--gouache-deckle-top) 0 0 / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-left) 0 0 / var(--gouache-deckle) 240px repeat-y,
    var(--gouache-deckle-right) 100% 0 / var(--gouache-deckle) 240px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--gouache-deckle) + 6px) calc(100% - 2 * var(--gouache-deckle) + 6px) no-repeat;
}

.kit-root .kit-section:not(.kit-section--image) .kit-picture:not(.kit-fit--contain) {
  border-radius: 0;
}

/* A card's picture is torn along its foot only, where it meets the card's words. */
.kit-root .kit-card__media {
  -webkit-mask:
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--gouache-deckle) + 3px) no-repeat;
  mask:
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--gouache-deckle) + 3px) no-repeat;
}

/* ------------------------------------------------------------------ Sections */

/* A section heading (h1 or h2 in the kit's heading group) gets its brush stroke beneath (the rule at "The paint"); a
   centred heading's stroke is centred. */
.kit-root .kit-heading-group.kit-text--center::after {
  margin-inline: auto;
}

.kit-root .kit-heading-group.kit-text--right::after {
  margin-inline-start: auto;
}

/* Behind the heading of a marked stock block (data-wash, includes/wash.php) a watercolour wash pools: one of four shapes
   and colours in turn, reaching out into the margin beside the heading so that the words themselves stand mostly on
   the paper. The wash is the heading group's own ::before, under everything else in the section (the section is its
   own layer, kit.css). */
.kit-root [data-wash] .kit-heading-group:has(> .kit-heading--2) {
  position: relative;
}

/* The wash reaches past the heading into the margin; on a narrow screen it would reach past the window, so the section
   cuts it at its sides (never at its top or foot, where a card's shadow may fall). */
.kit-root .kit-section[data-wash] {
  overflow-x: clip;
}

.kit-root [data-wash] .kit-heading-group:has(> .kit-heading--2)::before {
  content: "";
  position: absolute;
  top: -3.5rem;
  left: -5.5rem;
  z-index: -1;
  width: min(34rem, calc(100% + 8rem));
  height: calc(100% + 7rem);
  min-height: 11rem;
  background: color-mix(in srgb, var(--gouache-ink-1) var(--gouache-wash), transparent);
  pointer-events: none;
  -webkit-mask: var(--gouache-wash-1) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-1) center / 100% 100% no-repeat;
}

.kit-root [data-wash] .kit-heading-group:has(> .kit-heading--2).kit-text--center::before {
  left: 50%;
  width: min(40rem, calc(100% + 8rem));
  transform: translateX(-62%);
}

.kit-root [data-wash="2"] .kit-heading-group:has(> .kit-heading--2)::before {
  background: color-mix(in srgb, var(--gouache-ink-2) calc(var(--gouache-wash) - 3%), transparent);
  -webkit-mask-image: var(--gouache-wash-2);
  mask-image: var(--gouache-wash-2);
}

.kit-root [data-wash="2"] .kit-heading-group:has(> .kit-heading--2).kit-text--center::before {
  transform: translateX(-36%);
}

.kit-root [data-wash="3"] .kit-heading-group:has(> .kit-heading--2)::before {
  background: color-mix(in srgb, var(--gouache-ink-3) var(--gouache-wash), transparent);
  -webkit-mask-image: var(--gouache-wash-3);
  mask-image: var(--gouache-wash-3);
}

.kit-root [data-wash="3"] .kit-heading-group:has(> .kit-heading--2).kit-text--center::before {
  transform: translateX(-56%) rotate(-4deg);
}

.kit-root [data-wash="4"] .kit-heading-group:has(> .kit-heading--2)::before {
  background: color-mix(in srgb, var(--gouache-ink-1) var(--gouache-wash), transparent);
  -webkit-mask-image: var(--gouache-wash-4);
  mask-image: var(--gouache-wash-4);
}

.kit-root [data-wash="4"] .kit-heading-group:has(> .kit-heading--2).kit-text--center::before {
  transform: translateX(-44%) rotate(3deg);
}

/* Each stroke a different swipe, in the colour of its wash. */
.kit-root [data-wash="2"] .kit-heading-group:has(> .kit-heading--2)::after {
  background: var(--gouache-ink-2);
  -webkit-mask-image: var(--gouache-stroke-2);
  mask-image: var(--gouache-stroke-2);
}

.kit-root [data-wash="3"] .kit-heading-group:has(> .kit-heading--2)::after {
  background: var(--gouache-ink-3);
  -webkit-mask-image: var(--gouache-stroke-3);
  mask-image: var(--gouache-stroke-3);
}

/* A tinted band is another sheet of paper laid on the page: its colour with the paper's tooth, its top and foot torn.
   The two strips (::before above, ::after below) are the band's own colour, deckled, reaching out over the paper. A
   coloured band (the main colour, the accent) is torn the same way. */
.kit-root .kit-section--muted {
  background-image: var(--gouache-grain);
}

.kit-root :is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::before,
.kit-root :is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: var(--gouache-deckle);
  background-color: var(--kit-section-bg, var(--kit-surface-alt));
  pointer-events: none;
}

.kit-root .kit-section--muted::before,
.kit-root .kit-section--muted::after {
  background-color: var(--surface-alt, #efe4cf);
  background-image: var(--gouache-grain);
}

.kit-root :is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::before {
  bottom: calc(100% - 1px);
  -webkit-mask: var(--gouache-deckle-top) 0 0 / 240px 100% repeat-x;
  mask: var(--gouache-deckle-top) 0 0 / 240px 100% repeat-x;
}

.kit-root :is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::after {
  top: calc(100% - 1px);
  -webkit-mask: var(--gouache-deckle-bottom) 60px 0 / 240px 100% repeat-x;
  mask: var(--gouache-deckle-bottom) 60px 0 / 240px 100% repeat-x;
}

/* A picture band (an opening across the page, an invitation on a photograph) is a painting laid on the page: inset from
   the window's edges a little, deckled on every side. The mask cuts the band itself, so nothing reaches over the paper. */
.kit-root .kit-section--image {
  margin: 0.35rem clamp(0.35rem, 1.2vw, 1rem);
  -webkit-mask:
    var(--gouache-deckle-top) 0 0 / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-left) 0 0 / var(--gouache-deckle) 240px repeat-y,
    var(--gouache-deckle-right) 100% 0 / var(--gouache-deckle) 240px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--gouache-deckle) + 6px) calc(100% - 2 * var(--gouache-deckle) + 6px) no-repeat;
  mask:
    var(--gouache-deckle-top) 0 0 / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-bottom) 0 100% / 240px var(--gouache-deckle) repeat-x,
    var(--gouache-deckle-left) 0 0 / var(--gouache-deckle) 240px repeat-y,
    var(--gouache-deckle-right) 100% 0 / var(--gouache-deckle) 240px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--gouache-deckle) + 6px) calc(100% - 2 * var(--gouache-deckle) + 6px) no-repeat;
}

/* The video band draws its own shade as ::before (kit.css); the strips above are only for the solid bands. */

/* Small labels lead with a dab of the accent. */
.kit-root .kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.kit-root .kit-eyebrow::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--kit-accent);
  -webkit-mask: var(--gouache-dab) center / 100% 100% no-repeat;
  mask: var(--gouache-dab) center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------------ Cards */

/* A card is a paint chip: a sheet of the lighter paper with a strip of paint along its top, torn along its foot. The
   strip's colour changes from card to card through the four paints. A card with a picture shows the picture there
   instead. */
.kit-root .kit-card:is(.kit-card--surface, .kit-card--outline) {
  border-radius: 1.1rem 0.85rem 1rem 0.9rem;
}

.kit-root .kit-card--surface {
  background-image: var(--gouache-grain);
}

.kit-root .kit-card:is(.kit-card--surface, .kit-card--outline):not(:has(> .kit-card__media))::before {
  content: "";
  display: block;
  flex: none;
  height: 1.35rem;
  background: var(--gouache-ink-1);
  -webkit-mask:
    var(--gouache-deckle-bottom) 0 100% / 240px 0.65rem repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - 0.65rem + 1px) no-repeat;
  mask:
    var(--gouache-deckle-bottom) 0 100% / 240px 0.65rem repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - 0.65rem + 1px) no-repeat;
}

.kit-root :nth-child(4n + 2) > .kit-card:is(.kit-card--surface, .kit-card--outline)::before,
.kit-root .kit-card:is(.kit-card--surface, .kit-card--outline):nth-child(4n + 2)::before {
  background: var(--gouache-ink-2);
}

.kit-root :nth-child(4n + 3) > .kit-card:is(.kit-card--surface, .kit-card--outline)::before,
.kit-root .kit-card:is(.kit-card--surface, .kit-card--outline):nth-child(4n + 3)::before {
  background: var(--gouache-ink-3);
}

.kit-root :nth-child(4n + 4) > .kit-card:is(.kit-card--surface, .kit-card--outline)::before,
.kit-root .kit-card:is(.kit-card--surface, .kit-card--outline):nth-child(4n + 4)::before {
  background: var(--gouache-ink-4);
}

/* In a coloured band the strip is the band's own ink. */
.kit-root :is(.kit-section--inverse, .kit-section--accent, .kit-section--image, .kit-slide) .kit-card::before {
  background: var(--kit-text) !important;
  opacity: 0.6;
}

/* A linked card lifts a little and turns, as a chip picked up from the table. */
.kit-root .kit-card--linked:hover {
  transform: translateY(-3px) rotate(-0.6deg);
}


/* ------------------------------------------------------------------ Figures, quotations */

/* A statistic stands on a blot of thinned paint. */
.kit-root .kit-stat {
  position: relative;
  isolation: isolate;
}

.kit-root .kit-stat__value {
  position: relative;
}

.kit-root .kit-stat__value::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 2.6em;
  height: 1.9em;
  background: color-mix(in srgb, var(--kit-accent) 22%, transparent);
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
  -webkit-mask: var(--gouache-dab) center / 100% 100% no-repeat;
  mask: var(--gouache-dab) center / 100% 100% no-repeat;
}

.kit-root .kit-section--align-left .kit-stat__value::before,
.kit-root .kit-text--left .kit-stat__value::before {
  left: 1.1em;
}

/* A quotation opens with a large painted mark, in place of the kit's line down its side. */
.kit-root .kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-root .kit-quote__text::before {
  content: "\201C";
  display: block;
  height: 0.55em;
  margin-block-end: 0.15em;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, serif);
  font-size: 3.25em;
  font-style: normal;
  line-height: 1;
}

.gouache-italic .kit-root .kit-quote__text,
.gouache-italic .kit-root .kit-text--lead,
.gouache-italic .gouache-hero__lead {
  font-family: var(--font-heading, serif);
  font-style: italic;
  font-weight: var(--gouache-heading-light);
}

/* ------------------------------------------------------------------ Article body */

.gouache-article {
  padding: clamp(2.75rem, 6vw, 4.75rem) var(--gouache-gutter);
}

.gouache-article__inner {
  max-width: 44rem;
  margin-inline: auto;
}

.gouache-article__header {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

.gouache-article__header::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  left: -4rem;
  z-index: -1;
  width: min(32rem, calc(100% + 6rem));
  height: calc(100% + 4rem);
  background: color-mix(in srgb, var(--accent, #c2461b) var(--gouache-wash), transparent);
  pointer-events: none;
  -webkit-mask: var(--gouache-wash-3) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-3) center / 100% 100% no-repeat;
}

.gouache-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--text-secondary, #4d4b57);
  font-size: 0.875rem;
}

.gouache-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: var(--gouache-heading-weight);
  letter-spacing: -0.01em;
  line-height: 1.14;
  text-wrap: balance;
}

.gouache-article__header h1::after {
  content: "";
  display: block;
  inline-size: clamp(4.5rem, 12vw, 7rem);
  block-size: 0.7rem;
  margin-block-start: 0.6rem;
  background: var(--gouache-ink-1);
  -webkit-mask: var(--gouache-stroke-3) center / 100% 100% no-repeat;
  mask: var(--gouache-stroke-3) center / 100% 100% no-repeat;
}

.gouache-prose > :first-child {
  margin-top: 0;
}

.gouache-prose > :last-child {
  margin-bottom: 0;
}

/* The article's first letter dropped two lines, in the heading face and the accent's readable shade, as an illustrator
   letters a page. Only when the article opens with a paragraph; a browser without initial-letter shows it in its line. */
.gouache-prose > p:first-child::first-letter {
  margin-inline-end: 0.12em;
  color: var(--accent-ink, #9a3613);
  font-family: var(--font-heading, serif);
  font-weight: var(--gouache-heading-weight);
  -webkit-initial-letter: 2;
  initial-letter: 2;
}

.gouache-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.25em;
}

.gouache-prose :where(h2, h3, h4) {
  margin: 1.8em 0 0.5em;
  font-family: var(--font-heading, serif);
  font-weight: var(--gouache-heading-weight);
  line-height: 1.25;
}

.gouache-prose h2 {
  font-size: 1.7rem;
}

.gouache-prose h3 {
  font-size: 1.35rem;
}

.gouache-prose h4 {
  font-size: 1.125rem;
}

.gouache-prose a {
  color: var(--accent-ink, #9a3613);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* A quotation on a wash of thinned paint. */
.gouache-prose blockquote {
  position: relative;
  isolation: isolate;
  margin-inline: 0;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-heading, serif);
  font-size: 1.15em;
  line-height: 1.5;
}

.gouache-prose blockquote::before {
  content: "";
  position: absolute;
  inset: -0.5rem -1rem;
  z-index: -1;
  background: color-mix(in srgb, var(--accent, #c2461b) 10%, transparent);
  pointer-events: none;
  -webkit-mask: var(--gouache-wash-1) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-1) center / 100% 100% no-repeat;
}

.gouache-italic .gouache-prose blockquote {
  font-style: italic;
  font-weight: var(--gouache-heading-light);
}

.gouache-prose ul li::marker {
  color: var(--accent-ink, #9a3613);
}

.gouache-prose img {
  display: block;
}

.gouache-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #4d4b57);
  font-size: 0.875rem;
}

.gouache-prose :where(th, td) {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px dashed var(--gouache-line);
  text-align: left;
}
/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.gouache-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

.gouache-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--gouache-radius);
  background: var(--surface-alt, #efe4cf);
}

/* ------------------------------------------------------------------ Divider block */

/* line: one long brush stroke; dashed: a row of short swipes; dotted: three dabs in three paints; none: space. */
.gouache-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  max-width: calc(var(--gouache-width) + 2 * var(--gouache-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gouache-gutter);
}

.gouache-divider__line {
  width: min(100%, 40rem);
  height: 0.6rem;
  background: color-mix(in srgb, var(--text-primary, #1d1f2c) 30%, transparent);
  -webkit-mask: var(--gouache-stroke-1) center / 100% 100% no-repeat;
  mask: var(--gouache-stroke-1) center / 100% 100% no-repeat;
}

.gouache-divider--dashed .gouache-divider__line {
  -webkit-mask: var(--gouache-stroke-3) 0 50% / 4.5rem 100% space;
  mask: var(--gouache-stroke-3) 0 50% / 4.5rem 100% space;
}

.gouache-divider--dotted span {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--gouache-ink-1);
  -webkit-mask: var(--gouache-dab) center / 100% 100% no-repeat;
  mask: var(--gouache-dab) center / 100% 100% no-repeat;
}

.gouache-divider--dotted span:nth-child(2) {
  background: var(--gouache-ink-2);
}

.gouache-divider--dotted span:nth-child(3) {
  background: var(--gouache-ink-3);
}

/* ------------------------------------------------------------------ Footer */

/* The footer is the last sheet: the main colour, its top torn, with a row of paint chips beside the name (the page's own
   paints, as on a colour card). Its words are the colour made to be read on it, on-primary, in every palette and with a
   website's own colours. */
.gouache-footer {
  position: relative;
  /* A strip of the paper shows between the footer's torn top and a coloured band's torn foot above it: two sheets. */
  margin-top: calc(var(--gouache-deckle) * 2.25);
  background-color: var(--primary, #22318a);
  background-image: var(--gouache-grain);
  color: var(--on-primary, #ffffff);
}

.gouache-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: var(--gouache-deckle);
  background-color: var(--primary, #22318a);
  pointer-events: none;
  -webkit-mask: var(--gouache-deckle-top) 120px 0 / 240px 100% repeat-x;
  mask: var(--gouache-deckle-top) 120px 0 / 240px 100% repeat-x;
}

.gouache-footer__inner {
  max-width: calc(var(--gouache-width) + 2 * var(--gouache-gutter));
  margin-inline: auto;
  padding: clamp(2.75rem, 5vw, 4.25rem) var(--gouache-gutter) 1.5rem;
}

.gouache-footer--minimal .gouache-footer__inner {
  padding-block: 1.75rem;
}

.gouache-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.gouache-footer .gouache-brand__name {
  max-width: 100%;
  font-size: 1.5rem;
}

.gouache-footer .gouache-brand__chip {
  display: none;
}

.gouache-footer .gouache-brand__logo,
.gouache-footer .brand-logo-original {
  max-height: 3rem !important;
  width: auto;
}

.gouache-footer .logo-mask {
  background-color: var(--on-primary, #ffffff) !important;
}

/* The paint chips: five small squares, each a little askew, in the page's paints. Decoration only. */
.gouache-chips {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gouache-chips span {
  width: 1.35rem;
  height: 1.35rem;
  background: var(--accent, #c2461b);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-primary, #ffffff) 30%, transparent);
  transform: rotate(-4deg);
  -webkit-mask: var(--gouache-chip) center / 100% 100% no-repeat;
  mask: var(--gouache-chip) center / 100% 100% no-repeat;
}

.gouache-chips span:nth-child(2) { background: var(--surface-alt, #efe4cf); transform: rotate(3deg); }
.gouache-chips span:nth-child(3) { background: var(--primary-alt, #2f40a0); transform: rotate(-2deg); }
.gouache-chips span:nth-child(4) { background: var(--gouache-ink-3); transform: rotate(5deg); }
.gouache-chips span:nth-child(5) { background: var(--background, #f8f3e8); transform: rotate(-5deg); }

.gouache-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px dashed color-mix(in srgb, var(--on-primary, #ffffff) 35%, transparent);
}

.gouache-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem);
  font-weight: var(--gouache-heading-weight);
  line-height: 1.18;
  text-wrap: balance;
}

.gouache-footer__invite::after {
  content: "";
  display: block;
  inline-size: clamp(4.5rem, 12vw, 7.5rem);
  block-size: 0.7rem;
  margin-block-start: 0.6rem;
  background: var(--accent, #c2461b);
  -webkit-mask: var(--gouache-stroke-1) center / 100% 100% no-repeat;
  mask: var(--gouache-stroke-1) center / 100% 100% no-repeat;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. */
.gouache-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem 2.5rem;
}

.gouache-footer__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.95rem;
}

.gouache-footer__tagline,
.gouache-footer__contact p:not(.gouache-footer__title),
.gouache-footer__copyright {
  margin: 0;
  font-size: 0.9375rem;
}

.gouache-footer__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading, serif);
  font-size: 1.125rem;
  font-weight: var(--gouache-heading-weight);
  line-height: 1.35;
}

.gouache-footer__links,
.gouache-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  font-style: normal;
}

.gouache-footer__links a,
.gouache-footer__contact a,
.gouache-footer__legal a,
.gouache-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.gouache-footer__links a:hover,
.gouache-footer__contact a:hover,
.gouache-footer__legal a:hover,
.gouache-footer__inline a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.gouache-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid color-mix(in srgb, var(--on-primary, #ffffff) 45%, transparent);
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  color: inherit;
}

.gouache-footer__social a:hover {
  border-color: currentColor;
}

.gouache-footer__bottom,
.gouache-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.gouache-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px dashed color-mix(in srgb, var(--on-primary, #ffffff) 35%, transparent);
}

.gouache-footer__legal,
.gouache-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.gouache-footer__legal a {
  font-size: 0.875rem;
}

.gouache-footer--minimal .gouache-footer__legal {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------------ Page not found */

.gouache-not-found {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(4rem, 9vw, 7rem) var(--gouache-gutter);
  text-align: center;
}

.gouache-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 36rem;
  margin-inline: auto;
}

/* The number, large, on a blot of the accent: a spill on the page. */
.gouache-not-found__number {
  position: relative;
  margin: 0 0 0.5rem;
  padding: 0.25em 0.6em;
  color: var(--text-primary, #1d1f2c);
  font-family: var(--font-heading, serif);
  font-size: clamp(4rem, 3rem + 5vw, 7rem);
  font-weight: var(--gouache-heading-weight);
  line-height: 1.1;
}

.gouache-not-found__number::before {
  content: "";
  position: absolute;
  inset: -10% -25%;
  z-index: -1;
  background: color-mix(in srgb, var(--accent, #c2461b) 20%, transparent);
  pointer-events: none;
  -webkit-mask: var(--gouache-wash-2) center / 100% 100% no-repeat;
  mask: var(--gouache-wash-2) center / 100% 100% no-repeat;
}

.gouache-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: var(--gouache-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

.gouache-not-found p {
  margin: 0;
  color: var(--text-secondary, #4d4b57);
}

/* ------------------------------------------------------------------ Form thanks */

.gouache-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.gouache-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: 1.6rem;
  font-weight: var(--gouache-heading-weight);
  line-height: 1.25;
}

.gouache-form-success h3::after {
  content: "";
  display: block;
  inline-size: 5rem;
  block-size: 0.6rem;
  margin-block-start: 0.5rem;
  background: var(--accent, #c2461b);
  -webkit-mask: var(--gouache-stroke-2) center / 100% 100% no-repeat;
  mask: var(--gouache-stroke-2) center / 100% 100% no-repeat;
}

.gouache-form-success p {
  margin: 0;
  color: var(--text-secondary, #4d4b57);
}

/* ------------------------------------------------------------------ The phone action bar */

/* The shared bar (resilience.css) on the theme's lighter paper, with its button. */
body .theme-action-bar {
  border-top: 1px dashed var(--gouache-line);
  background-color: var(--surface, #fffcf5);
}

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). */
@media (scripting: none) {
  .gouache-menu-button {
    display: none !important;
  }

  .gouache-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .gouache-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion: no transition, and no tilt under the pointer. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .gouache-button:hover,
  .kit-root .kit-button:hover,
  .kit-root .kit-card--linked:hover {
    transform: none !important;
  }
}