/*
 * Collage: cut and paste, like a zine made on a kitchen table. The page is a sheet of paper; coloured bands are other
 * papers torn and glued across it; pictures are cut out and taped down at a slight angle; the page's heading is made of
 * words cut from different papers; small labels are written on pieces of tape; numbers and the page being read are
 * circled in marker; buttons are scraps of paper laid on the page a little crooked.
 *
 * This file draws the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the three blocks
 * the theme draws itself (the split hero, the article body, the divider), and lays the Theme Kit's sections on the paper
 * (torn bands, the cut-out headings, marker marks): everything that needs a drawn shape, which kit-theme.css may not load.
 * The look of the kit's parts (cards, buttons, tape labels, 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.
 *
 * Drawn marks (a marker loop, a scribbled star, tape) are painted with a gradient under a mask, never with a background
 * colour: verify-theme-readability.mjs reads a pseudo-element's background colour as the fill under the text beside it,
 * and a loop round a number is not what the number stands on. A torn band, which the text does stand on, is a background
 * colour, on ::after (the checker reads ::after first; the paler rim of the tear is on ::before).
 *
 * Type comes from the layout: --font-heading, --font-body, --collage-heading-weight and --collage-body-strong (the
 * heaviest weights the font palette loads), and --collage-display (a narrow face is set larger). 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. */
:where(:root) {
  --collage-width: 74rem;
  --collage-gutter: clamp(1rem, 4vw, 2rem);
  --collage-bar: 4.5rem;
  --collage-radius: 0;
  --collage-button-radius: 0;
  --collage-heading-weight: 400;
  --collage-body-strong: 700;
  --collage-display: 1;
  --collage-speed: 180ms;
  --collage-line: var(--border, #cbbfa7);
  /* Masking tape: the paper with a little of the ink and the accent in it, so it shows on every paper of the palette. */
  --collage-tape: color-mix(in srgb, var(--accent, #ff5533) 9%, color-mix(in srgb, var(--surface-alt, #e2d1ae) 45%, var(--surface, #fffdf7)));
  --collage-tape-clear: color-mix(in srgb, var(--collage-tape) 84%, transparent);
  /* The marker: the accent's readable shade, which the colour contract holds on every paper. */
  --collage-marker: var(--accent-ink, #a8260c);
  --collage-highlight: color-mix(in srgb, var(--accent, #ff5533) 50%, transparent);
  /* Paper lying on paper: a hairline of shade and a soft one below. */
  --collage-shadow: 0 1px 1px color-mix(in srgb, var(--text-primary, #1a1917) 16%, transparent), 0 10px 18px -12px color-mix(in srgb, var(--text-primary, #1a1917) 50%, transparent);
  --collage-shadow-lift: 0 2px 2px color-mix(in srgb, var(--text-primary, #1a1917) 14%, transparent), 0 18px 28px -16px color-mix(in srgb, var(--text-primary, #1a1917) 55%, transparent);
  /* The ends of a piece of tape, torn across by hand. */
  --collage-tape-ends: polygon(0 8%, 4px 22%, 0 38%, 3px 55%, 0 71%, 4px 86%, 0 100%, 100% 100%, calc(100% - 4px) 84%, 100% 68%, calc(100% - 3px) 50%, 100% 33%, calc(100% - 4px) 16%, 100% 0, 3px 0);
  /* Shapes drawn by hand (.tmp/themes-157/collage/shapes.mjs): torn paper edges that repeat across a band, a picture torn on
     four sides, a marker loop and stroke, a scribbled arrow and star, scissors. Used as masks, so they take any colour. */
  --collage-torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8L3 8.1L10 8L14 6.7L16 7.9L18 9.1L20 9.7L26 9.5L33 9.5L35 7.7L40 9.1L46 6.7L51 8L57 5.9L62 7.7L65 6.7L71 5.1L76 5.4L82 5.1L85 5.6L89 3.8L95 6L102 4.6L104 4.9L109 4.3L115 5.4L118 4.6L125 6L131 7.8L136 5.6L143 6.4L149 10.8L155 7.7L157 7.6L162 9.2L166 7.5L171 6.6L174 9.6L181 6.8L186 6.6L192 7.2L195 9.1L201 6.8L205 7.9L210 8.1L215 9.1L220 7L226 7.5L230 6.4L234 7.1L239 7.3L244 9.1L247 10.2L253 8.6L256 9.2L262 10.4L267 8.6L271 10.7L278 9.9L281 9.5L285 10.3L290 12.9L294 12.4L296 12.5L302 11.3L306 12.7L308 10.8L314 12.4L319 10L325 11.8L331 11L333 8.2L339 11.6L346 10.1L350 7.7L356 9.6L358 8.8L363 7.3L370 7L375 7.1L377 9.2L384 8.5L386 8.3L391 8.9L394 7.9L397 7.1L400 8V16H0Z'/%3E%3C/svg%3E");
  --collage-torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 7.7L6 8.5L8 6.8L14 6.1L21 7.8L28 8L34 3.8L37 3.7L39 4.6L43 5.8L49 5.5L52 6.1L58 4.5L62 3.6L67 4.9L72 4.8L76 5.6L78 4.5L83 4.2L85 5.6L87 4.4L94 5L100 4.5L104 7.8L110 7.3L113 8.4L116 5.3L118 6.4L124 7.6L127 8.1L131 8.9L138 7.8L143 8.1L149 10.3L156 7.3L160 8.3L166 9.3L173 7.7L177 8.8L180 7.6L187 6.9L194 8.8L198 9.5L202 8L208 9.7L213 9L218 10.2L222 6.2L227 8.1L230 9.3L236 10.7L239 11.8L241 9L246 9.6L249 12.1L255 11.3L259 12.2L264 10.8L271 11.4L274 12.4L281 9.9L287 12.2L290 9L297 10.7L303 9.3L308 8.9L312 7.3L314 8.4L317 6.9L323 6.4L330 9.2L335 8.4L337 7.1L339 6L345 8.4L352 5.9L355 8.7L361 5.7L365 6.7L372 6.6L379 7.7L385 8.7L390 7.6L396 9.2L398 6.7L400 7.7V0H0Z'/%3E%3C/svg%3E");
  --collage-torn-top-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 6.4L7 7L12 6.1L15 4.7L20 3.7L24 6.3L26 6.4L30 5.5L35 3.4L40 5.2L43 3.7L47 6.4L52 5.9L55 4.4L58 6.4L64 4.4L66 4.4L68 7.5L75 7.1L79 7.6L85 8.4L89 7.5L91 8.6L96 7.8L103 8.8L110 9.1L114 9.5L120 10.4L126 10.6L129 9.7L134 9L140 10.5L142 8.4L149 9.7L153 7.1L159 9.2L162 6.9L166 9.3L170 8.5L173 11.5L176 8.3L179 9.2L186 8L192 12.2L199 9.7L203 10.4L208 9.3L212 10.1L216 10.3L222 12.1L225 9.5L227 10L231 10.4L236 12L242 10.7L247 12.4L253 9.6L255 11.5L261 12L266 11.2L269 9.3L275 10.7L282 8.5L284 9.8L288 8.8L290 6.7L295 9.3L299 6.3L301 7.3L304 5.8L307 8.5L309 6.8L316 5.3L321 5.4L325 9L327 8.4L332 6.5L338 6.4L342 6.6L347 5.7L354 8.7L357 9.4L359 7.1L363 7L370 8.3L372 8.2L378 7.9L383 5.8L387 7.9L391 5.4L395 7.7L397 5.8L399 6.4L400 6.4V16H0Z'/%3E%3C/svg%3E");
  --collage-torn-bottom-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 5.9L5 6.9L8 4.9L10 5.8L15 6.6L22 7.9L27 8L29 9L35 7.2L38 7.7L42 10.6L45 10L52 9.7L54 10.6L61 10.1L66 9.8L71 10.3L78 8.9L82 8.2L84 10.4L91 9.9L96 11.1L99 10.4L106 5.4L109 8.1L114 8.8L121 10.1L126 6.2L131 8L136 7.1L138 10.9L140 10.9L143 10.6L145 10.4L149 11.4L152 11.5L158 9.1L162 11.4L166 9.5L172 11.2L179 10.5L181 12L184 12.3L190 11.1L192 11.8L197 10.7L203 7.5L206 10.5L210 9.7L212 8.4L214 8.4L219 7L225 8.9L231 8.1L237 6.8L239 6.7L246 5.1L251 5.4L253 7.3L257 5.9L259 7.6L263 4.6L265 4.4L267 5.8L270 6.5L274 4.6L276 2.5L281 6.6L285 4.8L290 6.1L296 6.2L303 6.1L306 5.2L309 6.8L316 6L320 7.9L323 5.9L326 6.4L333 6.1L336 7.9L341 8.2L347 5.9L351 6.5L355 6.9L361 4.2L367 6.5L370 3.9L373 6.1L375 5.3L379 5.6L381 6.7L388 7.1L391 5.7L397 6.3L400 5.9V0H0Z'/%3E%3C/svg%3E");
  --collage-torn-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'%3E%3Cpath d='M0 2.5L9 6.4L14 2.8L20 1.6L27 2.8L35 1.4L39 1.8L47 1.9L53 6.2L58 2.6L67 1.4L71 1.4L79 2.2L82 1.3L86 2.1L92 5.2L100 2.8L104 3.6L107 1.9L110 4.1L119 2.9L125 3L132 3L136 2.4L141 2.9L147 1.5L153 2.1L162 2L168 1.9L176 1.3L185 4.3L190 1.3L196 4.1L205 3.4L212 1.5L219 2.2L227 2.3L236 2.2L241 4.1L250 2L258 3.3L261 3.6L269 1.1L274 1.9L283 3.6L291 2.7L296 3.1L299 4.2L300 3.9L297.3 0L293.7 9L297.7 12L296.5 19L296.8 28L298.1 32L297.3 36L296.5 43L296.6 52L296.4 61L296.6 64L295.4 73L296.2 76L297.2 80L295.9 84L296.3 87L297.9 92L296.1 101L298.6 106L296 115L297.4 122L296.7 131L297.5 140L298.6 145L296.8 153L298.5 156L296.7 165L296.6 172L296.1 175L297.4 183L296.3 191L298.9 199L298.3 203L295.9 208L297.8 212L298.2 216L297.1 225L296.7 234L298.5 237L297.1 245L298.7 251L297.9 258L297.6 264L296.9 268L295.9 274L297.4 280L297.3 286L298.1 293L296.1 300L300 295.8L294 298.2L285 297.1L282 297.1L274 298.3L269 296.3L262 296.4L255 297.6L248 297.9L243 296.2L240 298L237 297.9L231 297.6L228 297.4L224 297.3L217 295.9L213 298.7L209 297L200 297L195 296.8L186 296.4L181 298.6L172 297.1L164 298.4L155 296.5L146 296.8L141 298.3L135 296.2L130 296.6L122 296.3L115 298.5L112 299L106 298.8L99 296.8L94 296.9L88 298.7L84 296.9L78 297.2L70 297.1L67 299L58 298.1L54 296.9L47 298.7L40 297.1L34 298.4L25 298.3L18 298.2L10 298.3L4 298.9L0 297.6L3.9 300L3.2 292L2.8 288L1.9 284L3.7 278L2.7 270L3.7 265L2.3 261L2.6 258L2 253L5.7 249L1.1 242L1.2 237L1 228L1.3 225L1.6 216L2.2 209L1.9 204L2.9 195L1.6 188L1.3 185L4.3 182L5 173L3.5 167L1.3 163L2.8 159L1.1 155L2.3 149L4.1 142L3.2 137L3 134L3.1 130L2.9 123L1.4 116L3 112L1.6 109L2.4 106L3.1 99L3.8 94L1.7 85L4 80L4.6 77L3.5 72L3 67L3.2 59L1.7 56L6.2 48L1.1 45L1.8 38L2.8 34L2.1 27L1.1 24L2.9 16L2.8 11L1.5 5L1.5 1L3.8 0Z'/%3E%3C/svg%3E");
  --collage-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M38 18C78 4 156 6 186 34C206 56 176 88 112 93C52 98 8 82 10 54C12 30 52 14 104 11C132 10 158 14 172 22' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --collage-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C40 4 90 3 130 5C158 6 182 4 197 6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --collage-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath d='M6 20C26 6 58 6 76 22C88 33 94 46 96 62M82 52L96 66L108 48' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --collage-scissors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 8.1 20 20M8.1 15.9 20 4M14.5 12h.01'/%3E%3C/g%3E%3C/svg%3E");
  --collage-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6L61 38L95 38L67 58L78 92L50 71L22 92L33 58L5 38L39 38Z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

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

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

body {
  margin: 0;
  background: var(--background, #efe9dc);
  color: var(--text-primary, #1a1917);
  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, #a8260c);
  outline-offset: 3px;
}

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

.collage-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--primary, #1a1917);
  color: var(--on-primary, #fffdf7);
  font-weight: var(--collage-body-strong);
  text-decoration: none;
}

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

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

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

/* A scrap of paper laid on the page a little crooked, the label typed on it in capitals. The paper is the button's
   ::before, turned a degree or so (--collage-tilt), so it can carry a soft shadow; the label and the focus ring stay
   straight on the button itself. kit-theme.css gives the kit's buttons the same paper, and this theme's line in
   resilience.css gives the cookie notice and the phone action bar a cut scrap of their own (theme-chrome.test.mjs).
   A label may take two lines; it never runs out of the button. */
.collage-button {
  --collage-fill: var(--primary, #1a1917);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  max-width: 100%;
  padding: 0.65rem 1.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: var(--collage-body-strong);
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: break-word;
  transition: translate var(--collage-speed) ease;
}

.collage-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--collage-fill);
  box-shadow: var(--collage-shadow);
  rotate: var(--collage-tilt, -1.2deg);
  transition: rotate var(--collage-speed) ease, box-shadow var(--collage-speed) ease, background-color var(--collage-speed) ease;
}

.collage-button:hover {
  translate: 0 -2px;
}

.collage-button:hover::before {
  rotate: 0deg;
  box-shadow: var(--collage-shadow-lift);
}

/* 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. */
.collage-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: underline 2px transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--collage-speed) ease;
}

.collage-button:hover > span {
  text-decoration-color: currentColor;
}

.collage-button--primary {
  --collage-fill: var(--primary, #1a1917);
  color: var(--on-primary, #fffdf7);
}

.collage-button--primary:hover {
  --collage-fill: var(--primary-alt, #38342f);
}

.collage-button--accent {
  --collage-fill: var(--accent, #ff5533);
  --collage-tilt: 1.4deg;
  color: var(--on-accent, #1a1917);
}

.collage-button--secondary {
  --collage-fill: var(--surface, #fffdf7);
  --collage-tilt: 1deg;
  color: var(--text-primary, #1a1917);
}

.collage-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.75rem;
}

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

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

/* A strip of the accent paper across the top. */
.collage-announcement {
  position: relative;
  z-index: 51;
  background: var(--accent, #ff5533);
  color: var(--on-accent, #1a1917);
  font-size: 0.875rem;
}

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

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

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

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

.collage-announcement a {
  font-weight: var(--collage-body-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

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

.collage-announcement .announcement-dismiss:hover {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

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

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

/* A strip of white paper across the top of the window, torn along its lower edge, that stays at the top. The bar is a
   solid fill (the shared logo check reads it); the torn fringe hangs under it (::after) and its shadow, the same tear a
   little lower in a faint ink, under that (::before). No filter on the header: a filter would make the header the box of
   anything fixed inside it, and a module's drawer opened from the header's slot would be shut inside the bar. */
.collage-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--text-primary, #1a1917);
}

.collage-header::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  height: 0.75rem;
  background-image: linear-gradient(color-mix(in srgb, var(--text-primary, #1a1917) 13%, transparent), color-mix(in srgb, var(--text-primary, #1a1917) 13%, transparent));
  -webkit-mask: var(--collage-torn-bottom) 0 0 / 30rem 100% repeat-x;
  mask: var(--collage-torn-bottom) 0 0 / 30rem 100% repeat-x;
  pointer-events: none;
}

.collage-header::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  height: 0.75rem;
  background-image: linear-gradient(var(--surface, #fffdf7), var(--surface, #fffdf7));
  -webkit-mask: var(--collage-torn-bottom) 0 0 / 30rem 100% repeat-x;
  mask: var(--collage-torn-bottom) 0 0 / 30rem 100% repeat-x;
  pointer-events: none;
}

.collage-header__bar {
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
}

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

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

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

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

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

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

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

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

.collage-header__phone:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

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

/* The website's name, cut out of the black paper and stuck on the strip a little crooked. Its line height and 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. */
.collage-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.collage-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, sans-serif);
  font-size: calc(1.3rem * var(--collage-display, 1));
  font-weight: var(--collage-heading-weight);
  line-height: 1.3;
}

.collage-header .collage-brand__name {
  display: block;
  overflow: visible;
  padding: 0.14em 0.42em 0.16em;
  background: var(--primary, #1a1917);
  color: var(--on-primary, #fffdf7);
  box-shadow: 0 2px 4px -1px color-mix(in srgb, var(--text-primary, #1a1917) 40%, transparent);
  rotate: -2deg;
}

/* Beside a logo the name is the logo's caption: plain ink, straight. */
.collage-header .collage-brand:has(.collage-brand__logo, .brand-logo-original, .logo-mask) .collage-brand__name {
  padding-inline: 0;
  background: none;
  color: inherit;
  box-shadow: none;
  rotate: none;
  font-size: calc(1.1rem * var(--collage-display, 1));
}

/* 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) {
  .collage-header .collage-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.125rem * var(--collage-display, 1));
  }
}

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

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

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

/* A strip of black tape over the paper with the phone, the email and the social links. */
.collage-topbar {
  background: var(--primary, #1a1917);
  color: var(--on-primary, #fffdf7);
  font-size: 0.8125rem;
}

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

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

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

.collage-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

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

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

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

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

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

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

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

.collage-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--collage-body-strong);
  line-height: 1.3;
  text-decoration: none;
}

/* A highlighter stroke under the words on hover. */
.collage-nav__item > a > span {
  background: linear-gradient(var(--collage-highlight), var(--collage-highlight)) 0 88% / 0 0.42em no-repeat;
  transition: background-size var(--collage-speed) ease;
}

.collage-nav__item > a:hover > span,
.collage-nav__item--parent:focus-within > a > span {
  background-size: 100% 0.42em;
}

/* The page being read is circled in marker. */
.collage-nav__item.is-current > a::after {
  content: "";
  position: absolute;
  inset: 0.05rem -0.15rem;
  background-image: linear-gradient(var(--collage-marker), var(--collage-marker));
  -webkit-mask: var(--collage-loop) center / 100% 100% no-repeat;
  mask: var(--collage-loop) center / 100% 100% no-repeat;
  pointer-events: none;
}

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

/* A parent's pages on a slip of paper under it. */
.collage-nav__children {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
  box-shadow: var(--collage-shadow-lift);
  rotate: -0.8deg;
  visibility: hidden;
  opacity: 0;
}

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

/* The hover reaches the slip across the gap above it. */
.collage-nav__item--parent > a::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 0.5rem;
}

.collage-nav__children a {
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

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

/* The menu button: three marker strokes on a square of paper, turning 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). */
.collage-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  rotate: 2deg;
  transition: rotate var(--collage-speed) ease;
}

.collage-menu-button:hover {
  rotate: 0deg;
}

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

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

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

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

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

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

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

/* A sheet under the bar with every page, torn along its foot. It scrolls inside itself when the pages are many, so the
   last one is always reachable. */
.collage-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
     (--collage-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(--collage-head, var(--collage-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 0.7rem) no-repeat, var(--collage-torn-bottom-2) 0 100% / 30rem 0.75rem repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 0.7rem) no-repeat, var(--collage-torn-bottom-2) 0 100% / 30rem 0.75rem repeat-x;
}

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

.collage-drawer__inner {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.75rem var(--collage-gutter) 2.25rem;
}

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

.collage-drawer__item {
  border-bottom: 2px dashed var(--collage-line);
}

/* 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. */
.collage-drawer__link {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.5rem * var(--collage-display, 1));
  font-weight: var(--collage-heading-weight);
  line-height: 1.25;
  text-decoration: none;
}

.collage-drawer__link:hover {
  color: var(--accent-ink, #a8260c);
}

.collage-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.85rem 0.75rem;
}

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

.collage-drawer__footer {
  display: grid;
  gap: 0.75rem;
}

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

.collage-drawer__footer .collage-button {
  margin-top: 0.5rem;
}

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

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

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

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

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

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

.collage-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #4f4940);
  font-size: 0.875rem;
  list-style: none;
}

.collage-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
}

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

.collage-breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.collage-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #1a1917);
  font-weight: var(--collage-body-strong);
}

/* ------------------------------------------------------------------ The cut-out heading */

/* The page's main heading, cut word by word out of different papers (includes/stitch.php writes the words): white paper
   and the heading face, black paper, kraft and the body face, the accent paper, white paper and the body face in
   capitals, then again. Each word is laid a little crooked, by its own count of seven, so the two rhythms never repeat
   together in a short heading. Every word is a fill and an ink the colour contract keeps readable, so the heading reads
   on any band and on any photograph. A word wider than its line breaks inside its strip, and the shared script then sets
   the heading smaller. */
.collage-cut {
  line-height: 1.34;
  text-wrap: balance;
}

.collage-word {
  display: inline-block;
  max-width: 100%;
  margin-block: 0.03em;
  padding: 0.02em 0.16em 0.13em;
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 22%, transparent);
  line-height: 1.12;
  overflow-wrap: anywhere;
  rotate: -1.6deg;
}

.collage-word:nth-child(5n + 2) {
  background: var(--primary, #1a1917);
  color: var(--on-primary, #fffdf7);
}

.collage-word:nth-child(5n + 3) {
  background: var(--surface-alt, #e2d1ae);
  color: var(--text-primary, #1a1917);
  font-family: var(--font-body, sans-serif);
  font-size: 0.8em;
  font-weight: var(--collage-body-strong);
  letter-spacing: -0.02em;
}

.collage-word:nth-child(5n + 4) {
  background: var(--accent, #ff5533);
  color: var(--on-accent, #1a1917);
}

.collage-word:nth-child(5n) {
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
  font-family: var(--font-body, sans-serif);
  font-size: 0.72em;
  font-weight: var(--collage-body-strong);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.collage-word:nth-child(7n + 2) { rotate: 1.3deg; translate: 0 0.04em; }
.collage-word:nth-child(7n + 3) { rotate: -0.7deg; translate: 0 -0.03em; }
.collage-word:nth-child(7n + 4) { rotate: 2.1deg; }
.collage-word:nth-child(7n + 5) { rotate: -2.2deg; translate: 0 0.05em; }
.collage-word:nth-child(7n + 6) { rotate: 0.6deg; }
.collage-word:nth-child(7n) { rotate: 1.7deg; translate: 0 -0.04em; }

/* One word alone is the whole heading: white paper, a little crooked. */
.collage-word:only-child {
  rotate: -1.4deg;
}

/* A section's heading: the ink on the page, its last word snipped onto a strip of the black paper. On a band of colour or
   a photograph the strip is white paper instead, which every band shows. */
.collage-snip {
  display: inline-block;
  max-width: 100%;
  padding: 0 0.16em 0.04em;
  background: var(--primary, #1a1917);
  color: var(--on-primary, #fffdf7);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 22%, transparent);
  overflow-wrap: anywhere;
  rotate: -1.8deg;
}

.kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) .collage-snip,
.kit-slide .collage-snip {
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
}

/* ------------------------------------------------------------------ Torn bands */

/* The kit's tinted and coloured sections are other papers glued across the page: kraft (the tinted surface), the black
   paper, the accent paper. Each is torn along its top and its foot, with the paler core of the paper showing along the
   tear. The band is ::after (a background colour, so the readability check sees what the words stand on); the rim is
   ::before, a little larger, under it. */
.collage-main .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent) {
  --collage-band: var(--surface-alt, #e2d1ae);
  --collage-rim: color-mix(in srgb, var(--surface, #fffdf7) 70%, var(--collage-band));
  background-color: transparent;
}

.collage-main .kit-section.kit-section--inverse {
  --collage-band: var(--primary, #1a1917);
  --collage-rim: color-mix(in srgb, var(--surface, #fffdf7) 45%, var(--collage-band));
}

.collage-main .kit-section.kit-section--accent {
  --collage-band: var(--accent, #ff5533);
  --collage-rim: color-mix(in srgb, var(--surface, #fffdf7) 55%, var(--collage-band));
}

.collage-main .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::after,
.collage-main .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.collage-main .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::after {
  z-index: -1;
  background-color: var(--collage-band);
  -webkit-mask:
    var(--collage-torn-top) 0 0.2rem / 34rem 0.8rem repeat-x,
    linear-gradient(#000 0 0) 0 0.95rem / 100% calc(100% - 1.9rem) no-repeat,
    var(--collage-torn-bottom) 0 calc(100% - 0.2rem) / 34rem 0.8rem repeat-x;
  mask:
    var(--collage-torn-top) 0 0.2rem / 34rem 0.8rem repeat-x,
    linear-gradient(#000 0 0) 0 0.95rem / 100% calc(100% - 1.9rem) no-repeat,
    var(--collage-torn-bottom) 0 calc(100% - 0.2rem) / 34rem 0.8rem repeat-x;
}

.collage-main .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::before {
  z-index: -2;
  background-color: var(--collage-rim);
  -webkit-mask:
    var(--collage-torn-top-2) 0 0 / 34rem 0.8rem repeat-x,
    linear-gradient(#000 0 0) 0 0.75rem / 100% calc(100% - 1.5rem) no-repeat,
    var(--collage-torn-bottom-2) 0 100% / 34rem 0.8rem repeat-x;
  mask:
    var(--collage-torn-top-2) 0 0 / 34rem 0.8rem repeat-x,
    linear-gradient(#000 0 0) 0 0.75rem / 100% calc(100% - 1.5rem) no-repeat,
    var(--collage-torn-bottom-2) 0 100% / 34rem 0.8rem repeat-x;
}

/* A band of colour without a picture keeps its full space above: the tear takes a little of it. */
.collage-main .kit-section:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent) {
  padding-block: calc(var(--kit-pad-normal, 4rem) + 0.5rem);
}

.collage-main .kit-section.kit-section--pad-compact:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent) {
  padding-block: calc(var(--kit-pad-compact, 2.5rem) + 0.75rem);
}

/* A photograph across the window is torn along its foot. A shade lies on it only as dark as the kit's own, since every
   word on it stands on its own paper (theme.css, the cut-out heading; the lead line on a note). */
.collage-main .kit-section--image:not(.kit-slide) {
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 0.75rem) no-repeat, var(--collage-torn-bottom) 0 100% / 34rem 0.8rem repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 0.75rem) no-repeat, var(--collage-torn-bottom) 0 100% / 34rem 0.8rem repeat-x;
}

/* The lead line over a photograph is typed on a note of white paper, taped down. */
.collage-main .kit-section--image .kit-stack > .kit-text--lead,
.collage-main .kit-slide .kit-stack > .kit-text--lead {
  position: relative;
  display: inline-block;
  max-width: 34rem;
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
  box-shadow: var(--collage-shadow);
  font-size: 1rem;
  line-height: 1.55;
  rotate: 0.8deg;
}

.collage-main .kit-section--image .kit-stack > .kit-text--lead::before,
.collage-main .kit-slide .kit-stack > .kit-text--lead::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 5rem;
  height: 1.3rem;
  background-image: linear-gradient(var(--collage-tape-clear), var(--collage-tape-clear));
  clip-path: var(--collage-tape-ends);
  translate: -50% 0;
  rotate: -3deg;
}

/* The slim band's heading is a line of poster type, larger than the kit's. */
.collage-main [data-block="cta_banner"] .kit-heading {
  font-size: calc(clamp(1.45rem, 1.15rem + 1.3vw, 2.2rem) * var(--collage-display, 1));
  line-height: 1.15;
}

/* ------------------------------------------------------------------ Marker marks */

/* A figure is circled in marker. The loop is a mask over a gradient (see the head of this file). */
.collage-main [data-block="stats_counter"] .kit-stat__value {
  position: relative;
  justify-self: center;
  width: fit-content;
  padding: 0.12em 0.55em;
}

.collage-main [data-block="stats_counter"] .kit-stat__value::after {
  content: "";
  position: absolute;
  inset: -0.12em -0.12em -0.1em;
  background-image: linear-gradient(var(--kit-accent-text, var(--collage-marker)), var(--kit-accent-text, var(--collage-marker)));
  -webkit-mask: var(--collage-loop) center / 100% 100% no-repeat;
  mask: var(--collage-loop) center / 100% 100% no-repeat;
  pointer-events: none;
}

.collage-main [data-block="stats_counter"] .kit-section--align-left .kit-stat__value,
.collage-main [data-block="stats_counter"].kit-section--align-left .kit-stat__value {
  justify-self: start;
}

/* A marker stroke under the heading of the questions and of a form. */
.collage-main :is([data-block="faq"], [data-block="contact_form"]) .kit-heading-group > .kit-heading::after {
  content: "";
  display: block;
  width: min(9rem, 60%);
  height: 0.55rem;
  margin-top: 0.4rem;
  background-image: linear-gradient(var(--kit-accent-text, var(--collage-marker)), var(--kit-accent-text, var(--collage-marker)));
  -webkit-mask: var(--collage-underline) center / 100% 100% no-repeat;
  mask: var(--collage-underline) center / 100% 100% no-repeat;
}

.collage-main :is([data-block="faq"], [data-block="contact_form"]) .kit-heading-group.kit-text--center > .kit-heading::after {
  margin-inline: auto;
}

/* A list of posts with one post in it is one note, not a poster across the page. */
.collage-main :is([data-block="related_posts"], [data-block="recent_posts"]) .kit-grid > .kit-card:only-child {
  justify-self: center;
  width: min(100%, 34rem);
}

/* ------------------------------------------------------------------ Places */

/* The places a business serves are written on strips of tape stuck side by side, each at its own angle. */
.collage-main [data-block="service_area"] .kit-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 0.75rem 0.6rem;
}

/* The kit splits a long list of places into columns; strips of tape flow in rows instead, so the columns stand one under
   the other (a map beside the list keeps its column). */
.collage-main [data-block="service_area"] .kit-grid:not(:has(> :not(.kit-list))) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.collage-main [data-block="service_area"] .kit-section--align-center .kit-list,
.collage-main [data-block="service_area"].kit-section--align-center .kit-list {
  justify-content: center;
}

.collage-main [data-block="service_area"] .kit-list-item {
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.4rem 0.95rem;
  background: var(--collage-tape);
  color: var(--text-primary, #1a1917);
  clip-path: var(--collage-tape-ends);
  rotate: -1.5deg;
}

.collage-main [data-block="service_area"] .kit-list-item:nth-child(3n + 2) { rotate: 1.2deg; }
.collage-main [data-block="service_area"] .kit-list-item:nth-child(3n) { rotate: -0.4deg; }

.collage-main [data-block="service_area"] .kit-list-item .kit-list-item__title {
  color: var(--text-primary, #1a1917);
  font-weight: var(--collage-body-strong);
}

.collage-main [data-block="service_area"] .kit-list-item > :is(svg, .kit-list-item__icon) {
  width: 1rem;
  height: 1rem;
  color: var(--accent-ink, #a8260c);
}

/* ------------------------------------------------------------------ Pictures */

/* A picture beside words is a print cut out with a margin of white, taped down by two corners at a slight angle. */
.collage-main [data-block] .kit-split > .kit-picture,
.collage-main [data-block="about_section"] .kit-picture {
  overflow: visible;
  padding: 0.55rem;
  background: var(--surface, #fffdf7);
  box-shadow: var(--collage-shadow);
  rotate: 1.4deg;
}

.collage-main [data-block] .kit-split--reverse > .kit-picture {
  rotate: -1.4deg;
}

.collage-main [data-block] .kit-split > .kit-picture::before,
.collage-main [data-block] .kit-split > .kit-picture::after,
.collage-main [data-block="about_section"] .kit-picture::before,
.collage-main [data-block="about_section"] .kit-picture::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 5.5rem;
  height: 1.4rem;
  background-image: linear-gradient(var(--collage-tape-clear), var(--collage-tape-clear));
  clip-path: var(--collage-tape-ends);
  pointer-events: none;
}

.collage-main [data-block] .kit-split > .kit-picture::before,
.collage-main [data-block="about_section"] .kit-picture::before {
  top: -0.35rem;
  left: -0.6rem;
  rotate: -38deg;
}

.collage-main [data-block] .kit-split > .kit-picture::after,
.collage-main [data-block="about_section"] .kit-picture::after {
  right: -0.6rem;
  bottom: -0.2rem;
  rotate: -38deg;
}

/* The gallery: prints scattered on the table, each at its own angle; one lifts and straightens under the pointer. */
.collage-main [data-block="image_gallery"] .kit-grid {
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.collage-main [data-block="image_gallery"] .kit-grid > .kit-picture {
  overflow: visible;
  padding: 0.45rem 0.45rem 0.45rem;
  background: var(--surface, #fffdf7);
  box-shadow: var(--collage-shadow);
  rotate: -1.6deg;
  transition: rotate var(--collage-speed) ease, translate var(--collage-speed) ease, box-shadow var(--collage-speed) ease;
}

.collage-main [data-block="image_gallery"] .kit-grid > .kit-picture:nth-child(3n + 2) { rotate: 1.2deg; translate: 0 0.4rem; }
.collage-main [data-block="image_gallery"] .kit-grid > .kit-picture:nth-child(3n) { rotate: -0.5deg; }
.collage-main [data-block="image_gallery"] .kit-grid > .kit-picture:nth-child(4n) { rotate: 2deg; }

.collage-main [data-block="image_gallery"] .kit-grid > .kit-picture:hover {
  z-index: 1;
  box-shadow: var(--collage-shadow-lift);
  rotate: 0deg;
  translate: 0 -0.25rem;
}

.collage-main [data-block="image_gallery"] .kit-grid > .kit-picture img {
  height: 100%;
}

/* A quotation is a note torn from an exercise book: white paper with its margin ruled in the accent. */
.collage-main [data-block="testimonials"] .kit-card {
  background:
    linear-gradient(to right, transparent 1.1rem, color-mix(in srgb, var(--accent, #ff5533) 60%, transparent) 1.1rem 1.22rem, transparent 1.22rem),
    var(--surface, #fffdf7);
}

.collage-main [data-block="testimonials"] .kit-card > .kit-card__content {
  padding-inline-start: calc(var(--kit-card-pad, 1.5rem) + 0.7rem);
}

/* Two columns of words: their headings are column headings, a step under a section's. */
.collage-main [data-block="two_column_text"] .kit-split .kit-heading--2 {
  font-size: calc(clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem) * var(--collage-display, 1));
}

/* An enquiry form on its own is filled in on a sheet of white paper, taped at its top. */
.collage-main [data-block="contact_form"] .kit-form {
  position: relative;
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
  box-shadow: var(--collage-shadow);
  rotate: -0.4deg;
}

.collage-main [data-block="contact_form"] .kit-form::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: 6rem;
  height: 1.4rem;
  background-image: linear-gradient(var(--collage-tape-clear), var(--collage-tape-clear));
  clip-path: var(--collage-tape-ends);
  translate: -50% 0;
  rotate: 2deg;
  pointer-events: none;
}

/* A video, a map, a frame from another site and a before-and-after picture are prints with a margin of white: a ring of
   shadow, so their own layout is untouched. */
.collage-main [data-block] :is(.kit-video, .kit-frame, .kit-compare__frame) {
  box-shadow: 0 0 0 0.45rem var(--surface, #fffdf7), 0 14px 24px -12px color-mix(in srgb, var(--text-primary, #1a1917) 55%, transparent);
}

.collage-main [data-block="before_after"] .kit-compare__frame {
  rotate: -0.6deg;
}

/* A photograph across the window keeps more of its colour: every word on it stands on its own paper. */
.collage-main .kit-section--image {
  --kit-section-shade: min(94%, calc(40% * var(--pgs-tint, 1)));
}

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

/* The opening: the cut-out heading, a typed lead line and the buttons on the left; on the right a photograph torn out of
   a magazine on all four sides, laid crooked on a sheet of the accent paper and held by two strips of tape, with a star
   scribbled in marker at its corner. Without a picture the words stand alone on a torn band of kraft. */
.collage-hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--collage-gutter) clamp(3rem, 7vw, 6rem);
}

.collage-hero--words {
  isolation: isolate;
  text-align: center;
}

.collage-hero--words::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--surface-alt, #e2d1ae);
  -webkit-mask:
    var(--collage-torn-top) 0 0.2rem / 34rem 0.8rem repeat-x,
    linear-gradient(#000 0 0) 0 0.95rem / 100% calc(100% - 1.9rem) no-repeat,
    var(--collage-torn-bottom) 0 calc(100% - 0.2rem) / 34rem 0.8rem repeat-x;
  mask:
    var(--collage-torn-top) 0 0.2rem / 34rem 0.8rem repeat-x,
    linear-gradient(#000 0 0) 0 0.95rem / 100% calc(100% - 1.9rem) no-repeat,
    var(--collage-torn-bottom) 0 calc(100% - 0.2rem) / 34rem 0.8rem repeat-x;
}

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

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

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

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

/* 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. */
.collage-hero__title,
.collage-main .kit-heading--1.collage-cut {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.25rem, 1.45rem + 3.4vw, 4.25rem) * var(--collage-display, 1));
  font-weight: var(--collage-heading-weight);
  letter-spacing: -0.01em;
}

.collage-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #4f4940);
  font-size: 1.125rem;
}

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

.collage-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.collage-hero__icon {
  margin-top: 0.2em;
  color: var(--accent-ink, #a8260c);
}

.collage-hero__actions,
.collage-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
}

.collage-hero__actions {
  margin-top: 0.4rem;
}

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

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

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

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

.collage-stars svg.is-full {
  fill: var(--accent-ink, #a8260c);
}

.collage-hero__trustpilot {
  color: var(--accent-ink, #a8260c);
  font-weight: var(--collage-body-strong);
}

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

/* The sheet of accent paper the photograph lies on, turned the other way. */
.collage-hero__backing {
  position: absolute;
  inset: 8% 2% 0 10%;
  background: var(--accent, #ff5533);
  rotate: -4deg;
}

/* The print: its shadow follows the torn edge because it is a filter on the element around the masked picture. */
.collage-hero__print {
  position: relative;
  display: block;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, #000 28%, transparent));
  rotate: 2deg;
}

.collage-hero__photo {
  display: block;
  -webkit-mask: var(--collage-torn-sheet) center / 100% 100% no-repeat;
  mask: var(--collage-torn-sheet) center / 100% 100% no-repeat;
}

.collage-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.collage-hero__tape {
  position: absolute;
  z-index: 2;
  width: clamp(4.5rem, 9vw, 7rem);
  height: 1.6rem;
  background-image: linear-gradient(var(--collage-tape-clear), var(--collage-tape-clear));
  clip-path: var(--collage-tape-ends);
  pointer-events: none;
}

.collage-hero__tape--one {
  top: 0.2rem;
  left: 8%;
  rotate: -9deg;
}

.collage-hero__tape--two {
  right: 4%;
  bottom: 0.4rem;
  rotate: 6deg;
}

.collage-hero__doodle {
  position: absolute;
  top: -0.6rem;
  right: -0.4rem;
  z-index: 3;
  width: clamp(2.75rem, 6vw, 4.25rem);
  aspect-ratio: 1;
  background-image: linear-gradient(var(--collage-marker), var(--collage-marker));
  -webkit-mask: var(--collage-star) center / contain no-repeat;
  mask: var(--collage-star) center / contain no-repeat;
  rotate: 12deg;
  pointer-events: none;
}

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

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

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

.collage-article__header {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* The date and the author, typed on a piece of tape. */
.collage-article__byline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.3rem 0.9rem;
  background: var(--collage-tape);
  color: var(--text-primary, #1a1917);
  clip-path: var(--collage-tape-ends);
  font-size: 0.8125rem;
  font-weight: var(--collage-body-strong);
  letter-spacing: 0.04em;
  rotate: -1.5deg;
}

.collage-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.4rem + 2.6vw, 3.4rem) * var(--collage-display, 1));
  font-weight: var(--collage-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

.collage-article__header h1.collage-cut {
  line-height: 1.34;
}

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

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

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

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

.collage-prose h2 {
  font-size: calc(1.75rem * var(--collage-display, 1));
}

.collage-prose h3 {
  font-size: calc(1.35rem * var(--collage-display, 1));
}

.collage-prose h4 {
  font-size: calc(1.125rem * var(--collage-display, 1));
}

/* A link in running text is underlined with a highlighter. */
.collage-prose a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--collage-highlight), var(--collage-highlight)) 0 92% / 100% 0.45em no-repeat;
}

.collage-prose a:hover {
  background-size: 100% 0.9em;
}

/* A quotation is a note on lined paper with a strip of tape across its top. */
.collage-prose blockquote {
  position: relative;
  margin-inline: 0;
  padding: 1.4rem 1.4rem 1.2rem 2.2rem;
  background:
    linear-gradient(to right, transparent 1.35rem, color-mix(in srgb, var(--accent, #ff5533) 55%, transparent) 1.35rem 1.45rem, transparent 1.45rem),
    repeating-linear-gradient(transparent 0 calc(1.65em - 1px), color-mix(in srgb, var(--text-primary, #1a1917) 13%, transparent) calc(1.65em - 1px) 1.65em),
    var(--surface, #fffdf7);
  background-position: 0 0, 0 1.4rem, 0 0;
  box-shadow: var(--collage-shadow);
  rotate: -0.6deg;
}

.collage-prose blockquote::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 5.5rem;
  height: 1.3rem;
  background-image: linear-gradient(var(--collage-tape-clear), var(--collage-tape-clear));
  clip-path: var(--collage-tape-ends);
  translate: -50% 0;
  rotate: 2deg;
}

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

.collage-prose img {
  display: block;
  padding: 0.5rem;
  background: var(--surface, #fffdf7);
  box-shadow: var(--collage-shadow);
}

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

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

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

.collage-prose pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--surface-alt, #e2d1ae);
}

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

/* line: a strip torn from the kraft paper. dashed: a cutting line with scissors at its start. dotted: three scraps. */
.collage-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: calc(var(--collage-width) + 2 * var(--collage-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--collage-gutter);
}

.collage-divider__line {
  width: 100%;
}

.collage-divider--line .collage-divider__line {
  height: 0.85rem;
  background-image: linear-gradient(var(--surface-alt, #e2d1ae), var(--surface-alt, #e2d1ae));
  -webkit-mask: var(--collage-torn-top) 0 0 / 30rem 50% repeat-x, var(--collage-torn-bottom-2) 0 100% / 30rem 50% repeat-x;
  mask: var(--collage-torn-top) 0 0 / 30rem 50% repeat-x, var(--collage-torn-bottom-2) 0 100% / 30rem 50% repeat-x;
  rotate: -0.4deg;
}

.collage-divider--dashed::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background-image: linear-gradient(var(--text-secondary, #4f4940), var(--text-secondary, #4f4940));
  -webkit-mask: var(--collage-scissors) center / contain no-repeat;
  mask: var(--collage-scissors) center / contain no-repeat;
  rotate: -90deg;
}

.collage-divider--dashed .collage-divider__line {
  border-top: 2px dashed var(--text-secondary, #4f4940);
}

.collage-divider--dotted span {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--primary, #1a1917);
  rotate: 12deg;
}

.collage-divider--dotted span:nth-child(2) {
  background: var(--accent, #ff5533);
  rotate: -8deg;
}

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

/* The page ends on a sheet of the black paper, torn along its top. Its words are the paper's own ink (on-primary on
   primary, a pair the colour contract keeps in every palette and with a website's own colours). */
.collage-footer {
  position: relative;
  margin-top: 1rem;
  background: var(--primary, #1a1917);
  color: var(--on-primary, #fffdf7);
}

.collage-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: 0.8rem;
  background-image: linear-gradient(var(--primary, #1a1917), var(--primary, #1a1917));
  -webkit-mask: var(--collage-torn-top-2) 0 100% / 34rem 100% repeat-x;
  mask: var(--collage-torn-top-2) 0 100% / 34rem 100% repeat-x;
  pointer-events: none;
}

.collage-footer__inner {
  max-width: calc(var(--collage-width) + 2 * var(--collage-gutter));
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--collage-gutter) 1.75rem;
}

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

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

/* The name on a strip of white paper, the other way round from the header's. */
.collage-footer .collage-brand__name {
  max-width: 100%;
  padding: 0.12em 0.42em 0.16em;
  background: var(--surface, #fffdf7);
  color: var(--text-primary, #1a1917);
  rotate: 1.5deg;
}

.collage-footer .collage-brand:has(.collage-brand__logo, .brand-logo-original, .logo-mask) .collage-brand__name {
  padding-inline: 0;
  background: none;
  color: inherit;
  rotate: none;
}

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

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

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

/* The invitation, cut out word by word like the page's heading. On the black paper a black word would vanish, so the
   second word of each five is the accent paper here. */
.collage-footer__invite {
  max-width: 28ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem) * var(--collage-display, 1));
  font-weight: var(--collage-heading-weight);
  line-height: 1.34;
  text-wrap: balance;
}

.collage-footer .collage-word:nth-child(5n + 2) {
  background: var(--accent, #ff5533);
  color: var(--on-accent, #1a1917);
}

.collage-footer .collage-word:nth-child(5n + 4) {
  background: var(--surface-alt, #e2d1ae);
  color: var(--text-primary, #1a1917);
}

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

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

.collage-footer__tagline,
.collage-footer__contact p:not(.collage-footer__title),
.collage-footer__copyright {
  margin: 0;
  color: var(--on-primary, #fffdf7);
  font-size: 0.9375rem;
}

/* A column's title on a piece of tape. */
.collage-footer__title {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.9rem;
  padding: 0.22rem 0.8rem;
  background: var(--collage-tape);
  color: var(--text-primary, #1a1917);
  clip-path: var(--collage-tape-ends);
  font-size: 0.75rem;
  font-weight: var(--collage-body-strong);
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  rotate: -1.5deg;
}

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

.collage-footer__links a,
.collage-footer__contact a,
.collage-footer__legal a,
.collage-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--on-primary, #fffdf7);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

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

.collage-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid currentColor;
  color: inherit;
  rotate: -3deg;
  transition: rotate var(--collage-speed) ease;
}

.collage-footer__social a:nth-child(even) {
  rotate: 3deg;
}

.collage-footer__social a:hover {
  rotate: 0deg;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

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

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

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

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

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

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

.collage-not-found {
  padding: clamp(4rem, 9vw, 7rem) var(--collage-gutter);
  text-align: center;
}

.collage-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 38rem;
  margin-inline: auto;
}

/* The number, three figures cut from three papers. */
.collage-not-found__number {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(4.5rem, 3rem + 7vw, 8rem) * var(--collage-display, 1));
  font-variant-numeric: lining-nums;
  font-weight: var(--collage-heading-weight);
  line-height: 1.2;
}

.collage-not-found__number .collage-word {
  padding-inline: 0.12em;
}

.collage-not-found__number .collage-word + .collage-word {
  margin-inline-start: 0.08em;
}

.collage-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.9rem, 1.4rem + 2vw, 2.9rem) * var(--collage-display, 1));
  font-weight: var(--collage-heading-weight);
  line-height: 1.15;
  text-wrap: balance;
}

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

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

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

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

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

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

/* The shared bar (resilience.css) on a strip of the theme's paper, with its button. */
body .theme-action-bar {
  border-top: 2px dashed var(--collage-line);
  background: var(--surface, #fffdf7);
}

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

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

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

/* Nothing in this theme moves for a visitor who asks for less motion. The angles stay: they are not motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}