/*
 * Phone layer.
 *
 * The site was laid out for a wide desktop canvas: 300px section padding,
 * 110-200px display type, and project cards that crop a wide image into a
 * 70vh portrait box with the title painted on top. All three read as designed
 * at 1440px and as broken at 375px, so everything below is scoped to phones
 * and only ever overrides — no desktop rule is touched.
 *
 * Loaded last, after master/about/case/contact, so it wins on specificity ties.
 */

@media screen and (max-width: 767px) {

    /* ---------------------------------------------------------------
     * Typography
     *
     * Fixed pixel display sizes were tuned for a 1440px canvas. Every
     * heading below is fluid instead, so it fills a 320px phone and a
     * 767px tablet without a breakpoint for each one.
     * --------------------------------------------------------------- */

    .default_row--container.intro .inner--container .intro_text--container p {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 32px;
    }

    .big-text {
        font-size: 21px;
        line-height: 1.45;
    }

    .size-20 {
        font-size: 16px;
        line-height: 1.65;
    }

    h3 {
        letter-spacing: 5px;
        margin-bottom: 28px;
        font-size: 14px;
    }

    /* ---------------------------------------------------------------
     * Vertical rhythm
     *
     * 300px of padding above and below a section is 1.5 phone screens of
     * empty black between one sentence and the next.
     * --------------------------------------------------------------- */

    .default_row--container.intro {
        padding: 110px 0;
    }

    .sub_portfolio {
        padding: 40px 0 110px;
    }

    .default_row--container.intro .inner--container .about_services--container {
        padding-top: 70px;
    }

    .default_row--container.intro .inner--container .about_services--container ul {
        columns: 1;
    }

    .default_row--container.intro .inner--container .about_services--container ul li {
        font-size: 1rem;
        padding: .6rem 0 .6rem 1.5rem;
    }

    /* ---------------------------------------------------------------
     * Home hero
     *
     * The name is an SVG that scales with its box, so it only needs the
     * container to stop reserving a full desktop screen of air around it.
     * --------------------------------------------------------------- */

    .home_hero--wrapper .hero_text--container p {
        max-width: 280px;
        font-size: 15px;
    }

    /* ---------------------------------------------------------------
     * Featured projects (home)
     *
     * On desktop these are 70vh sticky cards that stack as you scroll,
     * with the title and tags painted over the image. On a phone the
     * image is cropped to a portrait sliver — a wide research figure
     * becomes unreadable — and the title, the tags and whatever text is
     * inside the image all pile up in the same corner.
     *
     * So on phones the card stops being an overlay: image on top, title
     * and tags underneath on the page background. The image also keeps
     * its own aspect ratio rather than being cropped into a fixed box —
     * half of these are wide research figures that a crop destroys.
     * --------------------------------------------------------------- */

    .home_portfolio--wrapper {
        min-height: 0;
    }

    .home_portfolio--wrapper .featured_projects--container .featured_projects {
        grid-row-gap: 0;
        row-gap: 0;
    }

    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project {
        position: relative;
        top: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
        border-radius: 0;
        margin-bottom: 55px;
    }

    /* The picture comes after the info in the markup, because on desktop
       it is absolutely positioned behind it. In flow that order is wrong. */
    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project .project_picture--container {
        order: 1;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        border-radius: 10px;
        overflow: hidden;
        background-color: #1a1a1a;
    }

    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project .project_picture--container img {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        max-height: 65vh;
        object-fit: contain;
        transform: none;
        display: block;
    }

    /* The scrim existed to keep white text legible over the image; the
       text no longer sits on the image. */
    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project .project_picture--container::after {
        display: none;
    }

    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project .project_info--container {
        order: 2;
        position: relative;
        display: block;
        padding: 18px 0 0;
    }

    /* Coign is a heavily condensed face, so it needs more points than a
       normal sans to read at the same optical size. */
    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project .project_info--container .project_title {
        font-size: clamp(40px, 12vw, 58px);
        line-height: .9;
        margin-bottom: 14px;
    }

    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project .project_info--container .project_meta li {
        margin: 0 8px 8px 0;
        padding: 8px 14px;
        font-size: 14px;
        background-color: rgba(255, 255, 255, .08);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* ---------------------------------------------------------------
     * All projects (portfolio.html)
     *
     * Same overlap: the tags float over the top-left of the image and
     * land on whatever the image has there.
     * --------------------------------------------------------------- */

    .main_portfolio--wrapper {
        padding-bottom: 110px;
    }

    /* Same reasoning as the home cards: let the figure keep its ratio
       instead of cropping it into a 3:2 box. */
    .main_portfolio--wrapper .all_projects--container .single_project .project_picture--container {
        padding-top: 0;
        border-radius: 0;
        overflow: visible;
    }

    .main_portfolio--wrapper .all_projects--container .single_project .project_picture--container img {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        max-height: 65vh;
        object-fit: contain;
        transform: none;
        display: block;
        border-radius: 10px;
        background-color: #1a1a1a;
    }

    /* The tags are absolutely positioned over the top-left of the image,
       where they land on whatever that image happens to have there. */
    .main_portfolio--wrapper .all_projects--container .single_project .project_picture--container .project_meta {
        position: static;
        margin-bottom: 12px;
    }

    .main_portfolio--wrapper .all_projects--container .single_project .project_picture--container .project_meta li {
        margin: 0 8px 8px 0;
        padding: 8px 14px;
        font-size: 14px;
        background-color: rgba(255, 255, 255, .08);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .main_portfolio--wrapper .all_projects--container .single_project .project_info--container {
        padding: 14px 0 0;
    }

    .main_portfolio--wrapper .all_projects--container .single_project .project_info--container .project_title {
        font-size: 22px;
    }

    .projects_intro--wrapper {
        padding-top: 40px;
    }

    .projects_intro--wrapper .inner--container {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .projects_intro--wrapper .inner--container h1 {
        font-size: clamp(64px, 22vw, 110px);
        margin-top: 40px;
    }

    /* ---------------------------------------------------------------
     * About page
     * --------------------------------------------------------------- */

    .about_intro--wrapper {
        padding-top: 30px;
    }

    .about_intro--wrapper .inner--container .grid {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .about_intro--wrapper .inner--container .grid h1 {
        font-size: clamp(52px, 15vw, 86px);
        line-height: .9;
    }

    .about_text--wrapper .inner--container .grid {
        padding-bottom: 80px;
    }

    .about_gallery--wrapper .inner--container .grid {
        padding-top: 40px;
        padding-bottom: 80px;
    }

    .logos_marquee--wrapper.spacing_bottom {
        padding-bottom: 110px;
    }

    /* ---------------------------------------------------------------
     * Case studies (projects/*.html)
     *
     * The hero figure is forced into a 62.5% box at height:110% with
     * object-fit:cover, which crops a wide chart down to an unreadable
     * band. On a phone the figure is the point, so let it keep its own
     * aspect ratio instead.
     * --------------------------------------------------------------- */

    .single_case_hero--row {
        padding: 130px 0 60px;
    }

    .single_case_hero--row .grid h1 {
        font-size: clamp(52px, 15vw, 86px);
        line-height: .85;
    }

    .single_case_hero--row .grid .col-intro {
        margin-bottom: 45px;
    }

    .single_case_hero--row .grid .col-summary .entry {
        padding-bottom: 26px;
    }

    .single_case_hero--row .hero_img--container {
        padding: 0 25px;
        margin-bottom: 50px;
    }

    .single_case_hero--row .hero_img--container .hero_img {
        padding-top: 0;
        height: auto;
    }

    .single_case_hero--row .hero_img--container .hero_img img {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .single_case {
        padding: 70px 0;
    }

    .case_section_title {
        font-size: 15px;
        letter-spacing: 5px;
        padding: 18px 0;
        margin-bottom: 26px;
    }

    .next-project {
        padding: 80px 0;
    }

    .next-project .inner--container p:last-child {
        font-size: clamp(44px, 13vw, 74px);
    }

    /* ---------------------------------------------------------------
     * Contact footer
     * --------------------------------------------------------------- */

    .cta_footer--container {
        min-height: 0;
        padding: 90px 0;
    }

    .cta_footer--container .cta--container .text--container .title {
        font-size: clamp(46px, 13vw, 76px);
        line-height: .85;
        margin-bottom: 26px;
    }

    /* Three centred columns stacked into one. The column keeps the
       centring — .footer-col is text-align:center and was never
       overridden, so aligning the flex items left only put the short
       lines hard against the gutter while the long ones stayed centred
       inside their own full-width box, which is the ragged left edge in
       the screenshots. */
    .footer-bottom--wrapper {
        flex-direction: column;
        align-items: center;
        gap: 22px;
        text-align: center;
    }

    .footer-bottom--wrapper .footer-col {
        margin: 0;
        width: 100%;
        font-size: 14px;
        line-height: 1.6;
    }

    /* Instagram / Twitter / Linkedin / GitHub is 4 words and 3 slashes.
       At 16px with 10px either side of every link it needs 420px and a
       phone has 340 of usable width, so the last name wrapped onto a
       line of its own. */
    .footer-bottom--wrapper .social-links {
        font-size: clamp(12px, 3.4vw, 14px);
    }

    .footer-bottom--wrapper .social-links a {
        margin: 0 3px;
        font-size: inherit;
        display: inline-block;
        padding: 6px 0;
    }

    /* ---------------------------------------------------------------
     * Touch targets
     *
     * Every interactive element here was sized for a cursor. 44px is the
     * smallest reliable thumb target.
     * --------------------------------------------------------------- */

    .lovely_button {
        padding: 16px 26px;
        font-size: 15px;
    }

    .mobile_menu--container nav ul li a,
    .mobile_menu--container .social_menu li a {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* A tap fires :hover on touch and then leaves it stuck until the next
       tap elsewhere, so the card-zoom and button-fill transitions strobe
       while scrolling. Neutralise the ones that move layout. */
    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project:hover .project_info--container {
        padding: 18px 0 0;
    }

    .main_portfolio--wrapper .all_projects--container .single_project:hover .project_picture--container img {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ===================================================================
 * Round two. Everything above was written blind against the markup;
 * everything below came out of driving the real pages at 375x812 and
 * measuring what actually collided.
 *
 * Still phone-only, still override-only: no desktop rule is touched.
 * =================================================================== */

@media screen and (max-width: 767px) {

    /* ---------------------------------------------------------------
     * Display type, clipped
     *
     * SplitText wraps every word in `.word { overflow: hidden }` so the
     * glyphs can slide up into view from behind their own line box. That
     * box is the line box, so any line-height below 1 makes the mask
     * shorter than the letters it is masking and Coign — which has tall
     * caps and a deep descender — gets sliced top and bottom.
     *
     * It reads as a rendering fault rather than as a style: "A LITTLE
     * ABOUT ME" came out with flat-topped letters and half an accent.
     *
     * Two halves to the fix. Line-height at or above 1 buys the
     * descender room at the bottom, where the mask edge has to stay put
     * because that is the edge the reveal slides through. The ascender
     * gets its room from padding on the mask itself, cancelled by an
     * equal negative margin so nothing below moves.
     * --------------------------------------------------------------- */

    /* Only the display headings. SplitText puts `.word` around every word
       of every paragraph too, and shifting each one of those up by .16em
       wrecks the line spacing of the body copy. */
    .projects_intro--wrapper .inner--container h1 .word,
    .about_intro--wrapper .inner--container .grid h1 .word,
    .single_case_hero--row .grid h1 .word {
        padding-top: .16em;
        margin-top: -.16em;
    }

    .projects_intro--wrapper .inner--container h1,
    .about_intro--wrapper .inner--container .grid h1,
    .single_case_hero--row .grid h1 {
        line-height: 1;
    }

    .cta_footer--container .cta--container .text--container .title,
    .next-project .inner--container p:last-child {
        line-height: .95;
    }

    /* ---------------------------------------------------------------
     * Page titles vs. the logo
     *
     * The circular PERSUS dial is fixed at the top-left and ends 130px
     * down the viewport. Every interior page then opened its <h1> at
     * about 108px, so the first word of the title ran straight through
     * the bottom of the dial. On desktop the header is the full width of
     * the screen and the title starts well clear of it; on a phone they
     * share the same 375px.
     *
     * Each page keeps its own spacing mechanism — margin here, padding
     * there — so this only raises the numbers that were already in use.
     * --------------------------------------------------------------- */

    .projects_intro--wrapper .inner--container h1 {
        margin-top: 90px;
    }

    .about_intro--wrapper .inner--container .grid {
        padding-top: 92px;
    }

    .single_case_hero--row {
        padding-top: 164px;
    }

    /* ---------------------------------------------------------------
     * Case studies lead with the figure
     *
     * `.single_case_hero--row` is a flex column and master.css gives the
     * image `order: 1` against the text's `order: 2`, so on a phone the
     * page opens on a bare chart: no title, no back link, no caption,
     * nothing saying what is being measured. The figure is the payoff of
     * the argument, not the opening of it.
     * --------------------------------------------------------------- */

    .single_case_hero--row .inner--container {
        order: 1;
    }

    .single_case_hero--row .hero_img--container {
        order: 2;
        margin-top: 10px;
        margin-bottom: 0;
    }

    /* ---------------------------------------------------------------
     * Room for the section bar
     *
     * site-nav.js pins a "section 3 of 6" strip to the bottom edge on the
     * pages that have named sections, and it was sitting on top of the
     * last line of the page — the final list item, the next-page button,
     * the first project title. The strip measures 59px, so 76px leaves
     * the last line clear of it with a margin.
     *
     * The class comes from site-nav.js and only lands on pages that
     * actually build the bar, so case studies keep their own footer
     * spacing untouched.
     * --------------------------------------------------------------- */

    body.has-section-status [data-barba="container"] {
        padding-bottom: 76px;
    }

    /* ---------------------------------------------------------------
     * Vertical rhythm, second pass
     *
     * The first pass cut desktop's 300px section padding to 110px, which
     * is right for a tablet and still about a seventh of a phone screen
     * of nothing between one thought and the next. Measured on device,
     * the page reads as a series of black gaps with sentences in them.
     * These are the gaps that were actually long enough to notice.
     * --------------------------------------------------------------- */

    .default_row--container.intro {
        padding: 72px 0;
    }

    .default_row--container.intro .inner--container .about_services--container {
        padding-top: 52px;
    }

    .sub_portfolio {
        padding: 32px 0 72px;
    }

    .main_portfolio--wrapper {
        padding-bottom: 72px;
    }

    .project_filters {
        padding-bottom: 34px;
    }

    .filter_status {
        padding-bottom: 22px;
    }

    .about_text--wrapper .inner--container .grid {
        padding-bottom: 64px;
    }

    .about_gallery--wrapper .inner--container .grid {
        padding-top: 32px;
        padding-bottom: 64px;
    }

    .logos_marquee--wrapper.spacing_bottom {
        padding-bottom: 72px;
    }

    .single_case {
        padding: 56px 0;
    }

    .next-project {
        padding: 64px 0;
    }

    .cta_footer--container {
        padding: 72px 0;
    }
}

/* ===================================================================
 * Round three: things found on a real phone, not in an emulator.
 * =================================================================== */

@media screen and (max-width: 767px) {

    /* ---------------------------------------------------------------
     * "Other project" had no image
     *
     * master.css hides the next-project thumbnail behind an opaque #111
     * curtain — .image--container::before, z-index 3, over an image at
     * z-index 1 — and lifts it only on
     *
     *     .next-project:hover .image--container::before
     *
     * A phone has no hover, so the curtain never lifts and the card is a
     * black rectangle on every case study. Touching it fires :hover just
     * long enough for the image to flash and then vanish again, which is
     * the "it moves and then you can't see it" of the bug report.
     *
     * On touch the revealed state is simply the default. The ::after
     * scrim stays: it is what keeps the white title legible on top.
     * --------------------------------------------------------------- */

    .next-project .image--container::before {
        transform: translateY(-100%);
    }

    /* ---------------------------------------------------------------
     * The bottom footer sat on the edge of the glass
     *
     * On desktop this is three equal flex columns, each centred inside
     * its own third, so nothing ever reaches the edge and no padding was
     * needed. Stacked into one column on a phone, the long lines run to
     * both edges of the screen. It needs the same 25px gutter as
     * .inner--container.
     * --------------------------------------------------------------- */

    .footer-bottom--wrapper {
        padding-left: 25px;
        padding-right: 25px;
    }

    /* ---------------------------------------------------------------
     * The contact CTA was printed on top of the shark
     *
     * .text--container is absolutely centred over the canvas. At 1440px
     * the shark is wide and the 200px headline sits in clear water above
     * it. At 375px the canvas is 341px tall, the headline drops to 48px,
     * and the headline and the button both land on the animal — white
     * type on a pale blue sky over a dark dorsal fin.
     *
     * In flow instead: shark, then headline, then button. Same order as
     * the desktop reading, nothing overlapping.
     * --------------------------------------------------------------- */

    .cta_footer--container .cta--container .text--container {
        position: static;
        transform: none;
        margin-top: 26px;
    }

    /* The headline is white everywhere else on the site and it is white
       here too; it was darkened only while it still sat on top of the
       shark, and it has not sat there since the block was put in flow. */
    .cta_footer--container .cta--container .text--container .title {
        color: #fff;
    }

    .cta_footer--container .cta--container .text--container .lovely_button {
        margin-top: 4px;
    }
}

/* ===================================================================
 * Round four, from screenshots taken on an iPhone.
 * =================================================================== */

@media screen and (max-width: 767px) {

    /* ---------------------------------------------------------------
     * Tapping the next-project card threw the image across the screen
     *
     * master.css positions that image absolutely and centres it with
     * `translate(-50%, -50%)`. Restacking the card for phones replaced
     * that with `transform: none`, which is right — but the hover rule
     * underneath it still says `translate(-50%, -50%) scale(1)`, and a
     * touch fires :hover. So the first tap jumped the image half its
     * own width left and half its height up, and letting go put it
     * back. The hover rules have to go the same way the layout did.
     * --------------------------------------------------------------- */

    .next-project:hover .image--container img {
        transform: none;
    }

    /* ---------------------------------------------------------------
     * Nothing moves under a finger
     *
     * Every card on the site grows its image 10% on hover. With a mouse
     * that is a hover state; with a finger it is a shove that fires on
     * the way to a tap and sticks until you touch something else.
     * --------------------------------------------------------------- */

    .home_portfolio--wrapper .featured_projects--container .featured_projects .single_project:hover .project_picture--container img,
    .main_portfolio--wrapper .all_projects--container .single_project:hover .project_picture--container img {
        transform: none;
    }

    /* ---------------------------------------------------------------
     * "WMF BENCHMARK" was white on white
     *
     * Lifting the curtain off the next-project thumbnail uncovered the
     * other half of the problem: these thumbnails are research figures,
     * and half of them are black ink on white paper. The card paints a
     * white title straight onto that, over a scrim that is only 50%
     * black. Darkening the scrim does not fix it — anything heavy
     * enough to carry white type turns the figure into a grey smear,
     * and the figure is the reason the card is there.
     *
     * So the card stops being an overlay, exactly like the home and
     * portfolio cards already do on a phone: figure first, at its own
     * size, then the label and the title underneath on the page's own
     * background. Nothing is printed on top of anything.
     * --------------------------------------------------------------- */

    .next-project {
        display: flex;
        flex-direction: column;
        padding: 56px 0 64px;
    }

    .next-project .image--container {
        order: 1;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: calc(100% - 50px);
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 0 auto 20px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #1a1a1a;
    }

    .next-project .image--container img {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Both of these existed to make white type legible on top of the
       image. Nothing sits on top of the image any more. */
    .next-project .image--container::before,
    .next-project .image--container::after {
        display: none;
    }

    .next-project .inner--container {
        order: 2;
    }
}

/* The overscroll area at the top and bottom of the document, and the
   colour iOS Safari tints its own toolbars with when it decides to
   sample the page instead of honouring <meta name="theme-color">.
   Without this, html has no background of its own and the nearest
   thing to sample is the pale blue of the contact block. */
html {
    background-color: #111111;
}

/* ===================================================================
 * Round five.
 * =================================================================== */

@media screen and (max-width: 767px) {

    /* The contact block was a screenful of blue with the message
       floating in the top third of it. master.css pushes .cta--wrapper
       down 70px below 600px wide, which made sense when the text was
       centred on top of the canvas and does not now that it sits under
       it. Close the gap and let the group centre properly. */
    .cta_footer--container .cta--wrapper {
        margin-top: 0;
    }

    .cta_footer--container .cta--container {
        padding: 0;
    }

    #shark_canvas {
        height: clamp(200px, 30vh, 300px);
    }

    .cta_footer--container .cta--container .text--container {
        margin-top: 8px;
    }
}

/* ===================================================================
 * Round six.
 * =================================================================== */

/* The loader is supposed to be the only thing on screen, and it was not.
   Its stripes sit at z-index 1 and the "J" at 5, while #header is 110
   and the section bar is 108 — so the logo and "SECTION 1 OF 4" were
   painted on top of the blue for the whole three seconds. Nothing is
   above the loader while the loader is up. */
.loader_wrapper .stripe {
    z-index: 200;
}

.loader_wrapper #loading_animation {
    z-index: 201;
}

@media screen and (max-width: 767px) {

    /* The "scroll to discover" dial is anchored 35px off the bottom-left
       of the hero. The section bar is fixed 22px off the bottom of the
       viewport and stands 59px tall, so on a phone it parks squarely on
       top of the dial. Lift the dial clear of it. */
    .home_hero--wrapper .circular_text--container {
        bottom: 120px;
    }
}