/**
 * Rethinking Water UK 2026 — conference page.
 *
 * This sheet is deliberately SMALL. The page is built on the New York
 * design system: functions.php loads
 * assets/css/template-rethinking-water.css first and the page carries
 * both .rw-page and .rwuk-page, so the hero, buttons, sections, section
 * heads, statement, gallery grid, location block and navy finale all
 * come straight from there and are identical by construction.
 *
 * Everything below is only the parts London has that New York does not:
 *
 *   - the site-header override, which NY scopes to its own body class
 *   - the overview aside: the UK roundel with the hosts lockup under it
 *   - the engraved tide band (the differentiated wave graphic)
 *   - the programme, its doors/sessions block and its animated glyphs
 *   - the photograph band under the programme
 *   - the five-slot gallery and its editor-only empty slots
 *   - the recap link, keynote block and finale hosts
 *
 * Earlier versions of this file were ~1200 lines defining a whole
 * parallel design language (a system serif on warm paper, its own
 * palette, its own buttons). That is what made the page look nothing
 * like its sibling. Do not reintroduce it: if something exists in the New
 * York sheet, use its class rather than restyling it here.
 *
 * NOTE ON REVEALS: the NY sheet reveals with
 * `html.rw-js .rw-reveal.is-visible`. Anything given .rw-reveal here is
 * invisible until the JS adds `.is-visible`. Check this page with motion
 * ON; forcing reduced motion sets .rw-reveal to opacity 1 and hides that
 * whole class of bug.
 */

/* ===========================================================
   SITE CHROME
   The NY sheet scopes its glass-header override to
   .page-template-template-rethinking-water, so the UK body class needs
   the same treatment spelled out here.
   =========================================================== */

.page-template-template-rethinking-water-uk .sciens-header-spacer { display: none; }

.page-template-template-rethinking-water-uk .sciens-site-header {
  --sciens-header-bg: rgba(255, 255, 255, 0.72);
  --sciens-header-border: rgba(20, 35, 63, 0.08);
  --sciens-header-border-light: rgba(20, 35, 63, 0.06);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}

/* ===========================================================
   HERO ATMOSPHERE
   The caustic-light hero is New York's, reused wholesale so the two
   pages open the same way. These overrides give London its own weather
   inside that treatment: same three brand colours, same layers, same
   technique, different light.

   What differs, and why it is perceptible without breaking the family
   resemblance:
     - the wash enters on a near-vertical sweep (96deg) over a longer
       ramp, rather than New York's steeper 112deg diagonal, so more of
       the headline sits on clean paper
     - the blue node moves high and right, the orange is cut to about
       two thirds and pushed to mid-frame, and the navy strengthens into
       the lower right, so London reads cooler and deeper
     - softer blur, less saturation
     - 33s drift on a different path against New York's 24s, so the two
       never look synchronised
     - grain is coarser (0.58 base frequency vs 0.85) and carried a
       little heavier, which is the difference you notice first

   Both selectors carry .rwuk-page, which outranks the NY sheet's
   single-class rules and loads after them.
   =========================================================== */

.rwuk-page .rw-caustics {
  -webkit-mask-image: linear-gradient(96deg, transparent 8%, #000 58%);
          mask-image: linear-gradient(96deg, transparent 8%, #000 58%);
}

.rwuk-page .rw-caustics__mesh {
  background:
    radial-gradient(44% 46% at 82% 30%, rgba(69, 127, 249, 0.46), transparent 70%),
    radial-gradient(28% 34% at 62% 78%, rgba(238, 124, 35, 0.22), transparent 74%),
    radial-gradient(52% 62% at 92% 76%, rgba(22, 49, 95, 0.46),  transparent 70%);
  filter: blur(52px) saturate(106%);
  animation: rwuk-mesh-drift 33s ease-in-out infinite alternate;
}

@keyframes rwuk-mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.02); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.08); }
  100% { transform: translate3d(1.5%, -2%, 0) scale(1.03); }
}

.rwuk-page .rw-caustics__shimmer { opacity: 0.62; }

.rwuk-page .rw-caustics__grain { opacity: 0.46; }

@media (prefers-reduced-motion: reduce) {
  .rwuk-page .rw-caustics__mesh { animation: none; }
}

/* ===========================================================
   OVERVIEW
   Statement left; the UK roundel with the hosts lockup beneath it on
   the right. New York puts an offset image trio in this column.
   =========================================================== */

.rwuk-overview__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.rwuk-page .rwuk-statement { max-width: 22ch; }

.rwuk-overview .rw-lede { margin-bottom: 0; }

.rwuk-overview__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.rwuk-page .rwuk-overview__mark {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  /* The roundel is a raster lifted from the flyer PDF; its white was
     keyed out, and multiply keeps any replacement that still carries a
     white box from showing one. */
  mix-blend-mode: multiply;
}

/* "Hosted by" + the two host marks, sitting under the roundel. */
.rwuk-hostedby {
  width: 100%;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rw-line);
  text-align: center;
}

/* Until the roundel is uploaded the lockup is the only thing in the
   column, and a rule above nothing looks like a mistake. */
.rwuk-overview__aside > .rwuk-hostedby:first-child {
  border-top: 0;
  padding-top: 0;
}

.rwuk-hostedby__label {
  margin: 0 0 1.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rw-muted);
}

.rwuk-hostedby__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
}

/* Sized by HEIGHT, with the width cap only there as a runaway guard.
   Capping both made the width bind first on wide lockups: the Cambridge
   mark is 4.8:1, so a 165px width cap rendered it just 34px tall next to
   a Sciens wordmark at 2.5:1 that was nowhere near its own cap. Matching
   the heights is what makes two logos of different proportions read as
   the same size. */
.rwuk-hostedby__list img {
  width: auto;
  height: 52px;
  max-height: 52px;
  max-width: 100%;
  display: block;
  object-fit: contain;
  /* Full colour: these sit on white here, unlike the navy finale. */
  mix-blend-mode: multiply;
}

.rwuk-hostedby__list span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--rw-navy);
}

/* ===========================================================
   TIDE BAND — the differentiated wave graphic
   Full width, on its own, with nothing laid over it.
   =========================================================== */

.rwuk-tideband {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--rw-bg);
  border-top: 1px solid var(--rw-line);
  border-bottom: 1px solid var(--rw-line);
}

.rwuk-tide {
  display: block;
  width: 100%;
  height: 100%;
}

/* Without JS the canvas is never drawn, so collapse the band rather than
   leaving an empty 190px gap. */
html:not(.rwuk-js) .rwuk-tideband { display: none; }

/* ===========================================================
   THE DAY
   =========================================================== */

/* Doors, sessions and "also", directly under the section head. Three
   columns of facts about the day, aligned on their labels. */
.rwuk-times {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
  flex-wrap: wrap;
  margin: 0 0 3rem;
}

.rwuk-times__item dt {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rw-orange);
}

.rwuk-times__item dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rw-navy);
}

.rwuk-times__item dd span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--rw-muted);
}

/* "Also" is a list rather than a single figure, so it drops out of the
   large-figure treatment its two neighbours use and sits at body size.
   This replaced three full-width cards at the foot of the section: far
   too much room for three short labels, and stranded away from
   everything they relate to. */
.rwuk-times__item--also dd { font-size: inherit; font-weight: 400; }

.rwuk-alsolist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rwuk-alsolist li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--rw-ink);
}

.rwuk-alsoicon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--rw-orange);
}

/* The list carried a rule under every one of its six items plus a rule
   on top, which is what made this section look ruled to death. Only the
   compact fixture rows keep a divider now; the three panels are open
   blocks separated by space and anchored by their glyph. */
.rwuk-day__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.rwuk-slim {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rw-line);
}

.rwuk-slim__title {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rw-navy);
}

.rwuk-slim__detail {
  font-size: 0.92rem;
  color: var(--rw-muted);
}

.rwuk-slim__time {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--rw-muted);
}

/* "Closing remarks" comes straight after the last open panel block, so
   it needs a rule and some air above it or it reads as part of panel 03. */
.rwuk-panel + .rwuk-slim {
  margin-top: 2rem;
  border-top: 1px solid var(--rw-line);
}

.rwuk-panel {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
  padding: 2.8rem 0 0.6rem;
  border: 0;
}

/* Each panel starts at its own point on the x axis, so the three read as
   a diagonal down the page rather than three identical bars stacked in a
   column. The step is applied as padding-left plus a matching reduction
   in width, so the indent never pushes the text past the container. */
.rwuk-panel--1 { margin-left: 0; }
.rwuk-panel--2 { margin-left: 9%; }
.rwuk-panel--3 { margin-left: 18%; }

/* The measure tightens as the panels step right, which keeps the ragged
   right edge from drifting further out with each one. */
.rwuk-panel--2 .rwuk-panel__ask { max-width: 22ch; }
.rwuk-panel--3 .rwuk-panel__ask { max-width: 20ch; }
.rwuk-panel--2 .rwuk-panel__title { max-width: 44ch; }
.rwuk-panel--3 .rwuk-panel__title { max-width: 38ch; }

.rwuk-panel__art {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.rwuk-panel__n {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rw-line);
  transition: color 0.5s ease;
}

.rwuk-panel.is-visible .rwuk-panel__n { color: var(--rw-orange); }

.rwuk-panel__ask {
  margin: 0 0 0.6rem;
  max-width: 24ch;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--rw-navy);
}

.rwuk-panel__title {
  margin: 0;
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--rw-muted);
}

.rwuk-panel__time {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--rw-muted);
}

/* ---- Animated panel glyphs ----
   Line art that draws itself in when the panel is revealed, then keeps
   a slow dash travelling along the one path marked .rwuk-glyph__flow so
   the water in each drawing stays moving.

   The draw uses a generous dasharray rather than a measured path
   length: any path shorter than it simply draws in full, so no
   per-path maths is needed. The flow animation is listed second and
   re-declares stroke-dasharray in its own keyframes, so once it starts
   it takes over both properties from the finished draw. */

.rwuk-glyph {
  display: block;
  width: 58px;
  height: 58px;
  color: var(--rw-blue);
  overflow: visible;
}

.rwuk-glyph path,
.rwuk-glyph circle {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}

.rwuk-glyph .rwuk-glyph__flow { color: var(--rw-orange); stroke: var(--rw-orange); }

@keyframes rwuk-draw { to { stroke-dashoffset: 0; } }

@keyframes rwuk-flow {
  from { stroke-dasharray: 5 7; stroke-dashoffset: 0; }
  to   { stroke-dasharray: 5 7; stroke-dashoffset: -24; }
}

.rwuk-panel.is-visible .rwuk-glyph path,
.rwuk-panel.is-visible .rwuk-glyph circle {
  animation: rwuk-draw 1.3s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Stagger the strokes so each drawing builds rather than snapping in. */
.rwuk-panel.is-visible .rwuk-glyph > :nth-child(2) { animation-delay: 0.16s; }
.rwuk-panel.is-visible .rwuk-glyph > :nth-child(3) { animation-delay: 0.32s; }
.rwuk-panel.is-visible .rwuk-glyph > :nth-child(4) { animation-delay: 0.48s; }
.rwuk-panel.is-visible .rwuk-glyph > :nth-child(5) { animation-delay: 0.64s; }

.rwuk-panel.is-visible .rwuk-glyph .rwuk-glyph__flow {
  animation:
    rwuk-draw 1.3s cubic-bezier(.16, 1, .3, 1) forwards,
    rwuk-flow 1.5s linear 1.4s infinite;
}

/* ===========================================================
   PHOTOGRAPH BAND under the programme
   =========================================================== */

/* The band closes the section, so the section's own bottom padding goes
   and the photograph runs flush to the next section's edge. */
.rwuk-day { padding-bottom: 0; }

.rwuk-band {
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  height: clamp(280px, 46vh, 520px);
  overflow: hidden;
  position: relative;
}

/* Oversized wrapper gives the parallax its headroom, same trick as the
   NY moments grid. */
.rwuk-band__media {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
}

.rwuk-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================================================
   GALLERY
   Built for five. Fixed row heights rather than per-tile aspect ratios,
   so tiles of different spans always line up (equal aspect ratios at
   unequal widths cannot).
   =========================================================== */

.rwuk-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 17vw, 215px);
}

.rwuk-page .rwuk-grid .rw-moments__item {
  aspect-ratio: auto;
  grid-column: span 1;
  grid-row: span 1;
}

/* First tile is the anchor: two columns wide, two rows tall. */
.rwuk-page .rwuk-grid .rw-moments__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* With exactly five, the last tile widens to close the bottom row so the
   grid has no hole in the corner. */
.rwuk-page .rwuk-grid--5 .rw-moments__item:last-child { grid-column: span 2; }

/* With two, drop the anchor span and sit them side by side. */
.rwuk-page .rwuk-grid--2 { grid-auto-rows: clamp(200px, 24vw, 320px); }
.rwuk-page .rwuk-grid--2 .rw-moments__item:first-child { grid-column: span 2; grid-row: span 1; }

/* Editor-only empty slots. Used for the gallery tiles, the roundel and
   the programme photograph, since none of the imagery ships with the
   theme any more. Visitors never see these. */
.rwuk-slot {
  border: 1px dashed var(--rw-line-strong, #c8cfdb);
  border-radius: 6px;
  background: var(--rw-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The roundel slot stands in for a ~320px square mark. */
.rwuk-slot--mark {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
}

/* The band slot stands in for the full-width photograph. */
.rwuk-slot--band {
  height: clamp(200px, 30vh, 300px);
  margin: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5rem);
}

.rwuk-slot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--rw-muted);
}

.rwuk-slot__txt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- The recap link ----
   Leads the gallery rather than trailing it, centred over the images. */
.rwuk-gallery__lead {
  display: flex;
  justify-content: center;
  margin: 0 0 2.8rem;
}

.rwuk-play {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem 0.75rem 0.75rem;
  border: 1px solid var(--rw-line);
  border-radius: 999px;
  background: var(--rw-bg);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.rwuk-play:hover {
  border-color: var(--rw-orange);
  box-shadow: 0 12px 30px rgba(22, 49, 95, 0.10);
  transform: translateY(-2px);
}

.rwuk-play__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rw-navy);
  color: #fff;
  transition: background-color 0.25s ease;
}

.rwuk-play:hover .rwuk-play__btn { background: var(--rw-orange); }

.rwuk-play__body { display: block; text-align: left; }

.rwuk-play__label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rw-navy);
}

.rwuk-play__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rw-muted);
}

/* ===========================================================
   SPEAKERS
   =========================================================== */

.rwuk-keynote {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.rwuk-keynote__portrait {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 5px;
}

.rwuk-keynote__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stepped down from the display scale: this is a name, not a headline,
   and at 2.4rem it was competing with the section title above it. */
.rwuk-keynote__name {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--rw-navy);
}

.rwuk-keynote__org {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--rw-muted);
}

.rwuk-spgrid {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--rw-line);
  border: 1px solid var(--rw-line);
}

.rwuk-spgrid__item { padding: 1.7rem 1.5rem; background: var(--rw-bg); }

.rwuk-spgrid__portrait {
  width: 72px;
  height: 72px;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 4px;
}

.rwuk-spgrid__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rwuk-spgrid__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rw-navy);
}

.rwuk-spgrid__role {
  margin: 0.5rem 0 0;
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--rw-orange);
}

.rwuk-spgrid__org {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--rw-muted);
}

/* ===========================================================
   FINALE — registration note and hosts, inside New York's .rw-cta
   =========================================================== */

.rwuk-register { display: flex; flex-direction: column; align-items: center; }

.rwuk-register__note {
  margin: 1.3rem 0 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
}

.rwuk-register__note a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.rwuk-register__note a:hover { color: #fff; border-color: #fff; }

.rwuk-hosts {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 3.4rem 0 0;
  padding: 2.4rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  width: 100%;
}

/* Each mark sits on its own light plate.
   These were knocked out to flat white with brightness(0) invert(1),
   which lost the Sciens orange and the Cambridge crest entirely and
   read as odd. Both are dark-on-transparent artwork, so they need a
   light ground to show their real colours on navy rather than a filter
   that destroys them. */
.rwuk-hosts li {
  display: grid;
  place-items: center;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  background: #fff;
  transition: transform 0.25s ease;
}

.rwuk-hosts li:hover { transform: translateY(-2px); }

.rwuk-hosts img {
  width: auto;
  height: 46px;
  max-height: 46px;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.rwuk-hosts span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--rw-navy);
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media (max-width: 900px) {
  .rwuk-overview__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .rwuk-page .rwuk-overview__mark { max-width: 240px; }

  .rwuk-times { gap: 2.2rem; margin-bottom: 2.2rem; }

  .rwuk-panel {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding-top: 2.2rem;
  }

  .rwuk-panel__art { flex-direction: row; align-items: center; gap: 1rem; }

  .rwuk-slim__time { margin-left: 0; }

  /* The cascade is a wide-screen composition; below this it just eats
     the measure, so everything returns to a single left edge. */
  .rwuk-panel--1,
  .rwuk-panel--2,
  .rwuk-panel--3 { margin-left: 0; }

  .rwuk-panel--2 .rwuk-panel__ask,
  .rwuk-panel--3 .rwuk-panel__ask { max-width: 24ch; }
  .rwuk-panel--2 .rwuk-panel__title,
  .rwuk-panel--3 .rwuk-panel__title { max-width: 52ch; }

  /* The three fact columns stack rather than squeezing side by side. */
  .rwuk-times { gap: 1.6rem; }
  .rwuk-times__item--also { width: 100%; }

  .rwuk-band { height: clamp(220px, 38vh, 340px); }

  /* Two columns, and the anchor tile stops spanning two rows so the
     grid never leaves a hole. */
  .rwuk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rwuk-page .rwuk-grid .rw-moments__item:first-child,
  .rwuk-page .rwuk-grid--5 .rw-moments__item:last-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .rwuk-keynote { gap: 1.4rem; }
  .rwuk-keynote__portrait { width: 76px; height: 76px; }

  .rwuk-hosts { gap: 1rem; }
  .rwuk-hostedby__list img { height: 42px; max-height: 42px; }
  .rwuk-hosts img { height: 38px; max-height: 38px; }
}

@media (max-width: 560px) {
  .rwuk-grid { grid-template-columns: 1fr; }
  .rwuk-page .rwuk-grid .rw-moments__item,
  .rwuk-page .rwuk-grid .rw-moments__item:first-child,
  .rwuk-page .rwuk-grid--5 .rw-moments__item:last-child {
    grid-column: span 1;
    grid-row: span 1;
  }

  .rwuk-play { padding-right: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rwuk-band__media { transform: none !important; }

  /* Glyphs land drawn rather than animating in. */
  .rwuk-glyph path,
  .rwuk-glyph circle { stroke-dasharray: none; stroke-dashoffset: 0; }
  .rwuk-panel.is-visible .rwuk-glyph path,
  .rwuk-panel.is-visible .rwuk-glyph circle,
  .rwuk-panel.is-visible .rwuk-glyph .rwuk-glyph__flow { animation: none; }

  .rwuk-play:hover { transform: none; }
  .rwuk-hosts li:hover { transform: none; }
}