/* ==========================================================
   HOMEPAGE LAYOUT ONLY
   Loaded only by index.html (body.home). styles.css is untouched,
   so every project page keeps its original design.
   Fonts, colors, borders, cursor and tooltips all come from styles.css.
   ========================================================== */

body.home {
    height: auto;
    --side: 25vw;                         /* left info column = 1/4 of the page (desktop) */
    --gap: 14px;                          /* space between tiles */
}

/* ---------- Project tiles: uniform portrait frames ---------- */

body.home .archive-container {
    margin: 0;
    overflow: visible;
}

body.home .archive-container .card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
}

body.home .archive-container .card > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Images that sat "floating" inside the frame keep that look,
   scaled proportionally to the new tile size */
body.home .archive-container .card:not(.full-card) img {
    width: auto;
    max-width: 86%;
    object-fit: contain;
}

/* Same relative sizes as the original px heights (out of a 450px card) */
body.home .archive-container .card .archive-adjust2  { height: 73%; }
body.home .archive-container .card .archive-adjust3  { height: 69%; }
body.home .archive-container .card .archive-adjust4  { height: 80%; }
body.home .archive-container .card .archive-adjust5  { height: 67%; }
body.home .archive-container .card .archive-adjust6  { height: 67%; }
body.home .archive-container .card .archive-adjust10 { height: 82%; }
body.home .archive-container .card .archive-adjust11 { height: 58%; }
body.home .archive-container .card .archive-adjust12 { height: 96%; }
body.home .archive-container .card:not(.full-card) .archive-adjust1 { height: 62%; }

/* Full-bleed covers (trace., Hear Here, Triennial, Cloister, Ocean) stay full-bleed */
body.home .archive-container .full-card a,
body.home .archive-container .full-card img,
body.home .archive-container .full-card video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* ---------- Desktop: fixed info column + 3-column index ---------- */

@media screen and (min-width: 1024px) {

    body.home .title-container {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--side);
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        overflow-y: auto;
        z-index: 10;
    }

    body.home .title-space {
        margin: 20px 0 0 30px;
        padding-bottom: 28px;
        width: calc(var(--side) - 55px);   /* lines end in line with the intro text */
        border-bottom: 1px solid white;
    }

    body.home .title-space .intro {
        /* fixed wrapping width, so the paragraph keeps its line breaks;
           rules.js then sizes the lines to the longest line of this paragraph */
        width: min(300px, calc(var(--side) - 55px));
        max-width: none;
    }

    body.home .small-title-container-main {
        justify-content: flex-start;
        margin: 14px 0 0 20px;
    }

    body.home .archive-container {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap);
        margin-left: var(--side);
        padding: 20px 25px 80px 0;
    }
}

/* Very wide screens: 4 columns so tiles don't get oversized */
@media screen and (min-width: 1800px) {
    body.home .archive-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------- Tablet: header on top, 2 columns ---------- */

@media screen and (min-width: 1024px) and (max-width: 1023px) {   /* (old in-between layout — no longer used) */
    body.home .archive-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
        padding: 40px 25px 80px;
    }
}

/* ---------- Mobile: header on top (original mobile header), 2 columns ---------- */

@media screen and (max-width: 1023px) {
    body.home .archive-container {
        width: auto;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 0;
        padding: 30px 12px 60px;
    }

    body.home .archive-container .card {
        padding: 0;
        width: 100%;
        height: auto;
    }

    body.home .archive-container .card:not(.full-card) img {
        height: auto;
        max-height: 82%;
        max-width: 82%;
    }
}

/* ---------- Site menu: Projects / About Me ---------- */

body.home .site-nav {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid white;
}

body.home .site-nav .nav-link {
    font-size: 25px;
    line-height: 1.3;
    text-decoration: none;
    opacity: 0.45;
    transition: opacity .3s;
    width: fit-content;
}

body.home .site-nav .nav-link:hover,
body.home .site-nav .nav-link.active {
    opacity: 1;
}

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

body.home .about-content {
    padding: 79px 25px 80px 0;   /* first line lines up with the intro text under the logo */
}

body.home .about-bio {
    font-size: 18px;             /* same size as the intro text on the left */
    max-width: 820px;
}

body.home .about-bio p + p {
    margin-top: 1.1em;
}

body.home .about-contact {
    list-style: none;
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid white;
    max-width: 820px;            /* same width as the text above */
    font-size: 18px;
    display: flex;               /* contact links in one row */
    flex-wrap: wrap;
    justify-content: flex-start; /* Email / Instagram / LinkedIn on the left */
    gap: 8px 28px;
}

body.home .about-contact .contact-previously {
    margin-left: auto;           /* "Previously @ Gensler, REC Design" aligned right */
}

body.home .about-content a {
    color: white;
}

@media screen and (min-width: 1024px) {
    body.home .about-content {
        margin-left: var(--side);
    }
}

@media screen and (max-width: 1023px) {
    body.home .about-content {
        padding: 40px 30px 80px;
    }
}

@media screen and (max-width: 1023px) {
    body.home .site-nav {
        margin-top: 18px;
        padding-top: 14px;
    }
    body.home .site-nav .nav-link {
        font-size: 20px;
    }
    body.home .about-content {
        padding: 30px 30px 60px;   /* same left edge as the intro text */
    }
    body.home .about-bio {
        font-size: 16px;
    }
    body.home .about-contact {
        font-size: 16px;
        margin-top: 30px;
        justify-content: flex-start;
    }
}

/* Arrow in front of the tab you're on */
body.home .site-nav .nav-link.active::before {
    content: "↳ ";
}

/* Narrow laptops: tighter icon spacing so the 1/4 column fits */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    body.home .small-title-container-main .tooltip {
        padding: 10px 5px;
    }
    body.home .small-title-container-main {
        margin-left: 25px;
    }
}

/* Contact icons pinned to the bottom-left corner (desktop) */
@media screen and (min-width: 1024px) {
    body.home .small-title-container-main {
        margin-top: auto;          /* pushes the icons to the bottom of the left column */
        margin-bottom: 30px;       /* room for the hover labels under the icons */
    }

    body.home .title-container {
        overflow: visible;         /* left column stays still; only the projects scroll */
    }
}

/* Services list under the menu */
body.home .services {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid white;
    font-size: 18px;             /* same size as the intro text */
    line-height: 1.4;
}

body.home .services ul {
    list-style: none;            /* custom bullet below, so text lines up with the column */
}

body.home .services-intro {
    margin-bottom: 4px;
}

body.home .services li {
    position: relative;
    padding-left: 16px;
}

body.home .services li::before {
    /* square bullet, the same size as the square dot on the "i" in the logo */
    content: "";
    position: absolute;
    left: 0;
    top: calc(0.7em - 2.2px);    /* centred on the line */
    width: 4.4px;
    height: 4.4px;
    background: white;
}

@media screen and (max-width: 1023px) {
    body.home .services {
        font-size: 18px;             /* the whole header is shown at 90% on phones, like the intro */
        margin-top: 14px;
        padding-top: 12px;
    }
}

/* About Me: contact row pinned to the bottom of the screen (desktop) */
@media screen and (min-width: 1024px) {
    body.home .about-contact {
        position: fixed;
        left: var(--side);
        bottom: 0;
        width: min(820px, calc(100vw - var(--side) - 25px));   /* same width as the text block */
        margin: 0;
        padding: 16px 0 30px;
        background: black;            /* text scrolling behind it stays hidden */
    }
    body.home .about-content {
        padding-bottom: 140px;        /* room so the last paragraph never hides behind the row */
    }
}

/* ---------- About Me: travel photo strip on the right ---------- */

body.home .travel-strip {
    overflow: hidden;
}

body.home .travel-track {
    display: flex;
    flex-direction: column;
    will-change: transform;           /* moved by travel.js */
}

body.home .travel-item {
    display: block;
    width: 100%;
    height: auto;                     /* photos keep their own proportions */
    margin-bottom: 14px;              /* spacing between photos (kept as margin so the loop is seamless) */
}

body.home .travel-placeholder {
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.home .travel-placeholder span {
    font-size: 14px;
    opacity: 0.5;
}

/* Desktop: text on the left, strip fills the rest of the width, full height */
@media screen and (min-width: 1024px) {
    body.home.about {
        --text-w: min(820px, calc(100vw - var(--side) - 25px - 40px - 220px));   /* leaves at least 220px for the strip */
    }
    body.home.about .about-bio {
        max-width: var(--text-w);
    }
    body.home.about .about-contact {
        width: var(--text-w);
    }
    body.home .travel-strip {
        position: fixed;
        top: 0;
        bottom: 0;
        left: calc(var(--side) + var(--text-w) + 40px);
        right: 25px;
        z-index: 5;
    }
}

/* Tablet / phone: strip sits under the text as a scrolling window */
@media screen and (max-width: 1023px) {
    body.home .travel-strip {
        height: 520px;
        margin: 0 30px 60px;
    }
}

/* About Me (desktop): the page itself never moves — no scrolling, no trackpad bounce.
   Scrolling only steers the travel photo strip. */
@media screen and (min-width: 1024px) {
    html:has(body.home.about),
    body.home.about {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* ---------- Goldfish dot animation: bottom-left of the left column (desktop only) ---------- */
body.home .fish-dots {
    display: none;
}

@media screen and (min-width: 1024px) {
    body.home .fish-dots {
        display: block;
        margin: auto 0 30px 30px;      /* pushed to the bottom of the column */
        width: calc(var(--side) - 50px);
        flex-shrink: 1;
        min-height: 0;
    }
    body.home .fish-dots video {
        display: block;
        width: 100%;
        height: auto;
        max-height: 34vh;
        object-fit: contain;
        object-position: left bottom;
        mix-blend-mode: screen;        /* black of the video melts into the page */
    }
    body.home .fish-dots {
        position: relative;            /* for the greeting label */
    }
}

/* very short screens: no room for it */
@media screen and (min-width: 1024px) and (max-height: 720px) {
    body.home .fish-dots { display: none; }
}

/* a random greeting ("hello", "hi", "hey", "um...") typed above the fish on hover */
body.home .fish-hello {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    white-space: nowrap;
    pointer-events: none;
    display: none;
}

body.home .fish-hello.is-visible {
    display: block;
}

/* blinking typing cursor, same as the gallery loading screen */
body.home .fish-hello .caret {
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: white;
    animation: fish-caret-blink 1s steps(1) infinite;
}

@keyframes fish-caret-blink {
    50% { opacity: 0; }
}

/* not enough height under the list: hide the fish rather than let it fall off the screen */
body.home .fish-dots.no-room {
    visibility: hidden;
}

/* ==========================================================
   PHONE LAYOUT (768px wide and below)
   Desktop is untouched. Everything here only applies on phones.
   ========================================================== */
@media screen and (max-width: 1023px) {

    /* page is one column; the left-column pieces are laid out in this order:
       header → projects / about text → travel photos → goldfish */
    body.home:not(.gallery-page) {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    body.home .title-container {
        display: contents;
    }

    /* ---- header ---- */
    body.home .title-space {
        order: 0;
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 0 20px;
        padding: 22px 0 0;
        border-bottom: none;
    }
    body.home .title-space .logo-heading { order: 0; margin: 0 0 16px; }
    body.home .title-space .site-nav     { order: 1; }
    body.home .title-space .intro        { order: 2; }
    body.home .title-space .services     { order: 3; }

    body.home .site-logo {
        height: 58px;
        margin: -14px 0 -15px -17px;          /* same trim as desktop, scaled to the smaller logo */
    }

    /* menu on one line, between two lines */
    body.home .site-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 20px;
        margin: 0;
        padding: 12px 0;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
    }
    body.home .site-nav .nav-link {
        font-size: 19px;
    }

    body.home .title-space .intro {
        width: auto;
        max-width: none;
        margin: 16px 0 0;
        font-size: 17px;
    }

    /* services: two columns to keep the header short */
    body.home .services {
        margin-top: 18px;
        padding: 14px 0 18px;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        font-size: 15px;
        line-height: 1.5;
    }
    body.home .services ul {
        columns: 2;
        column-gap: 16px;
        margin-top: 4px;
    }
    body.home .services li {
        break-inside: avoid;
        padding-left: 13px;
    }
    body.home .services li::before {
        width: 3.6px;                          /* matches the dot on the "i" of the smaller logo */
        height: 3.6px;
        top: calc(0.75em - 1.8px);
    }

    /* ---- projects grid ---- */
    body.home .archive-container {
        order: 1;
        padding: 20px 20px 40px;
        gap: 12px;
    }

    /* ---- About Me ---- */
    body.home .about-content {
        order: 1;
        padding: 24px 20px 0;
    }
    body.home .about-bio {
        font-size: 16px;
        max-width: none;
    }
    body.home .about-contact {
        position: static;
        width: auto;
        margin-top: 28px;
        padding: 14px 0 0;
        font-size: 16px;
        gap: 6px 22px;
        background: none;
    }
    body.home .about-contact .contact-previously {
        margin-left: 0;                        /* on its own line, aligned left */
        width: 100%;
    }

    /* travel photos: a sideways strip that keeps moving (travel.js) */
    body.home .travel-strip {
        order: 2;
        position: static;
        height: auto;
        margin: 28px 0 10px;
    }
    body.home .travel-track {
        flex-direction: row;
        width: max-content;
    }
    body.home .travel-item {
        width: auto;
        height: 190px;
        margin: 0 10px 0 0;
    }

    /* ---- goldfish: at the bottom of the page; tap it for a greeting ---- */
    body.home .fish-dots {
        order: 3;
        display: block;
        position: relative;
        margin: 20px 20px 40px;
        width: auto;
        max-width: 420px;
    }
    body.home .fish-dots video {
        display: block;
        width: 100%;
        height: auto;
        mix-blend-mode: screen;
    }
    body.home .fish-hello {
        font-size: 15px;
    }
}

/* ---------- Phone adjustments (desktop unaffected) ---------- */
@media screen and (max-width: 1023px) {

    /* 1. no goldfish on phones */
    body.home .fish-dots {
        display: none !important;
    }

    /* 2. no "This website includes..." list on phones (homepage and About Me) */
    body.home .services {
        display: none !important;
    }

    /* 3. travel photos sit at the very bottom of the About Me page */
    body.home.about .travel-strip {
        order: 9;
        margin: 32px 0 40px;
        overflow: hidden;
        max-width: 100vw;
    }

    /* 4. footer: one left-aligned column, divider above */
    body.home .about-contact {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: baseline;
        gap: 10px 22px;
        margin: 28px 0 0;
        padding: 16px 0 0;
        border-top: 1px solid white;
        width: auto;
        max-width: 100%;
    }
    body.home .about-contact li {
        flex: 0 0 auto;
    }
    body.home .about-contact .contact-previously {
        flex: 1 0 100%;            /* its own line, under the social links */
        margin-left: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* nothing wider than the screen */
    html, body.home {
        overflow-x: hidden;
        max-width: 100%;
    }
    body.home img,
    body.home video {
        max-width: 100%;
    }
    body.home .travel-item {
        max-width: none;           /* photos in the moving strip keep their shape */
    }
}

/* Phones: logo and menu share the top row; line underneath; intro below */
@media screen and (max-width: 1023px) {
    body.home .title-space {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 14px;
    }
    body.home .title-space .logo-heading {
        margin: 0;
        flex: 0 0 auto;
    }
    body.home .title-space .site-logo {
        margin-right: -16px;      /* the logo file has empty space on its right; trim it so the gap looks even */
    }
    body.home .title-space .site-nav {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        gap: 12px;
        margin: 0;
        padding: 0;
        border: none;
    }
    body.home .site-nav .nav-link {
        font-size: 14px;
        white-space: nowrap;
    }
    body.home .title-space .intro {
        flex: 1 0 100%;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid white;
    }
}

/* narrower phones: slightly tighter so the row still fits */
@media screen and (max-width: 379px) {
    body.home .title-space { column-gap: 10px; }
    body.home .title-space .site-nav { gap: 8px; }
    body.home .site-nav .nav-link { font-size: 12.5px; }
    body.home .title-space .site-logo { height: 50px; margin: -12px -14px -13px -15px; }
}

/* Phones, About Me: text → photo carousel → footer (line, social links, "Previously @ …") */
@media screen and (max-width: 1023px) {
    body.home.about .about-content {
        display: contents;          /* lets the footer sit after the photos */
    }
    body.home.about .about-bio {
        order: 1;
        margin: 24px 20px 0;
    }
    body.home.about .travel-strip {
        order: 9;
        margin: 32px 0 0;
    }
    body.home.about .about-contact {
        order: 10;
        margin: 28px 20px 40px;
    }
}

/* Phones: logo top-left, menu pushed to the top-right on the same line */
@media screen and (max-width: 1023px) {
    body.home .title-space .site-nav {
        margin-left: auto;
        justify-content: flex-end;
    }
}

/* Phones: whole footer on one line (Email · Instagram · LinkedIn · Previously @ Gensler, REC Design) */
@media screen and (max-width: 1023px) {
    body.home .about-contact {
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: 0 0.9em;
        font-size: min(16px, calc((100vw - 40px) / 30.5));   /* scales to fit the screen width */
    }
    body.home .about-contact .contact-previously {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }
}

/* Phones: menu tabs the same size as the intro text */
@media screen and (max-width: 1023px) {
    body.home .site-nav .nav-link {
        font-size: 17px;              /* = .title-space .intro on phones */
    }
    body.home .title-space .site-nav {
        gap: 12px;
    }
}

/* very small phones: intro and menu both a little smaller (still the same size) so the menu clears the logo */
@media screen and (max-width: 373px) {
    body.home .title-space .intro,
    body.home .site-nav .nav-link {
        font-size: 14px;
    }
    body.home .title-space {
        column-gap: 8px;
    }
    body.home .title-space .site-nav {
        gap: 8px;
    }
}

/* smallest phones (e.g. 320px): one more step down, still matching */
@media screen and (max-width: 339px) {
    body.home .title-space .intro,
    body.home .site-nav .nav-link {
        font-size: 13px;
    }
}

/* Phones: homepage projects in one column */
@media screen and (max-width: 1023px) {
    body.home .archive-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Phones & touch screens: no hover effects (iPhones can't hover) */
@media screen and (max-width: 1023px), (hover: none) {
    body.home .coupontooltip,
    body.home .cursor-white {
        display: none !important;     /* no floating project-name label, no custom cursor */
    }
}

/* Phones: social links on the left, "Previously @ …" pushed to the right, same line */
@media screen and (max-width: 1023px) {
    body.home .about-contact .contact-previously {
        margin-left: auto;
    }
}

/* Homepage grid is only ever 1 column (phone layout, below 1024px) or 3 columns (desktop layout) */
@media screen and (min-width: 1024px) {
    body.home .archive-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Phone layout: logo keeps its true proportions (never squeezed), same size as on project pages */
@media screen and (max-width: 1023px) {
    body.home .title-space .site-logo {
        max-width: none;
        height: 50px;
        width: auto;
        margin: -12px -14px -13px -15px;
    }
}

/* Phones: logo + menu + line stay pinned to the top while scrolling (homepage + About) */
@media screen and (max-width: 1023px) {
    body.home .title-space .logo-heading {
        position: fixed;
        top: 22px;
        left: 20px;
        margin: 0;
        z-index: 100002;
    }
    body.home .title-space .site-nav {
        position: fixed;
        top: 43.05px;                    /* centred on the logo, same as the project pages */
        transform: translateY(-50%);
        right: 20px;
        z-index: 100002;
    }
    /* the pinned line replaces the intro's own top line (otherwise two lines show when the page bounces/scrolls) */
    body.home .title-space .intro { border-top: none !important; }
    /* keep the intro where it was (under the pinned bar) */
    body.home .title-space { padding-top: 65px; }
    /* black bar behind them */
    body.home .title-space::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 81px;               /* ends with the line */
        background: #000;
        z-index: 100001;
    }
    /* the line under the menu */
    body.home .title-space::after {
        content: '';
        position: fixed;
        top: 80px; left: 20px; right: 20px;
        height: 1px;
        background: #fff;
        z-index: 100002;
    }
}

/* About page intro: "A graphic designer…" on desktop, "I'm a graphic designer…" on phones */
.intro .intro-mob { display: none; }
@media screen and (max-width: 1023px) {
    .intro .intro-desk { display: none; }
    .intro .intro-mob { display: inline; }
}

/* Homepage (desktop only): contact row at the very bottom, under the projects — same look as the About page */
body.home .home-footer { display: none; }
@media screen and (min-width: 1024px) {
    body.home .archive-container { padding-bottom: 0; }
    body.home .home-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 28px;
        list-style: none;
        margin: 0 25px 0 var(--side);   /* text sits the same distance below the projects as it does below the line on the About page */
        padding: 16px 0 30px;
        font-size: 18px;
    }
    body.home .home-footer a { color: white; }
    body.home .home-footer .contact-previously { margin-left: auto; }
}

/* ==========================================================
   About Me: "Leave me a note!" box, just above the contact row
   ========================================================== */
body.home .about-note {
    position: relative;
    font-size: 18px;
}
body.home .about-note-box {
    position: relative;
    display: block;
    border: 1px solid white;
}
body.home .about-note textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 96px;
    padding: 12px 14px;
    background: transparent;
    border: 0;
    outline: none;
    resize: none;
    color: white;
    caret-color: white;
    font: inherit;
    line-height: 1.3;
}
/* "Leave me a note!" with a blinking typing cursor, shown until someone starts typing */
body.home .about-note-hint {
    position: absolute;
    top: 12px;
    left: 14px;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
}
body.home .about-note textarea:not(:placeholder-shown) + .about-note-hint { display: none; }
body.home .about-note textarea:focus + .about-note-hint .about-note-caret { display: none; }
body.home .about-note-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -0.15em;
    background: white;
    animation: note-caret-blink 1s steps(1) infinite;
}
@keyframes note-caret-blink { 50% { opacity: 0; } }
body.home .about-note-send {
    position: absolute;
    right: 14px;
    bottom: 10px;
    background: none;
    border: 0;
    padding: 0;
    color: white;
    font: inherit;
    cursor: pointer;
}
body.home .about-note-send:hover { text-decoration: underline; }

/* desktop: sits just above the pinned contact row, same width */
@media screen and (min-width: 1024px) {
    body.home.about .about-note {
        position: fixed;
        left: var(--side);
        width: var(--text-w);
        bottom: 92px;
    }
}
/* short desktop windows: hide it rather than cover the text */
@media screen and (min-width: 1024px) and (max-height: 640px) {
    body.home.about .about-note { display: none; }
}
/* phones: after the photos, right above the contact row */
@media screen and (max-width: 1023px) {
    body.home.about .about-note {
        order: 10;
        margin: 32px 20px 0;
        font-size: 16px;
    }
}
/* little "sent, thank you" message next to Send */
body.home .about-note-status {
    position: absolute;
    left: 14px;
    bottom: 10px;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
body.home .about-note-send:disabled { opacity: 0.5; cursor: default; }
body.home .about-note textarea { padding-bottom: 38px; }   /* room for Send + status under the text */

/* About Me: no line above the contact row any more (the note box sits there);
   contact text sits 16px under the note box, like the homepage footer under the projects */
body.home.about .about-contact { border-top: none; }
@media screen and (min-width: 1024px) {
    body.home.about .about-note { bottom: 67px; }
}
@media screen and (max-width: 1023px) {
    body.home.about .about-contact { margin-top: 0; padding-top: 16px; }
}
/* keep the note box's bottom line visible above the pinned contact row */
@media screen and (min-width: 1024px) {
    body.home.about .about-note { z-index: 2; }
}

/* Air Company cover: looping video of the website, fits the width of its square */
body.home .archive-container .card video.air-cover {
    display: block;
    width: 95%;
    height: auto;
    margin: 0 auto;
}

/* The Analects of Confucius cover: 5% larger than the other floating covers, still centred */
body.home .archive-container .card img.analects-cover {
    width: 90.3%;          /* was 86% */
    max-width: none;
    height: auto;
}

/* Wayfinding — Providence Ferry Terminal cover: 5% larger, still centred */
body.home .archive-container .card img.wayfinding-cover { height: 84%; }   /* was 80% */

/* An Interview with Nancy Skolos cover: 3% larger, still centred */
body.home .archive-container .card img.nancy-cover { width: 88.6%; max-width: none; height: auto; }   /* was 86% wide */