/* ==================================================
   Text logo
================================================== */

.site-text-logo {
    display: inline-block;
    max-width: 15rem;

    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
    text-decoration: none;
}

.site-text-logo:hover,
.site-text-logo:focus {
    color: inherit;
    text-decoration: none;
}

@media (min-width: 561px) {
    .site-text-logo {
        max-width: 22rem;
        font-size: 1.3rem;
    }
}

@media (min-width: 1000px) {
    .site-text-logo {
        max-width: 26rem;
        font-size: 1.5rem;
    }
}

.dropmenu a
 { padding: 0.5rem 0.75rem;
     font-size: 0.85rem;
 }

 @media (min-width: 1500px) {
    .dropmenu a {
       font-size: 1rem;
       padding: 0.5rem 1rem;
    }
}
/* ==================================================
   Homepage hero
================================================== */

#hero.modular-hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Remove Quark 2 image overlay */
#hero.modular-hero .image-overlay {
    display: none;
}

/* Override centre alignment from the hero template */
#hero.modular-hero .container {
    width: 100%;
    text-align: left !important;
}

/* Main hero heading */
#hero .hero-heading {
    width: 35%;
    max-width: 12ch;
    margin: 0;

    font-size: clamp(1.9rem, 3vw, 5rem);
    line-height: 1;

    text-align: left;
    text-transform: uppercase;

    overflow-wrap: normal;
    word-break: normal;
}

/* Second line */
#hero .hero-subheading {
    display: block;
    margin-top: 0.5em;

    font-size: 0.6em;
    line-height: 1.3;
    text-transform: capitalize;
}

/* Third line */
#hero .hero-topic {
    display: block;
    max-width: 18ch;
    margin-top: 0.45em;

    font-size: 0.48em;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;

    text-transform: none;
}

/* Introductory sentence */
#hero .hero-introduction {
    width: 40%;
    max-width: 32rem;
    margin-top: 1.5rem;

    color: #000;
    font-size: clamp(1.2rem, 1.8vw, 2.1rem);
    line-height: 1.25;
    text-align: left;
}

/* Remove paragraph margin inserted by Shortcode Core */
#hero .hero-introduction p {
    margin: 0;
}

/* Tablet */
@media (max-width: 840px) {
    #hero .hero-heading,
    #hero .hero-introduction {
        width: 60%;
    }
}

/* Mobile */
@media (max-width: 560px) {
    #hero .hero-heading {
        width: 50%;
        font-size: clamp(1.9rem, 3vw, 3.5rem);
    }

    #hero .hero-topic {
        max-width: 20ch;
    }
}


/* ==================================================
   Utility colours
================================================== */

.pink {
    color: #ff0046;
}

/* ==================================================
   Text + image module
================================================== */

.modular-text-image {
    overflow: hidden;
}


/* --------------------------------------------------
   Main layout
-------------------------------------------------- */

.modular-text-image .text-image-layout {
    display: grid;

    /*
     * Roughly two thirds text / one third image.
     * The image column cannot become excessively small.
     */
    grid-template-columns:
        minmax(0, 2fr)
        minmax(18rem, 1fr);

    gap: clamp(2rem, 4vw, 4.5rem);

    align-items: start;
}


/* --------------------------------------------------
   Text
-------------------------------------------------- */

.modular-text-image .text-image-content {
    min-width: 0;
}


/*
 * Keep natural spacing between paragraphs,
 * but remove unnecessary space after the last one.
 */
.modular-text-image .text-image-content > :last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------
   Image
-------------------------------------------------- */

.modular-text-image .text-image-media {
    width: 100%;
    max-width: 24rem;

    justify-self: end;
    align-self: start;
}


/*
 * The image has its own controlled proportions.
 *
 * It no longer stretches to match the height of
 * however much text appears beside it.
 */
.modular-text-image .text-image-frame {
    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 0.6rem;
}


.modular-text-image .text-image-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ==================================================
   Tablet
================================================== */

@media (max-width: 840px) {

    .modular-text-image .text-image-layout {
        grid-template-columns:
            minmax(0, 65%)
            minmax(12rem, 35%);

        gap: clamp(1.25rem, 3vw, 2rem);
    }

    .modular-text-image .text-image-media {
        max-width: 20rem;
    }
}


/* ==================================================
   Mobile
   Keep text and image side-by-side
================================================== */

@media (max-width: 560px) {

    .modular-text-image .text-image-layout {
        grid-template-columns:
            minmax(0, 72%)
            minmax(5.5rem, 28%);

        gap: 0.75rem;
    }


    /*
     * The mobile portrait has a controlled height.
     * It will therefore stop alongside the text rather
     * than stretching down beside every paragraph.
     */
    .modular-text-image .text-image-media {
        width: 100%;
        max-width: none;
    }


    .modular-text-image .text-image-frame {
        aspect-ratio: auto;

        height: clamp(15rem, 52vw, 22rem);

        border-radius: 0.5rem;
    }


    .modular-text-image .text-image-frame img {
        object-fit: cover;
        object-position: center;
    }
}









/* ==========================================================
   VOICES OF GENDER APARTHEID — STATIC HERO STRIP

   Pure CSS.
   No scrolling.
   No dragging.
   No JavaScript measurements.

   DESKTOP:
   - tab aligned to normal container
   - image sequence ends at 55% of viewport width
   - additional images extend off-screen to the left
   - horizontal line fades towards the right

   MOBILE:
   - image sequence fills the available width
========================================================== */


/* ==========================================================
   1. MODULE POSITIONING
========================================================== */

:root {
    --voices-strip-height:
        clamp(9.5rem, 19vh, 12rem);

    --voices-bottom-gap:
        clamp(2.5rem, 5vh, 3.5rem);

    --voices-interface-opacity: 0.62;
    --voices-interface-active-opacity: 0.96;
}


.modular-voices-archive {
    position: relative;
    z-index: 20;

    min-height:
        var(--voices-strip-height);

    margin-top:
        calc(
            -1 * (
                var(--voices-strip-height)
                + var(--voices-bottom-gap)
            )
        );

    margin-bottom:
        var(--voices-bottom-gap);

    color: #111;

    background: transparent;
}


/*
 * Reserve room inside hero.
 */
#hero.modular-hero:has(+ .modular-voices-archive) > .container {
    box-sizing: border-box;

    padding-bottom:
        calc(
            var(--voices-strip-height)
            + var(--voices-bottom-gap)
        );
}


/* Hide Quark down arrow */
#hero.modular-hero:has(+ .modular-voices-archive) #to-start {
    display: none;
}


/* ==========================================================
   2. ARCHIVE TAB
========================================================== */

.voices-archive-header {
    position: relative;

    width: 100%;

    margin-bottom: 0;
}


.voices-archive-action {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: flex-end;

    gap: 0.7rem;

    margin-bottom: 0;
}


/* Video icon */

.voices-archive-icon {
    flex: 0 0 auto;

    margin-bottom: 0.55rem;

    color: #ff0046;

    font-size: 2.4rem;
    line-height: 1;

    opacity: 0.82;

    transition:
        opacity 0.22s ease;
}


/* White archive tab */

.voices-archive-button {
  position: relative;
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.55rem 0.8rem 0.5rem;
  color: rgba(0, 0, 0, 0.88);
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  border-radius: 0.2rem 0.2rem 0 0;
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.05);
  text-decoration: none;
    text-decoration-thickness: auto;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(5px) grayscale();
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.voices-archive-button-title
 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #111;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: capitalize;
    letter-spacing: -0.5px;
}


.voices-archive-external-icon {
    flex: 0 0 auto;

    font-size: 0.68em;

    opacity: 0.68;
}


.voices-archive-button-domain {
    color:
        rgba(0, 0, 0, 0.62);

    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.1;
}


.voices-archive-button:hover,
.voices-archive-button:focus-visible {
    color: #111;

    background:
        rgba(
            255,
            255,
            255,
            var(--voices-interface-active-opacity)
        );

    box-shadow:
        0 -2px 12px
        rgba(0, 0, 0, 0.09);

    text-decoration: none;
}


.voices-archive-button:focus-visible {
    outline:
        2px solid
        rgba(255, 255, 255, 0.95);

    outline-offset: 3px;
}


.voices-archive-action:hover
    .voices-archive-icon,
.voices-archive-action:focus-within
    .voices-archive-icon {

    opacity: 1;
}


/* ==========================================================
   3. HORIZONTAL LINE

   Strong on left.
   Gradually fades into hero towards right.
========================================================== */

.voices-archive-header::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 100vw;
    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to right,

            rgba(
                255,
                255,
                255,
                var(--voices-interface-opacity)
            )
                0%,

            rgba(
                255,
                255,
                255,
                var(--voices-interface-opacity)
            )
                40%,

            rgba(255,255,255,0.30)
                65%,

            rgba(255,255,255,0.10)
                83%,

            transparent
                100%
        );

    opacity: 0.82;

    transition:
        opacity 0.22s ease;
}


.modular-voices-archive:hover
    .voices-archive-header::after,
.modular-voices-archive:focus-within
    .voices-archive-header::after {

    opacity: 1;
}

/* ==========================================================
   VOICES ARCHIVE — CLEAN DESKTOP RESET

   Temporary definitive override.

   Purpose:
   - remove all previous masks / clips / transforms
   - no JS
   - no absolute positioning
   - no max-content positioning
   - fixed 55vw visible area
   - excess cards continue off the LEFT
========================================================== */

@media (min-width: 561px) {

    /* ------------------------------------------------------
       Visible window
    ------------------------------------------------------ */

    .modular-voices-archive .voices-archive-rail {
        position: relative !important;

        width: 55vw !important;
        height: auto !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: 0 !important;

        padding-top: 0.7rem !important;
        padding-bottom: 0.4rem !important;

        display: block !important;

        overflow: hidden !important;

        /*
         * Kill ALL previous experimental effects.
         */
        clip-path: none !important;
        -webkit-clip-path: none !important;

        mask: none !important;
        mask-image: none !important;

        -webkit-mask: none !important;
        -webkit-mask-image: none !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        direction: ltr !important;
    }


    /* ------------------------------------------------------
       Image row

       The track itself is simply 55vw wide.

       row-reverse makes the flex sequence begin at the
       RIGHT side and continue towards the LEFT.

       Once there are more photographs than will fit,
       they naturally overflow beyond the LEFT edge.

       The rail clips that overflow.

       No intrinsic-width calculations are involved.
    ------------------------------------------------------ */

    .modular-voices-archive .voices-archive-track {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: row-reverse !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: clamp(
            0.45rem,
            0.7vw,
            0.7rem
        ) !important;

        overflow: visible !important;

        transform: none !important;

        clip-path: none !important;
        -webkit-clip-path: none !important;

        mask: none !important;
        mask-image: none !important;

        -webkit-mask: none !important;
        -webkit-mask-image: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        direction: ltr !important;
    }


    /* ------------------------------------------------------
       Cards
    ------------------------------------------------------ */

    .modular-voices-archive .voices-card {
        position: relative !important;

        display: block !important;

        flex:
            0
            0
            clamp(10.5rem, 12vw, 13rem)
            !important;

        width: auto !important;

        overflow: hidden !important;

        opacity: 0.58 !important;
        visibility: visible !important;

        clip-path: none !important;
        -webkit-clip-path: none !important;

        mask: none !important;
        mask-image: none !important;

        -webkit-mask: none !important;
        -webkit-mask-image: none !important;

        border-radius: 0.28rem;
    }


    /* ------------------------------------------------------
       Image wrapper
    ------------------------------------------------------ */

    .modular-voices-archive .voices-card-image {
        display: block !important;

        width: 100% !important;

        aspect-ratio: 16 / 9 !important;

        overflow: hidden !important;

        opacity: 1 !important;
        visibility: visible !important;

        clip-path: none !important;

        mask: none !important;
        -webkit-mask: none !important;
    }


    /* ------------------------------------------------------
       Actual image
    ------------------------------------------------------ */

    .modular-voices-archive .voices-card-image img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;

        opacity: 1 !important;
        visibility: visible !important;

        filter: none !important;

        transform: none !important;

        clip-path: none !important;
        -webkit-clip-path: none !important;

        mask: none !important;
        mask-image: none !important;

        -webkit-mask: none !important;
        -webkit-mask-image: none !important;
    }


    /* ------------------------------------------------------
       Hover can still bring images forward
    ------------------------------------------------------ */

    .modular-voices-archive .voices-card:hover,
    .modular-voices-archive .voices-card:focus-visible {
        opacity: 1 !important;
    }
}

/* ==========================================================
   5. IMAGE CARDS
========================================================== */

.voices-card {
    display: block;

    flex:
        0 0
        var(--voices-card-width);

    overflow: hidden;

    border-radius: 0.28rem;

    opacity: 0.58;

    box-shadow:
        0 1px 5px
        rgba(0, 0, 0, 0.08);

    transform:
        translateY(0);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


/*
 * General strip hover.
 */
.voices-archive-rail:hover
    .voices-card {

    opacity: 0.72;
}


/*
 * Individual card hover.
 */
.voices-card:hover,
.voices-card:focus-visible {
    opacity: 1;

    transform:
        translateY(-0.18rem);

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.16);
}


.voices-card:focus-visible {
    outline:
        2px solid
        rgba(255, 255, 255, 0.92);

    outline-offset: 2px;
}


/* ==========================================================
   6. CARD IMAGE
========================================================== */

.voices-card-image {
    display: block;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;
}


.voices-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   7. MOBILE

   On mobile the archive becomes a conventional,
   full-width horizontally scrollable strip.

   This uses only native browser touch scrolling.
   No JavaScript.
========================================================== */

@media (max-width: 560px) {

    :root {
        --voices-strip-height:
            8.75rem;

        --voices-bottom-gap:
            4.5rem;
    }


    /* ======================================================
       TAB
    ====================================================== */

    .voices-archive-action {
        gap: 0.5rem;
    }


    .voices-archive-icon {
        margin-bottom: 0.45rem;

        font-size: 2rem;
    }


    .voices-archive-button {
        padding:
            0.45rem
            0.6rem
            0.4rem;
    }


    .voices-archive-button-title {
        font-size: 0.8rem;
    }


    .voices-archive-button-domain {
        font-size: 0.6rem;
    }


    /* ======================================================
       HORIZONTAL LINE

       Still spans the screen and fades towards the right.
    ====================================================== */

    .voices-archive-header::after {
        background:
            linear-gradient(
                to right,

                rgba(
                    255,
                    255,
                    255,
                    var(--voices-interface-opacity)
                )
                    0%,

                rgba(
                    255,
                    255,
                    255,
                    var(--voices-interface-opacity)
                )
                    48%,

                rgba(255, 255, 255, 0.18)
                    82%,

                transparent
                    100%
            );
    }


    /* ======================================================
       FULL-WIDTH MOBILE SCROLL RAIL
    ====================================================== */

    .voices-archive-rail {
        position: relative;

        width: 100vw;
        height: auto;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);

        overflow-x: auto;
        overflow-y: hidden;

        padding-top: 0.55rem;
        padding-bottom: 0.35rem;

        /*
         * Native horizontal touch scrolling.
         */
        -webkit-overflow-scrolling: touch;

        overscroll-behavior-inline: contain;

        scroll-snap-type:
            x proximity;


        /*
         * Fade images gently at BOTH screen edges.
         */
        -webkit-mask-image:
            linear-gradient(
                to right,

                transparent 0,

                rgba(0, 0, 0, 0.55)
                    1rem,

                #000
                    2.25rem,

                #000
                    calc(100% - 2.25rem),

                rgba(0, 0, 0, 0.55)
                    calc(100% - 1rem),

                transparent
                    100%
            );

        mask-image:
            linear-gradient(
                to right,

                transparent 0,

                rgba(0, 0, 0, 0.55)
                    1rem,

                #000
                    2.25rem,

                #000
                    calc(100% - 2.25rem),

                rgba(0, 0, 0, 0.55)
                    calc(100% - 1rem),

                transparent
                    100%
            );


        /*
         * Hide scrollbar visually.
         * Touch scrolling still works normally.
         */
        scrollbar-width: none;
    }


    .voices-archive-rail::-webkit-scrollbar {
        display: none;
    }


    /* ======================================================
       MOBILE IMAGE TRACK

       Override the absolute-positioned desktop track.

       It becomes a normal horizontal flex row wider than
       the screen, allowing native scrolling.
    ====================================================== */

    .voices-archive-track {
        --voices-card-width:
            clamp(
                7.25rem,
                38vw,
                9rem
            );

        position: relative;

        top: auto;
        right: auto;

        display: flex;
        align-items: stretch;

        width: max-content;

        gap: 0.42rem;

        /*
         * Lets first and final cards move properly through
         * the screen-edge fades.
         */
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }


    /* ======================================================
       MOBILE CARDS
    ====================================================== */

    .voices-card {
        flex:
            0 0
            var(--voices-card-width);

        opacity: 0.76;

        scroll-snap-align: center;
    }


    .voices-card:focus-visible,
    .voices-card:active {
        opacity: 1;
    }
}
/* ==========================================================
   8. REDUCED MOTION
========================================================== */

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

    .voices-card,
    .voices-archive-button,
    .voices-archive-icon,
    .voices-archive-header::after {

        transition: none;
    }


    .voices-card:hover,
    .voices-card:focus-visible {

        transform: none;
    }
}














h2::before {
    content: none;
    display: none;
}









/* ==========================================================
   GENDER APARTHEID HOMEPAGE MODULES

   CONTENTS
   ----------------------------------------------------------
   1. Shared variables
   2. Shared section labels
   3. Project Welcome
      3a. Portrait
      3b. Welcome heading
      3c. Fatemeh quote
      3d. Project introduction
      3e. Attribution and links
      3f. Partners
   4. Full-width Project Feature
   5. Project image cards
   6. Gender Apartheid definition
   7. Tablet adjustments
   8. Mobile adjustments
   9. Reduced motion
========================================================== */


/* ==========================================================
   1. SHARED VARIABLES

   Useful values to change when tuning the whole homepage.
========================================================== */

:root {
    --ga-pink: #ff0046;

    --ga-text: #171717;
    --ga-muted: #666666;
    --ga-light-border: rgba(20, 20, 20, 0.12);

        --ga-section-space: clamp(3rem, 4vw, 5rem);

    --ga-small-gap:
        clamp(1rem, 2vw, 1.5rem);

    --ga-medium-gap:
        clamp(1.5rem, 3vw, 3rem);

    --ga-large-gap:
        clamp(2.5rem, 5vw, 5rem);
}


/* ==========================================================
   2. SHARED SMALL SECTION LABELS
========================================================== */

.ga-section-eyebrow,
.ga-project-eyebrow {
    margin: 0 0 0.65rem;

    color: var(--ga-pink);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ==========================================================
   3. PROJECT WELCOME

   Fatemeh welcome / quote
   Portrait on right
   Partners flow around portrait

   IMPORTANT:

   The portrait is intentionally floated.

   This means content can begin beside the portrait and then
   automatically expand to full width once it passes beneath
   the bottom of the image.

   This behaviour applies on desktop AND mobile.
========================================================== */

.ga-welcome {
    padding:
        var(--ga-section-space)
        0;
}


.ga-welcome-inner {
    color: var(--ga-text);
}


/* ----------------------------------------------------------
   3a. WELCOME PORTRAIT

   Desktop:
   Wider image revealing more of the photograph.

   Mobile:
   Becomes a narrow cropped strip while text wraps beside it.
---------------------------------------------------------- */

.ga-welcome-portrait {
    float: right;

    width: clamp(18rem, 31%, 25rem);

    margin:
        0
        0
        2rem
        clamp(2rem, 5vw, 5rem);

    padding: 0;
}


.ga-welcome-portrait img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;

    border-radius: 0.6rem;
}


/* ----------------------------------------------------------
   3b. WELCOME HEADING
---------------------------------------------------------- */

.ga-welcome-heading {
    margin:
        0
        0
        1.25rem;

    color: var(--ga-text);

    font-size:
        clamp(2rem, 3vw, 3.25rem);

    line-height: 1.05;
}


/* ----------------------------------------------------------
   3c. FATEMEH QUOTE

   This comes from the separate frontmatter field:

   quote: '...'

   It is deliberately separate from page.content to make
   language versions easier to manage.
---------------------------------------------------------- */

.ga-welcome-quote {
    margin:
        0
        0
        1.4rem;

    padding: 0;

    border: 0;

    color: var(--ga-text);

    font-size:
        clamp(1.3rem, 2vw, 1.75rem);

    font-weight: 500;
    line-height: 1.35;
}


.ga-welcome-quote p
 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6;
}


/*
 * Decorative opening quotation mark.

 * Do not type quotation marks around the quote in YAML.
 */
.ga-welcome-quote::before {
    content: "“";

    display: block;

    margin-bottom: -0.2rem;

    color: var(--ga-pink);

    font-size: 2.5em;
    font-weight: 700;
    line-height: 0.8;
}


/* ----------------------------------------------------------
   3d. SHORT PROJECT INTRODUCTION

   This is normal Markdown content below the frontmatter.

   There is intentionally no max-width.

   When beside the portrait, the float determines the
   available width.

   Once beneath the portrait, this content automatically
   expands to the full container width.
---------------------------------------------------------- */

.ga-welcome-copy {
    max-width: none;

    color: var(--ga-text);

    font-size:
        clamp(1.05rem, 1.35vw, 1.25rem);

    line-height: 1.55;
}


.ga-welcome-copy p {
    margin-top: 0;
    font-size: 1rem;
}


.ga-welcome-copy p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   3e. PROJECT LEAD ATTRIBUTION
---------------------------------------------------------- */

.ga-welcome-attribution {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    margin-top: 1.25rem;
    font-size: 0.86rem;
    line-height: 1.3;
    margin-bottom: 2.5rem;
    text-align: right;
}


.ga-welcome-attribution strong {
    color: var(--ga-text);

    font-weight: 700;
}


.ga-welcome-attribution span {
    color: var(--ga-muted);
}


/* ----------------------------------------------------------
   PROFILE + CONTACT LINKS
---------------------------------------------------------- */

.ga-welcome-links {
    display: flex;
    flex-wrap: wrap;

    gap:
        0.75rem
        1.4rem;

    margin-top: 1rem;
}


.ga-welcome-links a {
    color: var(--ga-text);

    font-size: 0.84rem;
    font-weight: 650;

    text-decoration: none;
}


.ga-welcome-links a:hover,
.ga-welcome-links a:focus-visible {
    color: var(--ga-pink);

    text-decoration: none;
}


/* ----------------------------------------------------------
   3f. PARTNERS & SUPPORTERS

   IMPORTANT:

   Do NOT make .ga-partners-list display:flex or display:grid.

   The partner logos behave as inline content.

   This lets them:
   - use remaining space beside the portrait;
   - wrap naturally;
   - spread across the entire container once below portrait.
---------------------------------------------------------- */

.ga-partners {
    margin-top:
        clamp(2.5rem, 5vw, 4rem);
}


.ga-partners-heading {
    margin:
        0
        0
        1.25rem;

    color: var(--ga-muted);

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.ga-partners-list {
    line-height: 0;
}


/* Individual partner logo */

.ga-partner {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width:
        clamp(5rem, 8vw, 7.5rem);

    height: 4.75rem;

    margin:
        0
        clamp(1rem, 2vw, 2rem)
        1.5rem
        0;

    vertical-align: middle;

    opacity: 0.62;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.ga-partner img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    filter: grayscale(100%);
}


.ga-partner:hover,
.ga-partner:focus-visible {
    opacity: 1;

    transform: translateY(-0.15rem);
}


/*
 * Clear the portrait ONLY at the very end of the module.

 * Do not move this higher.
 *
 * Everything before this point is allowed to wrap around
 * the portrait.
 */
.ga-welcome-inner::after {
    content: "";

    display: block;
    clear: both;
}


/* ==========================================================
   4. FULL-WIDTH PROJECT FEATURE

   Full-screen-width photographic section.
   Text and cards remain aligned to the Grav container.
========================================================== */

.ga-project-feature {
    position: relative;

    overflow: hidden;

    padding:
        var(--ga-section-space)
        0;

    color: #ffffff;

    background-image:
        var(--ga-project-background);

    background-size: cover;
    background-position: center;
}


/* ----------------------------------------------------------
   PROJECT BACKGROUND OVERLAY

   Adjust these values if the backdrop needs to be
   lighter or darker.
---------------------------------------------------------- */

.ga-project-feature-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 10, 10, 0.84) 0%,
            rgba(10, 10, 10, 0.72) 45%,
            rgba(10, 10, 10, 0.48) 100%
        );
}


.ga-project-feature-inner {
    position: relative;

    z-index: 2;
}


/* ----------------------------------------------------------
   PROJECT HEADING
---------------------------------------------------------- */

.ga-project-heading {
    margin:
        0
        0
        1.25rem;

    max-width: 18ch;

    color: #ffffff;

    font-size:
        clamp(2.3rem, 4vw, 4.25rem);

    line-height: 1;
}


/* ----------------------------------------------------------
   PROJECT INTRODUCTION
---------------------------------------------------------- */

.ga-project-intro {
    max-width: 46rem;

    color: rgba(255, 255, 255, 0.94);

    font-size:
        clamp(1.05rem, 1.4vw, 1.3rem);

    line-height: 1.55;
}
.ga-project-intro p {
    color: #fff;
}

.ga-project-intro p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   FULL PROJECT DESCRIPTION LINK
---------------------------------------------------------- */

.ga-project-main-link {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    margin-top: 1.5rem;

    color: #ffffff;

    font-size: 0.86rem;
    font-weight: 700;

    text-decoration: none;
}


.ga-project-main-link:hover,
.ga-project-main-link:focus-visible {
    color: var(--ga-pink);
}


/* ==========================================================
   5. PROJECT IMAGE CARDS

   Intended for:
   - The Book
   - Voices of Gender Apartheid
   - From Interview to Story
========================================================== */

.ga-project-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--ga-small-gap);

    margin-top:
        clamp(2.5rem, 5vw, 4rem);
}


.ga-project-card {
    position: relative;

    display: block;

    min-height:
        clamp(14rem, 24vw, 21rem);

    overflow: hidden;

    color: #ffffff;

    border-radius: 0.55rem;

    text-decoration: none;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.20);
}


/* ----------------------------------------------------------
   CARD IMAGE
---------------------------------------------------------- */

.ga-project-card-image {
    position: absolute;
    inset: 0;
}


.ga-project-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.45s ease;
}


/* ----------------------------------------------------------
   CARD IMAGE OVERLAY
---------------------------------------------------------- */

.ga-project-card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.84) 0%,
            rgba(0, 0, 0, 0.26) 55%,
            rgba(0, 0, 0, 0.06) 100%
        );
}


/* ----------------------------------------------------------
   CARD SMALL LABEL
---------------------------------------------------------- */

.ga-project-card-kicker {
    position: absolute;

    left: 1.1rem;
    bottom: 3.9rem;

    z-index: 2;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   CARD TITLE
---------------------------------------------------------- */

.ga-project-card-title {
    position: absolute;

    right: 1.1rem;
    bottom: 1.15rem;
    left: 1.1rem;

    z-index: 2;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 1rem;

    color: #ffffff;

    font-size:
        clamp(1.25rem, 2vw, 1.75rem);

    font-weight: 700;
    line-height: 1.05;
}


.ga-project-card-arrow {
    flex: 0 0 auto;

    color: var(--ga-pink);

    transition:
        transform 0.2s ease;
}


/* ----------------------------------------------------------
   CARD HOVER / KEYBOARD FOCUS
---------------------------------------------------------- */

.ga-project-card:hover
    .ga-project-card-image img,
.ga-project-card:focus-visible
    .ga-project-card-image img {

    transform: scale(1.035);
}


.ga-project-card:hover
    .ga-project-card-arrow,
.ga-project-card:focus-visible
    .ga-project-card-arrow {

    transform: translateX(0.25rem);
}


.ga-project-card:focus-visible {
    outline:
        2px solid
        var(--ga-pink);

    outline-offset: 3px;
}


/* ==========================================================
   6. UNDERSTANDING GENDER APARTHEID
========================================================== */

.ga-definition {
    padding:
        var(--ga-section-space)
        0;
}


.ga-definition-inner {
    display: grid;

    grid-template-columns:
        minmax(15rem, 0.85fr)
        minmax(0, 1.6fr);

    gap: var(--ga-large-gap);

    align-items: start;
}


/* ----------------------------------------------------------
   DEFINITION HEADING
---------------------------------------------------------- */

.ga-definition-heading {
    margin: 0;

    max-width: 12ch;

    font-size:
        clamp(2.2rem, 4vw, 4rem);

    line-height: 1;
}


/* ----------------------------------------------------------
   DEFINITION CONTENT
---------------------------------------------------------- */

.ga-definition-content {
    max-width: 48rem;
}


/*
 * Principal homepage definition.
 */
.ga-definition-statement {
    margin:
        0
        0
        1.5rem;

    padding-left: 1.4rem;

    border-left:
        4px solid
        var(--ga-pink);

    color: var(--ga-text);

    font-size:
        clamp(1.4rem, 2.2vw, 2rem);

    font-weight: 500;
    line-height: 1.35;
}


/* Supporting explanation */

.ga-definition-supporting {
    color: var(--ga-muted);

    font-size:
        clamp(1rem, 1.25vw, 1.16rem);

    line-height: 1.6;
}


.ga-definition-supporting p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   DEFINITION READ-MORE LINK
---------------------------------------------------------- */

.ga-definition-link {
    display: inline-flex;
    align-items: center;

    gap: 0.45rem;

    margin-top: 1.5rem;

    color: var(--ga-text);

    font-size: 0.88rem;
    font-weight: 700;

    text-decoration: none;
}


.ga-definition-link:hover,
.ga-definition-link:focus-visible {
    color: var(--ga-pink);
}


/* ==========================================================
   7. TABLET
   Up to 840px
========================================================== */

@media (max-width: 840px) {

    /* ------------------------------------------------------
       Welcome portrait
    ------------------------------------------------------ */

    .ga-welcome-portrait {
        width:
            clamp(12rem, 32%, 18rem);

        margin:
            0
            0
            1.5rem
            2rem;
    }


    .ga-welcome-heading {
        font-size:
            clamp(1.9rem, 5vw, 2.7rem);
    }


    .ga-welcome-quote {
        font-size:
            clamp(1.2rem, 2.6vw, 1.5rem);
    }

.ga-welcome-quote p
 {
    font-size: 1.1rem;
    line-height: 1.6;
}

    /* ------------------------------------------------------
       Project cards
    ------------------------------------------------------ */

    .ga-project-card {
        min-height: 15rem;
    }


    .ga-project-card-kicker {
        left: 0.85rem;
        bottom: 3.5rem;
    }


    .ga-project-card-title {
        right: 0.85rem;
        bottom: 0.9rem;
        left: 0.85rem;
    }


    /* ------------------------------------------------------
       Definition
    ------------------------------------------------------ */

    .ga-definition-inner {
        grid-template-columns:
            minmax(12rem, 0.75fr)
            minmax(0, 1.5fr);

        gap: 2rem;
    }
}


/* ==========================================================
   8. MOBILE
   Up to 560px
========================================================== */

@media (max-width: 560px) {

    /* ======================================================
       MOBILE — WELCOME
    ====================================================== */

    .ga-welcome {
        padding:
            clamp(3rem, 10vw, 4rem)
            0;
    }
.ga-welcome-copy p {
    font-size: 0.9rem;
}

    /*
     * Narrow cropped portrait on the right.

     * Text begins beside it.

     * Once the text reaches beneath the image it naturally
     * expands back to full page width.
     */
    .ga-welcome-portrait {
        width: 28%;

        min-width: 6.5rem;
        max-width: 8.5rem;

        margin:
            0
            0
            1rem
            1rem;
    }


    /*
     * Tall, narrow viewing window onto the portrait.

     * Change object-position if Fatemeh's face needs
     * shifting left/right within the crop.
     */
    .ga-welcome-portrait img {
        aspect-ratio: 2 / 5;

        object-fit: cover;
        object-position: center;
    }


    /* Small label */

    .ga-welcome .ga-section-eyebrow {
        margin-bottom: 0.5rem;

        font-size: 0.65rem;
    }


    /* Heading */

    .ga-welcome-heading {
        margin-bottom: 1rem;

        font-size:
            clamp(1.7rem, 7vw, 2.3rem);

        line-height: 1.05;
    }


    /* Quote */

    .ga-welcome-quote {
        margin-bottom: 1rem;

        font-size:
            clamp(1.08rem, 4.8vw, 1.3rem);

        line-height: 1.4;
    }


    .ga-welcome-quote::before {
        margin-bottom: -0.1rem;

        font-size: 2em;
    }


    /* Project introduction */

    .ga-welcome-copy {
        font-size: 1rem;

        line-height: 1.5;
    }


    /* Attribution */

    .ga-welcome-attribution {
        margin-top: 1rem;

        font-size: 0.8rem;
    }


    /* Profile / contact */

    .ga-welcome-links {
        gap:
            0.7rem
            1rem;

        margin-top: 0.8rem;
    }


    .ga-welcome-links a {
        font-size: 0.78rem;
    }


    /* ======================================================
       MOBILE — PARTNERS

       Still inline.

       Logos can therefore use any space beside the portrait
       and then spread across the whole page beneath it.
    ====================================================== */

    .ga-partners {
        margin-top: 2rem;
    }


    .ga-partners-heading {
        margin-bottom: 1rem;

        font-size: 0.65rem;
    }


    .ga-partner {
        width:
            clamp(4.2rem, 19vw, 5.5rem);

        height: 3.5rem;

        margin:
            0
            0.8rem
            0.9rem
            0;
    }


    /* ======================================================
       MOBILE — PROJECT FEATURE
    ====================================================== */

    .ga-project-feature {
        padding:
            clamp(3.5rem, 12vw, 5rem)
            0;

        background-position: center;
    }


    /*
     * Slightly stronger overlay on mobile because the
     * background image occupies more of the text area.
     */
    .ga-project-feature-overlay {
        background:
            rgba(10, 10, 10, 0.72);
    }


    .ga-project-heading {
        font-size:
            clamp(2rem, 9vw, 3rem);
    }


    .ga-project-intro {
        font-size: 1rem;
        line-height: 1.5;
    }


    /* ------------------------------------------------------
       Mobile project cards

       One card per row.
    ------------------------------------------------------ */

    .ga-project-cards {
        grid-template-columns: 1fr;

        gap: 0.85rem;

        margin-top: 2.5rem;
    }


    .ga-project-card {
        min-height: 12rem;
    }


    .ga-project-card-kicker {
        left: 1rem;
        bottom: 3.6rem;
    }


        .ga-project-card-title
 {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        font-size: clamp(1.25rem, 5.5vw, 1.6rem);
        letter-spacing: -1px;
    }


    /* ======================================================
       MOBILE — GENDER APARTHEID DEFINITION
    ====================================================== */

    .ga-definition {
        padding:
            clamp(3.5rem, 12vw, 5rem)
            0;
    }


    .ga-definition-inner {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .ga-definition-heading {
        max-width: 14ch;

        font-size:
            clamp(2rem, 9vw, 3rem);
    }


    .ga-definition-statement {
        padding-left: 1rem;

        font-size:
            clamp(1.25rem, 5.5vw, 1.55rem);
    }


    .ga-definition-supporting {
        font-size: 1rem;
    }
}


/* ==========================================================
   9. REDUCED MOTION
========================================================== */

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

    .ga-partner,
    .ga-project-card-image img,
    .ga-project-card-arrow {

        transition: none;
    }


    .ga-partner:hover,
    .ga-partner:focus-visible,
    .ga-project-card:hover
        .ga-project-card-image img,
    .ga-project-card:focus-visible
        .ga-project-card-image img {

        transform: none;
    }
}



































/* =========================================================
   PROJECT PAGE
   ========================================================= */

.ga-project-page {
    --ga-project-bg-soft: #f3f3f1;
    --ga-project-dark: #171717;
    --ga-project-text: #171717;
    --ga-project-muted: #646464;
    --ga-project-line: rgba(20, 20, 20, 0.14);
}


.ga-project-section {
    position: relative;
    padding:
        clamp(4.5rem, 7vw, 7.5rem)
        0;
}


.ga-project-eyebrow {
    margin:
        0
        0
        1.4rem;

    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: .16em;
    text-transform: uppercase;

    color: var(--ga-pink, #ff0046);
}


.ga-project-copy {
    max-width: 42rem;
}


.ga-project-copy p:last-child {
    margin-bottom: 0;
}


.ga-project-link {
    display: inline-flex;
    gap: .6rem;

    margin-top: 1.4rem;

    font-weight: 700;
    text-decoration: none;
}


/* =========================================================
   INTRO
   ========================================================= */

.ga-project-intro-section {
    background: #fff;
}


.ga-project-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(22rem, .95fr)
        minmax(0, 1.05fr);

    gap: clamp(3rem, 6vw, 6rem);

    align-items: center;
}


.ga-project-intro__heading {
    max-width: 12ch;

    margin:
        0
        0
        1.8rem;

    font-size:
        clamp(3.2rem, 5.5vw, 6rem);

    line-height: .93;
    letter-spacing: -.02em;
}


.ga-project-intro__copy {
    max-width: 36rem;

    font-size:
        clamp(1rem, 1.3vw, 1.2rem);

    line-height: 1.65;
}


.ga-project-intro__visual {
    position: relative;

    min-height:
        clamp(28rem, 48vw, 42rem);
}


.ga-project-intro__image {
    position: absolute;

    top: 0;
    right: 0;

    width: 88%;
    height: 88%;

    margin: 0;

    overflow: hidden;

    border-radius: .55rem;
}


.ga-project-intro__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.ga-project-intro__book {
    position: absolute;

    left: 0;
    bottom: 0;

    width:
        clamp(8rem, 15vw, 12rem);

    margin: 0;

    z-index: 2;

    box-shadow:
        0
        1.5rem
        3.5rem
        rgba(0, 0, 0, .2);
}


.ga-project-intro__book img {
    display: block;
    width: 100%;
    height: auto;
}


.ga-project-facts {
    display: flex;
    flex-wrap: wrap;

    gap:
        .65rem
        1.4rem;

    margin-top: 2.3rem;
    padding-top: 1.25rem;

    border-top:
        1px solid
        var(--ga-project-line);
}


.ga-project-facts span {
    font-size: .78rem;
    font-weight: 650;

    color:
        var(--ga-project-muted);
}


/* =========================================================
   WOMEN'S OWN VOICES
   ========================================================= */

.ga-project-voices {
    background:
        var(--ga-project-bg-soft);
}


.ga-project-voices__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(18rem, .7fr);

    gap:
        clamp(2.5rem, 6vw, 6rem);

    align-items: center;
}


.ga-project-voices__media {
    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #222;

    border-radius: .45rem;
}


.ga-project-voices__media video,
.ga-project-voices__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ga-project-voices__content h2 {
    max-width: 9ch;

    margin:
        0
        0
        1.7rem;

    font-size:
        clamp(2.6rem, 4.5vw, 4.8rem);

    line-height: .98;
    letter-spacing: -.045em;
}


/* =========================================================
   METHOD
   ========================================================= */

.ga-project-method {
    background: #fff;
}


.ga-project-method__header {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(2rem, 6vw, 6rem);

    align-items: end;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);
}


.ga-project-method__header .ga-project-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0;
}




.ga-project-method__intro {
    max-width: 40rem;

    margin: 0;

    font-size:
        clamp(1.1rem, 1.5vw, 1.35rem);

    line-height: 1.5;
}


.ga-project-method__steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid
        var(--ga-project-line);
}


.ga-project-method__step {
    position: relative;

    padding:
        1.6rem
        1.5rem
        0
        0;
}


.ga-project-method__step + .ga-project-method__step {
    padding-left: 1.5rem;

    border-left:
        1px solid
        var(--ga-project-line);
}


.ga-project-method__number {
    display: block;

    margin-bottom: 2.8rem;

    font-size: .72rem;
    font-weight: 800;

    color:
        var(--ga-pink, #ff0046);
}


.ga-project-method__step h3 {
    margin:
        0
        0
        .9rem;

    font-size:
        clamp(1.25rem, 1.8vw, 1.7rem);
}


.ga-project-method__step p {
    margin: 0;

    font-size: .92rem;
    line-height: 1.6;

    color:
        var(--ga-project-muted);
}


/* =========================================================
   FATEMEH
   ========================================================= */

.ga-project-person {
    background:
        var(--ga-project-bg-soft);
}


.ga-project-person__grid {
    display: grid;

    grid-template-columns:
        minmax(18rem, .85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(3rem, 7vw, 7rem);

    align-items: center;
}


.ga-project-person__visual {
    position: relative;

    padding:
        0
        clamp(2rem, 5vw, 5rem)
        clamp(3rem, 6vw, 5rem)
        0;
}


.ga-project-person__portrait {
    margin: 0;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    border-radius: .45rem;
}


.ga-project-person__portrait img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ga-project-person__working {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 43%;

    margin: 0;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    border:
        .45rem solid
        var(--ga-project-bg-soft);

    border-radius: .55rem;
}


.ga-project-person__working img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.ga-project-person__content h2 {
    max-width: 10ch;

    margin:
        0
        0
        1.8rem;

    font-size:
        clamp(3rem, 5.3vw, 5.6rem);

    line-height: .94;
    letter-spacing: -.02em;
}


.ga-project-person__support {
    display: flex;
    flex-direction: column;

    gap: .25rem;

    margin-top: 2.8rem;
    padding-top: 1.3rem;

    border-top:
        1px solid
        var(--ga-project-line);

    font-size: .78rem;
}


.ga-project-person__support span {
    color:
        var(--ga-project-muted);
}


.ga-project-person__support a {
    width: fit-content;

    font-weight: 700;
}


/* =========================================================
   OUTPUTS
   ========================================================= */

.ga-project-outputs {
    padding-top:
        clamp(5rem, 8vw, 9rem);

    padding-bottom:
        clamp(5rem, 8vw, 9rem);

    background:
        var(--ga-project-dark);

    color: #fff;
}


.ga-project-outputs__header {
    display: grid;

    grid-template-columns:
        .65fr
        1.35fr;

    gap:
        clamp(2rem, 6vw, 6rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 7rem);
}


.ga-project-outputs__header .ga-project-eyebrow {
    margin: 0;
}


.ga-project-outputs__header h2 {
    max-width: 13ch;

    margin: 0;

    font-size:
        clamp(3rem, 5.5vw, 5.8rem);

    line-height: .95;
    letter-spacing: -.02em;

    color: #fff;
}


.ga-project-outputs__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;

    border-top:
        1px solid
        rgba(255,255,255,.18);
}


.ga-project-output {
    padding-top:
        clamp(2rem, 4vw, 4rem);
}


.ga-project-output--book {
    padding-right:
        clamp(2rem, 5vw, 5rem);
}


.ga-project-output--voices {
    padding-left:
        clamp(2rem, 5vw, 5rem);

    border-left:
        1px solid
        rgba(255,255,255,.18);
}


.ga-project-output-book__inner {
    display: grid;

    grid-template-columns:
        minmax(8rem, .55fr)
        minmax(0, 1fr);

    gap:
        clamp(1.5rem, 4vw, 3.5rem);

    align-items: end;
}


.ga-project-output-book__cover {
    margin: 0;

    box-shadow:
        0
        1.5rem
        4rem
        rgba(0,0,0,.4);
}


.ga-project-output-book__cover img {
    display: block;

    width: 100%;
    height: auto;
}


.ga-project-output__kicker {
    margin:
        0
        0
        .8rem;

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;

    color:
        var(--ga-pink, #ff0046);
}


.ga-project-output__content h3 {
    margin:
        0
        0
        1rem;

    font-size:
        clamp(2rem, 3vw, 3.3rem);

    line-height: .98;

    color: #fff;
}


.ga-project-output__content p {
    max-width: 33rem;

    color:
        rgba(255,255,255,.72);

    line-height: 1.65;
}


.ga-project-output__content a {
    display: inline-flex;

    gap: .65rem;

    margin-top: 1rem;

    color: #fff;

    font-weight: 750;
    text-decoration: none;
}


.ga-project-output__content a span {
    color:
        var(--ga-pink, #ff0046);
}


.ga-project-output-voices__media {
    display: grid;

    grid-template-columns:
        1.45fr
        .75fr;

    grid-template-rows:
        1fr
        1fr;

    gap: .55rem;

    margin-bottom: 2rem;

    aspect-ratio: 16 / 10;
}


.ga-project-output-voices__media figure {
    margin: 0;

    overflow: hidden;

    border-radius: .3rem;
}


.ga-project-output-voices__media figure:first-child {
    grid-row:
        1 / span 2;
}


.ga-project-output-voices__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .ga-project-intro__grid,
    .ga-project-voices__grid,
    .ga-project-person__grid,
    .ga-project-method__header {
        grid-template-columns: 1fr;
    }


    .ga-project-intro__heading,
    .ga-project-person__content h2 {
        max-width: 12ch;
    }


    .ga-project-intro__visual {
        min-height: 34rem;
    }


    .ga-project-voices__content {
        max-width: 38rem;
    }


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


    .ga-project-method__step:nth-child(3) {
        border-left: 0;
    }


    .ga-project-method__step:nth-child(n+3) {
        margin-top: 2.5rem;

        border-top:
            1px solid
            var(--ga-project-line);
    }


    .ga-project-outputs__header {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PROJECT PAGE
   ========================================================= */

.ga-project-page {
    --ga-project-dark: #171717;
    --ga-project-text: #171717;
    --ga-project-muted: #646464;
    --ga-project-line: rgba(20, 20, 20, 0.14);
    --ga-project-dark-line: rgba(255, 255, 255, 0.18);
}

.ga-project-section {
    position: relative;
    padding: clamp(4.5rem, 7vw, 7.5rem) 0;
}

.ga-project-eyebrow {
    margin: 0 0 1.4rem;
    color: var(--ga-pink, #ff0046);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ga-project-copy {
    max-width: 42rem;
}

.ga-project-copy p:last-child {
    margin-bottom: 0;
}

.ga-project-link {
    display: inline-flex;
    gap: .6rem;
    margin-top: 1.4rem;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================================
   1. INTRO — WHITE
   ========================================================= */

.ga-project-intro-section {
    background: #fff;
    color: var(--ga-project-text);
}

.ga-project-intro__grid {
    display: grid;
    grid-template-columns:
        minmax(22rem, .95fr)
        minmax(0, 1.05fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

.ga-project-intro__heading {
    max-width: 12ch;
    margin: 0 0 1.8rem;

    font-size: clamp(3.2rem, 5.5vw, 6rem);
    line-height: .93;
    letter-spacing: -.02em;
}

.ga-project-intro__copy {
    max-width: 36rem;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.65;
}

.ga-project-intro__visual {
    position: relative;
    min-height: clamp(28rem, 48vw, 42rem);
}

.ga-project-intro__image {
    position: absolute;
    top: 0;
    right: 0;

    width: 88%;
    height: 88%;
    margin: 0;

    overflow: hidden;
    border-radius: .55rem;
}

.ga-project-intro__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-project-intro__book {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;

    width: clamp(8rem, 15vw, 12rem);
    margin: 0;

    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .2);
}

.ga-project-intro__book img {
    display: block;
    width: 100%;
    height: auto;
}

.ga-project-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.4rem;

    margin-top: 2.3rem;
    padding-top: 1.25rem;

    border-top: 1px solid var(--ga-project-line);
}

.ga-project-facts span {
    color: var(--ga-project-muted);
    font-size: .78rem;
    font-weight: 650;
}


/* Intro fallback while images are missing */

.ga-project-intro__grid--no-media {
    grid-template-columns: 1fr;
}

.ga-project-intro__grid--no-media .ga-project-intro__content {
    max-width: 52rem;
}

.ga-project-intro__grid--no-media .ga-project-intro__visual {
    display: none;
}


/* =========================================================
   2. FROM THE INTERVIEWS — BLACK
   BOOK + VOICES
   ========================================================= */

.ga-project-outputs {
    background: var(--ga-project-dark);
    color: #fff;

    padding-top: clamp(5rem, 8vw, 9rem);
    padding-bottom: clamp(5rem, 8vw, 9rem);
}

.ga-project-outputs__header {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;

    margin-bottom: clamp(4rem, 7vw, 7rem);
}

.ga-project-outputs__header .ga-project-eyebrow {
    margin: 0;
}



.ga-project-outputs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--ga-project-dark-line);
}

.ga-project-output {
    padding-top: clamp(2rem, 4vw, 4rem);
}

.ga-project-output--book {
    padding-right: clamp(2rem, 5vw, 5rem);
}

.ga-project-output--voices {
    padding-left: clamp(2rem, 5vw, 5rem);
    border-left: 1px solid var(--ga-project-dark-line);
}

.ga-project-output-book__inner {
    display: grid;
    grid-template-columns:
        minmax(8rem, .55fr)
        minmax(0, 1fr);

    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
}

.ga-project-output-book__cover {
    margin: 0;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4);
}

.ga-project-output-book__cover img {
    display: block;
    width: 100%;
    height: auto;
}

.ga-project-output__kicker {
    margin: 0 0 .8rem;

    color: var(--ga-pink, #ff0046);

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ga-project-output__content h3 {
    margin: 0 0 1rem;

    color: #fff;

    font-size: clamp(2rem, 3vw, 3.3rem);
    line-height: .98;
}

.ga-project-output__content p {
    max-width: 33rem;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
}

.ga-project-output__content a {
    display: inline-flex;
    gap: .65rem;

    margin-top: 1rem;

    color: #fff;
    font-weight: 750;
    text-decoration: none;
}

.ga-project-output__content a span {
    color: var(--ga-pink, #ff0046);
}

.ga-project-output-voices__media {
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    grid-template-rows: 1fr 1fr;

    gap: .55rem;
    margin-bottom: 2rem;

    aspect-ratio: 16 / 10;
}

.ga-project-output-voices__media figure {
    margin: 0;
    overflow: hidden;
    border-radius: .3rem;
}

.ga-project-output-voices__media figure:first-child {
    grid-row: 1 / span 2;
}

.ga-project-output-voices__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   3. WOMEN'S OWN VOICES — WHITE
   ========================================================= */

.ga-project-voices {
    background: #fff;
    color: var(--ga-project-text);
}

.ga-project-voices__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(18rem, .7fr);

    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.ga-project-voices__media {
    overflow: hidden;
    aspect-ratio: 16 / 9;

    background: #222;
    border-radius: .45rem;
}

.ga-project-voices__media video,
.ga-project-voices__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-project-voices__content h2 {
    max-width: 9ch;
    margin: 0 0 1.7rem;

    color: var(--ga-project-text);

    font-size: clamp(2.6rem, 4.5vw, 4.8rem);
    line-height: .98;
    letter-spacing: -.02em;
}


/* =========================================================
   4. HOW WE WORK — BLACK
   ========================================================= */

.ga-project-method {
    background: var(--ga-project-dark);
    color: #fff;
}

.ga-project-method__header {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;

    margin-bottom: clamp(3rem, 5vw, 5rem);
}

.ga-project-method__header .ga-project-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0;
}



.ga-project-method__intro {
    max-width: 40rem;
    margin: 0;

    color: rgba(255,255,255,.82);

    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.5;
}

.ga-project-method__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--ga-project-dark-line);
}

.ga-project-method__step {
    position: relative;
    padding: 1.6rem 1.5rem 0 0;
}

.ga-project-method__step + .ga-project-method__step {
    padding-left: 1.5rem;
    border-left: 1px solid var(--ga-project-dark-line);
}

.ga-project-method__number {
    display: block;
    margin-bottom: 2.8rem;

    color: var(--ga-pink, #ff0046);

    font-size: .72rem;
    font-weight: 800;
}

.ga-project-method__step h3 {
    margin: 0 0 .9rem;
    color: #fff;

    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
}

.ga-project-method__step p {
    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: .92rem;
    line-height: 1.6;
}


/* =========================================================
   5. FATEMEH — WHITE
   ========================================================= */

.ga-project-person {
    background: #fff;
    color: var(--ga-project-text);
}

.ga-project-person__grid {
    display: grid;

    grid-template-columns:
        minmax(18rem, .85fr)
        minmax(0, 1.15fr);

    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.ga-project-person__visual {
    position: relative;

    padding:
        0
        clamp(2rem, 5vw, 5rem)
        clamp(3rem, 6vw, 5rem)
        0;
}

.ga-project-person__portrait {
    margin: 0;
    overflow: hidden;

    aspect-ratio: 4 / 5;
    border-radius: .45rem;
}

.ga-project-person__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-project-person__working {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 43%;
    margin: 0;

    overflow: hidden;
    aspect-ratio: 4 / 3;

    border: .45rem solid #fff;
    border-radius: .55rem;
}

.ga-project-person__working img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-project-person__content h2 {
    max-width: 10ch;
    margin: 0 0 1.8rem;

    color: var(--ga-project-text);

    font-size: clamp(3rem, 5.3vw, 5.6rem);
    line-height: .94;
    letter-spacing: -.02em;
}

.ga-project-person__content .ga-project-copy,
.ga-project-person__content .ga-project-copy p {
    color: var(--ga-project-text);
}

.ga-project-person .ga-project-link {
    color: var(--ga-project-text);
}

.ga-project-person .ga-project-link:hover,
.ga-project-person .ga-project-link:focus-visible {
    color: var(--ga-pink, #ff0046);
}

.ga-project-person__support {
    display: flex;
    flex-direction: column;
    gap: .25rem;

    margin-top: 2.8rem;
    padding-top: 1.3rem;

    border-top: 1px solid var(--ga-project-line);

    font-size: .78rem;
}

.ga-project-person__support span {
    color: var(--ga-project-muted);
}

.ga-project-person__support a {
    width: fit-content;
    color: var(--ga-project-text);
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .ga-project-intro__grid,
    .ga-project-voices__grid,
    .ga-project-person__grid,
    .ga-project-method__header {
        grid-template-columns: 1fr;
    }

    .ga-project-intro__heading,
    .ga-project-person__content h2 {
        max-width: 12ch;
    }

    .ga-project-intro__visual {
        min-height: 34rem;
    }

    .ga-project-voices__content {
        max-width: 38rem;
    }

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

    .ga-project-method__step:nth-child(3) {
        border-left: 0;
    }

    .ga-project-method__step:nth-child(n+3) {
        margin-top: 2.5rem;
        border-top: 1px solid var(--ga-project-dark-line);
    }

    .ga-project-outputs__header {
        grid-template-columns: 1fr;
    }

    .ga-project-outputs__grid {
        grid-template-columns: 1fr;
    }

    .ga-project-output--book {
        padding-right: 0;
    }

    .ga-project-output--voices {
        margin-top: 4rem;
        padding: 4rem 0 0;

        border-left: 0;
        border-top: 1px solid var(--ga-project-dark-line);
    }
}


@media (max-width: 600px) {

    .ga-project-section {
        padding: 4rem 0;
    }

    .ga-project-intro__heading {
        font-size: clamp(3rem, 14vw, 4.3rem);
    }

    .ga-project-intro__visual {
        min-height: 27rem;
    }

    .ga-project-intro__image {
        width: 92%;
        height: 87%;
    }

    .ga-project-intro__book {
        width: clamp(7rem, 28vw, 9rem);
    }

    .ga-project-facts {
        flex-direction: column;
        gap: .35rem;
    }

    .ga-project-method__steps {
        grid-template-columns: 1fr;
    }

    .ga-project-method__step,
    .ga-project-method__step + .ga-project-method__step {
        padding: 1.5rem 0 2rem;

        border-left: 0;
        border-top: 1px solid var(--ga-project-dark-line);
    }

    .ga-project-method__step:first-child {
        border-top: 0;
    }

    .ga-project-method__number {
        margin-bottom: 1.2rem;
    }

    .ga-project-person__visual {
        padding: 0 1.5rem 2.5rem 0;
    }

    .ga-project-person__working {
        width: 46%;
    }

    .ga-project-output-book__inner {
        grid-template-columns:
            minmax(7.5rem, .6fr)
            minmax(0, 1fr);
    }

    .ga-project-output-voices__media {
        aspect-ratio: 4 / 3;
    }
}/* =========================================================
   PROJECT PAGE
   ========================================================= */

.ga-project-page {
    --ga-project-dark: #171717;
    --ga-project-text: #171717;
    --ga-project-muted: #646464;
    --ga-project-line: rgba(20, 20, 20, 0.14);
    --ga-project-dark-line: rgba(255, 255, 255, 0.18);
}

.ga-project-section {
    position: relative;
    padding: clamp(4.5rem, 7vw, 7.5rem) 0;
}

.ga-project-eyebrow {
    margin: 0 0 1.4rem;
    color: var(--ga-pink, #ff0046);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ga-project-copy {
    max-width: 42rem;
}

.ga-project-copy p:last-child {
    margin-bottom: 0;
}

.ga-project-link {
    display: inline-flex;
    gap: .6rem;
    margin-top: 1.4rem;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================================
   1. INTRO — WHITE
   ========================================================= */

.ga-project-intro-section {
    background: #fff;
    color: var(--ga-project-text);
}

.ga-project-intro__grid {
    display: grid;
    grid-template-columns:
        minmax(22rem, .95fr)
        minmax(0, 1.05fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

.ga-project-intro__heading {
    max-width: 12ch;
    margin: 0 0 1.8rem;

    font-size: clamp(3.2rem, 5.5vw, 6rem);
    line-height: .93;
    letter-spacing: -.02em;
}

.ga-project-intro__copy {
    max-width: 36rem;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.65;
}

.ga-project-intro__visual {
    position: relative;
    min-height: clamp(28rem, 48vw, 42rem);
}

.ga-project-intro__image {
    position: absolute;
    top: 0;
    right: 0;

    width: 88%;
    height: 88%;
    margin: 0;

    overflow: hidden;
    border-radius: .55rem;
}

.ga-project-intro__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-project-intro__book {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;

    width: clamp(8rem, 15vw, 12rem);
    margin: 0;

    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .2);
}

.ga-project-intro__book img {
    display: block;
    width: 100%;
    height: auto;
}

.ga-project-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.4rem;

    margin-top: 2.3rem;
    padding-top: 1.25rem;

    border-top: 1px solid var(--ga-project-line);
}

.ga-project-facts span {
    color: var(--ga-project-muted);
    font-size: .78rem;
    font-weight: 650;
}


/* Intro fallback while images are missing */

.ga-project-intro__grid--no-media {
    grid-template-columns: 1fr;
}

.ga-project-intro__grid--no-media .ga-project-intro__content {
    max-width: 52rem;
}

.ga-project-intro__grid--no-media .ga-project-intro__visual {
    display: none;
}


/* =========================================================
   2. FROM THE INTERVIEWS — BLACK
   BOOK + VOICES
   ========================================================= */

.ga-project-outputs {
    background: var(--ga-project-dark);
    color: #fff;

    padding-top: clamp(5rem, 8vw, 9rem);
    padding-bottom: clamp(5rem, 8vw, 9rem);
}

.ga-project-outputs__header {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;

    margin-bottom: clamp(4rem, 7vw, 7rem);
}

.ga-project-outputs__header .ga-project-eyebrow {
    margin: 0;
}

.ga-project-outputs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--ga-project-dark-line);
}

.ga-project-output {
    padding-top: clamp(2rem, 4vw, 4rem);
}

.ga-project-output--book {
    padding-right: clamp(2rem, 5vw, 5rem);
}

.ga-project-output--voices {
    padding-left: clamp(2rem, 5vw, 5rem);
    border-left: 1px solid var(--ga-project-dark-line);
}

.ga-project-output-book__inner {
    display: grid;
    grid-template-columns:
        minmax(8rem, .55fr)
        minmax(0, 1fr);

    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
}

.ga-project-output-book__cover {
    margin: 0;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4);
}

.ga-project-output-book__cover img {
    display: block;
    width: 100%;
    height: auto;
}

.ga-project-output__kicker {
    margin: 0 0 .8rem;

    color: var(--ga-pink, #ff0046);

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ga-project-output__content h3 {
    margin: 0 0 1rem;

    color: #fff;

    font-size: clamp(2rem, 3vw, 3.3rem);
    line-height: .98;
}

.ga-project-output__content p {
    max-width: 33rem;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
}

.ga-project-output__content a {
    display: inline-flex;
    gap: .65rem;

    margin-top: 1rem;

    color: #fff;
    font-weight: 750;
    text-decoration: none;
}

.ga-project-output__content a span {
    color: var(--ga-pink, #ff0046);
}

.ga-project-output-voices__media {
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    grid-template-rows: 1fr 1fr;

    gap: .55rem;
    margin-bottom: 2rem;

    aspect-ratio: 16 / 10;
}

.ga-project-output-voices__media figure {
    margin: 0;
    overflow: hidden;
    border-radius: .3rem;
}

.ga-project-output-voices__media figure:first-child {
    grid-row: 1 / span 2;
}

.ga-project-output-voices__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   3. WOMEN'S OWN VOICES — WHITE
   ========================================================= */

.ga-project-voices {
    background: #fff;
    color: var(--ga-project-text);
}

.ga-project-voices__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(18rem, .7fr);

    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.ga-project-voices__media {
    overflow: hidden;
    aspect-ratio: 16 / 9;

    background: #222;
    border-radius: .45rem;
}

.ga-project-voices__media video,
.ga-project-voices__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* =========================================================
   4. FATEMEH — BLACK
   ========================================================= */

.ga-project-person {
    background: var(--ga-project-dark);
    color: #fff;
}

.ga-project-person__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(18rem, .85fr);

    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.ga-project-person__content {
    grid-column: 1;
    grid-row: 1;
}

.ga-project-person__visual {
    position: relative;

    grid-column: 2;
    grid-row: 1;

    padding:
        0
        0
        clamp(3rem, 6vw, 5rem)
        clamp(2rem, 5vw, 5rem);
}

.ga-project-person__portrait {
    margin: 0;
    overflow: hidden;

    aspect-ratio: 4 / 5;
    border-radius: .45rem;
}

.ga-project-person__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-project-person__working {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;

    width: 43%;
    margin: 0;

    overflow: hidden;
    aspect-ratio: 4 / 3;

    border: .45rem solid var(--ga-project-dark);
    border-radius: .55rem;
}

.ga-project-person__working img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-project-person__content h2 {
    max-width: 10ch;
    margin: 0 0 1.8rem;

    color: #fff;

    font-size: clamp(3rem, 5.3vw, 5.6rem);
    line-height: .94;
    letter-spacing: -.02em;
}

.ga-project-person__content .ga-project-copy,
.ga-project-person__content .ga-project-copy p {
    color: rgba(255,255,255,.82);
}

.ga-project-person .ga-project-link {
    color: #fff;
}

.ga-project-person .ga-project-link:hover,
.ga-project-person .ga-project-link:focus-visible {
    color: var(--ga-pink, #ff0046);
}

.ga-project-person__support {
    display: flex;
    flex-direction: column;
    gap: .25rem;

    margin-top: 2.8rem;
    padding-top: 1.3rem;

    border-top: 1px solid var(--ga-project-dark-line);

    font-size: .78rem;
}

.ga-project-person__support span {
    color: rgba(255,255,255,.55);
}

.ga-project-person__support a,
.ga-project-person__support strong {
    width: fit-content;
    color: #fff;
}


/* =========================================================
   5. HOW WE WORK — WHITE
   ========================================================= */

.ga-project-method {
    background: #fff;
    color: var(--ga-project-text);
}

.ga-project-method__header {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;

    margin-bottom: clamp(3rem, 5vw, 5rem);
}

.ga-project-method__header .ga-project-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.ga-project-method__header h2 {
    max-width: none;
    margin: 0;

    color: var(--ga-project-text);

    font-size: clamp(2.7rem, 5vw, 4.8rem);
    line-height: .95;
    letter-spacing: -.02em;
}

.ga-project-method__intro {
    max-width: 40rem;
    margin: 0;

    color: var(--ga-project-muted);

    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.5;
}

.ga-project-method__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--ga-project-line);
}

.ga-project-method__step {
    position: relative;
    padding: 1.6rem 1.5rem 0 0;
}

.ga-project-method__step + .ga-project-method__step {
    padding-left: 1.5rem;
    border-left: 1px solid var(--ga-project-line);
}

.ga-project-method__number {
    display: block;
    margin-bottom: 2.8rem;

    color: var(--ga-pink, #ff0046);

    font-size: .72rem;
    font-weight: 800;
}

.ga-project-method__step h3 {
    margin: 0 0 .9rem;
    color: var(--ga-project-text);

    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
}

.ga-project-method__step p {
    margin: 0;

    color: var(--ga-project-muted);

    font-size: .92rem;
    line-height: 1.6;
}


/* Restore image-first layout on tablet/mobile */

@media (max-width: 900px) {

    .ga-project-person__visual {
        grid-column: 1;
        grid-row: 1;

        padding:
            0
            clamp(2rem, 5vw, 5rem)
            clamp(3rem, 6vw, 5rem)
            0;
    }

    .ga-project-person__content {
        grid-column: 1;
        grid-row: 2;
    }

    .ga-project-person__working {
        left: auto;
        right: 0;
    }

    .ga-project-method .ga-project-method__step:nth-child(n+3) {
        border-top-color: var(--ga-project-line);
    }
}

@media (max-width: 600px) {

    .ga-project-method .ga-project-method__step,
    .ga-project-method .ga-project-method__step + .ga-project-method__step {
        border-top-color: var(--ga-project-line);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .ga-project-intro__grid,
    .ga-project-voices__grid,
    .ga-project-person__grid,
    .ga-project-method__header {
        grid-template-columns: 1fr;
    }

    .ga-project-intro__heading,
    .ga-project-person__content h2 {
        max-width: 12ch;
    }

    .ga-project-intro__visual {
        min-height: 34rem;
    }

    .ga-project-voices__content {
        max-width: 38rem;
    }

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

    .ga-project-method__step:nth-child(3) {
        border-left: 0;
    }

    .ga-project-method__step:nth-child(n+3) {
        margin-top: 2.5rem;
        border-top: 1px solid var(--ga-project-dark-line);
    }

    .ga-project-outputs__header {
        grid-template-columns: 1fr;
    }

    .ga-project-outputs__grid {
        grid-template-columns: 1fr;
    }

    .ga-project-output--book {
        padding-right: 0;
    }

    .ga-project-output--voices {
        margin-top: 4rem;
        padding: 4rem 0 0;

        border-left: 0;
        border-top: 1px solid var(--ga-project-dark-line);
    }
}


@media (max-width: 600px) {

    .ga-project-section {
        padding: 4rem 0;
    }

    .ga-project-intro__heading {
        font-size: clamp(3rem, 14vw, 4.3rem);
    }

    .ga-project-intro__visual {
        min-height: 27rem;
    }

    .ga-project-intro__image {
        width: 92%;
        height: 87%;
    }

    .ga-project-intro__book {
        width: clamp(7rem, 28vw, 9rem);
    }

    .ga-project-facts {
        flex-direction: column;
        gap: .35rem;
    }

    .ga-project-method__steps {
        grid-template-columns: 1fr;
    }

    .ga-project-method__step,
    .ga-project-method__step + .ga-project-method__step {
        padding: 1.5rem 0 2rem;

        border-left: 0;
        border-top: 1px solid var(--ga-project-dark-line);
    }

    .ga-project-method__step:first-child {
        border-top: 0;
    }

    .ga-project-method__number {
        margin-bottom: 1.2rem;
    }

    .ga-project-person__visual {
        padding: 0 1.5rem 2.5rem 0;
    }

    .ga-project-person__working {
        width: 46%;
    }

    .ga-project-output-book__inner {
        grid-template-columns:
            minmax(7.5rem, .6fr)
            minmax(0, 1fr);
    }

    .ga-project-output-voices__media {
        aspect-ratio: 4 / 3;
    }
}



































/* =========================================================
   BOOK TEASER
   ========================================================= */

.ga-book-page {
    background: #fff;
}


.ga-book-teaser {
    overflow: hidden;

    min-height:
        calc(100vh - var(--header-height, 5rem));

    background: #fff;
}


.ga-book-teaser__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(22rem, 1.05fr);

    min-height:
        calc(100vh - var(--header-height, 5rem));

    align-items: stretch;
}


/* =========================================================
   TEXT
   ========================================================= */

.ga-book-teaser__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(5rem, 9vw, 9rem)
        clamp(3rem, 7vw, 7rem)
        clamp(5rem, 9vw, 9rem)
        0;
}


.ga-book-teaser__heading {
    max-width: 10ch;

    margin:
        0
        0
        2.25rem;

    color: #171717;

    font-size:
        clamp(2.5rem, 3vw, 4rem);

    line-height: .92;
    letter-spacing: -.06em;
}


.ga-book-teaser__credits {
    display: flex;
    flex-wrap: wrap;

    gap:
        1.25rem
        clamp(2rem, 5vw, 4rem);

    margin-bottom: 2.5rem;
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(20,20,20,.14);
}


.ga-book-teaser__credits div {
    display: flex;
    flex-direction: column;

    gap: .15rem;
}


.ga-book-teaser__credits span {
    color: #777;

    font-size: .68rem;
    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.ga-book-teaser__credits strong {
    color: #171717;

    font-size: .95rem;
}


.ga-book-teaser__copy {
    max-width: 39rem;

    color: #333;

    font-size:
        clamp(1rem, 1.25vw, 1.15rem);

    line-height: 1.65;
}


.ga-book-teaser__copy p:last-child {
    margin-bottom: 0;
}


.ga-book-teaser__series {
    max-width: 35rem;

    margin:
        2.5rem
        0
        0;

    padding-left: 1.1rem;

    border-left:
        3px solid
        var(--ga-pink, #ff0046);

    color: #666;

    font-size: .88rem;
    line-height: 1.5;
}


.ga-book-teaser__link {
    display: inline-flex;

    width: fit-content;

    gap: .65rem;

    margin-top: 2rem;

    color: #171717;

    font-size: .88rem;
    font-weight: 750;

    text-decoration: none;
}


.ga-book-teaser__link span {
    color:
        var(--ga-pink, #ff0046);
}


.ga-book-teaser__link:hover,
.ga-book-teaser__link:focus-visible {
    color:
        var(--ga-pink, #ff0046);

    text-decoration: none;
}


/* =========================================================
   BOOK VISUAL
   ========================================================= */

.ga-book-teaser__visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        clamp(4rem, 8vw, 7rem);

    background:
        var(--ga-project-dark, #171717);

    /*
     * Continue the dark panel to the right edge
     * of the viewport.
     */
    box-shadow:
        40vw 0 0
        var(--ga-project-dark, #171717);
}


.ga-book-teaser__cover {
    position: relative;
    z-index: 2;

    width:
        min(19rem, 70%);

    margin: 0;

    box-shadow:
        0
        2rem
        5rem
        rgba(0,0,0,.5);

    transform:
        rotate(-1.5deg);
}


.ga-book-teaser__cover img {
    display: block;

    width: 100%;
    height: auto;
}


.ga-book-teaser__status {
    position: absolute;

    right: 0;
    bottom:
        clamp(2rem, 4vw, 4rem);

    display: flex;
    align-items: flex-start;

    gap: .8rem;

    color:
        rgba(255,255,255,.65);
}


.ga-book-teaser__status span {
    color:
        var(--ga-pink, #ff0046);

    font-size: .68rem;
    font-weight: 800;
}


.ga-book-teaser__status p {
    margin: 0;

    color:
        rgba(255,255,255,.65);

    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .1em;
    text-transform: uppercase;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .ga-book-teaser__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(18rem, .75fr);
    }


    .ga-book-teaser__content {
        padding-right: 3rem;
    }


    .ga-book-teaser__cover {
        width: min(16rem, 78%);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .ga-book-teaser__grid {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }


    .ga-book-teaser__content {
        padding:
            4rem
            0;
    }


    .ga-book-teaser__heading {
        max-width: 11ch;

        font-size:
            clamp(3rem, 14vw, 4.5rem);
    }


    .ga-book-teaser__visual {
        min-height: 32rem;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);

        padding:
            4rem
            max(1.5rem, calc(50vw - 50%));

        box-shadow: none;
    }


    .ga-book-teaser__cover {
        width:
            min(15rem, 62vw);
    }


    .ga-book-teaser__status {
        right:
            max(1.5rem, calc(50vw - 50%));

        bottom: 2rem;
    }

}





/* =========================================================
   WHAT IS GENDER APARTHEID — EXPLAINER
   ========================================================= */

.ga-explainer-page {
    --gae-dark: #171717;
    --gae-text: #171717;
    --gae-muted: #666;
    --gae-line: rgba(20,20,20,.14);
    --gae-dark-line: rgba(255,255,255,.18);
}


.ga-explainer-section {
    position: relative;
    padding: clamp(5rem, 8vw, 8rem) 0;
}


.ga-explainer-section--light {
    background: #fff;
    color: var(--gae-text);
}


.ga-explainer-section--dark {
    background: var(--gae-dark);
    color: #fff;
}


.ga-explainer-eyebrow {
    margin: 0 0 1.25rem;

    color: var(--ga-pink, #ff0046);

    font-size: .7rem;
    font-weight: 750;
    line-height: 1.2;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.ga-explainer-copy {
    max-width: 42rem;

    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.65;
}


.ga-explainer-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SHARED SECTION HEADER
   ========================================================= */

.ga-explainer-header {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;

    margin-bottom: clamp(3.5rem, 6vw, 6rem);
}


.ga-explainer-header h2 {
    max-width: 12ch;

    margin: 0;

    font-size: clamp(3rem, 5.5vw, 5.8rem);
    line-height: .94;
    letter-spacing: -.02em;
}


.ga-explainer-section--dark
.ga-explainer-header h2 {
    color: #fff;
}


.ga-explainer-header__intro {
    max-width: 39rem;
    margin: 0;

    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.55;
}


.ga-explainer-section--dark
.ga-explainer-header__intro {
    color: rgba(255,255,255,.75);
}


/* =========================================================
   1. DEFINITION
   ========================================================= */

.ga-explainer-definition__grid {
    display: grid;

    grid-template-columns:
        minmax(20rem, .9fr)
        minmax(0, 1.1fr);

    gap: clamp(3rem, 8vw, 8rem);

    align-items: start;
}


.ga-explainer-definition__heading h1 {
    max-width: 10ch;

    margin: 0;

    font-size: clamp(3.5rem, 6.5vw, 7rem);
    line-height: .91;
    letter-spacing: -.06em;
}


.ga-explainer-definition__statement {
    max-width: 26ch;

    margin:
        clamp(1rem, 3vw, 2rem)
        0
        2.5rem;

    padding-left: 1.4rem;

    border-left:
        4px solid
        var(--ga-pink, #ff0046);

    font-size: clamp(1.7rem, 2.8vw, 2.7rem);
    font-weight: 550;
    line-height: 1.25;
    letter-spacing: -.025em;
}


.ga-explainer-quote {
    margin:
        clamp(3rem, 6vw, 5rem)
        0
        0;

    padding:
        clamp(2rem, 4vw, 3rem);

    border: 0;

    background: #f3f3f1;
}


.ga-explainer-quote::before {
    content: "“";

    display: block;

    margin-bottom: .5rem;

    color: var(--ga-pink, #ff0046);

    font-size: 4rem;
    font-weight: 700;
    line-height: .6;
}


.ga-explainer-quote p {
    margin: 0;

    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.4;
}


.ga-explainer-quote footer {
    display: flex;
    flex-direction: column;

    gap: .15rem;

    margin-top: 1.5rem;

    font-size: .78rem;
}


.ga-explainer-quote footer span {
    color: var(--gae-muted);
}


/* =========================================================
   2. COMPARISON
   ========================================================= */

.ga-explainer-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top:
        1px solid
        var(--gae-dark-line);
}


.ga-explainer-comparison__column {
    padding:
        clamp(2rem, 4vw, 4rem)
        clamp(2rem, 5vw, 5rem)
        0
        0;
}

.ga-explainer-comparison__subheading {
    margin: 0;
    padding-top: 2rem;

    color: #a5a5a5;

    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ga-explainer-comparison__column--apartheid {
    padding-right: 0;
    padding-left: clamp(2rem, 5vw, 5rem);

    border-left:
        1px solid
        var(--gae-dark-line);
}


.ga-explainer-comparison__label {
    margin:
        0
        0
        2.5rem;

    color: var(--ga-pink, #ff0046);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.ga-explainer-comparison__point {
    padding:
        1.5rem
        0;

    border-top:
        1px solid
        var(--gae-dark-line);
}


.ga-explainer-comparison__point h3 {
    margin:
        0
        0
        .55rem;

    color: #fff;

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
}


.ga-explainer-comparison__point p {
    max-width: 35rem;
    margin: 0;

    color: rgba(255,255,255,.68);

    line-height: 1.6;
}


.ga-explainer-comparison__closing {
    max-width: 55rem;

    margin:
        clamp(4rem, 7vw, 6rem)
        0
        0;

    padding-left: 1.4rem;

    border-left:
        3px solid
        var(--ga-pink, #ff0046);

    color: rgba(255,255,255,.88);

    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    line-height: 1.5;
}


/* =========================================================
   3. AREAS OF LIFE
   ========================================================= */

.ga-explainer-areas {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: clamp(3rem, 7vw, 7rem);
}


.ga-explainer-area {
    display: grid;
    grid-template-columns: 3rem 1fr;

    gap: 1.25rem;

    padding:
        1.8rem
        0;

    border-top:
        1px solid
        var(--gae-line);
}


.ga-explainer-area__number {
    color: var(--ga-pink, #ff0046);

    font-size: .7rem;
    font-weight: 800;
}


.ga-explainer-area h3 {
    margin:
        0
        0
        .6rem;

    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
}


.ga-explainer-area p {
    margin: 0;

    color: var(--gae-muted);

    line-height: 1.6;
}


/* =========================================================
   4. ORIGINS / TIMELINE
   ========================================================= */

.ga-explainer-timeline {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid
        var(--gae-dark-line);
}


.ga-explainer-timeline__item {
    padding:
        2rem
        clamp(1.25rem, 2.5vw, 2.5rem)
        0;
}


.ga-explainer-timeline__item:first-child {
    padding-left: 0;
}


.ga-explainer-timeline__item + .ga-explainer-timeline__item {
    border-left:
        1px solid
        var(--gae-dark-line);
}


.ga-explainer-timeline__period {
    margin:
        0
        0
        2.5rem;

    color: var(--ga-pink, #ff0046);

    font-size: .72rem;
    font-weight: 800;
}


.ga-explainer-timeline__item h3 {
    margin:
        0
        0
        .8rem;

    color: #fff;

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1.15;
}


.ga-explainer-timeline__item > p:last-child {
    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: .92rem;
    line-height: 1.6;
}


/* =========================================================
   5. INTERNATIONAL LAW
   ========================================================= */

.ga-explainer-law__grid {
    display: grid;

    grid-template-columns:
        minmax(20rem, .9fr)
        minmax(0, 1.1fr);

    gap: clamp(3rem, 8vw, 8rem);
}


.ga-explainer-law__grid h2 {
    max-width: 10ch;

    margin: 0;

    font-size: clamp(3rem, 5.5vw, 5.8rem);
    line-height: .94;
    letter-spacing: -.02em;
}


.ga-explainer-law__statement {
    margin:
        2rem
        0
        0;

    color: var(--ga-pink, #ff0046);

    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 650;
    line-height: 1.1;
}


.ga-explainer-law__content {
    max-width: 42rem;

    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.65;
}


.ga-explainer-law__content h3 {
    margin:
        3rem
        0
        1rem;

    font-size: clamp(1.5rem, 2.3vw, 2.2rem);
}


/* =========================================================
   6. DEBATE
   ========================================================= */

.ga-explainer-debates {
    border-top:
        1px solid
        var(--gae-dark-line);
}


.ga-explainer-debate {
    display: grid;

    grid-template-columns:
        3rem
        minmax(15rem, .8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(1rem, 3vw, 3rem);

    padding:
        clamp(1.8rem, 3vw, 2.8rem)
        0;

    border-bottom:
        1px solid
        var(--gae-dark-line);
}


.ga-explainer-debate__number {
    color: var(--ga-pink, #ff0046);

    font-size: .7rem;
    font-weight: 800;
}


.ga-explainer-debate h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(1.25rem, 2vw, 1.8rem);
    line-height: 1.2;
}


.ga-explainer-debate p {
    max-width: 42rem;
    margin: 0;

    color: rgba(255,255,255,.7);

    line-height: 1.65;
}


.ga-explainer-note {
    max-width: 55rem;

    margin-top:
        clamp(3rem, 6vw, 5rem);

    padding:
        clamp(1.5rem, 3vw, 2.5rem);

    border-left:
        4px solid
        var(--ga-pink, #ff0046);

    background:
        rgba(255,255,255,.055);
}


.ga-explainer-note h3 {
    margin:
        0
        0
        .8rem;

    color: #fff;

    font-size: 1.25rem;
}


.ga-explainer-note p {
    margin: 0;

    color: rgba(255,255,255,.72);
    line-height: 1.65;
}


/* =========================================================
   7. FAQ
   ========================================================= */

.ga-explainer-faq {
    border-top:
        1px solid
        var(--gae-line);
}


.ga-explainer-faq__item {
    border-bottom:
        1px solid
        var(--gae-line);
}


.ga-explainer-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding:
        1.6rem
        0;

    cursor: pointer;

    list-style: none;

    color: var(--gae-text);

    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 650;
}


.ga-explainer-faq__item summary::-webkit-details-marker {
    display: none;
}


.ga-explainer-faq__icon {
    position: relative;

    flex: 0 0 1rem;

    width: 1rem;
    height: 1rem;
}


.ga-explainer-faq__icon::before,
.ga-explainer-faq__icon::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        var(--ga-pink, #ff0046);

    transform: translateY(-50%);
}


.ga-explainer-faq__icon::after {
    transform:
        translateY(-50%)
        rotate(90deg);

    transition:
        transform .2s ease;
}


.ga-explainer-faq__item[open]
.ga-explainer-faq__icon::after {
    transform:
        translateY(-50%)
        rotate(0);
}


.ga-explainer-faq__answer {
    max-width: 52rem;

    padding:
        0
        0
        1.8rem;
}


.ga-explainer-faq__answer p {
    margin: 0;

    color: var(--gae-muted);

    line-height: 1.65;
}


/* =========================================================
   SOURCES
   ========================================================= */

.ga-explainer-sources {
    margin-top:
        clamp(3rem, 6vw, 5rem);

    padding-top: 1.25rem;

    border-top:
        1px solid
        var(--gae-line);
}


.ga-explainer-section--dark
.ga-explainer-sources {
    border-color:
        var(--gae-dark-line);
}


.ga-explainer-sources > p {
    margin:
        0
        0
        .8rem;

    font-size: .65rem;
    font-weight: 750;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.ga-explainer-section--light
.ga-explainer-sources > p {
    color: var(--gae-muted);
}


.ga-explainer-section--dark
.ga-explainer-sources > p {
    color: rgba(255,255,255,.5);
}


.ga-explainer-sources ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.ga-explainer-sources li + li {
    margin-top: .4rem;
}


.ga-explainer-sources a {
    font-size: .78rem;
    text-decoration: none;
}


.ga-explainer-section--light
.ga-explainer-sources a {
    color: var(--gae-text);
}


.ga-explainer-section--dark
.ga-explainer-sources a {
    color: rgba(255,255,255,.72);
}


.ga-explainer-sources a:hover,
.ga-explainer-sources a:focus-visible {
    color: var(--ga-pink, #ff0046);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .ga-explainer-definition__grid,
    .ga-explainer-header,
    .ga-explainer-law__grid {
        grid-template-columns: 1fr;
    }


    .ga-explainer-header {
        gap: 2rem;
    }


    .ga-explainer-timeline {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .ga-explainer-timeline__item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }


    .ga-explainer-timeline__item:nth-child(n+3) {
        margin-top: 2.5rem;
        padding-top: 2rem;

        border-top:
            1px solid
            var(--gae-dark-line);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .ga-explainer-section {
        padding:
            4rem
            0;
    }


    .ga-explainer-definition__heading h1,
    .ga-explainer-header h2,
    .ga-explainer-law__grid h2 {
        font-size:
            clamp(3rem, 13vw, 4.5rem);
    }


    .ga-explainer-comparison {
        grid-template-columns: 1fr;
    }


    .ga-explainer-comparison__column {
        padding-right: 0;
    }


    .ga-explainer-comparison__column--apartheid {
        margin-top: 3rem;
        padding:
            3rem
            0
            0;

        border-left: 0;

        border-top:
            1px solid
            var(--gae-dark-line);
    }


    .ga-explainer-areas,
    .ga-explainer-timeline {
        grid-template-columns: 1fr;
    }


    .ga-explainer-timeline__item,
    .ga-explainer-timeline__item:first-child,
    .ga-explainer-timeline__item:nth-child(3) {
        margin: 0;
        padding:
            1.8rem
            0;

        border-left: 0;

        border-top:
            1px solid
            var(--gae-dark-line);
    }


    .ga-explainer-timeline__period {
        margin-bottom: 1rem;
    }


    .ga-explainer-debate {
        grid-template-columns:
            2rem
            1fr;
    }


    .ga-explainer-debate p {
        grid-column: 2;
    }


    .ga-explainer-faq__item summary {
        gap: 1rem;
    }

}


/* =========================================================
   FOOTER
   ========================================================= */

.ga-footer {
    background: #171717;
    color: #fff;
    padding: 3rem 0 2rem;
}

.ga-footer__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.ga-footer__brand {
    color: #fff;
    font-family: "Cal Sans", sans-serif;
    font-size: 1.35rem;
    text-decoration: none;
}

.ga-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ga-footer__nav a {
    color: rgba(255,255,255,.72);
    font-size: .9rem;
    text-decoration: none;
}

.ga-footer__nav a:hover,
.ga-footer__brand:hover {
    color: #ff0046;
}

.ga-footer__bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.14);
}

.ga-footer__bottom p {
    margin: 0;
    color: rgba(255,255,255,.45);
    font-size: .8rem;
}

@media (max-width: 700px) {
    .ga-footer__main {
        align-items: flex-start;
        flex-direction: column;
    }

    .ga-footer__nav {
        gap: .8rem 1.25rem;
    }
}


/* =========================================================
   HEADING WORD WRAPPING
   Never hyphenate words in titles
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-hyphens: none;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}


/* Fatemeh external links */

.ga-project-person__links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;

    margin-top: 2rem;
}

.ga-project-person__links a {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;

    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}

.ga-project-person__links a span {
    color: var(--ga-pink, #ff0046);
    font-size: .9em;
    transition: transform .18s ease;
}

.ga-project-person__links a:hover,
.ga-project-person__links a:focus-visible {
    color: var(--ga-pink, #ff0046);
}

.ga-project-person__links a:hover span,
.ga-project-person__links a:focus-visible span {
    transform: translate(.12rem, -.12rem);
}


/* =========================================================
   WHY NORWAY
   ========================================================= */

.ga-norway {
    background: #fff;
    color: #171717;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;
}

.ga-norway__grid {
    display: grid;

    grid-template-columns:
        minmax(4.5rem, 9%)
        minmax(0, 1fr);

    grid-template-areas:
        "flag heading"
        "flag copy";

    column-gap:
        clamp(3rem, 6vw, 6rem);

    row-gap: 2rem;

    align-items: start;
}


/* Heading */

.ga-norway__heading {
    grid-area: heading;

    max-width: 46rem;
}

.ga-norway__eyebrow {
    margin: 0 0 1.3rem;

    color: var(--ga-pink, #ff0046);

    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ga-norway__heading h2 {
    max-width: 13ch;

    margin: 0;

    color: #171717;

    font-size:
        clamp(3rem, 5vw, 5.5rem);

    line-height: .94;
    letter-spacing: -.025em;

    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}


/* Narrow flag fragment */

.ga-norway__visual {
    grid-area: flag;

    position: relative;

    width: 100%;
    min-height:
        clamp(27rem, 38vw, 38rem);

    margin: 0;

    overflow: hidden;
}

.ga-norway__visual img {
    position: absolute;

    left: 50%;
    top: 50%;

    display: block;

    width: 40rem;
    height: 9rem;

    max-width: none;

    object-fit: cover;
    object-position:
        var(--ga-norway-position, 34% 50%);

    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* Slightly soften the perfectly flat SVG */

.ga-norway__visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.05),
            transparent 45%
        );
}


/* Copy */

.ga-norway__copy {
    grid-area: copy;

    max-width: 39rem;
}

.ga-norway__copy p {
    margin: 0 0 1.25rem;

    color: #4d4d4d;

    font-size:
        clamp(1rem, 1.25vw, 1.15rem);

    line-height: 1.65;
}

.ga-norway__copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   WHY NORWAY — RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .ga-norway__grid {
        grid-template-columns: 1fr;

        grid-template-areas:
            "heading"
            "flag"
            "copy";

        gap: 2rem;
    }

    .ga-norway__heading {
        max-width: 42rem;
    }

    .ga-norway__visual {
        width: 100vw;
        height: 5rem;
        min-height: 0;

        margin-left:
            calc(50% - 50vw);
    }

    .ga-norway__visual img {
        width: 100%;
        height: 100%;

        left: 0;
        top: 0;

        object-fit: cover;
        object-position:
            var(--ga-norway-position, 34% 50%);

        transform: none;
    }

    .ga-norway__copy {
        max-width: 39rem;
    }
}


@media (max-width: 600px) {

    .ga-norway {
        padding:
            4.5rem
            0;
    }

    .ga-norway__heading h2 {
        max-width: 12ch;

        font-size:
            clamp(2.8rem, 13vw, 4rem);
    }

    .ga-norway__visual {
        height: 4rem;
    }
}




/* WHY NORWAY — use full container width */

.ga-norway__grid {
    grid-template-columns:
        clamp(4.5rem, 9%, 7rem)
        minmax(0, 1fr);

    width: 100%;
}

.ga-norway__heading {
    width: 100%;
    max-width: none;
}

.ga-norway__heading h2 {
    max-width: 16ch;
}

.ga-norway__copy {
    width: 100%;
    max-width: 70rem;
}

@media (max-width: 900px) {

    .ga-norway__heading,
    .ga-norway__copy {
        max-width: none;
    }
}


/* =========================================================
   WHY NORWAY — MOBILE FINAL
   ========================================================= */

@media (max-width: 900px) {

    .ga-norway__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "heading"
            "flag"
            "copy";

        width: 100%;
        gap: 2rem;
    }

    .ga-norway__heading,
    .ga-norway__copy,
    .ga-norway__visual {
        grid-column: 1;
        width: 100%;
        max-width: none;
    }

    .ga-norway__heading {
        grid-area: heading;
    }

    .ga-norway__visual {
        grid-area: flag;

        width: 100vw;
        height: 4.5rem;
        min-height: 0;

        margin-left: calc(50% - 50vw);

        overflow: hidden;
    }

    .ga-norway__visual img {
        position: static;

        width: 100%;
        height: 100%;

        max-width: none;

        object-fit: cover;
        object-position: var(--ga-norway-position, 34% 100%);

        transform: none;
    }

    .ga-norway__copy {
        grid-area: copy;
    }
}


@media (max-width: 600px) {

    .ga-norway {
        padding: 4.5rem 0;
    }

    .ga-norway__grid {
        gap: 2rem;
    }

    .ga-norway__eyebrow {
        margin-bottom: 1.1rem;
    }

    .ga-norway__heading h2 {
        width: 100%;
        max-width: none;

        font-size: clamp(2.8rem, 11vw, 3.8rem);
        line-height: .96;
    }

    .ga-norway__visual {
        height: 4rem;
    }

    .ga-norway__copy {
        width: 100%;
    }
}


/* =========================================================
   WHY NORWAY — QUIETER SCALE
   ========================================================= */

.ga-norway {
    padding:
        clamp(3.5rem, 5vw, 5rem)
        0;
}

.ga-norway__grid {
    row-gap: 1.35rem;
}

.ga-norway__heading h2 {
    max-width: 15ch;

    font-size:
        clamp(2.8rem, 4vw, 4.5rem);

    line-height: .96;
}

.ga-norway__eyebrow {
    margin-bottom: .9rem;
}

.ga-norway__visual {
    min-height:
        clamp(20rem, 27vw, 27rem);
}

.ga-norway__copy {
    max-width: 48rem;
}

.ga-norway__copy p {
    font-size:
        clamp(1rem, 1.1vw, 1.08rem);
}


@media (max-width: 900px) {

    .ga-norway {
        padding:
            3.5rem
            0;
    }

    .ga-norway__grid {
        gap: 1.5rem;
    }

    .ga-norway__heading h2 {
        font-size:
            clamp(2.7rem, 9vw, 3.8rem);
    }

    .ga-norway__visual {
        min-height: 0;
        height: 3.5rem;
    }
}


@media (max-width: 600px) {

    .ga-norway {
        padding:
            3rem
            0;
    }

    .ga-norway__heading h2 {
        font-size:
            clamp(2.6rem, 10.5vw, 3.4rem);
    }

    .ga-norway__visual {
        height: 3rem;
    }
}
/* =========================================================
   PROJECT INTRO — SCROLL CUE
   ========================================================= */

.ga-project-intro-section {
    position: relative;
}

.ga-project-scrollcue {
    position: absolute;

    right: clamp(5rem, 12vw, 13rem);
    top: 54%;

    display: block;

    width: 4.5rem;
    height: 8rem;

    color: var(--ga-pink, #ff0046);

    text-decoration: none;
}

.ga-project-scrollcue svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ga-project-scrollcue path {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ga-project-scrollcue {
    transition: transform .2s ease;
}

.ga-project-scrollcue:hover,
.ga-project-scrollcue:focus-visible {
    transform: translateY(.4rem);
}


/* Mobile: small cue beneath the intro */

@media (max-width: 900px) {

    .ga-project-scrollcue {
        position: static;

        width: 2.25rem;
        height: 4rem;

        margin: 2rem auto 0;
    }

    .ga-project-scrollcue path {
        stroke-width: 6;
    }
}


/*  */
/* =========================================================
   PROJECT INTRO — SECTION LINKS
   ========================================================= */

.ga-project-section-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-top: 2.5rem;

    border-top: 1px solid var(--ga-project-line);
}

.ga-project-section-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    min-width: 0;

    padding: 1.1rem 1rem 1.1rem 0;

    color: var(--ga-project-text);

    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;

    border-right: 1px solid var(--ga-project-line);
}

.ga-project-section-link + .ga-project-section-link {
    padding-left: 1rem;
}

.ga-project-section-link:last-child {
    border-right: 0;
}

.ga-project-section-link__arrow {
    flex: 0 0 auto;

    color: var(--ga-pink, #ff0046);

    font-size: 1rem;

    transition: transform .18s ease;
}

.ga-project-section-link:hover,
.ga-project-section-link:focus-visible {
    color: var(--ga-pink, #ff0046);
}

.ga-project-section-link:hover .ga-project-section-link__arrow,
.ga-project-section-link:focus-visible .ga-project-section-link__arrow {
    transform: translateY(.2rem);
}


/* Tablet */

@media (max-width: 900px) {

    .ga-project-section-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ga-project-section-link:nth-child(2) {
        border-right: 0;
    }

    .ga-project-section-link:nth-child(n+3) {
        border-top: 1px solid var(--ga-project-line);
    }
}


/* Mobile */

@media (max-width: 600px) {

    .ga-project-section-links {
        grid-template-columns: 1fr;

        margin-top: 2rem;
    }

    .ga-project-section-link,
    .ga-project-section-link + .ga-project-section-link {
        padding: .9rem 0;

        border-right: 0;
        border-top: 1px solid var(--ga-project-line);
    }

    .ga-project-section-link:first-child {
        border-top: 0;
    }
}
/* =========================================================
   WHAT IS GA — SECTION LINKS
   ========================================================= */

.ga-explainer-section-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: clamp(3rem, 5vw, 5rem);

    border-top: 1px solid var(--gae-line);
}

.ga-explainer-section-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    min-width: 0;
    padding: 1.1rem 1rem 1.1rem 0;

    color: var(--gae-text);

    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;

    border-right: 1px solid var(--gae-line);
    border-bottom: 1px solid var(--gae-line);
}

.ga-explainer-section-link:nth-child(3n+2),
.ga-explainer-section-link:nth-child(3n+3) {
    padding-left: 1rem;
}

.ga-explainer-section-link:nth-child(3n) {
    border-right: 0;
}

.ga-explainer-section-link__arrow {
    flex: 0 0 auto;

    color: var(--ga-pink, #ff0046);

    transition: transform .18s ease;
}

.ga-explainer-section-link:hover,
.ga-explainer-section-link:focus-visible {
    color: var(--ga-pink, #ff0046);
}

.ga-explainer-section-link:hover .ga-explainer-section-link__arrow,
.ga-explainer-section-link:focus-visible .ga-explainer-section-link__arrow {
    transform: translateY(.2rem);
}


@media (max-width: 800px) {

    .ga-explainer-section-links {
        grid-template-columns: 1fr;
        margin-top: 3rem;
    }

    .ga-explainer-section-link,
    .ga-explainer-section-link:nth-child(3n+2),
    .ga-explainer-section-link:nth-child(3n+3) {
        padding: .9rem 0;

        border-right: 0;
        border-bottom: 1px solid var(--gae-line);
    }
}
/* =========================================================
   SMOOTH ANCHOR SCROLLING
   ========================================================= */

html {
    scroll-behavior: smooth;
}

/* Keep anchored sections clear of the fixed header */
.ga-project-section,
.ga-explainer-section {
    scroll-margin-top: 6rem;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* =========================================================
   HOMEPAGE HERO — FIVE PANEL IMAGE TRANSITION
   ========================================================= */

.ga-transition-hero {
    position: relative;
    overflow: hidden;
}

.ga-hero-panels {
    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;
}

.ga-hero-panel {
    position: absolute;
    inset: 0;

    opacity: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition:
        opacity .85s ease-in-out;

    transition-delay:
        var(--ga-panel-delay, 0s);

    will-change: opacity;
}


/* Five full-height vertical slices */

.ga-hero-panel--1 {
    clip-path: inset(0 80% 0 0);
    --ga-panel-delay: .15s;
}

.ga-hero-panel--2 {
    clip-path: inset(0 60% 0 20%);
    --ga-panel-delay: 1.3s;
}

.ga-hero-panel--3 {
    clip-path: inset(0 40% 0 40%);
    --ga-panel-delay: .55s;
}

.ga-hero-panel--4 {
    clip-path: inset(0 20% 0 60%);
    --ga-panel-delay: 1.95s;
}

.ga-hero-panel--5 {
    clip-path: inset(0 0 0 80%);
    --ga-panel-delay: .95s;
}


/* Reveal second image */

.ga-transition-hero.ga-hero-show-alt .ga-hero-panel {
    opacity: 1;
}


/* Keep overlay and content above the changing photograph */

.ga-transition-hero .image-overlay {
    z-index: 1;
}

.ga-transition-hero > .container,
.ga-transition-hero #to-start {
    position: relative;
    z-index: 2;
}


/* Do not animate for users requesting reduced motion */

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

    .ga-hero-panel {
        display: none;
    }
}


/* =========================================================
   YOUR STORY
   ========================================================= */

.ga-story {
    --story-accent: var(--ga-pink, #ff0046);
    --story-dark: #171717;
    --story-border: rgba(20, 20, 20, 0.14);

    padding:
        clamp(4rem, 7vw, 7.5rem)
        0;
}


/* ---------------------------------------------------------
   Shared typography
   --------------------------------------------------------- */

.ga-story-eyebrow {
    margin: 0 0 1.2rem;

    color: var(--story-accent);

    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.ga-story-copy {
    max-width: 46rem;

    font-size:
        clamp(1.05rem, 1.3vw, 1.2rem);

    line-height: 1.68;
}

.ga-story-copy p {
    margin:
        0
        0
        1.25rem;
}

.ga-story-copy p:last-child {
    margin-bottom: 0;
}

.ga-story-emphasis {
    max-width: 48rem;

    margin:
        clamp(2rem, 3vw, 3rem)
        0
        0;

    font-size:
        clamp(1.35rem, 2.2vw, 2rem);

    font-weight: 700;
    line-height: 1.28;
}


/* =========================================================
   INTRO
   ========================================================= */

.ga-story-intro {
    padding-top:
        clamp(4.5rem, 8vw, 8rem);

    padding-bottom:
        clamp(5rem, 8vw, 8rem);

    background: #fff;
}

.ga-story-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, .65fr);

    gap:
        clamp(3rem, 7vw, 7rem);

    align-items: center;
}

.ga-story-intro__heading {
    max-width: 12ch;

    margin:
        0
        0
        clamp(1.75rem, 3vw, 2.5rem);

    font-size:
        clamp(3rem, 6vw, 6rem);

    line-height: .98;
    letter-spacing: -.045em;
}

.ga-story-intro__portrait {
    position: relative;

    max-width: 390px;

    margin:
        0
        1.2rem
        1.2rem
        auto;

    box-shadow:
        18px
        18px
        0
        var(--story-accent);
}

.ga-story-intro__portrait img {
    display: block;

    width: 100%;
    height: auto;
}

.ga-story-intro .ga-story-emphasis {
    color: var(--story-accent);
}


/* =========================================================
   EDITORIAL SECTIONS

   IMPORTANT:
   .ga-story-section__inner also has the site's .container
   class. Do not set width/max-width here. The normal site
   container keeps these sections aligned with the intro.
   ========================================================= */

.ga-story-section {
    padding:
        clamp(4rem, 7vw, 7.5rem)
        0;
}

.ga-story-section__inner {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: start;
}

.ga-story-section__title,
.ga-story-section__body {
    min-width: 0;
}

.ga-story-section__title {
    grid-column: 1;
}

.ga-story-section__body {
    grid-column: 2;
}


/* Reversed desktop section */

.ga-story-section--reverse
.ga-story-section__title {
    grid-column: 2;
    grid-row: 1;
}

.ga-story-section--reverse
.ga-story-section__body {
    grid-column: 1;
    grid-row: 1;
}


/* Section headings */

.ga-story-section__heading {
    max-width: 11ch;

    margin:
        0
        0
        1rem;

    font-size:
        clamp(2.2rem, 4.2vw, 4.4rem);

    line-height: 1.03;
    letter-spacing: -.035em;
}


/* ---------------------------------------------------------
   Light sections
   --------------------------------------------------------- */

.ga-story-section--light,
.ga-story-section--soft {
    background: #fff;
    color: var(--ga-text, #171717);
}

.ga-story-section--light .ga-story-section__heading,
.ga-story-section--soft .ga-story-section__heading,
.ga-story-section--light .ga-story-copy,
.ga-story-section--soft .ga-story-copy,
.ga-story-section--light .ga-story-copy p,
.ga-story-section--soft .ga-story-copy p,
.ga-story-section--light .ga-story-emphasis,
.ga-story-section--soft .ga-story-emphasis {
    color: var(--ga-text, #171717);
}


/* ---------------------------------------------------------
   Dark sections
   --------------------------------------------------------- */

.ga-story-section--dark {
    background: var(--story-dark);
    color: #fff;
}

.ga-story-section--dark
.ga-story-eyebrow {
    color: var(--story-accent);
}

.ga-story-section--dark
.ga-story-section__heading {
    color: #fff;
}

.ga-story-section--dark
.ga-story-copy,
.ga-story-section--dark
.ga-story-copy p {
    color:
        rgba(255, 255, 255, .82);
}

.ga-story-section--dark
.ga-story-copy strong,
.ga-story-section--dark
.ga-story-emphasis {
    color: #fff;
}

.ga-story-section--dark a {
    color: #fff;
}


/* ---------------------------------------------------------
   Supporting link
   --------------------------------------------------------- */

.ga-story-link {
    display: inline-flex;
    align-items: center;

    gap: .65rem;

    margin-top: 2rem;
    padding-bottom: .25rem;

    border-bottom:
        1px solid
        currentColor;

    font-weight: 700;
    text-decoration: none;
}

.ga-story-link:hover,
.ga-story-link:focus-visible {
    border-bottom-color:
        var(--story-accent);
}


/* =========================================================
   CONTACT
   ========================================================= */

.ga-story-contact {
    background:
        var(--story-accent);

    color:
        var(--ga-text, #171717);
}

.ga-story-contact .ga-story-eyebrow {
    color:
        rgba(0, 0, 0, .62);
}

.ga-story-contact__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(320px, 1.1fr);

    gap:
        clamp(3rem, 7vw, 7rem);

    align-items: start;
}

.ga-story-contact__heading {
    max-width: 13ch;

    margin:
        0
        0
        2rem;

    color:
        var(--ga-text, #171717);

    font-size:
        clamp(2.4rem, 4.5vw, 4.8rem);

    line-height: 1.02;
    letter-spacing: -.04em;
}

.ga-story-contact__person {
    display: flex;
    flex-direction: column;

    gap: .2rem;

    margin-top: 2.5rem;
}

.ga-story-contact__person strong {
    font-size: 1.15rem;
}

.ga-story-contact__person span {
    color:
        rgba(0, 0, 0, .68);
}


/* Form panel */

.ga-story-contact__form-preview {
    padding:
        clamp(1.5rem, 3vw, 2.5rem);

    background: #fff;
    color:
        var(--story-dark);
}

.ga-story-contact__form-title {
    margin:
        0
        0
        1.5rem;

    font-size: 1.5rem;
    font-weight: 700;
}

.ga-story-form-field {
    display: flex;
    align-items: center;

    min-height: 3.6rem;

    padding:
        .8rem
        0;

    border-bottom:
        1px solid
        rgba(0, 0, 0, .25);

    color:
        rgba(0, 0, 0, .62);

    font-size: .95rem;
}

.ga-story-form-field--message {
    min-height: 7rem;

    align-items: flex-start;

    padding-top: 1rem;
}

.ga-story-form-field em {
    font-weight: 400;
}

.ga-story-contact__safety {
    margin:
        1.5rem
        0
        0;

    color:
        rgba(0, 0, 0, .64);

    font-size: .85rem;
    line-height: 1.55;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .ga-story {
        padding:
            4rem
            0;
    }

    .ga-story-intro__grid,
    .ga-story-contact__grid {
        grid-template-columns: 1fr;
    }

    .ga-story-intro__grid {
        gap: 3.5rem;
    }

    .ga-story-intro__heading {
        max-width: 10ch;
    }

    .ga-story-intro__visual {
        width:
            calc(100% - 18px);
    }

    .ga-story-intro__portrait {
        max-width: 320px;

        margin-left: 0;
    }


    /* Editorial sections return to normal reading order */

    .ga-story-section {
        padding:
            clamp(3.25rem, 10vw, 5rem)
            0;
    }

    .ga-story-section__inner {
        display: block;
    }

    .ga-story-section__title {
        margin-bottom: 1.75rem;
    }

    .ga-story-section__heading {
        max-width: none;
    }

    .ga-story-contact__grid {
        gap: 3rem;
    }
}


@media (max-width: 480px) {

    .ga-story-intro__heading {
        font-size:
            clamp(2.65rem, 13vw, 4rem);
    }

    .ga-story-section__heading,
    .ga-story-contact__heading {
        font-size:
            clamp(2rem, 10vw, 3rem);
    }

    .ga-story-copy {
        font-size: 1rem;
    }

    .ga-story-emphasis {
        font-size: 1.3rem;
    }
}


/* =========================================================
   YOUR STORY — CONTACT FORM
   ========================================================= */

.ga-story-contact__email {
    width: fit-content;
    margin-top: .35rem;

    color: var(--ga-text, #171717);

    font-weight: 700;
    text-decoration: none;
}

.ga-story-contact__email:hover,
.ga-story-contact__email:focus-visible {
    text-decoration: underline;
}


.ga-story-contact__form .form-wrapper {
    margin: 0;
}

.ga-story-contact__form .form-field {
    margin:
        0
        0
        1.35rem;
}

.ga-story-contact__form label {
    display: block;

    margin-bottom: .45rem;

    color: #171717;

    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
}

.ga-story-contact__form .form-field .form-data {
    margin: 0;
}

.ga-story-contact__form input[type="text"],
.ga-story-contact__form input[type="email"],
.ga-story-contact__form textarea,
.ga-story-contact__form select {
    display: block;

    box-sizing: border-box;

    width: 100%;

    margin: 0;
    padding:
        .8rem
        0;

    color: #171717;
    background: transparent;

    border: 0;
    border-bottom:
        1px solid
        rgba(0, 0, 0, .28);

    border-radius: 0;

    font: inherit;
}

.ga-story-contact__form textarea {
    min-height: 8rem;

    resize: vertical;
}

.ga-story-contact__form input:focus,
.ga-story-contact__form textarea:focus,
.ga-story-contact__form select:focus {
    outline: 0;

    border-bottom-color:
        var(--story-accent);
}

.ga-story-contact__form .form-field .form-help,
.ga-story-contact__form .form-field .form-description {
    margin-top: .4rem;

    color:
        rgba(0, 0, 0, .58);

    font-size: .76rem;
    line-height: 1.45;
}

.ga-story-contact__form .buttons {
    margin-top: 2rem;
}

.ga-story-contact__form button,
.ga-story-contact__form input[type="submit"],
.ga-story-contact__form .button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        .85rem
        1.35rem;

    color: #fff;
    background: #171717;

    border: 0;
    border-radius: 0;

    font-weight: 700;

    cursor: pointer;
}

.ga-story-contact__form button:hover,
.ga-story-contact__form button:focus-visible,
.ga-story-contact__form input[type="submit"]:hover,
.ga-story-contact__form input[type="submit"]:focus-visible {
    background: #000;
}

.ga-story-contact__form .form-message {
    margin-bottom: 1.5rem;

    padding:
        .9rem
        1rem;

    background:
        rgba(255, 0, 70, .08);

    border-left:
        3px solid
        var(--story-accent);
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.ga-contact-page {
    min-height:
        calc(100vh - 5rem);

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    background: #fff;
    color: var(--ga-text, #171717);
}


.ga-contact-page__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(22rem, 1.15fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items: start;
}


/* ---------------------------------------------------------
   Introduction
   --------------------------------------------------------- */

.ga-contact-page__eyebrow {
    margin:
        0
        0
        1.25rem;

    color:
        var(--ga-pink, #ff0046);

    font-size: .72rem;
    font-weight: 750;
    line-height: 1.2;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.ga-contact-page__heading {
    max-width: 9ch;

    margin:
        0
        0
        2rem;

    color:
        var(--ga-text, #171717);

    font-size:
        clamp(3.5rem, 6vw, 6.5rem);

    line-height: .92;
    letter-spacing: -.045em;
}


.ga-contact-page__intro {
    max-width: 39rem;

    color: #4d4d4d;

    font-size:
        clamp(1.05rem, 1.3vw, 1.2rem);

    line-height: 1.65;
}


.ga-contact-page__intro p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Direct email
   --------------------------------------------------------- */

.ga-contact-page__direct {
    display: flex;
    flex-direction: column;

    gap: .3rem;

    margin-top: 2.5rem;
    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(20,20,20,.14);
}


.ga-contact-page__direct span {
    color: #666;

    font-size: .68rem;
    font-weight: 750;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.ga-contact-page__direct a {
    width: fit-content;

    color:
        var(--ga-text, #171717);

    font-size:
        clamp(1.1rem, 1.5vw, 1.35rem);

    font-weight: 700;
    text-decoration: none;
}


.ga-contact-page__direct a:hover,
.ga-contact-page__direct a:focus-visible {
    color:
        var(--ga-pink, #ff0046);
}


/* ---------------------------------------------------------
   Your Story signpost
   --------------------------------------------------------- */

.ga-contact-page__story {
    margin-top:
        clamp(3.5rem, 6vw, 5rem);

    padding:
        clamp(1.75rem, 3vw, 2.5rem);

    background:
        #f3f3f1;
}


.ga-contact-page__story-label {
    margin:
        0
        0
        1.25rem;

    color:
        var(--ga-pink, #ff0046);

    font-size: .68rem;
    font-weight: 750;

    letter-spacing: .13em;
    text-transform: uppercase;
}


.ga-contact-page__story h2 {
    max-width: 12ch;

    margin:
        0
        0
        1.25rem;

    color:
        var(--ga-text, #171717);

    font-size:
        clamp(1.8rem, 3vw, 2.7rem);

    line-height: 1;
}


.ga-contact-page__story > p:not(.ga-contact-page__story-label) {
    max-width: 35rem;

    margin:
        0
        0
        1.5rem;

    color: #4d4d4d;

    line-height: 1.6;
}


.ga-contact-page__story a {
    display: inline-flex;
    align-items: center;

    gap: .65rem;

    color:
        var(--ga-text, #171717);

    font-weight: 700;
    text-decoration: none;
}


.ga-contact-page__story a span {
    color:
        var(--ga-pink, #ff0046);
}


.ga-contact-page__story a:hover,
.ga-contact-page__story a:focus-visible {
    color:
        var(--ga-pink, #ff0046);
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

.ga-contact-page__form-panel {
    padding:
        clamp(2rem, 4vw, 3.5rem);

    background:
        #f3f3f1;
}


.ga-contact-page__form-panel > h2 {
    margin:
        0
        0
        2.5rem;

    color:
        var(--ga-text, #171717);

    font-size:
        clamp(2rem, 3vw, 3rem);

    line-height: 1;
}


.ga-contact-page__form-panel .form-wrapper {
    margin: 0;
}


.ga-contact-page__form-panel .form-field {
    margin:
        0
        0
        1.5rem;
}


.ga-contact-page__form-panel label {
    display: block;

    margin-bottom: .5rem;

    color:
        var(--ga-text, #171717);

    font-size: .86rem;
    font-weight: 700;
}


.ga-contact-page__form-panel input[type="text"],
.ga-contact-page__form-panel input[type="email"],
.ga-contact-page__form-panel textarea,
.ga-contact-page__form-panel select {
    display: block;

    box-sizing: border-box;

    width: 100%;

    margin: 0;

    padding:
        .85rem
        0;

    color:
        var(--ga-text, #171717);

    background: transparent;

    border: 0;
    border-bottom:
        1px solid
        rgba(20,20,20,.28);

    border-radius: 0;

    font: inherit;
}


.ga-contact-page__form-panel textarea {
    min-height: 10rem;

    resize: vertical;
}


.ga-contact-page__form-panel input:focus,
.ga-contact-page__form-panel textarea:focus,
.ga-contact-page__form-panel select:focus {
    outline: 0;

    border-bottom-color:
        var(--ga-pink, #ff0046);
}


.ga-contact-page__form-panel .buttons {
    margin-top: 2rem;
}


.ga-contact-page__form-panel button,
.ga-contact-page__form-panel input[type="submit"],
.ga-contact-page__form-panel .button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        .9rem
        1.4rem;

    color: #fff;

    background:
        var(--ga-text, #171717);

    border: 0;
    border-radius: 0;

    font-weight: 700;

    cursor: pointer;
}


.ga-contact-page__form-panel button:hover,
.ga-contact-page__form-panel button:focus-visible,
.ga-contact-page__form-panel input[type="submit"]:hover,
.ga-contact-page__form-panel input[type="submit"]:focus-visible {
    background:
        var(--ga-pink, #ff0046);
}


.ga-contact-page__form-note {
    margin:
        2rem
        0
        0;

    padding-top: 1.25rem;

    color:
        #646464;

    border-top:
        1px solid
        rgba(20,20,20,.14);

    font-size: .78rem;
    line-height: 1.55;
}


/* =========================================================
   CONTACT PAGE — RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .ga-contact-page {
        padding:
            4rem
            0;
    }

    .ga-contact-page__grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .ga-contact-page__heading {
        max-width: none;

        font-size:
            clamp(3.2rem, 13vw, 5rem);
    }

    .ga-contact-page__form-panel {
        padding:
            clamp(1.5rem, 6vw, 2.5rem);
    }
}

/* Contact page — Your Story panel */
.ga-contact-page__story {
    background: #171717;
    color: #fff;
}

.ga-contact-page__story-label {
    color: var(--ga-pink, #ff0046);
}

.ga-contact-page__story h2 {
    color: #fff;
}

.ga-contact-page__story > p:not(.ga-contact-page__story-label) {
    color: rgba(255,255,255,.78);
}

.ga-contact-page__story a {
    color: #fff;
}

.ga-contact-page__story a span {
    color: var(--ga-pink, #ff0046);
}

.ga-contact-page__story a:hover,
.ga-contact-page__story a:focus-visible {
    color: var(--ga-pink, #ff0046);
}


/* =========================================================
   LEGAL PAGES
   ========================================================= */

.ga-legal-page {
    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    background: #fff;
    color: var(--ga-text, #171717);
}


.ga-legal-page__grid {
    display: grid;

    grid-template-columns:
        minmax(15rem, .65fr)
        minmax(0, 1.35fr);

    gap:
        clamp(4rem, 8vw, 8rem);

    align-items: start;
}


.ga-legal-page__header {
    position: sticky;

    top: 7rem;
}


.ga-legal-page__eyebrow {
    margin:
        0
        0
        1.25rem;

    color:
        var(--ga-pink, #ff0046);

    font-size: .7rem;
    font-weight: 750;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.ga-legal-page__heading {
    max-width: 9ch;

    margin:
        0
        0
        2rem;

    color:
        var(--ga-text, #171717);

    font-size:
        clamp(3rem, 5vw, 5.5rem);

    line-height: .94;
    letter-spacing: -.04em;
}


.ga-legal-page__updated {
    margin: 0;

    color: #666;

    font-size: .76rem;
    line-height: 1.5;
}


.ga-legal-page__content {
    max-width: 48rem;

    color: #333;

    font-size:
        clamp(1rem, 1.15vw, 1.1rem);

    line-height: 1.7;
}


.ga-legal-page__content h2 {
    margin:
        3.5rem
        0
        1rem;

    color:
        var(--ga-text, #171717);

    font-size:
        clamp(1.7rem, 2.5vw, 2.4rem);

    line-height: 1.05;
}


.ga-legal-page__content h2:first-child {
    margin-top: 0;
}


.ga-legal-page__content p {
    margin:
        0
        0
        1.25rem;
}


.ga-legal-page__content ul {
    margin:
        0
        0
        1.5rem;

    padding-left: 1.3rem;
}


.ga-legal-page__content li + li {
    margin-top: .5rem;
}


.ga-legal-page__content a {
    color:
        var(--ga-text, #171717);

    text-decoration-color:
        var(--ga-pink, #ff0046);

    text-underline-offset: .18em;
}


.ga-legal-page__content a:hover,
.ga-legal-page__content a:focus-visible {
    color:
        var(--ga-pink, #ff0046);
}


@media (max-width: 800px) {

    .ga-legal-page {
        padding:
            4rem
            0;
    }

    .ga-legal-page__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .ga-legal-page__header {
        position: static;
    }

    .ga-legal-page__heading {
        max-width: none;
    }

}