html, body { max-width: 100%; overflow-x: clip; }

img, svg, video, canvas, iframe, embed, object, figure, picture { max-width:100%; }
img, video, canvas { height: auto; }
pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }

h1, h2, h3, h4, h5, h6,
[class*="lockup"], [class*="display"], [class*="headline"], [class*="title"],
[class*="hero"] h1, [class*="hero"] h2 {
   overflow-wrap:break-word;
   word-break:normal;
   hyphens:auto;
}
[class*="lockup"], [class*="lockup"] > * { white-space: normal !important; }

/* Long unbroken strings (URLs, emails, ids) wrap rather than overflow. */
p, li, dd, dt, blockquote, figcaption, address, a, span, td, th { overflow-wrap:break-word; }

[class*="grid"] > *, [class*="row"] > *, [class*="flex"] > *,
[class*="cols"] > *, [class*="columns"] > * { min-width: 0; }

:not(img):not(picture):not(svg):not(video):not(canvas):only-child { grid-column:1 / -1; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.28s; }
@media (prefers-reduced-motion: reduce) {
   ::view-transition-group(*),
   ::view-transition-old(*),
   ::view-transition-new(*) { animation: none !important; }
}

.fivi992 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fivi992 > table { min-width: max-content; }
@media (max-width: 48rem) {
   .fivi992 > table { font-size: .94em; }

}
   The cell widths go back with the display. A stacking rule sets
   `width: 100%` on the cells along with `display: block`, which is right
   for a block and ruinous for a cell: a table is as wide as its cells ask
   to be, so every cell asking for the whole table makes the table ask for
   the whole table again. Taking back only the display left a two-column
   table on a vet's site a million pixels wide, with the row headings on
   the phone and every value scrolled off the side of it. */
.fivi992 > table,
.fivi992 > table > thead, .fivi992 > table > tbody,
.fivi992 > table > tfoot, .fivi992 > table tr,
.fivi992 > table th, .fivi992 > table td { display: revert; }
.fivi992 > table th, .fivi992 > table td {
   inline-size:auto;
   min-inline-size:0;
}

@media (max-width: 30rem) {
   :root {
      --geko-1a8:clamp(2.2rem, 9vw, 3rem);
      --geko-759:clamp(2rem, 8vw, 2.7rem);

      --geko-324:clamp(1.8rem, 7vw, 2.4rem);
      --geko-270:clamp(1.55rem, 6vw, 2.05rem);
      --geko-68f:clamp(1.35rem, 5vw, 1.8rem);
   }
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
   :root {
      --geko-1a8:clamp(2.8rem, 8vw, 4.6rem);
      --geko-759:clamp(2.5rem, 7vw, 4rem);
      --geko-324:clamp(2.2rem, 6vw, 3.4rem);
   }
}

/* Touch targets stay usable. */
@media (pointer: coarse) {
   a.btn, button, [role="button"], .btn,
   input[type="submit"], input[type="button"] { min-height: 44px; }
}


/* Consent bar — bounded so it cannot cover the headline. */
.cookie-banner {
   max-height:20vh;
   overflow:auto;

   top:auto;
   bottom:0;
}
@media (max-width: 30rem) {
   .cookie-banner { max-height: 38vh; }
}