/* =============================================================================
   Aamal Aljoud — Featured project (FP2)
   -----------------------------------------------------------------------------
   The flagship. This page is allowed to be quieter, wider and slower than the
   rest of the site: one photograph at a time, long measures of white, and type
   that carries the story. It still speaks the site's language — the same
   tokens, the same steel blue, Tajawal, Lucide — but at a different volume.

   Everything is namespaced .aj-fp-*; no shared component or token is touched.

   Scope: loaded by /project only.
   ========================================================================== */

/* ============================================================== 0. MOTION = */

.aj-motion [data-aj-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 900ms var(--aj-ease), transform 900ms var(--aj-ease);
}

.aj-motion [data-aj-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .aj-motion [data-aj-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ====================================================== 1. PROJECT BRAND == */

/*
 * ضاحية النرجس's own colours, taken from the project's launch artwork rather
 * than invented: #201050 is the ground of that poster and #c0b0f0 its
 * highlight. Everything else is mixed from those two, so every value on this
 * page traces back to something the project actually published.
 *
 * They live on .aj-fp, so they reach this page and nothing else. No global
 * token is touched.
 */
.aj-fp {
    /* the width the page's wide sections line up with */
    --aj-fp-container-wide: 1440px;
    --aj-fp-brand-dark: #201050;
    --aj-fp-brand-light: #c0b0f0;
    --aj-fp-brand: #433373;
    --aj-fp-brand-soft: #eae4fa;
    --aj-fp-brand-faint: #f7f6fd;
    --aj-fp-on-brand: #ffffff;

    display: block;
    background: var(--aj-page);
    overflow-x: clip;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .aj-fp {
        --aj-fp-brand: color-mix(in srgb, var(--aj-fp-brand-dark) 78%, var(--aj-fp-brand-light));
        --aj-fp-brand-soft: color-mix(in srgb, var(--aj-fp-brand-light) 34%, #fff);
        --aj-fp-brand-faint: color-mix(in srgb, var(--aj-fp-brand-light) 12%, #fff);
    }
}

/*
 * The site's steel blue steps aside inside the project's own story: every rule
 * below that reaches for the accent gets the project's colour instead. The
 * page's grounds stay white and off-white — the identity is in the accents and
 * in three deliberate moments, not in a wash over everything.
 */
.aj-fp {
    --aj-accent: var(--aj-fp-brand);
    --aj-accent-hover: var(--aj-fp-brand-dark);
    --aj-accent-active: var(--aj-fp-brand-dark);
    --aj-accent-soft: var(--aj-fp-brand-soft);
    --aj-accent-border: var(--aj-fp-brand-light);
    --aj-focus-ring: rgba(67, 51, 115, 0.35);
}

/* ============================================================= 2. SHARED == */

.aj-fp-eyebrow {
    display: block;
    margin-block-end: var(--aj-space-3);
    color: var(--aj-accent);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
    letter-spacing: 0.18em;
}

/*
 * The headings carry the identity. Everything that leads a section is set in
 * the project's darkest colour; everything that explains one stays neutral, so
 * the colour marks hierarchy rather than decorating the page.
 */
.aj-fp-section-title {
    margin: 0;
    color: var(--aj-fp-brand-dark);
    font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
}

/* the page's own buttons: quieter than the site's, and never more than two */
.aj-fp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    padding: var(--aj-space-3) var(--aj-space-6);
    border: 1px solid transparent;
    border-radius: var(--aj-radius-pill);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    text-decoration: none;
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-fp-btn--solid {
    background: var(--aj-surface);
    color: var(--aj-fp-brand-dark);
}

.aj-fp-btn--solid:hover {
    background: var(--aj-fp-brand-soft);
    color: var(--aj-fp-brand-dark);
}

.aj-fp-btn--ghost {
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--aj-text-inverse);
}

.aj-fp-btn--ghost:hover {
    border-color: var(--aj-text-inverse);
    background: rgba(255, 255, 255, 0.12);
}

/* the page's one committing action, in the project's darkest colour */
.aj-fp-btn--wide {
    justify-content: center;
    inline-size: 100%;
    background: var(--aj-fp-brand-dark);
    color: var(--aj-fp-on-brand);
}

.aj-fp-btn--wide:hover {
    background: var(--aj-fp-brand);
    color: var(--aj-fp-on-brand);
}

.aj-fp-btn:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 3px;
}

/* ================================================================ 2. HERO = */

.aj-fp-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-block-size: min(84vh, 760px);
    /* the header floats over this page, so the hero starts under it and takes
       its height back in padding */
    margin-block-start: calc(-1 * var(--aj-header-h));
    /* the base padding clears the white step the manifesto pulls over the
       photograph, so the actions are never left sitting on that curve */
    padding-block: calc(var(--aj-header-h) + clamp(3rem, 6vw, 6rem)) clamp(5.5rem, 10vw, 10rem);
    overflow: hidden;
    background: var(--aj-fp-brand-dark);
}

.aj-fp-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.aj-fp-hero__media img,
.aj-fp-hero__video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* a cinematic crop: the horizon sits above the middle */
    object-position: center 38%;
    display: block;
}

/*
 * A wash, not a blanket: it deepens only where the words are, so the
 * photograph stays the subject of the screen.
 */
.aj-fp-hero__wash {
    position: absolute;
    inset: 0;
    background:
        /* under the header, only enough to keep the navigation readable */
        linear-gradient(to bottom, rgba(32, 16, 80, 0.5) 0%, rgba(32, 16, 80, 0) 22%),
        /* and along the base, in the project's own indigo rather than grey */
        linear-gradient(to top, rgba(24, 12, 58, 0.8) 0%, rgba(28, 14, 70, 0.4) 38%, rgba(32, 16, 80, 0) 70%),
        linear-gradient(to left, rgba(24, 12, 58, 0.42) 0%, rgba(32, 16, 80, 0) 58%);
}

/* no photograph at all: the motif on the brand's own dark ground */
.aj-fp-hero--plain {
    background:
        var(--aj-motif) center / clamp(320px, 40vw, 620px) no-repeat,
        linear-gradient(160deg, var(--aj-fp-brand-dark), var(--aj-fp-brand));
}

.aj-fp-hero__inner {
    max-inline-size: 46rem;
}

.aj-fp-hero__logo {
    display: block;
    inline-size: clamp(190px, 21vw, 300px);
    block-size: auto;
    margin-inline: auto;
    margin-block-end: var(--aj-space-5);
    filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(16, 19, 24, 0.45));
}

/* the kicker sits on a hairline, so the mark, the name and the line are three
   distinct voices rather than three sizes of the same one */
.aj-fp-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-3);
    margin-block-end: var(--aj-space-4);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-bold);
    letter-spacing: 0.22em;
}

.aj-fp-hero__kicker::before {
    content: "";
    inline-size: clamp(28px, 5vw, 56px);
    block-size: 1px;
    background: rgba(255, 255, 255, 0.6);
}

.aj-fp-hero__title {
    margin: 0;
    color: var(--aj-text-inverse);
    font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 30px rgba(16, 19, 24, 0.4);
}

.aj-fp-hero__tagline {
    margin: var(--aj-space-4) 0 0;
    max-inline-size: 38ch;
    color: rgba(255, 255, 255, 0.74);
    font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
    line-height: var(--aj-lh-normal);
}

.aj-fp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-3);
    /* close enough to the line above to belong to it */
    margin-block-start: clamp(var(--aj-space-5), 2vw, var(--aj-space-8));
}

/* a thin line that breathes, instead of a bouncing arrow */
.aj-fp-hero__cue {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    block-size: clamp(40px, 6vw, 72px);
    background: linear-gradient(to bottom, rgba(192, 176, 240, 0), var(--aj-fp-brand-light));
}

/* =========================================================== 3. MANIFESTO = */

/*
 * The seam: the page's light ground steps over the photograph rather than
 * starting under it, so the story begins while the picture is still there.
 */
.aj-fp-manifesto {
    position: relative;
    z-index: 1;
    margin-block-start: clamp(-96px, -6vw, -48px);
    padding-block: clamp(2.75rem, 5vw, 4.25rem) clamp(2.25rem, 4vw, 3.25rem);
    border-start-start-radius: clamp(20px, 3vw, 40px);
    border-start-end-radius: clamp(20px, 3vw, 40px);
    background: var(--aj-page);
    text-align: center;
}

/* a hairline of the project's colour along that step */
.aj-fp-manifesto::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: clamp(64px, 12vw, 160px);
    block-size: 2px;
    transform: translateX(50%);
    background: var(--aj-fp-brand);
}

.aj-fp-statement {
    margin: 0;
    margin-inline: auto;
    max-inline-size: 24ch;
    color: var(--aj-fp-brand-dark);
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1.25;
    letter-spacing: var(--aj-ls-tight);
    text-wrap: balance;
}

/* the opening paragraph sits under a short rule in the project's colour */
.aj-fp-lead {
    position: relative;
    margin: clamp(var(--aj-space-6), 3vw, var(--aj-space-10)) auto 0;
    padding-block-start: clamp(var(--aj-space-5), 2.5vw, var(--aj-space-8));
    /* an editorial measure: wide enough to read as a column of prose rather
       than as a narrow stack of short lines */
    max-inline-size: 70ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-relaxed);
}

.aj-fp-lead::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: clamp(28px, 5vw, 56px);
    block-size: 1px;
    transform: translateX(50%);
    background: var(--aj-fp-brand-light);
}

/* ============================================================= 4. FIGURES = */

/*
 * The project's figures, as one band rather than as a row of numbers on white.
 * Four blocks of equal width, each on one of the project's own tones, with no
 * gap and no card border between them: the group reads as a single statement
 * and the figures themselves do the work.
 *
 * The band is built for four and prints what the project holds. Two figures
 * take half the width each, three a third, four a quarter — the composition is
 * complete at every count, and no empty block is ever drawn.
 */
/* the band follows the vision closely — the figures are that paragraph's
   evidence, not a separate exhibit */
.aj-fp-figures {
    padding-block: clamp(1.25rem, 2.4vw, 2rem) clamp(1.75rem, 3vw, 2.75rem);
}

.aj-fp-figures__band {
    display: grid;
    grid-template-columns: repeat(var(--aj-fp-figures-count, 2), minmax(0, 1fr));
    overflow: hidden;
    border-radius: var(--aj-radius-lg);
    margin-inline: max(var(--aj-container-pad), calc((100vw - var(--aj-fp-container-wide)) / 2));
}

.aj-fp-figures__band[data-count="1"] {
    --aj-fp-figures-count: 1;
}

.aj-fp-figures__band[data-count="2"] {
    --aj-fp-figures-count: 2;
}

.aj-fp-figures__band[data-count="3"] {
    --aj-fp-figures-count: 3;
}

.aj-fp-figures__band[data-count="4"] {
    --aj-fp-figures-count: 4;
}

.aj-fp-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-2);
    padding: clamp(var(--aj-space-6), 3vw, var(--aj-space-10)) clamp(var(--aj-space-5), 2.5vw, var(--aj-space-10));
}

/* the hairline that separates the blocks belongs to the band, not to a card */
.aj-fp-figure + .aj-fp-figure {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16);
}

/* ---- the four tones of the project, in order ---- */

.aj-fp-figure--dark {
    background: var(--aj-fp-brand-dark);
    color: var(--aj-fp-on-brand);
}

.aj-fp-figure--brand {
    background: var(--aj-fp-brand);
    color: var(--aj-fp-on-brand);
}

.aj-fp-figure--soft {
    background: var(--aj-fp-brand-soft);
    color: var(--aj-fp-brand-dark);
}

.aj-fp-figure--faint {
    background: var(--aj-fp-brand-faint);
    color: var(--aj-fp-brand-dark);
}

/* on the light tones the seam has to be drawn in the project's own colour */
.aj-fp-figure--soft + .aj-fp-figure,
.aj-fp-figure--faint + .aj-fp-figure,
.aj-fp-figure + .aj-fp-figure--soft,
.aj-fp-figure + .aj-fp-figure--faint {
    box-shadow: inset 1px 0 0 var(--aj-fp-brand-light);
}

/* ---- the block itself ---- */

/* the one accent: a short rule above the label, in the block's own contrast */
.aj-fp-figure__rule {
    inline-size: clamp(28px, 4vw, 52px);
    block-size: 2px;
    margin-block-end: var(--aj-space-4);
    background: currentColor;
    opacity: 0.5;
}

.aj-fp-figure__label {
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    letter-spacing: 0.12em;
    opacity: 0.78;
}

.aj-fp-figure__value {
    display: block;
    font-size: var(--aj-fp-figure-size);
    font-weight: var(--aj-fw-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/*
 * The figure and its unit as one line: the unit sits on the figure's top
 * corner, on the side the number ends — the left, in Arabic — rather than on
 * a line of its own. Both keep the sizes they had.
 */
.aj-fp-figure__amount {
    --aj-fp-figure-size: clamp(2.25rem, 1.1rem + 3.6vw, 4.5rem);
    display: flex;
    align-items: flex-start;
    gap: 0.3em;
    max-inline-size: 100%;
}

.aj-fp-figure__unit {
    flex: 0 0 auto;
    /* level with the top of the digits, not the top of the line: the gap the
       font leaves above its figures, measured at 0.174 of their size */
    margin-block-start: calc(var(--aj-fp-figure-size) * 0.174);
    font-size: var(--aj-fs-sm);
    line-height: 1;
    letter-spacing: 0.04em;
    opacity: 0.82;
}

/* held for the day the dashboard carries a line of context per figure */
.aj-fp-figure__note {
    margin: var(--aj-space-2) 0 0;
    max-inline-size: 32ch;
    font-size: var(--aj-fs-caption);
    line-height: var(--aj-lh-relaxed);
    opacity: 0.7;
}

/* ============================================================ 5. CHAPTERS = */

.aj-fp-chapter {
    padding-block: clamp(2rem, 3.4vw, 3.25rem);
}

/*
 * Every other chapter rests on the project's faintest tint. Read from the top,
 * the page now moves white, tint, white, the dark moment, tint — a pulse made
 * out of ground colour alone, without a single new element.
 */
.aj-fp-chapter--tinted {
    background: var(--aj-fp-brand-faint);
}

.aj-fp-chapter__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(var(--aj-space-8), 5vw, var(--aj-space-20));
}

/*
 * Four compositions in rotation, so no two chapters read alike — what changes
 * between them is where the picture sits and how wide the column runs, never
 * the picture's own frame:
 *
 *   split   copy beside a picture
 *   stage   a centred statement with the picture held beneath it
 *   flip    the mirror of split
 *   tower   a narrow column of text against the picture
 */
.aj-fp-chapter--flip .aj-fp-chapter__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.aj-fp-chapter--flip .aj-fp-chapter__copy {
    order: 2;
}

.aj-fp-chapter--stage .aj-fp-chapter__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--aj-space-6), 3vw, var(--aj-space-10));
    text-align: center;
}

.aj-fp-chapter--stage .aj-fp-chapter__text {
    margin-inline: auto;
    max-inline-size: 56ch;
}

.aj-fp-chapter--stage .aj-fp-chapter__media {
    max-inline-size: 64rem;
    margin-inline: auto;
}

.aj-fp-chapter--tower .aj-fp-chapter__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: end;
}

.aj-fp-chapter--tower .aj-fp-chapter__text {
    max-inline-size: 34ch;
}

/* a chapter with no picture becomes one centred reading column */
.aj-fp-chapter--text .aj-fp-chapter__grid {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 46rem;
    margin-inline: auto;
}

/*
 * The numeral is the page's signature mark: large, in the project's own colour,
 * with a rule running out of it. It stands in for the decorative furniture a
 * page like this usually reaches for.
 */
.aj-fp-chapter__number {
    display: flex;
    align-items: center;
    gap: var(--aj-space-4);
    margin-block-end: var(--aj-space-4);
    color: var(--aj-fp-brand);
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
}

.aj-fp-chapter__number::after {
    content: "";
    flex: 1 1 auto;
    max-inline-size: clamp(40px, 8vw, 120px);
    block-size: 1px;
    background: var(--aj-fp-brand-light);
}

.aj-fp-chapter--stage .aj-fp-chapter__number {
    justify-content: center;
}

.aj-fp-chapter--stage .aj-fp-chapter__number::after {
    display: none;
}

.aj-fp-chapter__title {
    margin: 0;
    color: var(--aj-fp-brand-dark);
    font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
}

.aj-fp-chapter__text {
    margin: var(--aj-space-5) 0 0;
    max-inline-size: 46ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-relaxed);
}

.aj-fp-chapter__media {
    /* the frame itself is shared; see 5b. IMAGE SYSTEM below */
    box-shadow: 0 20px 44px -30px rgba(32, 16, 80, 0.55);
}

.aj-fp-chapter__media img {
    /* the parallax is a few pixels of scale, not a slide */
    transform: scale(1.06);
    transition: transform 1200ms var(--aj-ease);
}

.aj-fp-chapter__media.is-revealed img {
    transform: scale(1);
}

/* ==================================================== 5b. IMAGE SYSTEM == */

/*
 * Every picture that carries a section — a chapter's and a pillar's alike —
 * wears the same frame: one ratio, one corner, one quiet shadow and one
 * hairline of the project's colour. The compositions vary; the frame does not,
 * and that repetition is what makes the page read as one project rather than
 * as a folder of images.
 */
.aj-fp-chapter__media,
.aj-fp-pillar__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--aj-radius-lg);
    aspect-ratio: 16 / 10;
    /* a picture never takes more than about half a screen — the story has to
       keep moving */
    max-block-size: clamp(300px, 46vh, 540px);
}

/*
 * The one accent the pictures take: a hairline drawn over the image, inside the
 * corner, so it survives the crop and never turns into a border box.
 */
.aj-fp-chapter__media::after,
.aj-fp-pillar__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid var(--aj-fp-brand-light);
    border-radius: inherit;
    opacity: 0.45;
    pointer-events: none;
}

.aj-fp-chapter__media img,
.aj-fp-pillar__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================================== 6. BLEED == */

/* a full stop in pictures: the widest thing on the page, edge to edge */
.aj-fp-bleed {
    position: relative;
    overflow: hidden;
    block-size: clamp(300px, 36vw, 480px);
    background: var(--aj-surface-muted);
}

.aj-fp-bleed img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
}

/* =============================================================== 7. DARK == */

/*
 * The single dark moment on the page: one number, in the brand's charcoal,
 * with the motif far behind it. No gold, no gradient that announces itself.
 */
/*
 * The signature moment: the project's own indigo, its architecture as texture,
 * and the pattern painted in the project's light lilac. This is where the page
 * belongs to ضاحية النرجس most completely.
 */
.aj-fp-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.75rem, 5.5vw, 5.25rem);
    background: var(--aj-fp-brand-dark);
    color: var(--aj-fp-on-brand);
    text-align: center;
}

/*
 * An inset hairline, a hand's width in from the edges: the oldest device in
 * printed prospectuses, and the only ornament this section needs.
 */
.aj-fp-dark::before {
    content: "";
    position: absolute;
    inset: clamp(12px, 2vw, 28px);
    z-index: -1;
    border: 1px solid var(--aj-fp-brand-light);
    opacity: 0.18;
    pointer-events: none;
}

/*
 * The project's own architecture, held far enough back to be a texture rather
 * than a picture — it is one of the renders already on this page, not a new
 * asset and not a stock image.
 */
.aj-fp-dark__texture {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.2;
    filter: grayscale(1) contrast(1.05);
    mix-blend-mode: luminosity;
    mask-image: radial-gradient(120% 90% at 50% 50%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 25%, transparent 78%);
}

/* the pattern is masked rather than filtered, so it takes the project's own
   light lilac instead of a washed out grey */
.aj-fp-dark::after {
    content: "";
    position: absolute;
    inset-block-start: -20%;
    inset-inline-end: -8%;
    z-index: -1;
    inline-size: clamp(260px, 36vw, 560px);
    block-size: clamp(260px, 36vw, 560px);
    /* painted only where the pattern can actually be cut out */
    background-color: transparent;
    opacity: 0.18;
}

@supports (mask: url("#m") center / contain no-repeat) or (-webkit-mask: url("#m") center / contain no-repeat) {
    .aj-fp-dark::after {
        background-color: var(--aj-fp-brand-light);
        -webkit-mask: var(--aj-motif) center / contain no-repeat;
        mask: var(--aj-motif) center / contain no-repeat;
    }
}

.aj-fp-dark__number {
    display: block;
    color: var(--aj-fp-on-brand);
    font-size: var(--aj-fp-dark-size);
    font-weight: var(--aj-fw-bold);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

/* the figure and its unit, the unit on the figure's top corner as in the band */
.aj-fp-dark__amount {
    --aj-fp-dark-size: clamp(3.5rem, 1.2rem + 11vw, 11rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.4em;
}

.aj-fp-dark__unit {
    flex: 0 0 auto;
    /* level with the top of the digits: 0.154 of their size at this line height */
    margin-block-start: calc(var(--aj-fp-dark-size) * 0.154);
    color: var(--aj-fp-brand-light);
    font-size: clamp(1rem, 0.88rem + 0.5vw, 1.375rem);
    font-weight: var(--aj-fw-medium);
    line-height: 1;
    letter-spacing: 0.16em;
}

/* the figure's name, set apart under it on its own rule */
.aj-fp-dark__label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--aj-space-4);
    margin-block-start: var(--aj-space-8);
    color: var(--aj-fp-brand-light);
    font-size: clamp(1rem, 0.88rem + 0.5vw, 1.375rem);
    font-weight: var(--aj-fw-medium);
    letter-spacing: 0.16em;
}

.aj-fp-dark__label::before,
.aj-fp-dark__label::after {
    content: "";
    inline-size: clamp(24px, 6vw, 64px);
    block-size: 1px;
    background: var(--aj-fp-brand-light);
    opacity: 0.7;
}

.aj-fp-dark__note {
    margin: var(--aj-space-5) auto 0;
    max-inline-size: 40ch;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--aj-fs-sm);
}

/* ============================================================ 8. PILLARS == */

.aj-fp-pillars {
    padding-block: clamp(2.5rem, 4.5vw, 4.25rem);
    background: var(--aj-fp-brand-faint);
}

/* the list reads as one flow, told apart by hairlines rather than by gaps */
.aj-fp-pillars__list > * + * {
    padding-block-start: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-10));
    border-block-start: 1px solid var(--aj-fp-brand-light);
}

.aj-fp-pillars__head {
    margin-block-end: clamp(var(--aj-space-8), 4vw, var(--aj-space-16));
}

.aj-fp-pillars__list {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--aj-space-6), 3vw, var(--aj-space-10));
}

/*
 * Pillars are moments, not cards: a picture, a number and a paragraph, with
 * every other one turned around. One on its own simply takes the width.
 */
.aj-fp-pillar {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--aj-space-6), 4vw, var(--aj-space-16));
}

.aj-fp-pillar:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.aj-fp-pillar:nth-child(even) .aj-fp-pillar__media {
    order: 2;
}

/* the pillars take the chapters' frame exactly; only their side alternates */
.aj-fp-pillar__media {
    box-shadow: 0 16px 36px -28px rgba(32, 16, 80, 0.5);
}

.aj-fp-pillar__media img {
    transition: transform 900ms var(--aj-ease);
}

.aj-fp-pillar:hover .aj-fp-pillar__media img {
    transform: scale(1.03);
}

/* the number is the marker of the flow: large, in the project's colour, and
   held back far enough that the title still leads */
.aj-fp-pillar__number {
    display: block;
    margin-block-end: var(--aj-space-3);
    color: var(--aj-fp-brand);
    font-size: clamp(2.75rem, 1.4rem + 3.4vw, 5rem);
    font-weight: var(--aj-fw-bold);
    line-height: 1;
    letter-spacing: 0.04em;
    opacity: 0.32;
    font-variant-numeric: tabular-nums;
}

.aj-fp-pillar__eyebrow {
    display: block;
    margin-block-end: var(--aj-space-2);
    color: var(--aj-fp-brand);
    font-size: var(--aj-fs-sm);
    letter-spacing: 0.08em;
}

.aj-fp-pillar__title {
    margin: 0;
    color: var(--aj-fp-brand-dark);
    font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
    font-weight: var(--aj-fw-bold);
    line-height: var(--aj-lh-snug);
}

.aj-fp-pillar__text {
    margin: var(--aj-space-4) 0 0;
    max-inline-size: 42ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body);
    line-height: var(--aj-lh-relaxed);
}

/* ============================================================ 9. GALLERY == */

.aj-fp-gallery {
    padding-block: clamp(2.5rem, 4.5vw, 4.25rem);
}

.aj-fp-gallery__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aj-space-4);
    margin-block-end: clamp(var(--aj-space-6), 3vw, var(--aj-space-10));
}

.aj-fp-gallery__nav {
    display: flex;
    gap: var(--aj-space-2);
}

/*
 * The controls belong to the project, not to the browser: a hairline of the
 * project's light, its own colour on the arrow, and a fill on the press.
 */
.aj-fp-gallery__nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--aj-fp-brand-light);
    border-radius: var(--aj-radius-pill);
    background: transparent;
    color: var(--aj-fp-brand);
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-fp-gallery__nav button:hover {
    border-color: var(--aj-fp-brand);
    background: var(--aj-fp-brand-soft);
    color: var(--aj-fp-brand-dark);
}

.aj-fp-gallery__nav button:active {
    border-color: var(--aj-fp-brand-dark);
    background: var(--aj-fp-brand);
    color: var(--aj-fp-on-brand);
}

.aj-fp-gallery__nav button:focus-visible {
    outline: 2px solid var(--aj-fp-brand);
    outline-offset: 2px;
}

/*
 * A rail, scrolled natively: snap points, a peek of the next frame, and the
 * keyboard moving it like any other scroll container. No slider library.
 */
/*
 * The rail starts where the heading starts. It is padded to the same width the
 * section's container uses, and the snap points are aligned to that same edge,
 * so in RTL the first frame sits flush against the right reading edge with no
 * empty run before it — while the next frame still peeks past the other side.
 */
.aj-fp-rail {
    --aj-fp-rail-pad: max(var(--aj-container-pad), calc((100vw - var(--aj-fp-container-wide)) / 2));

    display: flex;
    gap: clamp(var(--aj-space-4), 2vw, var(--aj-space-6));
    padding-inline: var(--aj-fp-rail-pad);
    padding-block-end: var(--aj-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--aj-fp-rail-pad);
    overscroll-behavior-x: contain;
    /* the scrollbar is the project's too: a quiet track and a thin thumb */
    scrollbar-width: thin;
    scrollbar-color: rgba(67, 51, 115, 0.55) rgba(192, 176, 240, 0.28);
}

.aj-fp-rail::-webkit-scrollbar {
    height: 6px;
}

.aj-fp-rail::-webkit-scrollbar-track {
    border-radius: var(--aj-radius-pill);
    background: rgba(192, 176, 240, 0.28);
}

.aj-fp-rail::-webkit-scrollbar-thumb {
    border-radius: var(--aj-radius-pill);
    background: rgba(67, 51, 115, 0.55);
}

.aj-fp-rail::-webkit-scrollbar-thumb:hover {
    background: var(--aj-fp-brand-dark);
}

.aj-fp-rail:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 4px;
}

.aj-fp-rail__item {
    flex: 0 0 auto;
    inline-size: clamp(300px, 46vw, 620px);
    margin: 0;
    overflow: hidden;
    border-radius: var(--aj-radius-lg);
    /* "start" is the right edge here, which is where a reader begins */
    scroll-snap-align: start;
    aspect-ratio: 16 / 10;
    background: var(--aj-surface-muted);
}

/* the first frame leads, and the one after it is always partly in view */
.aj-fp-rail__item--lead {
    inline-size: clamp(320px, 64vw, 940px);
    aspect-ratio: 16 / 9;
}

.aj-fp-rail__item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* fewer than three pictures: a composition rather than a thin rail */
.aj-fp-shots {
    padding-block: clamp(2.75rem, 5vw, 5rem);
}

.aj-fp-shots {
    --aj-fp-rail-pad: 0;
}

.aj-fp-shots__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(var(--aj-space-4), 2vw, var(--aj-space-6));
}

.aj-fp-shots__grid figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--aj-radius-lg);
    aspect-ratio: 16 / 10;
}

.aj-fp-shots__grid img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================== 10. MARK == */

/*
 * A pause before the ending: the project's mark, its line, and the motif held
 * far back. Not a banner — a breath.
 */
/*
 * The ceremony: the project's mark alone on its own tint, framed by two rules
 * the width of the page, with the pattern held far behind it.
 */
.aj-fp-mark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.75rem, 5vw, 4.75rem);
    background: var(--aj-fp-brand-faint);
    border-block: 1px solid var(--aj-fp-brand-light);
    text-align: center;
}

.aj-fp-mark::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: -1;
    inline-size: clamp(320px, 48vw, 720px);
    block-size: clamp(320px, 48vw, 720px);
    transform: translate(50%, -50%);
    background-color: transparent;
    opacity: 0.12;
}

@supports (mask: url("#m") center / contain no-repeat) or (-webkit-mask: url("#m") center / contain no-repeat) {
    .aj-fp-mark::after {
        background-color: var(--aj-fp-brand);
        -webkit-mask: var(--aj-motif) center / contain no-repeat;
        mask: var(--aj-motif) center / contain no-repeat;
    }
}

.aj-fp-mark__inner img {
    inline-size: clamp(240px, 32vw, 500px);
    block-size: auto;
    /* the artwork is white: painted to the project's indigo on its own tint */
    filter: brightness(0) saturate(100%) invert(9%) sepia(63%) saturate(3200%) hue-rotate(248deg);
}

/* the Narjis lockup with its rosette turning, painted in the project's own dark
   tone rather than filtered to an approximation of it */
.aj-fp-mark__logo {
    --aj-logo-ink: var(--aj-fp-brand-dark);
    inline-size: clamp(240px, 32vw, 500px);
    margin-inline: auto;
}

/* the tagline sits under the same short rule the manifesto uses */
.aj-fp-mark__line {
    position: relative;
    margin: clamp(var(--aj-space-6), 3vw, var(--aj-space-10)) auto 0;
    padding-block-start: clamp(var(--aj-space-5), 2.5vw, var(--aj-space-8));
    max-inline-size: 40ch;
    color: var(--aj-text-secondary);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
    line-height: var(--aj-lh-normal);
}

.aj-fp-mark__line::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: clamp(28px, 5vw, 56px);
    block-size: 1px;
    transform: translateX(50%);
    background: var(--aj-fp-brand);
    opacity: 0.6;
}

/* =========================================================== 11. INTEREST = */

/*
 * The ending: a tone of its own, the motif behind the words, and a form with
 * as little furniture as it can have while staying clear.
 */
.aj-fp-interest {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.75rem, 5.5vw, 5rem);
    /* the deepest of the light tints: the page closes inside the project's own
       colour, with the form itself left neutral */
    background: var(--aj-fp-brand-soft);
    scroll-margin-block-start: calc(var(--aj-header-h) + var(--aj-space-4));
}

.aj-fp-interest::after {
    content: "";
    position: absolute;
    inset-block-end: -18%;
    inset-inline-end: -6%;
    z-index: -1;
    inline-size: clamp(280px, 38vw, 620px);
    block-size: clamp(280px, 38vw, 620px);
    background-color: transparent;
    opacity: 0.09;
    pointer-events: none;
}

@supports (mask: url("#m") center / contain no-repeat) or (-webkit-mask: url("#m") center / contain no-repeat) {
    .aj-fp-interest::after {
        background-color: var(--aj-fp-brand);
        -webkit-mask: var(--aj-motif) center / contain no-repeat;
        mask: var(--aj-motif) center / contain no-repeat;
    }
}

.aj-fp-interest .aj-fp-section-title {
    font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

.aj-fp-interest__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--aj-space-8), 4vw, var(--aj-space-16));
}

.aj-fp-interest__note {
    margin: var(--aj-space-5) 0 0;
    max-inline-size: 40ch;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-relaxed);
}

.aj-fp-interest__alt {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    margin-block-start: var(--aj-space-6);
    color: var(--aj-accent);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-bold);
    text-decoration: none;
}

.aj-fp-interest__alt:hover {
    text-decoration: underline;
}

/* the form is the one neutral object in the section: white, plain, legible */
.aj-fp-form {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-5);
    padding: clamp(var(--aj-space-6), 2.5vw, var(--aj-space-10));
    border: 1px solid var(--aj-fp-brand-light);
    border-radius: var(--aj-radius-lg);
    background: var(--aj-surface);
    box-shadow: 0 24px 50px -38px rgba(32, 16, 80, 0.5);
}

.aj-fp-field {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-2);
}

.aj-fp-field label {
    color: var(--aj-text);
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
}

.aj-fp-field input {
    inline-size: 100%;
    padding: var(--aj-space-3) var(--aj-space-4);
    border: 1px solid var(--aj-border-strong);
    border-radius: var(--aj-radius-md);
    background: var(--aj-page);
    color: var(--aj-text);
    font: inherit;
    font-size: var(--aj-fs-sm);
    transition: border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-fp-field input:focus {
    outline: none;
    border-color: var(--aj-accent);
    box-shadow: 0 0 0 3px var(--aj-focus-ring);
}

.aj-fp-captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aj-space-3);
}

.aj-fp-captcha input {
    flex: 1 1 180px;
}

.aj-fp-captcha img {
    block-size: 48px;
    inline-size: auto;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-md);
}

.aj-fp-captcha__reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    background: var(--aj-surface);
    color: var(--aj-text-secondary);
    cursor: pointer;
    transition: var(--aj-transition);
}

.aj-fp-captcha__reload:hover {
    border-color: var(--aj-accent-border);
    background: var(--aj-accent-soft);
    color: var(--aj-accent);
}

.aj-fp-form__status {
    margin: 0;
    color: var(--aj-text-secondary);
    font-size: var(--aj-fs-sm);
}

.aj-fp-form__status.is-error {
    color: var(--aj-error);
}

.aj-fp-form__status.is-success {
    color: var(--aj-success);
}

/* ================================================ 11. SHELL, PROJECT MODE = */

/*
 * The site's header and footer are shared and approved; neither their markup
 * nor their stylesheet is touched. This page reaches them from the outside,
 * through :has(), so the treatment applies on /project and nowhere else — and
 * a browser without :has() simply gets the ordinary shell, which still reads.
 */

/* ---- the header floats over the hero ---- */

body:has(.aj-fp) .aj-header {
    position: fixed;
    background-color: transparent;
    border-block-end-color: transparent;
    box-shadow: none;
    transition: background-color 420ms var(--aj-ease),
        border-color 420ms var(--aj-ease),
        box-shadow 420ms var(--aj-ease),
        backdrop-filter 420ms var(--aj-ease);
}

/* the company mark, its navigation and its controls, in white over the image */
body:has(.aj-fp) .aj-header__logo img {
    /* white, with just enough shadow to hold against a bright sky */
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(24, 12, 58, 0.45));
}

body:has(.aj-fp) .aj-nav__link,
body:has(.aj-fp) .aj-header__actions .aj-btn--icon,
body:has(.aj-fp) .aj-header__cta {
    text-shadow: 0 1px 8px rgba(24, 12, 58, 0.35);
}

.aj-fp-past-hero body:has(.aj-fp) .aj-nav__link,
.aj-fp-past-hero body:has(.aj-fp) .aj-header__actions .aj-btn--icon,
.aj-fp-past-hero body:has(.aj-fp) .aj-header__cta {
    text-shadow: none;
}

body:has(.aj-fp) .aj-nav__link,
body:has(.aj-fp) .aj-header__actions .aj-btn--icon {
    color: rgba(255, 255, 255, 0.92);
}

body:has(.aj-fp) .aj-nav__link:hover,
body:has(.aj-fp) .aj-nav__item.is-active .aj-nav__link {
    color: #ffffff;
}

body:has(.aj-fp) .aj-header__cta {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    backdrop-filter: blur(6px);
}

body:has(.aj-fp) .aj-header__cta:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--aj-fp-brand-dark, #201050);
}

/* ---- and settles once the hero is behind the reader ---- */

.aj-fp-past-hero body:has(.aj-fp) .aj-header {
    background-color: rgba(247, 246, 253, 0.86);
    border-block-end-color: #eae4fa;
    box-shadow: 0 1px 18px rgba(32, 16, 80, 0.08);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.aj-fp-past-hero body:has(.aj-fp) .aj-header__logo img,
.aj-fp-past-hero body:has(.aj-fp) .aj-nav__link,
.aj-fp-past-hero body:has(.aj-fp) .aj-header__actions .aj-btn--icon {
    filter: none;
    color: var(--aj-text);
}

.aj-fp-past-hero body:has(.aj-fp) .aj-nav__link:hover,
.aj-fp-past-hero body:has(.aj-fp) .aj-nav__item.is-active .aj-nav__link {
    color: #201050;
}

.aj-fp-past-hero body:has(.aj-fp) .aj-header__cta {
    background-color: #433373;
    border-color: #433373;
    color: #ffffff;
    backdrop-filter: none;
}

.aj-fp-past-hero body:has(.aj-fp) .aj-header__cta:hover {
    background-color: #201050;
    border-color: #201050;
}

/* ---- the footer reads as the last chapter, then hands back to the company ---- */

body:has(.aj-fp) .aj-footer {
    background-color: #f2effb;
    border-block-start: 1px solid #ded4f5;
}

body:has(.aj-fp) .aj-footer__motif {
    opacity: 0.5;
}

/* ========================================================= 12. RESPONSIVE = */

@media (max-width: 1024px) {

    /*
     * Every composition collapses to one column. The variants each carry their
     * own column rule, so each of them has to be named here to be undone.
     */
    .aj-fp-chapter__grid,
    .aj-fp-chapter--flip .aj-fp-chapter__grid,
    .aj-fp-chapter--tower .aj-fp-chapter__grid,
    .aj-fp-pillar,
    .aj-fp-pillar:nth-child(even),
    .aj-fp-interest__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-fp-chapter--tower .aj-fp-chapter__grid {
        align-items: start;
    }

    .aj-fp-chapter--tower .aj-fp-chapter__text {
        max-inline-size: none;
    }

    /* stacked, the picture leads every chapter and every pillar */
    .aj-fp-chapter--flip .aj-fp-chapter__copy,
    .aj-fp-pillar:nth-child(even) .aj-fp-pillar__media {
        order: 0;
    }

    .aj-fp-chapter--stage .aj-fp-chapter__media {
        max-inline-size: none;
    }

    /* the band folds to two columns; the row seam is drawn on the blocks
       themselves so it stays a hairline and never a card border */
    .aj-fp-figures__band[data-count="3"],
    .aj-fp-figures__band[data-count="4"] {
        --aj-fp-figures-count: 2;
    }

    .aj-fp-figures__band[data-count="3"] .aj-fp-figure:nth-child(n + 3),
    .aj-fp-figures__band[data-count="4"] .aj-fp-figure:nth-child(n + 3) {
        box-shadow: inset 0 1px 0 var(--aj-fp-brand-light);
    }

    .aj-fp-figures__band[data-count="4"] .aj-fp-figure:nth-child(4) {
        box-shadow: inset 1px 0 0 var(--aj-fp-brand-light), inset 0 1px 0 var(--aj-fp-brand-light);
    }
}

/*
 * On a phone the frame turns from 16:10 to 4:3 — one change, applied to every
 * picture at once. A tablet keeps the wide frame: stacked at that width, 4:3
 * would make each picture taller than a comfortable reading step.
 */
@media (max-width: 640px) {

    .aj-fp-chapter__media,
    .aj-fp-pillar__media {
        aspect-ratio: 4 / 3;
        max-block-size: none;
    }
}

@media (max-width: 768px) {

    /*
     * A picture read at 4:3 on a narrow screen is a tall thing, so the space
     * around the sections is taken back in: the page keeps its rhythm without
     * turning into a long walk.
     */
    .aj-fp-chapter {
        padding-block: 1.75rem;
    }

    .aj-fp-dark,
    .aj-fp-pillars,
    .aj-fp-gallery,
    .aj-fp-shots,
    .aj-fp-mark,
    .aj-fp-interest {
        padding-block: 2.5rem;
    }

    .aj-fp-bleed {
        block-size: clamp(240px, 44vw, 340px);
    }

    .aj-fp-pillars__list {
        gap: var(--aj-space-6);
    }

    .aj-fp-pillars__list > * + * {
        padding-block-start: var(--aj-space-6);
    }
}

@media (max-width: 768px) {

    .aj-fp-hero {
        min-block-size: min(92vh, 720px);
    }

    /* two figures to a row on a phone, and the seams turn with them */
    .aj-fp-figures__band[data-count="3"],
    .aj-fp-figures__band[data-count="4"] {
        --aj-fp-figures-count: 2;
    }
}

@media (max-width: 480px) {

    .aj-fp-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .aj-fp-hero__actions .aj-fp-btn {
        justify-content: center;
    }

    .aj-fp-rail__item {
        inline-size: min(82vw, 340px);
    }

    /*
     * One figure to a row below 480: the number stays the size it deserves
     * rather than shrinking to fit two across a phone.
     */
    .aj-fp-figures__band[data-count] {
        --aj-fp-figures-count: 1;
    }

    .aj-fp-figure {
        padding-block: var(--aj-space-6);
    }

    .aj-fp-figure + .aj-fp-figure {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    .aj-fp-figure--soft + .aj-fp-figure,
    .aj-fp-figure--faint + .aj-fp-figure,
    .aj-fp-figure + .aj-fp-figure--soft,
    .aj-fp-figure + .aj-fp-figure--faint {
        box-shadow: inset 0 1px 0 var(--aj-fp-brand-light);
    }
}

@media (prefers-reduced-motion: reduce) {

    .aj-fp-chapter__media img,
    .aj-fp-pillar__media img,
    .aj-fp-btn,
    .aj-fp-gallery__nav button {
        transition: none;
    }

    .aj-fp-chapter__media img,
    .aj-fp-pillar:hover .aj-fp-pillar__media img {
        transform: none;
    }

    .aj-fp-rail {
        scroll-behavior: auto;
    }
}

/* ============================================ PHONES AND FOLDABLES ===== */

/*
 * Up to 720px — a phone, and a foldable folded or open; the iPad mini and
 * wider are untouched. As on the home page, the figures read two by two on
 * one screen (the four tones already tell the cells apart), and the way to
 * write to the team directly is centred under the form's introduction.
 */
@media (max-width: 720px) {
    /*
     * Larger on a phone. The file is a square with the lockup across its
     * middle, so the empty band above and below it is taken back in the
     * margins: the mark grows and the words under it barely move.
     */
    .aj-fp-hero__logo {
        inline-size: clamp(230px, 66vw, 280px);
        margin-block-start: -18%;
        margin-block-end: calc(var(--aj-space-5) - 22%);
    }

    .aj-fp-figures__band[data-count="2"],
    .aj-fp-figures__band[data-count="3"],
    .aj-fp-figures__band[data-count="4"] {
        --aj-fp-figures-count: 2;
    }
    .aj-fp-figure {
        padding: var(--aj-space-5) var(--aj-space-4);
    }
    .aj-fp-figure__amount {
        --aj-fp-figure-size: clamp(1.625rem, 6.6vw, 2.5rem);
    }
    .aj-fp-figure + .aj-fp-figure,
    .aj-fp-figure--soft + .aj-fp-figure,
    .aj-fp-figure--faint + .aj-fp-figure,
    .aj-fp-figure + .aj-fp-figure--soft,
    .aj-fp-figure + .aj-fp-figure--faint {
        box-shadow: none;
    }

    /* no seam at all on a phone, the row seam the tablet draws included: the
       four tones alone tell the cells apart. Written as specifically as the
       tablet's rules so it wins over them. */
    .aj-fp-figures__band[data-count] .aj-fp-figure:nth-child(n) {
        box-shadow: none;
    }

    .aj-fp-interest__alt {
        display: flex;
        inline-size: fit-content;
        margin-inline: auto;
    }
}