.dynasties-page .desktop-nav a[aria-current="page"]::after { width: 100%; }

.dynasties-hero {
    min-height: 760px;
    padding: 190px 9vw 110px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 73% 43%, rgba(159, 52, 43, .14) 0 15%, transparent 15.2%),
        linear-gradient(115deg, rgba(255,255,255,.2), transparent 50%),
        #ded4bd;
}

.dynasties-hero::before,
.dynasties-hero::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(29, 33, 28, .13);
    border-radius: 50%;
}

.dynasties-hero::before { width: 540px; height: 540px; right: 12vw; top: 125px; }
.dynasties-hero::after { width: 680px; height: 680px; right: 7.4vw; top: 55px; }
.dynasties-hero__copy { max-width: 760px; position: relative; z-index: 2; }
.dynasties-hero__copy > p:last-child { width: min(470px, 100%); margin: 42px 0 0; font: italic 21px/1.5 "Cormorant Garamond", serif; }
.dynasties-hero__mark { position: absolute; z-index: 1; right: 20vw; top: 230px; color: rgba(159, 52, 43, .78); font: 400 clamp(130px, 17vw, 250px)/1 "Noto Serif SC", serif; }
.dynasties-hero__caption { position: absolute; right: 5vw; bottom: 55px; margin: 0; padding-left: 18px; border-left: 1px solid var(--red); font: italic 15px/1.45 "Cormorant Garamond", serif; }

.dynasty-library { padding: 125px 8vw 150px; }
.library-head { display: grid; grid-template-columns: 1fr minmax(290px, 420px); gap: 8vw; align-items: end; margin-bottom: 75px; }
.library-tools label { display: block; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .2em; font-size: 8px; font-weight: 600; }
.search-field { position: relative; border-bottom: 1px solid var(--ink); }
.search-field input { width: 100%; border: 0; outline: 0; padding: 9px 32px 12px 0; background: transparent; color: var(--ink); font: 400 18px/1.2 "Cormorant Garamond", serif; }
.search-field input::placeholder { color: rgba(29,33,28,.48); }
.search-field span { position: absolute; right: 2px; top: 5px; color: var(--red); font-size: 22px; }
.dynasty-filters { display: flex; gap: 8px; margin-top: 20px; }
.dynasty-filters button { border: 1px solid var(--line); border-radius: 30px; padding: 8px 16px; background: transparent; color: var(--ink); cursor: pointer; text-transform: uppercase; letter-spacing: .15em; font-size: 8px; }
.dynasty-filters button:hover,
.dynasty-filters button.active { background: var(--ink); color: var(--paper-light); border-color: var(--ink); }

.dynasty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dynasty-card { min-height: 440px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .35s; }
.dynasty-card[hidden] { display: none; }
.dynasty-card:hover { background: rgba(255,255,255,.23); }
.dynasty-card > a { min-height: inherit; display: flex; flex-direction: column; padding: 34px 38px 35px; }
.dynasty-card__top { display: flex; justify-content: space-between; align-items: flex-start; color: var(--red); }
.dynasty-card__top span:first-child { font-size: 9px; letter-spacing: .2em; }
.dynasty-card__top span:last-child { font: 400 47px/1 "Noto Serif SC", serif; color: rgba(29,33,28,.2); transition: color .35s, transform .35s; }
.dynasty-card:hover .dynasty-card__top span:last-child { color: var(--red); transform: rotate(-5deg); }
.dynasty-card__body { margin: auto 0; }
.dynasty-card__body > p:first-child { color: var(--red); text-transform: uppercase; letter-spacing: .18em; font-size: 8px; font-weight: 500; }
.dynasty-card h3 { margin: 10px 0 19px; font: 500 clamp(38px, 4vw, 58px)/.95 "Cormorant Garamond", serif; letter-spacing: -.035em; }
.dynasty-card__excerpt { max-width: 570px; margin: 0; color: rgba(29,33,28,.7); font-size: 12px; line-height: 1.75; }
.dynasty-card__link { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--line); text-transform: uppercase; letter-spacing: .19em; font-size: 8px; font-weight: 600; }
.dynasty-card__link i { color: var(--red); font: normal 18px/1 sans-serif; transition: transform .3s; }
.dynasty-card:hover .dynasty-card__link i { transform: translate(4px, -4px); }
.no-results { padding: 70px 0; text-align: center; font: italic 24px/1.4 "Cormorant Garamond", serif; }
.archive-message { padding: 100px 20px; border: 1px solid var(--line); text-align: center; }
.archive-message > span { color: var(--red); font: 48px/1 "Noto Serif SC", serif; }
.archive-message h3 { margin: 15px 0 8px; font: 500 38px/1 "Cormorant Garamond", serif; }
.archive-message p { margin: 0; font-size: 13px; }

.dynasty-article-hero { min-height: 720px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 175px 9vw 105px; background: #d9cfb9; border-bottom: 1px solid var(--line); }
.dynasty-article-hero::after { content: ""; position: absolute; width: 610px; height: 610px; border-radius: 50%; right: -90px; top: 70px; background: rgba(159,52,43,.11); box-shadow: 0 0 0 90px rgba(29,33,28,.025), 0 0 0 180px rgba(29,33,28,.02); }
.dynasty-article-hero__copy { position: relative; z-index: 2; max-width: 900px; }
.back-link { display: inline-block; margin-bottom: 60px; text-transform: uppercase; letter-spacing: .18em; font-size: 9px; font-weight: 600; }
.dynasty-article-hero h1 { font-size: clamp(65px, 9vw, 126px); line-height: .85; }
.article-deck { max-width: 660px; margin: 36px 0 28px; color: rgba(29,33,28,.76); font: 400 19px/1.55 "Cormorant Garamond", serif; }
.dynasty-article-hero__mark { position: absolute; right: 8vw; top: 205px; z-index: 1; color: rgba(159,52,43,.55); font: 400 clamp(150px, 20vw, 280px)/1 "Noto Serif SC", serif; }

.dynasty-reading { display: grid; grid-template-columns: minmax(220px, 27%) minmax(0, 1fr); max-width: 1380px; margin: 0 auto; padding: 120px 7vw 145px; }
.reading-rail { padding-right: 4vw; }
.reading-rail__inner { position: sticky; top: 40px; }
.reading-rail__inner > p { margin: 0 0 22px; color: var(--red); text-transform: uppercase; letter-spacing: .2em; font-size: 8px; font-weight: 600; }
.reading-rail nav { max-height: 56vh; overflow: auto; border-left: 1px solid var(--line); scrollbar-width: thin; }
.reading-rail nav a { display: block; padding: 7px 0 7px 18px; color: rgba(29,33,28,.56); font: 400 14px/1.25 "Cormorant Garamond", serif; transition: color .2s, border-color .2s; border-left: 2px solid transparent; margin-left: -1px; }
.reading-rail nav a:hover,
.reading-rail nav a.active { color: var(--ink); border-left-color: var(--red); }
.reading-progress { height: 2px; margin: 25px 0 16px; background: var(--line); }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--red); }
.reading-rail__inner > a { text-transform: uppercase; letter-spacing: .17em; font-size: 8px; font-weight: 600; }
.dynasty-prose { min-width: 0; max-width: 790px; padding-left: clamp(30px, 6vw, 90px); border-left: 1px solid var(--line); }
.dynasty-prose > h3:first-child { display: none; }
.dynasty-prose h2,
.dynasty-prose h3,
.dynasty-prose h4 { scroll-margin-top: 35px; font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: -.025em; }
.dynasty-prose h3 { margin: 82px 0 22px; font-size: clamp(35px, 4vw, 50px); line-height: 1; }
.dynasty-prose h3:first-of-type + p::first-letter { float: left; margin: 5px 10px 0 0; color: var(--red); font: 500 72px/.72 "Cormorant Garamond", serif; }
.dynasty-prose p { margin: 0 0 25px; color: #33372f; font: 400 19px/1.78 "Cormorant Garamond", serif; }
.dynasty-prose ul,
.dynasty-prose ol { padding-left: 26px; font: 400 18px/1.7 "Cormorant Garamond", serif; }
.dynasty-prose blockquote { margin: 50px 0; padding: 10px 0 10px 30px; border-left: 2px solid var(--red); font-size: 30px; line-height: 1.25; }
.next-history { padding: 110px 8vw 120px; text-align: center; background: #252a24; color: var(--paper-light); }
.next-history h2 { margin-bottom: 40px; }
.next-history .text-link { border-color: var(--paper-light); }

@media (max-width: 800px) {
    .dynasties-hero { min-height: 670px; padding: 145px 25px 80px; align-items: flex-start; }
    .dynasties-hero::before { width: 320px; height: 320px; right: -105px; top: 275px; }
    .dynasties-hero::after { width: 410px; height: 410px; right: -150px; top: 230px; }
    .dynasties-hero__copy > p:last-child { margin-top: 30px; font-size: 18px; }
    .dynasties-hero__mark { right: 0; top: 340px; font-size: 135px; }
    .dynasties-hero__caption { display: none; }
    .dynasty-library { padding: 85px 25px 100px; }
    .library-head { grid-template-columns: 1fr; gap: 48px; margin-bottom: 50px; }
    .dynasty-grid { grid-template-columns: 1fr; }
    .dynasty-card { min-height: 410px; }
    .dynasty-card > a { padding: 28px 25px; }
    .dynasty-article-hero { min-height: 680px; padding: 130px 25px 75px; align-items: flex-start; }
    .back-link { margin-bottom: 55px; }
    .dynasty-article-hero__mark { right: -10px; top: 390px; opacity: .45; }
    .article-deck { font-size: 17px; }
    .dynasty-reading { grid-template-columns: 1fr; padding: 75px 25px 95px; }
    .reading-rail { display: none; }
    .dynasty-prose { padding-left: 0; border-left: 0; }
    .dynasty-prose h3 { margin-top: 65px; }
    .dynasty-prose p { font-size: 18px; }
    .next-history { padding: 85px 25px 95px; }
}