/*
 * bloom.css: the signature pieces of the United Bloom (owner: the bloom builder).
 *   1 the petal's six places in the mark (shared by the living bloom and the window scene)
 *   2 the dial        {{> dial}}       a bloom that turns to what is being read
 *   3 the legend      {{> legend}}     six petals, six communities
 *   4 the greeting    {{> greeting}}   hello in fifteen languages
 *   5 the living bloom {{> bloom}}     the home hero
 *   6 the petal window {{> window}}    one petal grows until its photograph fills the screen
 * Loaded on every page after components.css and outside the cascade layers, so it wins.
 * Every number that places a petal is read from src/img/logo/geometry.json: the mark's own
 * viewBox is 200 units, its centre 100,100, a petal tip 62 units out, the core 17 units wide in
 * radius. A bloom here is drawn in the square that just holds the six tips (124 units).
 * Behaviour: src/js/bloom.js. Nothing in this file hides content unless scripts run, motion is
 * allowed and the failsafe has not fired.
 */

/* ───────────────────────────────────────── 1 The six places of a petal ──
   A petal is a box at its place in the 124-unit square, cut to the petal by the art producer's
   mask for that angle. --ox/--oy is the centre of the bloom seen from the box (things open from
   there), --bx/--by is the petal's base, where it meets the core (a photograph opens from there).
   The mark is never mirrored, so the square is laid out left to right in every language. */
.bloom__ring { direction: ltr; }
.bloom__petal {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: var(--w);
  block-size: var(--h);
  transform-origin: var(--ox) var(--oy);
}
.bloom__petal--0 { --x: 41.674%; --y: 0%; --w: 16.652%; --h: 36.391%; --ox: 50%; --oy: 137.396%; --bx: 50%; --by: 100%; --mask: url("../img/art/mask-petal.svg"); }
.bloom__petal--60 { --x: 60.906%; --y: 24.55%; --w: 32.396%; --h: 21.873%; --ox: -33.664%; --oy: 116.351%; --bx: 2.716%; --by: 85.243%; --mask: url("../img/art/mask-petal-60.svg"); }
.bloom__petal--120 { --x: 60.906%; --y: 53.577%; --w: 32.396%; --h: 21.873%; --ox: -33.664%; --oy: -16.351%; --bx: 2.716%; --by: 14.757%; --mask: url("../img/art/mask-petal-120.svg"); }
.bloom__petal--180 { --x: 41.674%; --y: 63.609%; --w: 16.652%; --h: 36.391%; --ox: 50%; --oy: -37.396%; --bx: 50%; --by: 0%; --mask: url("../img/art/mask-petal-180.svg"); }
.bloom__petal--240 { --x: 6.698%; --y: 53.577%; --w: 32.396%; --h: 21.873%; --ox: 133.664%; --oy: -16.351%; --bx: 97.284%; --by: 14.757%; --mask: url("../img/art/mask-petal-240.svg"); }
.bloom__petal--300 { --x: 6.698%; --y: 24.55%; --w: 32.396%; --h: 21.873%; --ox: 133.664%; --oy: 116.351%; --bx: 97.284%; --by: 85.243%; --mask: url("../img/art/mask-petal-300.svg"); }
.bloom__breath,
.bloom__shape,
.bloom__photo { position: absolute; inset: 0; display: block; }
.bloom__breath { transform-origin: var(--bx) var(--by); }   /* breathing: from the base, so a petal never leaves the core */
.bloom__shape {
  transform-origin: var(--bx) var(--by);
  background: var(--c);
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
  mask: var(--mask) center / 100% 100% no-repeat;
}
/* The photograph is a second, slightly smaller petal inside the first: a rim of the petal's own
   colour holds the shape where a picture is pale at its edge. */
.bloom__photo {
  inset: clamp(2px, .22vw, 4px);
  transform-origin: var(--bx) var(--by);
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
  mask: var(--mask) center / 100% 100% no-repeat;
}
.bloom__photo picture { display: block; inline-size: 100%; block-size: 100%; }
.bloom__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.bloom__core {
  position: absolute;
  inset-inline-start: 36.29%;
  inset-block-start: 36.29%;
  inline-size: 27.42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
}

/* ─────────────────────────────────────────────────────────── 2 The dial ──
   <div class="dial dial--m" data-dial="communities"> … </div>     see src/partials/dial.html
   The mark on a white disc. The inner part turns (bloom.js, DT.turn); the small petal at the top
   of the disc stays where it is and marks the place the active petal comes to. */
.dial {
  --dial-size: clamp(9.5rem, 6rem + 9vw, 13.5rem);
  position: relative;
  flex: none;
  display: block;
  inline-size: var(--dial-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 1.5px var(--line);
}
.dial--s { --dial-size: 6rem; }
.dial--l { --dial-size: clamp(12rem, 6rem + 15vw, 19rem); }
.dial--plain { background: none; box-shadow: none; }
.dial--plain .dial__mark { display: none; }   /* no disc, no rim to stand on */
/* The face is the round window the mark turns in (the turning square's corners stay inside it). */
.dial__face { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.dial__turn,
.dial__svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.dial__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  z-index: 1;
  inline-size: 5%;
  aspect-ratio: 1;
  margin-block-start: -2.5%;
  margin-inline-start: -2.5%;
  border-radius: 50%;
  background: var(--ink);
  scale: 0;
  transition: scale var(--dur-3) var(--ease-pop);
}
.dial.is-live .dial__mark { scale: 1; }
.tone-forest .dial__mark, .tone-forest-deep .dial__mark, .section--forest .dial__mark, .section--forest-deep .dial__mark, .panel--forest .dial__mark { background: var(--gold); }
.dial__petal {
  transform-origin: 100px 100px;   /* the centre of the mark, in its own units */
  transition: transform var(--dur-4) var(--ease-bloom), opacity var(--dur-3) ease;
}
.dial.is-live .dial__petal { opacity: .4; transform: scale(.93); }
.dial.is-live .dial__petal.is-partner { opacity: .78; transform: scale(1); }
.dial.is-live .dial__petal.is-active { opacity: 1; transform: scale(1.12); }
@media (min-width: 56rem) {
  .dial { position: sticky; inset-block-start: calc(var(--header-h, 4.75rem) + 2rem); align-self: start; }
}
@media (max-width: 55.99rem) {
  .dial, .dial--l { --dial-size: 6.5rem; }
  .dial--s { --dial-size: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dial__petal, .dial__mark { transition: none; }
}

/* ───────────────────────────────────────────────────────── 3 The legend ──
   <div class="legend"> <ul class="legend__list"> <li> <button class="legend__item c-forest"> …
   Six choices, each a field of its own mist with its medallion; the chosen one takes the petal's
   full colour. Behind the text lies the community's own petal, at the angle it has in the mark. */
.legend { container-type: inline-size; inline-size: 100%; }
.legend__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@container (min-width: 30rem) { .legend__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@container (min-width: 54rem) { .legend__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legend--cols-1 .legend__list { grid-template-columns: minmax(0, 1fr); }
.legend--cols-2 .legend__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legend--cols-3 .legend__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legend__cell { display: grid; }
.legend__item {
  --on: var(--ink);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  inline-size: 100%;
  min-block-size: 100%;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: var(--r-row);
  border-start-start-radius: 2.25rem;
  border-end-end-radius: 2.25rem;
  background: var(--c-mist);
  color: var(--ink);
  text-align: start;
  transition: background-color var(--dur-3) ease, color var(--dur-3) ease, scale var(--dur-1) var(--ease-out);
}
.legend__item:active { scale: .985; }
.legend__item:is(.c-forest, .c-blue, .c-plum) { --on: var(--white); }
.legend__item.c-clay { --on: var(--ink-deep); }
.legend__ghost { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.legend__petal {
  --ghost: var(--white);
  position: absolute;
  inset-block-end: -2.4rem;
  inset-inline-end: .5rem;
  block-size: 7rem;
  aspect-ratio: 20.648 / 45.125;
  background: var(--c);
  opacity: .14;
  rotate: calc(var(--turn, 0) * 1deg);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
  transition: opacity var(--dur-3) ease, scale var(--dur-4) var(--ease-bloom), background-color var(--dur-3) ease;
}
/* On the full colour the ghost petal moves away from the text colour, so words that cross it keep their contrast. */
.legend__item:is(.c-forest, .c-blue, .c-plum) .legend__petal { --ghost: var(--c-deep); }
.legend__medal { transition: background-color var(--dur-3) ease, color var(--dur-3) ease, scale var(--dur-3) var(--ease-pop); }
.legend__text { display: grid; gap: .2rem; align-content: start; padding-block-start: .2rem; }
.legend__name {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
}
.legend__line { color: var(--slate); line-height: var(--lh-text); transition: color var(--dur-3) ease; }
.legend__item.is-dial-on { background: var(--c); color: var(--on); }
.legend__item.is-dial-on .legend__line { color: var(--on); }
.legend__item.is-dial-on .legend__medal { background: var(--white); color: var(--c-deep); scale: 1.06; }
.legend__item.is-dial-on .legend__petal { background: var(--ghost); opacity: .28; scale: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .legend__item:hover .legend__medal { scale: 1.06; }
}
@media (prefers-reduced-motion: reduce) {
  .legend__item, .legend__item * { transition: none; }
}

/* ─────────────────────────────────────────────────────── 4 The greeting ──
   <p class="greeting" data-greeting="2.4"> … </p>     see src/partials/greeting.html
   The words share one cell, so the line keeps the width of the longest hello and nothing beside
   it moves. Each word carries its own lang, so it is set in its own script's face and metrics. */
.greeting {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  max-inline-size: none;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-display);
}
.greeting--l { font-size: var(--fs-sub); }
.greeting__bud {
  flex: none;
  display: block;
  block-size: 1.5em;
  aspect-ratio: 20.648 / 45.125;
  margin-inline: .35em;
  background: var(--c, var(--p1));
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
  transition: background-color var(--dur-4) ease;
}
.greeting__toggle {
  flex: none;
  display: none;
  place-items: center;
  inline-size: var(--target, 2.75rem);
  block-size: var(--target, 2.75rem);
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  transition: background-color var(--dur-2) ease, scale var(--dur-1) var(--ease-out);
}
.greeting__toggle:active { scale: .94; }
.greeting__toggle > .icon { inline-size: 1.25rem; block-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .greeting__toggle:hover { background: var(--gold-hover); }
}
.greeting__words { display: inline-grid; align-items: center; }
.greeting__word {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
  visibility: hidden;
}
.greeting__word.is-current,
.greeting__word.is-leaving { visibility: visible; }
/* The pause control exists only where something moves: scripts on, motion allowed. Then it takes
   the place of the small mark. */
@media (prefers-reduced-motion: no-preference) {
  html.js .greeting.is-live .greeting__toggle { display: inline-grid; }
  html.js .greeting.is-live .greeting__toggle + .greeting__bud,
  html.js .greeting.is-live:has(.greeting__toggle) .greeting__bud { display: none; }
}

/* ──────────────────────────────────────────────────── 5 The living bloom ──
   <div class="bloom" data-bloom> … </div>     see src/partials/bloom.html
   stage (the square, the preloader's landing place) › float (answers the pointer) › ring (drifts)
   › six petal buttons › breath › shape › photograph. The pause control stands in the square's
   empty corner; the label sits under the square and keeps its room. */
.bloom {
  --bloom-max-default: 40rem;
  --bloom-fit: calc(100svh - var(--header-h, 4.75rem) - var(--dock-h, 0px) - 13.5rem);
  display: grid;
  justify-items: center;
  gap: clamp(.5rem, 1.5vh, 1.25rem);
  inline-size: 100%;
}
.bloom__stage {
  position: relative;
  inline-size: min(100%, var(--bloom-max, var(--bloom-max-default)), max(17rem, var(--bloom-fit)));
  aspect-ratio: 1;
}
.bloom__float,
.bloom__ring { position: absolute; inset: 0; }
.bloom__petal { border-radius: 28%; cursor: pointer; }
/* A small bloom still gives every petal a 44px target: the two upright petals are the narrow ones,
   so their buttons may be wider than the petal, which keeps its true width in the middle. */
@supports (inline-size: 1cqw) {
  .bloom__stage { container-type: inline-size; }
  .bloom__petal--0,
  .bloom__petal--180 { inset-inline-start: calc(50% - max(16.652%, 2.75rem) / 2); inline-size: max(16.652%, 2.75rem); }
  .bloom__petal--0 > .bloom__breath,
  .bloom__petal--180 > .bloom__breath { inset-inline: calc((100% - 16.652cqw) / 2); }
}
.bloom__petal:focus-visible { outline-offset: 3px; z-index: 1; }
.bloom__core { z-index: 2; pointer-events: none; }
.bloom__labels { display: grid; align-items: start; inline-size: min(100%, 34rem); min-block-size: 3rem; }
.bloom__label {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .2rem .65rem;
  max-inline-size: none;
  opacity: 0;
  visibility: hidden;
  translate: 0 .4rem;
  transition: opacity var(--dur-2) ease, translate var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-2);
}
.bloom__label > .petal { --size: 1.15rem; align-self: center; vertical-align: 0; }
.bloom__name {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-display);
  line-height: var(--lh-sub);
}
.bloom__cap {
  grid-column: 2;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: max(1.5, calc(var(--lh-text) - .15));
}
.bloom__label.is-on {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity var(--dur-3) ease var(--dur-1), translate var(--dur-4) var(--ease-out) var(--dur-1), visibility 0s;
}
/* Until bloom.js takes over (and for good where it never arrives): the petal under the pointer or
   holding the focus names itself. */
.bloom:not(.is-wired):has([data-bloom-petal="seniors"]:hover) [data-bloom-label="seniors"],
.bloom:not(.is-wired):has([data-bloom-petal="seniors"]:focus-visible) [data-bloom-label="seniors"],
.bloom:not(.is-wired):has([data-bloom-petal="youth"]:hover) [data-bloom-label="youth"],
.bloom:not(.is-wired):has([data-bloom-petal="youth"]:focus-visible) [data-bloom-label="youth"],
.bloom:not(.is-wired):has([data-bloom-petal="minorities"]:hover) [data-bloom-label="minorities"],
.bloom:not(.is-wired):has([data-bloom-petal="minorities"]:focus-visible) [data-bloom-label="minorities"],
.bloom:not(.is-wired):has([data-bloom-petal="refugees"]:hover) [data-bloom-label="refugees"],
.bloom:not(.is-wired):has([data-bloom-petal="refugees"]:focus-visible) [data-bloom-label="refugees"],
.bloom:not(.is-wired):has([data-bloom-petal="partners"]:hover) [data-bloom-label="partners"],
.bloom:not(.is-wired):has([data-bloom-petal="partners"]:focus-visible) [data-bloom-label="partners"],
.bloom:not(.is-wired):has([data-bloom-petal="volunteers"]:hover) [data-bloom-label="volunteers"],
.bloom:not(.is-wired):has([data-bloom-petal="volunteers"]:focus-visible) [data-bloom-label="volunteers"] {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
/* With scripts off nobody ever chooses a petal for the reader, so the first one names itself and shows its
   photograph's dated caption until another petal is pointed at or holds the focus. */
html:not(.js) .bloom:not(:has(.bloom__petal:hover, .bloom__petal:focus-visible)) .bloom__label:first-child {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
/* The pause control stands in the empty lower corner of the square, on the end side. */
.bloom__toggle { position: absolute; inset-inline-end: 0; inset-block-end: 0; z-index: 3; display: none; }
.bloom__toggle[aria-pressed="true"] { background: var(--btn-line); color: var(--bg); }
/* A small bloom (a phone, a short screen): the square's corner is then within a few pixels of the nearest
   petal's tip, and a 48px control there sits on the petal. It steps a little way out of the corner. */
@supports (inline-size: 1cqw) {
  @container (max-width: 15rem) {
    .bloom__toggle { inset-inline-end: -.75rem; inset-block-end: -.375rem; }   /* more sideways than down: the label starts just under the square */
  }
}
@media (max-width: 39.99rem) {
  .bloom { --bloom-max-default: 21rem; }   /* a wrapper's --bloom-max still wins */
}
@media (prefers-reduced-motion: no-preference) {
  html.js .bloom.is-live .bloom__toggle { display: inline-grid; }
  /* Hidden until the entrance: the petals wait for bloom.js, the photographs start closed.
     If the script never comes, the still mark shows itself after four seconds. */
  html.js:not(.dt-failsafe) .bloom:not(.is-live):not(.is-still) .bloom__ring { opacity: 0; animation: bloom-safe 1ms 4s forwards; }
  html.js:not(.dt-failsafe) .bloom:not(.is-still) .bloom__photo { opacity: 0; }
  /* Breathing: each petal swells a little from the core, one after another. Drift: the whole
     bloom leans a degree or two and back. Both stop with the pause control and off screen. */
  .bloom.is-live .bloom__breath { animation: bloom-breathe 5.6s ease-in-out infinite alternate; }
  .bloom.is-live .bloom__petal--60 .bloom__breath { animation-delay: -.9s; }
  .bloom.is-live .bloom__petal--120 .bloom__breath { animation-delay: -1.8s; }
  .bloom.is-live .bloom__petal--180 .bloom__breath { animation-delay: -2.7s; }
  .bloom.is-live .bloom__petal--240 .bloom__breath { animation-delay: -3.6s; }
  .bloom.is-live .bloom__petal--300 .bloom__breath { animation-delay: -4.5s; }
  .bloom.is-live .bloom__ring { animation: bloom-drift 22s ease-in-out infinite; }
  .bloom:is(.is-paused, .is-away) :is(.bloom__breath, .bloom__ring) { animation-play-state: paused; }
}
@keyframes bloom-safe { to { opacity: 1; } }
@keyframes bloom-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes bloom-drift {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1.8deg); }
  75% { transform: rotate(-1.8deg); }
}

/* ──────────────────────────────────────────────────── 6 The petal window ──
   <figure class="window c-gold" data-window> … </figure>     see src/partials/window.html
   Still (no scripts, reduced motion): the photograph in one large shape of the mark with its
   caption: an upright petal on phones, the leaf from 48rem. With motion on phones the petal opens
   as it enters. From 48rem with motion, bloom.js adds is-pinned: the stage becomes one screen, the
   whole mark stands on it and the picture is cut to one of its petals, which grows as the page is
   scrolled until the photograph is the screen. */
.window {
  display: grid;
  justify-items: center;
  margin: 0;
  padding: var(--section-pad) var(--gutter);
}
.window__stage {
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 3vh, 2rem);
  inline-size: 100%;
  max-inline-size: var(--container);
}
.window__bloom { display: none; }
.window__petal {
  position: relative;
  block-size: min(37rem, 72svh);
  aspect-ratio: 20.648 / 45.125;
  background: var(--c);
  -webkit-mask: url("../img/art/mask-petal.svg") center / 100% 100% no-repeat;
  mask: url("../img/art/mask-petal.svg") center / 100% 100% no-repeat;
}
.window__pic {
  position: absolute;
  inset: 5px;
  display: block;
  -webkit-mask: url("../img/art/mask-petal.svg") center / 100% 100% no-repeat;
  mask: url("../img/art/mask-petal.svg") center / 100% 100% no-repeat;
}
.window__pic img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--window-px, 50%) var(--window-py, 50%);
  background: var(--ph, transparent);
}
.window__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .8rem;
  max-inline-size: 36rem;
}
.window__bud { --size: 1.5rem; grid-row: 1 / span 2; margin-block-start: .15rem; vertical-align: 0; }
.window__cap { grid-column: 2; color: var(--fg-muted); line-height: var(--lh-text); }
.window__role { grid-column: 2; color: var(--heading); font-weight: var(--fw-strong); line-height: var(--lh-text); }
@media (min-width: 48rem) {
  .window__petal {
    inline-size: min(100%, 66rem);
    block-size: auto;
    aspect-ratio: 3 / 2;
    -webkit-mask-image: url("../img/art/mask-leaf.svg");
    mask-image: url("../img/art/mask-leaf.svg");
  }
  .window__pic { inset: 0; -webkit-mask: none; mask: none; }
  .window__pic img { object-position: var(--window-fx, 50%) var(--window-fy, 50%); }
  .window__caption { justify-self: start; }
}
/* Phones, with motion: the petal waits out of sight until it opens (bloom.js arms it and opens it). */
.window.is-armed:not(.is-open) .window__petal,
.window.is-armed:not(.is-open) .window__caption { visibility: hidden; }

/* The pinned scene (bloom.js sets is-pinned, and takes it away again). */
.window.is-pinned { display: block; padding: 0; }
.window.is-pinned .window__stage {
  position: relative;
  display: block;
  max-inline-size: none;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--bone);
}
.window.is-pinned .window__bloom {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}
.window.is-pinned .window__petal {
  position: absolute;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  aspect-ratio: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
}
.window.is-pinned .window__pic { inset: 0; }
.window.is-pinned .window__pic img { object-position: var(--window-fx, 50%) var(--window-fy, 50%); }
.window.is-pinned .window__caption {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-end: calc(clamp(1.25rem, 5vh, 3rem) + var(--dock-h, 0px));   /* clear of the language suggestion bar */
  inline-size: min(36rem, calc(100% - 2 * var(--gutter)));
  max-inline-size: none;
  padding: 1.35rem 1.6rem 1.5rem;
  border-radius: var(--r-row);
  border-start-end-radius: 3rem;
  border-end-start-radius: 3rem;
  background: var(--white);
  color: var(--ink);
}
[dir="rtl"] .window.is-pinned .window__caption { border-radius: var(--r-row); border-start-start-radius: 3rem; border-end-end-radius: 3rem; }
.window.is-pinned .window__cap { color: var(--slate); }
.window.is-pinned .window__role { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--fw-display); line-height: var(--lh-sub); }