@font-face {
    font-family: "DCC Ash";
    src: url("../fonts/dcc-ash/DCC%20-%20Ash.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Thesignature";
    src: url("../fonts/thesignature/Thesignature.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond-italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
}

:root {
    --midnight: #0c111b;
    --midnight-light: #111724;
    --collection: #0c121c;
    --gold: #d6ad67;
    --ivory: #f4efe6;
    --muted: #a8b1bd;
    --rule: #334052;
    --body-font: "Manrope", sans-serif;
    --display-font: "DCC Ash", sans-serif;
}

/* The source frame is 1920px wide. At that width 1rem = 16px;
   desktop dimensions scale together to preserve its exact composition. */
html {
    font-size: .8333333333vw;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--midnight);
    color: #fff;
    font-family: var(--body-font);
    font-size: 1.09225rem;
    -webkit-font-smoothing: antialiased;
}

/* Clip horizontal entrances without changing the document's vertical scrolling. */
main,
.site-footer {
    overflow-x: clip;
}

/* Content stays readable if the animation library cannot initialize. */
[data-aos]:not(.aos-init) {
    opacity: 1;
    transform: none;
}

/* Prepare entrances quietly while assets load; start movement after page load. */
.aos-loading [data-aos] {
    transition: none !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

a:hover {
    color: var(--gold);
}

button {
    cursor: pointer;
}

img {
    display: block;
}

h1,
h2,
h3,
p,
blockquote,
figure {
    margin: 0;
}

h1,
h2,
h3 {
    font-family: var(--display-font);
    font-weight: 400;
    color: var(--ivory);
}

h1,
h2,
h3,
.brand,
.quotation-mark {
    transform: translateY(-.1em);
}

::selection {
    background: var(--gold);
    color: var(--midnight);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px;
}

.container {
    width: 85.9223125rem;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.eyebrow {
    color: var(--gold);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .4004875rem;
    text-transform: uppercase;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 1100;
    padding: 1rem;
    background: var(--gold);
    color: var(--midnight);
}

.skip-link:focus {
    top: 1rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.1650625rem;
    min-height: 3.495125rem;
    padding: 0 1.7475625rem;
    border: .0728125rem solid var(--gold);
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.button img,
.text-link img {
    width: 1.09225rem;
    height: 1.09225rem;
}

.button-gold {
    background: var(--gold);
    color: var(--midnight);
}

.button-gold:hover {
    background: #e9c485;
    color: var(--midnight);
}

.button-outline {
    background: transparent;
    color: var(--ivory);
}

.button-outline:hover {
    background: var(--gold);
    color: var(--midnight);
}

.brand {
    display: inline-block;
    color: var(--gold);
    font-family: var(--display-font);
    font-size: 2.4389375rem;
    line-height: 1;
    white-space: nowrap;
}

/* Opening story and navigation */
.opening-story {
    position: relative;
    height: 59.70875rem;
    overflow: hidden;
}

.hero-art,
.hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-art img {
    position: absolute;
    top: 1.87%;
    left: 9.79%;
    width: 90.21%;
    height: 96.26%;
}

.hero-scrim {
    background: linear-gradient(90deg, #0c111b 0%, rgba(12, 17, 27, .91) 38%, rgba(12, 17, 27, .188) 76%, rgba(12, 17, 27, 0) 100%);
}

.site-header {
    position: relative;
    z-index: 5;
    height: 6.553375rem;
    border-bottom: .0728125rem solid var(--rule);
}

.site-header .navbar {
    height: 100%;
    padding: 0;
    flex-wrap: nowrap;
}

.site-header .brand-column {
    flex: 0 0 9.1875rem;
    width: 9.1875rem;
}

.site-header .navbar-collapse {
    flex: 1;
    width: auto;
}

.site-header .navbar-nav {
    gap: 3.621375rem;
    margin-left: 21.310375rem !important;
    margin-right: 0 !important;
}

.site-header .nav-item:nth-child(1) {
    width: 2.3125rem;
}

.site-header .nav-item:nth-child(2) {
    /* width: 4.25rem; */
}

.site-header .nav-item:nth-child(3) {
    width: auto;
}

.site-header .nav-item:nth-child(4) {
    width: 3.75rem;
}

.site-header .nav-link {
    padding: .8738125rem 0 !important;
    border-bottom: .0728125rem solid transparent;
    color: var(--ivory);
    font-size: 17px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.site-header .nav-link.active,
.site-header .nav-link:hover {
    border-bottom-color: var(--gold);
    color: var(--ivory);
}

.readers-link {
    margin-left: auto;
    font-size: 18px;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-composition {
    position: relative;
    height: 48.05825rem;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.7475625rem;
    width: 45.2184375rem;
}

.hero-copy h1 {
    font-size: 6.875rem;
    line-height: .92;
}

.hero-description {
    width: 40.0485625rem;
    font-size: 1.529125rem;
    line-height: 1.45;
}

.hero-actions {
    gap: .8738125rem;
    padding-top: .728125rem;
}

.scroll-invitation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.1650625rem;
    height: 2.9138125rem;
    padding-top: 2.0388125rem;
    font-size: 17px;
    line-height: normal;
    text-transform: uppercase;
}

.scroll-invitation span {
    height: .0728125rem;
    width: 3.9320625rem;
    background: var(--gold);
}

/* Library */
.collection {
    height: 44.85375rem;
    padding-top: 6.844375rem;
    background: var(--collection);
    overflow: hidden;
}

.section-introduction {
    padding-bottom: 2.0388125rem;
    border-bottom: .0728125rem solid var(--rule);
}

.section-heading {
    display: flex;
    flex-direction: column;
    gap: .8738125rem;
}

.section-heading h2 {
    font-size: 4.3689375rem;
    line-height: 1.05;
    letter-spacing: 2px;
}

.section-aside {
    color: #fff;
    font-size: .728125rem;
    font-weight: 600;
    line-height: 1.8;
    text-align: right;
    text-transform: uppercase;
}

.collection-row {
    height: 17.47575rem;
    margin-top: 3.9320625rem;
}

.book-article {
    position: relative;
}

.book-article-city {
    flex: 0 0 50.3813%;
    max-width: 50.3813%;
}

.book-article-memoir {
    flex: 0 0 49.6187%;
    max-width: 49.6187%;
    border-left: .0728125rem solid var(--rule);
}

.book-visual-column {
    position: relative;
    height: 100%;
}

.book-cover {
    position: absolute;
    display: block;
    overflow: hidden;
}

.book-cover img {
    position: absolute;
    top: 0;
    max-width: none;
    height: 100%;
}

.book-cover-city {
    top: -1.898125rem;
    left: -2.03875rem;
    width: 14.75rem;
    height: 21.1875rem;
}

.book-cover-city img {
    left: -10.64%;
    width: 215.57%;
}

.book-cover-memoir {
    top: -2.273125rem;
    left: 2.485rem;
    width: 15rem;
    height: 21.9375rem;
}

.book-cover-memoir img {
    left: -109.35%;
    width: 218.7%;
}

.book-article-city .book-visual-column {
    width: 13.980625rem;
}

.book-article-memoir .book-visual-column {
    width: 18.661875rem;
}

.book-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8738125rem;
    width: 25.6675rem;
}

.book-article-memoir .book-details {
    width: 25.7403125rem;
    flex: 0 0 25.7403125rem;
    min-width: 0;
}

.book-article-memoir>.row {
    flex-wrap: nowrap;
}

.book-kicker {
    color: var(--gold);
    font-size: .801rem;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
}

.book-details h3 {
    font-size: 2.47575rem;
    line-height: 1.02;
    white-space: nowrap;
}

.book-description {
    font-size: 1.3835rem;
    line-height: 1.45;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .8738125rem;
    padding-top: .8738125rem;
    color: var(--gold);
    font-size: .728125rem;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.text-link:hover {
    color: #e9c485;
}

/* The City of Seven Hills */
.novel-story {
    position: relative;
    height: 52rem;
    overflow: hidden;
    background: #131c2b;
}

.novel-landscape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: bottom;
}

.novel-shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);
}

.novel-halo {
    position: absolute;
    top: 2.4375rem;
    left: 28.38541667%;
    width: 51.61458333%;
    height: 47.125rem;
    border-radius: 23.5625rem;
    background: var(--midnight);
    filter: blur(5.625rem);
}

.novel-story .container {
    position: relative;
}

.novel-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.7475625rem;
    margin-left: 26.14875rem;
    padding-top: 9.625rem;
    width: 43.6893125rem;
}

.novel-copy h2 {
    font-size: 5.2426875rem;
    line-height: 1.02;
}

.novel-description {
    font-size: 1.09225rem;
    line-height: 1.75;
}

.novel-copy blockquote {
    border-left: .0728125rem solid var(--gold);
    padding-left: 1.4563125rem;
    font-size: 1.4563125rem;
    line-height: 1.5;
}

/* The Young Chocolatier */
.memoir-story {
    position: relative;
    height: 52.375rem;
    overflow: hidden;
    perspective: 200rem;
    isolation: isolate;
}

.memoir-copy-column {
    position: relative;
}

.memoir-copy {
    padding-top: 7.125rem;
    margin-left: 15rem;
    width: 41.0625rem;
}

.memoir-copy h2 {
    margin-top: 1.46715rem;
    font-size: 5.0970625rem;
    line-height: .99;
}

.memoir-introduction {
    margin-top: 1.473975rem;
    font-size: 1.529125rem;
    line-height: 1.45;
}

.memoir-description {
    width: 40.375rem;
    margin-top: 1.338125rem;
    color: rgba(255, 255, 255, .5);
    font-size: 1.09225rem;
    line-height: 1.75;
}

.memoir-copy .button {
    margin-top: 1.5486875rem;
}

.memoir-art-column {
    height: 100%;
    overflow: hidden;
}

.memoir-art {
    width: 99.92%;
    height: 100%;
    margin-left: .04%;
}

.memoir-art[hidden] {
    display: none;
}

/* A temporary two-sided page turns around the centre of the open book. */
.story-leaf {
    position: absolute;
    z-index: 2;
    transform-origin: left center;
    transform-style: preserve-3d;
    pointer-events: none;
}

.story-leaf-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--midnight);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .3);
}

.story-leaf-back {
    transform: rotateY(180deg);
}

.story-leaf-face::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 45%, rgba(255, 255, 255, .12));
    opacity: 0;
    animation: story-page-shade 1100ms ease-in-out both;
}

@keyframes story-page-shade {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.story-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    z-index: 3;
    transform: translateX(-50%);
}

.story-control {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    transition: opacity .2s;
}

.story-control:hover {
    opacity: .8;
}

.story-control:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.story-control[aria-disabled="true"] {
    cursor: wait;
}

.story-control img {
    width: 3.25rem;
    height: 3.2rem;
}

/* Themes */
.themes {
    height: 40.75rem;
    padding-top: 6.553375rem;
    border-top: .0728125rem solid var(--rule);
    overflow: hidden;
}

.themes .section-heading h2 {
    font-size: 3.5679375rem;
}

.themes .section-aside {
    color: var(--muted);
}

.theme-row {
    height: 16.3835rem;
    margin-top: 1.4563125rem;
}

.theme-card {
    display: flex;
    flex-direction: column;
       align-items: center;
    gap: 1.3106875rem;
    height: 100%;
    padding: 2.767rem 2.47575rem 1.4563125rem;
}

.theme-card+.theme-card {
    border-left: .0728125rem solid var(--rule);
}

.theme-card>img {
    width: 2.6941875rem;
    height: 2.6941875rem;
}

.theme-card h3 {
    width: 100%;
    font-size: 1.966rem;
    line-height: 1;
    text-align: center;
}

.theme-card p {
    width: 100%;
    font-size: 1.3106875rem;
    line-height: 1.45;
    text-align: center;
}

/* Author */
.author {
    height: 37.4375rem;
    background: var(--midnight-light);
}

.author-row {
    gap: 5.82525rem;
}

.author-portrait-column {
    width: 26.94175rem;
}

.author-portrait {
    display: flex;
    flex-direction: column;
    gap: .8738125rem;
    width: 26.94175rem;
    height: 27.233rem;
    padding: .728125rem;
    border: .0728125rem solid var(--rule);
}

.author-portrait img {
    width: 100%;
    height: 24.029125rem;
    object-fit: cover;
}

.author-portrait figcaption {
    color: var(--muted);
    font-size: .5825rem;
    line-height: normal;
    text-align: right;
    text-transform: uppercase;
}

.author-biography {
    display: flex;
    flex-direction: column;
    gap: 1.67475rem;
    width: 49.5145625rem;
}

.author-biography h2 {
    font-size: 4.5145625rem;
    line-height: 1.05;
    letter-spacing: 2px;
}

.author-description {
    color: white;
    font-size: 23px;
    line-height: 1.8;
}

.author-signoff {
    padding-top: .5825rem;
    width: 100%;
}

.signature {
    color: var(--gold);
    font-family: "Thesignature", cursive;
    font-size: 3.125rem;
    line-height: normal;
}

/* Reader reflections */
.reflections {
    height: 42.875rem;
    padding-top: 6.553375rem;
    overflow: hidden;
}

.reader-voices {
    gap: 1.6019375rem;
    height: 18.203875rem;
    margin-top: 1.7475625rem;
    flex-wrap: nowrap;
}

.featured-reflection {
    display: flex;
    align-items: flex-start;
    gap: 1.3106875rem;
    width: 27.0145625rem;
    height: 100%;
    padding: 2.1844375rem 1.3106875rem 0 .5825rem;
}

.quotation-mark {
    color: var(--gold);
    font-family: var(--display-font);
    font-size: 5.0970625rem;
    line-height: .85;
}

.featured-reflection figure {
    flex: 1;
    min-width: 0;
}

.reader-voices blockquote {
    color: var(--ivory);
    font-size: 1.4563125rem;
    line-height: 1.5;
}

.reader-voices figcaption {
    margin-top: 2.0388125rem;
    color: var(--gold);
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
}

.reflection-image {
    flex: 0 0 22.063125rem;
    width: 22.063125rem;
    height: 100%;
}

.reflection-image img {
    width: 100%;
    height: 99.93%;
    object-fit: cover;
}

.reader-quotation {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 2.0388125rem;
    border: .0728125rem solid var(--rule);
    background: var(--midnight-light);
}

.reader-quotation figcaption {
    margin-top: 2.1844375rem;
}

/* Readers' list */
.readers-list {
    position: relative;
    height: 24.7573125rem;
    overflow: hidden;
    background: var(--midnight-light);
}

.writers-desk,
.desk-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 50.388375rem;
    height: 100%;
}

.writers-desk {
    object-fit: cover;
}

.desk-transition {
    background: linear-gradient(90deg, rgba(17, 23, 36, 0) 0%, rgba(17, 23, 36, .188) 35%, rgba(17, 23, 36, .941) 58%, #111724 80%, #111724 100%);
}

.readers-list .container {
    position: relative;
    z-index: 1;
}

.invitation-copy {
    display: flex;
    flex-direction: column;
    gap: 1.1650625rem;
    width: 26.4320625rem;
    margin-left: 7.2818125rem;
}

.invitation-copy h2 {
    font-size: 3.203875rem;
    line-height: 1.04;
}

.invitation-copy>p:last-child {
    font-size: 19px;
    line-height: 1.8;
}

.subscription-column {
    width: 25.995125rem;
    margin-left: 4.005rem;
}

.subscription-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8738125rem;
}

.subscription-form .form-control {
    height: 3.495125rem;
    padding: 0 1.3106875rem;
    border: .0728125rem solid var(--rule);
    border-radius: 0;
    background: var(--midnight);
    color: var(--ivory);
    font-size: 1.0194375rem;
    line-height: normal;
}

.subscription-form .form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

.subscription-form .form-control:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 .15rem rgba(214, 173, 103, .15);
}

.subscription-status {
    position: absolute;
    top: calc(100% + .6rem);
    color: var(--gold);
    font-size: .85rem;
    line-height: 1.5;
}

.newsletter-books {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 37.5625rem;
    height: 21.75rem;
    object-fit: cover;
    mix-blend-mode: lighten;
}

/* Footer */
.site-footer {
    height: 12.9611875rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.footer-navigation {
    height: 8.3738125rem;
    justify-content: space-between;
    border-bottom: .0728125rem solid var(--rule);
}

.footer-navigation>div:first-child {
    width: auto;
}

.site-footer .brand {
    font-size: 2.5216875rem;
}

.footer-links {
    display: flex;
    width: auto;
    justify-content: center;
    gap: 3.125rem;
    font-size: 1.125rem;
}

.social-labels {
    display: flex;
    width: auto;
    justify-content: flex-end;
    gap: 1.3106875rem;
    color: var(--gold);
    font-size: .728125rem;
}

.publication-details {
    height: 4.587375rem;
    font-size: 1rem;
    line-height: normal;
}

.footer-tagline {
    text-align: right;
}

/* Book and author details, opened by the corresponding calls to action */
.modal-dialog {
    max-width: 48rem;
}

.modal-content {
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--midnight-light);
    color: var(--ivory);
}

.modal-header {
    padding: 1.5rem 2rem;
    border-color: var(--rule);
    gap: 1rem;
}

.modal-header .eyebrow {
    letter-spacing: .18rem;
}

.dialog-close {
    padding: 0 .5rem;
    border: 0;
    background: none;
    color: var(--gold);
    font-size: 2rem;
    line-height: 1;
}

.modal-body {
    padding: 2rem;
}

.modal-body h2 {
    margin-bottom: 1.5rem;
    font-size: 3.5rem;
    line-height: 1.05;
}

.modal-body>p {
    margin-bottom: 1.5rem;
    color: var(--muted);
    line-height: 1.75;
}

.modal-body blockquote {
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 1px solid var(--gold);
    line-height: 1.6;
}

.modal-body .signature {
    color: var(--gold);
}

@media (max-width: 991.98px) {
    html {
        font-size: 16px;
    }

    body {
        font-size: .9375rem;
    }

    .container {
        width: calc(100% - 3rem);
        max-width: 44rem;
    }

    .eyebrow {
        font-size: .625rem;
        letter-spacing: .22rem;
    }

    .button {
        min-height: 3.125rem;
        padding: 0 1.25rem;
        gap: .8rem;
        font-size: .65rem;
        border-width: 1px;
    }

    .button img,
    .text-link img {
        width: 1rem;
        height: 1rem;
    }

    .brand {
        font-size: 1.8rem;
    }

    .opening-story {
        height: auto;
        min-height: 51rem;
    }

    .hero-art {
        top: 20rem;
        height: 31rem;
    }

    .hero-art img {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 65% center;
    }

    .hero-scrim {
        background: linear-gradient(180deg, #0c111b 0%, #0c111b 33%, rgba(12, 17, 27, .7) 54%, rgba(12, 17, 27, 0) 76%, #0c111b 100%);
    }

    .site-header {
        height: 5rem;
        border-width: 1px;
    }

    .site-header .navbar {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .site-header .brand-column {
        flex: 0 0 auto;
        width: auto;
    }

    .navbar-toggler {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 8px;
        border: 1px solid var(--rule);
        border-radius: 0;
    }

    .navbar-toggler span {
        display: block;
        width: 24px;
        height: 1px;
        background: var(--gold);
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 2px rgba(214, 173, 103, .3);
    }

    .site-header .navbar-collapse {
        position: absolute;
        top: calc(100% - 1px);
        left: -1.5rem;
        width: calc(100% + 3rem);
        padding: 0 1.5rem;
        background: var(--midnight-light);
        border-bottom: 1px solid var(--rule);
    }

    .site-header .navbar-nav {
        gap: 0;
        padding: 1rem 0;
        margin: 0 !important;
    }

    .site-header .nav-item {
        width: auto !important;
    }

    .site-header .nav-link {
        padding: .75rem 0 !important;
        font-size: .75rem;
    }

    .readers-link {
        display: inline-block;
        margin: .5rem 0 1.5rem;
        font-size: .75rem;
    }

    .hero-composition {
        height: auto;
        padding-top: 3rem;
    }

    .hero-copy {
        width: 100%;
        gap: 1.4rem;
    }

    .hero-copy h1 {
        font-size: clamp(3.6rem, 9vw, 5.5rem);
    }

    .hero-description {
        width: 100%;
        max-width: 32rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-actions {
        gap: .6rem;
        padding-top: 0;
    }

    .scroll-invitation {
        position: absolute;
        bottom: 1.5rem;
        left: 0;
        right: 0;
        height: auto;
        padding-top: 0;
        font-size: .55rem;
    }

    .scroll-invitation span {
        height: 1px;
        width: 3rem;
    }

    .collection {
        height: auto;
        padding: 4rem 0;
    }

    .section-introduction {
        padding-bottom: 1.5rem;
        border-width: 1px;
        row-gap: 1rem;
    }

    .section-heading {
        gap: .8rem;
    }

    .section-heading h2 {
        font-size: 2.8rem;
    }

    .section-aside {
        font-size: .6rem;
        text-align: left;
    }

    .collection-row {
        height: auto;
        margin-top: 2.5rem;
        row-gap: 3rem;
    }

    .book-article-city,
    .book-article-memoir {
        flex: 0 0 100%;
        max-width: 100%;
        border: 0;
    }

    .book-article .row {
        min-height: 15rem;
        flex-wrap: nowrap;
        gap: 1.3rem;
    }

    .book-article-city .book-visual-column,
    .book-article-memoir .book-visual-column {
        width: 34%;
        height: 15rem;
        flex-shrink: 0;
    }

    .book-cover-city {
        top: 50%;
        left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 236 / 339;
        transform: translateY(-50%);
    }

    .book-cover-memoir {
        top: 50%;
        left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 240 / 351;
        transform: translateY(-50%);
    }

    .book-details,
    .book-article-memoir .book-details {
        width: auto;
        flex: 1;
        gap: .75rem;
    }

    .book-kicker {
        font-size: .55rem;
    }

    .book-details h3 {
        font-size: 1.7rem;
        white-space: normal;
    }

    .book-description {
        font-size: .875rem;
        line-height: 1.6;
    }

    .text-link {
        gap: .6rem;
        padding-top: .3rem;
        font-size: .6rem;
    }

    .novel-story {
        height: auto;
        min-height: 39rem;
        padding: 5rem 0;
    }

    .novel-landscape {
        object-fit: cover;
        object-position: 37% center;
    }

    .novel-shade {
        background: rgba(0, 0, 0, .35);
    }

    .novel-halo {
        inset: 2rem 0 2rem 15%;
        width: 85%;
        height: auto;
        border-radius: 50%;
        filter: blur(3rem);
        opacity: .95;
    }

    .novel-copy {
        width: 100%;
        margin-left: 0%;
        padding-top: 0;
        gap: 1.5rem;
    }

    .novel-copy h2 {
        font-size: 3rem;
    }

    .novel-description {
        font-size: .875rem;
    }

    .novel-copy blockquote {
        padding-left: 1rem;
        font-size: 1.05rem;
        border-width: 1px;
    }

    .memoir-story {
        height: auto;
    }

    .memoir-copy {
        width: auto;
        max-width: 44rem;
        margin: 0 auto;
        padding: 4rem 1.5rem;
    }

    .memoir-copy h2 {
        margin-top: 1.5rem;
        font-size: 3.5rem;
    }

    .memoir-introduction {
        margin-top: 1.5rem;
        font-size: 1.05rem;
    }

    .memoir-description {
        width: auto;
        margin-top: 1rem;
        font-size: .875rem;
    }

    .memoir-copy .button {
        margin-top: 1.5rem;
    }

    .memoir-art-column {
        height: auto;
    }

    .memoir-art {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .story-control img {
        width: 3.4rem;
        height: 2.4rem;
    }

    .themes {
        height: auto;
        padding: 4rem 0;
        border-width: 1px;
    }

    .themes .section-heading h2 {
        font-size: 2.5rem;
    }

    .theme-row {
        height: auto;
        margin-top: 2rem;
        row-gap: 2rem;
    }

    .theme-card {
        height: auto;
        gap: 1rem;
        padding: 1rem;
    }

    .theme-card+.theme-card {
        border-width: 1px;
    }

    .theme-card:nth-child(3) {
        border-left: 0;
    }

    .theme-card>img {
        width: 2rem;
        height: 2rem;
    }

    .theme-card h3 {
        font-size: 1.6rem;
    }

    .theme-card p {
        font-size: .875rem;
    }

    .author {
        height: auto;
        padding: 4rem 0;
    }

    .author-row {
        gap: 2.5rem;
    }

    .author-portrait-column {
        width: 100%;
    }

    .author-portrait {
        width: 100%;
        max-width: 23rem;
        height: auto;
        margin: auto;
        padding: .65rem;
        gap: .8rem;
        border-width: 1px;
    }

    .author-portrait img {
        height: auto;
        aspect-ratio: 408 / 384;
    }

    .author-portrait figcaption {
        font-size: .5rem;
    }

    .author-biography {
        width: 100%;
        gap: 1.5rem;
    }

    .author-biography h2 {
        font-size: 3rem;
    }

    .author-description {
        font-size: .875rem;
    }

    .author-signoff {
        padding-top: 0;
        gap: 1rem;
    }

    .signature {
        font-size: 2.7rem;
    }

    .reflections {
        height: auto;
        padding: 4rem 0;
    }

    .reader-voices {
        height: auto;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .featured-reflection {
        width: 100%;
        height: auto;
        padding: 1rem .5rem;
        gap: 1rem;
    }

    .quotation-mark {
        font-size: 4rem;
    }

    .reader-voices blockquote {
        font-size: 1rem;
    }

    .reader-voices figcaption {
        margin-top: 1.5rem;
        font-size: .6rem;
    }

    .reflection-image {
        width: 100%;
        flex: 0 0 100%;
        height: auto;
    }

    .reflection-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 353 / 291;
        object-fit: cover;
    }

    .reader-quotation {
        flex: 1 1 calc(50% - .5rem);
        height: auto;
        min-height: 13rem;
        padding: 1.3rem;
        border-width: 1px;
    }

    .readers-list {
        height: auto;
        min-height: 35rem;
        padding: 4rem 0 15rem;
    }

    .writers-desk,
    .desk-transition {
        width: 100%;
        height: 100%;
    }

    .writers-desk {
        opacity: .35;
    }

    .desk-transition {
        background: linear-gradient(180deg, var(--midnight-light), rgba(17, 23, 36, .65));
    }

    .invitation-row {
        row-gap: 2rem;
    }

    .invitation-copy {
        width: 100%;
        margin: 0;
        gap: 1rem;
    }

    .invitation-copy h2 {
        max-width: 22rem;
        font-size: 2.75rem;
    }

    .invitation-copy>p:last-child {
        max-width: 30rem;
        font-size: .875rem;
    }

    .subscription-column {
        width: 100%;
        margin: 0;
    }

    .subscription-form {
        gap: .75rem;
    }

    .subscription-form .form-control {
        height: 3.125rem;
        padding: 0 1rem;
        border-width: 1px;
        font-size: .875rem;
    }

    .subscription-status {
        font-size: .75rem;
    }

    .newsletter-books {
        width: 24rem;
        max-width: 100%;
        height: auto;
    }

    .site-footer {
        height: auto;
    }

    .footer-navigation {
        height: auto;
        padding: 2.5rem 0;
        row-gap: 1.5rem;
        border-width: 1px;
    }

    .footer-navigation>div:first-child,
    .footer-links,
    .social-labels {
        width: 100%;
    }

    .site-footer .brand {
        font-size: 2rem;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1rem 1.5rem;
        font-size: .75rem;
    }

    .social-labels {
        justify-content: flex-start;
        gap: 1.25rem;
        font-size: .65rem;
    }

    .publication-details {
        height: auto;
        padding: 1.5rem 0;
        row-gap: .75rem;
        font-size: .65rem;
    }

    .footer-tagline {
        text-align: left;
    }

    .modal-dialog {
        margin: 1rem;
        max-width: 44rem;
    }

    .modal-header,
    .modal-body {
        padding: 1.25rem;
    }

    .modal-body h2 {
        font-size: 2.5rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .hero-art {
        left: 20%;
    }

    .book-article .row {
        gap: 2rem;
    }

    .book-article-city .book-visual-column,
    .book-article-memoir .book-visual-column {
        width: 30%;
    }

    .book-details h3 {
        font-size: 2.25rem;
    }

    .book-description {
        font-size: 1rem;
    }

    .memoir-copy {
        padding-left: 0;
        padding-right: 0;
        width: calc(100% - 3rem);
    }

    .reflection-image {
        flex-basis: calc(50% - .5rem);
    }

    .reader-quotation {
        flex-basis: calc(50% - .5rem);
    }

    .modal-dialog {
        margin: 2rem auto;
    }
}

@media (max-width: 374.98px) {
    .container {
        width: calc(100% - 2rem);
    }

    .hero-copy h1 {
        font-size: 3.2rem;
    }

    .hero-actions {
        gap: .5rem;
    }

    .hero-actions .button {
        padding: 0 .85rem;
        font-size: .58rem;
    }

    .book-article .row {
        gap: .75rem;
    }

    .book-article-city .book-visual-column,
    .book-article-memoir .book-visual-column {
        width: 33%;
        height: 12.5rem;
    }

    .book-details h3 {
        font-size: 1.5rem;
    }

    .book-description {
        font-size: .8rem;
    }

    .novel-copy {
        width: 90%;
        margin-left: 10%;
    }

    .memoir-copy h2 {
        font-size: 3rem;
    }

    .author-signoff {
        flex-wrap: wrap;
    }
}

/* Books page — dimensions follow the 1920px Figma frame. */
.catalog-book {
    position: relative;
    min-height: 41.3135625rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: var(--collection);
    overflow: clip;
}

.catalog-book--memoir {
    background: var(--midnight-light);
}

.catalog-layout {
    display: grid;
    grid-template-columns: 35% minmax(0, 1fr);
    min-height: inherit;
}

.catalog-book--memoir .catalog-layout {
    grid-template-columns: minmax(0, 1fr) 34%;
}

.catalog-visual {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    height: 41.3135625rem;
}

.catalog-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
}

.catalog-book--memoir .catalog-visual {
    grid-column: 2;
}

.catalog-info {
    grid-column: 2;
    grid-row: 1;
    width: calc(100% - 7.183937rem);
    min-width: 0;
    margin-left: 5.183937rem;
    padding-top: 6.896187rem;
}

.catalog-book--memoir .catalog-info {
    grid-column: 1;
    width: calc(100% - 19.0625rem);
    margin-left: 17.0625rem;
}

.catalog-main {
    display: grid;
    grid-template-columns: 33.3050625rem 17.3125rem;
    gap: 3.050813rem;
    min-height: 22.3700625rem;
}

.catalog-copy h2 {
    margin-top: .45rem;
    font-size: 4.3689375rem;
    line-height: 1.05;
    letter-spacing: 2px;
}

.catalog-tagline {
    margin-top: .6355625rem;
    color: var(--gold);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.08rem;
    letter-spacing: .101694rem;
    text-transform: uppercase;
}

.catalog-description {
    max-width: 30.4375rem;
    margin-top: 1.1440625rem;
    color: white;
    font-size: 19px;
    line-height: 1.8;
}

.catalog-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2711875rem;
    min-height: 22.2457625rem;
    margin-top: .0953125rem;
    padding-left: 1.161rem;
    border-left: .0635625rem solid rgba(214, 173, 103, .24);
    max-width: 32%;
}

.catalog-specs {
    display: flex;
    flex-direction: column;
    gap: 2.271187rem;
    margin: 0;
}

.catalog-spec {
    display: grid;
    grid-template-columns: 1.779375rem 11.7585rem;
    gap: .7626875rem;
    /* width: 10rem; */
}

.catalog-spec > img {
    width: 1.461875rem;
    height: 1.461875rem;
}

.catalog-spec dt {
    font-size: 15px;
    font-weight: 700;
    line-height: .7626875rem;
    letter-spacing: .091525rem;
    text-transform: uppercase;
}

.catalog-spec dd {
    margin: 1.190688rem 0 0;
    font-size: 17px;
    font-weight: 500;
    line-height: .8898125rem;
    width: 60rem;
}

.catalog-spec small {
    display: block;
    margin-top: .0635625rem;
    color: rgba(255, 255, 255, .54);
    font-size: .5085rem;
    font-weight: 400;
    line-height: .7626875rem;
}

.catalog-actions {
    display: flex;
    gap: .7626875rem;
    padding-top: .3178125rem;
}

.catalog-actions .button {
    min-height: 2.542375rem;
    padding: 0 .8898125rem;
    border-width: .0635625rem;
}

.catalog-actions .button-gold {
    width: 7.627125rem;
    gap: 1.1440625rem;
    font-size: 12px;
    letter-spacing: .10296875rem;
}

.catalog-actions .button img {
    width: 1.0169375rem;
    height: 1.0169375rem;
}

.catalog-actions .button-outline {
    width: 6.67375rem;
    color: var(--gold);
    font-size: 12px;
    letter-spacing: .0711875rem;
}

.catalog-actions .button-outline:hover {
    color: var(--midnight);
}

.catalog-discovery {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% - 6rem);
    max-width: 73.7288125rem;
    margin: 4.35675rem auto 0;
    padding-top: 1.5rem;
    border-top: .0635625rem solid rgba(214, 173, 103, .24);
    padding-bottom: 2rem;
}

.catalog-discovery h3,
.catalog-kicker {
    color: var(--gold);
    font-family: var(--body-font);
    font-size: 15px;
    font-weight: 700;
    line-height: .953375rem;
    letter-spacing: .16525rem;
    text-transform: uppercase;
    transform: none;
}

.catalog-discovery h3 {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.catalog-discovery ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.catalog-discovery li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .953375rem;
    color: white;
    font-size: 20px;
    line-height: 1.6;
}

.catalog-discovery li img {
    width: clamp(32px, 2.5rem, 44px);
    height: clamp(32px, 2.5rem, 44px);
}

.catalog-leaves {
    position: absolute;
    width: 7.627125rem;
    height: 12.07625rem;
    opacity: .17;
    pointer-events: none;
    transform: rotate(-20deg);
}

.catalog-leaves::before,
.catalog-leaves::after {
    position: absolute;
    content: "";
    width: 4.3220625rem;
    height: 1.7796875rem;
    border: .1906875rem solid var(--gold);
    border-radius: 2.773375rem 0 2.773375rem 0;
}

.catalog-leaves::before {
    top: -1.07875rem;
    left: -.1195625rem;
    transform: rotate(-35deg);
}

.catalog-leaves::after {
    top: 1.845rem;
    left: 1.72375rem;
    transform: rotate(-145deg) scaleY(-1);
}

.catalog-leaves--top {
    top: .5rem;
    right: 2.4rem;
}

.catalog-leaves--bottom {
    top: 33.7rem;
    right: 3.6rem;
    transform: rotate(155deg) scale(1.25);
}

.catalog-book--memoir .catalog-leaves--top {
    right: auto;
    left: 5rem;
}

.catalog-book--memoir .catalog-leaves--bottom {
    right: auto;
    left: 4.5rem;
}

.catalog-author {
    display: flex;
    align-items: center;
    min-height: 28.003875rem;
    padding: 4.8769375rem 0;
}

.catalog-author-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 6.3559375rem;
    width: 73.7288125rem;
    margin: auto;
}

.catalog-author-copy {
    max-width: 33.050875rem;
}

.catalog-author h2 {
    margin-top: .7626875rem;
    font-size: 4.3689375rem;
    line-height: 1.05;
}

.catalog-author-description {
    margin-top: .6355625rem;
    font-size: 19px;
    line-height: 1.8;
}
.catalog-author-link {
    display: inline-flex;
    align-items: center;
    gap: .8898125rem;
    margin-top: .953375rem;
    padding-bottom: .3178125rem;
    border-bottom: .0635625rem solid var(--gold);
    color: var(--gold);
    font-size: 18px;
    font-weight: 700;
    line-height: .953375rem;
    letter-spacing: .0953375rem;
    text-transform: uppercase;
}

.catalog-author-link img {
    width: 1.0169375rem;
    height: 1.0169375rem;
}

.catalog-author-quote {
    padding: 2.033875rem 0 2.033875rem 3.8135625rem;
    border-left: .0635625rem solid rgba(214, 173, 103, .4);
    color: var(--gold);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.6695rem;
    font-style: italic;
    font-weight: 500;
    line-height: 3.203375rem;
}

@media (max-width: 991.98px) {
    .catalog-book,
    .catalog-visual {
        min-height: 0;
    }

    .catalog-layout,
    .catalog-book--memoir .catalog-layout {
        display: flex;
        flex-direction: column;
    }

    .catalog-visual,
    .catalog-book--memoir .catalog-visual {
        order: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 653 / 661;
        max-height: 40rem;
    }

    .catalog-visual img {
        object-position: center;
    }

    .catalog-info,
    .catalog-book--memoir .catalog-info {
        order: 1;
        width: calc(100% - 3rem);
        max-width: 44rem;
        margin: 0 auto;
        padding: 3rem 0;
    }

    .catalog-main {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 1.5rem;
        min-height: 0;
    }

    .catalog-copy h2,
    .catalog-author h2 {
        margin-top: 1rem;
        font-size: 3rem;
    }

    .catalog-tagline {
        margin-top: 1.25rem;
        font-size: .625rem;
        line-height: 1.7;
        letter-spacing: .08rem;
    }

    .catalog-description {
        max-width: none;
        margin-top: 1rem;
        font-size: .875rem;
        line-height: 1.75;
    }

    .catalog-details {
        min-height: 0;
        margin-top: 0;
        padding-left: 1.25rem;
        gap: 1.5rem;
        border-width: 1px;
    }

    .catalog-specs {
        width: 100%;
        gap: 1.25rem;
    }

    .catalog-spec {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: .75rem;
    }

    .catalog-spec > img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .catalog-spec dt {
        font-size: .625rem;
        line-height: 1.5;
    }

    .catalog-spec dd {
        margin-top: .25rem;
        font-size: .75rem;
        line-height: 1.5;
    }

    .catalog-spec small {
        margin-top: .2rem;
        font-size: .625rem;
        line-height: 1.5;
    }

    .catalog-actions {
        flex-wrap: wrap;
        gap: .75rem;
        padding: 0;
    }

    .catalog-actions .button {
        width: auto;
        min-height: 2.75rem;
        padding: 0 1rem;
        gap: .75rem;
        border-width: 1px;
        font-size: .625rem;
        letter-spacing: .08rem;
    }

    .catalog-actions .button img {
        width: 1rem;
        height: 1rem;
    }

    .catalog-discovery {
        order: 2;
        width: calc(100% - 3rem);
        max-width: 44rem;
        margin: 0 auto;
        padding-top: 1.5rem;
        padding-bottom: 3rem;
        border-width: 1px;
    }

    .catalog-discovery h3,
    .catalog-kicker {
        font-size: .625rem;
        line-height: 1.6;
    }

    .catalog-discovery h3 {
        font-size: .875rem;
    }

    .catalog-discovery ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
        margin-top: 1.5rem;
    }

    .catalog-discovery li {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        align-items: start;
        gap: .75rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    .catalog-discovery li img {
        width: 2.25rem;
        height: 2.25rem;
    }

    .catalog-leaves {
        display: none;
    }

    .catalog-author {
        min-height: 0;
        padding: 4rem 0;
    }

    .catalog-author-layout {
        width: calc(100% - 3rem);
        max-width: 44rem;
        gap: 2rem;
    }

    .catalog-author-description {
        margin-top: 1rem;
        font-size: .875rem;
        line-height: 1.75;
    }

    .catalog-author-link {
        margin-top: 1rem;
        padding-bottom: .3rem;
        gap: .75rem;
        border-width: 1px;
        font-size: .625rem;
        line-height: 1.6;
    }

    .catalog-author-quote {
        padding: 1.5rem 0 1.5rem 1.5rem;
        border-width: 1px;
        font-size: 2rem;
        line-height: 1.25;
    }
}

@media (max-width: 575.98px) {
    .catalog-main,
    .catalog-author-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .catalog-copy h2,
    .catalog-author h2 {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
    }

    .catalog-details {
        padding: 1.5rem 0 0;
        border-left: 0;
        border-top: 1px solid rgba(214, 173, 103, .24);
    }

    .catalog-specs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .catalog-discovery ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-discovery li {
        align-items: center;
    }

    .catalog-author-copy {
        max-width: none;
    }

    .catalog-author-quote {
        padding: 0 0 0 1.25rem;
    }
}

/* About page — static Bootstrap sections with the existing shared components. */
.about-biography {
    height: 37.4271875rem;
    background: var(--midnight);
}

.about-reflections {
    height: 42.888375rem;
}

.about-values {
    position: relative;
    min-height: 29.8125rem;
    padding: 3.8135625rem 0 4.3220625rem;
    overflow: hidden;
    background: #031119;
}

.about-values-landscape,
.about-values-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.about-values-landscape {
    object-fit: cover;
}

.about-values-shade {
    background: linear-gradient(180deg, rgba(3, 17, 25, .9), rgba(3, 17, 25, .96));
}

.about-values-container {
    /* position: relative; */
    /* width: 75rem; */
}

.about-values-heading {
    text-align: center;
}

.about-values-heading > p {
    color: #eba94c;
    font-size: 17px;
    font-weight: 700;
    line-height: .953375rem;
    letter-spacing: .1589rem;
    text-transform: uppercase;
}

.about-values-heading h2 {
    height: 3.5593125rem;
    padding-top: .5085rem;
    font-size: 4.5145625rem;
    line-height: 1.05;
}

.about-values-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .381375rem;
    height: 3.0625rem;
    padding-top: .6355625rem;
    color: #eba94c;
    font-size: .5085rem;
    line-height: .7626875rem;
}

.about-values-ornament span {
    width: 7.3093125rem;
    height: .0635625rem;
    background: linear-gradient(90deg, rgba(235, 169, 76, 0), rgba(235, 169, 76, .6));
}

.about-values-ornament span:last-child {
    transform: rotate(180deg);
}

.about-values-row {
    padding-top: 2.6695rem;
    align-content: start;
}

.about-value {
    min-height: 8.3898125rem;
    padding: 0 2.2245625rem;
    /* text-align: center; */
}

.about-value + .about-value {
    border-left: .0635625rem solid rgba(235, 169, 76, .24);
}

.about-value > img {
    width: 2.6695rem;
    height: 2.6695rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.about-value h3 {
    height: 2.92375rem;
    padding-top: .6355625rem;
    font-size: 1.966rem;
    line-height: normal;
    letter-spacing: 2px;
}

.about-value p {
    /* max-width: 9.533875rem; */
    margin: .1906875rem auto 0;
    font-size: 17px;
    line-height: 1.04875rem;
}

.about-value:nth-child(3) p {
    max-width: none;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .about-biography,
    .about-reflections {
        height: auto;
    }

    .about-biography .author-signoff {
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .about-biography .signature {
        white-space: nowrap;
    }

    .about-values {
        min-height: 0;
        padding: 3.5rem 0;
    }

    .about-values-container {
        width: calc(100% - 3rem);
        max-width: 44rem;
    }

    .about-values-heading > p {
        font-size: .625rem;
        line-height: 1.6;
        letter-spacing: .14rem;
    }

    .about-values-heading h2 {
        height: auto;
        padding: 0;
        margin-top: 1rem;
        font-size: 3rem;
    }

    .about-values-ornament {
        height: auto;
        padding-top: 1rem;
        gap: .5rem;
        font-size: .625rem;
        line-height: 1;
    }

    .about-values-ornament span {
        width: 5rem;
        height: 1px;
    }

    .about-values-row {
        padding-top: 2rem;
        row-gap: 2rem;
    }

    .about-value {
        min-height: 0;
        padding: 0 1rem;
    }

    .about-value + .about-value {
        border-width: 1px;
    }

    .about-value:nth-child(3) {
        border-left: 0;
    }

    .about-value > img {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto;
    }

    .about-value h3 {
        height: auto;
        padding: 0;
        margin-top: .75rem;
        font-size: 1.8rem;
    }

    .about-value p {
        max-width: 11rem;
        margin-top: .5rem;
        font-size: .8rem;
        line-height: 1.6;
    }

    .about-value:nth-child(3) p {
        max-width: 11rem;
        white-space: normal;
    }
}

@media (max-width: 575.98px) {
    .about-values-heading h2 {
        font-size: 2.5rem;
    }
}

/* Contact page. Keep the shared navigation and give this hero its Figma artwork. */
.opening-story:has(.contact-hero-composition) > .hero-art,
.opening-story:has(.contact-hero-composition) > .hero-scrim {
    display: none;
}

.contact-hero-art,
.contact-hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.contact-hero-art {
    overflow: hidden;
}

.contact-hero-art img {
    position: absolute;
    top: 0;
    left: -29.14%;
    width: 132.02%;
    height: 100%;
}

.contact-hero-scrim {
    background: linear-gradient(90deg, #0c111b 0%, rgba(12, 17, 27, .9) 38%, rgba(12, 17, 27, .75) 76%, rgba(12, 17, 27, .3) 100%);
}

.contact-hero-copy .hero-description {
    width: 33.9375rem;
}

.contact-hero-quote-column {
    padding-left: 2.2494375rem;
}

.contact-hero-quote {
    width: 33.6875rem;
    min-height: 16.25rem;
    padding: 2.033875rem 0 2.033875rem 6.25rem;
    border-left: .0635625rem solid rgba(214, 173, 103, .4);
}

.contact-hero-quote blockquote {
    width: 29.8093125rem;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.6695rem;
    font-style: italic;
    font-weight: 500;
    line-height: 3.203375rem;
}

.contact-hero-quote figcaption {
    margin-top: 1.25rem;
    color: var(--gold);
    font-size: .801rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .4004875rem;
    text-transform: uppercase;
}

.contact-content {
    position: relative;
    min-height: 57.5211875rem;
    padding: 6.038125rem 0;
    overflow: hidden;
}

.contact-content::after {
    position: absolute;
    top: 42.266875rem;
    left: calc(100% - 16.525625rem);
    width: 21.6101875rem;
    height: 21.6101875rem;
    border: .0635625rem solid rgba(235, 169, 76, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 3.8135625rem rgba(235, 169, 76, .02), 0 0 0 7.627125rem rgba(235, 169, 76, .02);
    content: "";
    pointer-events: none;
}

.contact-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 28.7685625rem 38.921875rem;
    gap: 6.038125rem;
    width: 73.7288125rem;
}

.contact-introduction {
    padding-top: 1.7796875rem;
}

.contact-introduction h2 {
    margin-top: .7626875rem;
    font-size: 4.5145625rem;
    line-height: 1.05;
}

.contact-introduction-description {
    margin-top: 1.3983125rem;
    color: white;
    font-size: 17px;
    line-height: 1.8;
}

.contact-paths {
    margin-top: 2.288125rem;
}

.contact-path {
    display: grid;
    grid-template-columns: 2.92375rem minmax(0, 1fr);
    gap: 1.1440625rem;
    min-height: 7.794125rem;
    padding: 1.3983125rem 0;
    border-top: .0635625rem solid rgba(214, 173, 103, .17);
}

.contact-path:last-child {
    border-bottom: .0635625rem solid rgba(214, 173, 103, .17);
}

.contact-path-icon {
    display: grid;
    place-items: center;
    width: 2.7330625rem;
    height: 2.7330625rem;
    border: .0635625rem solid rgba(214, 173, 103, .45);
}

.contact-path-icon img {
    width: 1.589rem;
    height: 1.589rem;
}

.contact-path h3 {
    font-size: 1.966rem;
    line-height: 1;
}

.contact-path p {
    margin-top: .127125rem;
    color: white;
    font-size: 18px;
    line-height: 1.8;
}

.contact-path a {
    display: inline-block;
    margin-top: .69925rem;
    color: var(--gold);
    font-size: 15px;
    line-height: .8580625rem;
    letter-spacing: .0286rem;
}

.contact-path a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.contact-response-time {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.207625rem;
    color: rgba(255, 255, 255, .4);
    font-size: 14px;
    line-height: .7626875rem;
    letter-spacing: .05085rem;
    text-transform: uppercase;
}

.contact-response-time strong {
    color: rgba(255, 255, 255, .72);
    font-weight: 600;
}

.contact-form-panel {
    position: relative;
    min-height: 45.4449375rem;
    padding: 3.305rem 3.495625rem 3.4rem;
    filter: drop-shadow(0 1.589rem 2.2245625rem rgba(0, 0, 0, .3));
}

.contact-form-panel::before {
    position: absolute;
    inset: .7626875rem;
    border: .0635625rem solid rgba(214, 173, 103, .22);
    content: "";
    pointer-events: none;
}

.contact-form-kicker {
    height: 1.5254375rem;
    padding-top: .5085rem;
    color: var(--gold);
    font-size: 17px;
    font-weight: 700;
    line-height: .7626875rem;
    letter-spacing: .11695rem;
    text-transform: uppercase;
}

.contact-form-heading h2 {
    height: 3.9406875rem;
    padding-top: .3178125rem;
    font-size: 3.125rem;
    line-height: normal;
}

.contact-form-heading > p:last-child {
    height: 1.1440625rem;
    padding-top: .127125rem;
    font-size: 18px;
    line-height: .9724375rem;
}

.contact-message-form {
    position: relative;
    display: grid;
    gap: 1.207625rem;
    margin-top: 1.8623125rem;
}

.contact-name-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1440625rem;
}

.contact-name-row > .contact-field {
    width: auto;
}

.contact-field > label {
    display: block;
    height: 1.2711875rem;
    padding-bottom: .5085rem;
    color: var(--gold);
    font-size: 15px;
    font-weight: 700;
    line-height: .7626875rem;
    letter-spacing: .0661rem;
    text-transform: uppercase;
}

.contact-field .form-control,
.contact-field .form-select {
    width: 100%;
    height: 2.41525rem;
    padding: .5720625rem 0;
    border: 0;
    border-bottom: .0635625rem solid rgba(214, 173, 103, .35);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: var(--body-font);
    font-size: .699125rem;
    line-height: 1.04875rem;
    box-shadow: none;
}

.contact-field .form-control::placeholder {
    color: #fff;
    opacity: 1;
}

.contact-field .form-control:focus,
.contact-field .form-select:focus {
    border-color: var(--gold);
    outline: 1px solid var(--gold);
    outline-offset: 3px;
}

.contact-select {
    position: relative;
}

.contact-field .form-select {
    padding: .5720625rem 1.5rem .5720625rem .25425rem;
    appearance: none;
    cursor: pointer;
}

.contact-select option {
    background: var(--midnight);
    color: #fff;
}

.contact-select > img {
    position: absolute;
    top: 50%;
    right: 0;
    width: .6355625rem;
    height: .381375rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.contact-message-field {
    padding-bottom: .381375rem;
}

.contact-message-field textarea.form-control {
    min-height: 7.3093125rem;
    height: 7.5rem;
    resize: vertical;
}

.contact-consent {
    display: flex;
    align-items: flex-start;
    gap: .5720625rem;
    min-height: .953375rem;
    font-size: 15px;
    line-height: .7626875rem;
    cursor: pointer;
}

.contact-consent .form-check-input {
    flex: 0 0 .8898125rem;
    width: .8898125rem;
    height: .8898125rem;
    margin: .0635625rem 0 0;
    border: .0635625rem solid #767676;
    border-radius: .127125rem;
    background-color: #fff;
    box-shadow: none;
    cursor: pointer;
}

.contact-consent .form-check-input:checked {
    border-color: var(--gold);
    background-color: var(--gold);
}

.contact-submit-row {
    padding-top: .25425rem;
}

.contact-send-button {
    width: 10.8050625rem;
    min-height: 2.796625rem;
    gap: .8898125rem;
    padding: 0 1rem;
    border: .0635625rem solid rgba(180, 77, 106, .84);
    background: var(--gold);
    color: #fff;
    font-size: .5085rem;
    line-height: .7626875rem;
    letter-spacing: .08644375rem;
}

.contact-send-button:hover {
    background: #e9c485;
}

.contact-send-button img {
    width: 1.0805rem;
    height: 1.0805rem;
}

.contact-letters {
    display: flex;
    align-items: center;
    height: 20.6875rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.contact-letters-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 8.223rem;
    gap: 6.3559375rem;
    width: 73.7288125rem;
    height: 10.9375rem;
}

.contact-letters-copy {
    align-self: center;
    height: 7.68275rem;
}

.contact-letters-copy h2 {
    margin-top: .6355625rem;
    font-size: 4.5145625rem;
    line-height: 1.05;
}

.contact-letters-invitation {
    position: relative;
    font-size: .699125rem;
    line-height: 1.1885625rem;
}

.contact-letters-invitation > p:first-child {
    line-height: 1.8;
    max-width: 31.7796875rem;
    font-size: 16px;
}

.contact-letters-form {
    display: flex;
    height: 3.1144375rem;
    margin-top: 1.2711875rem;
    border-bottom: .0635625rem solid rgba(255, 255, 255, .2);
}

.contact-letters-form input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
}

.contact-letters-form input::placeholder {
    color: #fff;
    opacity: 1;
}

.contact-letters-form button {
    display: inline-flex;
    align-items: center;
    gap: .7626875rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gold);
    font-size: .5085rem;
    font-weight: 700;
    line-height: .7626875rem;
    letter-spacing: .07626875rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.contact-letters-form button img {
    width: 1.0169375rem;
    height: 1.0169375rem;
}

.contact-letters-note {
    margin-top: .699125rem;
    font-size: 17px;
    line-height: .7626875rem;
}

@media (max-width: 991.98px) {
    .opening-story:has(.contact-hero-composition) {
        min-height: 48rem;
        padding-bottom: 5rem;
    }

    .contact-hero-art img {
        left: -65%;
        width: 200%;
        object-fit: cover;
        object-position: center;
    }

    .contact-hero-scrim {
        background: linear-gradient(180deg, rgba(12, 17, 27, .9), rgba(12, 17, 27, .65) 55%, rgba(12, 17, 27, .85));
    }

    .contact-hero-copy .hero-description {
        width: 100%;
    }

    .contact-hero-quote-column {
        padding-left: 0;
        margin-top: 2rem;
    }

    .contact-hero-quote {
        width: 100%;
        min-height: 0;
        padding: .5rem 0 .5rem 1.5rem;
        border-width: 1px;
    }

    .contact-hero-quote blockquote {
        width: 100%;
        max-width: 30rem;
        font-size: 2rem;
        line-height: 1.2;
    }

    .contact-hero-quote figcaption {
        margin-top: 1rem;
        font-size: .625rem;
        letter-spacing: .25rem;
    }

    .contact-content {
        min-height: 0;
        padding: 4rem 0;
    }

    .contact-content::after {
        top: auto;
        bottom: -8rem;
        left: 80%;
    }

    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        width: calc(100% - 3rem);
        max-width: 44rem;
    }

    .contact-introduction {
        padding-top: 0;
    }

    .contact-introduction h2,
    .contact-letters-copy h2 {
        margin-top: 1rem;
        font-size: 3.5rem;
    }

    .contact-introduction-description {
        margin-top: 1.5rem;
        font-size: .875rem;
        line-height: 1.75;
    }

    .contact-paths {
        margin-top: 2rem;
    }

    .contact-path {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: 1rem;
        min-height: 0;
        padding: 1.5rem 0;
        border-width: 1px;
    }

    .contact-path-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-width: 1px;
    }

    .contact-path-icon img {
        width: 1.6rem;
        height: 1.6rem;
    }

    .contact-path h3 {
        font-size: 1.8rem;
    }

    .contact-path p {
        margin-top: .5rem;
        font-size: .8125rem;
        line-height: 1.6;
    }

    .contact-path a {
        margin-top: .75rem;
        font-size: .75rem;
        line-height: 1.5;
        letter-spacing: .025rem;
    }

    .contact-response-time {
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: 1rem;
        font-size: .6rem;
        line-height: 1.6;
        letter-spacing: .05rem;
    }

    .contact-form-panel {
        min-height: 0;
        padding: 2rem;
        filter: none;
    }

    .contact-form-panel::before {
        inset: 0;
        border-width: 1px;
    }

    .contact-form-kicker {
        height: auto;
        padding: 0;
        font-size: .625rem;
        line-height: 1.5;
        letter-spacing: .14rem;
    }

    .contact-form-heading h2 {
        height: auto;
        padding: 0;
        margin-top: .75rem;
        font-size: 2.75rem;
        line-height: 1.05;
    }

    .contact-form-heading > p:last-child {
        height: auto;
        padding: 0;
        margin-top: 1rem;
        font-size: .75rem;
        line-height: 1.6;
    }

    .contact-message-form {
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .contact-name-row {
        gap: 1rem;
    }

    .contact-field > label {
        height: auto;
        padding: 0;
        margin-bottom: .5rem;
        font-size: .625rem;
        line-height: 1.5;
        letter-spacing: .06rem;
    }

    .contact-field .form-control,
    .contact-field .form-select {
        min-height: 2.75rem;
        height: 2.75rem;
        padding: .5rem 0;
        border-width: 1px;
        font-size: 1rem;
        line-height: 1.6;
    }

    .contact-field .form-select {
        padding-right: 1.5rem;
    }

    .contact-select > img {
        width: .75rem;
        height: .45rem;
    }

    .contact-message-field {
        padding-bottom: 0;
    }

    .contact-message-field textarea.form-control {
        height: 9rem;
        min-height: 7rem;
    }

    .contact-consent {
        gap: .75rem;
        min-height: 1.25rem;
        font-size: .75rem;
        line-height: 1.6;
    }

    .contact-consent .form-check-input {
        flex-basis: 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
        margin-top: .15rem;
        border-width: 1px;
        border-radius: 2px;
    }

    .contact-submit-row {
        padding-top: 0;
    }

    .contact-send-button {
        width: auto;
        min-height: 3rem;
        padding: 0 1.25rem;
        gap: .75rem;
        border-width: 1px;
        font-size: .625rem;
        line-height: 1.5;
        letter-spacing: .08rem;
    }

    .contact-send-button img {
        width: 1rem;
        height: 1rem;
    }

    .contact-letters {
        height: auto;
        padding: 4rem 0;
    }

    .contact-letters-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 2rem;
        width: calc(100% - 3rem);
        max-width: 44rem;
        height: auto;
    }

    .contact-letters-copy {
        height: auto;
    }

    .contact-letters-invitation {
        font-size: .875rem;
        line-height: 1.75;
    }

    .contact-letters-invitation > p:first-child {
        max-width: none;
    }

    .contact-letters-form {
        min-height: 3.25rem;
        height: auto;
        margin-top: 1.5rem;
        border-width: 1px;
    }

    .contact-letters-form input {
        font-size: 1rem;
    }

    .contact-letters-form button {
        min-height: 3.25rem;
        gap: .5rem;
        font-size: .625rem;
        line-height: 1.5;
        letter-spacing: .05rem;
    }

    .contact-letters-form button img {
        width: 1rem;
        height: 1rem;
    }

    .contact-letters-note {
        margin-top: .75rem;
        font-size: .625rem;
        line-height: 1.6;
    }

}

@media (max-width: 575.98px) {
    .contact-introduction h2,
    .contact-letters-copy h2 {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
    }

    .contact-form-panel {
        padding: 1.5rem;
    }

    .contact-form-heading h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 374.98px) {
    .contact-name-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .contact-form-panel {
        padding: 1.25rem;
    }

    .contact-letters-form {
        flex-wrap: wrap;
    }

    .contact-letters-form input {
        flex-basis: 100%;
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}