/*
 * Charity Association Pro 2026 — the public site.
 *
 * Every colour, radius, shadow, border weight, spacing scale and font name in
 * here is read from a custom property. The values themselves are declared in
 * one place — app/Support/SiteTheme.php — and arrive in a small block in the
 * page's head. Not one rule below holds a colour of its own, and a guard fails
 * if one ever does; the sole exception is print, which ignores the theme by
 * rule: black on white, always.
 *
 * The control panel is dark and stays dark; the theme belongs to this site
 * alone. Right to left, fixed. Every font file is served from this project;
 * nothing is fetched from the internet while the site is running — the active
 * font's two faces are declared in the same block in the head, and the other
 * fourteen fonts stay on disk unloaded.
 */

/* The numbers' font. The Arabic font changes with the theme; this one does
   not — its figures share one width, so a column of them lines up under
   itself. */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/inter_regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/inter_bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Layout, not theme: how wide a comfortable line of reading is. */
    --reading-width: 44rem;
}

* {
    box-sizing: border-box;
}

html {
    /* Numerals keep a fixed width wherever they appear, so a column of them
       lines up under itself. */
    font-variant-numeric: tabular-nums;
}

/* The page fills the window even when it has little in it, so the footer sits
   at the bottom of the screen instead of hanging in the middle of it with
   emptiness underneath.

   The decoration — when one is switched on — is painted here, under the whole
   page: a repeating tile carried inside the stylesheet, never a file that
   loads. With none chosen the image is simply none. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--page);
    background-image: var(--decoration-image);
    color: var(--text);
    font-family: var(--font-family);
    font-size: calc(1.0625rem * var(--font-scale));
    line-height: 1.9;
}

/* A number inside Arabic text is isolated, so its digits cannot be reordered by
   what sits beside them. */
.number {
    font-family: 'Inter', system-ui, sans-serif;
    unicode-bidi: isolate;
}

.page {
    /* Takes whatever room is left over, which is what pushes the footer down. */
    flex: 1 0 auto;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: calc(2.5rem * var(--space)) 1.25rem calc(4rem * var(--space));
}

/* =====================================================================
   The header and the footer.

   Not one line of script anywhere in here. The menu that opens on a phone,
   the drop-downs and the button held in the corner of the window are the
   browser's own elements and these rules — nothing waits for anything to
   load, and nothing stops working when scripting is switched off.
   ===================================================================== */

/* The header paints no background of its own, so the page — and the
   decoration on it — runs behind it. It stands above the occasion symbol
   hanging under its edge, which is why it carries a stacking order. */
.site-header {
    position: relative;
    z-index: 20;
    border-bottom: var(--border-width) solid var(--line);
}

.site-header__inner {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-header__strip {
    border-bottom: var(--border-width) solid var(--line);
    background: var(--surface);
}

.site-header__strip .site-header__inner {
    min-height: 36px;
    justify-content: space-between;
    font-size: 0.92rem;
}

.site-header__main .site-header__inner {
    min-height: 80px;
}

.site-header__logo {
    display: block;
    height: 40px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

/* No logo chosen is not an empty space: the name stands where the picture
   would be. */
.site-header__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--headings);
}

.site-header__side {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-inline-start: auto;
}

.site-header__phone {
    color: var(--text);
    text-decoration: none;
}

/* It was a word that did nothing until the basket was built. It is the link it
   always named now, and it carries the count of projects in the basket — never
   of lines, and never a nought.

   The mark, the word, the number — in that order, which in a page read from the
   right is the order the eye meets them. The mark is the system's own drawing
   and follows no field: it is what the eye finds before it reads. */
.site-header__cart {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    color: var(--text-quiet);
    text-decoration: none;
}

.site-header__cart-mark {
    display: inline-flex;
    flex: none;
}

.site-header__cart-mark svg {
    width: 1.25rem;
    height: 1.25rem;
}

.site-header__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Two menus and one of them is ever in the page. On a wide screen the list
   stands open; on a phone it opens from the side. The other is removed by
   display:none, which takes it out of the page for a screen reader too, so
   nobody meets the same menu twice. */
.site-header__menu {
    display: none;
}

.site-header__inside-menu {
    display: none;
}

/* ---------- the five shapes of the header ---------- */

/* One: the links take the room between the logo and the far side, and stand
   in the middle of it. */
.site-header--1 .site-header__links {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Two: the logo in the middle of its own line with the basket at the end of
   it, and the links on a line of their own underneath. */
.site-header--2 .site-header__main .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "blank brand side" "menu menu menu";
    row-gap: 0.6rem;
    padding-block: 0.9rem;
}

.site-header--2 .site-header__brand {
    grid-area: brand;
    justify-self: center;
}

.site-header--2 .site-header__side {
    grid-area: side;
    justify-self: end;
    margin-inline-start: 0;
}

.site-header--2 .site-header__links {
    grid-area: menu;
    justify-self: center;
}

/* Three: a thin strip above, and under it the same arrangement as one. */
.site-header--3 .site-header__links {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Four: the logo and the basket on one line, and the links on a line of
   their own across the whole width. This is the one shape whose alignment is
   the owner's to choose. */
.site-header--4 .site-header__main .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand side" "menu menu";
    row-gap: 0.6rem;
    padding-block: 0.9rem;
}

.site-header--4 .site-header__side {
    justify-self: end;
    margin-inline-start: 0;
}

.site-header--4 .site-header__links {
    grid-area: menu;
    display: flex;
}

.site-header--4.site-header--align-right .site-header__links {
    justify-content: flex-start;
}

.site-header--4.site-header--align-centre .site-header__links {
    justify-content: center;
}

/* Five: everything pressed together, and the thinnest of the five. */
.site-header--5 .site-header__main .site-header__inner {
    min-height: 56px;
    gap: 1rem;
}

.site-header--5 .site-header__logo {
    height: 34px;
}

/* ---------- a list of links, in the header and in the footer ---------- */

.menu-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-list__link {
    display: inline-block;
    padding: 0.4rem 0.2rem;
    color: var(--text);
    text-decoration: none;
}

.menu-list--plain .menu-list__link--current {
    box-shadow: inset 0 -2px 0 var(--primary);
    color: var(--headings);
}

.menu-list--card .menu-list__link {
    padding: 0.45rem 0.9rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--page);
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

.menu-list--card .menu-list__link:hover {
    transform: var(--hover-transform);
    box-shadow: var(--hover-shadow);
}

.menu-list--card .menu-list__link--current {
    border-color: var(--primary);
    color: var(--headings);
}

/* A drop-down out of the browser's own element. It opens on a click, on a
   computer and on a phone alike.
   What that costs: it stays open until it is clicked again or until the page
   changes. Closing it by clicking elsewhere needs a script. */
.menu-list__drop {
    position: relative;
}

.menu-list__drop > summary {
    list-style: none;
    cursor: pointer;
}

.menu-list__drop > summary::-webkit-details-marker {
    display: none;
}

.menu-list__drop > summary::after {
    content: '▾';
    margin-inline-start: 0.3rem;
    color: var(--text-quiet);
}

.menu-list__children {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 12rem;
    margin: 0.3rem 0 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--page);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    z-index: 20;
}

.menu-list__children .menu-list__link {
    display: block;
    padding: 0.4rem 0.6rem;
}

/* ---------- the social accounts ---------- */

.socials {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.socials__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: var(--border-width) solid var(--line);
    border-radius: 50%;
    color: var(--text);
}

.socials__link svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* ---------- the tally bar ---------- */

/* Still in its place in every shape: no movement, no marquee, no scrolling
   text. And every word and digit in it was typed by hand. */
.tally-bar {
    background: var(--surface);
    border-bottom: var(--border-width) solid var(--line);
}

.tally-bar__inner {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0.35rem 1.25rem;
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
}

.tally-bar__title {
    color: var(--text-quiet);
    font-size: 0.95rem;
}

.tally-bar__amount {
    font-weight: 700;
}

/* One: a tidy line — small writing, the number standing out, an upright rule,
   then the number of givers. */
.tally-bar--1 .tally-bar__amount {
    font-size: 1.35rem;
    line-height: 1.4;
}

.tally-bar--1 .tally-bar__count {
    padding-inline-start: 0.9rem;
    border-inline-start: var(--border-width) solid var(--line);
}

.tally-bar__count {
    color: var(--text-quiet);
}

/* Two: three boxes, each a number over its own name. */
.tally-bar--2 .tally-bar__inner {
    justify-content: center;
    gap: 0 2.5rem;
    padding-block: 0.6rem;
}

.tally-bar__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.5;
    padding-inline: 1.25rem;
    border-inline-start: var(--border-width) solid var(--line);
}

.tally-bar__cell:last-child {
    border-inline-start: 0;
}

.tally-bar__cell-value {
    font-size: 1.3rem;
    font-weight: 700;
}

.tally-bar__cell-label {
    color: var(--text-quiet);
    font-size: 0.9rem;
}

/* Three: a bar of how far along a target it is. */
.tally-bar--3 .tally-bar__inner {
    display: block;
    padding-block: 0.55rem;
}

.tally-bar__progress-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.9rem;
}

.tally-bar__target {
    color: var(--text-quiet);
}

.tally-bar__track {
    height: 8px;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

/* It fills from the reading side, and it never passes its own end: the width
   handed to it is capped at a hundred before it reaches here. */
.tally-bar__fill {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 999px;
    background: var(--primary);
}

/* Four: one very large number, with the small writing above and below it. */
.tally-bar--4 .tally-bar__inner {
    justify-content: center;
    padding-block: 0.7rem;
}

.tally-bar__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.4;
}

.tally-bar--4 .tally-bar__amount {
    font-size: 2rem;
    line-height: 1.3;
}

/* Five: a strip that sets it apart from the header, and the number in a
   colour of its own. On a light palette the strip is the deep heading colour;
   on a dark one it is the raised surface — both come finished from the one
   central place. */
.tally-bar--5 {
    background: var(--strip);
    border-bottom: 0;
}

.tally-bar--5 .tally-bar__inner {
    justify-content: center;
}

.tally-bar--5 .tally-bar__title,
.tally-bar--5 .tally-bar__count {
    color: var(--on-strip-quiet);
}

.tally-bar--5 .tally-bar__amount {
    color: var(--strip-accent);
    font-size: 1.35rem;
}

/* ---------- the occasion symbol ---------- */

/* A small shape hanging on a thread from the header's lower edge — from under
   the last strip when a tally bar is drawn, because the well stands after
   whatever the top of the page carries. On the reading side's far edge, away
   from the logo, which stays the first thing the eye lands on.

   It drops once when the page opens and then stands still: the well clips the
   fall, the animation runs a single time, and nothing sways or loops. The
   drop-down menus stand above it always — the header's stacking order sees to
   that — and a narrow phone does not draw it at all. */
.occasion-well {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.occasion {
    position: absolute;
    top: 0;
    left: clamp(1.25rem, 7vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--occasion-colour);
    animation: occasion-drop 0.9s cubic-bezier(0.22, 1.2, 0.4, 1) both;
}

.occasion__thread {
    width: 2px;
    height: 52px;
    background: currentColor;
    opacity: 0.5;
}

.occasion__symbol {
    display: block;
}

.occasion__symbol svg {
    display: block;
    width: 46px;
    height: 46px;
}

@keyframes occasion-drop {
    from {
        transform: translateY(-105%);
    }

    to {
        transform: translateY(0);
    }
}

/* The mourning ribbon is the exception written into the brief: it never takes
   the theme's colour — its own comes fixed from the central place — and it
   never moves. */
.occasion--mourning {
    animation: none;
}

/* ---------- the button held in the corner ---------- */

/* Held there by this rule and nothing else: no scroll is measured and no
   script runs. */
.whatsapp-float {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-pop);
}

.whatsapp-float svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* ---------- the footer ---------- */

.site-footer {
    margin-top: calc(4rem * var(--space));
    border-top: var(--border-width) solid var(--line);
    background: var(--surface);
}

.site-footer__inner {
    max-width: 68rem;
    margin: 0 auto;
    padding: calc(40px * var(--space)) 1.25rem;
    display: grid;
    gap: 2rem;
    align-items: start;
}

/* The columns are counted from what is actually there. A column with nothing
   in it is never drawn, and the ones beside it spread into its room. */
.site-footer--1 .site-footer__inner,
.site-footer--2 .site-footer__inner,
.site-footer--5 .site-footer__inner {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.site-footer--2 .site-footer__column--brand {
    grid-row: 1;
}

.site-footer--3 .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

/* Four: one bar, and everything stands in it — the bottom line included, or
   it would be two bars. */
.site-footer--4 .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    min-height: 56px;
    padding-block: 0.5rem;
}

.site-footer__logo {
    display: block;
    height: 32px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
}

.site-footer__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--headings);
}

.site-footer__about {
    margin: 0.75rem 0 0;
    color: var(--text-quiet);
    max-width: 28rem;
}

.site-footer__title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--headings);
}

.site-footer__column .menu-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
}

.site-footer--3 .site-footer__column .menu-list,
.site-footer--4 .site-footer__column .menu-list {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem 1.25rem;
}

.site-footer--3 .site-footer__column .menu-list {
    justify-content: center;
}

/* A long column of links beside short columns leaves a hole under them and
   stretches the footer for nothing. Past a certain number it runs in two
   columns inside its own place, which is what the two-column shape does by
   hand. */
.site-footer__column .menu-list--split {
    display: block;
    column-count: 2;
    column-gap: 1.5rem;
}

.site-footer__column .menu-list--split .menu-list__item {
    break-inside: avoid;
}

.site-footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-quiet);
}

.site-footer__contact li {
    margin-bottom: 0.4rem;
}

.site-footer__contact a {
    color: inherit;
}

/* The closing line stands in a bar of its own across the whole width, with a
   rule above it, in all five shapes — it is the line that closes the site, not
   a tail on the first column. */
.site-footer__bottom {
    border-top: var(--border-width) solid var(--line);
}

.site-footer__inner--bottom {
    display: block;
    padding-block: 1rem;
}

/* Three tracks and the rights in the middle one, so they sit in the middle of
   the page itself — not in the middle of what is left over beside the
   accounts. */
.site-footer__bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.site-footer__bottom-side {
    display: flex;
    align-items: center;
}

.site-footer__bottom-side--end {
    justify-content: flex-end;
}

.site-footer__copyright {
    margin: 0;
    text-align: center;
    color: var(--text-quiet);
    font-size: 0.95rem;
}

.site-footer__licence {
    color: var(--text-quiet);
}

/* Five: a strip of its own along the bottom, set apart from the rest. */
.site-footer--5 .site-footer__bottom {
    border-top: 0;
    background: var(--strip);
    color: var(--on-strip);
}

.site-footer--5 .site-footer__inner--bottom {
    min-height: 48px;
    padding-block: 0.6rem;
}

.site-footer--5 .site-footer__copyright {
    color: var(--on-strip-quiet);
}

.site-footer--5 .site-footer__bottom .socials__link {
    color: var(--on-strip);
    border-color: var(--strip-line);
}

.page__title {
    margin: 0 0 2rem;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--headings);
}

.page__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.page__image-figure {
    margin: 0 0 2rem;
}

.page__image-figure--tail {
    margin: 2.5rem 0 0;
}

.section {
    margin: 0 0 calc(2rem * var(--space));
    max-width: var(--reading-width);
}

.section__heading {
    margin: 0 0 0.6rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--headings);
}

.section__body {
    margin: 0;
    white-space: pre-line;
}

/* Form four and form five run the paragraphs together as one piece of writing,
   with no headings and no gaps that read as a break. */
.prose {
    max-width: var(--reading-width);
}

.prose p {
    margin: 0 0 1.2rem;
    white-space: pre-line;
}

/* Form three: the image beside the first paragraph, and everything after it
   across the full width.

   The plan puts the image on the left and the writing on its right, so the
   columns are placed by hand rather than taken in the order they are written:
   the image stays first in the writing, so a phone — which has one column —
   still leads with the picture. */
.beside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin: 0 0 2rem;
}

.beside__image {
    grid-column: 2;
    grid-row: 1;
}

.beside__text {
    grid-column: 1;
    grid-row: 1;
}

.beside .section {
    margin: 0;
}

/* ---------- entries shared by several kinds ---------- */

.entry__title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--headings);
}

.entry__title a {
    color: inherit;
}

.entry__note {
    margin: 0 0 0.5rem;
    color: var(--text-quiet);
}

.file-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.6rem 0 0;
}

.file-button {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border: var(--border-width) solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.file-button--quiet {
    background: none;
    color: var(--text);
    border-color: var(--line-strong);
}

.rows {
    display: flex;
    flex-direction: column;
    gap: calc(1.25rem * var(--space));
}

.row-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding-bottom: calc(1.25rem * var(--space));
    border-bottom: var(--border-width) solid var(--line);
}

.row-item__year {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--headings);
}

.row-item__thumb {
    display: block;
    width: 6rem;
}

/* Three in a row, counted and not fitted. Letting the browser fit as many as
   the width allows put four in a row, and four columns are too narrow for the
   titles this site carries. */
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(1.5rem * var(--space));
}

/* The movement on hover is a value from the shape set — none, a small lift or
   a small growth — and it stops for anyone whose device asks for less motion. */
.card-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: transform var(--transition);
}

.card-item:hover {
    transform: var(--hover-transform);
}

.card-item__cover,
.cover {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* A missing cover is never a gap. The year stands where the picture would be,
   at the same size, so a row of them stays a row. */
.card-item__cover--year,
.cover--year {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background: var(--surface);
    color: var(--text-quiet);
    font-size: 1.75rem;
    font-weight: 700;
}

.plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: var(--reading-width);
}

.plain-list__entry {
    padding: calc(0.75rem * var(--space)) 0;
    border-bottom: var(--border-width) solid var(--line);
}

/* ---------- reports ---------- */

.timeline {
    margin: 0;
    padding: 0 1.25rem 0 0;
    list-style: none;
    border-right: var(--border-width-strong) solid var(--line);
}

.timeline__entry {
    position: relative;
    padding: 0 1.5rem 2rem 0;
}

.timeline__entry::before {
    content: '';
    position: absolute;
    top: 0.6rem;
    right: -1.85rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--primary);
}

.timeline__year {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--headings);
}

/* Three in a row, like the cards. Fitting as many as the width allowed put
   five squares in a row, and the plan draws three. */
.year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(1.25rem * var(--space));
}

.year-square {
    padding: calc(1.25rem * var(--space));
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    background: var(--page);
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

.year-square:hover {
    transform: var(--hover-transform);
    box-shadow: var(--hover-shadow);
}

.year-square__year {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--headings);
}

/* ---------- publications ---------- */

/* Books standing on shelves.
   Every cover in a row rests on the same line whatever its height — they are
   aligned by their bottom, the way books stand, not hung by their top — and
   every row carries its own shelf. The shelf is drawn under each book rather
   than under the whole grid, and the columns touch, so the pieces join into
   one line per row. */
.shelf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: calc(2rem * var(--space));
    column-gap: 0;
}

.shelf__stand {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 17rem;
    padding: 0 0.75rem 0.85rem;
    border-bottom: var(--border-width-strong) solid var(--line-strong);
}

/* An empty place at the end of the last row. It holds no book and carries no
   writing: it is there so the shelf under a short row still runs the whole
   width, the way a shelf does. It starts at the top of its row, or it would
   drop its piece of the line to the bottom of the row instead of onto the
   line the books are standing on. */
.shelf__stand--empty {
    align-self: start;
}

.shelf__stand .cover {
    width: auto;
    max-width: 100%;
    max-height: 16rem;
}

.shelf__stand .cover--year {
    width: auto;
    height: 16rem;
}

.shelf__book > .entry__title,
.shelf__book > .file-buttons {
    padding: 0 0.75rem;
}

.shelf__book > .entry__title {
    margin-top: 0.6rem;
}

/* The publications lead: a large cover on one side with the writing beside it,
   which is what that plan draws. The news lead is a different shape and has a
   block of its own. */
.lead {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 2rem;
    margin: 0 0 2.5rem;
    align-items: start;
}

/* ---------- the board ---------- */

/* A row holds exactly the members put in it — three, or fewer at the top of a
   pyramid. Laying the row out as wrapping boxes let a row of three break into
   two and one whenever the boxes were a little too wide for the page; counted
   columns cannot break. The columns are as wide as the member needs and no
   wider, and the group is centred. */
.board-row {
    display: grid;
    grid-template-columns: repeat(var(--members, 3), minmax(0, var(--member-width, 16rem)));
    justify-content: center;
    gap: calc(2rem * var(--space));
    margin: 0 0 calc(2rem * var(--space));
}

/* A member with the name beside the picture needs a wider column than one with
   the name under it. The width belongs to the row, because the row is what
   divides it. */
.board-row--beside {
    --member-width: 20rem;
}

.member {
    text-align: center;
}

/* The name beside the picture, and the biography under both across the whole
   card — not squeezed into the column beside the picture. */
.member--beside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1rem;
    text-align: right;
}

.member--beside .member__facts {
    align-self: center;
}

.member--beside .member__biography {
    grid-column: 1 / -1;
    margin-top: 0.85rem;
}

.member__image {
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 0 auto 0.75rem;
    object-fit: cover;
    background: var(--surface);
}

.member--beside .member__image {
    margin: 0;
}

.member__image--circle {
    border-radius: 50%;
}

.member__image--square {
    border-radius: var(--radius);
}

.member__image--letter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-quiet);
    font-size: 2.5rem;
    font-weight: 700;
}

.member__name {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    color: var(--headings);
}

.member__role {
    margin: 0 0 0.4rem;
    color: var(--text-quiet);
}

.member__biography {
    margin: 0;
}

/* ---------- news ---------- */

/* Form four: the first item leads the page with its picture across the whole
   width and the title underneath it. It is a headline, so it is not a small
   picture with writing beside it — that is form two. */
.wide-lead {
    margin: 0 0 2.5rem;
}

.wide-lead__cover {
    display: block;
    width: 100%;
    max-height: 24rem;
    object-fit: cover;
    border-radius: var(--radius);
    margin: 0 0 1rem;
}

.wide-lead__title {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 700;
    color: var(--headings);
}

.wide-lead__title a {
    color: inherit;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 2rem;
}

.filters input,
.filters select {
    padding: 0.45rem 0.7rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--page);
    color: var(--text);
    font: inherit;
}

.year-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2rem;
}

.year-bar__year {
    padding: 0.35rem 0.8rem;
    border: var(--border-width) solid var(--line);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
}

.year-bar__year--current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.pagination {
    margin: 2rem 0 0;
}

.pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pages__link {
    padding: 0.35rem 0.75rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}

.pages__link--current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.pages__link--off {
    color: var(--text-quiet);
}

/* ---------- forms ---------- */

.form-page__body {
    display: grid;
    gap: 2rem;
}

/* Form two: the plan puts the picture on the left and the form on its right,
   so the columns are placed by hand rather than taken in the order they are
   written — the picture stays first in the writing so a phone, which has one
   column, still leads with it. */
.form-page--2 .form-page__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.form-page--2 .form-page__aside {
    grid-column: 2;
    grid-row: 1;
}

.form-page--2 .form-page__main {
    grid-column: 1;
    grid-row: 1;
}

.form-page--3 .form-page__main,
.form-page--5 .form-page__main {
    max-width: var(--reading-width);
    margin: 0 auto;
}

.form-page__text {
    white-space: pre-line;
}

.form-page__text--large {
    font-size: 1.3rem;
    text-align: center;
}

/* Form four lays the picture behind the whole page. The veil over it is the
   page's own colour, computed centrally, so the writing stays readable on any
   picture in any palette. */
.form-page--4 {
    padding: 2rem;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
}

.form-page--4 .form-page__main {
    max-width: var(--reading-width);
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--page-veil);
}

.public-form {
    max-width: var(--reading-width);
}

.public-field {
    margin: 0 0 1rem;
}

.public-field label {
    display: block;
    margin: 0 0 0.3rem;
    font-weight: 700;
}

.public-field__required {
    color: var(--error);
    font-weight: 400;
    font-size: 0.85rem;
}

.public-field__hint {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-quiet);
    font-size: 0.9rem;
}

.public-field input,
.public-field select,
.public-field textarea,
.phone input,
.phone select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--page);
    color: var(--text);
    font: inherit;
}

.phone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.5rem;
}

/* Seen by nobody, and filled in by a machine that reads the page rather than
   looks at it.
   It is hidden by being clipped to nothing, not by being pushed thousands of
   pixels to the side: pushing it sideways stretched the page to ten thousand
   pixels wide and gave every form page a horizontal scroll into emptiness. */
.nobody {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.notice-public {
    padding: 0.8rem 1rem;
    border: var(--border-width) solid var(--ok-border);
    border-radius: var(--radius);
    background: var(--ok-bg);
}

.error-public {
    display: block;
    margin-top: 0.3rem;
    color: var(--error);
}

/* ---------- less motion, when the visitor asked for less ---------- */

/* Every movement the theme makes stops here: the symbol does not drop, the
   cards do not lift, and nothing eases. The visitor asked the device for
   less motion, and the device is obeyed without being asked twice. */
@media (prefers-reduced-motion: reduce) {
    .occasion {
        animation: none;
    }

    .card-item,
    .year-square,
    .menu-list--card .menu-list__link,
    .home-partner__logo {
        transition: none;
    }

    .card-item:hover,
    .year-square:hover,
    .menu-list--card .menu-list__link:hover {
        transform: none;
    }
}

/* ---------- print ---------- */

/* Print ignores the theme, always: a white page, black writing, no decoration
   and nothing hanging — whatever the screen shows. A page printed from a dark
   theme must not come out of the printer as a black sheet. These are the only
   raw colours in this file, and they are the rule itself, not a leak. */
@media print {
    :root {
        --primary: #000000;
        --on-primary: #ffffff;
        --page: #ffffff;
        --surface: #ffffff;
        --text: #000000;
        --text-quiet: #444444;
        --headings: #000000;
        --line: #bbbbbb;
        --line-strong: #888888;
        --strip: #ffffff;
        --on-strip: #000000;
        --on-strip-quiet: #444444;
        --strip-line: #bbbbbb;
        --strip-accent: #000000;
        --error: #000000;
        --ok-border: #888888;
        --ok-bg: #ffffff;
        --page-veil: #ffffff;
        --shadow: none;
        --shadow-pop: none;
        --hover-shadow: none;
        --hover-transform: none;
        --decoration-image: none;
    }

    .occasion-well,
    .whatsapp-float,
    .site-header__menu {
        display: none;
    }

}

/* ---------- the phone ---------- */

@media (max-width: 48rem) {
    /* The wide list goes out of the page, and the one that opens from the side
       takes its place.

       Written with the header in front of it so it carries the same weight as
       the rules that lay each shape out. Those rules name two classes and set
       a display of their own; a rule naming one class loses to them however
       far down the file it sits, because a media query adds no weight. Shapes
       one, three and four were showing both menus at once on a phone until
       this line was made to match them. */
    .site-header .site-header__links {
        display: none;
    }

    .site-header__menu {
        display: block;
        margin-inline-start: auto;
    }

    /* The button is the browser's own summary, and the panel is the rest of
       the element — no script, no overlay to dismiss, and it closes by
       pressing the button again. */
    .site-header__menu > summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-inline-start: auto;
        border: var(--border-width) solid var(--line);
        border-radius: var(--radius);
        list-style: none;
        cursor: pointer;
    }

    .site-header__menu > summary::-webkit-details-marker {
        display: none;
    }

    /* Three lines, drawn rather than written, so the button needs no font and
       no picture. */
    .site-header__bars,
    .site-header__bars::before,
    .site-header__bars::after {
        display: block;
        width: 1.15rem;
        height: 2px;
        background: var(--text);
    }

    .site-header__bars {
        position: relative;
    }

    .site-header__bars::before,
    .site-header__bars::after {
        content: '';
        position: absolute;
        inset-inline-start: 0;
    }

    .site-header__bars::before {
        top: -0.35rem;
    }

    .site-header__bars::after {
        top: 0.35rem;
    }

    .site-header__nav {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: min(20rem, 84vw);
        padding: 1.5rem 1.25rem;
        background: var(--page);
        border-inline-end: var(--border-width) solid var(--line);
        box-shadow: var(--shadow-pop);
        overflow-y: auto;
        z-index: 40;
    }

    .site-header__nav .menu-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
    }

    /* Inside the panel a drop-down opens in place, under its own name. There
       is no room beside it for a floating list. */
    .menu-list__children {
        position: static;
        margin: 0.2rem 0 0.4rem;
        border: 0;
        box-shadow: none;
        padding-inline-start: 1rem;
    }

    /* The strip and the accounts go inside the menu, so the phone line holds
       the logo and the basket and nothing else. */
    .site-header__strip {
        display: none;
    }

    .site-header__side .socials {
        display: none;
    }

    .site-header__inside-menu {
        display: block;
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: var(--border-width) solid var(--line);
    }

    .site-header__inside-menu .socials {
        margin-top: 0.75rem;
    }

    .site-header__logo {
        height: 32px;
    }

    .site-header__main .site-header__inner,
    .site-header--2 .site-header__main .site-header__inner,
    .site-header--4 .site-header__main .site-header__inner {
        display: flex;
        min-height: 64px;
        gap: 0.75rem;
        padding-block: 0.6rem;
    }

    .site-header--2 .site-header__side,
    .site-header--4 .site-header__side {
        margin-inline-start: 0;
    }

    /* Nothing hangs on a narrow phone: the width it would take is the reader's. */
    .occasion-well {
        display: none;
    }

    /* The columns of the footer come one under another. No folding and no
       accordion: a footer that has to be opened is a footer nobody opens.

       Named with the footer in front of it for the same reason the header list
       is: the rules that lay each shape out name two classes, and a rule naming
       one loses to them however far down the file it sits. Without this the
       columns stayed side by side on a phone, four of them squeezed into a
       telephone's width. */
    .site-footer .site-footer__inner {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding-block: 2rem;
    }

    /* Except the single bar, which becomes two columns rather than one. */
    .site-footer--4 .site-footer__inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* On a phone the three tracks become one, and the closing line keeps its
       place in the middle with the accounts under it. */
    .site-footer__bottom-inner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0.75rem;
    }

    .site-footer__bottom-side:empty {
        display: none;
    }

    .site-footer__bottom-side--end {
        justify-content: center;
    }

    /* Two columns of links is one column on a phone. */
    .site-footer__column .menu-list--split {
        column-count: 1;
    }
}

/* One column on a phone, always. Nothing here scrolls sideways. */
@media (max-width: 48rem) {
    .beside,
    .lead,
    .cards,
    .year-grid,
    .board-row,
    .form-page--2 .form-page__body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A column placed by hand must be released here, or asking for column two
       of a one-column grid makes a second column and the page scrolls
       sideways. */
    .beside__image,
    .beside__text,
    .form-page--2 .form-page__aside,
    .form-page--2 .form-page__main {
        grid-column: auto;
        grid-row: auto;
    }

    .row-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .member--beside {
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* Two books to a row on a phone, and no empty places: an empty place is
       there to finish a line, and a line that would sit under nothing is worse
       than a short one. */
    .shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shelf__stand {
        min-height: 13rem;
    }

    .shelf__stand .cover {
        max-height: 12rem;
    }

    .shelf__stand .cover--year {
        height: 12rem;
    }

    .shelf__stand--empty {
        display: none;
    }

    .phone {
        grid-template-columns: minmax(0, 1fr);
    }

    .page {
        padding: 1.75rem 1rem 3rem;
    }

    .page__title {
        font-size: 1.6rem;
    }
}

/* ---------- the home page ---------- */

/* The logo leads home now, and a link must not look like one: the brand keeps
   exactly the face it had when it was a plain box. */
.site-header__brand {
    color: inherit;
    text-decoration: none;
}

.home-block__head {
    max-width: 44rem;
    margin: 0 auto 1.75rem;
    text-align: center;
}

.home-block__title {
    margin: 0 0 0.5rem;
    color: var(--headings);
    font-size: 1.7rem;
}

.home-block__sentence {
    margin: 0;
    color: var(--text-quiet);
}

.home-block__more {
    margin: 1.75rem 0 0;
    text-align: center;
}

/* ---------- the divider between blocks ---------- */

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.divider--small {
    margin: 1.25rem auto;
}

.divider--medium {
    margin: 2.5rem auto;
}

.divider--large {
    margin: 4rem auto;
}

/* An empty space is exactly that: its size is its whole meaning. */
.divider--form-1 {
    height: 0;
}

.divider--form-2 .divider__line {
    width: 100%;
    border-top: var(--border-width) solid var(--line);
}

.divider--form-3 .divider__line {
    width: 7rem;
    border-top: var(--border-width-strong) solid var(--line-strong);
}

/* A line fading out at both ends — drawn with the theme's own line colour,
   fading to nothing. */
.divider--form-4 .divider__line {
    width: 100%;
    height: var(--border-width);
    background: linear-gradient(to left, transparent, var(--line-strong), transparent);
}

.divider--form-5 .divider__side,
.divider--form-6 .divider__side {
    width: 6rem;
    border-top: var(--border-width) solid var(--line);
}

.divider--form-5 .divider__diamond {
    width: 0.6rem;
    height: 0.6rem;
    border: var(--border-width) solid var(--line-strong);
    transform: rotate(45deg);
}

/* The association logo, very small and light grey like the partners' logos:
   it is a coloured picture, not a drawn shape, so it never takes the theme
   colour — and left as it is, it could vanish on a dark theme or look
   crowded at this size. */
.divider--form-6 .divider__logo {
    max-height: 1.75rem;
    max-width: 5rem;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.45;
}

/* ---------- the slider ---------- */

/* It turns by the stylesheet alone. The track carries every slide side by
   side; a keyframe walk shows each one for the owner's seconds. The dots are
   labels for hidden radios: the first press stops the walk for good and
   stands on that slide — and with reduced motion the walk never starts. */
.home-slider {
    position: relative;
}

.home-slider__window {
    overflow: hidden;
    border-radius: var(--radius);
}

.home-slider__track {
    display: flex;
    align-items: stretch;
    width: calc(var(--slides) * 100%);
}

.home-slider--count-2 .home-slider__track {
    animation: home-turn-2 calc(var(--slides) * var(--slide-seconds)) linear infinite;
}

.home-slider--count-3 .home-slider__track {
    animation: home-turn-3 calc(var(--slides) * var(--slide-seconds)) linear infinite;
}

.home-slider--count-4 .home-slider__track {
    animation: home-turn-4 calc(var(--slides) * var(--slide-seconds)) linear infinite;
}

.home-slider--count-5 .home-slider__track {
    animation: home-turn-5 calc(var(--slides) * var(--slide-seconds)) linear infinite;
}

.home-slider--count-6 .home-slider__track {
    animation: home-turn-6 calc(var(--slides) * var(--slide-seconds)) linear infinite;
}

/* The first press on a dot ends the walk and stands on that slide. */
.home-slider:has(.home-slider__radio:checked) .home-slider__track {
    animation: none;
}

.home-slider:has(.home-slider__radio:nth-of-type(1):checked) .home-slider__track {
    transform: translateX(0);
}

.home-slider:has(.home-slider__radio:nth-of-type(2):checked) .home-slider__track {
    transform: translateX(calc(100% / var(--slides)));
}

.home-slider:has(.home-slider__radio:nth-of-type(3):checked) .home-slider__track {
    transform: translateX(calc(2 * 100% / var(--slides)));
}

.home-slider:has(.home-slider__radio:nth-of-type(4):checked) .home-slider__track {
    transform: translateX(calc(3 * 100% / var(--slides)));
}

.home-slider:has(.home-slider__radio:nth-of-type(5):checked) .home-slider__track {
    transform: translateX(calc(4 * 100% / var(--slides)));
}

.home-slider:has(.home-slider__radio:nth-of-type(6):checked) .home-slider__track {
    transform: translateX(calc(5 * 100% / var(--slides)));
}

.home-slide {
    position: relative;
    display: grid;
    width: calc(100% / var(--slides));
    min-height: clamp(22rem, 42vw, 32rem);
    flex-shrink: 0;
    overflow: hidden;
}

/* Form one: the picture across the whole width and the writing over it. */
.home-slide--form-1 .home-slide__media {
    position: absolute;
    inset: 0;
}

.home-slide--form-1 .home-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-slide__veil {
    position: absolute;
    inset: 0;
    background: var(--strip);
    opacity: 0.45;
}

.home-slide--form-1 .home-slide__content {
    position: relative;
    z-index: 1;
    align-self: center;
    justify-self: start;
    max-width: 34rem;
    padding: 2.5rem;
    color: var(--on-strip);
}

.home-slide--form-1 .home-slide__title,
.home-slide--form-1 .home-slide__kicker {
    color: var(--on-strip);
}

.home-slide--form-1 .home-slide__body {
    color: var(--on-strip-quiet);
}

/* Form two: halves — the picture on one side and the writing on the other. */
.home-slide--form-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface);
}

.home-slide--form-2 .home-slide__media--half {
    order: 2;
    min-height: 0;
}

.home-slide--form-2 .home-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-slide--form-2 .home-slide__content {
    order: 1;
    align-self: center;
    padding: 2.5rem;
}

/* Form three: writing alone, on the theme's colour with its decoration. */
.home-slide--form-3 {
    background-color: var(--strip);
    background-image: var(--decoration-image);
}

.home-slide--form-3 .home-slide__content {
    align-self: center;
    justify-self: center;
    max-width: 38rem;
    padding: 2.5rem;
    text-align: center;
    color: var(--on-strip);
}

.home-slide--form-3 .home-slide__title,
.home-slide--form-3 .home-slide__kicker {
    color: var(--on-strip);
}

.home-slide--form-3 .home-slide__body {
    color: var(--on-strip-quiet);
}

/* Form four: two or three square pictures in small columns, the writing
   beside them. */
.home-slide--form-4 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    background: var(--surface);
}

.home-slide--form-4 .home-slide__content {
    padding: 2.5rem;
}

.home-slide--form-4 .home-slide__columns {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.home-slide--form-4 .home-slide__square {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-small);
}

.home-slide--form-4 .home-slide__square .home-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-slide__kicker {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--text-quiet);
}

.home-slide__title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    color: var(--headings);
}

.home-slide__body {
    margin: 0 0 1.1rem;
    color: var(--text-quiet);
}

.home-slide__button {
    display: inline-block;
}

/* The dots under the slide, showing how many slides there are. */
.home-slider__dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 0 0;
}

.home-slider__dot {
    width: 0.8rem;
    height: 0.8rem;
    border: var(--border-width-strong) solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}

.home-slider__dot:hover {
    border-color: var(--primary);
}

.home-slider:has(.home-slider__radio:nth-of-type(1):checked) .home-slider__dot:nth-of-type(1),
.home-slider:has(.home-slider__radio:nth-of-type(2):checked) .home-slider__dot:nth-of-type(2),
.home-slider:has(.home-slider__radio:nth-of-type(3):checked) .home-slider__dot:nth-of-type(3),
.home-slider:has(.home-slider__radio:nth-of-type(4):checked) .home-slider__dot:nth-of-type(4),
.home-slider:has(.home-slider__radio:nth-of-type(5):checked) .home-slider__dot:nth-of-type(5),
.home-slider:has(.home-slider__radio:nth-of-type(6):checked) .home-slider__dot:nth-of-type(6) {
    background: var(--primary);
    border-color: var(--primary);
}

/* The walk itself, one set of steps per count: each slide holds its segment,
   slides over, and the last sweeps back to the first. In this right-to-left
   page the track moves rightward, so the steps are positive. */
@keyframes home-turn-2 {
    0%, 45% { transform: translateX(0); }
    50%, 95% { transform: translateX(50%); }
    100% { transform: translateX(0); }
}

@keyframes home-turn-3 {
    0%, 28% { transform: translateX(0); }
    33.33%, 61.33% { transform: translateX(33.3333%); }
    66.67%, 95% { transform: translateX(66.6667%); }
    100% { transform: translateX(0); }
}

@keyframes home-turn-4 {
    0%, 21% { transform: translateX(0); }
    25%, 46% { transform: translateX(25%); }
    50%, 71% { transform: translateX(50%); }
    75%, 95% { transform: translateX(75%); }
    100% { transform: translateX(0); }
}

@keyframes home-turn-5 {
    0%, 17% { transform: translateX(0); }
    20%, 37% { transform: translateX(20%); }
    40%, 57% { transform: translateX(40%); }
    60%, 77% { transform: translateX(60%); }
    80%, 95% { transform: translateX(80%); }
    100% { transform: translateX(0); }
}

@keyframes home-turn-6 {
    0%, 14% { transform: translateX(0); }
    16.67%, 31% { transform: translateX(16.6667%); }
    33.33%, 47.6% { transform: translateX(33.3333%); }
    50%, 64.3% { transform: translateX(50%); }
    66.67%, 81% { transform: translateX(66.6667%); }
    83.33%, 95% { transform: translateX(83.3333%); }
    100% { transform: translateX(0); }
}

/* ---------- the statistics ---------- */

.home-stats {
    position: relative;
    border-radius: var(--radius);
}

.home-stats__inner {
    position: relative;
    z-index: 1;
}

.home-stats__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.5rem;
    justify-items: center;
    text-align: center;
}

.home-stat {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
}

.home-stat__icon svg {
    width: 3rem;
    height: 3rem;
    color: var(--primary);
}

.home-stat__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--headings);
}

.home-stat__label {
    color: var(--text-quiet);
}

/* Form one: one row with upright separators between the numbers. */
.home-stats--form-1 .home-stat + .home-stat {
    border-inline-start: var(--border-width) solid var(--line);
    padding-inline-start: 1.5rem;
}

.home-stats--form-1 .home-stats__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 0;
}

.home-stats--form-1 .home-stat {
    padding-inline: 1.5rem;
}

/* Form two: cards. */
.home-stats--form-2 .home-stat {
    width: 100%;
    padding: 1.5rem 1rem;
    background: var(--surface);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Form three: the first number large and the rest small. */
.home-stats--form-3 .home-stats__items {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.home-stats--form-3 .home-stat:first-child {
    grid-row: span 2;
    align-self: center;
}

.home-stats--form-3 .home-stat:first-child .home-stat__value {
    font-size: 3.4rem;
}

.home-stats--form-3 .home-stat:first-child .home-stat__icon svg {
    width: 4rem;
    height: 4rem;
}

/* Form four: on the theme's colour. */
.home-stats--form-4 {
    background: var(--strip);
    padding: 2.5rem 1.5rem;
}

.home-stats--form-4 .home-stat__value,
.home-stats--form-6 .home-stat__value {
    color: var(--on-strip);
}

.home-stats--form-4 .home-stat__label,
.home-stats--form-6 .home-stat__label {
    color: var(--on-strip-quiet);
}

.home-stats--form-4 .home-stat__icon svg,
.home-stats--form-6 .home-stat__icon svg {
    color: var(--strip-accent);
}

.home-stats--form-4 .home-block__title,
.home-stats--form-6 .home-block__title {
    color: var(--on-strip);
}

.home-stats--form-4 .home-block__sentence,
.home-stats--form-6 .home-block__sentence {
    color: var(--on-strip-quiet);
}

/* Form five: huge numbers with room to breathe. */
.home-stats--form-5 {
    padding: 3.5rem 1.5rem;
}

.home-stats--form-5 .home-stats__items {
    gap: 3rem;
}

.home-stats--form-5 .home-stat__value {
    font-size: 3.2rem;
}

/* Form six: over a dimmed picture. The dimming is the theme's strip colour at
   a fixed depth — set by the system, not a choice. */
.home-stats--form-6 {
    overflow: hidden;
    padding: 3rem 1.5rem;
}

.home-stats__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-stats__veil {
    position: absolute;
    inset: 0;
    background: var(--strip);
    opacity: 0.72;
}

/* Form seven: the writing on one side and the numbers on the other. */
.home-stats--form-7 .home-stats__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 2rem;
    align-items: center;
}

.home-stats--form-7 .home-block__head {
    margin: 0;
    text-align: start;
}

/* ---------- the news and publications blocks ---------- */

/* Fewer pieces than the chosen count: what exists is shown at its own size
   and centred — never stretched to fill the width. */
.home-news__cards,
.home-covers {
    justify-content: center;
}

.home-covers .card-item .cover {
    align-self: center;
}

/* Cards with the covers held to one height, the shelf keeping natural ones. */
.home-covers--even .cover {
    height: 16rem;
    width: auto;
    object-fit: contain;
}

.home-shelf {
    justify-content: center;
}

/* ---------- the board block ---------- */

.home-board__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    text-align: center;
}

.home-board__row .member,
.home-board__cards .member {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
}

.home-board__cards {
    justify-content: center;
}

.home-board__split {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
}

.home-board__chief {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    text-align: center;
}

.home-board__chief .member__image {
    width: 11rem;
    height: 11rem;
    font-size: 3.5rem;
}

.home-board__others {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    text-align: center;
}

.home-board__others .member {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
}

.home-board__others .member__image {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.6rem;
}

/* The chairman's word: one voice with its owner's photo — not a list. */
.home-board__word {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    max-width: 46rem;
    margin: 0 auto;
}

.home-board__quote {
    margin: 0;
    padding-inline-start: 1.25rem;
    border-inline-start: var(--border-width-strong) solid var(--primary);
}

.home-board__quote p {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    color: var(--text);
}

/* ---------- the invitation blocks ---------- */

.home-call__strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
    background: var(--strip);
    border-radius: var(--radius);
}

.home-call__line {
    margin: 0;
    font-size: 1.2rem;
    color: var(--on-strip);
}

.home-call__beside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.home-call__image {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

.home-call__text {
    font-size: 1.1rem;
    color: var(--text);
}

.home-call__text p {
    margin-top: 0;
}

/* Centred with the decoration behind and the symbol above, in theme colour. */
.home-call__centre {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: var(--surface);
    background-image: var(--decoration-image);
    border-radius: var(--radius);
}

.home-call__icon svg {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--primary);
}

.home-call__centre-text {
    margin: 0;
    max-width: 34rem;
    font-size: 1.2rem;
    color: var(--text);
}

/* Over a dimmed picture. */
.home-call__cover {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
}

.home-call__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-call__veil {
    position: absolute;
    inset: 0;
    background: var(--strip);
    opacity: 0.72;
}

.home-call__over {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.home-call__over .home-call__centre-text {
    color: var(--on-strip);
}

/* The picture in one half and the call with the whole form in the other. */
.home-call__half {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.home-call__half .home-call__image {
    height: 100%;
}

.home-call__form-side .public-form {
    margin-top: 1rem;
}

/* ---------- the partners ---------- */

/* Unified grey, taking their colour back under the pointer. On a touch screen
   there is no pointer to pass, and they simply stay grey. */
.home-partners__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.home-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.5rem;
    aspect-ratio: 1 / 1;
    padding: 1rem;
}

.home-partner__logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: var(--transition);
}

.home-partner:hover .home-partner__logo {
    filter: none;
    opacity: 1;
}

/* Form two: a grid of bordered squares. */
.home-partners--form-2 .home-partner {
    background: var(--surface);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-small);
}

/* Form three: on the theme's colour. */
.home-partners--form-3 {
    background: var(--strip);
    border-radius: var(--radius);
}

.home-partners--form-3 .home-partners__inner {
    padding: 2.5rem 1.5rem;
}

.home-partners--form-3 .home-block__title {
    color: var(--on-strip);
}

.home-partners--form-3 .home-block__sentence {
    color: var(--on-strip-quiet);
}

/* Form four: the sentence in the middle and rows of four. The row is held to
   four by the container's width; the flex wrap centres a short last row on
   its own — «والصف الناقص يتوسّط». */
.home-partners--form-4 .home-partners__grid {
    max-width: calc(4 * 8.5rem + 3 * 1.25rem);
    margin: 0 auto;
}

/* ---------- the home page on a phone ---------- */

@media (max-width: 48rem) {
    /* The writing leaves the picture: the picture above and the writing under
       it, and the whole face capped near seventy percent of the screen so the
       visitor sees there is more below. */
    .home-slide {
        min-height: 0;
        max-height: 70vh;
        grid-template-columns: minmax(0, 1fr);
        overflow-y: hidden;
    }

    .home-slide--form-1 .home-slide__media {
        position: static;
        order: 1;
        max-height: 34vh;
    }

    .home-slide--form-1 .home-slide__image,
    .home-slide--form-2 .home-slide__image {
        max-height: 34vh;
    }

    .home-slide--form-1 .home-slide__veil {
        display: none;
    }

    .home-slide--form-1 .home-slide__content {
        position: static;
        order: 2;
        max-width: none;
        color: var(--text);
    }

    .home-slide--form-1 .home-slide__title,
    .home-slide--form-1 .home-slide__kicker {
        color: var(--headings);
    }

    .home-slide--form-1 .home-slide__body {
        color: var(--text-quiet);
    }

    .home-slide--form-2 .home-slide__media--half {
        order: 1;
    }

    .home-slide--form-2 .home-slide__content {
        order: 2;
    }

    .home-slide--form-1 .home-slide__content,
    .home-slide--form-2 .home-slide__content,
    .home-slide--form-3 .home-slide__content,
    .home-slide--form-4 .home-slide__content {
        padding: 1.25rem 1rem 1.5rem;
    }

    /* The squares stay side by side — they are squares, and stacked they
       would make the slide three screens tall. */
    .home-slide--form-4 .home-slide__columns {
        order: 1;
        padding: 1rem 1rem 0;
    }

    .home-slide--form-4 .home-slide__content {
        order: 2;
    }

    /* The button across the screen, and the dots under it in the middle. */
    .home-slide__button {
        display: block;
        width: 100%;
        text-align: center;
    }

    .home-stats--form-7 .home-stats__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-stats--form-7 .home-block__head {
        text-align: center;
    }

    .home-stats__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-board__split {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .home-board__word {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .home-board__quote {
        border-inline-start: none;
        border-top: var(--border-width-strong) solid var(--primary);
        padding-inline-start: 0;
        padding-top: 1rem;
    }

    .home-call__beside {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The call and the form above, the picture under them. */
    .home-call__half {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-call__half .home-call__image {
        order: 2;
        height: auto;
    }

    .home-call__form-side {
        order: 1;
    }

    .home-partners--form-4 .home-partners__grid {
        max-width: calc(2 * 8.5rem + 1.25rem);
    }
}

/* ---------- the home page: less motion, and print ---------- */

/* These two blocks stand at the very end of the file on purpose. The slider's
   turn is written as `.home-slider--count-N .home-slider__track` — two class
   names — so stopping it needs the same weight AND a later position: an
   equal-weight rule written earlier loses the tie, and the screenshots caught
   exactly that — the slider kept turning under reduced motion until this
   block moved here. */
@media (prefers-reduced-motion: reduce) {
    /* The slider stands still on its first slide. The dots keep working — a
       press jumps, and a jump is not motion. */
    .home-slider .home-slider__track {
        animation: none;
    }
}

/* Print shows the first slide alone: the track stands still at the start,
   the window is one slide wide, and the sisters and the dots are not
   printed. The dimming veils go too — a dimmed picture on paper is a grey
   smear. No colours here: print's colours live in the one print block above. */
@media print {
    .home-slider .home-slider__track {
        animation: none;
        transform: none;
        width: 100%;
    }

    .home-slider .home-slide {
        width: 100%;
    }

    .home-slider .home-slide:not(:first-of-type),
    .home-slider .home-slider__dots,
    .home-slide .home-slide__veil,
    .home-stats .home-stats__veil,
    .home-call .home-call__veil {
        display: none;
    }
}

/* ---------- the projects: the card ---------- */

/* One card for the whole site in one of three designs. The projects page, the
   category page and the home block all draw the same element — there is no
   card per list and no design per list, so a design changed once changes
   everywhere and cannot fall out of step with itself.

   Three in a row, counted and not fitted, exactly as the news cards above are
   and for the same reason: letting the browser fit as many as the width allows
   puts four in a row, and four columns are too narrow for the titles this site
   carries. */
.pcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(1.5rem * var(--space));
}

/* The picture-beside design gets two to a row and not three. A card that puts
   its picture on the side spends part of its width on the picture, and a third
   of a page minus a picture leaves the title wrapping one word to a line —
   which is what the first browser check showed. The design decides how many
   fit in a row, because that is a fact about the design and not a taste. */
.pcards--design-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The card stopped being one link in P-018: it carries a form now, and a form
   cannot live inside an <a>. What replaces «the whole card is pressable» is the
   two largest things on it — the picture and the title — each leading to the
   project. The rest is the giving, and it is pressable in its own right. */
.pcard {
    position: relative;
    display: grid;
    overflow: hidden;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: inherit;
    transition: var(--transition);
}

.pcard:hover {
    box-shadow: var(--hover-shadow);
    transform: var(--hover-transform);
}

.pcard__media {
    position: relative;
    display: block;
    min-width: 0;
}

.pcard__media-link {
    display: block;
    height: 100%;
}

/* Square, because the picture the owner is required to choose is square: the
   same file goes into three different frames and only a square source comes
   through all three uncropped. */
.pcard__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pcard__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.45rem;
    justify-items: start;
    align-content: start;
    padding: calc(1rem * var(--space));
    min-width: 0;
}

/* The short writing — category, title, sentence, bar — as a piece that can be
   moved. **It is nothing at all in two designs out of three**: `display:
   contents` leaves no box, no row and no gap behind it, so its children stand
   in the body's own grid exactly as they stood before it existed. Only «صورة
   على الجنب» makes a column of it, because only there is there a column. */
.pcard__text {
    display: contents;
}

/* On the picture, where P-018 §3 puts it — and above the veil of design three
   so it is never dimmed with the photograph under it. */
.pcard__badge {
    position: absolute;
    z-index: 2;
    inset-block-start: 0.6rem;
    inset-inline-start: 0.6rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.8rem;
}

/* A project with no picture cannot be published, so this is the door nobody
   comes through — and a badge with nowhere to sit is still a badge to read. */
.pcard__badge--in-body {
    position: static;
}

.pcard__title-link {
    color: inherit;
    text-decoration: none;
}

.pcard__category {
    color: var(--text-quiet);
    font-size: 0.85rem;
}

.pcard__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--headings);
}

.pcard__sentence {
    color: var(--text-quiet);
    font-size: 0.95rem;
}

.pcard__amounts {
    color: var(--text-quiet);
    font-size: 0.9rem;
}

/* The progress bar, shared by the card and the page: one bar and one rule, so
   the two can never draw the same figure differently. */
.pbar {
    display: block;
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.pbar__fill {
    display: block;
    height: 100%;
    background: var(--primary);
}

/* ---------- the giving, on the card itself (P-018) ---------- */

/* It spans the body's whole width whatever the design, so the buttons under it
   are the same buttons in all three. */
.pcard__give,
.pcard__answer {
    justify-self: stretch;
    width: 100%;
}

.pcard__answer {
    margin: 0;
    padding: 0.4rem 0.7rem;
    border: var(--border-width) solid var(--ok-border);
    border-radius: var(--radius-small);
    background: var(--ok-bg);
    color: var(--text);
    font-size: 0.9rem;
}

/* One amount, not several. The whole choice is pressable, and the tick stays in
   the page rather than being hidden: it is what a browser with no stylesheet
   still shows, and what says «chosen» to anybody reading with something other
   than his eyes. */
/* **One rule for the three designs and for both widths, and no design is
   excepted** — the owner's own words. The choices fill the card and divide it
   equally however many there are: one takes the whole width, two take halves,
   three and four take a row apiece on a wide screen.

   **And one thing outranks the division: the figure and its currency stay whole
   and readable.** That is what `--choice-floor` is — a floor under the width of
   a single choice, not a number of columns. `auto-fit` lays as many choices in
   a row as can each keep that floor and drops the rest to the next row; the
   tracks that stay are all `1fr`, so whatever ends up in a row is divided
   evenly. A readable choice over two rows beats four cramped ones —
   «الأولوية للقراءة لا للتناسق».

   So the phone does not get a different rule; it gets a bigger floor, because a
   quarter of a phone is not a readable width. Two to a row there, and four
   become two and two rather than three and an orphan.

   **The floor is a measurement, not a taste.** «1000 د.ك» on one line is 86px
   at the card's own size, and the cell's padding and borders are 17.6px — so a
   cell reads its figure whole at 103.6px, which is 6.5rem. Written any smaller
   and the figure tears away from its currency onto a second line; and the
   answer to that is never a smaller type, because the rule forbids it in the
   same breath: «أو يصغر عن حدّه». Measured in T-024. */
.pcard__choices {
    --choice-floor: 6.5rem;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--choice-floor), 1fr));
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0;
    border: 0;
}

.pcard__choice {
    display: grid;
    gap: 0.2rem;
    justify-items: start;
    align-content: start;
    padding: 0.45rem 0.5rem;
    border: var(--border-width) solid var(--line-strong);
    border-radius: var(--radius-small);
    background: var(--surface);
    cursor: pointer;
}

.pcard__choice:has(input:checked) {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.pcard__choice-amount {
    font-weight: 700;
    color: var(--headings);
}

/* Hidden until its own amount is chosen — the browser's own work and no script.
   Four sentences at once on a card this narrow is four sentences nobody reads,
   and the one that matters is the one he just chose. */
.pcard__choice-sentence {
    display: none;
    color: var(--text-quiet);
    font-size: 0.85rem;
}

.pcard__choice:has(input:checked) .pcard__choice-sentence {
    display: block;
}

/* No ready amounts: what the buttons will give, written out before anything is
   pressed. */
.pcard__default {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
    font-weight: 700;
    color: var(--headings);
}

.pcard__default-label {
    font-weight: 400;
    color: var(--text-quiet);
}

.pcard__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pcard__button {
    flex: 1 1 8rem;
    text-align: center;
}

/* The second is the quieter of the two: it keeps the visitor where he is, and
   the first is the one that takes him on. */
.pcard__button--quiet {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--text);
}

/* Design one: the picture above the writing. */
.pcard--design-1 {
    grid-template-columns: minmax(0, 1fr);
}

/* Design two: the picture beside the writing — the default, and the one shape
   that reads the same in a wide row and in a narrow column.

   **The picture is beside the writing and above nothing else.** It shared a row
   with the amounts until the owner saw what that costs: a row is as tall as the
   tallest thing in it, so every amount added to a project made the writing
   column taller, and a picture told to fill that column came out a tall sliver
   — «وحشة ولا تُقبل». The cure is the cause and not the mark: the giving leaves
   the column altogether.

   Two rows, then. The top one is the picture and the short writing beside it.
   The one under it is the whole width of the card: the amounts, then the two
   buttons. And the picture is square at the width of its own column — the
   square the owner uploaded — whatever stands under it, four amounts or one or
   none. The body itself is `display: contents` here, so its three pieces are
   placed by the card's grid rather than stacked inside a box that cannot span
   a column it does not own. */
.pcard--design-2 {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
}

.pcard--design-2 .pcard__body {
    display: contents;
}

.pcard--design-2 .pcard__media {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}

/* The writing takes the look the body had — its grid, its gap, its padding —
   because it is standing in the body's place in this design. */
.pcard--design-2 .pcard__text {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 0.45rem;
    justify-items: start;
    align-content: start;
    padding: calc(1rem * var(--space));
    min-width: 0;
}

/* With something under it, the writing gives up its own floor: what separates it
   from the giving becomes the same 0.45rem the other two designs leave there.

   What is left over when cards in a row are made the same height falls here too,
   between the writing and the giving — and that is where it should fall: the
   giving keeps its own foot at the card's floor, so **the buttons of every card
   in a row stand on one line** however much writing is above them. */
.pcard--design-2 .pcard__text:not(:last-child) {
    padding-block-end: 0.45rem;
}

/* The whole width of the card, under the picture and the writing both. The
   body's side padding comes back as a margin, since these are the card's own
   items here and not the body's. */
.pcard--design-2 .pcard__give,
.pcard--design-2 .pcard__answer {
    grid-column: 1 / -1;
    width: auto;
    margin-inline: calc(1rem * var(--space));
}

.pcard--design-2 .pcard__answer {
    margin-block-end: 0.45rem;
}

/* At the card's floor, not floating in the middle of what is left over. Cards
   in a row are made the same height by the row, and the space that leaves over
   has to fall somewhere; putting the giving at the end sends it above the
   giving instead of through it, **so the buttons of the cards in a row stand on
   one line** — measured, not assumed: they stood on three different lines
   before this rule. */
.pcard--design-2 .pcard__give {
    align-self: end;
    margin-block-end: calc(1rem * var(--space));
}

/* Design three: the writing over the dimmed picture. The veil sits between the
   two so the words stay readable whatever the picture is. */
.pcard--design-3 {
    grid-template-columns: minmax(0, 1fr);
    min-height: 16rem;
}

.pcard--design-3 .pcard__media {
    position: absolute;
    inset: 0;
}

.pcard--design-3 .pcard__image {
    height: 100%;
    aspect-ratio: auto;
}

.pcard__veil {
    position: absolute;
    inset: 0;
    background: var(--strip);
    opacity: 0.55;
}

.pcard--design-3 .pcard__body {
    align-self: end;
    color: var(--on-strip);
}

.pcard--design-3 .pcard__title,
.pcard--design-3 .pcard__sentence,
.pcard--design-3 .pcard__amounts,
.pcard--design-3 .pcard__category {
    color: var(--on-strip);
}

.pcard--design-3 .pbar {
    background: var(--strip-line);
}

/* The writing of design three sits over a photograph, and a photograph is not a
   colour — so nothing here is left to the veil alone.

   The words the theme guarantees a pair for take `--on-strip`, which every theme
   defines against `--strip` and against nothing else. **And everything that is
   pressed takes a solid ground of its own**: a choice and a button are read at a
   glance and pressed by a finger, and neither can be asked to stand on whatever
   pixels happen to be behind it. */
.pcard--design-3 .pcard__choice,
.pcard--design-3 .pcard__answer {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line-strong);
}

.pcard--design-3 .pcard__choice-amount {
    color: var(--headings);
}

/* The figure gets a ground of its own too. It is not pressed, but it is the one
   thing on the card a visitor reads as a number before he decides — and a
   number half-lost in a photograph is a number he has to squint at. */
.pcard--design-3 .pcard__default {
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--headings);
}

.pcard--design-3 .pcard__default-label {
    color: var(--text-quiet);
}

.pcard--design-3 .pcard__button--quiet {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line-strong);
}

/* ---------- the projects: the two listing pages ---------- */

.page__empty {
    color: var(--text-quiet);
}

/* The sub-categories, inside their parent's page. Two levels reach the menu
   and the third is reached from here — the owner's ruling. */
.category-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 calc(1.5rem * var(--space));
}

.category-bar__entry {
    display: inline-flex;
    padding: 0.35rem 0.9rem;
    border: var(--border-width) solid var(--line-strong);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}

/* ---------- the projects: one project's page ---------- */

/* The five shapes draw the same ten blocks in the same order and differ in one
   thing: where the donation box sits. Three of them keep it in the flow, so
   they need no rule at all here — the page is one column and the box is a
   block in it, at the place the template put it. The two that put it in a side
   column are the two written below. */
.project {
    display: grid;
    gap: calc(1.5rem * var(--space));
    align-items: start;
}

.project__main {
    display: grid;
    gap: calc(1.25rem * var(--space));
    align-content: start;
    min-width: 0;
}

.project--shape-1,
.project--shape-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
}

.project__side {
    min-width: 0;
}

/* Shape one, and the single declaration that is the whole difference between
   it and shape two: the box stays in front of the eye however far the reading
   runs past it. CSS alone — there is no script on this site. */
.project--shape-1 .project__side {
    position: sticky;
    top: calc(1rem * var(--space));
}

.project__media {
    display: block;
}

.project__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.project__head {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
}

.project__badge {
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.85rem;
}

.project__title {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--headings);
}

.project__facts {
    margin: 0;
    color: var(--text-quiet);
}

.project__facts a {
    color: inherit;
}

.project__progress {
    display: grid;
    gap: 0.4rem;
}

.project__amounts {
    margin: 0;
    color: var(--text-quiet);
}

.project__lead {
    margin: 0;
    font-size: 1.1rem;
}

.project__body {
    display: grid;
    gap: calc(1rem * var(--space));
    max-width: var(--reading-width);
}

.project__paragraph {
    margin: 0;
}

.project__paragraph-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.project__block {
    display: grid;
    gap: 0.6rem;
}

.project__countries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project__countries li {
    padding: 0.3rem 0.8rem;
    border: var(--border-width) solid var(--line);
    border-radius: 999px;
}

.project__stage {
    padding: calc(1rem * var(--space));
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.project__stage-title {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--headings);
}

.project__stage-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
    margin: 0.6rem 0 0;
}

.project__stage-images img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-small);
}

.project__share {
    margin: 0;
}

/* ---------- the projects: the donation box ---------- */

/* The running total is added up by this stylesheet and by nothing else. The
   counter is reset here, every chosen amount increments it by its own figure
   through a rule the page writes for itself, and the figure is read out of
   counter() below. No script runs anywhere on this site. */
.don {
    counter-reset: donation-total 0;
    display: grid;
    gap: 0.8rem;
    padding: calc(1rem * var(--space));
    border: var(--border-width-strong) solid var(--primary);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.don__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--headings);
}

.don__shut {
    margin: 0;
    color: var(--text-quiet);
}

.don__answer {
    margin: 0;
    padding: 0.5rem 0.8rem;
    border: var(--border-width) solid var(--ok-border);
    border-radius: var(--radius-small);
    background: var(--ok-bg);
}

.don__form {
    display: grid;
    gap: 0.8rem;
}

.don__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem;
}

/* A whole choice is pressable, not a small square beside a word. The tick
   itself stays in the page rather than being hidden: it is what a browser with
   no stylesheet at all still shows, and it is what says «chosen» to anybody
   reading the page with something other than his eyes. */
.don__choice {
    display: grid;
    gap: 0.25rem;
    justify-items: start;
    padding: 0.6rem;
    border: var(--border-width) solid var(--line-strong);
    border-radius: var(--radius-small);
    cursor: pointer;
}

.don__choice:has(input:checked) {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.don__amount {
    font-weight: 700;
    color: var(--headings);
}

.don__sentence {
    color: var(--text-quiet);
    font-size: 0.9rem;
}

.don__section {
    margin: 0;
    padding: 0.6rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-small);
}

.don__section-name {
    padding: 0 0.4rem;
    font-weight: 700;
    color: var(--headings);
}

.don__free,
.don__field {
    display: grid;
    gap: 0.3rem;
}

.don__label {
    color: var(--text-quiet);
}

.don__required {
    color: var(--error);
}

.don__free-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.don__hint {
    color: var(--text-quiet);
    font-size: 0.9rem;
}

.don__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.don__donor {
    display: grid;
    gap: 0.6rem;
}

.don__total {
    margin: 0;
    font-weight: 700;
    color: var(--headings);
}

/* The counter, read out. Anything ticked anywhere in the box has already
   incremented it by the time this element is reached, because a counter is
   read in document order and the total stands after the choices. */
.don__total-number::after {
    content: counter(donation-total);
}

/* A typed free amount cannot enter a CSS counter — a counter reads no value
   from a field. So the figure steps aside for the owner's own sentence the
   moment anything is typed, rather than going on showing a total that is
   missing what he just wrote. `:placeholder-shown` is what tells an empty box
   from a filled one with no script at all. */
.don__total-note {
    display: none;
    font-weight: 400;
    color: var(--text-quiet);
}

.don__total-note--always {
    display: inline;
}

.don:has(.don__free-input:not(:placeholder-shown)) .don__total-label,
.don:has(.don__free-input:not(:placeholder-shown)) .don__total-number,
.don:has(.don__free-input:not(:placeholder-shown)) .don__total-symbol {
    display: none;
}

.don:has(.don__free-input:not(:placeholder-shown)) .don__total-note {
    display: inline;
}

/* And when the owner never wrote that sentence, the whole line steps aside
   instead: an empty value is not drawn and leaves no gap. */
.don:has(.don__free-input:not(:placeholder-shown)) .don__total--no-note {
    display: none;
}

.don__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------- the projects: the video ---------- */

.video-poster {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 16rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--line);
}

.video-poster__media {
    position: absolute;
    inset: 0;
}

.video-poster__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-poster__veil {
    position: absolute;
    inset: 0;
    background: var(--strip);
    opacity: 0.45;
}

.video-poster__play {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.4rem;
    border: var(--border-width) solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    text-decoration: none;
    font-weight: 700;
}

/* The frame stands over the page on the one visit that asked for it. It is a
   whole page load and not a panel a script opened, so there is nothing to
   close and reopen: «إغلاق» is a link back to the project's own address. */
.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--page-veil);
}

.video-overlay__panel {
    width: min(64rem, 100%);
    display: grid;
    gap: 0.6rem;
}

.video-overlay__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--strip);
}

.video-overlay__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-overlay__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* ---------- the basket ----------

   Everything on this page is HTML the browser already knows: forms, buttons and
   one <details> for the question before emptying. There is no script here and
   no place for one — every action is a press, a POST and a redirect. */

.cart {
    display: grid;
    gap: 1.2rem;
    max-width: 68rem;
    margin-inline: auto;
}

/* Two columns, and the markup is written in the order of a phone: the projects,
   the contact details, the total, the button. The wide screen lifts the contact
   details into the second column by naming their cell and holds everything else
   to the first — so the reading order and the seeing order are one thing written
   once, and a screen reader meets what an eye meets.

   The rest name their column too. Without that, auto-placement would slide the
   total up beside the projects the moment the contact details took the cell it
   would otherwise have fallen into. */
.cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: start;
    gap: 1.2rem;
}

.cart__blocks {
    display: grid;
    gap: 1.2rem;
    grid-column: 1;
    grid-row: 1;
}

.cart__rule,
.cart__total-place,
.cart__pay,
.cart__ways {
    grid-column: 1;
}

/* The line that closes the basket and opens the paying. */
.cart__rule {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: var(--border-width) solid var(--line);
}

.cart__heading {
    margin: 0;
    color: var(--headings);
}

.cart__notice-name {
    font-weight: 700;
}

.cart__empty {
    margin: 0;
    color: var(--text-quiet);
}

.cart__block {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.cart__block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
}

.cart__block-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--headings);
}

.cart__block-title a {
    color: inherit;
    text-decoration: none;
}

/* `.cart__block-number` stood here with it until the project's number left every
   page a visitor sees — and a rule for a class nothing wears is a loose end. */
.cart__line-note {
    color: var(--text-quiet);
    font-size: 0.9rem;
}

.cart__zakat {
    padding: 0.15rem 0.6rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    color: var(--text-quiet);
    font-size: 0.85rem;
}

.cart__lines {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* What it is · what it costs · the button that takes it out on its own. Every
   line goes by itself: a line that could only be removed by taking the whole
   project out is a line the visitor is stuck with. */
.cart__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--border-width) solid var(--line);
}

.cart__line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cart__line-what {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}

.cart__line-section {
    font-weight: 700;
    color: var(--headings);
}

.cart__line-amount {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.cart__amount-input {
    width: 7rem;
    padding: 0.4rem 0.6rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--page);
    color: var(--text);
    font: inherit;
}

.cart__hint {
    margin: 0;
    color: var(--text-quiet);
    font-size: 0.9rem;
}

.cart__field {
    display: grid;
    gap: 0.3rem;
}

.cart__label {
    color: var(--text-quiet);
}

.cart__required {
    color: var(--error);
}

.cart__field input,
.cart__field textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--page);
    color: var(--text);
    font: inherit;
}

.cart__block-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* The two quiet ones stand side by side under the paying button, and the row
   is aligned to its top so the question before emptying opens downwards
   without dragging the button beside it along with it. */
.cart__ways {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem;
}

/* Worn by a button and by a link alike, because what a control looks like is
   about its weight on the page and not about whether it posts or goes. */
.cart__quiet-button {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-quiet);
    font: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}

/* Alone, across the column, with nothing beside it — the one thing on this page
   a visitor came to press. */
.cart__pay-button {
    width: 100%;
    padding-block: 0.9rem;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Beside the projects and out of the road between the basket and the paying
   button. It has no button of its own: what is written here rides with the
   press that uses it. */
.cart__donor {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    grid-column: 2;
    grid-row: 1;
}

.cart__donor-heading {
    margin: 0;
    font-size: 1.1rem;
    color: var(--headings);
}

/* The total is printed by the server, exact, fractions and all — this page has
   no counter to keep and nothing on it changes without a round trip. */
.cart__total {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--headings);
}

.cart__total-label {
    font-weight: 400;
    color: var(--text-quiet);
}

/* The one moment the figure steps aside: while an amount above it is being
   typed. At that instant the printed number is not the number, and the owner's
   own sentence says so. It is CSS's whole part in this page, and it does
   nothing at all when he has written no sentence — a number hidden for nothing
   would be worse than a number a second out of date. */
.cart__total-note {
    display: none;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-quiet);
}

.cart:has(.cart__amount-input:focus) .cart__total--has-note .cart__total-figure {
    display: none;
}

.cart:has(.cart__amount-input:focus) .cart__total--has-note .cart__total-note {
    display: inline;
}

.cart__empty-ask summary {
    display: inline-block;
}

.cart__empty-ask form {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    margin-top: 0.6rem;
}

/* ---------- the projects on a phone ---------- */

@media (max-width: 48rem) {
    /* One column, and the markup already stands in the right order: the
       projects, the contact details, the total, the button. Every cell named
       for the wide screen is unnamed here and falls back to where it was
       written. */
    .cart__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cart__blocks,
    .cart__donor {
        grid-column: 1;
        grid-row: auto;
    }

    /* The basket's lines stack: what it is, then what it costs beside the
       button that removes it. A three-column row on a phone squeezes an Arabic
       sentence into a column two words wide. */
    .cart__line {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cart__line-what {
        grid-column: 1 / -1;
    }

    /* One column for the cards, and one for the page. The five shapes all
       become the same single column here, and the box keeps the place in the
       order its shape gave it — which is the whole of what a shape means once
       there is no second column to put anything in. */
    .pcards {
        grid-template-columns: minmax(0, 1fr);
    }

    .pcard--design-2 {
        grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
    }

    /* **Not a different rule — a bigger floor.** A quarter of a phone is not a
       width a figure can be read in, so two to a row: three become two and one,
       four become two and two. The rule itself is the one written above, and it
       is the same rule for the three designs here as there. */
    .pcard__choices {
        --choice-floor: 8rem;
    }

    .project--shape-1,
    .project--shape-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sticky in one column would pin the box over the reading rather than
       beside it. */
    .project--shape-1 .project__side {
        position: static;
    }

    .project__title {
        font-size: 1.5rem;
    }
}

/* ---------- less motion, and print: the closing block of this file ----------

   The two closing blocks of the stylesheet, and they must stay the closing
   blocks. The slider's stop weighs exactly what the slider's turn weighs, and
   a tie between two rules of equal weight goes to whichever is written later —
   so the stop lives here, at the end, and a test pins it here. Anything added
   to the file after this point would silently take the tie and set the slider
   turning again under reduced motion, which is the defect T-010 found.

   Everything below that belongs to the projects is written into these same two
   blocks for that reason, rather than into two new ones after them. */
@media (prefers-reduced-motion: reduce) {
    .pcard {
        transition: none;
    }

    .pcard:hover {
        transform: none;
    }

    /* The slider stands still on its first slide. The dots keep working — a
       press jumps, and a jump is not motion. Repeated here, in the file's own
       closing block, so it keeps winning the tie. */
    .home-slider .home-slider__track {
        animation: none;
    }
}

@media print {
    /* A form is not printed: nothing on paper can be pressed. Neither is the
       overlay, nor the play button — a frame prints as a grey rectangle. */
    .don,
    .video-overlay,
    .video-poster__play,
    .project__share {
        display: none;
    }

    .project--shape-1,
    .project--shape-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .pcard__veil,
    .video-poster__veil {
        display: none;
    }

    /* Print shows the first slide alone: the track stands still at the start,
       the window is one slide wide, and the sisters and the dots are not
       printed. The dimming veils go too — a dimmed picture on paper is a grey
       smear. */
    .home-slider .home-slider__track {
        animation: none;
        transform: none;
        width: 100%;
    }

    .home-slider .home-slide {
        width: 100%;
    }

    .home-slider .home-slide:not(:first-of-type),
    .home-slider .home-slider__dots,
    .home-slide .home-slide__veil,
    .home-stats .home-stats__veil,
    .home-call .home-call__veil {
        display: none;
    }
}

/* ====================================================================== */
/* The ways to pay — P-C. Tiles for the methods the association's gateway
   account opens, drawn on the basket page. Every tile equal: same size,
   same weight, the gateway's own order — «كلها تظهر بالتساوي، بلا إبراز
   ولا وسيلة مفضّلة». The chosen one is framed by the browser's own
   :checked and nothing else — no script, like everything public here.
   Colours are the theme's variables; the logos alone keep their own
   trademark colours, which is why they are <img> and not inline SVG.    */
/* ====================================================================== */

.pay-methods {
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius);
    margin: 0 0 calc(16px * var(--space));
    padding: calc(12px * var(--space));
}

.pay-methods__title {
    color: var(--headings);
    font-weight: 700;
    padding: 0 6px;
}

.pay-methods__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: calc(10px * var(--space));
    margin-top: calc(8px * var(--space));
}

.pay-methods__tile {
    cursor: pointer;
    display: block;
}

/* The radio itself is hidden from the eye and kept for the machine — the
   clip pattern the forms use, never an offset that would stretch an RTL
   page sideways. */
.pay-methods__radio {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pay-methods__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 92px;
    height: 100%;
    padding: 10px;
    text-align: center;
    background: var(--surface);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-small);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* The frame: the chosen tile and no other signal. Two widths of the
   primary line, and a soft ring so the frame reads on dense screens. */
.pay-methods__radio:checked + .pay-methods__face {
    border: var(--border-width-strong) solid var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.pay-methods__radio:focus-visible + .pay-methods__face {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The official mark, its own colours untouched: max-height bounds it and
   the width follows the file's own ratio. */
.pay-methods__logo {
    max-height: 28px;
    max-width: 100%;
}

.pay-methods__name {
    color: var(--text);
    font-weight: 700;
}

.pay-methods__notice {
    color: var(--text-quiet);
    font-size: 0.8em;
}

/* ---- donations closed: the two told places -------------------------- */

/* Where the buttons stood on a project page. */
.don__closed {
    margin: 0;
    padding: calc(10px * var(--space)) 0 0;
    color: var(--text);
    font-weight: 700;
    border-top: var(--border-width) solid var(--line);
}

/* The basket page, above the quiet buttons, where the paying button was. */
.cart__closed {
    margin: 0 0 calc(12px * var(--space));
    color: var(--text);
    font-weight: 700;
    text-align: center;
}

/* The bar on the home page — the second told place, above everything. */
.donations-closed-bar {
    margin: 0;
    padding: calc(12px * var(--space)) 16px;
    background: var(--surface);
    color: var(--headings);
    font-weight: 700;
    text-align: center;
    border-bottom: var(--border-width) solid var(--line);
}

/* ---- the payment result page (P-D) ---------------------------------- */

.pay-result {
    max-width: 560px;
    margin: 0 auto;
    padding: calc(24px * var(--space)) 16px;
    text-align: center;
}

.pay-result__heading {
    margin: 0 0 calc(16px * var(--space));
    color: var(--headings);
}

/* The state, big and unmissable — its word is the book's own. */
.pay-result__state {
    margin: 0 0 calc(10px * var(--space));
    font-size: 1.3em;
    font-weight: 700;
}

.pay-result__state--succeeded { color: var(--primary); }

.pay-result__state--failed,
.pay-result__state--pending { color: var(--text); }

.pay-result__hint {
    margin: 0 0 calc(14px * var(--space));
    color: var(--text-quiet);
}

.pay-result__message {
    margin-bottom: calc(14px * var(--space));
}

.pay-result__facts {
    display: grid;
    gap: 8px;
    margin: 0 0 calc(18px * var(--space));
    padding: calc(12px * var(--space)) 16px;
    background: var(--surface);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-small);
}

.pay-result__fact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pay-result__fact dt { color: var(--text-quiet); }

.pay-result__fact dd {
    margin: 0;
    font-weight: 700;
}

.pay-result__ways {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* The approximate converted figure on a tile — always with its mark (س٩). */
.pay-methods__approx {
    color: var(--text);
    font-size: 0.85em;
    font-weight: 700;
}