/*
 * Riso: the page as a sheet of uncoated paper run through a two-drum risograph. Everything is printed in two flat inks,
 * the main ink (--primary: buttons, ink bands, the footer, the darks of every printed photograph) and the spot ink
 * (--accent: the fluorescent second colour), which overlap and slip a little out of register. Photographs of the theme's
 * own compositions are printed in two tones, coloured bands rise out of the paper in halftone dots, headings are big
 * poster type with the spot ink slipping behind them, small labels are hand-cut stickers, and a fine grain lies over all.
 *
 * This file: the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the theme's own blocks
 * (the split hero, the poster, the article body, the divider), and how the stock blocks the Theme Kit draws are composed
 * here, by their type (data-block, includes/stitch.php). The kit's own tokens and parts are 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. Patterns (halftone dots, crop marks) are
 * a solid colour seen through a mask, never a picture of a colour, so verify-theme-readability.mjs still measures the
 * words beside them.
 *
 * Type comes from the layout: --font-heading, --font-body, --riso-heading-weight and --riso-body-strong (the heaviest
 * weights the font palette loads). Never write a font-weight number other than 400 here. Every heading size is
 * multiplied by --riso-face, set per heading face below, so a narrow poster face stands larger and a wide one smaller and
 * an ordinary word ("Apgyvendinimas") fits the first heading at 320 px in each.
 */

/* ------------------------------------------------------------------ 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. */
:where(:root) {
  --riso-width: 76rem;
  --riso-gutter: clamp(1rem, 4vw, 2.5rem);
  --riso-bar: 4.5rem;
  --riso-radius: 0px;
  --riso-button-radius: 0px;
  --riso-heading-weight: 800;
  --riso-body-strong: 700;
  --riso-speed: 180ms;
  --riso-line: var(--border, #cdc4b2);
  /* How far the spot ink slips out of register behind a heading, and behind a button or a picture. */
  --riso-slip: 0.045em;
  --riso-offset: 0.3rem;
  /* The heading face's size factor (below) and its letter spacing. */
  --riso-face: 1;
  --riso-track: -0.015em;
  /* A halftone screen: one dot per cell, in whatever colour the element that wears the mask is filled with. */
  --riso-cell: 0.5rem;
  --riso-dots: radial-gradient(circle at 50% 50%, #000 0 34%, transparent 36%) 0 0 / var(--riso-cell) var(--riso-cell);
  /* The two tones a photograph is printed in: its darks in the main ink, its lights in the paper. */
  --riso-photo-ink: var(--primary, #2c4a9e);
  --riso-photo-paper: var(--surface, #faf7f0);
}

/* Where the browser can work it out, the photograph's ink is the main ink held dark enough to print a shadow (a pale main
   ink, a website's yellow, still prints a readable picture), and its paper is the surface held light (a dark palette's
   photographs are printed on white stock, like a poster on a dark wall). */
@supports (color: oklch(from red l c h)) {
  :where(:root) {
    --riso-photo-ink: oklch(from var(--primary, #2c4a9e) min(l, 0.42) c h);
    --riso-photo-paper: oklch(from var(--surface, #faf7f0) max(l, 0.96) min(c, 0.03) h);
  }
}

/* The heading faces of the font palettes, each at the size where "Apgyvendinimas" takes the same room
   (.tmp measurements at 100 px: Big Shoulders 6.6em, Fira Sans Extra Condensed 6.3em, Bricolage Grotesque, Playpen
   Sans and M PLUS Rounded 8.3em, Archivo Black 9em). */
.riso-face--big-shoulders { --riso-face: 1.22; --riso-track: -0.005em; }
.riso-face--fira-sans-extra-condensed { --riso-face: 1.25; --riso-track: -0.005em; }
.riso-face--alegreya-sans { --riso-face: 1.1; --riso-track: -0.01em; }
.riso-face--bricolage-grotesque { --riso-face: 1; --riso-track: -0.03em; }
.riso-face--archivo-black { --riso-face: 0.9; --riso-track: -0.025em; }
.riso-face--playpen-sans { --riso-face: 0.94; --riso-track: -0.02em; }
.riso-face--m-plus-rounded-1c { --riso-face: 0.95; --riso-track: -0.02em; }

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

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

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

body {
  margin: 0;
  background: var(--background, #f3eee3);
  color: var(--text-primary, #191a33);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

.riso-main {
  display: block;
  min-height: 40vh;
  overflow-x: clip;
}

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

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

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

/* ------------------------------------------------------------------ The paper's grain */

/* A fixed sheet of fine specks over the whole window, of a middle grey that shows on light paper and on dark stock
   alike. It takes no pointer, so it is in no one's way and in no measurement. */
.riso-grain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.45 0 0 0 0 0.45 3.2 0 0 0 -1.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

@media print {
  .riso-grain {
    display: none;
  }
}

/* ------------------------------------------------------------------ Printed photographs */

/* A photograph printed in two tones, as a risograph prints one: the picture in grey, screened onto the main ink (its
   darks take the ink, its lights stay clear), then the whole laid on the paper colour. The box is a group of its own
   (isolation), so the printing never reaches the page behind it; the picture is an ordinary file in its own colours. */
.riso-print {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  background-color: var(--riso-photo-ink);
}

.riso-print > img,
.riso-print > video,
.riso-print > picture img {
  filter: grayscale(1) contrast(1.18) brightness(1.04);
  mix-blend-mode: screen;
}

.riso-print::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--riso-photo-paper);
  mix-blend-mode: multiply;
  pointer-events: none;
}

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

/* One shape for every button the theme draws itself: a square block of ink, with a block of the spot ink printed a
   little down and to the right, out of register. On hover the two come into register. kit-theme.css gives the kit's
   buttons the same shape, and the line of this theme in resilience.css gives the cookie notice and the phone action bar
   its corner (theme-chrome.test.mjs). A label may take two lines; it never runs out of the button. */
.riso-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--riso-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--riso-body-strong);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  box-shadow: var(--riso-offset) var(--riso-offset) 0 0 var(--accent, #ff48b0);
  transition: transform var(--riso-speed) ease, box-shadow var(--riso-speed) ease, background-color var(--riso-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. */
.riso-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.riso-button:hover,
.riso-button:focus-visible {
  box-shadow: 0 0 0 0 var(--accent, #ff48b0);
  transform: translate(var(--riso-offset), var(--riso-offset));
}

.riso-button--primary {
  border-color: var(--primary, #2c4a9e);
  background: var(--primary, #2c4a9e);
  color: var(--on-primary, #faf7f0);
}

.riso-button--primary:hover {
  border-color: var(--primary-alt, #223c84);
  background: var(--primary-alt, #223c84);
}

/* The header's and footer's one button: the spot ink, with the main ink slipping behind it. */
.riso-button--accent {
  border-color: var(--accent, #ff48b0);
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  box-shadow: var(--riso-offset) var(--riso-offset) 0 0 var(--primary, #2c4a9e);
}

.riso-button--accent:hover,
.riso-button--accent:focus-visible {
  box-shadow: 0 0 0 0 var(--primary, #2c4a9e);
}

.riso-button--secondary {
  border-color: var(--text-primary, #191a33);
  background: transparent;
  color: var(--text-primary, #191a33);
  box-shadow: none;
}

.riso-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #191a33) 8%, transparent);
  transform: none;
}

/* A plain sheet of paper with the words in the text colour: the second button on a printed photograph. */
.riso-button--paper {
  border-color: var(--surface, #faf7f0);
  background: var(--surface, #faf7f0);
  color: var(--text-primary, #191a33);
}

.riso-button--small {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
}

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

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

/* A strip of the spot ink across the top, like a band of tape. */
.riso-announcement {
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  font-size: 0.875rem;
}

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

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

.riso-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  font-weight: var(--riso-body-strong);
}

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

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

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

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

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

/* A bar of the paper that stays at the top, ruled off from the page by the colour bar a printer prints along a sheet's
   edge: squares of the main ink and the spot ink, side by side. The bar has one height for every kind; the centred kind
   adds a row for the menu. */
.riso-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--background, #f3eee3);
  color: var(--text-primary, #191a33);
}

.riso-header__bar {
  position: relative;
}

.riso-header__bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: var(--primary, #2c4a9e);
  -webkit-mask: linear-gradient(90deg, #000 0 2.25rem, transparent 2.25rem 2.5rem) 0 0 / 5rem 100%;
  mask: linear-gradient(90deg, #000 0 2.25rem, transparent 2.25rem 2.5rem) 0 0 / 5rem 100%;
  pointer-events: none;
}

.riso-header__bar::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: var(--accent, #ff48b0);
  -webkit-mask: linear-gradient(90deg, transparent 0 2.5rem, #000 2.5rem 4.75rem, transparent 4.75rem) 0 0 / 5rem 100%;
  mask: linear-gradient(90deg, transparent 0 2.5rem, #000 2.5rem 4.75rem, transparent 4.75rem) 0 0 / 5rem 100%;
  pointer-events: none;
}

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

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

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

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

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

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

.riso-header--centered .riso-header__inner {
  padding-bottom: 0.25rem;
}

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

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

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

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

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

.riso-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.375rem * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.2;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. */
.riso-header .riso-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) {
  .riso-header .riso-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: calc(1.1875rem * var(--riso-face));
  }
}

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

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

.riso-header .logo-mask {
  background-color: var(--text-primary, #191a33) !important;
}

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

.riso-topbar {
  background: var(--primary, #2c4a9e);
  color: var(--on-primary, #faf7f0);
  font-size: 0.8125rem;
}

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

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

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

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

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

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

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

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

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

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

.riso-nav__item {
  position: relative;
}

/* A page's name; on hover and for the page being shown it is cut out of the spot ink like a sticker, a little askew. */
.riso-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--riso-body-strong);
  line-height: 1.3;
  text-decoration: none;
  transition: transform var(--riso-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. */
.riso-nav__item {
  min-width: 0;
}

.riso-nav__item > a:hover,
.riso-nav__item--parent:focus-within > a,
.riso-nav__item.is-current > a {
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  transform: rotate(-2deg);
}

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

.riso-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem;
  background: var(--surface, #faf7f0);
  color: var(--text-primary, #191a33);
  box-shadow: var(--riso-offset) var(--riso-offset) 0 0 var(--primary, #2c4a9e);
  visibility: hidden;
  opacity: 0;
}

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

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

.riso-nav__children a:hover {
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
}

/* The menu button: three lines that turn into a cross, on a square of the main ink. Hidden on a wide screen unless
   resilience.js folds the menu into it (theme-nav-compact on #site-header, whose shared rules show it). */
.riso-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: var(--primary, #2c4a9e);
  color: var(--on-primary, #faf7f0);
  box-shadow: 0.2rem 0.2rem 0 0 var(--accent, #ff48b0);
  cursor: pointer;
  transition: transform var(--riso-speed) ease, box-shadow var(--riso-speed) ease;
}

.riso-menu-button:hover,
.riso-menu-button[aria-expanded="true"] {
  box-shadow: 0 0 0 0 var(--accent, #ff48b0);
  transform: translate(0.2rem, 0.2rem);
}

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

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

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

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

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

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

/* A sheet of the spot ink under the bar, with every page in the display face. It scrolls inside itself when the pages
   are many, so the last one is always reachable. */
.riso-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
     (--riso-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(--riso-head, var(--riso-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
}

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

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

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

.riso-drawer__item {
  border-bottom: 2px solid currentColor;
}

/* 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. */
.riso-drawer__link {
  display: block;
  padding: 0.6rem 0 0.5rem;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.75rem * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.15;
  text-decoration: none;
}

.riso-drawer__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
}

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

.riso-drawer__children a {
  padding: 0.3rem 0;
  font-weight: var(--riso-body-strong);
  text-decoration: none;
}

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

.riso-drawer__contact {
  width: fit-content;
  font-weight: var(--riso-body-strong);
  text-decoration: none;
}

/* On the spot ink the drawer's button is the main ink, with nothing slipping behind it. */
.riso-drawer .riso-button--accent {
  border-color: var(--primary, #2c4a9e);
  background: var(--primary, #2c4a9e);
  color: var(--on-primary, #faf7f0);
  box-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

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

/* ------------------------------------------------------------------ Halftone discs */

/* A disc of halftone dots in the spot ink: the poster's sun, a corner of a card. A solid colour seen through a mask of
   dots, cut to a circle. */
.riso-hero__disc,
.riso-poster__disc {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background-color: var(--accent, #ff48b0);
  -webkit-mask: var(--riso-dots);
  mask: var(--riso-dots);
  pointer-events: none;
}

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

.riso-hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--riso-gutter) clamp(3rem, 7vw, 6rem);
}

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

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

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

/* The page's heading, very large, with the spot ink slipping out of register behind it. 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. */
.riso-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.1rem, 1.25rem + 4.2vw, 5rem) * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.02;
  padding-block-start: 0.06em;
  text-wrap: balance;
  text-shadow: var(--riso-slip) var(--riso-slip) 0 var(--accent, #ff48b0);
}

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

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

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

.riso-hero__icon {
  margin-top: 0.15em;
  color: var(--accent-ink, #b0106a);
  stroke-width: 2.4;
}

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

.riso-hero__actions {
  padding-top: 0.35rem;
}

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

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

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

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

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

/* The picture, printed in two tones on a sheet cut by hand, and under it the field of halftone dots where the spot ink's
   pass slipped down and to the right. */
.riso-hero__media {
  position: relative;
  margin: 0 var(--riso-pass) var(--riso-pass) 0;
  --riso-pass: clamp(1.25rem, 2.5vw, 2rem);
}

.riso-hero__dots {
  position: absolute;
  inset: var(--riso-pass) calc(-1 * var(--riso-pass)) calc(-1 * var(--riso-pass)) var(--riso-pass);
  background-color: var(--accent, #ff48b0);
  -webkit-mask: var(--riso-dots);
  mask: var(--riso-dots);
}

.riso-hero__print {
  clip-path: polygon(0.6% 1.4%, 99.2% 0, 100% 98.2%, 1.2% 100%);
}

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

@media (max-width: 55.99rem) {
  .riso-hero__image {
    aspect-ratio: 4 / 3;
  }
}

/* Without a picture: a poster of words on the paper, centred, with the disc of dots rising behind them. */
.riso-hero--words {
  overflow: hidden;
  text-align: center;
}

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

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

.riso-hero--words .riso-hero__disc {
  top: 50%;
  left: 50%;
  width: min(34rem, 92vw);
  aspect-ratio: 1;
  opacity: 0.5;
  transform: translate(-30%, -56%);
}

/* ------------------------------------------------------------------ The poster (full-width opening) */

.riso-poster {
  position: relative;
}

.riso-poster__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: clamp(30rem, calc(100svh - var(--riso-head, var(--riso-bar))), 60rem);
  overflow: hidden;
}

/* Under the breadcrumb (every page but the home page) the first screen is shorter by the header and the breadcrumb, so
   the poster takes what is left of it: its heading and its buttons end on the first screen, not under it. The breadcrumb
   is one line of 0.875rem with 1.25rem above it, and the poster stands 1.25rem under it. The script then says where the
   poster really starts (--riso-poster-top: an announcement above the header, a breadcrumb on two lines). */
.riso-main > nav[aria-label]:first-child + .riso-poster {
  --riso-above: var(--riso-poster-top, calc(var(--riso-head, var(--riso-bar)) + 1.25rem + 0.875rem * 1.6 + 1.25rem));
  padding-top: 1.25rem;
}

.riso-main > nav[aria-label]:first-child + .riso-poster .riso-poster__stage {
  min-height: clamp(22rem, calc(100svh - var(--riso-above)), 60rem);
}

.riso-main > nav[aria-label]:first-child + .riso-poster--bare .riso-poster__stage {
  min-height: clamp(20rem, min(62svh, calc(100svh - var(--riso-above))), 42rem);
}

.riso-poster__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.riso-poster__image,
.riso-poster__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A block's own word on the print (tint, --pgs-tint: 0.6, 1.4 or 1.8): "dark" and "darker" lay some of the main ink
   over the paper of the lights, "light" prints the darks paler. */
.riso-poster__media.riso-print {
  background-color: color-mix(in oklab, var(--riso-photo-ink), var(--riso-photo-paper) clamp(0%, calc((1 - var(--pgs-tint, 1)) * 90%), 40%));
}

.riso-poster__media.riso-print::after {
  background-color: color-mix(in oklab, var(--riso-photo-paper), var(--riso-photo-ink) clamp(0%, calc((var(--pgs-tint, 1) - 1) * 60%), 60%));
}

.riso-poster__disc {
  top: clamp(-9rem, -10vw, -3rem);
  right: clamp(-9rem, -8vw, -3rem);
  width: clamp(16rem, 42vw, 40rem);
  aspect-ratio: 1;
}

.riso-poster--picture .riso-poster__disc {
  mix-blend-mode: multiply;
}

/* Crop marks in the four corners, as on a sheet before it is trimmed: a solid colour seen through eight short lines. */
.riso-poster__crops {
  position: absolute;
  inset: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 2;
  background-color: var(--surface, #faf7f0);
  --riso-crop: linear-gradient(#000, #000);
  -webkit-mask:
    var(--riso-crop) 0 0 / 1.5rem 2px no-repeat, var(--riso-crop) 0 0 / 2px 1.5rem no-repeat,
    var(--riso-crop) 100% 0 / 1.5rem 2px no-repeat, var(--riso-crop) 100% 0 / 2px 1.5rem no-repeat,
    var(--riso-crop) 0 100% / 1.5rem 2px no-repeat, var(--riso-crop) 0 100% / 2px 1.5rem no-repeat,
    var(--riso-crop) 100% 100% / 1.5rem 2px no-repeat, var(--riso-crop) 100% 100% / 2px 1.5rem no-repeat;
  mask:
    var(--riso-crop) 0 0 / 1.5rem 2px no-repeat, var(--riso-crop) 0 0 / 2px 1.5rem no-repeat,
    var(--riso-crop) 100% 0 / 1.5rem 2px no-repeat, var(--riso-crop) 100% 0 / 2px 1.5rem no-repeat,
    var(--riso-crop) 0 100% / 1.5rem 2px no-repeat, var(--riso-crop) 0 100% / 2px 1.5rem no-repeat,
    var(--riso-crop) 100% 100% / 1.5rem 2px no-repeat, var(--riso-crop) 100% 100% / 2px 1.5rem no-repeat;
  pointer-events: none;
}

.riso-poster--bare .riso-poster__crops {
  background-color: var(--text-primary, #191a33);
}

.riso-poster__inner {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  width: 100%;
  max-width: calc(var(--riso-width) + 2 * var(--riso-gutter));
  margin-inline: auto;
  padding: clamp(3.5rem, 10vw, 9rem) var(--riso-gutter) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* The heading: each line on a strip of the spot ink, the way strips of coloured paper are pasted on a poster. */
.riso-poster__title {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2.2rem, 1.1rem + 5.4vw, 6.25rem) * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.32;
  transform: rotate(-1.5deg);
  transform-origin: 0 100%;
}

.riso-poster__title > span {
  padding: 0 0.14em;
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.riso-poster__lead {
  max-width: 36rem;
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.75;
}

.riso-poster__lead > span {
  padding: 0.15em 0.4em;
  background: var(--surface, #faf7f0);
  color: var(--text-primary, #191a33);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.riso-poster__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  padding-top: 0.25rem;
}

/* On the paper, without a picture: the heading in the text colour with the spot ink slipping behind it, and the second
   button drawn in the text colour. */
.riso-poster--bare .riso-poster__title {
  transform: none;
}

.riso-poster--bare .riso-poster__title > span {
  padding: 0;
  background: none;
  color: var(--text-primary, #191a33);
  text-shadow: var(--riso-slip) var(--riso-slip) 0 var(--accent, #ff48b0);
}

.riso-poster--bare .riso-poster__lead > span {
  padding: 0;
  background: none;
  color: var(--text-secondary, #4a4b62);
}

.riso-poster--bare .riso-button--paper {
  border-color: var(--text-primary, #191a33);
  background: transparent;
  color: var(--text-primary, #191a33);
  box-shadow: none;
}

.riso-poster--bare .riso-poster__disc {
  width: clamp(18rem, 50vw, 44rem);
}

/* ------------------------------------------------------------------ Stock blocks in two inks */

/* The photographs of the theme's own compositions are printed in two tones (as .riso-print above): words beside a
   picture, the about section, the cards of pages, services and posts, the team and the voices of testimonials. Pictures
   that show work (a gallery, a portfolio, before and after, logos and badges, audio covers) and every module's section
   keep their own colours. On hover a linked card shows its photograph in full colour, like a proof. */
:is([data-block="text_with_image"], [data-block="about_section"]) .kit-picture,
:is([data-block="service_cards"], [data-block="child_pages"], [data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"], [data-block="location_cards"]) .kit-card__media,
:is([data-block="team_grid"], [data-block="testimonials"]) .kit-avatar {
  position: relative;
  isolation: isolate;
  background-color: var(--riso-photo-ink);
}

:is([data-block="text_with_image"], [data-block="about_section"]) .kit-picture img,
:is([data-block="service_cards"], [data-block="child_pages"], [data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"], [data-block="location_cards"]) .kit-card__media img,
:is([data-block="team_grid"], [data-block="testimonials"]) .kit-avatar img {
  filter: grayscale(1) contrast(1.18) brightness(1.04);
  mix-blend-mode: screen;
  transition: filter 260ms ease, transform 420ms var(--kit-ease, ease);
}

:is([data-block="text_with_image"], [data-block="about_section"]) .kit-picture::after,
:is([data-block="service_cards"], [data-block="child_pages"], [data-block="recent_posts"], [data-block="related_posts"], [data-block="blog_listing"], [data-block="location_cards"]) .kit-card__media::after,
:is([data-block="team_grid"], [data-block="testimonials"]) .kit-avatar:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--riso-photo-paper);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.kit-card--linked:is(:hover, :focus-within) .kit-card__media img {
  filter: none;
  mix-blend-mode: normal;
}

.kit-card--linked:is(:hover, :focus-within) .kit-card__media::after {
  opacity: 0;
}

/* Words beside a picture: the printed picture with the spot ink's pass slipped down and to the right of it. */
:is([data-block="text_with_image"], [data-block="about_section"]) .kit-picture {
  margin: 0 var(--riso-pass) var(--riso-pass) 0;
  box-shadow: var(--riso-pass) var(--riso-pass) 0 0 var(--accent, #ff48b0);
  --riso-pass: clamp(0.6rem, 1.5vw, 1rem);
}

/* A band with a photograph behind its words (the invitation, the slides of a slider): the photograph printed in the
   main ink's tone, with a wash of the ink over it so the light words read. */
.kit-section--image[data-block="cta_section"],
[data-block="hero_slider"] .kit-slide--image {
  background-color: var(--riso-photo-ink);
  background-image:
    linear-gradient(color-mix(in srgb, var(--riso-photo-ink) min(92%, calc(58% * var(--pgs-tint, 1))), transparent), color-mix(in srgb, var(--riso-photo-ink) min(92%, calc(58% * var(--pgs-tint, 1))), transparent)),
    var(--kit-section-image, var(--kit-slide-image, none));
  background-blend-mode: normal, luminosity;
}

[data-block="hero_slider"] .kit-slide--image {
  background-image:
    linear-gradient(color-mix(in srgb, var(--riso-photo-ink) min(92%, calc(58% * var(--pgs-tint, 1))), transparent), color-mix(in srgb, var(--riso-photo-ink) min(92%, calc(58% * var(--pgs-tint, 1))), transparent)),
    var(--kit-slide-image, none);
}

/* ------------------------------------------------------------------ Cards, plans, steps and columns */

/* A card of pages, services or places without a photograph carries a quarter of a halftone disc in the spot ink in its
   top corner, like the corner of a flyer printed in two passes; its title keeps clear of it. */
:is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-card--surface:not(:has(.kit-card__media))::before {
  content: "";
  position: absolute;
  top: -3.5rem;
  right: -3.5rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background-color: var(--accent, #ff48b0);
  -webkit-mask: var(--riso-dots);
  mask: var(--riso-dots);
  pointer-events: none;
}

:is([data-block="service_cards"], [data-block="child_pages"], [data-block="location_cards"]) .kit-card--surface:not(:has(.kit-card__media)) .kit-card__title {
  padding-inline-end: 2.5rem;
}

/* The plan the website recommends is printed in the main ink: its words in the ink's own colour, its button in the spot
   ink. The kit's colour roles are turned the way a band of the main ink turns them, so every part inside reads. */
[data-block="pricing_table"] .kit-card--surface {
  background: var(--primary, #2c4a9e);
  color: var(--on-primary, #faf7f0);
  --kit-text: var(--on-primary, #faf7f0);
  --kit-muted: color-mix(in srgb, var(--on-primary, #faf7f0) 84%, transparent);
  --kit-surface: color-mix(in srgb, var(--on-primary, #faf7f0) 9%, transparent);
  --kit-primary: var(--accent, #ff48b0);
  --kit-primary-hover: var(--accent, #ff48b0);
  --kit-on-primary: var(--on-accent, #1b1631);
  --kit-accent: var(--on-primary, #faf7f0);
  --kit-accent-text: var(--on-primary, #faf7f0);
  --kit-on-accent: var(--primary, #2c4a9e);
  --kit-line: color-mix(in srgb, var(--on-primary, #faf7f0) 28%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-primary, #faf7f0) 55%, transparent);
  --kit-focus: var(--on-primary, #faf7f0);
  --riso-pass-ink: var(--on-primary, #faf7f0);
  --riso-slip-ink: var(--accent, #ff48b0);
}

[data-block="pricing_table"] .kit-card--surface .kit-card__eyebrow {
  justify-self: start;
  width: fit-content;
  padding: 0.15rem 0.55rem;
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  transform: rotate(-2deg);
}

[data-block="pricing_table"] .kit-stat__value {
  text-shadow: 0.05em 0.05em 0 var(--riso-slip-ink, var(--accent, #ff48b0));
}

/* A step without an icon leads with its number printed large, in the display face, with the spot ink slipping behind
   it. With an icon the icon leads and the number is a small label (the kit's own rule, which is more particular). */
[data-block="process_steps"] .kit-steps .kit-card__eyebrow {
  color: var(--kit-text);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(3rem * var(--riso-face));
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.05;
  text-shadow: 0.05em 0.05em 0 var(--accent, #ff48b0);
}

/* A form beside words is a sheet with a thick rule of the main ink along its top, like a printed order form. */
:is([data-block="contact_form_split"], [data-block="hero_form_split"]) .kit-card--surface {
  border-top: 0.4rem solid var(--primary, #2c4a9e);
}

/* Two columns of words: each column's heading a size down, since it has half the width. */
[data-block="two_column_text"] .kit-heading--2 {
  font-size: calc(clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem) * var(--riso-face));
}

/* ------------------------------------------------------------------ Seams: bands rise out of the paper in halftone */

/* A coloured band (the tinted stock, an ink band, a spot ink band) does not start with a ruled edge: it rises out of the
   page above it in four rows of halftone dots that grow towards it, as a printed gradient does. The rows hang above the
   band, in the page's bottom padding over it (never over its words: the shortest padding is taller than the rows), and
   the first section of a page has none. */
.kit-section--muted {
  --riso-band: var(--surface-alt, #e8e1d2);
}

.kit-section--inverse {
  --riso-band: var(--primary, #2c4a9e);
}

.kit-section--accent {
  --riso-band: var(--accent, #ff48b0);
}

:is(.kit-section--muted, .kit-section--inverse, .kit-section--accent)::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: calc(var(--riso-cell) * 4);
  background-color: var(--riso-band);
  --riso-row: radial-gradient(circle at 50% 50%, #000 0 var(--riso-dot), transparent calc(var(--riso-dot) + 0.04rem));
  -webkit-mask:
    radial-gradient(circle at 50% 50%, #000 0 0.07rem, transparent 0.11rem) 0 0 / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.12rem, transparent 0.16rem) calc(var(--riso-cell) / 2) var(--riso-cell) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.17rem, transparent 0.21rem) 0 calc(var(--riso-cell) * 2) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.23rem, transparent 0.27rem) calc(var(--riso-cell) / 2) calc(var(--riso-cell) * 3) / var(--riso-cell) var(--riso-cell) repeat-x;
  mask:
    radial-gradient(circle at 50% 50%, #000 0 0.07rem, transparent 0.11rem) 0 0 / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.12rem, transparent 0.16rem) calc(var(--riso-cell) / 2) var(--riso-cell) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.17rem, transparent 0.21rem) 0 calc(var(--riso-cell) * 2) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.23rem, transparent 0.27rem) calc(var(--riso-cell) / 2) calc(var(--riso-cell) * 3) / var(--riso-cell) var(--riso-cell) repeat-x;
  pointer-events: none;
}

/* The first section on a page, and the one straight under the breadcrumb or a page's title, starts clean. */
.riso-main > .kit-root:first-child > .kit-section::before,
.riso-main > nav[aria-label]:first-child + .kit-root > .kit-section::before,
.riso-main > .pgs-page-title + .kit-root > .kit-section::before {
  content: none;
}

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

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

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

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

/* The date and the author on a sticker of the spot ink, cut a little askew. */
.riso-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.2rem 0.6rem;
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  font-size: 0.875rem;
  font-weight: var(--riso-body-strong);
  transform: rotate(-1.5deg);
}

.riso-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(2rem, 1.3rem + 3vw, 3.75rem) * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.05;
  padding-block-start: 0.06em;
  text-wrap: balance;
  text-shadow: var(--riso-slip) var(--riso-slip) 0 var(--accent, #ff48b0);
}

.riso-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
}

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

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

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

.riso-prose :where(h2, h3, h4) {
  margin: 1.7em 0 0.5em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.12;
}

.riso-prose h2 {
  font-size: calc(1.85rem * var(--riso-face));
}

.riso-prose h3 {
  font-size: calc(1.4rem * var(--riso-face));
}

.riso-prose h4 {
  font-size: calc(1.15rem * var(--riso-face));
}

.riso-prose a {
  color: var(--accent-ink, #b0106a);
  font-weight: var(--riso-body-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.riso-prose ul {
  padding-left: 1.25em;
}

.riso-prose li::marker {
  color: var(--accent-ink, #b0106a);
}

/* A quotation: large, in the display face, on the paper, with a bar of the spot ink. */
.riso-prose blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 0.4rem solid var(--accent, #ff48b0);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.4rem * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.25;
}

.riso-prose img {
  display: block;
}

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

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

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

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

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

.riso-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: calc(var(--riso-width) + 2 * var(--riso-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--riso-gutter);
}

/* A line: a rule of the main ink with the spot ink printed a little under it. */
.riso-divider__line {
  width: 100%;
  height: 3px;
  background: var(--primary, #2c4a9e);
  box-shadow: 0 4px 0 0 var(--accent, #ff48b0);
}

/* Dashes: the line a sheet is cut along. */
.riso-divider--dashed .riso-divider__line {
  height: 2px;
  background: none;
  border-top: 2px dashed var(--text-primary, #191a33);
  box-shadow: none;
}

/* Dots: three halftone dots growing in size. */
.riso-divider--dotted span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent, #ff48b0);
}

.riso-divider--dotted span:nth-child(2) {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--primary, #2c4a9e);
}

.riso-divider--dotted span:nth-child(3) {
  width: 1rem;
  height: 1rem;
}

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

/* The footer is a band of the main ink, the last sheet of the run. It rises out of the page in halftone rows like every
   band, and every word on it is in the ink's own readable colour. */
.riso-footer {
  position: relative;
  background: var(--primary, #2c4a9e);
  color: var(--on-primary, #faf7f0);
}

.riso-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: calc(var(--riso-cell) * 4);
  background-color: var(--primary, #2c4a9e);
  -webkit-mask:
    radial-gradient(circle at 50% 50%, #000 0 0.07rem, transparent 0.11rem) 0 0 / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.12rem, transparent 0.16rem) calc(var(--riso-cell) / 2) var(--riso-cell) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.17rem, transparent 0.21rem) 0 calc(var(--riso-cell) * 2) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.23rem, transparent 0.27rem) calc(var(--riso-cell) / 2) calc(var(--riso-cell) * 3) / var(--riso-cell) var(--riso-cell) repeat-x;
  mask:
    radial-gradient(circle at 50% 50%, #000 0 0.07rem, transparent 0.11rem) 0 0 / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.12rem, transparent 0.16rem) calc(var(--riso-cell) / 2) var(--riso-cell) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.17rem, transparent 0.21rem) 0 calc(var(--riso-cell) * 2) / var(--riso-cell) var(--riso-cell) repeat-x,
    radial-gradient(circle at 50% 50%, #000 0 0.23rem, transparent 0.27rem) calc(var(--riso-cell) / 2) calc(var(--riso-cell) * 3) / var(--riso-cell) var(--riso-cell) repeat-x;
  pointer-events: none;
}

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

.riso-footer--minimal .riso-footer__inner {
  padding-top: 1.75rem;
}

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

.riso-footer .riso-brand__name {
  max-width: 100%;
  font-size: calc(1.75rem * var(--riso-face));
}

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

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

.riso-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 solid currentColor;
}

.riso-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.8rem, 1.2rem + 2.4vw, 3rem) * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.08;
  padding-block-start: 0.06em;
  text-wrap: balance;
}

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

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

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

/* A column's title: a small sticker of the spot ink. */
.riso-footer__title {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0.85rem;
  padding: 0.1rem 0.5rem;
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  font-size: 0.8125rem;
  font-weight: var(--riso-body-strong);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

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

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

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

.riso-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid currentColor;
  color: inherit;
}

.riso-footer__social a:hover {
  background: var(--accent, #ff48b0);
  color: var(--on-accent, #1b1631);
  border-color: var(--accent, #ff48b0);
}

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

.riso-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 2px solid currentColor;
}

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

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

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

/* The website's name printed very large across the foot, in the band's own colour, with the spot ink slipping behind
   it. Sized by the name's length (theme_footer_wordmark) so most names fit one line; a longer one takes two, and a name of
   more than thirty characters is not drawn. The line keeps room above for the caron of Š and Ž. */
.riso-footer__wordmark {
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  /* Only the sides are cut, never the marks above and the tails below; a name too long for one line wraps under itself,
     balanced, rather than being cut (theme-hostile-words.test.mjs). */
  overflow-x: clip;
  overflow-y: visible;
  overflow-wrap: break-word;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(3rem, 15vw, 14rem) * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.12;
  padding-block-start: 0.04em;
  text-shadow: 0.035em 0.035em 0 var(--accent, #ff48b0);
  text-wrap: balance;
}

.riso-footer__wordmark--m {
  font-size: calc(clamp(2.5rem, 11vw, 10.5rem) * var(--riso-face));
}

.riso-footer__wordmark--l {
  font-size: calc(clamp(2rem, 8vw, 7.5rem) * var(--riso-face));
}

.riso-footer__wordmark--xl {
  font-size: calc(clamp(1.6rem, 5.8vw, 5.5rem) * var(--riso-face));
}

.riso-footer__wordmark--xxl {
  font-size: calc(clamp(1.3rem, 4.2vw, 4rem) * var(--riso-face));
}

/* The printer's marks: a registration mark at each end, the colour bar between them. */
.riso-marks {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.riso-marks__target {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.riso-marks__bar {
  display: flex;
  flex: 1 1 auto;
  height: 0.6rem;
}

.riso-marks__bar i {
  flex: 1 1 0;
  max-width: 3.5rem;
  background: var(--accent, #ff48b0);
}

.riso-marks__bar i:nth-child(even) {
  background: currentColor;
}

.riso-marks__bar i:nth-child(3n) {
  opacity: 0.55;
}

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

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

.riso-not-found__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 38rem;
  margin-inline: auto;
}

/* The number, printed huge in the main ink with the spot ink slipped behind it. */
.riso-not-found__number {
  margin: 0;
  color: var(--text-primary, #191a33);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(6rem, 3rem + 16vw, 13rem) * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1;
  text-shadow: 0.05em 0.04em 0 var(--accent, #ff48b0);
}

.riso-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.9rem, 1.4rem + 2vw, 2.75rem) * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.1;
  text-wrap: balance;
}

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

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

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

.riso-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.6rem * var(--riso-face));
  font-weight: var(--riso-heading-weight);
  letter-spacing: var(--riso-track);
  line-height: 1.15;
}

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

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

/* The shared bar (resilience.css) on the paper, ruled off with the main ink. */
body .theme-action-bar {
  border-top: 3px solid var(--primary, #2c4a9e);
  background: var(--background, #f3eee3);
}

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

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

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

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