.tml-page {
    overflow-x: hidden;
    background: #d7d0b8;
    color: #202018;
}

.tml-page main {
    position: relative;
}

.tml-page .bilingual-copy {
    max-width: 620px;
}

.tml-page .bilingual-copy > p {
    margin: 0;
    font-family: var(--font-main-zh);
    line-height: 1.75;
}

.tml-page .bilingual-copy > .lang-en {
    margin-top: 8px;
    font-family: var(--font-main-en);
    font-size: .96em;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .01em;
    opacity: .82;
}

.tml-hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
    gap: clamp(48px, 7vw, 130px);
    align-items: center;
    padding: clamp(120px, 13vh, 170px) clamp(34px, 5vw, 82px) clamp(70px, 8vh, 110px);
    background:
        radial-gradient(circle at 14% 16%, rgba(255,255,255,.42), transparent 30%),
        #d7d0b8;
}

.tml-hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.tml-kicker,
.tml-section-heading > p,
.tml-thesis > p,
.tml-colophon > p {
    margin: 0 0 34px;
    font: 700 .58rem/1.2 var(--font-main-en);
    letter-spacing: .15em;
}

.tml-hero h1 {
    margin: 0;
    line-height: .79;
}

.tml-hero h1 span,
.tml-hero h1 strong {
    display: block;
}

.tml-hero h1 span {
    font: 400 clamp(6.2rem, 12vw, 12.5rem)/.78 var(--font-main-zh);
    letter-spacing: -.08em;
}

.tml-hero h1 strong {
    margin-top: 24px;
    font: 500 clamp(4.4rem, 8.3vw, 9rem)/.82 var(--font-main-en);
    letter-spacing: -.075em;
}

.tml-hero-intro {
    margin-top: clamp(38px, 6vh, 68px);
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
}

.tml-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0;
}

.tml-hero-meta span {
    padding: 8px 11px;
    border: 1px solid rgba(32,32,24,.38);
    border-radius: 999px;
    font: 700 .5rem var(--font-main-en);
    letter-spacing: .1em;
}

.tml-page .button {
    gap: 0;
}

.tml-page .button .bilingual-en {
    margin-top: 0;
    font: 700 .6rem var(--font-main-en);
    line-height: 1;
    letter-spacing: .11em;
    opacity: .84;
}

.tml-cover {
    position: relative;
    width: min(100%, 730px);
    margin: 0;
    justify-self: end;
}

.tml-cover::before {
    content: "";
    position: absolute;
    inset: 8% -5% -5% 8%;
    border: 1px solid rgba(32,32,24,.22);
    border-radius: 30px;
}

.tml-cover img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 26px;
    box-shadow: 0 34px 90px rgba(27,26,18,.22);
}

.tml-cover figcaption {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding-right: 4px;
}

.tml-cover figcaption span {
    font: 400 1.05rem var(--font-main-zh);
}

.tml-cover figcaption small {
    font: 700 .54rem var(--font-main-en);
    letter-spacing: .12em;
}

.tml-thesis {
    position: relative;
    min-height: 105svh;
    display: grid;
    grid-template-columns: minmax(130px, .32fr) minmax(0, 1.05fr) minmax(260px, .48fr);
    gap: clamp(30px, 5vw, 90px);
    align-items: center;
    padding: clamp(130px, 17vw, 250px) clamp(34px, 5vw, 82px);
    background: #f4f0e8;
}

.tml-thesis > p {
    align-self: start;
}

.tml-thesis h2,
.tml-colophon h2 {
    margin: 0;
}

.tml-thesis h2 span,
.tml-thesis h2 strong,
.tml-colophon h2 span,
.tml-colophon h2 strong {
    display: block;
}

.tml-thesis h2 span,
.tml-colophon h2 span {
    font: 400 clamp(4.5rem, 8vw, 9rem)/.95 var(--font-main-zh);
    letter-spacing: -.075em;
}

.tml-thesis h2 strong,
.tml-colophon h2 strong {
    margin-top: 25px;
    font: 500 clamp(3.8rem, 6.2vw, 7rem)/.9 var(--font-main-en);
    letter-spacing: -.065em;
}

.tml-thesis-note {
    align-self: end;
    padding-top: 24px;
    border-top: 1px solid rgba(32,32,24,.28);
}

.tml-story {
    position: relative;
    z-index: 2;
    margin-top: -34px;
    padding: clamp(120px, 11vw, 175px) clamp(34px, 5vw, 82px) clamp(130px, 13vw, 200px);
    color: #f4f0e8;
    background: #202018;
    border-radius: 34px 34px 0 0;
}

.tml-section-heading {
    display: grid;
    grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr) minmax(280px, .5fr);
    gap: clamp(28px, 4vw, 70px);
    align-items: end;
    margin-bottom: clamp(80px, 10vw, 150px);
}

.tml-section-heading h2 {
    margin: 0;
}

.tml-section-heading h2 span,
.tml-section-heading h2 strong {
    display: block;
}

.tml-section-heading h2 span {
    font: 400 clamp(4.8rem, 8vw, 9rem)/.82 var(--font-main-zh);
    letter-spacing: -.07em;
}

.tml-section-heading h2 strong {
    margin-top: 18px;
    font: 500 clamp(3.8rem, 6.5vw, 7.3rem)/.85 var(--font-main-en);
    letter-spacing: -.065em;
}

.tml-story .tml-section-heading .lang-en {
    color: rgba(244,240,232,.72);
}

.tml-story-layout {
    display: grid;
    grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
    gap: clamp(45px, 7vw, 125px);
    align-items: start;
}

.tml-story-media {
    position: sticky;
    top: clamp(94px, 12vh, 130px);
    height: min(74svh, 820px);
    overflow: hidden;
    border-radius: 24px;
    background: #323128;
}

.tml-story-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s var(--ease), visibility .7s;
}

.tml-story-video.is-active {
    opacity: 1;
    visibility: visible;
}

.tml-story-copy {
    min-width: 0;
}

.tml-story-block {
    min-height: 72svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(70px, 9vh, 120px) 0;
    border-top: 1px solid rgba(244,240,232,.2);
    opacity: .42;
    transition: opacity .45s var(--ease);
}

.tml-story-block:last-child {
    border-bottom: 1px solid rgba(244,240,232,.2);
}

.tml-story-block.is-active {
    opacity: 1;
}

.tml-story-block > p {
    margin: 0 0 30px;
    color: #cbd7a1;
    font: 700 .55rem var(--font-main-en);
    letter-spacing: .14em;
}

.tml-story-block h3 {
    margin: 0 0 42px;
}

.tml-story-block h3 span,
.tml-story-block h3 strong {
    display: block;
}

.tml-story-block h3 span {
    font: 400 clamp(4.4rem, 7vw, 8rem)/.82 var(--font-main-zh);
}

.tml-story-block h3 strong {
    margin-top: 14px;
    font: 500 clamp(3.2rem, 5.4vw, 6rem)/.85 var(--font-main-en);
    letter-spacing: -.06em;
}

.tml-story-block .bilingual-copy {
    max-width: 620px;
    font-size: clamp(.96rem, 1.35vw, 1.17rem);
}

.tml-story-block .lang-en {
    color: rgba(244,240,232,.75);
}

.tml-fragments {
    position: relative;
    z-index: 3;
    margin-top: -34px;
    padding: clamp(120px, 11vw, 175px) clamp(34px, 5vw, 82px) clamp(135px, 13vw, 205px);
    background: #c5bca0;
    border-radius: 34px 34px 0 0;
}

.tml-fragments .tml-section-heading {
    color: #202018;
}

.tml-memory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 24px);
}

.tml-memory-card {
    min-width: 0;
    padding: 0;
    color: #202018;
    text-align: left;
    background: rgba(244,240,232,.55);
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .45s var(--ease), background .35s var(--ease);
}

.tml-memory-card:hover,
.tml-memory-card:focus-visible {
    transform: translateY(-5px);
    background: #f4f0e8;
}

.tml-memory-card[aria-pressed="true"] {
    color: #f4f0e8;
    background: #202018;
}

.tml-memory-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.tml-memory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .7s var(--ease), filter .45s var(--ease);
}

.tml-memory-card:hover img,
.tml-memory-card[aria-pressed="true"] img {
    transform: scale(1.025);
    filter: saturate(.78);
}

.tml-memory-meta {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 88px;
    padding: 16px 18px;
}

.tml-memory-meta b,
.tml-memory-meta i {
    font: 700 .53rem var(--font-main-en);
    letter-spacing: .1em;
}

.tml-memory-meta i {
    font-style: normal;
}

.tml-memory-meta strong,
.tml-memory-meta small {
    display: block;
}

.tml-memory-meta strong {
    font: 400 1.45rem/1 var(--font-main-zh);
}

.tml-memory-meta small {
    margin-top: 2px;
    font: 600 .66rem/1.1 var(--font-main-en);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .62;
}

.tml-audio-status {
    margin: 34px 0 0;
    font-size: .82rem;
}

.tml-audio-status span {
    display: block;
    margin-top: 5px;
    font: 600 .65rem var(--font-main-en);
    letter-spacing: .04em;
    opacity: .58;
}

.tml-colophon {
    position: relative;
    z-index: 4;
    min-height: 92svh;
    display: grid;
    grid-template-columns: minmax(120px, .27fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 90px);
    align-content: center;
    margin-top: -34px;
    padding: clamp(130px, 14vw, 220px) clamp(34px, 5vw, 82px);
    color: #f4f0e8;
    background: #34362c;
    border-radius: 34px 34px 0 0;
}

.tml-colophon h2 {
    max-width: 1120px;
}

.tml-colophon-meta,
.tml-colophon .button {
    grid-column: 2;
}

.tml-colophon-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 55px;
}

.tml-colophon-meta span {
    padding: 9px 12px;
    border: 1px solid rgba(244,240,232,.34);
    border-radius: 999px;
    font: 700 .52rem var(--font-main-en);
    letter-spacing: .1em;
}

.tml-colophon .button {
    width: fit-content;
    margin-top: 30px;
}

.tml-page footer {
    position: relative;
    z-index: 5;
    margin-top: -34px;
}

@media (max-width: 1100px) {
    .tml-hero {
        grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
        gap: 40px;
    }

    .tml-section-heading {
        grid-template-columns: 90px 1fr;
    }

    .tml-section-heading > .bilingual-copy {
        grid-column: 2;
    }

    .tml-thesis {
        grid-template-columns: 90px 1fr;
    }

    .tml-thesis-note {
        grid-column: 2;
        max-width: 520px;
    }

    .tml-story-layout {
        grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
        gap: 45px;
    }

    .tml-memory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tml-hero {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 54px;
        padding: 118px 20px 94px;
    }

    .tml-hero h1 span {
        font-size: clamp(5.7rem, 31vw, 7.4rem);
    }

    .tml-hero h1 strong {
        margin-top: 16px;
        font-size: clamp(3.3rem, 17vw, 4.25rem);
    }

    .tml-cover {
        width: 100%;
    }

    .tml-cover::before {
        display: none;
    }

    .tml-cover img {
        border-radius: 18px;
    }

    .tml-thesis {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 125px 20px 140px;
    }

    .tml-thesis h2 span,
    .tml-colophon h2 span {
        font-size: clamp(4rem, 19vw, 5.5rem);
    }

    .tml-thesis h2 strong,
    .tml-colophon h2 strong {
        font-size: clamp(3rem, 14vw, 4rem);
    }

    .tml-thesis-note {
        grid-column: auto;
    }

    .tml-story,
    .tml-fragments {
        margin-top: -22px;
        padding: 112px 20px 125px;
        border-radius: 22px 22px 0 0;
    }

    .tml-section-heading {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 72px;
    }

    .tml-section-heading > .bilingual-copy {
        grid-column: auto;
    }

    .tml-section-heading h2 span {
        font-size: clamp(4.5rem, 22vw, 6rem);
    }

    .tml-section-heading h2 strong {
        font-size: clamp(3.2rem, 15vw, 4.25rem);
    }

    .tml-story-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .tml-story-media {
        top: 78px;
        z-index: 2;
        height: min(48svh, 430px);
        border-radius: 16px;
    }

    .tml-story-block {
        min-height: 68svh;
        padding: 100px 0;
    }

    .tml-story-block h3 span {
        font-size: clamp(4.3rem, 21vw, 5.8rem);
    }

    .tml-story-block h3 strong {
        font-size: clamp(3.15rem, 15vw, 4.1rem);
    }

    .tml-memory-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

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

    .tml-colophon {
        min-height: auto;
        grid-template-columns: 1fr;
        margin-top: -22px;
        padding: 125px 20px 145px;
        border-radius: 22px 22px 0 0;
    }

    .tml-colophon-meta,
    .tml-colophon .button {
        grid-column: auto;
    }

    .tml-page footer {
        margin-top: -22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tml-story-video {
        display: none;
    }

    .tml-story-media {
        background: #323128 url("assets/images/to-my-love/posters/chapter-01.jpg") center / cover no-repeat;
    }

    .tml-memory-card,
    .tml-memory-image img,
    .tml-story-block {
        transition: none;
        transform: none;
    }
}