/*
 * Terra: earthy calm, made by hand. The page is warm paper with a faint grain; pictures lie on it as river pebbles and
 * slabs of stone with soft, uneven corners; coloured bands have the torn edge of handmade paper; a brush stroke marks
 * every section heading and a brushed circle (an ensō) turns up where the page rests (the steps of a process, the
 * invitation near the end, the page not found, the phone menu). Headings are a gentle serif set at the left with
 * plenty of quiet around them.
 *
 * This file holds the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the four blocks
 * the theme draws itself (the split hero, the opening of the full hero and the video hero, the article body, the
 * divider) and how the Theme Kit's sections are composed in Terra (Sections, from the type includes/stitch.php writes on
 * each). The look inside a kit block (cards, buttons, fields) is in kit-theme.css.
 *
 * 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 dark palette is just
 * other values for the same tokens: nothing here asks whether the page is dark. The drawn marks (brush, ensō, torn edge)
 * are masks, so they take whatever colour the element that wears them has.
 *
 * Type comes from the layout: --font-heading, --font-body, --terra-heading-weight and --terra-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here. An italic is asked
 * for only under html.terra-italic, which the layout writes when the font palette loads the heading face's own italic.
 */

/* ------------------------------------------------------------------ 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) {
  --terra-width: 74rem;
  --terra-gutter: clamp(1.25rem, 5vw, 3rem);
  /* How far a wide picture (the opening's slab, a band with a photograph) stands in from the window's edges. */
  --terra-edge: clamp(0.625rem, 2.2vw, 1.75rem);
  --terra-bar: 4.75rem;
  --terra-radius: 1.5rem;
  /* A button is a pebble: four corners, each a little different (the kit's buttons and the shared ones wear the same,
     kit-theme.css and this theme's line in resilience.css). */
  --terra-button-radius: 1.6rem 1.1rem 1.5rem 1.2rem / 1.25rem 1.55rem 1.1rem 1.45rem;
  /* A card or a field is a flat stone. */
  --terra-stone: 2rem 1.4rem 2.25rem 1.25rem / 1.5rem 2.25rem 1.3rem 2rem;
  --terra-stone-b: 1.35rem 2.2rem 1.5rem 2.1rem / 2.1rem 1.3rem 2.3rem 1.4rem;
  --terra-stone-c: 2.3rem 1.6rem 1.25rem 2rem / 1.6rem 2rem 2.2rem 1.25rem;
  /* A picture is a river pebble (the split hero, a portrait) or a slab (a wide photograph). */
  --terra-pebble: 57% 43% 52% 48% / 46% 56% 44% 54%;
  --terra-pebble-b: 44% 56% 41% 59% / 57% 43% 58% 42%;
  --terra-slab: clamp(1.5rem, 4vw, 3.5rem) clamp(2.25rem, 6vw, 5rem) clamp(1.75rem, 5vw, 4rem) clamp(1.25rem, 3.5vw, 3rem) / clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.25rem) clamp(2.25rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  --terra-heading-weight: 400;
  --terra-body-strong: 500;
  --terra-head-scale: 1;
  --terra-body-size: 1.0625rem;
  --terra-speed: 240ms;
  --terra-ease: cubic-bezier(0.3, 0.7, 0.3, 1);
  --terra-line: var(--border, #dccfbf);
  /* The drawn marks (.tmp/themes-157/terra/marks.mjs made them): a brush stroke, an ensō, the torn edge of handmade
     paper (the paper below a torn line, and the paper above one) and the paper's grain. */
  --terra-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath fill-rule='evenodd' d='M6 7.9L8.3 8L10.7 7.6L13 6.7L15.3 6.1L17.6 5.9L20 5.6L22.3 5.3L24.6 5.5L26.9 5.6L29.3 5.4L31.6 5.5L33.9 6L36.2 6.3L38.6 6.5L40.9 6.8L43.2 6.8L45.5 6.4L47.9 6.2L50.2 6.3L52.5 6.2L54.8 6.2L57.2 6.4L59.5 6.3L61.8 5.9L64.1 5.8L66.5 6.1L68.8 6.2L71.1 6.3L73.4 6.8L75.8 6.9L78.1 6.5L80.4 6.3L82.7 6.3L85.1 6.1L87.4 6L89.7 6.2L92 6.2L94.4 5.7L96.7 5.5L99 5.6L101.3 5.5L103.7 5.6L106 6.2L108.3 6.4L110.6 6.2L113 6.2L115.3 6.3L117.6 6.1L119.9 6.1L122.3 6.5L124.6 6.5L126.9 6.1L129.2 5.9L131.6 5.8L133.9 5.6L136.2 5.7L138.5 6.4L140.9 6.8L143.2 6.8L145.5 7.1L147.8 7.4L150.2 7.4L152.5 7.7L154.8 8.3L157.1 8.7L159.5 8.6L161.8 8.7L164.1 8.7L166.4 8.4L168.8 8.4L171.1 9L173.4 9.3L175.7 9.4L178.1 9.6L180.4 9.6L182.7 9.6L185 9.6L187.4 9.7L189.7 9.7L192 9.6L192 10.2L189.7 10.4L187.4 10.5L185 10.7L182.7 11L180.4 11.4L178.1 11.9L175.7 12.4L173.4 12.5L171.1 12.7L168.8 13L166.4 13.3L164.1 14.1L161.8 14.5L159.5 14.5L157.1 14.9L154.8 15L152.5 15.6L150.2 16.5L147.8 16.8L145.5 17.2L143.2 17.4L140.9 17.4L138.5 18.1L136.2 18.6L133.9 18.8L131.6 19.1L129.2 18.7L126.9 18.4L124.6 18.7L122.3 18.6L119.9 18.9L117.6 18.8L115.3 18.2L113 18.2L110.6 18.2L108.3 18.3L106 18.9L103.7 18.8L101.3 18.6L99 18.7L96.7 18.6L94.4 19.1L92 19.7L89.7 19.5L87.4 19.6L85.1 19.4L82.7 19.2L80.4 19.7L78.1 19.8L75.8 19.8L73.4 19.8L71.1 19.2L68.8 19.2L66.5 19.5L64.1 19.6L61.8 19.9L59.5 19.9L57.2 19.4L54.8 19.7L52.5 19.9L50.2 20.2L47.9 20.7L45.5 20.4L43.2 20.2L40.9 20.3L38.6 20.1L36.2 20.5L33.9 20.6L31.6 20.2L29.3 20L26.9 19.5L24.6 19.3L22.3 19.5L20 19L17.6 18.4L15.3 17.7L13 16.6L10.7 16.3L8.3 16.3L6 16.2L4.5 15.8L3.2 14.9L2.4 13.5L2.1 11.8L2.4 10.1L3.2 8.7L4.5 7.8ZM95.3 10.1L100.3 10.1L105.4 10.2L110.4 10.2L115.5 10.3L120.5 10.3L125.6 10.4L130.6 10.4L135.7 10.3L140.7 10.2L145.8 10L150.8 9.8L155.9 9.5L160.9 9.2L166 8.9L166 8.9L160.9 9L155.9 9.1L150.8 9.2L145.8 9.3L140.7 9.4L135.7 9.4L130.6 9.5L125.6 9.5L120.5 9.5L115.5 9.6L110.4 9.7L105.4 9.8L100.3 9.9L95.3 10.1ZM117.6 13.9L122 14L126.4 14.1L130.8 14.1L135.1 14.1L139.5 14.1L143.9 14.1L148.3 13.9L152.7 13.8L157.1 13.6L161.4 13.4L165.8 13.1L170.2 12.8L174.6 12.5L179 12.1L179 12.1L174.6 12.3L170.2 12.5L165.8 12.6L161.4 12.8L157.1 13L152.7 13.1L148.3 13.2L143.9 13.4L139.5 13.5L135.1 13.6L130.8 13.7L126.4 13.8L122 13.9L117.6 13.9ZM61.8 16.5L66.1 16.5L70.3 16.5L74.6 16.5L78.8 16.4L83.1 16.4L87.3 16.3L91.6 16.2L95.8 16.2L100.1 16.1L104.3 16L108.6 16L112.8 15.9L117.1 15.8L121.3 15.7L121.3 15.7L117.1 15.7L112.8 15.6L108.6 15.6L104.3 15.6L100.1 15.6L95.8 15.6L91.6 15.6L87.3 15.7L83.1 15.8L78.8 16L74.6 16.1L70.3 16.3L66.1 16.4L61.8 16.5ZM136.2 11.9L139.8 11.9L143.4 11.9L147 11.9L150.5 11.8L154.1 11.7L157.7 11.6L161.3 11.4L164.9 11.3L168.5 11.1L172.1 10.8L175.7 10.6L179.2 10.3L182.8 10.1L186.4 9.8L186.4 9.8L182.8 10L179.2 10.1L175.7 10.3L172.1 10.4L168.5 10.6L164.9 10.8L161.3 10.9L157.7 11.1L154.1 11.3L150.5 11.4L147 11.6L143.4 11.7L139.8 11.8L136.2 11.9Z'/%3E%3C/svg%3E");
  --terra-enso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M13.6 33L14.4 31.3L15.2 29.6L16 27.9L16.7 26.1L17.7 24.4L19 22.9L20 21.2L20.9 19.4L22.3 18L23.8 16.6L25.3 15.4L27 14.4L28.7 13.2L30.2 11.8L31.9 10.7L33.7 9.9L35.5 8.9L37.4 8L39.3 7.2L41.2 6.3L43.2 5.6L45.4 5.6L47.5 5.7L49.5 5.6L51.6 5.7L53.7 5.8L55.8 6L57.8 6.6L59.7 7.4L61.8 7.6L63.8 7.9L65.8 8.7L67.7 9.5L69.4 10.5L71 11.9L72.7 13.1L74.4 14.1L75.8 15.7L77.1 17.3L78.4 18.8L79.6 20.4L80.9 21.9L82.4 23.2L83.7 24.7L84.5 26.5L85.6 28.1L86.7 29.8L87.5 31.5L88.4 33.3L89 35.1L89.2 37.2L89.4 39.1L90 40.9L90.4 42.8L90.6 44.7L90.9 46.6L91 48.5L90.9 50.5L91.2 52.4L91.4 54.3L90.9 56.2L90.3 58.1L89.7 59.9L88.9 61.7L88.2 63.5L87.6 65.3L86.6 66.9L85.4 68.4L84.6 70.1L83.7 71.7L82.7 73.4L81.9 75.1L80.7 76.6L79.2 77.8L77.8 79L76.5 80.4L75 81.6L73.5 82.6L71.9 83.7L70.1 84.3L68.4 85.1L66.9 86.4L65.4 87.5L63.6 88.2L61.9 89L60.1 89.6L58.2 90L56.3 90.7L54.5 91.2L52.5 91.1L50.6 90.8L48.7 90.7L46.8 90.4L44.9 90.2L43 90.1L41.1 89.6L39.4 88.8L37.5 88.4L35.7 88L34 87.2L32.3 86.4L30.7 85.3L29.4 83.7L28.1 82.4L26.6 81.3L25.4 79.9L24.4 78.4L23.3 76.9L22.3 75.4L21.4 73.9L20.2 72.6L19.3 71.1L18.6 69.4L18 67.8L17.4 66.2L16.9 64.6L16.3 63L15.8 61.4L15.4 59.7L15 58.1L15.6 58L16.1 59.5L16.6 61.1L17.2 62.6L17.9 64.1L18.6 65.6L19.5 67L20.5 68.3L21.3 69.7L22.2 71.1L23.3 72.3L24.4 73.5L25.6 74.5L27.1 75.4L28.2 76.5L29.3 77.8L30.5 78.9L31.6 80.1L33 81.1L34.5 81.8L35.8 82.8L37.3 83.8L38.8 84.6L40.3 85.4L42 85.6L43.8 85.6L45.4 85.9L47.1 85.9L48.8 86L50.5 86.2L52.2 85.9L53.8 85.4L55.5 85.2L57.1 84.8L58.8 84.6L60.5 84.5L62 83.7L63.5 82.9L64.9 82L66.2 80.9L67.6 80.1L69.1 79.3L70.2 78.1L71.3 76.9L72.4 75.7L73.3 74.3L74.6 73.4L75.9 72.4L76.9 71.1L78 70L78.8 68.6L79.4 67.1L80.4 65.8L81.3 64.5L81.9 62.9L82.5 61.5L82.7 59.8L82.7 58.2L83 56.6L83.4 55.1L83.6 53.5L83.9 52L83.8 50.4L83.5 48.8L83.6 47.2L83.6 45.6L83.5 44L83.5 42.4L82.8 40.9L82 39.5L81.4 38L80.6 36.7L80 35.3L79.5 33.7L78.5 32.5L77.5 31.3L76.6 30L75.6 28.8L74.9 27.4L74.2 25.8L73.1 24.7L71.9 23.5L70.7 22.5L69.3 21.7L68.1 20.5L66.9 19.4L65.4 18.7L63.9 18L62.4 17.5L60.7 17.3L59.3 16.6L57.8 15.9L56.2 15.4L54.6 14.9L52.9 14.8L51.3 15L49.6 14.8L48 14.7L46.3 14.9L44.7 15L43.1 15.8L41.7 16.7L40.2 17.3L38.7 18L37.3 18.7L35.8 19.2L34.5 20.2L33.3 21.2L31.9 21.9L30.6 22.7L29.1 23.4L27.6 24L26.4 25.1L25.3 26.3L24.1 27.4L23.2 28.7L22 29.8L20.7 30.9L19.9 32.4L19.2 33.8L18.4 35.3L17.4 36.1L16.4 36.7L15.4 36.9L14.3 36.7L13.5 36L12.9 35.1L12.8 33.9ZM85.4 64.4L83.6 68.3L81.3 71.9L78.7 75.3L75.7 78.4L72.5 81.3L68.9 83.8L65.1 86L61.1 87.7L56.8 88.9L52.4 89.6L48 89.6L43.6 89L39.3 87.8L35.3 86L35.3 86L39.3 87.7L43.6 88.8L48 89.3L52.4 89.1L56.7 88.4L60.9 87.2L64.9 85.5L68.7 83.3L72.2 80.9L75.4 78.1L78.4 75.1L81.1 71.8L83.5 68.2L85.4 64.4ZM66.2 83.2L62.8 85L59.1 86.5L55.3 87.5L51.4 88L47.4 88L43.5 87.5L39.7 86.4L36.1 84.9L32.7 82.9L29.6 80.5L26.9 77.8L24.4 75L22.3 71.9L20.4 68.7L20.4 68.7L22.3 71.9L24.5 74.8L27 77.6L29.8 80.2L32.9 82.5L36.2 84.5L39.8 86L43.6 87L47.5 87.6L51.4 87.6L55.3 87.2L59.1 86.3L62.8 84.9L66.2 83.2ZM82 34.3L83.2 37.2L84.3 40.1L85 43.2L85.6 46.3L85.8 49.4L85.7 52.6L85.3 55.7L84.6 58.8L83.6 61.8L82.4 64.7L80.9 67.4L79.2 70.1L77.2 72.5L75.1 74.8L75.1 74.8L77.2 72.5L79 70L80.7 67.3L82.1 64.6L83.3 61.7L84.3 58.7L84.9 55.7L85.3 52.6L85.4 49.4L85.3 46.3L84.8 43.2L84.1 40.2L83.1 37.2L82 34.3Z'/%3E%3C/svg%3E");
  --terra-tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14L0 5.2L2 4.7L4 4.7L6 6.1L8 6.8L10 6.7L12 7.2L14 7L16 6.9L18 7.3L20 6.9L22 7.1L24 6.1L26 4.7L28 5.1L30 5.3L32 5.2L34 6.3L36 5.2L38 5.4L40 6.3L42 5.7L44 6.8L46 6.9L48 6L50 6.1L52 5.6L54 6.7L56 6.7L58 6.5L60 6.7L62 7.4L64 8.1L66 9.5L68 9.7L70 10L72 10.3L74 10L76 10.7L78 11.1L80 10.7L82 10.7L84 9.6L86 9.7L88 10.1L90 10.4L92 10.5L94 10.4L96 9.4L98 9.8L100 10.1L102 10.1L104 9.6L106 8.5L108 7.1L110 7.3L112 6.5L114 6.9L116 6.7L118 6.2L120 6.6L122 6L124 7.3L126 7.6L128 7.3L130 7L132 6.7L134 7.1L136 7.1L138 7.2L140 6.2L142 6.4L144 5.8L146 6L148 7.6L150 7.4L152 7.8L154 7.3L156 6.8L158 7.4L160 6.6L162 6L164 5.7L166 4L168 3.8L170 4.3L172 3.8L174 4.7L176 3.8L178 3.8L180 4.1L182 4.8L184 5.1L186 5.4L188 5L190 4.5L192 4.6L194 4.5L196 6.2L198 5.5L200 5.9L202 5.5L204 6.5L206 7.6L208 9L210 8.9L212 9.5L214 8.8L216 9.3L218 10L220 9.9L222 9.4L224 9.3L226 8.6L228 9.3L230 9.2L232 9L234 9.3L236 9.2L238 8.9L240 9.8L242 9.9L244 9.5L246 9.2L248 8.3L250 8.4L252 7.9L254 8.2L256 7.9L258 7L260 7.8L262 8.1L264 8.2L266 9.3L268 9.2L270 9.6L272 9.3L274 8.6L276 9.5L278 9.5L280 8.5L282 8.7L284 7.5L286 7.5L288 8.4L290 8.8L292 9.1L294 8.3L296 7.8L298 8.4L300 7.4L302 7.4L304 6.5L306 5.1L308 4.7L310 4.7L312 4.4L314 4.5L316 3.5L318 3.2L320 3.6L322 4.1L324 4.8L326 5.3L328 4.4L330 4.7L332 4.1L334 4.5L336 4.7L338 4.6L340 4.7L342 4.6L344 5.1L346 6.1L348 7L350 7.5L352 7.9L354 7.1L356 8L358 8.9L360 8.6L362 8.6L364 7.7L366 7L368 6.7L370 7.5L372 7.6L374 8.1L376 7.5L378 7L380 7.7L382 7.7L384 8.5L386 7.9L388 6.9L390 7.6L392 7.5L394 7.4L396 7.8L398 7.1L400 7.9L402 7.8L404 8.6L406 10.6L408 10.2L410 10.5L412 10.8L414 9.9L416 10.7L418 10.6L420 10L422 10.4L424 9.6L426 8.7L428 10.3L430 9.7L432 9.6L434 9.4L436 8.8L438 8.9L440 8.7L442 8.4L444 8.5L446 6.8L448 5.9L450 6.2L452 4.8L454 5.5L456 4.9L458 3.8L460 4.3L462 4.7L464 5.1L466 5.9L468 5.8L470 5.6L472 5.3L474 4.8L476 6L478 5.8L480 5.2L480 14Z'/%3E%3C/svg%3E");
  --terra-tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 8.3L2 9.5L4 9.6L6 10.4L8 10.3L10 9.9L12 10.7L14 10.6L16 10.4L18 10.5L20 9L22 8.4L24 8.3L26 8.6L28 9.3L30 8.2L32 7.2L34 7.6L36 7.4L38 7.8L40 7.8L42 7.1L44 6.8L46 5.5L48 5.9L50 5.7L52 5L54 4.9L56 4.7L58 4.7L60 6L62 6.2L64 6.4L66 6.5L68 6.4L70 6.3L72 7.1L74 6.6L76 6.8L78 5.6L80 5L82 5L84 5.1L86 5.8L88 5.8L90 4.7L92 5.6L94 5.7L96 5.1L98 6.3L100 5.2L102 3.9L104 4.1L106 2.9L108 3.2L110 4L112 3.2L114 2.9L116 3.2L118 4.3L120 5.8L122 5.4L124 6.1L126 5.5L128 5.4L130 6.3L132 7.2L134 6.8L136 6.8L138 6L140 7L142 8.2L144 8.4L146 9.3L148 9.3L150 9.1L152 10.4L154 10.6L156 10.2L158 10.4L160 8.7L162 8.7L164 8.6L166 8L168 8.6L170 7.8L172 7.8L174 7.6L176 8.3L178 8.5L180 9.1L182 7.8L184 7.7L186 7L188 7.4L190 7.4L192 7.2L194 6.6L196 6.9L198 6.1L200 7.3L202 8.2L204 8L206 8.5L208 8.5L210 8L212 9.2L214 8.7L216 7.9L218 7.1L220 6.6L222 6.9L224 6.6L226 6L228 6.3L230 5.2L232 5.7L234 6L236 5.9L238 6L240 5.1L242 4.2L244 3.8L246 2.9L248 3.3L250 3.7L252 2.8L254 2.9L256 2.5L258 3L260 4.1L262 4.4L264 4.7L266 4.8L268 4.7L270 5.3L272 5.5L274 5.4L276 5.4L278 5.1L280 5.3L282 6.3L284 7.2L286 8.1L288 7.7L290 7.2L292 8.3L294 8.4L296 8.6L298 8.7L300 7.8L302 7.3L304 7.3L306 6.7L308 7.4L310 7.3L312 6.3L314 7.3L316 7.4L318 8.2L320 8.3L322 7.7L324 8.5L326 7.5L328 7.7L330 8.5L332 7.8L334 7.6L336 8.4L338 7.1L340 8.9L342 9.5L344 9.8L346 10.8L348 10.2L350 9.5L352 10.3L354 10.4L356 9.7L358 9.1L360 8.1L362 8L364 8L366 7.8L368 7.6L370 6.6L372 6.4L374 6.8L376 6.2L378 6.7L380 6.2L382 4.9L384 4.4L386 3.8L388 4.1L390 4.1L392 3.5L394 2.9L396 3.5L398 2.9L400 4.5L402 4.7L404 5.1L406 5.1L408 4.4L410 5.7L412 6.1L414 5.7L416 6L418 4.7L420 4.2L422 5.3L424 5.3L426 5.8L428 6.1L430 6L432 6.2L434 6.6L436 6.7L438 6.9L440 5.6L442 5.1L444 5.2L446 4.6L448 5.5L450 5L452 4.3L454 5.2L456 5.4L458 5.9L460 7.2L462 6.5L464 7L466 7.2L468 6.7L470 7.8L472 7.8L474 7.6L476 8.3L478 7.8L480 8.7L480 0Z'/%3E%3C/svg%3E");
  --terra-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.17 0 0 0 0 0.1 0 0 0 0.55 -0.2'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Faces differ in the height of their small letters: the layout names them on <body>, and a face with small ones is set
   a little larger, so every font palette reads at about the same size. A face that is not listed keeps the plain size. */
.terra-face--alegreya-sans { --terra-body-size: 1.1875rem; }
.terra-face--ysabeau-office { --terra-body-size: 1.125rem; }
.terra-face--source-sans-3 { --terra-body-size: 1.09375rem; }
.terra-head--cormorant-garamond { --terra-head-scale: 1.14; }
.terra-head--marcellus { --terra-head-scale: 0.94; }
.terra-head--m-plus-rounded-1c,
.terra-head--ysabeau-office { --terra-head-scale: 0.92; }

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

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

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

/* The paper: the palette's background with a faint grain over it. */
body {
  margin: 0;
  background-color: var(--background, #f4efe7);
  background-image: var(--terra-grain);
  color: var(--text-primary, #2c2520);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--terra-body-size);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--accent, #a65a35);
  color: var(--on-accent, #ffffff);
}

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

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

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

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

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

/* A brush stroke, as a block above a heading. It is in the flow, so it can never cross the heading it marks. */
.terra-brush {
  display: block;
  width: 4.25rem;
  height: 0.6rem;
  background: var(--accent, #a65a35);
  -webkit-mask: var(--terra-brush) center / 100% 100% no-repeat;
  mask: var(--terra-brush) center / 100% 100% no-repeat;
}

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

/* One shape for every button the theme draws itself: a pebble. kit-theme.css gives the kit's buttons the same corners,
   and the line of this theme in resilience.css (--chrome-button-radius) gives them 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. */
.terra-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--terra-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--terra-body-strong);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--terra-speed) ease, border-color var(--terra-speed) ease, border-radius 600ms var(--terra-ease), box-shadow var(--terra-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. */
.terra-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* On hover a pebble turns a little in the hand: its corners trade places, slowly. */
.terra-button:hover {
  border-radius: 1.2rem 1.5rem 1.1rem 1.6rem / 1.45rem 1.1rem 1.55rem 1.25rem;
}

.terra-button--primary {
  background: var(--primary, #3a2f29);
  color: var(--on-primary, #f7f0e6);
}

.terra-button--primary:hover {
  background: var(--primary-alt, #4b3e36);
}

.terra-button--accent {
  background: var(--accent, #a65a35);
  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. */
.terra-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 55%, transparent);
}

.terra-button--secondary {
  border-color: color-mix(in srgb, var(--text-primary, #2c2520) 45%, transparent);
  background: transparent;
  color: var(--text-primary, #2c2520);
}

.terra-button--secondary:hover {
  border-color: var(--text-primary, #2c2520);
  background: color-mix(in srgb, var(--text-primary, #2c2520) 6%, transparent);
}

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

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

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

.terra-announcement {
  background: var(--primary, #3a2f29);
  color: var(--on-primary, #f7f0e6);
  font-size: 0.9375rem;
}

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

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

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

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

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

.terra-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;
}

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

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

/* The bar is the paper itself, a little clear, with what passes under it softly blurred; no line under it until the
   page moves (theme.js sets is-scrolled), when a soft shadow parts it from the page. The bar has one height for every
   kind; the centred kind adds a row for the menu. */
.terra-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--background, #f4efe7) 90%, transparent);
  color: var(--text-primary, #2c2520);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  transition: box-shadow var(--terra-speed) ease;
}

.terra-header.is-scrolled {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--terra-line) 70%, transparent), 0 16px 32px -28px color-mix(in srgb, var(--text-primary, #2c2520) 45%, transparent);
}

.terra-header.is-open {
  background: var(--background, #f4efe7);
}

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

.terra-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. */
.terra-header--centered .terra-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

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

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

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

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

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

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

.terra-header__phone:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent, #a65a35);
  text-underline-offset: 0.3em;
}

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

/* The website's name, in the heading face. 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. */
.terra-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.terra-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: calc(1.4rem * var(--terra-head-scale));
  font-weight: var(--terra-heading-weight);
  letter-spacing: -0.005em;
  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. */
.terra-header .terra-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) {
  .terra-header .terra-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.2rem * var(--terra-head-scale));
  }
}

/* A long name is set smaller, so that eighty characters stay on two lines beside the menu. */
.terra-brand__name--long {
  font-size: calc(1.125rem * var(--terra-head-scale));
}

.terra-brand:has(.terra-brand__logo, .brand-logo-original, .logo-mask) .terra-brand__name {
  font-size: calc(1.125rem * var(--terra-head-scale));
}

.terra-header .terra-brand__logo,
.terra-header .brand-logo-original {
  max-height: 2.75rem;
  width: auto;
}

.terra-header .logo-mask {
  background-color: var(--text-primary, #2c2520) !important;
}

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

.terra-topbar {
  background: var(--surface-alt, #ebe2d5);
  color: var(--text-secondary, #665a50);
  font-size: 0.875rem;
}

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

.terra-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
}

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

.terra-topbar a:hover {
  color: var(--text-primary, #2c2520);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

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

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

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

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

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

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

.terra-nav__item {
  position: relative;
}

.terra-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--terra-button-radius);
  color: inherit;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--terra-speed) ease;
}

/* 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. */
.terra-nav__item {
  min-width: 0;
}

.terra-nav__item > a:hover,
.terra-nav__item--parent:focus-within > a {
  background: color-mix(in srgb, var(--surface-alt, #ebe2d5) 80%, transparent);
}

/* The page being shown: a short brush stroke of the accent under its name. */
.terra-nav__item.is-current > a::after {
  content: "";
  position: absolute;
  inset-inline: 50% auto;
  bottom: 0.05rem;
  width: 1.9rem;
  height: 0.35rem;
  translate: -50% 0;
  background: var(--accent, #a65a35);
  -webkit-mask: var(--terra-brush) center / 100% 100% no-repeat;
  mask: var(--terra-brush) center / 100% 100% no-repeat;
}

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

.terra-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--terra-line);
  border-radius: var(--terra-stone);
  background: var(--surface, #fbf8f3);
  color: var(--text-primary, #2c2520);
  box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--text-primary, #2c2520) 40%, transparent);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--terra-speed) ease, visibility var(--terra-speed) ease;
}

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

.terra-nav__children a {
  padding: 0.5rem 0.85rem;
  border-radius: 1rem;
  font-size: 0.975rem;
  line-height: 1.4;
  text-decoration: none;
}

.terra-nav__children a:hover {
  background: var(--surface-alt, #ebe2d5);
}

/* The menu button: two lines of different lengths that turn into a cross, in a small pebble. Hidden on a wide screen
   unless resilience.js folds the menu into it (theme-nav-compact on #site-header, whose shared rules show it). */
.terra-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.875rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-primary, #2c2520) 28%, transparent);
  border-radius: var(--terra-pebble);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--terra-speed) ease, background-color var(--terra-speed) ease;
}

.terra-menu-button:hover {
  border-color: currentColor;
  background: color-mix(in srgb, var(--surface-alt, #ebe2d5) 70%, transparent);
}

.terra-menu-button__lines {
  display: grid;
  justify-items: end;
  gap: 0.3rem;
  width: 1.15rem;
}

.terra-menu-button__lines i {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--terra-speed) ease, opacity var(--terra-speed) ease, width var(--terra-speed) ease;
}

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

.terra-menu-button__lines i:nth-child(3) {
  width: 85%;
}

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

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

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

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

/* A sheet of the paper under the bar with every page in the heading face, and a large brushed circle resting in its
   lower corner. It scrolls inside itself when the pages are many, so the last one is always reachable. */
.terra-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--terra-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(--terra-head, var(--terra-bar)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  background-color: var(--background, #f4efe7);
  background-image: var(--terra-grain);
  color: var(--text-primary, #2c2520);
  box-shadow: 0 30px 40px -30px color-mix(in srgb, var(--text-primary, #2c2520) 45%, transparent);
}

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

.terra-drawer__enso {
  position: absolute;
  right: -3.5rem;
  bottom: -3rem;
  z-index: -1;
  width: 15rem;
  height: 15rem;
  background: color-mix(in srgb, var(--accent, #a65a35) 22%, transparent);
  rotate: 18deg;
  pointer-events: none;
  -webkit-mask: var(--terra-enso) center / contain no-repeat;
  mask: var(--terra-enso) center / contain no-repeat;
}

.terra-drawer__inner {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 1rem var(--terra-gutter) 2.25rem;
}

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

.terra-drawer__nav {
  display: grid;
  gap: 0.15rem;
}

/* A page name in the heading face. data-fit-text (includes/chrome.php) lets the shared script set a long single word
   smaller instead of breaking it. */
.terra-drawer__link {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--font-heading, serif);
  font-size: calc(1.6rem * var(--terra-head-scale));
  font-weight: var(--terra-heading-weight);
  line-height: 1.25;
  text-decoration: none;
}

.terra-drawer__link:hover {
  color: var(--accent-ink, #924a28);
}

.terra-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.75rem 1rem;
}

.terra-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #665a50);
  text-decoration: none;
}

.terra-drawer__footer {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--terra-line);
}

.terra-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #665a50);
  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) {
  .terra-nav,
  .terra-header__rail,
  .terra-header__phone,
  .terra-header__cta,
  .terra-header__slot {
    display: none;
  }

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

  .terra-header--centered .terra-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) .terra-drawer {
    display: none;
  }
}

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

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

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

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

/* Between the steps, a small pebble. */
.terra-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.32rem;
  margin-right: 0.6rem;
  border-radius: var(--terra-pebble);
  background: color-mix(in srgb, var(--accent, #a65a35) 70%, transparent);
  vertical-align: 0.15em;
}

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

.terra-breadcrumbs a:hover {
  color: var(--text-primary, #2c2520);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.terra-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #2c2520);
}

/* ------------------------------------------------------------------ Display type */

/* The frame's own large headings, in the heading face: calm, light, set at the left. The line height leaves room for
   the marks above capitals and the tails under the line. */
.terra-hero__title,
.terra-opening__title,
.terra-article__header h1,
.terra-footer__invite,
.terra-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-weight: var(--terra-heading-weight);
  letter-spacing: -0.012em;
  line-height: 1.1;
  text-wrap: balance;
}

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

/* The words at the left, the picture at the right in the shape of a river pebble, a larger pale stone behind it and a
   small stone of the accent resting against its foot. On a phone the pebble comes first, smaller, then the words. */
.terra-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--terra-gutter) clamp(3rem, 7vw, 6rem);
}

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

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

.terra-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  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. */
.terra-hero__title {
  font-size: calc(clamp(2.35rem, 1.5rem + 3.4vw, 4.4rem) * var(--terra-head-scale));
}

.terra-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #665a50);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  line-height: 1.6;
}

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

.terra-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* A selling point's icon sits on a soft wash of the accent, like a dab of slip on clay. */
.terra-hero__icon {
  box-sizing: content-box;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.05em;
  padding: 0.3rem;
  border-radius: var(--terra-pebble);
  background: color-mix(in srgb, var(--accent, #a65a35) 14%, transparent);
  color: var(--accent-ink, #924a28);
  stroke-width: 1.75;
}

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

.terra-hero__actions {
  margin-top: 0.5rem;
}

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

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

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

.terra-stars svg.is-full {
  fill: var(--accent-ink, #924a28);
}

.terra-hero__trustpilot {
  color: var(--accent-ink, #924a28);
  font-weight: var(--terra-body-strong);
}

.terra-hero__media {
  position: relative;
  isolation: isolate;
  width: min(100%, 34rem);
  margin: 0 auto;
  padding: 0 4% 6% 0;
}

/* The pebble: upright, its corners uneven. */
.terra-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--terra-pebble);
  object-fit: cover;
}

.terra-hero__stone {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.terra-hero__stone--back {
  top: 7%;
  right: -3%;
  width: 82%;
  height: 92%;
  border-radius: var(--terra-pebble-b);
  background: color-mix(in srgb, var(--surface-alt, #ebe2d5) 85%, var(--accent, #a65a35) 15%);
}

.terra-hero__stone--small {
  z-index: 1;
  bottom: 3%;
  left: 1%;
  width: 15%;
  aspect-ratio: 5 / 4;
  border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
  background: var(--accent, #a65a35);
  box-shadow: 0 12px 20px -14px color-mix(in srgb, var(--text-primary, #2c2520) 70%, transparent);
}

@media (max-width: 55.99rem) {
  .terra-hero:not(.terra-hero--words) .terra-hero__media {
    width: min(88%, 26rem);
  }

  .terra-hero__image {
    aspect-ratio: 1 / 1;
  }
}

/* Without a picture: the words alone on the paper, with a large brushed circle of the accent resting at the right. */
.terra-hero--words .terra-hero__copy {
  max-width: 46rem;
}

.terra-hero__enso,
.terra-opening__enso {
  position: absolute;
  top: 50%;
  right: max(-6rem, -8vw);
  z-index: -1;
  width: clamp(16rem, 40vw, 34rem);
  aspect-ratio: 1;
  translate: 0 -50%;
  background: color-mix(in srgb, var(--accent, #a65a35) 24%, transparent);
  pointer-events: none;
  -webkit-mask: var(--terra-enso) center / contain no-repeat;
  mask: var(--terra-enso) center / contain no-repeat;
}

.terra-hero--words,
.terra-opening--bare {
  isolation: isolate;
}

/* ------------------------------------------------------------------ The opening (full hero) */

/* Quiet first, then the picture: the heading on the paper at the left, the lead line and the buttons beside it on a
   wide screen, and the picture under the words as a wide slab with soft, uneven corners, standing in a little from
   the window's edges. The words never lie on the picture, so they read on any photograph and in every palette, and
   the buttons are on the first screen under a breadcrumb too (opening-first-screen.test.mjs). */
.terra-opening {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(1rem, 2vw, 1.5rem);
}

.terra-opening__words {
  display: grid;
  gap: 1.5rem;
  max-width: calc(var(--terra-width) + 2 * var(--terra-gutter));
  margin-inline: auto;
  padding-inline: var(--terra-gutter);
}

.terra-opening__title {
  max-width: 20ch;
  font-size: calc(clamp(2.5rem, 1.5rem + 3.9vw, 5.1rem) * var(--terra-head-scale));
  line-height: 1.06;
  /* The first line's marks (Š, Ž) stay clear of whatever stands above. */
  padding-block-start: 0.06em;
}

.terra-opening__aside {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 1.5rem;
  min-width: 0;
}

.terra-opening__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #665a50);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
  line-height: 1.6;
}

.terra-opening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 64rem) {
  /* The heading takes the wider, left part; the lead line and the buttons stand at the right, settled at its foot. */
  .terra-opening__words {
    grid-template-columns: minmax(0, 1.8fr) minmax(min(21rem, 34%), 1fr);
    align-items: end;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .terra-opening--bare .terra-opening__words {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(52rem + 2 * var(--terra-gutter));
    margin-inline: max(0px, calc((100% - var(--terra-width) - 2 * var(--terra-gutter)) / 2)) auto;
  }
}

.terra-opening__media {
  position: relative;
  overflow: hidden;
  height: clamp(18rem, 64svh, 46rem);
  margin: clamp(2.25rem, 5vw, 3.75rem) var(--terra-edge) 0;
  border-radius: var(--terra-slab);
  background: var(--surface-alt, #ebe2d5);
}

.terra-opening__image,
.terra-opening__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A video plays on wide screens only (media.js): on a phone a video without a picture leaves no empty frame. */
@media (max-width: 47.99rem) {
  .terra-opening--video .terra-opening__media:not(:has(img)) {
    display: none;
  }

  .terra-opening__media {
    height: clamp(16rem, 52svh, 30rem);
  }
}

/* Without a picture the words stand alone, with a large brushed circle resting at the right. */
.terra-opening--bare {
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  overflow: hidden;
}

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

/* The Theme Kit draws the sections; includes/stitch.php writes each one's type on it (data-block), and these rules
   compose the stock blocks in Terra's way. A module's own section (a type that starts with x_) keeps what its module
   asked for: the kit promises a module that a text it centres stays centred. */

/* Headings at the left, under a brush stroke, with their lead line under them: the page reads off-centre, as a page
   laid out by hand. An invitation (cta_section, cta_banner) stays centred, as a closing word does. */
.terra-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]).kit-section--align-center,
.terra-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]) :is(.kit-heading-group.kit-text--center, .kit-text-block.kit-text--lead.kit-text--center) {
  text-align: start;
}

.terra-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]) .kit-text-block.kit-text--lead.kit-text--center {
  margin-inline: 0;
}

.terra-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]) .kit-heading-group {
  max-width: 44rem;
}

/* What stands in a row above a heading (the icon of an enquiry form) goes left with it. */
.terra-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="cta_banner"]) .kit-row.kit-justify--center:has(+ .kit-heading-group) {
  justify-content: flex-start;
}

/* The brush stroke over a section's heading: in the flow, above the small label or the heading, so it never crosses
   either (first-section-marks.test.mjs). Centred over a centred heading. */
.terra-main [data-block]:not([data-block^="x_"]) .kit-heading-group:has(> .kit-heading--2)::before {
  content: "";
  display: block;
  width: 5rem;
  height: 0.75rem;
  margin: 0 0 1.25rem;
  background: var(--kit-accent, var(--accent, #a65a35));
  -webkit-mask: var(--terra-brush) center / 100% 100% no-repeat;
  mask: var(--terra-brush) center / 100% 100% no-repeat;
}

.terra-main [data-block^="x_"] .kit-heading-group.kit-text--center:has(> .kit-heading--2)::before,
.terra-main :is([data-block="cta_section"], [data-block="cta_banner"]) .kit-heading-group.kit-text--center:has(> .kit-heading--2)::before {
  margin-inline: auto;
}

/* A heading with an icon over it (an enquiry form, an invitation) is marked by the icon: one mark, not two. */
.terra-main [data-block]:not([data-block^="x_"]) .kit-row + .kit-heading-group:has(> .kit-heading--2)::before {
  display: none;
}

/* On a coloured band the paper of the page shows through its top and its foot as the torn edge of handmade paper: two
   strips of the page's colour, cut by the torn line, laid over the band's edges. The band's grain follows it. Only the
   stock blocks: a module's band keeps the kit's straight edge. */
.terra-main .kit-section--muted {
  background-image: var(--terra-grain);
}

.terra-main [data-block]:not([data-block^="x_"]).kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent):not(.kit-section--video)::before,
.terra-main [data-block]:not([data-block^="x_"]).kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent):not(.kit-section--video)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  height: 0.875rem;
  background-color: var(--background, #f4efe7);
  pointer-events: none;
}

.terra-main [data-block]:not([data-block^="x_"]).kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent):not(.kit-section--video)::before {
  top: -1px;
  -webkit-mask: var(--terra-tear-top) 0 0 / 30rem 100% repeat-x;
  mask: var(--terra-tear-top) 0 0 / 30rem 100% repeat-x;
}

.terra-main [data-block]:not([data-block^="x_"]).kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent):not(.kit-section--video)::after {
  bottom: -1px;
  -webkit-mask: var(--terra-tear-bottom) 11rem 0 / 30rem 100% repeat-x;
  mask: var(--terra-tear-bottom) 11rem 0 / 30rem 100% repeat-x;
}

/* A band with a photograph is a slab laid on the paper: it stands in a little from the window's edges, with soft,
   uneven corners, and the page's paper shows around it. */
.terra-main [data-block]:not([data-block^="x_"]).kit-section--image {
  margin: clamp(0.5rem, 1.5vw, 1rem) var(--terra-edge);
  overflow: hidden;
  border-radius: var(--terra-slab);
}

/* A list of services, people or places is laid like stones on a path: on a wide screen every second one sits a little
   lower. Only where cards stand side by side in more than one column. */
@media (min-width: 48rem) {
  .terra-main :is([data-block="service_cards"], [data-block="team_grid"], [data-block="location_cards"], [data-block="child_pages"]) .kit-grid:not(.kit-cols--1) {
    align-items: start;
  }

  .terra-main :is([data-block="service_cards"], [data-block="team_grid"], [data-block="location_cards"], [data-block="child_pages"]) .kit-grid:not(.kit-cols--1) > :nth-child(even) {
    margin-top: clamp(1.25rem, 3vw, 2.75rem);
  }
}

/* The steps of a process: each number stands inside a brushed circle, the circles turned a little differently, like
   stones put down one by one. A step with an icon is led by its icon instead, and its number is a small label over the
   title (the kit's rule: one lead mark a step). */
.terra-main .kit-steps > .kit-card > .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 0.9rem;
  color: var(--kit-accent-text, var(--accent-ink, #924a28));
  font-family: var(--font-heading, serif);
  font-size: 1.35rem;
  font-weight: var(--terra-heading-weight);
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.terra-main .kit-steps > .kit-card > .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kit-accent, var(--accent, #a65a35));
  pointer-events: none;
  -webkit-mask: var(--terra-enso) center / contain no-repeat;
  mask: var(--terra-enso) center / contain no-repeat;
}

.terra-main .kit-steps > :nth-child(3n + 2) > .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow::before {
  rotate: 128deg;
}

.terra-main .kit-steps > :nth-child(3n) > .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow::before {
  rotate: 236deg;
}

@media (min-width: 48rem) {
  .terra-main .kit-steps:not(.kit-cols--1) {
    align-items: start;
  }

  .terra-main .kit-steps:not(.kit-cols--1) > :nth-child(even) {
    margin-top: clamp(1rem, 2.5vw, 2.25rem);
  }
}

/* A step with an icon: the icon, which leads, stands inside the brushed circle instead, and its number is the small
   label under it. From the width where the steps stand side by side; on a phone the shared rule lays the number, the
   icon and the title on one line, and the icon keeps its wash. */
@media (min-width: 40rem) {
  .terra-main .kit-steps > .kit-card > .kit-card__content:has(> .kit-card__body > .kit-icon--large:first-child) {
    position: relative;
  }

  .terra-main .kit-steps > .kit-card > .kit-card__content > .kit-card__body > .kit-icon--large:first-child {
    padding: 0.85rem;
    background: none;
  }

  .terra-main .kit-steps > .kit-card > .kit-card__content:has(> .kit-card__body > .kit-icon--large:first-child)::before {
    content: "";
    position: absolute;
    top: var(--kit-card-pad, 1.5rem);
    left: 0;
    width: 3.95rem;
    aspect-ratio: 1;
    background: var(--kit-accent, var(--accent, #a65a35));
    pointer-events: none;
    -webkit-mask: var(--terra-enso) center / contain no-repeat;
    mask: var(--terra-enso) center / contain no-repeat;
  }

  .terra-main .kit-steps > :nth-child(3n + 2) > .kit-card__content:has(> .kit-card__body > .kit-icon--large:first-child)::before {
    rotate: 128deg;
  }

  .terra-main .kit-steps > :nth-child(3n) > .kit-card__content:has(> .kit-card__body > .kit-icon--large:first-child)::before {
    rotate: 236deg;
  }
}

/* The invitation near the end of a page (cta_section and cta_banner without a photograph): the closing word, centred,
   with a large brushed circle of the accent behind its heading. */
.terra-main :is([data-block="cta_section"], [data-block="cta_banner"]):not(.kit-section--image) {
  overflow: hidden;
}

.terra-main :is([data-block="cta_section"], [data-block="cta_banner"]):not(.kit-section--image) > .kit-section__inner {
  position: relative;
  isolation: isolate;
}

.terra-main [data-block="cta_section"]:not(.kit-section--image) > .kit-section__inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: clamp(16rem, 34vw, 26rem);
  aspect-ratio: 1;
  translate: -50% -52%;
  rotate: -14deg;
  background: color-mix(in srgb, var(--kit-accent, var(--accent, #a65a35)) 16%, transparent);
  pointer-events: none;
  -webkit-mask: var(--terra-enso) center / contain no-repeat;
  mask: var(--terra-enso) center / contain no-repeat;
}

.terra-main [data-block="cta_section"]:not(.kit-section--image) .kit-heading--2 {
  font-size: calc(clamp(2.1rem, 1.4rem + 3vw, 3.6rem) * var(--terra-head-scale));
  line-height: 1.1;
}

/* A statistic stands on a short brush stroke. */
.terra-main [data-block="stats_counter"] .kit-stat__value::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 0.45rem;
  margin: 0.55rem 0 0;
  background: var(--kit-accent, var(--accent, #a65a35));
  -webkit-mask: var(--terra-brush) center / 100% 100% no-repeat;
  mask: var(--terra-brush) center / 100% 100% no-repeat;
}

.terra-main [data-block="stats_counter"] .kit-align--center .kit-stat__value::after,
.terra-main [data-block="stats_counter"] .kit-text--center .kit-stat__value::after {
  margin-inline: auto;
}

/* A video and a frame from another site rest in a slab with soft, uneven corners. */
.terra-main :is(.kit-video, .kit-frame) {
  overflow: hidden;
  border-radius: var(--terra-slab);
}

/* On a wide screen a narrow section (questions, an enquiry form, the places served, a timeline) is not a thin column
   in the middle of the page: its heading stands at the left and its content at the right, off-centre. Only when the
   section opens with its heading (no :has() inside another, which a browser drops); floats, so the content's own parts keep their order and never overlap. */
@media (min-width: 64rem) {
  .terra-main :is([data-block="faq"], [data-block="contact_form"], [data-block="service_area"], [data-block="timeline"]) > .kit-section__inner.kit-width--narrow:has(> .kit-stack > .kit-heading-group:first-child, > .kit-stack > .kit-stack:first-child > .kit-heading-group) {
    --kit-w: var(--kit-width-normal);
  }

  .terra-main :is([data-block="faq"], [data-block="contact_form"], [data-block="service_area"], [data-block="timeline"]) > .kit-width--narrow > .kit-stack:has(> .kit-heading-group:first-child, > .kit-stack:first-child > .kit-heading-group) {
    display: flow-root;
  }

  .terra-main :is([data-block="faq"], [data-block="contact_form"], [data-block="service_area"], [data-block="timeline"]) > .kit-width--narrow > .kit-stack:has(> .kit-heading-group:first-child, > .kit-stack:first-child > .kit-heading-group) > * {
    margin: var(--kit-gap-medium, 1.5rem) 0 0 43%;
  }

  .terra-main :is([data-block="faq"], [data-block="contact_form"], [data-block="service_area"], [data-block="timeline"]) > .kit-width--narrow > .kit-stack:has(> .kit-heading-group:first-child, > .kit-stack:first-child > .kit-heading-group) > :is(:first-child, :first-child + .kit-text--lead) {
    float: left;
    clear: left;
    width: 36%;
    margin: 0 0 1rem;
  }

  .terra-main :is([data-block="faq"], [data-block="contact_form"], [data-block="service_area"], [data-block="timeline"]) > .kit-width--narrow > .kit-stack:has(> .kit-heading-group:first-child, > .kit-stack:first-child > .kit-heading-group) > :first-child + .kit-text--lead {
    margin-top: 0.25rem;
  }

  .terra-main :is([data-block="faq"], [data-block="contact_form"], [data-block="service_area"], [data-block="timeline"]) > .kit-width--narrow > .kit-stack:has(> .kit-heading-group:first-child, > .kit-stack:first-child > .kit-heading-group) > :first-child + :not(.kit-text--lead),
  .terra-main :is([data-block="faq"], [data-block="contact_form"], [data-block="service_area"], [data-block="timeline"]) > .kit-width--narrow > .kit-stack:has(> .kit-heading-group:first-child, > .kit-stack:first-child > .kit-heading-group) > :first-child + .kit-text--lead + * {
    margin-top: 0;
  }
}

/* A gallery's pictures are stones of different shapes. */
.terra-main [data-block="image_gallery"] .kit-grid > .kit-picture.kit-rounded:nth-child(3n + 2) {
  border-radius: 1.35rem 2.2rem 1.5rem 2.1rem / 2.1rem 1.3rem 2.3rem 1.4rem;
}

.terra-main [data-block="image_gallery"] .kit-grid > .kit-picture.kit-rounded:nth-child(3n) {
  border-radius: 2.3rem 1.6rem 1.25rem 2rem / 1.6rem 2rem 2.2rem 1.25rem;
}

/* A slideshow opening is a slab laid on the paper, like a band with a photograph. */
.terra-main [data-block="hero_slider"] {
  margin: clamp(0.5rem, 1.5vw, 1rem) var(--terra-edge);
  overflow: hidden;
  border-radius: var(--terra-slab);
}

/* The poster a video shows before it is played (PageMedia writes it and its plain look): here warm charcoal lit by
   the accent from one corner, in every palette, with the play button in the accent. */
.terra-main .pagestic-video {
  background:
    radial-gradient(70% 95% at 82% 14%, color-mix(in srgb, var(--accent, #a65a35) 34%, transparent), transparent 72%),
    linear-gradient(160deg, #3b302a 0%, #17120f 75%);
}

.terra-main .pagestic-video__play rect {
  fill: var(--accent, #a65a35);
}

.terra-main .pagestic-video__play path {
  fill: var(--on-accent, #ffffff);
}

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

.terra-article {
  padding: clamp(2.5rem, 6vw, 5rem) var(--terra-gutter);
}

.terra-article__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.terra-article__header {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 2.5rem;
}

.terra-article__header::before {
  content: "";
  display: block;
  width: 4.25rem;
  height: 0.6rem;
  background: var(--accent, #a65a35);
  -webkit-mask: var(--terra-brush) center / 100% 100% no-repeat;
  mask: var(--terra-brush) center / 100% 100% no-repeat;
}

.terra-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--text-secondary, #665a50);
  font-size: 0.9375rem;
}

.terra-article__header h1 {
  font-size: calc(clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem) * var(--terra-head-scale));
}

.terra-prose {
  line-height: 1.75;
}

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

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

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

.terra-prose :where(h2, h3, h4) {
  margin: 1.9em 0 0.55em;
  font-family: var(--font-heading, serif);
  font-weight: var(--terra-heading-weight);
  line-height: 1.22;
}

.terra-prose h2 {
  font-size: calc(clamp(1.6rem, 1.35rem + 1vw, 2.1rem) * var(--terra-head-scale));
}

.terra-prose h3 {
  font-size: calc(1.4rem * var(--terra-head-scale));
}

.terra-prose h4 {
  font-size: calc(1.15rem * var(--terra-head-scale));
}

.terra-prose a {
  color: var(--accent-ink, #924a28);
  text-underline-offset: 0.2em;
}

/* A quotation in the heading face, beside a short upright brush stroke; in its italic where the font palette has one. */
.terra-prose blockquote {
  position: relative;
  margin-inline: 0;
  padding-left: 1.5rem;
  color: var(--text-primary, #2c2520);
  font-family: var(--font-heading, serif);
  font-size: 1.2em;
  line-height: 1.55;
  font-synthesis: none;
}

.terra-prose blockquote::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;
  width: 0.3rem;
  border-radius: 0.3rem 0.15rem 0.25rem 0.2rem;
  background: var(--accent, #a65a35);
}

html.terra-italic .terra-prose blockquote {
  font-style: italic;
}

.terra-prose img {
  display: block;
  border-radius: var(--terra-stone);
}

.terra-prose figcaption {
  margin-top: 0.6rem;
  color: var(--text-secondary, #665a50);
  font-size: 0.9375rem;
}

.terra-prose :where(th, td) {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--terra-line);
  text-align: left;
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.terra-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

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

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

/* line: a long, quiet brush stroke; dashed: a row of short strokes; dotted: three pebbles of different sizes. */
.terra-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  max-width: calc(var(--terra-width) + 2 * var(--terra-gutter));
  margin-inline: auto;
  padding: clamp(1.75rem, 3.5vw, 3rem) var(--terra-gutter);
}

.terra-divider__line {
  width: min(100%, 22rem);
  height: 0.55rem;
  background: color-mix(in srgb, var(--text-secondary, #665a50) 55%, transparent);
  -webkit-mask: var(--terra-brush) center / 100% 100% no-repeat;
  mask: var(--terra-brush) center / 100% 100% no-repeat;
}

.terra-divider--dashed .terra-divider__line {
  width: min(100%, 40rem);
  height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-secondary, #665a50) 60%, transparent) 0 1.1rem, transparent 1.1rem 1.8rem);
  -webkit-mask: none;
  mask: none;
}

.terra-divider--dotted span {
  width: 0.55rem;
  height: 0.45rem;
  border-radius: var(--terra-pebble);
  background: color-mix(in srgb, var(--text-secondary, #665a50) 60%, transparent);
}

.terra-divider--dotted span:nth-child(2) {
  width: 0.8rem;
  height: 0.62rem;
  border-radius: var(--terra-pebble-b);
  background: var(--accent, #a65a35);
}

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

/* The footer is a deeper sheet of the same paper: the tinted surface with its grain, its top torn like handmade paper,
   with the page's own text colours (the same pair in every palette and with a website's own colours). */
.terra-footer {
  position: relative;
  /* The brushed circle beside the invitation may reach past the window's edge on a phone: it is cut there, the page
     never scrolls sideways. */
  overflow-x: clip;
  margin-top: clamp(1rem, 3vw, 2rem);
  background-color: var(--surface-alt, #ebe2d5);
  background-image: var(--terra-grain);
  color: var(--text-primary, #2c2520);
}

.terra-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 0.875rem;
  background-color: var(--background, #f4efe7);
  pointer-events: none;
  -webkit-mask: var(--terra-tear-top) 5rem 0 / 30rem 100% repeat-x;
  mask: var(--terra-tear-top) 5rem 0 / 30rem 100% repeat-x;
}

.terra-footer__inner {
  max-width: calc(var(--terra-width) + 2 * var(--terra-gutter));
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--terra-gutter) 1.75rem;
}

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

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

.terra-footer .terra-brand__name {
  max-width: 100%;
  font-size: calc(1.6rem * var(--terra-head-scale));
}

.terra-footer .terra-brand:has(.terra-brand__logo, .brand-logo-original, .logo-mask) .terra-brand__name {
  font-size: calc(1.25rem * var(--terra-head-scale));
}

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

.terra-footer .logo-mask {
  background-color: var(--text-primary, #2c2520) !important;
}

/* The mega footer opens with an invitation beside a brushed circle, and the header's button. */
.terra-footer__closing {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--terra-line);
}

.terra-footer__closing::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * clamp(2.5rem, 5vw, 4.5rem));
  z-index: -1;
  width: clamp(8rem, 14vw, 11rem);
  aspect-ratio: 1;
  translate: 0 -58%;
  rotate: 24deg;
  background: color-mix(in srgb, var(--accent, #a65a35) 26%, transparent);
  pointer-events: none;
  -webkit-mask: var(--terra-enso) center / contain no-repeat;
  mask: var(--terra-enso) center / contain no-repeat;
}

.terra-footer__invite {
  max-width: 22ch;
  font-size: calc(clamp(1.9rem, 1.35rem + 2.2vw, 3rem) * var(--terra-head-scale));
  line-height: 1.15;
}

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

@media (min-width: 64rem) {
  .terra-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
  }
}

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

.terra-footer__tagline,
.terra-footer__contact p:not(.terra-footer__title),
.terra-footer__copyright {
  margin: 0;
  color: var(--text-secondary, #665a50);
  font-size: 0.9688rem;
}

.terra-footer__tagline {
  max-width: 24rem;
}

/* A column's title: a small label in the heading face, in its italic where the font palette has one. */
.terra-footer__title {
  margin: 0 0 0.85rem;
  color: var(--accent-ink, #924a28);
  font-family: var(--font-heading, serif);
  font-size: 1.0625rem;
  font-weight: var(--terra-heading-weight);
  line-height: 1.4;
  font-synthesis: none;
}

html.terra-italic .terra-footer__title {
  font-style: italic;
}

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

.terra-footer__links a,
.terra-footer__contact a,
.terra-footer__legal a,
.terra-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--text-secondary, #665a50);
  font-size: 0.9688rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.terra-footer__links a:hover,
.terra-footer__contact a:hover,
.terra-footer__legal a:hover,
.terra-footer__inline a:hover {
  color: var(--text-primary, #2c2520);
  text-decoration: underline;
  text-decoration-color: var(--accent, #a65a35);
  text-underline-offset: 0.3em;
}

.terra-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--text-primary, #2c2520) 22%, transparent);
  border-radius: var(--terra-pebble);
  color: inherit;
  transition: border-color var(--terra-speed) ease, background-color var(--terra-speed) ease;
}

.terra-footer__social a:nth-child(even) {
  border-radius: var(--terra-pebble-b);
}

.terra-footer__social a:hover {
  border-color: currentColor;
  background: color-mix(in srgb, var(--background, #f4efe7) 60%, transparent);
}

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

.terra-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--terra-line);
}

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

.terra-footer__legal a,
.terra-footer__copyright {
  font-size: 0.875rem;
}

.terra-footer--minimal .terra-footer__legal {
  margin-top: 0.85rem;
}

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

/* The number rests inside a large brushed circle. */
.terra-not-found {
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--terra-gutter);
  text-align: center;
}

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

.terra-not-found__number {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(9rem, 22vw, 12rem);
  aspect-ratio: 1;
  margin: 0 0 0.75rem;
  color: var(--accent-ink, #924a28);
  font-family: var(--font-heading, serif);
  font-size: calc(clamp(2.25rem, 1.8rem + 2vw, 3rem) * var(--terra-head-scale));
  font-weight: var(--terra-heading-weight);
  line-height: 1;
}

.terra-not-found__number::before {
  content: "";
  position: absolute;
  inset: 0;
  rotate: -20deg;
  background: var(--accent, #a65a35);
  pointer-events: none;
  -webkit-mask: var(--terra-enso) center / contain no-repeat;
  mask: var(--terra-enso) center / contain no-repeat;
}

.terra-not-found h1 {
  font-size: calc(clamp(2rem, 1.5rem + 2vw, 3rem) * var(--terra-head-scale));
}

.terra-not-found p {
  margin: 0;
  color: var(--text-secondary, #665a50);
}

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

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

.terra-form-success::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.5rem;
  background: var(--accent, #a65a35);
  -webkit-mask: var(--terra-enso) center / contain no-repeat;
  mask: var(--terra-enso) center / contain no-repeat;
}

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

.terra-form-success p {
  margin: 0;
  color: var(--text-secondary, #665a50);
}

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

/* The shared bar (resilience.css) on the paper, with its button. */
body .theme-action-bar {
  border-top: 1px solid var(--terra-line);
  background: color-mix(in srgb, var(--background, #f4efe7) 96%, transparent);
}

/* ------------------------------------------------------------------ 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) {
  .terra-menu-button {
    display: none !important;
  }

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

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

/* The shared motion brings parts in slowly, as the theme moves; nothing moves for a visitor who asks for less. */
:where(:root) {
  --motion-speed: 900ms;
  --motion-rise: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}