/*==========================================================================
   HOMEPAGE
   Desktop values come from HomepageIdleBlueprint.pdf. The blueprint exports
   at 8001px = a 1920px design, so a measurement of N export px is N/4.167
   CSS px, and N/8001 as a fraction of the page width. Percentages and vw
   below are those fractions, which is why the layout holds its proportions
   at any width rather than only at 1920.
==========================================================================*/

/* Matches the last section, so the strip below it on a short page does
   not show as bare body. See the note on `body` in style.css. */
body { background: #fdfdfd; }   /* the intro section's ground */

/* Every figure taken off HomepageMobile.png is a percentage of the page, so
   the layout is written in --u, the capped design unit set in style.css. */
:root {
    /* The reference draws the wave band far heavier than the shared default,
       which is set from the 1920 blueprint: 5.3% of the page at one seam and
       8.4% at the next. This sits between the two. */
    --divider-h: calc(var(--u) * 6.9);
    --divider-half: calc(var(--u) * 3.45);
}

/* The fan on the first seam, at the reference's 22.6% of the page. */
.divider__badge { width: calc(var(--u) * 22.6); }

/*==========================================================================
   1. HERO
==========================================================================*/
.hero {
    display: grid;
    place-items: center;
    padding: 0 0 var(--divider-half);
    background: url("../assets/IridescentBackground.jpeg") center / cover no-repeat;
}

/* Everything in the hero is positioned against this box, so the badges keep
   their relationship to the logo at every width. */
/* Mobile follows HomepageMobile.png: the orbit is the full width of the
   page and slightly taller than it, with everything placed as a percentage
   of that box so the arrangement holds at any phone size. */
.hero__orbit {
    position: relative;
    width: min(100%, calc(var(--u) * 100));
    margin-inline: auto;
    aspect-ratio: 1501 / 1847;
}

/* Each badge is set at a slight angle. The angles are the ones the artwork
   is drawn at: measured off the text inside each badge in both the 1920
   blueprint and the mobile reference, which agree to within a quarter of a
   degree, so they hold at every width. */
.hero__logo,
.hero__icon {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}

.hero__logo {
    --x: 49.63%;
    --y: 46.5%;
    width: 43.57%;
    height: auto;
}

.hero__icon {
    width: var(--icon-w, 17.9%);
}

/* Six icons around the logo, at the centres measured off the reference. */
.hero__icon--branding    { --x: 50.27%; --y: 17.1%; --rot: -13.5deg; }
.hero__icon--marketing   { --x: 14.79%; --y: 29.6%; --icon-w: 18.12%; --rot:  16.75deg; }
.hero__icon--interactive { --x: 85.81%; --y: 29.6%; --icon-w: 17.59%; --rot:  -4.25deg; }
.hero__icon--education   { --x: 15.52%; --y: 60.8%; --icon-w: 17.72%; --rot:   5.5deg; }
.hero__icon--concert     { --x: 85.98%; --y: 60.8%; --icon-w: 18.85%; --rot:  11deg; }
.hero__icon--about       { --x: 50.27%; --y: 79.0%; --icon-w: 17.52%; --rot:  -8.5deg; }

/*==========================================================================
   2. FEATURED WORK
==========================================================================*/
.featured {
    position: relative;
    padding: 0;
}

/* WaterfallRight — desktop only; the mobile layout leaves it out. */
.featured__waterfall { display: none; }

/* The reference staggers the three frames rather than stacking them, so they
   are placed on a canvas whose height is a fixed share of its width. The DOM
   keeps the desktop order (Scroll, Progress, Buddies); the reference shows
   Progress first, so the positions are assigned accordingly. */
.projects {
    position: relative;
    display: block;
    width: min(100%, calc(var(--u) * 100));
    margin-inline: auto;
    aspect-ratio: 1501 / 2634;
}

.project,
.featured__cta-mobile {
    position: absolute;
}

.project--second { left:  4.86%; top:  6.30%; width: 71.95%; }   /* Progress */
.project--third  { left: 54.76%; top: 46.37%; width: 38.84%; }   /* Buddies  */
.featured__cta-mobile { left: 12.33%; top: 50.97%; width: 20.72%; }
.project--first  { left: 14.52%; top: 67.41%; width: 47.77%; }   /* Scroll   */

.featured__cta-mobile img { width: 100%; height: auto; }

/* Desktop badge on the waterfall — hidden until there is a waterfall. */
.featured__cta { display: none; }

/*--------------------------------------------------------------------------
   Project cards: photo in the frame, flipping to the write-up
--------------------------------------------------------------------------*/
.project__flip {
    perspective: 1400px;
    cursor: pointer;
}

.project__flip:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 8px;
    border-radius: 50%;
}

.project__inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s var(--ease);
}

@media (hover: hover) {
    .project__flip:hover .project__inner { transform: rotateY(180deg); }
}

.project__flip:focus-visible .project__inner,
.project__flip.is-flipped .project__inner { transform: rotateY(180deg); }

.project__face {
    position: relative;
    backface-visibility: hidden;
}

.project__face--back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

/* ProjectFrame.svg's white is a ring, not a filled disc, so the back of the
   card would otherwise be see-through. This lays an opaque disc in the same
   scallop the photo uses on the front. */
.project__face--back::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--white);
    -webkit-mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
            mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
}

/* ProjectFrame.svg is a navy scallop ring with a white interior, so it sits
   underneath and the photo is masked to the inner scallop on top of it.
   The mask below is the frame's own innermost path, inlined as a data URI so
   it shares the 492.91 viewBox and lines up exactly. Source: assets/SVG/ProjectFrame.svg */
.project__frame {
    display: block;
    width: 100%;
    height: auto;
}

.project__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
            mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
}

.project__info {
    position: absolute;
    inset: 20.15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--blue);
}

.project__name {
    margin: 0;
    font-size: max(0.82rem, 8.28cqw);  /* 10% under the blueprint */
    font-weight: 900;
    line-height: 1.1;
}

.project__discipline {
    margin: 0.3em 0 0.85em;
    font-size: max(0.58rem, 3.47cqw);
    font-weight: 800;
    font-style: italic;
}

/* The reference sets the frames far smaller than the desktop blueprint does
   — the smallest is 151px across on a 390px phone — and the write-up cannot
   be set legibly inside one. On mobile the back face carries the title and
   discipline; the blurb comes back with the desktop layout. */
.project__blurb { display: none; }

/* Type inside the cards is sized against the card, not the viewport, so a
   card that is 88% wide on mobile and 27% wide on desktop reads the same. */
.project { container-type: inline-size; }

/*==========================================================================
   3. INTRO — "Hi there!"
==========================================================================*/
/* Three bands on mobile: a teal one carrying the headshot, white for the
   heading and copy, then the navy specialty strip. */
.intro {
    position: relative;
    /* flow-root, not block: the portrait's top margin would otherwise
       collapse through the section and push the whole band down. */
    display: flow-root;
    padding: 0;
}

/* The teal band. Its foot is a plain wave rather than the navy stripe the
   other sections are divided by, so the divider artwork is used as a mask and
   filled with the ground colour of the section below: what shows is the wave's
   upper edge in white, and everything below it disappears into the ground. */
.intro__waterfall {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(var(--u) * 58.23);
    background: var(--teal);
}

.intro__waterfall::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--divider-h);
    transform: translateY(-50%);
    background: #fdfdfd;
    -webkit-mask: var(--svg-page-divider) no-repeat center / 100% 100%;
            mask: var(--svg-page-divider) no-repeat center / 100% 100%;
}

/*--------------------------------------------------------------------------
   Portrait
--------------------------------------------------------------------------*/
.intro__portrait {
    position: relative;
    z-index: 1;
    width: calc(var(--u) * 67.26);
    margin: calc(var(--u) * 9.75) auto 0;
    aspect-ratio: 1;
}

.intro__headshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Mobile has no hover, so the card stays on its front face — which is the
   badge the designer drew for it. */

/* Mobile: the badge hangs off the bottom-right of the photo. */
.intro__cta {
    position: absolute;
    left: 79.24%;
    top: 62.37%;
    width: 33.08%;
}

/*--------------------------------------------------------------------------
   Heading + blurb
--------------------------------------------------------------------------*/
.intro__heading {
    width: fit-content;
    margin: calc(var(--u) * 5.06) auto 0;
    font-size: max(2.4rem, calc(var(--u) * 15.83));
    text-align: center;
    font-weight: 600;
    line-height: 1;
    color: var(--blue);
}

/* MediumSquiggle sits under the heading at its natural 711.94 x 9.08. */
.intro__heading::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 711.94 / 9.08;
    margin-top: 0.172em;
    background-color: var(--blue);
    -webkit-mask: var(--mask-squiggle-medium) no-repeat center / 100% 100%;
            mask: var(--mask-squiggle-medium) no-repeat center / 100% 100%;
}

.intro__blurb {
    margin: 1.166em auto 0;
    font-size: max(0.8rem, calc(var(--u) * 4.09));
    line-height: 1.28;
    text-align: center;
    color: #000;
}

/* Set in one weight at every width. The blueprints pick the name and the
   two roles out in black; Jayce asked for them level with the rest of the
   sentence. The markup keeps <strong> either way, so the emphasis is still
   there for a screen reader. */
.intro__blurb strong { font-weight: inherit; }

/* The designer sets the blurb on three lines at every width. */

.intro__pronouns { font-size: 0.66em; }

/* The designer breaks the blurb after "(she/her)." and after "designer",
   which is tighter than where it would wrap on its own. Honour that on the
   desktop layout and let it wrap naturally in the narrow column. */

/*--------------------------------------------------------------------------
   "My specialty!" — navy panel with a wavy left edge (BlueVertWave)
--------------------------------------------------------------------------*/
/* Mobile: a full-width band in the darker navy, crested with the same wave
   as the teal one above it — masked and filled with the band's own colour, so
   only the crest shows. */
.specialty {
    position: relative;
    margin-top: calc(var(--u) * 13.96);
    padding: calc(var(--u) * 5.8) 0 calc(var(--u) * 9.26);
    color: var(--white);
    background: var(--navy);
}

.specialty::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--divider-h);
    transform: translateY(-50%);
    background: var(--navy);
    -webkit-mask: var(--svg-page-divider) no-repeat center / 100% 100%;
            mask: var(--svg-page-divider) no-repeat center / 100% 100%;
}

.specialty__title {
    margin: 0;
    font-size: max(0.75rem, calc(var(--u) * 3.33));
    font-weight: 600;
    text-align: center;
}

/* Three badges in a row, on the centres the reference sets: 17.2%, 49.5%
   and 82.2% of the page. */
.specialty__list {
    display: flex;
    justify-content: space-between;
    width: min(100%, calc(var(--u) * 100));
    margin-inline: auto;
    padding: calc(var(--u) * 5.33) calc(var(--u) * 8.34) 0;
}

/* Each badge centres inside its own row. On the desktop panel the rows are
   full-width blocks, and without this the icons hug the left edge. */
.specialty__list li {
    display: flex;
    justify-content: center;
}

.specialty__list img {
    width: calc(var(--u) * 17.7);
    height: auto;
}

/* Set at the angles the reference draws them at, same as the hero badges. */
.specialty__list li:nth-child(1) img { transform: rotate(6.75deg); }
.specialty__list li:nth-child(2) img { transform: rotate(-3.5deg); }
.specialty__list li:nth-child(3) img { transform: rotate(14.5deg); }

/*==========================================================================
   DESKTOP — the blueprint layout
   Held back to 64em on purpose. The blueprint is drawn at 1920px, so at the
   navbar's 48em breakpoint it would be running at 40% and the copy inside the
   project cards would render around 8px. Phones and tablets get the stacked
   layout; laptops and up get the blueprint.
==========================================================================*/
@media (min-width: 64em) {

    /* Back to the shared, blueprint-derived band. */
    :root {
        --divider-h: max(1.1rem, 3.14vw);
        --divider-half: calc(var(--divider-h) / 2);
    }

    .divider__badge { width: max(5.5rem, 13.33vw); }

    /*---------------------------------------------------------- 1. HERO --*/
    .hero {
        /* the orbit keeps the blueprint's 698.7px; the extra is the half-band */
        padding: 0 0 var(--divider-half);
    }

    /* 1920 x 698.7 in the blueprint (nav bottom to the top of the wave). */
    .hero__orbit {
        width: 100%;
        max-width: none;
        aspect-ratio: 1920 / 698.7;
    }

    .hero__logo {
        --x: 50%;
        --y: 49.7%;
        width: 17.45%;              /* 335px at 1920 */
    }

    /* Measured badge centres, as a fraction of the hero box. The widths
       differ slightly because the designer scaled each badge by eye, and are
       then taken down 8% from the blueprint at Jayce's request. */
    .hero__icon--branding    { --x: 28.98%; --y: 21.7%; --icon-w: 6.83%; }
    .hero__icon--interactive { --x: 74.62%; --y: 22.0%; --icon-w: 6.91%; }
    .hero__icon--marketing   { --x: 11.47%; --y: 45.9%; --icon-w: 7.05%; }
    .hero__icon--concert     { --x: 88.71%; --y: 48.8%; --icon-w: 7.36%; }
    .hero__icon--education   { --x: 27.11%; --y: 79.4%; --icon-w: 6.90%; }
    .hero__icon--about       { --x: 70.98%; --y: 79.4%; --icon-w: 6.83%; }

    /*------------------------------------------------ 2. FEATURED WORK --*/
    .featured {
        padding: calc(4.71vw + var(--divider-half)) 0
                 calc(2.53vw + var(--divider-half));   /* 90.5px above the
                 tallest frame and 48.5px below, plus a half-band at each end */
    }

    /* Only 332.8px of the waterfall is on the page; the rest runs off the
       right edge. Sizing the artwork to 186.1% of that band is what puts the
       wavy edge at x=1587 with the blueprint's 146.8px of travel. */
    .featured__waterfall {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 17.33%;              /* 332.8px at 1920 */
        overflow: hidden;
    }

    .featured__waterfall::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 186.1%;
        background: var(--svg-waterfall-right) no-repeat left top / 100% 100%;
    }

    .projects {
        position: static;
        display: flex;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        aspect-ratio: auto;
        gap: 3.15%;
        margin: 0;
    }

    .project { position: static; }

    /* The middle card is bigger and its top sits slightly higher, which is
       what drops its centre below the other two in the blueprint. */
    .project--first,
    .project--second,
    .project--third {
        grid-column: auto;
        justify-self: auto;
        margin-left: 0;
    }

    .project__name       { font-size: max(1.05rem, 8.28cqw); }
    .project__discipline { font-size: max(0.66rem, 3.47cqw); }

    /* Sized to hold the designer's write-ups. The blueprint's 3.67cqw fits
       only the shortest of them, and spilled all three past the scallop
       anywhere below 1280. The floor governs below about 1150, where the
       cards are at their smallest. */
    .project__blurb {
        display: block;
        margin: 0;
        font-size: max(0.52rem, 3.30cqw);
        font-weight: 400;
        line-height: 1.12;
        color: #000;
    }

    .project--first  { width: 22.30%; margin-top: 0.47vw; }
    .project--second { width: 27.46%; margin-top: 0; }
    .project--third  { width: 22.61%; margin-top: 0.34vw; }

    .featured__cta-mobile { display: none; }

    .featured__cta {
        display: block;
        position: absolute;
        left: 92.88%;
        top: 79.06%;                /* centre y=1389.2 in the taller section */
        width: 8.32%;               /* 160px at 1920 */
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    /*-------------------------------------------------------- 3. INTRO --*/
    .intro {
        display: grid;
        /* Capped: .intro is held to 120rem above that width, so a bare
           vw would keep widening the panel into the text column. */
        --specialty-w: min(13.04vw, 250.4px);   /* 250.4px at 1920 */
        grid-template-columns: 45.32% minmax(0, 1fr) var(--specialty-w);
        grid-template-areas: none;  /* drop the stacked mobile arrangement */
        align-items: center;
        gap: 0;
        padding: var(--divider-half) 0 0;
        min-height: calc(30.18vw + var(--divider-half));   /* 579.5px of content */
    }

    .intro__portrait,
    .intro__text,
    .specialty { grid-area: auto; }

    /* WaterfallLeft fills the left 45.3%, its wavy edge running down the
       middle of that band. The artwork's own edge stops mid-curve, so at the
       section's bottom the wave was ending in a flat cut. Running it half a
       footer's height past the section puts that cut behind the navy bar —
       .intro does not clip, and the footer paints after it. */
    .intro__waterfall {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: auto;
        bottom: calc(var(--footer-h) * -0.5);
        width: 45.32%;              /* 870px at 1920 */
        background: var(--svg-waterfall-left) no-repeat left top / 100% 100%;
    }

    .intro__waterfall::after { display: none; }

    /* Fitted to the blueprint's circle — centre (546.8, 1852.4), radius
       240.4, so left 306.4 / top 1612.0 / diameter 480.8. Measured off the
       circle's own edge: the photo's top corner is a blue-green mural, which
       a teal filter eats, and that had made it read 31px too small. */
    .intro__portrait {
        position: relative;
        z-index: 1;
        width: 55.26%;              /* 480.8px of the 870px band */
        margin: 0;
        justify-self: center;
        transform: translate(23.24%, -1.82%);
    }

    /* Desktop: the badge moves to the bottom-LEFT of the portrait. Its
       own blueprint position is x=205.9, y=1912.8 at 159.8 square, so the
       offsets are recomputed against the larger portrait. */
    .intro__cta {
        right: auto;
        top: auto;
        left: -20.90%;
        bottom: 4.20%;
        width: 33.24%;              /* 159.8px at 1920 */
    }


    .intro__text {
        padding-left: 2.125%;
        /* Y: the block is centred in the row and the blueprint sits it 8px
           higher. X: shifted so the block sits midway between the headshot's
           right edge (787.2) and the sidebar's left edge (1669.6), rather
           than hugging the photo. */
        transform: translate(15.34%, max(-0.417vw, -8px));
    }

    .intro__heading {
        margin: 0;
        text-align: left;
        font-size: 5.83vw;          /* 112px at 1920 */
        /* Pull the H's side bearing back so the heading's optical left edge
           lines up with the blurb underneath it, as it does in the blueprint. */
        margin-left: -0.42vw;
    }

    .intro__heading::after {
        margin-top: 0.078em;
        margin-left: 0.42vw;        /* undo the heading's optical pull-back */
    }

    /* Set to the same block as the heading above it: same left edge, and
       bounded by the same right edge. Set ragged right and
       unhyphenated: justifying a measure this narrow left visible gaps
       between words, and an inserted hyphen reads as forced in copy this
       short. The rest of the site's body text still hyphenates, as the
       blueprint sets it. The blueprint ran this
       copy 243px wider than the heading; this is the newer design. */
    .intro__blurb {
        text-align: left;
        width: 23.59vw;             /* the heading's own width at 1920 */
        margin-left: -0.4vw;        /* match the heading's optical pull-back */
        margin-top: 0.91em;
        font-size: max(0.7rem, 1.26vw);  /* 24.2px at 1920 — sized so the                                             three lines fit the block with room to spare */
        line-height: 1.3;
        hyphens: none;
    }

    .intro__blurb br { display: inline; }

    .specialty {
        display: grid;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin-top: 0;
        width: var(--specialty-w);
        margin-right: 0;
        align-content: center;
        justify-items: center;
        gap: 1.2vw;
        /* Pad by exactly the wavy edge (5.1% of BlueVertWave's width) so the
           contents centre on the solid navy. A bare percentage would have
           resolved against .intro, not the panel — which is what pushed the
           title so far right it looked clipped. */
        padding: 1.5vw 0 1.5vw calc(var(--specialty-w) * 0.051);
        background: var(--svg-vert-wave) no-repeat left top / 100% 100%;
    }

    .specialty::before { display: none; }

    .specialty__title {
        font-size: max(0.78rem, 1.15vw);
    }

    .specialty__list {
        flex-direction: column;
        justify-content: normal;
        width: 100%;
        padding: 0;
        gap: 1.67vw;                /* badge centres 156px apart at 1920 */
    }

    .specialty__list img {
        width: 6.46vw;              /* 124px at 1920 */
    }
}

/* The blueprint stops at 1920 — beyond it, hold the design rather than
   letting the vw-based type and spacing keep growing. */
@media (min-width: 120em) {
    .hero__orbit,
    .featured,
    .intro { max-width: 120rem; margin-inline: auto; }

    /* The cap holds the layout at the blueprint's width, but the backgrounds
       should still reach the window's edges — otherwise they stop short of
       them as soon as the window, or the zoom, is wider than 1920.

       --bleed is how far past the capped section each edge has to run. The
       artwork is the designer's wider re-cut of the same shape, sized so its
       wave falls exactly where the narrow one does at 1920 and its flat side
       carries off the edge, and anchored to the edge the wave is on so it
       cannot drift. Everything below only changes what is painted; the boxes
       that hold content are untouched. */
    :root { --bleed: calc((120rem - 100vw) / 2); }

    .featured::before,
    .intro::before {
        left: var(--bleed);
        right: var(--bleed);
    }

    /* The wave is at this artwork's right-hand edge, so the artwork is pinned
       right and the box grows to the left. */
    .intro__waterfall {
        left: var(--bleed);
        right: 54.68%;              /* the 45.32% band's own right edge */
        width: auto;
        /* The second layer is flat colour filling whatever the artwork does
           not reach, so the band cannot run out on a very wide window. It is
           zero-width until the artwork does run out. */
        background:
            var(--svg-waterfall-left-wide) no-repeat right top
                / calc(120rem * 0.89124) 100%,
            linear-gradient(var(--teal), var(--teal)) no-repeat left top
                / max(0px, calc(100% - 120rem * 0.89124 + 1px)) 100%;
    }

    /* This one's wave is at the artwork's left edge; the band it is clipped
       to grows to the right instead. */
    .featured__waterfall {
        left: 82.67%;               /* the 17.33% band's own left edge */
        right: var(--bleed);
        width: auto;
        background: linear-gradient(var(--teal), var(--teal)) no-repeat right top
                    / max(0px, calc(100% - 120rem * 0.63415 + 1px)) 100%;
    }

    .featured__waterfall::before {
        width: calc(120rem * 0.63415);
        background-image: var(--svg-waterfall-right-wide);
    }

    /* The panel itself keeps the blueprint's width so its title and badges
       stay put; the wave moves onto a pseudo-element that runs past it. */
    .specialty {
        isolation: isolate;
        background: none;
    }

    .specialty::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: var(--bleed);
        height: auto;
        transform: none;
        -webkit-mask: none;
                mask: none;
        background:
            var(--svg-vert-wave-wide) no-repeat left top
                / calc(var(--specialty-w) * 2.82694) 100%,
            linear-gradient(var(--navy), var(--navy)) no-repeat right top
                / max(0px, calc(100% - var(--specialty-w) * 2.82694 + 1px)) 100%;
    }
}