:root {
    color-scheme: light;
    --paper: #f8f3eb;
    --paper-light: #fffcf6;
    --ink: #2e1c20;
    --ink-muted: #695653;
    --wine: #652638;
    --wine-dark: #49192a;
    --line: #e5d8cb;
    --serif: Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
}

body > main {
    flex: 1;
}

a {
    color: inherit;
}

svg {
    display: block;
}

:focus-visible {
    outline: 2px solid var(--wine);
    outline-offset: 4px;
}

.page-shell {
    width: min(100% - 80px, 1160px);
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 10;
    top: 10px;
    left: 10px;
    padding: 8px 14px;
    transform: translateY(-150%);
    background: var(--wine-dark);
    color: white;
}

.skip-link:focus {
    transform: none;
}

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

.masthead__inner {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font: bold 1.65rem/1 var(--serif);
    letter-spacing: -.045em;
    text-decoration: none;
    white-space: nowrap;
}

.wordmark__mark {
    width: 36px;
    height: 36px;
    color: var(--wine);
}

.wordmark__period {
    color: #a54b5f;
}

.masthead__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--wine);
}

.masthead__nav a {
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}

.masthead__nav a:hover {
    color: var(--wine-dark);
}

.catalog-hero {
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    align-items: center;
    gap: clamp(30px, 6vw, 90px);
    padding-block: clamp(36px, 4vw, 56px);
}

.eyebrow {
    margin: 0 0 .55rem;
    color: var(--wine);
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .17em;
    line-height: 1.45;
    text-transform: uppercase;
}

.catalog-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.catalog-hero__eyebrow span {
    color: #9e475d;
    font-size: .85rem;
}

.catalog-hero h1 {
    margin: 0;
    font: normal clamp(3.3rem, 6.7vw, 6.1rem)/.96 var(--serif);
    letter-spacing: -.078em;
}

.catalog-hero h1 em {
    display: block;
    color: var(--wine);
    font-weight: normal;
    letter-spacing: -.085em;
}

.catalog-hero__description {
    max-width: 34ch;
    margin: 1.25rem 0 1.5rem;
    color: var(--ink-muted);
    font-size: clamp(.95rem, 1.4vw, 1.07rem);
}

.catalog-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #d5bdaf;
    border-radius: 7px;
    background: var(--paper-light);
    color: var(--wine);
    font-size: .825rem;
    font-weight: 700;
    text-decoration: none;
}

.catalog-hero__link:hover {
    border-color: var(--wine);
    background: #f5e7e4;
}

.catalog-hero__link svg {
    width: 17px;
    height: 17px;
}

.catalog-hero__art {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 260px;
    max-height: 310px;
    aspect-ratio: 1.45;
    border-radius: 11px;
    background:
        radial-gradient(ellipse at 54% 38%, #933f55 0, transparent 59%),
        radial-gradient(ellipse at 0 0, #84354c 0, transparent 40%),
        linear-gradient(137deg, #722a40, #411727 82%);
    box-shadow: 0 12px 32px #4b162622;
}

.catalog-hero__art::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(#f8d7bd 0.5px, transparent 0.8px);
    background-size: 13px 13px;
    content: "";
    opacity: .22;
    mask-image: linear-gradient(115deg, black, transparent 42%, transparent 61%, black);
}

.catalog-hero__art-frame {
    position: absolute;
    inset: 14px;
    border: 1px solid #edc6a660;
    border-radius: 5px;
}

.catalog-hero__art-orbit {
    position: absolute;
    inset: 15% 17%;
    border: 1px solid #f4cba846;
    border-radius: 50%;
    transform: rotate(-27deg);
}

.catalog-hero__art-orbit::after {
    position: absolute;
    inset: 9px -14px;
    border: 1px solid #f4cba82c;
    border-radius: 50%;
    content: "";
}

.catalog-hero__spark {
    position: absolute;
    color: #f9dfb5;
    line-height: 1;
    text-shadow: 0 0 13px #f8c88999;
}

.catalog-hero__spark--first {
    top: 23%;
    left: 17%;
    font-size: 1.55rem;
}

.catalog-hero__spark--second {
    right: 17%;
    top: 27%;
    font-size: 1.06rem;
}

.catalog-hero__spark--third {
    right: 21%;
    bottom: 18%;
    font-size: 1.7rem;
}

.catalog-hero__spark--fourth {
    left: 18%;
    bottom: 22%;
    font-size: .85rem;
}

.catalog-hero__stationery {
    position: absolute;
    inset: 0;
    transform: rotate(-10deg);
}

.catalog-hero__letter {
    position: absolute;
    top: 13%;
    left: 33%;
    width: 39%;
    height: 65%;
    padding-top: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: 1px solid #efd2a7;
    border-radius: 3px;
    background: radial-gradient(ellipse at 31% 21%, #fff7df, #e8caa4);
    box-shadow: 0 12px 18px #330b2363;
    color: var(--wine);
    transform: rotate(14deg);
}

.catalog-hero__letter::after {
    position: absolute;
    inset: 7px;
    border: 1px solid #aa67765c;
    border-radius: 2px;
    content: "";
}

.catalog-hero__letter-text {
    font: italic clamp(1.35rem, 3vw, 2.35rem)/1.14 var(--serif);
    letter-spacing: -.08em;
}

.catalog-hero__letter-lines {
    width: 49%;
    height: 11px;
    margin-top: 8px;
    border-block: 1px solid #805a543f;
}

.catalog-hero__envelope {
    position: absolute;
    top: 43%;
    left: 24%;
    width: 52%;
    height: 39%;
    overflow: hidden;
    border: 1px solid #eaaa995c;
    border-radius: 4px;
    background:
        linear-gradient(145deg, transparent 49%, #e9b19655 49.5%, transparent 50.5%) 100% 100% / 54% 100% no-repeat,
        linear-gradient(35deg, transparent 49%, #e9b19655 49.5%, transparent 50.5%) 0 100% / 54% 100% no-repeat,
        linear-gradient(120deg, #bb6375, #903b53 72%);
    box-shadow: 0 20px 25px #2508148a, inset 0 0 18px #621f3c50;
}

.catalog-hero__flap {
    position: absolute;
    inset: -1px 0 0;
    background: #edbd986d;
    clip-path: polygon(0 0, 100% 0, 53% 66%, 47% 66%);
}

.catalog-hero__flap::after {
    position: absolute;
    inset: 0 1px 2px;
    background: linear-gradient(170deg, #c36e7a, #a74a62);
    clip-path: inherit;
    content: "";
}

.catalog-hero__seal {
    position: absolute;
    top: 61%;
    left: 50%;
    width: 35px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid #d39a7a;
    border-radius: 46% 54% 53% 47%;
    background: radial-gradient(circle at 36% 25%, #c57765, #984455 78%);
    box-shadow: 0 3px 6px #4e132c75, inset 0 0 0 2px #ad595a;
    color: #f8dcb1;
    transform: translate(-50%, -50%) rotate(9deg);
}

.catalog-hero__seal svg {
    width: 17px;
    height: 17px;
}

.collection {
    padding: 30px 0 clamp(52px, 7vw, 90px);
    border-top: 1px solid var(--line);
    scroll-margin-top: 20px;
}

.collection__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 23px;
}

.collection__header h2 {
    margin: 0;
    font: normal clamp(2.1rem, 4vw, 3rem)/1 var(--serif);
    letter-spacing: -.055em;
}

.collection__count {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 0 2px;
    color: var(--ink-muted);
    font-size: .83rem;
    font-weight: 550;
}

.collection__count span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ad5c6c;
}

.dedication-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.dedication-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper-light);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dedication-card:hover {
    border-color: #c0a28d;
    box-shadow: 0 14px 26px #613b2a13;
}

.dedication-card__media {
    overflow: hidden;
    aspect-ratio: 1.78;
    background: var(--wine-dark);
}

.dedication-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .34s ease;
}

.dedication-card:hover img {
    transform: scale(1.045);
}

.dedication-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(17px, 2.5vw, 25px);
}

.dedication-card__type {
    align-self: start;
    margin: 0 0 9px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f4e8e4;
    color: var(--wine);
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.dedication-card h3 {
    margin: 0 0 .4rem;
    font: normal clamp(1.55rem, 2.4vw, 2.15rem)/1.1 var(--serif);
    letter-spacing: -.046em;
    overflow-wrap: anywhere;
}

.dedication-card__description {
    margin: 0 0 1rem;
    color: var(--ink-muted);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.dedication-card__action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    padding-top: .65rem;
    color: var(--wine);
    font-size: .83rem;
    font-weight: 720;
}

.dedication-card__arrow {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border: 1px solid #dcc5ba;
    border-radius: 50%;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.dedication-card__arrow svg {
    width: 17px;
    height: 17px;
}

.dedication-card:hover .dedication-card__arrow,
.dedication-card:focus-visible .dedication-card__arrow {
    border-color: var(--wine);
    background: var(--wine);
    color: var(--paper-light);
}

.collection__empty {
    padding: clamp(24px, 5vw, 52px);
    border: 1px dashed #c6a99c;
    border-radius: 10px;
    text-align: center;
    color: var(--ink-muted);
}

.collection__empty p {
    margin: 0;
}

.collection__empty a {
    display: inline-block;
    margin-top: .65rem;
    color: var(--wine);
    text-underline-offset: .2em;
}

.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: .85rem;
}

.catalog-pagination p {
    margin: 0;
}

.catalog-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-pagination a,
.catalog-pagination__current,
.catalog-pagination__ellipsis {
    display: grid;
    min-width: 39px;
    min-height: 39px;
    place-items: center;
    padding-inline: 6px;
    border-radius: 5px;
    text-decoration: none;
}

.catalog-pagination a {
    border: 1px solid var(--line);
    background: var(--paper-light);
    color: var(--wine);
}

.catalog-pagination a:hover {
    border-color: var(--wine);
}

.catalog-pagination__current {
    background: var(--wine);
    color: var(--paper-light);
}

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

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-block: 22px;
}

.site-footer__mark {
    font: bold 1.25rem/1 var(--serif);
    letter-spacing: -.045em;
    text-decoration: none;
    white-space: nowrap;
}

.site-footer__admin {
    color: var(--ink-muted);
    font-size: .79rem;
    text-align: end;
    text-underline-offset: .2em;
}

.site-footer__admin:hover {
    color: var(--wine);
}

@media (max-width: 900px) {
    .page-shell {
        width: min(100% - 48px, 1160px);
    }

    .catalog-hero {
        gap: 30px;
    }

    .catalog-hero__art {
        min-height: 215px;
    }

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

@media (max-width: 650px) {
    .page-shell {
        width: calc(100% - 36px);
    }

    .masthead__inner {
        min-height: 61px;
    }

    .wordmark {
        gap: 8px;
        font-size: 1.45rem;
    }

    .wordmark__mark {
        width: 32px;
        height: 32px;
    }

    .masthead__nav {
        gap: .75rem;
        font-size: .8rem;
    }

    .catalog-hero {
        grid-template-columns: 1fr;
        gap: 23px;
        padding-block: 34px 30px;
    }

    .catalog-hero h1 {
        font-size: clamp(2.9rem, 11vw, 4.25rem);
    }

    .catalog-hero__description {
        margin-block: .9rem 1.1rem;
    }

    .catalog-hero__art {
        min-height: 158px;
        max-height: 230px;
        aspect-ratio: 1.85;
    }

    .catalog-hero__art-frame {
        inset: 10px;
    }

    .catalog-hero__letter-text {
        font-size: 1.6rem;
    }

    .catalog-hero__seal {
        width: 28px;
    }

    .catalog-hero__seal svg {
        width: 13px;
        height: 13px;
    }

    .collection {
        padding-top: 22px;
    }

    .collection__header {
        margin-bottom: 17px;
    }

    .dedication-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dedication-card,
    .dedication-card__media img,
    .dedication-card__arrow {
        transition: none;
    }

    .dedication-card:hover img {
        transform: none;
    }
}