/* Photo grid: <div class="photo-grid" markdown="1"> with Markdown images (needs pages.markdown.extra) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.photo-grid p { margin: 0; }
.photo-grid img { width: 100%; height: 12rem; object-fit: cover; border-radius: 0.5rem; }

/* Flags (flag-icons, 4x3 SVG in flags/4x3: add a rule per flag used) */
.fi { display: inline-block; width: 1.35rem; height: 1.0125rem; border-radius: 2px; vertical-align: middle; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35); }
.fi-xx { background-image: url('../flags/4x3/xx.svg'); }
.fi-gp-upl { background-image: url('../flags/4x3/gp-upl.svg'); }
.fi-gb { background-image: url('../flags/4x3/gb.svg'); }
.fi-fr { background-image: url('../flags/4x3/fr.svg'); }
.fi-be { background-image: url('../flags/4x3/be.svg'); }
.fi-gp { background-image: url('../flags/4x3/gp.svg'); }
.fi-nl { background-image: url('../flags/4x3/nl.svg'); }
.fi-de { background-image: url('../flags/4x3/de.svg'); }
.fi-es { background-image: url('../flags/4x3/es.svg'); }
.fi-it { background-image: url('../flags/4x3/it.svg'); }
.fi-pt { background-image: url('../flags/4x3/pt.svg'); }
.fi-us { background-image: url('../flags/4x3/us.svg'); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The right part of the top bar: language, then light/dark, aligned on the same line */
.navbar-section.actions { display: flex; align-items: center; gap: 0.9rem; }
.navbar-section.actions .header-langswitcher { display: flex; align-items: center; margin: 0; }

/* Language switcher: flags in a row (up to three languages), else the flag of the current language and a menu on hover or focus */
.lang-inline { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.lang-inline li { margin: 0; padding: 0; }
.lang-inline a, .lang-current { display: flex; align-items: center; padding: 0.3rem; border: 0; border-radius: 0.4rem; background: none; line-height: 0; color: inherit; cursor: pointer; }
.lang-inline li:not(.is-active) a { opacity: 0.65; }
.lang-inline a:hover, .lang-inline a:focus-visible { opacity: 1; }
.lang-menu { position: relative; }
.lang-list { position: absolute; top: 100%; right: 0; z-index: 50; display: grid; gap: 0.1rem; min-width: 11rem; margin: 0; padding: 0.35rem; list-style: none; color: CanvasText; background: Canvas;
    border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; transition: opacity 0.15s; }
.lang-menu:hover .lang-list, .lang-menu:focus-within .lang-list { visibility: visible; opacity: 1; }
.lang-list li { margin: 0; padding: 0; }
.lang-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 0.4rem; color: inherit; line-height: 1.2; text-decoration: none; }
.lang-list a:hover, .lang-list a:focus-visible { background: rgba(127, 127, 127, 0.15); }

/* Banners: hero-banner (full width) and hero-full (the rest of the screen under the header) */
.modular-hero.hero { position: relative; display: grid; place-items: center; background-size: cover; background-position: center; color: #fff; text-align: center; }
.modular-hero.hero .image-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)); }
.modular-hero.hero .container { position: relative; }
.modular-hero.hero h1, .modular-hero.hero .lead, .modular-hero.hero p { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.modular-hero.hero-banner { min-height: 42vh; padding: 5rem 0 3rem; }
.modular-hero.hero-full { min-height: calc(100svh - var(--q2-header-height)); padding: 4rem 0; }
.hero-card .container { max-width: 44rem; padding: 2rem; background: rgba(255, 255, 255, 0.88); color: #222; border-radius: 0.6rem; }
.hero-card .container, .hero-card .container p, .hero-card .container .lead { color: #333; text-shadow: none; }
.hero-card .container h1 { text-shadow: none; }
:root { --q2-header-height: 5rem; }
.hero-overline { margin: 0 0 0.4rem; font-size: 1.15rem; letter-spacing: 0.01em; opacity: 0.85; }
.site-logo { display: block; height: 3.4rem; width: auto; }
@media (max-width: 48rem) { .site-logo { height: 2.8rem; } }

/* Contact form */
.content-item form .form-group, .content-item form .form-field { margin-bottom: 1rem; }
.content-item form input[type="text"], .content-item form input[type="email"], .content-item form textarea { width: 100%; box-sizing: border-box; }
.content-item form textarea { min-height: 9rem; }
.form-honeypot, .honeypot { position: absolute; left: -9999px; }

/* The top bar is a <nav>: Pico gives its lists and links a negative margin and a padding, not wanted for the flags */
nav .lang-inline li, nav .lang-list li { display: block; width: auto; margin: 0; padding: 0; }
nav .lang-inline a, nav .lang-list a, nav .lang-current { margin: 0; }
nav .lang-inline a, nav .lang-current { padding: 0.3rem; }

/* Full-page blocks (the banner, the sections of a home page, the footer): js/softscroll.js moves between them with the wheel and the keys and lets the page
   scroll freely inside a block taller than the screen, so there is no CSS snapping on a computer. Touch screens only get a loose snapping (proximity). */
html:has(.hero-full) .hero-full, .home-section, .snap-section { scroll-snap-align: start; scroll-margin-top: var(--q2-header-height); }
@media (pointer: coarse) { html:has(.hero-full), html:has(.home-section), html:has(.snap-section) { scroll-snap-type: y proximity; } }
html.is-soft-scrolling { scroll-snap-type: none !important; }
@media (prefers-reduced-motion: reduce) { html:has(.hero-full), html:has(.home-section), html:has(.snap-section) { scroll-snap-type: none; } }
/* A section of a page with a full-screen banner (a rule --- in the text starts one): at least one screen high, content centred */
.snap-section { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--q2-header-height)); padding: 2rem 0; }
.snap-section > .container { width: 100%; }
.hero-overline + h1 { margin-top: 0; }

/* The footer: logo, contact and social links, legal information, light/dark switch and languages */
.site-footer { margin-top: 3rem; padding: 2.5rem 0; border-top: 1px solid var(--pico-muted-border-color, rgba(127, 127, 127, 0.3)); font-size: 0.95rem; }
#footer.site-footer { text-align: left; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
/* The logo, the legal information and the switch take their own width, the contact and the social links the rest (they wrap); the
   switch sits on the right edge, where the menu ends */
@media (min-width: 48rem) { .footer-grid { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 2.5rem; } .footer-switch { justify-self: end; } }
.footer-contact .social { flex-wrap: wrap; }
.footer-grid p { margin: 0 0 0.75rem; }
.footer-logo .site-logo { max-height: 4rem; width: auto; }
#footer .theme-toggle { display: inline-flex; align-items: center; margin: 0 0 1rem; padding: 0.2rem 0; opacity: 0.8; background: none; border: 0; color: inherit; width: auto; }
#footer .theme-toggle:hover { opacity: 1; }
.lang-expanded .lang-current { display: none; }
.lang-expanded .lang-list { display: block; position: static; visibility: visible; opacity: 1; box-shadow: none; background: none; border: 0; padding: 0; margin: 0; }
.lang-expanded .lang-list li { display: block; margin: 0 0 0.35rem; padding: 0; list-style: none; }
.lang-expanded .lang-list a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; margin: 0; }
.lang-expanded .lang-list .is-active a { font-weight: 700; }

/* No decorative dash above the titles (it made the image of a card look like it belonged to the previous post) */
h2::before, h1 + h2::before, .hero h2::before, .text-center h2::before, .card-title :is(h1, h2)::before, .card-body :is(h1, h2)::before { content: none; display: none; }

/* Posts as cards: a box of its own, the image on top, columns that adapt */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); align-items: stretch; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 56rem) { .card-grid--4 { grid-template-columns: repeat(2, 1fr); } .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 38rem) { .card-grid--4, .card-grid--3 { grid-template-columns: 1fr; } }
.news-card, .record-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 0.6rem; background: var(--q2-bg-elev, Canvas); }
.news-card__image, .record-card__image { display: block; line-height: 0; }
.news-card__image img, .record-card__image img { width: 100%; height: auto; display: block; }
.news-card__body, .record-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem 1.1rem; }
.news-card__meta, .record-card__meta { margin: 0.25rem 0 0; font-size: 0.8rem; opacity: 0.7; }
.news-card__title, .record-card__title { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.news-card__title a, .record-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover, .record-card__title a:hover { text-decoration: underline; }
.news-card__text, .record-card__text { margin: 0.25rem 0 0; font-size: 0.9rem; opacity: 0.85; }

/* Sections of a home page: presentation with an image on the side, then blocks of cards */
.home-section { margin: 3.5rem 0; }
.home-section > h2 { margin: 0 0 1.25rem; }
.home-intro { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 48rem) { .home-intro--image { grid-template-columns: 3fr 2fr; } }
.home-intro__image img { width: 100%; height: auto; border-radius: 0.6rem; display: block; }
.home-more { margin-top: 1.5rem; text-align: center; }

/* Top bar: the main menu on the left next to the logo (never on the right), the right side is for what is secondary */
#header .desktop-menu { justify-content: flex-start; }
#header .navbar-section.actions { gap: 1rem; }
.social { display: flex; align-items: center; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
nav .social li { display: block; width: auto; margin: 0; padding: 0; }
.social a { display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; margin: 0; border-radius: 50%; color: inherit; font-size: 0.95rem; opacity: 0.75; text-decoration: none; }
.social a:hover, .social a:focus-visible { opacity: 1; background: rgba(127, 127, 127, 0.15); }

/* Breadcrumbs, only in a sub-section */
.breadcrumbs-nav { margin: 0 0 1rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: 0.85rem; opacity: 0.85; }
.breadcrumbs li { margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "\203A"; margin-right: 0.6rem; opacity: 0.6; }

/* Band of categories: buttons that lead to the category, the current one filled */
.category-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1.75rem; padding: 0.75rem; border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 0.6rem; background: rgba(127, 127, 127, 0.06); }
.category-pill { padding: 0.35rem 0.95rem; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 999px; color: inherit; font-size: 0.9rem; text-decoration: none; }
.category-pill:hover, .category-pill:focus-visible { border-color: var(--q2-accent); }
.category-pill.is-active { color: var(--q2-accent-contrast, #fff); background: var(--q2-accent); border-color: var(--q2-accent); }

/* Lists of posts: a grid read by rows; with JavaScript it becomes a masonry that still reads by rows (see js/masonry.js) */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; align-items: start; }
.blog-grid > .news-card { display: flex; width: 100%; margin: 0; }
.blog-grid.is-masonry { grid-auto-rows: 1px; grid-auto-flow: row dense; row-gap: 0; align-items: start; }

/* A page with a side column (purchase, player, links, payment form): two columns when the screen allows, the side one stays in view */
.with-aside { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .with-aside { grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); } .with-aside > aside { position: sticky; top: calc(var(--q2-header-height) + 1rem); } }
.with-aside > aside > * + * { margin-top: 1.5rem; }
.aside-box { padding: 1rem 1.1rem; border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 0.6rem; background: var(--q2-bg-elev, Canvas); }
.aside-box > h2, .aside-box > h3 { margin: 0 0 0.6rem; font-size: 1rem; }
#header .desktop-menu, #header .dropmenu { min-width: 0; }
#header .dropmenu > ul { flex-wrap: nowrap; white-space: nowrap; }
#header .social { display: none; }
@media (min-width: 72rem) { #header .social { display: flex; } }
.social li { list-style: none; margin: 0; padding: 0; }
.footer-contact .social { margin-top: 0.5rem; }
.footer-contact .social a { font-size: 1.1rem; width: 2rem; height: 2rem; }
.footer-contact .social { margin-left: -0.3rem; }

.tag-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.tag-chips li { list-style: none; margin: 0; padding: 0.05rem 0.55rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.72rem; opacity: 0.75; }
.news-card__image--contain { display: block; }
.news-card__image--contain img { display: block; width: 100%; height: auto; }

/* The platforms of a record: one row of buttons under the video */
.platform-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.platform-links li { margin: 0; padding: 0; list-style: none; }
.platform-links .button { margin: 0; }

/* A list with a class is a component (tags, buttons, menus), not prose: no bullets */
ul[class] > li { list-style: none; }

/* The latest record in the banner of the home page: a frame as small as its content, the overline, the name and the cover in the left column, the text with the button (to the right) in the right one (one column on a narrow screen) */
.hero-release { --gap: 1.5rem; display: grid; grid-template-columns: 14rem fit-content(30rem); column-gap: var(--gap); row-gap: 0; align-items: start; justify-content: center; width: fit-content; max-width: 100%; margin: 1.5rem auto 0; padding: var(--gap); background: rgba(10, 12, 18, 0.38); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.6rem; text-align: left; }
.hero-release > * { margin: 0; max-width: none; }
.hero-release__cover { margin-top: var(--gap); }
.hero-release h2 { line-height: 1.2; }
.hero-release .hero-overline, .hero-release h2 { grid-column: 1; text-align: center; }
.hero-release__cover { grid-column: 1; }
.hero-release__text { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; display: flex; flex-direction: column; gap: var(--gap); }
.hero-release__text > p { margin: 0; }
.hero-release__button { align-self: flex-end; }
.hero-release h2 { font-size: 1.8rem; }
.hero-release h2 a { color: inherit; text-decoration: none; }
.hero-release__cover { line-height: 0; }
.hero-release__cover img { width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.hero-release--left { margin-left: 0; margin-right: auto; }
.hero-release--right { margin-left: auto; margin-right: 0; }
@media (max-width: 40rem) { .hero-release { grid-template-columns: minmax(0, 1fr); } .hero-release__cover { max-width: 13rem; justify-self: center; } .hero-release__text { grid-column: 1; grid-row: auto; margin-top: var(--gap); } }

/* A banner with the latest record uses the whole width of the page, so the frame can sit at its edge */
.modular-hero.hero .container:has(.hero-release) { max-width: none; width: 100%; padding-inline: clamp(1rem, 4vw, 3.5rem); }
.modular-hero.hero .hero-release > h2 { margin: 0.1rem 0 0; }

/* Running text may be hyphenated (the parent theme does it), titles never are */
h1, h2, h3, h4, h5, h6 { hyphens: manual; text-wrap: balance; }
.header-langswitcher { margin-right: 0.75rem; }

/* The same frame inside a text (the [record] shortcode): over the page, not over a picture */
.hero-release--inline { margin-top: 1.5rem; margin-bottom: 1.5rem; color: #fff; background: rgba(20, 20, 30, 0.88); }
.hero-release--inline .hero-overline, .hero-release--inline p { color: #fff; }
.content-item .hero-release > h2 { margin: 0.1rem 0 0; color: #fff; }
.hero-release--inline .button { display: inline-block; padding: 0.7rem 1.4rem; color: #fff; background: transparent; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 0.3rem; text-decoration: none; }
.hero-release--inline .button:hover { background: var(--brand, #fff); border-color: var(--brand, #fff); color: #10213f; }

/* A post without a title: an arrow leads to it, the text of the card stays the main thing */
.news-card__more { margin: 0.5rem 0 0; text-align: right; }
.news-card__more a { text-decoration: none; opacity: 0.7; }
.news-card__more a:hover { opacity: 1; }

/* The attribution of a quote: the last paragraph of the quote written as <cite>Author, Work</cite>, set apart (the dash comes from the style) */
blockquote cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.9em; text-align: right; opacity: 0.75; }
blockquote cite::before { content: "\2014\00a0"; }

/* The picture of an image post */
.post-image { margin: 1.5rem 0; }
.post-image img { display: block; width: 100%; height: auto; border-radius: 0.4rem; }

/* A row of buttons, centered, wrapping on a narrow screen */
.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.5rem 0; }
.button-row [role=button] { margin: 0; }

/* Contact page: cards side by side, the lists of accounts and the subscription form */
/* Contact: the form (and the call to support) on the left, the mailing list and the networks on the right; one column on a narrow screen */
.contact-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
.contact-main, .contact-side { display: grid; gap: 1.5rem; }
@media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-card { padding: 1.2rem 1.4rem; border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 0.6rem; background: var(--q2-bg-elev, Canvas); }
.contact-card > h2, .contact-card > h3 { margin-top: 0; }
.social-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.social-list li { margin: 0; padding: 0; }
.social-list + .social-list { margin-top: 0.9rem; }
.social-list a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 2rem; color: inherit; text-decoration: none; }
.social-list a:hover, .social-list a:focus-visible { border-color: var(--q2-accent); }
.newsletter-form label { display: block; }
.newsletter-form input[type=email] { width: 100%; }
/* The first name and the name of the mailing list side by side */
.newsletter-form .newsletter-texts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.newsletter-form .newsletter-texts input { width: 100%; margin: 0; }
/* The forms of the contact page show their placeholders; the labels stay for screen readers */
.contact-card .form-field, .contact-card .form-group { margin-bottom: 0.25rem; }
.contact-card .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.newsletter-form .newsletter-list { display: flex; align-items: center; gap: 0.5rem; }
.contact-card { hyphens: manual; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Radios and checkboxes keep their border when focused: quark2 makes the border of a focused field transparent, which hid the
   thick border of the checked one until the focus moved elsewhere */
input[type=radio]:focus, input[type=checkbox]:focus { border-color: var(--pico-border-color); }

/* The content takes the width of the menu; a page that wants a narrower column says so in its header: body_classes: narrow */
#body-wrapper > .container > .content-item { max-width: none; }
body.narrow #body-wrapper > .container > .content-item { max-width: 960px; }

/* The title of a page: the display size of quark2 (up to 60px) is kept for the heroes */
.content-item h1, .blog-page-header h1 { font-size: clamp(2rem, 2.5vw + 1.1rem, 3rem); line-height: 1.1; }

/* Support page: the image beside the steps of the fundraising, a timeline: done (checked), in progress (highlighted), to come */
.fundraising-steps { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.75rem; align-items: start; margin-top: 1.25rem; }
.fundraising-steps .steps-image { margin: 0; }
.fundraising-steps .steps-image img { display: block; width: 100%; height: auto; border-radius: 0.6rem; }
@media (max-width: 700px) { .fundraising-steps { grid-template-columns: 1fr; } }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps .step { position: relative; list-style: none; margin: 0 0 0 1rem; padding: 0.35rem 0 1.25rem 2rem; border-left: 2px solid rgba(127, 127, 127, 0.3); }
.steps .step:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps .step::before { counter-increment: step; content: counter(step); position: absolute; left: calc(-1rem - 1px); top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 0.9rem; background: var(--q2-bg-elev, Canvas); border: 2px solid rgba(127, 127, 127, 0.5); }
.steps .step.done { border-left-color: var(--q2-accent); }
.steps .step.done::before { content: "✓"; background: var(--q2-accent); border-color: var(--q2-accent); color: #fff; }
.steps .step.current::before { border-color: var(--q2-accent); color: var(--q2-accent); }
.steps .step:not(.done):not(.current) { opacity: 0.75; }
.step-status { display: block; width: fit-content; margin-bottom: 0.2rem; padding: 0.05rem 0.55rem; border-radius: 1rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid currentColor; }
.steps .step.done .step-status { color: var(--q2-accent); }
.steps .step.current .step-status { background: var(--q2-accent); border-color: var(--q2-accent); }
.steps .step.current .step-status, .steps .step.current .step-status a { color: #fff; text-decoration: none; }
.steps .step p { margin: 0; }

/* A photo and its text side by side, centered in height, the photo alternately left and right (reverse), with air around (the about
   page); the photo above its text on a narrow screen */
.bio-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; align-items: center; margin: 3rem 0; }
.bio-row.portrait { grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); }
.bio-row.reverse { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.bio-row.portrait.reverse { grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr); }
.bio-row.reverse > figure { order: 2; }
.bio-row > figure { margin: 0; }
.bio-row > figure p, .bio-row .bio-text > :last-child { margin-bottom: 0; }
.bio-row img { display: block; width: 100%; height: auto; border-radius: 0.6rem; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.bio-row figcaption { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.35; opacity: 0.8; }
.bio-row figcaption strong { margin-right: 0.3rem; }
@media (max-width: 700px) { .bio-row, .bio-row.portrait, .bio-row.reverse, .bio-row.portrait.reverse { grid-template-columns: 1fr; gap: 1rem; } .bio-row.reverse > figure { order: 0; } }

/* A page with background_image: the image behind the whole page, fixed and darkened, a slight parallax where the browser drives
   animations with the scroll; the content in a frosted glass frame */
.page-backdrop { position: fixed; inset: 0 0 auto; height: 112vh; z-index: -1; background-size: cover; background-position: center; }
.page-backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 14, 0.35); }
@supports (animation-timeline: scroll()) {
    .page-backdrop { animation: backdrop-drift linear both; animation-timeline: scroll(root); }
    @keyframes backdrop-drift { to { transform: translateY(-10vh); } }
}
body:has(.page-backdrop), body:has(.page-backdrop) #body-wrapper { background: transparent; }
body:has(.page-backdrop) #body-wrapper > .container > .content-item {
    background: color-mix(in srgb, var(--q2-bg-elev) 68%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* A row of images (a <div class="image-row" markdown="1"> around them in a text): same width, wrapping on a narrow screen */
.image-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 1rem; margin: 1.5rem 0; align-items: start; }
.image-row p { margin: 0; }
.image-row img { display: block; width: 100%; height: auto; border-radius: 0.4rem; }