/* ============================================================
   ATUVERSE — loaded last on every page
   Headers: Arial Black (Archivo Black stands in on phones that do not have Arial Black)
   Body and everything else: Geist
   ============================================================ */

:root {
    --font-head: "Arial Black", "Archivo Black", "Arial Bold", Arial, sans-serif;
    --font-body: "Geist", Arial, sans-serif;
    --font-ui: "Geist", Arial, sans-serif;
    --ink: #1E1C1A;
    --accent: #C0522A;      /* burnt orange: hover on menu links and buttons */
    --ink-soft: #5A544D;
    --line: #D9D4CC;
    --header-h: clamp(64px, 7vw, 82px);
}

/* Headers in Arial Black. It only comes in one weight, so keep it at 400 (no fake bold) */
h1, h2, h3, h4, h5, h6,
.portfolio-item h2,
.inspirations-section h2,
.featured-section__title,
.project-description h3,
.bordered-box h2,
.education-left .degree,
.skills-container h2,
.skills-category h3,
.contact-cta-container h2,
.passions-container h2,
.passions-category h3,
.hero-slideshow__name,
.home-contact-text h2,
.sw-card__title,
.project-hero__title,
.project-bordered-box__title,
.mg-title,
.mg-lightbox-title,
.flipbook-section h2,
.sw-label {
    font-family: var(--font-head);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Labels, buttons and menu links in Geist Medium */
nav a,
.mobile-nav a,
.btn,
.see-more-btn,
.submit-btn,
label,
.social-name,
.home-social-name,
.featured-section__category,
.featured-section__index,
.project-nav-btn,
.sw-label,
.sw-view-all,
.sw-card__category,
.mg-category,
.swatch-name,
.page-counter,
.zoom-btn,
.lb-counter,
.hero-slideshow__tagline {
    font-weight: 500;
}

/* ── Header: diver on the left, atuverse logo in the middle ── */
header .logo.diver__canvas {
    width: auto;
    height: clamp(48px, 5.6vw, 72px);
    aspect-ratio: 30 / 50;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

header .site-name {
    height: clamp(22px, 2.5vw, 32px);
    width: auto;
}

/* Loader: the logo pulses instead of spinning */
#page-loader img.loader-logo {
    width: clamp(160px, 22vw, 260px);
    height: auto;
    animation: atuPulse 1.2s ease-in-out infinite;
}

@keyframes atuPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.97); }
}

/* ── Header: diver + logo together at top left, menu on the right ── */
header .site-name-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    margin-left: clamp(10px, 1.4vw, 18px);
    margin-right: auto;
    line-height: 0;
    text-decoration: none;
}

/* the galaxy mark always stays at top left */
header .site-mark {
    display: block;
    height: clamp(38px, 4.4vw, 52px);
    width: auto;
    flex-shrink: 0;
}

header .site-name {
    position: static;
    transform: none;
    display: block;
}

/* HOME: the logo spot stays empty until the giant name flies up into it */
header .site-name {
    transition: none;
}

body.atu-flying header .site-name {
    opacity: 0;
}

/* the flying copy of the giant name (made by js/atuverse.js) */
.atu-flyer {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1010;
    pointer-events: none;
    transform-origin: 0 0;
    will-change: transform;
}

.atu-flyer img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: block;
}

/* liquid chrome inside the outlined letters (js/atuverse.js), on while you hover over Bri */
.atu-flyer .atu-flyer__chrome {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    filter: drop-shadow(0 0 6px rgba(190, 215, 255, 0.35));
    /* only a soft band around the mouse shows the chrome */
    --cx: 50%;
    --lean: 0deg;
    -webkit-mask-image: linear-gradient(calc(90deg + var(--lean)), transparent calc(var(--cx) - 17%), #000 calc(var(--cx) - 7%), #000 calc(var(--cx) + 7%), transparent calc(var(--cx) + 17%));
            mask-image: linear-gradient(calc(90deg + var(--lean)), transparent calc(var(--cx) - 17%), #000 calc(var(--cx) - 7%), #000 calc(var(--cx) + 7%), transparent calc(var(--cx) + 17%));
}

.atu-flyer .atu-flyer__chrome svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

body.atu-chrome .atu-flyer .atu-flyer__chrome { opacity: 1; }

.atu-flyer .atu-flyer__fill {
    opacity: 0;
}

.atu-hero__word.is-hidden {
    visibility: hidden;
}

/* ============================================================
   HOME HERO
   ============================================================ */
.atu-hero {
    position: relative;
    height: calc(100svh - var(--header-h));
    min-height: 480px;
    overflow: hidden;
    /* no isolation here, so the 3D head can sit in front of the flying logo */
}

/* thin grid that fades out toward the edges */
.atu-hero__grid {
    position: absolute;
    inset: -40px;
    background-image:
        linear-gradient(to right, rgba(30, 28, 26, 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(30, 28, 26, 0.16) 1px, transparent 1px);
    background-size: clamp(56px, 6.5vw, 96px) clamp(56px, 6.5vw, 96px);
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 35%, transparent 100%);
            mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 35%, transparent 100%);
    transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
    z-index: 0;
}

/* the giant outlined name */
.atu-hero__name {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    transform: translate3d(var(--nx, 0px), calc(var(--ny, 0px) + var(--sy, 0px)), 0) scale(var(--ss, 1));
    opacity: var(--so, 1);
    will-change: transform, opacity;
}

.atu-hero__word {
    display: block;
    width: min(90vw, 1500px);
    height: auto;
    margin-top: -6%;
    animation: atuFloat 5.5s ease-in-out infinite;
}

@keyframes atuFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.2%); }
}

/* spot for the 3D character, standing in front of the name */
.atu-hero__me {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(56vw, 760px);
    height: 100%;
    transform: translateX(-50%);
    z-index: 1011;          /* in front of the outlined atuverse (1010), under the menus */
    pointer-events: none;
}

.atu-hero__me canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    /* hair fades out toward the bottom, no hard cut */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}

.atu-hero__me.is-ready canvas { opacity: 1; }

/* name tag that follows the mouse when you hover over her */
.atu-me-tag {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1020;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px 11px;
    background: #1E1C1A;
    color: #F3F1EC;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.atu-me-tag.is-on { opacity: 1; transform: none; }

.atu-me-tag strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.atu-me-tag span {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* text stays readable on top of her hair */
.atu-hero__intro,
.atu-hero__corner { z-index: 1012 !important; }

.atu-hero__intro {
    position: absolute;
    left: clamp(20px, 4vw, 50px);
    bottom: clamp(70px, 9vw, 120px);
    max-width: min(520px, 80vw);
    z-index: 3;
}

.atu-hero__hi {
    font-size: clamp(2rem, 4.4vw, 4rem);
    line-height: 1;
    color: #1E1C1A;
    margin: 0 0 14px;
}

.atu-hero__tagline {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.5;
    color: #1E1C1A;
    margin: 0;
    text-wrap: balance;
}

.atu-hero__corner {
    position: absolute;
    bottom: clamp(18px, 2.4vw, 30px);
    z-index: 3;
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);   /* burnt orange */
}

.atu-hero__corner--left  { left: clamp(20px, 4vw, 50px); }

.atu-hero__corner--right {
    right: clamp(20px, 4vw, 50px);
    text-align: right;
    text-decoration: none;
}

.atu-hero__corner--right span {
    display: inline-block;
    animation: atuNudge 1.6s ease-in-out infinite;
}

@keyframes atuNudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

@media (max-width: 760px) {
    .atu-hero__name { align-items: flex-start; padding-top: 18vh; }
    .atu-hero__word { width: 92vw; margin-top: 0; }
    .atu-hero__intro { bottom: 84px; }
    .atu-hero__corner--left { display: none; }
    .atu-hero__me { width: 74vw; top: 4%; bottom: auto; height: 66%; }
}

@media (prefers-reduced-motion: reduce) {
    .atu-hero__word,
    .atu-hero__corner--right span { animation: none; }
}


/* ── No more star in the background ── */
body::before {
    display: none;
}

/* ── Header: same setup as the last version (logo left, menu right, slim bar), but flat ── */
body {
    padding-top: var(--header-h);
}

header {
    height: var(--header-h);
    padding: 0 clamp(20px, 4vw, 50px);
    background-color: #F4F1EC;
    border-bottom: 1px solid var(--line);
}

header .site-name-link {
    margin-left: 0;
}

nav a {
    color: var(--ink);
}

nav a::after {
    background-color: var(--accent);
}

nav a:hover,
nav a:focus-visible,
.mobile-nav a:hover {
    color: var(--accent);
}

/* every button turns burnt orange on hover */
.btn-primary:hover,
.btn-secondary:hover,
.see-more-btn:hover,
.submit-btn:hover,
.contact-cta-container .btn:hover,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.submit-btn:focus-visible {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}

/* ── Footer: same setup as the last version, flat, black hover ── */
footer {
    background-color: #F4F1EC;
    border-top: 1px solid var(--line);
}

.footer-tagline,
.copyright {
    color: var(--ink-soft);
}

.footer-tagline {
    text-wrap: balance;
}

.social-links a {
    color: var(--ink);
    border-color: var(--line);
}

.social-links a:hover {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #FFFFFF;
}

/* ============================================================
   HOME — PROJECTS (numbered list on the left, motion on the right)
   Same setup as the last version, without the glass
   ============================================================ */
.works {
    padding: clamp(50px, 8vw, 110px) clamp(20px, 4vw, 50px) clamp(50px, 8vw, 120px);
    border-top: 1px solid var(--line);
}

.works__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(230px, 300px) 1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: start;
}

.works__index {
    position: sticky;
    top: calc(var(--header-h) + 32px);
}

.works__eyebrow {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 12px;
    line-height: 1.4;
}

.works__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.works__list li {
    font-size: 15px;
    line-height: 1.3;
    border-bottom: 1px solid var(--line);
}

.works__list a {
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 10px 10px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, padding 0.2s;
}

.works__no {
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    font-size: 13px;
}

.works__dash {
    flex-shrink: 0;
    white-space: pre;
}

.works__name {
    font-weight: 500;
}

.works__list a:hover {
    color: var(--ink);
}

.works__list a.is-active {
    color: #FFFFFF;
    background: var(--accent);     /* burnt orange for the project you are on */
    padding-left: 16px;
}

.works__all {
    display: inline-flex;
    gap: 6px;
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.works__feed {
    display: flex;
    flex-direction: column;
    gap: clamp(60px, 9vw, 130px);
    min-width: 0;
}

.work {
    scroll-margin-top: calc(var(--header-h) + 32px);
}

.work__head {
    max-width: 640px;
    margin-bottom: clamp(16px, 2vw, 22px);
}

.work__no {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    line-height: 1.4;
    margin-bottom: 6px;
}

.work__title {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(30px, 4.2vw, 56px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.work__title a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.35s ease;
}

.work__title a:hover {
    background-size: 100% 3px;
}

.work__cat {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    padding: 5px 10px;
    border: 1px solid var(--ink);
    margin-bottom: 12px;
}

.work__desc {
    color: var(--ink-soft);
    line-height: 1.6;
}

.work__more {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid currentColor;
}

/* the frame that holds the motion: plain, square corners */
.work__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #E9E4DC;
    isolation: isolate;
}

.work__video,
.reel {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.work__video {
    object-fit: cover;
}

.work__video--contain {
    object-fit: contain;
    background: var(--video-bg, #1E1C1A);
}

.reel--fade img,
.reel--flip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.reel--fade img {
    transition: opacity 1.1s ease;
}

.reel--fade img.is-on {
    opacity: 1;
    animation: reel-zoom 6s ease-out both;
}

.reel--flip img.is-on {
    opacity: 1;
}

.reel:not(.is-playing) img.is-on {
    animation-play-state: paused;
}

@keyframes reel-zoom {
    from { transform: scale(1.0); }
    to   { transform: scale(1.08); }
}

.reel--scroll {
    display: flex;
    align-items: center;
}

.reel__track {
    display: flex;
    gap: clamp(12px, 1.6vw, 20px);
    padding-left: clamp(12px, 1.6vw, 20px);
    height: 84%;
    width: max-content;
    animation: reel-slide 48s linear infinite;
    animation-play-state: paused;
}

.reel--scroll.is-playing .reel__track {
    animation-play-state: running;
}

.work__media:hover .reel__track {
    animation-duration: 90s;
}

.reel__track img {
    height: 100%;
    width: auto;
    border-radius: clamp(10px, 1.4vw, 18px); /* phone screen corners */
}

@keyframes reel-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* labels on the media: solid, square */
.work__view,
.work__badge {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 9px 12px;
    color: var(--ink);
    background: #F4F1EC;
}

.work__view {
    right: 16px;
    bottom: 16px;
    color: #FFFFFF;
    background: var(--ink);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s, transform 0.3s;
}

.work__view svg {
    width: 14px;
    height: 14px;
}

.work__media:hover .work__view,
.work__media:focus-visible .work__view {
    opacity: 1;
    transform: none;
}

.work__badge {
    left: 16px;
    top: 16px;
}

.work__badge i {
    font-size: 11px;
}

/* books: real pages turning by themselves */
.book {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.book__pages {
    transform-origin: center center;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: drop-shadow(0 18px 22px rgba(40, 28, 18, 0.3));
}

.book.is-ready .book__pages { opacity: 1; }

.book__page {
    overflow: hidden;
    background: #FFFFFF;
}

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

.book__page--spread-left img {
    width: 200%;
    max-width: 200%;
    object-position: left center;
}

.book__page--spread-right img {
    width: 200%;
    max-width: 200%;
    margin-left: -100%;
    object-position: right center;
}

.will-rise {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.will-rise.is-in {
    opacity: 1;
    transform: none;
}

/* tablet + phone: the list turns into a sliding row */
@media (max-width: 900px) {
    .works__inner { grid-template-columns: 1fr; }

    .works__index {
        position: relative;
        top: auto;
        min-width: 0;
    }

    .works__list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        border-top: 0;
        scrollbar-width: none;
    }

    .works__list::-webkit-scrollbar { display: none; }

    .works__list li { border-bottom: 0; }

    .works__list a {
        white-space: nowrap;
        border: 1px solid var(--line);
        padding: 8px 12px;
    }

    .works__list a.is-active { padding-left: 12px; }

    .works__dash { display: none; }

    .works__no { margin-right: 6px; }

    .work__view {
        opacity: 1;
        transform: none;
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    .work__media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    .reel--fade img.is-on,
    .reel__track { animation: none !important; }
}

/* Project titles: on hover the letters turn into outlines (like the stroke logo), no underline */
.work__title a {
    background-image: none;
    -webkit-text-stroke: 1.5px transparent;
    transition: color 0.25s ease, -webkit-text-stroke-color 0.25s ease;
}

.work__title a:hover,
.work__title a:focus-visible,
.work:has(.work__media:hover) .work__title a,
.work:has(.work__more:hover) .work__title a {
    color: transparent;
    -webkit-text-stroke-color: var(--ink);
}

/* ============================================================
   TEXT CARRIED OVER FROM THE LAST VERSION
   ============================================================ */

/* About page "Let's chat" box: the question is lighter, "Let's chat!" stays bold */
.contact-cta-container h2 {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.contact-cta-container h2 .lets-chat {
    font-family: var(--font-head);
    font-weight: 400;
}

/* award / published badges on gallery tiles */
.gallery-item .award-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: #F4F1EC;
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
}

.gallery-item .award-badge i {
    font-size: 12px;
}

/* gallery tiles: project name on hover, flat black wash */
.gallery-item {
    position: relative;
}

.gallery-item__name {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(30, 28, 26, 0.72);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gallery-item__name span {
    font-family: var(--font-head);
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    text-align: center;
    text-wrap: balance;
}

.gallery-item:hover .gallery-item__name,
.gallery-item:focus-visible .gallery-item__name {
    opacity: 1;
}

/* phones can't hover: the name sits in a strip along the bottom */
@media (hover: none) {
    .gallery-item__name {
        inset: auto 0 0 0;
        padding: 10px 12px;
        opacity: 1;
        justify-content: flex-start;
    }

    .gallery-item__name span {
        font-size: 15px;
        text-align: left;
    }
}

/* home: "Dive into some more of my work" band */
.atu-more {
    border-top: 1px solid var(--line);
    padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 50px);
}

.atu-more__inner {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
}

/* Bri surfing the wavy grid, to the right of the text */
.atu-more__surf {
    position: absolute;
    top: 50%;
    right: 0;
    width: 58%;
    height: clamp(380px, 42vw, 600px);
    transform: translateY(-50%);
    pointer-events: none;
}

.atu-more__surf canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    /* edges of the grid melt into the page */
    -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 45%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 72% 80% at 50% 45%, #000 62%, transparent 100%);
}

.atu-more__surf.is-ready canvas { opacity: 1; }

@media (max-width: 900px) {
    .atu-more__surf {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 380px;
        transform: none;
        margin-top: 20px;
    }
}

.atu-more__eyebrow,
.home-about__eyebrow {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 12px;
}

.atu-more__title {
    font-size: clamp(32px, 5.4vw, 72px);
    line-height: 1;
    margin: 0 0 16px;
    max-width: 14ch;
}

.atu-more__sub {
    color: var(--ink-soft);
    margin: 0 0 26px;
    max-width: 46ch;
}

/* home: About me */
.home-about {
    border-top: 1px solid var(--line);
    padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 50px);
}

.home-about__inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
}

.home-about__photos {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(10px, 1.4vw, 16px);
    height: clamp(360px, 40vw, 540px);
}

.home-about__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-about__photo--main {
    grid-row: 1 / 3;
    object-position: 62% center;
}

.home-about__photo--top {
    object-position: 48% 30%;
}

.home-about__title {
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.05;
    margin: 0 0 18px;
}

.home-about__text p:not(.home-about__eyebrow) {
    color: var(--ink-soft);
    margin-bottom: 16px;
    text-wrap: pretty;
}

.home-about__text .btn {
    margin-top: 10px;
}

@media (max-width: 760px) {
    .home-about__inner { grid-template-columns: 1fr; }
    .home-about__photos { height: clamp(300px, 90vw, 440px); }
}

/* no single hanging words */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li { text-wrap: pretty; }


/* contact form spam trap: off screen, people never see it */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* loading screen: hidden when clicking between pages, unless the page is slow */
.atu-returning #page-loader {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.atu-returning.atu-slow #page-loader:not(.fade-out) {
    opacity: 1;
    pointer-events: all;
}

/* atuverse star as the mouse pointer everywhere (the click point is its top-left tip) */
*,
*::before,
*::after {
    cursor: url("../images/atuverse-cursor.png?v=2") 1 1, auto !important;
    /* sharp on Retina screens: a double-size copy */
    cursor: -webkit-image-set(url("../images/atuverse-cursor.png?v=2") 1x, url("../images/atuverse-cursor@2x.png?v=2") 2x) 1 1, auto !important;
    cursor: image-set(url("../images/atuverse-cursor.png?v=2") 1x, url("../images/atuverse-cursor@2x.png?v=2") 2x) 1 1, auto !important;
}

/* typing boxes keep the normal text cursor so people can see where they type */
input[type="text"],
input[type="email"],
textarea {
    cursor: text !important;
}