* {
    box-sizing: border-box;
}

:root {
    --paper: #f4efe7;

    --ink: #171615;

    --muted: #71695f;

    --line: #cfc6ba;

    --dark: #181716;

    --dark-muted: #aaa096;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--paper);

    color: var(--ink);

    font-family: 'DM Sans', Arial, sans-serif;

    font-weight: 300;
}

body.menu-open {
    overflow: hidden;
}

img,
video {
    display: block;

    max-width: 100%;
}

button {
    font: inherit;
}

a {
    color: inherit;
}

/* =====================================================
   GRAIN
===================================================== */

.grain {
    position: fixed;

    z-index: 200;

    inset: 0;

    pointer-events: none;

    opacity: 0.035;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* =====================================================
   HEADER
===================================================== */

header {
    position: fixed;

    z-index: 100;

    top: 0;
    left: 0;
    right: 0;

    height: 78px;

    padding: 0 5vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    /*
        The header remains visible over the hero,
        but does not blend into every section.
    */
    color: var(--ink);

    mix-blend-mode: normal;

    pointer-events: none;
}

header > * {
    pointer-events: auto;
}

/*
    Added by JavaScript when the header is
    over a dark/image section.
*/
header.light-nav {
    color: white;
}

.wordmark {
    color: inherit;

    font-family: 'Cormorant Garamond', serif;

    font-size: 25px;

    letter-spacing: 0.14em;

    text-decoration: none;
}

.menu {
    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    display: grid;

    place-content: center;

    gap: 6px;

    cursor: pointer;
}

.menu i {
    display: block;

    width: 23px;
    height: 1px;

    background: currentColor;
}

/* =====================================================
   DRAWER
===================================================== */

.drawer {
    position: fixed;

    z-index: 150;

    inset: 0;

    padding: 10vw;

    background: var(--dark);

    color: var(--paper);

    display: flex;

    flex-direction: column;

    justify-content: center;

    transform: translateY(-100%);

    transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}

.drawer.open {
    transform: translateY(0);
}

.drawer a {
    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(55px, 8vw, 100px);

    line-height: 0.88;

    text-decoration: none;

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

.drawer a:hover {
    transform: translateX(14px);
}

.drawer p {
    position: absolute;

    left: 10vw;
    bottom: 35px;

    margin: 0;

    color: var(--dark-muted);

    font-size: 9px;

    letter-spacing: 0.2em;
}

.close {
    position: absolute;

    top: 22px;
    right: 5vw;

    width: 44px;
    height: 44px;

    padding: 0;
    margin: 0;

    border: 0;
    outline: none;

    background: transparent;

    color: var(--paper);

    display: grid;
    place-items: center;

    cursor: pointer;

    z-index: 151;

    appearance: none;
    -webkit-appearance: none;
}

.close span {
    display: block;

    width: 30px;
    height: 30px;

    font-family: Arial, sans-serif;
    font-size: 34px;
    font-weight: 200;
    line-height: 27px;
    text-align: center;

    color: var(--paper);

    transform: translateY(-1px);

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

.close:hover span {
    transform: translateY(-1px) scale(1.08);
    opacity: 0.75;
}

.close:focus-visible {
    outline: 1px solid rgba(244, 239, 231, 0.55);
    outline-offset: 3px;
}

/* =====================================================
   GENERAL
===================================================== */

.section-pad {
    padding: 120px 7vw;
}

.eyebrow {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 0.23em;

    text-transform: uppercase;
}

.section-label {
    display: flex;

    gap: 13px;

    align-items: center;

    margin-bottom: 55px;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: 0.2em;
}

.section-label span:first-child {
    opacity: 0.65;
}

.large {
    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: 19px;

    line-height: 1.65;
}

.micro {
    margin-top: 28px;

    color: var(--muted);

    font-size: 9px;

    line-height: 1.7;

    letter-spacing: 0.13em;
}

/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    width: 100%;
    height: 100svh;

    min-height: 650px;

    overflow: hidden;

    background: #151413;
}

.hero-image {
    position: absolute;

    inset: 0;
}

.hero-image::after {
    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.02) 40%,
        rgba(0, 0, 0, 0.62) 100%
    );
}

.hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
        The source is vertical.
        Position slightly toward the upper-middle
        so the face remains prominent.
    */

    object-position: center 32%;

    transform: scale(1.025);

    animation: heroBreath 14s ease-in-out infinite alternate;
}

@keyframes heroBreath {
    from {
        transform: scale(1.025);
    }

    to {
        transform: scale(1.055);
    }
}

.hero-overlay {
    position: absolute;

    z-index: 2;

    inset: 0;

    color: white;
}

.hero-title {
    position: absolute;

    left: 7vw;

    bottom: 14vh;
}

.hero-title h1 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(100px, 16vw, 250px);

    line-height: 0.68;

    letter-spacing: -0.03em;

    font-weight: 300;
}

.hero-title p {
    margin: 34px 0 0;

    font-size: 11px;

    letter-spacing: 0.32em;

    font-weight: 400;
}

.hero-index {
    position: absolute;

    right: 7vw;
    bottom: 36px;

    margin: 0;

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

    font-size: 9px;

    letter-spacing: 0.15em;
}

.hero-explore {
    position: absolute;

    left: 7vw;
    bottom: 38px;

    color: white;

    font-size: 9px;

    letter-spacing: 0.2em;

    text-decoration: none;
}

.hero-explore span {
    margin-left: 14px;

    font-size: 15px;
}

/* =====================================================
   PROFILE
===================================================== */

.profile {
    background: #f4efe7;
    color: #171615;
}

.profile-image {
    width: 100%;
    height: 370px;
    overflow: hidden;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 45%;
    display: block;
}
/* =====================================================
   PROFILE INTRO
===================================================== */

.profile-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 8vw;

    margin-top: 7rem;
    margin-bottom: 7rem;
}

.profile-heading h2 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 6.5vw, 7.5rem);
    font-weight: 400;

    line-height: 0.88;
    letter-spacing: -0.035em;
}

.profile-heading h2 em {
    font-style: italic;
}

.profile-copy {
    align-self: end;
    max-width: 620px;
}

.profile-copy .large {
    margin: 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 300;

    line-height: 1.75;
    letter-spacing: -0.01em;
}

.profile-copy .micro {
    margin-top: 2.2rem;
}

/* =====================================================
   MODEL DETAILS
===================================================== */

.profile-details {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid rgba(23, 22, 21, 0.22);
    border-bottom: 1px solid rgba(23, 22, 21, 0.22);
}

.profile-detail {
    min-height: 125px;

    padding: 1.8rem 1.5rem;

    border-right: 1px solid rgba(23, 22, 21, 0.22);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.profile-detail:first-child {
    padding-left: 0;
}

.profile-detail:last-child {
    border-right: none;
}

.profile-detail span {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    opacity: 0.55;
}

.profile-detail strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.65rem;
    font-weight: 400;

    line-height: 1;
}

/* =====================================================
   AVAILABILITY
===================================================== */

.profile-availability {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 8vw;

    margin-top: 6rem;
    padding-bottom: 2rem;
}

.availability-heading > span {
    display: block;

    margin-bottom: 2rem;

    font-family: 'DM Sans', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    opacity: 0.55;
}

.availability-heading h3 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.2rem, 5vw, 5.5rem);
    font-weight: 400;

    line-height: 0.9;
    letter-spacing: -0.03em;
}

.availability-heading h3 em {
    font-style: italic;
}

/* =====================================================
   AVAILABILITY LIST
===================================================== */

.availability-list {
    border-top: 1px solid rgba(23, 22, 21, 0.22);
}

.availability-item {
    min-height: 72px;

    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;

    border-bottom: 1px solid rgba(23, 22, 21, 0.22);
}

.availability-item span {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    opacity: 0.55;
}

.availability-item strong {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;

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

/* =====================================================
   PROFILE — TABLET
===================================================== */

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 4rem;

        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    .profile-copy {
        max-width: 680px;
    }

    .profile-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-detail {
        border-bottom: 1px solid rgba(23, 22, 21, 0.22);
    }

    .profile-detail:nth-child(2) {
        border-right: none;
    }

    .profile-detail:last-child {
        grid-column: span 2;
        border-right: none;
    }

    .profile-availability {
        grid-template-columns: 1fr;
        gap: 4rem;

        margin-top: 5rem;
    }
}

/* =====================================================
   PROFILE — MOBILE
===================================================== */

@media (max-width: 600px) {
    .profile-grid {
        margin-top: 4rem;
        margin-bottom: 4rem;
        gap: 3rem;
    }

    .profile-heading h2 {
        font-size: clamp(3.5rem, 14vw, 5rem);
    }

    .profile-copy .large {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .profile-details {
        grid-template-columns: 1fr 1fr;
    }

    .profile-detail {
        min-height: 105px;
        padding: 1.4rem 1rem;
    }

    .profile-detail:first-child {
        padding-left: 1rem;
    }

    .profile-detail strong {
        font-size: 1.35rem;
    }

    .profile-detail:last-child {
        grid-column: span 2;
    }

    .profile-availability {
        margin-top: 4rem;
        gap: 3rem;
    }

    .availability-heading h3 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .availability-item {
        grid-template-columns: 105px 1fr;
        min-height: 78px;
    }

    .availability-item strong {
        font-size: 0.62rem;
        line-height: 1.4;
    }
}
/* =====================================================
   QUOTE
===================================================== */

.quote-section {
    position: relative;
    min-height: 88vh;

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

    background: #171615;
    color: #f4efe7;

    overflow: hidden;
}

.quote-inner {
    position: relative;

    width: min(1400px, 88vw);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* -------------------------
   QUOTE MARKS
------------------------- */

.quote-mark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    line-height: 0.7;

    color: rgba(244, 239, 231, 0.42);

    pointer-events: none;
}

.quote-mark-open {
    font-size: 5rem;
    height: 4rem;

    margin-bottom: 2.2rem;
}

.quote-mark-close {
    align-self: flex-end;

    margin-right: 4.5%;

    font-size: 5rem;
    height: 3.2rem;

    margin-top: 0.4rem;

    transform: translateY(-0.1rem);
}

.quote-section {
    position: relative;
}

.quote-inner {
    position: relative;
}

.quote-mark {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.quote-mark.close-quote {
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.quote-inner {
    position: relative;
    padding-top: 90px;
    padding-bottom: 110px;
}

.quote-mark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-size: 72px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
}

.open-quote {
    top: 35px;
}

.close-quote {
    bottom: 70px;
}

.quote-credit {
    text-align: center;
}
/* -------------------------
   QUOTE TEXT
------------------------- */

.quote-inner blockquote {
    max-width: 1320px;
    margin: 0;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.2rem, 5.15vw, 6.3rem);
    font-weight: 400;

    line-height: 0.94;
    letter-spacing: -0.025em;

    color: #f4efe7;
}

/* -------------------------
   CREDIT
------------------------- */

.quote-credit {
    margin: 1.1rem 0 0;

    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;

    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: rgba(244, 239, 231, 0.62);
}

/* -------------------------
   NEXT LINK
------------------------- */

.quote-next {
    position: absolute;

    left: 0;
    bottom: -7rem;

    display: inline-flex;
    align-items: center;
    gap: 0.8rem;

    font-family: 'DM Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #f4efe7;
    text-decoration: none;

    transition:
        opacity 0.3s ease,
        gap 0.3s ease;
}

.quote-next span {
    font-size: 1rem;
    line-height: 1;
}

.quote-next:hover {
    opacity: 0.65;
    gap: 1.2rem;
}

/* =====================================================
   QUOTE — TABLET
===================================================== */

@media (max-width: 900px) {
    .quote-inner {
        width: 86vw;
    }

    .quote-inner blockquote {
        font-size: clamp(2.8rem, 7vw, 4.8rem);
        line-height: 0.97;
    }

    .quote-mark-open {
        margin-bottom: 1.8rem;
    }

    .quote-next {
        bottom: -5rem;
    }
}

/* =====================================================
   QUOTE — MOBILE
===================================================== */

@media (max-width: 600px) {
    .quote-section {
        min-height: 100svh;
    }

    .quote-inner {
        width: 86vw;
    }

    .quote-mark-open {
        font-size: 4rem;
        height: 3rem;
        margin-bottom: 1.5rem;
    }

    .quote-inner blockquote {
        font-size: clamp(2.35rem, 10vw, 3.5rem);
        line-height: 0.98;
        letter-spacing: -0.015em;
    }

    .quote-mark-close {
        margin-right: 3%;

        font-size: 4rem;
        height: 2.8rem;
        margin-top: 0.5rem;
    }

    .quote-credit {
        margin-top: 0.8rem;
        font-size: 0.6rem;
    }

    .quote-next {
        position: relative;
        left: auto;
        bottom: auto;

        margin-top: 4rem;
    }
}

/* =====================================================
   SELECTED WORK
===================================================== */

.work {
    position: relative;

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

    overflow: hidden;

    /*
        Keeps the large editorial heading safely
        below the fixed navigation.
    */
}

/* =====================================================
   WORK HEADER
===================================================== */

.work-header {
    padding-top: 120px;
    padding-bottom: 55px;

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

.work-header h2 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(82px, 9.5vw, 135px);

    font-weight: 400;

    line-height: 0.82;
}

.section-note {
    margin: 0;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;

    letter-spacing: 0.08em;

    text-align: right;
}

/* =====================================================
   MOVING LOOKBOOK
===================================================== */

.lookbook-window {
    width: 100%;

    overflow: hidden;

    /*
        No desktop padding.
        The moving strip can reach the viewport edge.
    */
    padding-left: 0;

    margin: 0;
}

.lookbook-track {
    display: flex;

    gap: 24px;

    width: max-content;

    margin: 0;

    padding: 0;

    will-change: transform;

    transform: translate3d(0, 0, 0);

    transition: transform 1.35s cubic-bezier(0.77, 0, 0.18, 1);
}

.look {
    /*
        Two complete portrait frames across desktop.
    */
    flex: 0 0 calc((100vw - 24px) / 2);

    width: calc((100vw - 24px) / 2);

    max-width: none;

    min-width: 0;

    margin: 0;
}

.look-image {
    width: 100%;

    /*
        Deliberately portrait so the vertical
        photographs retain their composition.
    */
    aspect-ratio: 3 / 4;

    overflow: hidden;

    background: #ddd6ce;
}

.look-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 1.5s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.look:hover .look-image img {
    transform: scale(1.018);
}

.look-meta {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-top: 13px;

    color: var(--muted);

    font-size: 8px;

    letter-spacing: 0.15em;
}

.look-meta span:first-child {
    opacity: 0.6;
}

.lookbook-bottom {
    display: flex;

    justify-content: space-between;

    padding-top: 30px;

    padding-bottom: 110px;
}

.lookbook-bottom p {
    margin: 0;

    color: var(--muted);

    font-size: 8px;

    letter-spacing: 0.16em;
}

/* =====================================================
   MOTION
===================================================== */

.motion {
    background: var(--dark);

    color: var(--paper);
}

.dark-label {
    color: var(--dark-muted);
}

.motion-head {
    padding-bottom: 70px;
}

.motion-title {
    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 8vw;
}

.motion-title h2 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(75px, 10vw, 145px);

    line-height: 0.8;

    font-weight: 300;
}

.motion .large {
    color: #b8afa4;
}

.motion-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    padding: 0 7vw 120px;
}

.motion-card {
    min-width: 0;
}

.video-wrap {
    width: 100%;

    background: #111;

    overflow: hidden;
}

.motion-card video {
    display: block;

    width: 100%;

    /*
        Keep the complete video visible.
    */

    height: min(72vh, 820px);

    object-fit: contain;

    background: #111;
}

.motion-meta {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-top: 12px;

    color: var(--dark-muted);

    font-size: 8px;

    letter-spacing: 0.15em;
}

/* =====================================================
   FASHION
===================================================== */

.fashion {
    border-top: 1px solid var(--line);
}

.fashion-two {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9vw;
}

.fashion h2 {
    margin: 0 0 35px;

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(70px, 9vw, 125px);

    line-height: 0.84;

    font-weight: 400;
}

.roles {
    border-top: 1px solid var(--line);
}

.roles div {
    display: grid;

    grid-template-columns: 28px 1fr;

    gap: 8px;

    padding: 20px 0;

    border-bottom: 1px solid var(--line);
}

.roles b {
    color: var(--muted);

    font-size: 8px;
}

.roles strong {
    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.13em;
}

.roles small {
    grid-column: 2;

    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;
}

/* =====================================================
   AVAILABILITY
===================================================== */

.details {
    border-top: 1px solid var(--line);
}

.availability {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10vw;
}

.availability h2 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(70px, 9vw, 125px);

    line-height: 0.85;

    font-weight: 400;
}

.availability-line {
    display: flex;

    justify-content: space-between;

    padding: 19px 0;

    border-bottom: 1px solid var(--line);
}

.availability-line span {
    color: var(--muted);

    font-size: 8px;

    letter-spacing: 0.15em;
}

.availability-line strong {
    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-align: right;
}

/* =====================================================
   CONTACT
===================================================== */

.contact {
    border-top: 1px solid var(--line);
}

.contact-inner {
    max-width: 1300px;
}

.contact h2 {
    margin: 0 0 35px;

    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(75px, 10vw, 145px);

    line-height: 0.83;

    font-weight: 400;
}

.links {
    display: flex;

    flex-wrap: wrap;

    gap: 35px;

    margin: 55px 0 25px;
}

.links a {
    padding-bottom: 5px;

    border-bottom: 1px solid var(--ink);

    font-size: 13px;

    text-decoration: none;
}

/* =====================================================
   FOOTER
===================================================== */

footer {
    padding: 28px 7vw;

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

    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: 8px;

    letter-spacing: 0.16em;
}

/* =====================================================
   REVEALS
===================================================== */

.profile-grid,
.facts,
.profile-footer,
.fashion-two,
.availability,
.contact-inner {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.profile-grid.visible,
.facts.visible,
.profile-footer.visible,
.fashion-two.visible,
.availability.visible,
.contact-inner.visible {
    opacity: 1;

    transform: none;
}

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

@media (max-width: 800px) {
    /* HEADER */

    header {
        height: 64px;
    }

    /* GENERAL */

    .section-pad {
        padding: 80px 5vw;
    }

    /* HERO */

    .hero {
        min-height: 700px;

        height: 100svh;
    }

    .hero-image img {
        object-position: 54% 30%;
    }

    .hero-title {
        left: 5vw;

        bottom: 13vh;
    }

    .hero-title h1 {
        font-size: clamp(78px, 24vw, 125px);
    }

    .hero-title p {
        margin-top: 24px;

        font-size: 9px;

        letter-spacing: 0.25em;
    }

    .hero-index {
        right: 5vw;

        bottom: 28px;
    }

    .hero-explore {
        left: 5vw;

        bottom: 29px;
    }

    /* PROFILE */

    .section-label {
        margin-bottom: 40px;
    }

    .profile-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .profile-heading h2 {
        font-size: 67px;
    }

    .facts {
        grid-template-columns: 1fr 1fr;
    }

    .facts div:nth-child(2) {
        border-right: 0;
    }

    .profile-footer {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    /* QUOTE */

    .quote-section {
        min-height: 76vh;

        padding: 80px 5vw;
    }

    .quote-inner blockquote {
        font-size: 51px;
    }

    .quote-mark {
        font-size: 65px;
    }

    /* WORK */

    .work-header {
        display: block;

        /*
            Header is 64px on mobile.
            Keep the title safely below it.
        */
        padding-top: 145px;

        padding-bottom: 55px;
    }

    .work-header h2 {
        font-size: 88px;

        line-height: 0.82;
    }

    .section-note {
        margin-top: 25px;

        text-align: left;
    }

    .lookbook-window {
        padding-left: 5vw;
    }

    .lookbook-track {
        gap: 16px;
    }

    .look {
        /*
            One strong portrait image on mobile.
        */
        flex: 0 0 82vw;

        width: 82vw;
    }

    .look-image {
        aspect-ratio: 3 / 4;
    }

    .lookbook-bottom {
        padding-top: 25px;

        padding-bottom: 80px;
    }

    /* MOTION */

    .motion-title {
        display: block;
    }

    .motion-title .large {
        margin-top: 25px;
    }

    .motion-grid {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 0 5vw 80px;
    }

    .motion-card video {
        width: 100%;

        height: auto;

        max-height: none;

        object-fit: contain;
    }

    /* FASHION */

    .fashion-two {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .fashion h2 {
        font-size: 78px;
    }

    /* AVAILABILITY */

    .availability {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .availability h2 {
        font-size: 78px;
    }

    /* CONTACT */

    .contact h2 {
        font-size: 78px;
    }

    .links {
        flex-direction: column;

        gap: 20px;
    }

    /* FOOTER */

    footer {
        padding: 24px 5vw;
    }
}
/* =====================================================
   PROFILE INTRO — FINAL LAYOUT FIX
   Heading left of image; copy directly below image.
===================================================== */

.profile-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
        'heading image'
        '.       copy';
    column-gap: 8vw;
    row-gap: 2.5rem;
    align-items: start;
}

.profile-heading {
    grid-area: heading;
}

.profile-image {
    grid-area: image;
}

.profile-copy {
    grid-area: copy;
    align-self: start;
    max-width: 620px;
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'heading'
            'image'
            'copy';
        row-gap: 3rem;
    }

    .profile-heading,
    .profile-image,
    .profile-copy {
        grid-column: auto;
    }

    .profile-copy {
        max-width: 680px;
    }
}

@media (max-width: 800px) {
    .profile-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'heading'
            'image'
            'copy';
        gap: 2.5rem;
    }
}

@media (max-width: 600px) {
    .profile-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'heading'
            'image'
            'copy';
        gap: 2.5rem;
    }
}