/* Page-builder blocks. One style sheet for the public site and for the live previews of the block editor in the admin
   panel, so an editor sees exactly what the site shows. Design tokens come from im.css (and the brand settings).
   A block is ".page-block" with: block-{type}, style-{text|heading|quote|checklist|steps|stats}, accent-{colour},
   optionally is-framed frame-{side|top|icon|box|band} (side, top and icon are cards: is-card), and for text beside a
   picture or a video: has-image media-{start|end|top|bottom} media-{small|medium|large}. Settings of the text that differ
   from the default add tx-font-*, tx-size-*, tx-ink tx-ink-*, tx-last-* (justified text), tx-lead-*, a border
   (has-border bd-{thin|medium|thick} bd-{solid|dashed|dotted|double} bdc-*) and rd-* for the corners (end of this file).
   Every picture fills the width of its place and keeps its own proportions: its height follows, nothing is cut or limited. */
.prose { font-size: var(--im-text-prose); line-height: 2.05; overflow-wrap: anywhere; }
.prose p { margin-block-end: var(--im-space-5); }
.prose p:last-child { margin-block-end: 0; }

.page-blocks { display: grid; gap: var(--im-space-8); margin-block-start: var(--im-space-8); }
.page-block {
  --block-accent: var(--im-navy-950); --block-ink: var(--im-navy-950); --block-on: #fff; --block-tint: #eef1f6; --block-line: #cfd6e4; --block-mark: var(--im-gold-500);
  display: grid; gap: var(--im-space-5); border-radius: var(--im-radius-lg); min-inline-size: 0;
}
.page-block.accent-gold { --block-accent: var(--im-gold-500); --block-ink: var(--im-gold-700); --block-on: var(--im-navy-950); --block-tint: var(--im-gold-50); --block-line: var(--im-gold-200); --block-mark: var(--im-gold-500); }
.page-block.accent-blue { --block-accent: var(--im-primary); --block-ink: var(--im-blue-800); --block-on: #fff; --block-tint: var(--im-blue-50); --block-line: var(--im-blue-100); --block-mark: var(--im-primary); }
.page-block.accent-amber { --block-accent: var(--im-warning); --block-ink: var(--im-warning); --block-on: #fff; --block-tint: var(--im-warning-bg); --block-line: #f0d9ae; --block-mark: var(--im-warning); }
.page-block.accent-black { --block-accent: #111; --block-ink: #111; --block-on: #fff; --block-tint: #f1f1f1; --block-line: #d2d2d2; --block-mark: #111; }

/* Backgrounds of a block without a frame (older option, still available under "more settings"). The accent background takes
   the colour of the block (its tint and line), so changing «رنگ بلوک» changes it too; gold is the gold block colour. */
.page-block.tone-muted { background: var(--im-surface); border: 1px solid var(--im-border); padding: var(--im-space-6); }
.page-block.tone-accent { background: linear-gradient(160deg, var(--block-tint), var(--im-surface)); border: 1px solid var(--block-line); padding: var(--im-space-6); }

/* Text of a block and its heading: a short bar in the brand colour marks every heading. */
.page-block-text { display: grid; gap: var(--im-space-3); justify-items: start; align-content: start; min-inline-size: 0; }
.page-block-text > .prose, .page-block-text > ul, .page-block-text > ol, .page-block-text > figure { justify-self: stretch; }
.page-block-title { position: relative; margin: 0; padding-inline-start: var(--im-space-4); font-size: var(--im-text-2xl); color: var(--im-navy-950); }
.page-block-title::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .3em; inline-size: 5px; border-radius: 3px; background: var(--block-mark); }
.page-block.align-center { text-align: center; justify-items: center; }
.page-block.align-center .page-block-text { justify-items: center; }
.page-block.align-center .prose { margin-inline: auto; }
.page-block.align-center .page-block-title { padding-inline-start: 0; padding-block-end: var(--im-space-3); }
.page-block.align-center .page-block-title::before { inset-block: auto 0; inset-inline: 0; margin-inline: auto; inline-size: 3.5rem; block-size: 4px; }
/* Left (end): the heading mark moves to the other side. */
.page-block.align-end { text-align: end; justify-items: end; }
.page-block.align-end .page-block-text { justify-items: end; }
.page-block.align-end .page-block-title { padding-inline-start: 0; padding-inline-end: var(--im-space-4); }
.page-block.align-end .page-block-title::before { inset-inline-start: auto; inset-inline-end: 0; }
.page-block-icon { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--im-radius-md); background: var(--block-tint); color: var(--block-ink); flex: none; }
.page-block-icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.page-block-more { display: inline-flex; align-items: center; gap: var(--im-space-1); font-size: var(--im-text-sm); font-weight: 600; color: var(--im-blue-800); text-decoration: none; }
.page-block-more:hover { text-decoration: underline; }
.page-block-more .icon { transition: transform var(--im-duration); }
.page-block-more:hover .icon { transform: translateX(-3px); }

/* Section heading: a large coloured title on a line that fades out. */
.page-block.style-heading { gap: var(--im-space-2); }
.page-block.style-heading .page-block-text { justify-items: stretch; }
.page-block.style-heading .page-block-title { padding-inline-start: 0; padding-block-end: var(--im-space-3); font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.25rem); color: var(--block-ink); }
.page-block.style-heading .page-block-title::before { inset-block: auto 0; inset-inline-start: 0; inline-size: 4.5rem; block-size: 5px; }
.page-block.style-heading .page-block-title::after { content: ""; position: absolute; inset-block-end: 2px; inset-inline: 5.25rem 0; block-size: 1px; background: var(--im-border); }
.page-block.style-heading .prose { color: var(--im-text-secondary); font-size: var(--im-text-lg); }
.page-block.style-heading.align-center .page-block-title::before { inset-inline: 0; }
.page-block.style-heading.align-center .page-block-title::after { display: none; }
.page-block.style-heading.align-end .page-block-title { padding-inline-end: 0; }
.page-block.style-heading.align-end .page-block-title::before { inset-inline: auto 0; }
.page-block.style-heading.align-end .page-block-title::after { inset-inline: 0 5.25rem; }
.page-block.style-heading .page-block-icon { background: var(--block-accent); color: var(--block-on); }

/* Quote: the sentence in large type next to a round quotation mark, with who said it underneath. */
.block-quote { position: relative; margin: 0; padding: var(--im-space-6) var(--im-space-6) var(--im-space-6) var(--im-space-6); padding-inline-start: 5.75rem; border-radius: var(--im-radius-lg); background: var(--block-tint); overflow: hidden; }
.block-quote::after { content: ""; position: absolute; inset-inline-end: -3.5rem; inset-block-end: -3.5rem; inline-size: 10rem; block-size: 10rem; border-radius: 50%; border: 1.5rem solid color-mix(in srgb, var(--block-accent) 9%, transparent); }
.block-quote-mark { position: absolute; inset-inline-start: var(--im-space-5); inset-block-start: var(--im-space-5); display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--block-accent); color: var(--block-on); }
.block-quote-mark .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.block-quote blockquote { position: relative; z-index: 1; margin: 0; font-size: var(--im-text-xl); font-weight: 600; line-height: 1.95; color: var(--im-navy-950); }
.block-quote blockquote p { margin: 0 0 var(--im-space-2); }
.block-quote blockquote p:last-child { margin: 0; }
.block-quote figcaption { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--im-space-2); margin-block-start: var(--im-space-4); font-size: var(--im-text-sm); font-weight: 700; color: var(--block-ink); }
.block-quote figcaption::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: var(--block-accent); }

/* Lists read from the lines of the text: ticks, numbered steps and key figures. */
.block-checklist, .block-steps, .block-stats { list-style: none; margin: 0; padding: 0; }
.block-checklist { display: grid; gap: var(--im-space-3); }
.block-checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--im-space-3); align-items: start; font-size: var(--im-text-prose); line-height: 1.9; }
.block-check { display: grid; place-items: center; inline-size: 1.65rem; block-size: 1.65rem; margin-block-start: .2rem; border-radius: 50%; background: var(--block-tint); color: var(--block-ink); }
.block-check .icon { inline-size: 1rem; block-size: 1rem; stroke-width: 2.6; }
.block-checklist strong, .block-steps strong { color: var(--im-navy-950); }
.block-checklist .block-line-rest::before { content: " — "; color: var(--im-text-secondary); }
.block-steps { counter-reset: block-step; display: grid; }
.block-steps li { counter-increment: block-step; position: relative; min-block-size: 2.6rem; padding-inline-start: 3.6rem; padding-block-end: var(--im-space-5); font-size: var(--im-text-prose); line-height: 1.9; }
.block-steps li::before { content: counter(block-step, persian); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--block-accent); color: var(--block-on); font-weight: 700; box-shadow: 0 0 0 4px var(--block-tint); }
.block-steps li::after { content: ""; position: absolute; inset-inline-start: calc(1.3rem - 1px); inset-block: 3rem .25rem; inline-size: 2px; background: var(--block-line); }
.block-steps li:last-child { padding-block-end: 0; }
.block-steps li:last-child::after { display: none; }
.block-steps li > span { display: block; padding-block-start: .3rem; }
.block-steps strong { display: block; }
.block-stats { display: grid; gap: var(--im-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.block-stats li { display: grid; gap: var(--im-space-1); align-content: center; padding: var(--im-space-5) var(--im-space-3); border-radius: var(--im-radius-lg); background: var(--im-surface); border: 1px solid var(--im-border); border-block-end: 4px solid var(--block-accent); text-align: center; }
.block-stat-value { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); font-weight: 800; line-height: 1.5; color: var(--block-ink); }
.block-stat-label { font-size: var(--im-text-sm); color: var(--im-text-secondary); }

/* Frames. Cards: an accent line at the side (like the clarification card) or on top (like the statement card). */
.page-block.is-framed { padding: var(--im-space-5) var(--im-space-6); gap: var(--im-space-4); overflow-wrap: anywhere; }
.page-block.is-framed .page-block-title { padding-inline-start: 0; font-size: var(--im-text-xl); }
.page-block.is-framed .page-block-title::before { display: none; }
.page-block.is-card { background: var(--im-surface); border: 1px solid var(--im-border); transition: border-color var(--im-duration), box-shadow var(--im-duration); }
.page-block.is-card.tone-accent { background: linear-gradient(160deg, var(--block-tint), var(--im-surface)); }
.page-block.is-card:hover { box-shadow: var(--im-shadow-md); }
.page-block.frame-side { border-inline-start: 5px solid var(--block-accent); }
.page-block.frame-top { border-block-start: 4px solid var(--block-accent); }
/* Icon card: a large round icon on top, then the title and the text; a row of them presents short features. */
.page-block.frame-icon { border-block-end: 3px solid var(--block-accent); }
.page-block.frame-icon > .page-block-text > .page-block-icon { inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: var(--im-space-1); border-radius: 50%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--block-tint) 50%, transparent); }
.page-block.frame-icon > .page-block-text > .page-block-icon .icon { inline-size: 1.75rem; block-size: 1.75rem; }
.page-block.frame-icon.icon-square > .page-block-text > .page-block-icon { border-radius: var(--im-radius-md); }
.page-block.frame-icon.tone-muted { background: var(--block-tint); border-color: var(--block-line); }
.page-block.frame-icon.tone-muted > .page-block-text > .page-block-icon { background: var(--im-surface); }
/* Icon beside the title: the icon takes the first column, the title, text and link the second. */
.page-block-deck > .page-block.frame-icon.icon-side > .page-block-text, .page-block.frame-icon.icon-side > .page-block-text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--im-space-4); align-content: start; align-items: start; justify-items: start; }
.page-block.frame-icon.icon-side > .page-block-text > * { grid-column: 2; }
.page-block.frame-icon.icon-side > .page-block-text > .page-block-icon { grid-column: 1; grid-row: 1 / span 3; margin-block-end: 0; }
.page-block-deck > .page-block.frame-icon.icon-side .page-block-more { margin-block-start: 0; }
.page-block.is-card .prose { color: var(--im-text-secondary); }
.page-block.is-card .page-block-media img { border-radius: var(--im-radius-md); }
/* Box: a tinted note with its icon beside the text. */
.page-block.frame-box { background: var(--block-tint); border: 1px solid var(--block-line); }
.page-block.frame-box > .page-block-text { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--im-space-4); }
.page-block.frame-box > .page-block-text > * { grid-column: 2; }
.page-block.frame-box > .page-block-text > .page-block-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; background: var(--block-accent); color: var(--block-on); }
.page-block.frame-box .block-check { background: var(--im-surface); }
.page-block.frame-box .page-block-title { color: var(--block-ink); }
/* Band: the main message on the brand colour, with two quiet circles behind it. */
.page-block.frame-band { position: relative; overflow: hidden; padding: var(--im-space-8); background: linear-gradient(135deg, var(--block-accent), color-mix(in srgb, var(--block-accent) 76%, #000)); color: var(--block-on); }
.page-block.frame-band::before { content: ""; position: absolute; inset-inline-end: -4rem; inset-block-start: -6rem; inline-size: 15rem; block-size: 15rem; border-radius: 50%; background: var(--im-glass-1); }
.page-block.frame-band::after { content: ""; position: absolute; inset-inline-end: 6rem; inset-block-end: -4.5rem; inline-size: 9rem; block-size: 9rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--im-gold-500) 45%, transparent); }
.page-block.frame-band > * { position: relative; z-index: 1; }
/* The keyboard ring on a band takes the colour of its text, which keeps 4.5:1 on any accent. */
.page-block.frame-band { --im-focus: currentColor; }
.page-block.frame-band .page-block-title, .page-block.frame-band .prose, .page-block.frame-band strong, .page-block.frame-band .block-quote blockquote, .page-block.frame-band .block-quote figcaption, .page-block.frame-band .block-stat-value, .page-block.frame-band .block-stat-label { color: inherit; }
.page-block.frame-band .page-block-title { font-size: var(--im-text-2xl); }
.page-block.frame-band .prose { opacity: .92; }
.page-block.frame-band .page-block-icon, .page-block.frame-band .block-check { background: var(--im-glass-2); color: inherit; }
.page-block.frame-band .block-steps li::before { background: #fff; color: var(--im-navy-950); box-shadow: 0 0 0 4px var(--im-glass-3); }
.page-block.frame-band .block-steps li::after { background: rgba(255, 255, 255, .32); }
.page-block.frame-band .block-stats li { background: var(--im-glass-1); border-color: var(--im-glass-3); border-block-end-color: var(--im-gold-500); }
.page-block.frame-band .block-checklist .block-line-rest::before { color: inherit; }
.page-block.frame-band .block-quote-mark { background: var(--im-glass-2); color: inherit; }
.page-block-cta { background: #fff; color: var(--im-navy-950); border-color: transparent; font-weight: 700; }
.page-block-cta:hover:not([disabled]) { background: var(--im-gold-50); color: var(--im-navy-950); }
/* A quote inside a frame gives up its own background. */
.page-block.is-framed .block-quote { padding: 0; padding-inline-start: 4.25rem; background: transparent; overflow: visible; }
.page-block.is-framed .block-quote::after { display: none; }
.page-block.is-framed .block-quote-mark { inset-inline-start: 0; inset-block-start: 0; }

/* Cards of one frame that follow each other stand side by side. */
.page-block-deck { display: grid; gap: var(--im-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.page-block-deck > .page-block { display: flex; flex-direction: column; }
.page-block-deck > .page-block > .page-block-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.page-block-deck > .page-block.align-center > .page-block-text { align-items: center; }
.page-block-deck > .page-block.align-end > .page-block-text { align-items: flex-end; }
.page-block-deck .page-block-more { margin-block-start: auto; padding-block-start: var(--im-space-2); }

/* Pictures and videos. Beside a text they stand on a tinted shape that is pushed out of their corner. */
.page-block-media { margin: 0; min-inline-size: 0; }
/* A picture is limited by width only: whatever its size, it fills the width of its place and its height follows its own
   proportions, so it is never cut, squashed or given a height limit. */
.page-block .page-block-media img { display: block; inline-size: 100%; block-size: auto; max-block-size: none; border-radius: var(--im-radius-lg); }
.page-block-media .gallery-link { display: block; aspect-ratio: auto; border-radius: var(--im-radius-lg); overflow: hidden; background: transparent; }
.page-block-media figcaption { display: flex; align-items: center; gap: var(--im-space-2); margin-block-start: var(--im-space-3); font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.page-block-media figcaption::before { content: ""; flex: none; inline-size: 1.25rem; block-size: 2px; background: var(--block-mark); }
.page-block.block-image .page-block-media, .page-block.block-video .page-block-media { inline-size: 100%; max-inline-size: 56rem; margin-inline: auto; }
.page-block.block-image.media-small .page-block-media, .page-block.block-video.media-small .page-block-media { max-inline-size: 34rem; }
.page-block.block-image.media-large .page-block-media, .page-block.block-video.media-large .page-block-media { max-inline-size: none; }
.page-block.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--im-space-8); }
.page-block.has-image.media-small { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.page-block.has-image.media-large { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.page-block.has-image.media-end > .page-block-media { order: 2; }
.page-block.has-image.media-end.media-small { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.page-block.has-image.media-end.media-large { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.page-block.has-image.media-top, .page-block.has-image.media-bottom { grid-template-columns: minmax(0, 1fr); }
.page-block.has-image.media-bottom > .page-block-media { order: 2; }
.page-block.has-image.media-start:not(.is-framed) > .page-block-media { padding-inline-start: 14px; padding-block-end: 14px; }
.page-block.has-image.media-end:not(.is-framed) > .page-block-media { padding-inline-end: 14px; padding-block-end: 14px; }
.page-block.has-image.media-start:not(.is-framed) > .page-block-media > .gallery-link, .page-block.has-image.media-start:not(.is-framed) > .page-block-media > .video-frame { box-shadow: 14px 14px 0 var(--block-tint); }
.page-block.has-image.media-end:not(.is-framed) > .page-block-media > .gallery-link, .page-block.has-image.media-end:not(.is-framed) > .page-block-media > .video-frame { box-shadow: -14px 14px 0 var(--block-tint); }
@media screen and (max-width: 1000px) {
  .page-block.has-image, .page-block.has-image.media-small, .page-block.has-image.media-large, .page-block.has-image.media-end.media-small, .page-block.has-image.media-end.media-large { grid-template-columns: minmax(0, 1fr); }
  .page-block.has-image.media-end > .page-block-media { order: 0; }
  .page-block.frame-band { padding: var(--im-space-6); }
  .block-quote { padding: var(--im-space-5); padding-block-start: 5rem; }
  .page-block.is-framed .block-quote { padding: 3.75rem 0 0; }
}
/* Bold face (im.css: --im-font-bold) for the parts of a block set in a weight of 600 or more. */
.page-block-more, .block-quote blockquote, .block-quote figcaption, .block-steps li::before, .block-stat-value, .page-block-cta { font-family: var(--im-font-bold); }

/* Album: pictures one after another like a slide post. The row scrolls and snaps by itself (swipe, trackpad, and without
   JavaScript); album.js marks it .is-ready and adds the buttons, the counter, the dots or small pictures and autoplay. Every
   picture keeps the frame of the album (ratio-*), so nothing moves while they load. */
.album { --album-ratio: 1 / 1; --album-max: 40rem; position: relative; display: grid; gap: var(--im-space-2); inline-size: 100%; max-inline-size: var(--album-max); margin-inline: auto; min-inline-size: 0; }
.album.ratio-4x5 { --album-ratio: 4 / 5; --album-max: 34rem; }
.album.ratio-3x4 { --album-ratio: 3 / 4; --album-max: 32rem; }
.album.ratio-16x9 { --album-ratio: 16 / 9; --album-max: 56rem; }
/* The shape of its pictures: every picture takes the width of the album and its own height, so nothing is cut. */
.album.ratio-auto { --album-max: 56rem; }
.album.ratio-auto .album-track { align-items: flex-start; }
.album.ratio-auto .album-link { aspect-ratio: auto; }
.album.ratio-auto .album-link img { block-size: auto; }
.album.album-strip, .page-block.has-image > .album { --album-max: none; }
.album-viewport { position: relative; min-inline-size: 0; }
.album-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; border-radius: var(--im-radius-lg); }
.album.is-ready .album-track { scrollbar-width: none; }
.album.is-ready .album-track::-webkit-scrollbar { display: none; }
.album-track:focus-visible { outline: 3px solid var(--im-focus); outline-offset: 3px; }
.album-slide { flex: 0 0 100%; margin: 0; min-inline-size: 0; scroll-snap-align: start; scroll-snap-stop: always; position: relative; }
.album-link { display: block; aspect-ratio: var(--album-ratio); overflow: hidden; border-radius: var(--im-radius-lg); background: var(--block-tint); cursor: zoom-in; -webkit-user-drag: none; }
.album-link:focus-visible { outline: 3px solid var(--im-focus); outline-offset: -3px; }
.album-link img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--im-duration-slow) var(--im-ease); }
.album.fit-contain .album-link img { object-fit: contain; }
@media (hover: hover) { .album-link:hover img { transform: scale(1.02); } }
.album-caption { display: grid; gap: 2px; padding: var(--im-space-3) var(--im-space-1) 0; font-size: var(--im-text-sm); line-height: 1.85; color: var(--im-text-secondary); }
.album-caption strong { font-family: var(--im-font-bold); font-size: var(--im-text-md); color: var(--im-navy-950); }
/* Titles over the picture sit on a shade of the brand navy, so they read on any photo. */
.album.captions-overlay .album-caption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--im-space-10) var(--im-space-5) var(--im-space-4); border-end-start-radius: var(--im-radius-lg); border-end-end-radius: var(--im-radius-lg); background: linear-gradient(to bottom, transparent, rgba(13, 24, 50, .86)); color: var(--im-on-image); pointer-events: none; }
.album.captions-overlay .album-caption strong { color: #fff; font-size: var(--im-text-lg); }
/* Several pictures at once: the edge of the next one shows that the row goes on. */
.album.album-strip .album-track { gap: var(--im-space-3); }
.album.album-strip .album-slide { flex-basis: 85%; }
@media screen and (min-width: 641px) { .album.album-strip .album-slide { flex-basis: calc((100% - 2 * var(--im-space-3)) / 2.5); } }

.album-count, .album-step, .album-toggle { z-index: 2; }
.album-count { position: absolute; inset-block-start: var(--im-space-3); inset-inline-end: var(--im-space-3); padding: 2px var(--im-space-3); border-radius: var(--im-radius-pill); background: rgba(13, 24, 50, .72); color: #fff; font-size: var(--im-text-xs); font-variant-numeric: tabular-nums; pointer-events: none; }
.album-step, .album-toggle { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid var(--im-glass-4); border-radius: 50%; background: var(--im-glass-solid); color: var(--im-navy-950); box-shadow: var(--im-shadow-md); cursor: pointer; transition: opacity var(--im-duration), transform var(--im-duration), background var(--im-duration); }
.album-step[hidden], .album-toggle[hidden], .album-count[hidden] { display: none; }
.album-step { position: absolute; inset-block-start: var(--album-arrow-top, 45%); translate: 0 -50%; opacity: .88; }
.album-prev { inset-inline-start: var(--im-space-3); }
.album-next { inset-inline-end: var(--im-space-3); }
.album-step:hover, .album-toggle:hover { opacity: 1; background: #fff; transform: scale(1.06); }
.album-step:disabled { opacity: 0; visibility: hidden; }
.album-step:focus-visible, .album-toggle:focus-visible, .album-dot:focus-visible, .album-thumb:focus-visible { outline: 3px solid var(--im-focus); outline-offset: 2px; }
.album-step .icon, .album-toggle .icon { inline-size: 1.3rem; block-size: 1.3rem; }
.album-toggle { position: absolute; inset-block-start: var(--im-space-3); inset-inline-start: var(--im-space-3); inline-size: 2.5rem; block-size: 2.5rem; }
/* Autoplay: a thin bar on top of the picture shows the time left before the next one. */
.album-progress { position: absolute; inset-block-start: 0; inset-inline: var(--im-space-4); block-size: 3px; border-radius: 0 0 3px 3px; overflow: hidden; background: rgba(255, 255, 255, .35); pointer-events: none; z-index: 1; }
.album-progress > span { display: block; block-size: 100%; inline-size: 100%; transform: scaleX(0); transform-origin: right; background: var(--block-mark); }
.album.is-playing .album-progress > span { animation: album-progress var(--album-seconds, 5s) linear forwards; }
@keyframes album-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Dots like a slide post: the current one is a short bar; with many pictures the far ones shrink and the farthest hide. */
.album-dots { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-block-size: 2.75rem; }
.album-dot { display: grid; place-items: center; inline-size: 1.6rem; block-size: 2.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.album-dot::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: var(--im-radius-pill); background: color-mix(in srgb, var(--im-navy-950) 24%, transparent); transition: inline-size var(--im-duration), background var(--im-duration), transform var(--im-duration); }
.album-dot:hover::before { background: color-mix(in srgb, var(--im-navy-950) 45%, transparent); }
.album-dot[aria-current="true"]::before { inline-size: 1.35rem; background: var(--block-accent); }
.album-dot[data-far="1"]::before { transform: scale(.65); }
.album-dot[data-far="2"] { display: none; }
.album-thumbs { display: flex; gap: var(--im-space-2); overflow-x: auto; padding: 3px; scrollbar-width: thin; }
.album-thumb { flex: none; inline-size: 4.25rem; block-size: 4.25rem; padding: 0; border: 2px solid transparent; border-radius: var(--im-radius-md); overflow: hidden; background: var(--block-tint); cursor: pointer; opacity: .6; transition: opacity var(--im-duration), border-color var(--im-duration); }
.album-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.album-thumb:hover { opacity: .9; }
.album-thumb[aria-current="true"] { opacity: 1; border-color: var(--block-accent); }
/* Until album.js is ready the bar below keeps its place, so the page does not move when it appears. */
.album:not(.is-ready) [data-album-controls] { visibility: hidden; }
.album-credit { display: inline-flex; align-items: center; gap: var(--im-space-2); margin: 0; font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.album-credit .icon { inline-size: 1rem; block-size: 1rem; color: var(--block-ink); }
.page-block.block-carousel.album-text-top { gap: var(--im-space-4); }
.page-block.has-image.media-end > .album { order: 2; }
.page-block.frame-band .album-caption, .page-block.frame-band .album-caption strong, .page-block.frame-band .album-credit, .page-block.frame-band .album-credit .icon { color: inherit; }
.page-block.frame-band .album-dot::before { background: rgba(255, 255, 255, .45); }
.page-block.frame-band .album-dot[aria-current="true"]::before { background: var(--im-gold-500); }
.page-block.frame-band .album-link, .page-block.frame-band .album-thumb { background: var(--im-glass-1); }
@media screen and (max-width: 1000px) {
  .page-block.has-image.media-end > .album { order: 0; }
  /* On phones the title and text of an album always come first. */
  .page-block.block-carousel.has-image > .page-block-text { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .album-progress { display: none; }
  .album-link img, .album-step, .album-dot::before { transition: none; }
}
@media print {
  /* On paper every picture of an album is shown, in a grid with its title. */
  .album { max-inline-size: none; }
  .album-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .album-slide { break-inside: avoid; }
  .album-step, .album-count, .album-toggle, .album-progress, .album-dots, .album-thumbs { display: none !important; }
  .album.captions-overlay .album-caption { position: static; background: none; color: inherit; padding: 4px 0 0; }
  .album.captions-overlay .album-caption strong { color: inherit; font-size: inherit; }
}

/* ----- Text settings of a block (BlockText). Only settings that differ from the default add a class, so a block without them
   looks as it did. A solid band keeps its own light text, so it never gets a text colour. ----- */
/* Fonts of the site: the text font, the bold font, or the display font of the brand (the bold one when none is uploaded). */
.page-block.tx-font-body :is(.page-block-text, .page-block-title, .page-block-text strong, .album-caption strong) { font-family: var(--im-font); }
/* The bold and display fonts are set bold as well, so they read bold even where the brand has no bold font of its own. */
.page-block.tx-font-bold :is(.page-block-text, .page-block-title, .page-block-text strong, .block-quote blockquote, .album-caption strong) { font-family: var(--im-font-bold); font-weight: 700; }
.page-block.tx-font-display :is(.page-block-text, .page-block-title, .page-block-text strong, .block-quote blockquote, .album-caption strong) { font-family: var(--im-font-display, var(--im-font-bold)); font-weight: 700; }
/* Three sizes: small and large scale the text, the lists, the quote and the heading together. */
.page-block.tx-size-small :is(.prose, .block-checklist li, .block-steps li, .album-caption) { font-size: var(--im-text-md); }
.page-block.tx-size-small .page-block-title { font-size: var(--im-text-lg); }
.page-block.tx-size-small .block-quote blockquote { font-size: var(--im-text-lg); }
.page-block.style-heading.tx-size-small .page-block-title { font-size: var(--im-text-xl); }
.page-block.tx-size-large :is(.prose, .block-checklist li, .block-steps li, .album-caption) { font-size: 1.25rem; }
.page-block.tx-size-large .page-block-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
.page-block.tx-size-large .block-quote blockquote { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.7rem); }
.page-block.style-heading.tx-size-large .page-block-title { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); }
/* Colour of the text: black, navy, the colour of the block or grey, for the heading, the text, the lists and the quote. */
.page-block.tx-ink-black { --tx-ink: #000; }
.page-block.tx-ink-navy { --tx-ink: var(--im-navy-950); }
.page-block.tx-ink-accent { --tx-ink: var(--block-ink); }
.page-block.tx-ink-muted { --tx-ink: var(--im-text-secondary); }
.page-block.tx-ink :is(.page-block-title, .prose, .block-checklist li, .block-steps li, .page-block-text strong, .block-quote blockquote, .block-stat-label, .album-caption, .album-caption strong, .page-block-media figcaption) { color: var(--tx-ink); }
/* Justified text: every line reaches both edges; the last line stands right, centred, left or stretched as well. Headings
   keep their place. */
.page-block.align-justify { --tx-last: start; }
.page-block.tx-last-center { --tx-last: center; }
.page-block.tx-last-end { --tx-last: end; }
.page-block.tx-last-justify { --tx-last: justify; }
.page-block.align-justify :is(.prose, .block-checklist li > span:not(.block-check), .block-steps li > span, .block-quote blockquote, .album-caption) { text-align: justify; text-align-last: var(--tx-last); text-justify: inter-word; }
/* Line spacing. */
.page-block.tx-lead-tight :is(.prose, .block-checklist li, .block-steps li, .block-quote blockquote) { line-height: 1.7; }
.page-block.tx-lead-loose :is(.prose, .block-checklist li, .block-steps li, .block-quote blockquote) { line-height: 2.45; }
/* Border: width, line and colour; a block without a frame gets room inside it. A card keeps its accent line. A double line
   needs three pixels to show both lines. */
.page-block.has-border { border-style: solid; border-color: var(--tx-border, var(--block-accent)); }
.page-block.bd-thin { border-width: 1px; }
.page-block.bd-medium { border-width: 2px; }
.page-block.bd-thick { border-width: 4px; }
.page-block.bd-dashed { border-style: dashed; }
.page-block.bd-dotted { border-style: dotted; }
.page-block.bd-double { border-style: double; }
.page-block.bd-double.bd-thin { border-width: 3px; }
.page-block.bd-double.bd-medium { border-width: 4px; }
.page-block.bd-double.bd-thick { border-width: 6px; }
.page-block.bdc-accent { --tx-border: var(--block-accent); }
.page-block.bdc-black { --tx-border: #111; }
.page-block.bdc-gray { --tx-border: var(--im-border-strong); }
.page-block.bdc-gold { --tx-border: var(--im-gold-500); }
.page-block.has-border:not(.is-framed) { padding: var(--im-space-5) var(--im-space-6); }
.page-block.has-border.frame-side { border-inline-start: 5px solid var(--block-accent); }
.page-block.has-border.frame-top { border-block-start: 4px solid var(--block-accent); }
.page-block.has-border.frame-icon { border-block-end: 3px solid var(--block-accent); }
/* Corners of the block (its border, background or card). */
.page-block.rd-none { border-radius: 0; }
.page-block.rd-small { border-radius: var(--im-radius-sm); }
.page-block.rd-large { border-radius: calc(var(--im-radius-lg) * 2); }
/* Width: a narrower block stands in the middle of the column; cards in a row keep their cell. */
.page-block.w-wide { inline-size: 100%; max-inline-size: 56rem; margin-inline: auto; }
.page-block.w-narrow { inline-size: 100%; max-inline-size: 42rem; margin-inline: auto; }
.page-block-deck > .page-block.w-wide, .page-block-deck > .page-block.w-narrow { max-inline-size: none; }
/* Room inside a frame, a background or a border. */
.page-block.pad-compact:is(.is-framed, .has-border, .tone-muted, .tone-accent) { padding: var(--im-space-3) var(--im-space-4); }
.page-block.pad-spacious:is(.is-framed, .has-border, .tone-muted, .tone-accent) { padding: var(--im-space-8) var(--im-space-10); }
/* Shadow under the block. */
.page-block.sh-soft { box-shadow: var(--im-shadow-md); }
.page-block.sh-strong { box-shadow: var(--im-shadow-lg); }
/* The caption of a picture or a video follows the font and size of the block as well. */
.page-block.tx-font-body .page-block-media figcaption { font-family: var(--im-font); }
.page-block.tx-font-bold .page-block-media figcaption { font-family: var(--im-font-bold); font-weight: 700; }
.page-block.tx-font-display .page-block-media figcaption { font-family: var(--im-font-display, var(--im-font-bold)); font-weight: 700; }
.page-block.tx-size-small .page-block-media figcaption { font-size: var(--im-text-xs); }
.page-block.tx-size-large .page-block-media figcaption { font-size: var(--im-text-md); }
/* Key figures follow the size of the block. */
.page-block.tx-size-small .block-stat-value { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); }
.page-block.tx-size-large .block-stat-value { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
@media screen and (max-width: 640px) {
  .page-block.has-border:not(.is-framed) { padding: var(--im-space-4); }
  .page-block.pad-spacious:is(.is-framed, .has-border, .tone-muted, .tone-accent) { padding: var(--im-space-6) var(--im-space-5); }
}