@import url("./font-system.css");

/* WorldSleep · Sleep Culture editorial layout */

.sleep-culture-page {
    --culture-navy: #081426;
    --culture-navy-soft: #12243a;
    --culture-blue: #1e3a70;
    --culture-jade: #557b77;
    --culture-gold: #cba174;
    --culture-ink: #101827;
    --culture-text: #475569;
    --culture-muted: #6b7788;
    --culture-line: #dce4eb;
    --culture-paper: #f7f4ee;
    --culture-mist: #f2f6f8;
    --culture-white: #ffffff;
    margin: 0;
    color: var(--culture-ink);
    background: var(--culture-white);
    font-family: "Noto Sans SC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sleep-culture-page *,
.sleep-culture-page *::before,
.sleep-culture-page *::after {
    box-sizing: border-box;
}

.sleep-culture-page main {
    display: block;
    width: 100%;
    overflow: hidden;
}

.sleep-culture-page figure,
.sleep-culture-page h1,
.sleep-culture-page h2,
.sleep-culture-page h3,
.sleep-culture-page h4,
.sleep-culture-page p,
.sleep-culture-page dl,
.sleep-culture-page dd {
    margin-top: 0;
}

.sleep-culture-page main a {
    color: inherit;
}

.culture-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding-right: 40px;
    padding-left: 40px;
}

.culture-skip {
    position: fixed;
    top: 12px;
    left: 18px;
    z-index: 100001;
    padding: 10px 16px;
    border-radius: 6px;
    color: var(--culture-navy);
    background: var(--culture-white);
    box-shadow: 0 8px 24px rgba(8, 20, 38, 0.22);
    transform: translateY(-150%);
    transition: transform 180ms ease;
}

.culture-skip:focus {
    transform: translateY(0);
}

.culture-eyebrow,
.culture-kicker,
.culture-phase,
.culture-region {
    font-size: 0.74rem !important;
    font-weight: 700;
    line-height: 1.35 !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.culture-kicker,
.culture-phase,
.culture-region {
    color: var(--culture-blue) !important;
}

.culture-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.culture-kicker::before {
    width: 24px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--culture-blue), var(--culture-gold));
}

/* Hero */
.culture-hero {
    position: relative;
    isolation: isolate;
    display: flex !important;
    min-height: 485px;
    height: clamp(485px, 35vw, 525px);
    max-height: 525px;
    align-items: center;
    padding: 148px 0 66px !important;
    overflow: hidden;
    color: var(--culture-white);
    background: var(--culture-navy);
}

.culture-hero__media,
.culture-hero__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.culture-hero__media {
    z-index: 0;
    margin: 0;
}

.culture-hero__media img {
    object-fit: cover;
    object-position: center 52%;
}

.culture-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 16, 31, 0.98) 0%, rgba(5, 16, 31, 0.94) 34%, rgba(5, 16, 31, 0.67) 53%, rgba(5, 16, 31, 0.18) 78%, rgba(5, 16, 31, 0.08) 100%),
        linear-gradient(0deg, rgba(5, 16, 31, 0.32), transparent 45%);
}

.culture-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 2px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent 7%, var(--culture-gold) 31%, rgba(203, 161, 116, 0.1) 74%, transparent);
}

.culture-hero__content {
    position: relative;
    z-index: 2;
}

.culture-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    color: #ead3b5;
}

.culture-eyebrow::before {
    width: 34px;
    height: 2px;
    content: "";
    background: var(--culture-gold);
}

.culture-hero h1 {
    max-width: 650px;
    margin-bottom: 21px;
    color: var(--culture-white);
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 3.5rem !important;
    font-weight: 700;
    line-height: 1.14 !important;
    letter-spacing: -0.03em;
}

.culture-hero__lead {
    max-width: 625px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.04rem !important;
    line-height: 1.75 !important;
}

/* Four-part chapter index */
.culture-roadmap {
    position: relative;
    z-index: 4;
    background: var(--culture-white);
    border-bottom: 1px solid var(--culture-line);
}

.culture-roadmap__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.culture-roadmap a {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 13px;
    padding: 25px 25px 26px;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.culture-roadmap a + a {
    border-left: 1px solid var(--culture-line);
}

.culture-roadmap a::after {
    position: absolute;
    right: 25px;
    bottom: -1px;
    left: 72px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--culture-blue), var(--culture-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

.culture-roadmap span {
    grid-row: 1 / span 2;
    color: var(--culture-gold);
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 1.14rem;
    font-weight: 700;
}

.culture-roadmap strong {
    color: var(--culture-ink);
    font-size: 0.98rem;
    line-height: 1.35;
}

.culture-roadmap small {
    margin-top: 4px;
    color: var(--culture-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.culture-roadmap a:hover,
.culture-roadmap a:focus-visible {
    background: #f8fafc;
}

.culture-roadmap a:hover::after,
.culture-roadmap a:focus-visible::after {
    transform: scaleX(1);
}

.culture-roadmap a:focus-visible,
.culture-sources summary:focus-visible {
    outline: 3px solid rgba(30, 58, 112, 0.28);
    outline-offset: -3px;
}

/* Shared section structure */
.culture-section {
    padding: 92px 0 !important;
    scroll-margin-top: 108px;
}

.culture-section__header {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 74px;
    align-items: end;
    margin-bottom: 52px;
}

.culture-section__header .culture-kicker {
    grid-column: 1;
    grid-row: 1;
}

.culture-section__header h2 {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    color: var(--culture-ink);
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 2.48rem !important;
    font-weight: 700;
    line-height: 1.27 !important;
    letter-spacing: -0.022em;
}

.culture-section__header > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 660px;
    margin-bottom: 0;
    align-self: end;
    color: var(--culture-text);
    font-size: 1rem !important;
    line-height: 1.78 !important;
}

.culture-section__header--compact {
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
}

/* Ancient chapter */
.culture-section--ancient {
    position: relative;
    background:
        radial-gradient(circle at 90% 8%, rgba(203, 161, 116, 0.11), transparent 25%),
        linear-gradient(180deg, #faf8f4 0%, var(--culture-paper) 100%);
}

.culture-section--ancient::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 80px));
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(203, 161, 116, 0.52), transparent);
    transform: translateX(-50%);
}

.culture-history-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
    gap: 56px;
    align-items: start;
}

.culture-history-image,
.culture-modern-image,
.culture-china-story figure,
.culture-compare-grid figure {
    margin: 0;
    overflow: hidden;
}

.culture-history-image {
    position: relative;
    height: 405px;
    border: 6px solid rgba(255, 255, 255, 0.92);
    border-radius: 26px 7px 26px 7px;
    background: var(--culture-white);
    box-shadow: -13px 13px 0 rgba(203, 161, 116, 0.12), 0 20px 44px rgba(8, 20, 38, 0.11);
}

.culture-history-image picture,
.culture-history-image img,
.culture-modern-image picture,
.culture-modern-image img,
.culture-china-story picture,
.culture-china-story img,
.culture-compare-grid picture,
.culture-compare-grid img {
    display: block;
    width: 100%;
    height: 100%;
}

.culture-history-image img,
.culture-modern-image img,
.culture-china-story img,
.culture-compare-grid img {
    object-fit: cover;
}

.culture-china-timeline {
    counter-reset: culture-era;
    border-top: 1px solid #cfd8df;
}

.culture-china-timeline article {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 23px 0 25px;
    border-bottom: 1px solid #cfd8df;
    counter-increment: culture-era;
}

.culture-china-timeline article::before {
    color: rgba(30, 58, 112, 0.3);
    content: counter(culture-era, decimal-leading-zero);
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.35;
}

.culture-china-timeline .culture-phase,
.culture-rhythms .culture-phase {
    margin: 0 0 7px;
}

.culture-china-timeline h3,
.culture-rhythms h3,
.culture-china-story h3,
.culture-compare-grid h3,
.culture-material-strip h3 {
    color: var(--culture-ink);
    font-size: 1.13rem !important;
    font-weight: 700;
    line-height: 1.45 !important;
}

.culture-china-timeline h3 {
    margin-bottom: 8px;
}

.culture-china-timeline article > div:last-child > p:last-child,
.culture-rhythms article > div > p:last-child,
.culture-china-story__copy > p,
.culture-compare-grid article > div > p:last-child,
.culture-material-strip p,
.culture-posture-list p {
    margin-bottom: 0;
    color: var(--culture-text);
    font-size: 0.93rem !important;
    line-height: 1.7 !important;
}

.culture-world-note {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 58px;
    padding: 34px 38px;
    border: 1px solid rgba(203, 161, 116, 0.24);
    border-radius: 18px;
    color: var(--culture-white);
    background: linear-gradient(135deg, var(--culture-navy) 0%, #13283f 100%);
    box-shadow: 0 18px 38px rgba(8, 20, 38, 0.13);
}

.culture-world-note > div {
    padding-right: 34px;
}

.culture-world-note .culture-kicker {
    color: #e4c39f !important;
}

.culture-world-note .culture-kicker::before {
    background: var(--culture-gold);
}

.culture-world-note h3 {
    margin-bottom: 0;
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 1.52rem !important;
    line-height: 1.38 !important;
}

.culture-world-note article {
    padding: 2px 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.culture-world-note article > span {
    display: block;
    margin-bottom: 9px;
    color: var(--culture-gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.culture-world-note h4 {
    margin-bottom: 8px;
    color: var(--culture-white);
    font-size: 1rem;
    line-height: 1.45;
}

.culture-world-note article p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.85rem !important;
    line-height: 1.66 !important;
}

/* Modern life and postures */
.culture-section--modern {
    background: var(--culture-white);
}

.culture-modern-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.04fr) minmax(0, 0.96fr);
    gap: 56px;
    align-items: center;
}

.culture-modern-image {
    height: 372px;
    border-radius: 6px 28px 6px 28px;
    box-shadow: 0 22px 48px rgba(8, 20, 38, 0.13);
}

.culture-modern-image img {
    object-position: center 50%;
}

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

.culture-rhythms article {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 17px;
    padding: 20px 0 21px;
    border-bottom: 1px solid var(--culture-line);
}

.culture-rhythms article > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #c7d4df;
    border-radius: 50%;
    color: var(--culture-blue);
    background: #f8fafc;
    font-size: 0.68rem;
    font-weight: 700;
}

.culture-rhythms h3 {
    margin-bottom: 7px;
}

.culture-postures {
    display: grid;
    grid-template-columns: minmax(250px, 0.84fr) minmax(0, 2.16fr);
    gap: 42px;
    margin-top: 60px;
    padding: 34px 36px;
    border: 1px solid #d8e2e9;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(85, 123, 119, 0.05), transparent 34%),
        var(--culture-mist);
}

.culture-postures__intro h3 {
    margin-bottom: 9px;
    color: var(--culture-ink);
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 1.55rem !important;
    line-height: 1.38 !important;
}

.culture-postures__intro > p:last-child {
    margin-bottom: 0;
    color: var(--culture-text);
    font-size: 0.9rem !important;
    line-height: 1.68 !important;
}

.culture-posture-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.culture-posture-list article {
    min-width: 0;
    padding: 2px 18px 0;
    border-left: 1px solid #d5dfe6;
}

.culture-posture-list article > span,
.culture-material-strip article > span {
    display: block;
    margin-bottom: 10px;
    color: var(--culture-gold);
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 0.82rem;
    font-weight: 700;
}

.culture-posture-list h4 {
    margin-bottom: 7px;
    color: var(--culture-ink);
    font-size: 0.98rem;
    line-height: 1.4;
}

.culture-posture-list p {
    font-size: 0.8rem !important;
    line-height: 1.62 !important;
}

/* Regional spaces */
.culture-section--china {
    position: relative;
    background:
        radial-gradient(circle at 6% 22%, rgba(85, 123, 119, 0.09), transparent 25%),
        linear-gradient(180deg, #f4f7f9 0%, #edf3f5 100%);
}

.culture-china-stories {
    display: grid;
    gap: 76px;
}

.culture-china-story {
    display: grid;
    grid-template-columns: minmax(390px, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "media copy";
    gap: 62px;
    align-items: center;
}

.culture-china-story:nth-child(even) {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
    grid-template-areas: "copy media";
}

.culture-china-story figure {
    position: relative;
    grid-area: media;
    height: 330px;
    border-radius: 24px 6px 24px 6px;
    box-shadow: 0 20px 44px rgba(8, 20, 38, 0.12);
}

.culture-china-story figure::after {
    position: absolute;
    inset: 13px -13px -13px 13px;
    z-index: -1;
    border: 1px solid rgba(203, 161, 116, 0.4);
    border-radius: 24px 6px 24px 6px;
    content: "";
}

.culture-china-story:nth-child(even) figure::after {
    inset: 13px 13px -13px -13px;
    border-color: rgba(85, 123, 119, 0.44);
}

.culture-china-story:first-child img {
    object-position: center 50%;
}

.culture-china-story:last-child img {
    object-position: center 48%;
}

.culture-china-story__copy {
    grid-area: copy;
}

.culture-china-story__copy .culture-region {
    margin-bottom: 10px;
}

.culture-china-story h3 {
    margin-bottom: 11px;
    font-family: "Noto Serif SC", "Noto Serif TC", Georgia, serif;
    font-size: 1.56rem !important;
    line-height: 1.4 !important;
}

.culture-china-story__copy > p {
    max-width: 560px;
}

.culture-china-story dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 23px 0 0;
    padding-top: 18px;
    border-top: 1px solid #ccd8df;
}

.culture-china-story dt {
    margin-bottom: 4px;
    color: var(--culture-blue);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.culture-china-story dd {
    margin-bottom: 0;
    color: var(--culture-text);
    font-size: 0.84rem;
    line-height: 1.55;
}

.culture-material-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 76px;
    border-top: 1px solid #cdd8df;
    border-bottom: 1px solid #cdd8df;
}

.culture-material-strip article {
    position: relative;
    padding: 27px 30px 29px;
}

.culture-material-strip article + article {
    border-left: 1px solid #cdd8df;
}

.culture-material-strip article::after {
    position: absolute;
    bottom: -1px;
    left: 30px;
    width: 34px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--culture-jade), var(--culture-gold));
}

.culture-material-strip h3 {
    margin-bottom: 8px;
}

/* Compact world comparison */
.culture-section--world {
    padding-top: 82px !important;
    padding-bottom: 76px !important;
    background: var(--culture-paper);
}

.culture-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.culture-compare-grid article {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d9e0e5;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
}

.culture-compare-grid figure {
    height: 170px;
}

.culture-compare-grid article > div {
    padding: 22px 24px 25px;
}

.culture-compare-grid .culture-region {
    margin-bottom: 8px;
}

.culture-compare-grid h3 {
    margin-bottom: 8px;
}

.culture-compare-grid article > div > p:last-child {
    font-size: 0.86rem !important;
}

.culture-sources {
    margin-top: 38px;
    border-top: 1px solid #d5dddF;
    border-bottom: 1px solid #d5dddF;
}

.culture-sources summary {
    position: relative;
    padding: 19px 40px 19px 0;
    color: var(--culture-blue);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    list-style: none;
}

.culture-sources summary::-webkit-details-marker {
    display: none;
}

.culture-sources summary::after {
    position: absolute;
    top: 50%;
    right: 4px;
    content: "+";
    color: var(--culture-gold);
    font-size: 1.35rem;
    font-weight: 400;
    transform: translateY(-50%);
}

.culture-sources[open] summary::after {
    content: "−";
}

.culture-sources ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 34px;
    margin: 0;
    padding: 0 0 22px 20px;
}

.culture-sources li {
    color: var(--culture-text);
    font-size: 0.8rem;
    line-height: 1.55;
}

.culture-sources a {
    text-decoration-color: rgba(30, 58, 112, 0.3);
    text-underline-offset: 3px;
}

.culture-sources a:hover,
.culture-sources a:focus-visible {
    color: var(--culture-blue);
    text-decoration-color: var(--culture-blue);
}

.culture-boundary {
    margin: 22px 0 0;
    color: var(--culture-muted);
    font-size: 0.78rem !important;
    line-height: 1.62 !important;
}

@media (max-width: 1199px) {
    .culture-container {
        padding-right: 32px;
        padding-left: 32px;
    }

    .culture-hero {
        min-height: 435px;
        height: clamp(435px, 48vw, 470px);
        max-height: 470px;
        padding: 120px 0 52px !important;
    }

    .culture-hero h1 {
        max-width: 590px;
        font-size: 2.75rem !important;
    }

    .culture-hero__lead {
        max-width: 570px;
        font-size: 1rem !important;
    }

    .culture-roadmap a {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 22px 18px 23px;
    }

    .culture-roadmap a::after {
        right: 18px;
        left: 59px;
    }

    .culture-section {
        padding: 74px 0 !important;
    }

    .culture-section__header {
        column-gap: 46px;
        margin-bottom: 42px;
    }

    .culture-section__header h2 {
        font-size: 2.18rem !important;
    }

    .culture-history-layout {
        grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
        gap: 38px;
    }

    .culture-history-image {
        height: 350px;
    }

    .culture-china-timeline article {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 16px;
        padding: 19px 0 20px;
    }

    .culture-world-note {
        grid-template-columns: 0.72fr repeat(2, 1fr);
        padding: 30px 28px;
    }

    .culture-world-note article {
        padding: 2px 24px;
    }

    .culture-modern-layout {
        grid-template-columns: minmax(340px, 0.96fr) minmax(0, 1.04fr);
        gap: 38px;
    }

    .culture-modern-image {
        height: 330px;
    }

    .culture-postures {
        grid-template-columns: 1fr;
        gap: 27px;
        padding: 30px;
    }

    .culture-china-story,
    .culture-china-story:nth-child(even) {
        grid-template-columns: minmax(310px, 0.93fr) minmax(0, 1.07fr);
        gap: 44px;
    }

    .culture-china-story figure {
        height: 285px;
    }

    .culture-compare-grid figure {
        height: 145px;
    }

    .culture-compare-grid article > div {
        padding: 19px 20px 22px;
    }
}

@media (max-width: 980px) {
    .culture-section__header {
        grid-template-columns: 1fr;
        gap: 0;
        align-items: start;
    }

    .culture-section__header .culture-kicker,
    .culture-section__header h2,
    .culture-section__header > p:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    .culture-section__header h2 {
        max-width: 680px;
        margin-bottom: 16px;
    }

    .culture-section__header > p:last-child {
        max-width: 760px;
    }

    .culture-history-layout,
    .culture-modern-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .culture-history-image,
    .culture-modern-image {
        width: 100%;
        max-width: 760px;
        height: 340px;
        margin: 0 auto;
    }

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

    .culture-world-note > div {
        grid-column: 1 / -1;
        padding: 0 0 24px;
    }

    .culture-world-note article:first-of-type {
        border-left: 0;
        padding-left: 0;
    }

    .culture-china-story,
    .culture-china-story:nth-child(even) {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "copy";
        gap: 30px;
    }

    .culture-china-story figure {
        width: 100%;
        max-width: 760px;
        height: 320px;
    }
}

@media (max-width: 767px) {
    .sleep-culture-page main {
        overflow: hidden !important;
    }

    .culture-container {
        max-width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }

    .sleep-culture-page .culture-hero {
        display: flex !important;
        min-height: 0;
        height: auto;
        max-height: none;
        flex-direction: column;
        align-items: stretch;
        padding: 0 !important;
    }

    .culture-hero__media,
    .culture-hero__media img {
        position: relative;
        inset: auto;
    }

    .culture-hero__media {
        order: 1;
        height: 205px;
    }

    .culture-hero__media img {
        object-position: 70% 50%;
    }

    .culture-hero__veil {
        display: none;
    }

    .culture-hero__content {
        order: 2;
        padding: 29px 18px 37px;
        background: var(--culture-navy);
    }

    .culture-eyebrow {
        margin-bottom: 15px;
        font-size: 0.67rem !important;
    }

    .culture-eyebrow::before {
        width: 27px;
    }

    .sleep-culture-page .culture-hero h1 {
        max-width: 470px;
        margin-bottom: 16px;
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .sleep-culture-page .culture-hero__lead {
        max-width: 560px;
        margin-bottom: 0;
        font-size: 0.94rem !important;
        line-height: 1.66 !important;
    }

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

    .culture-roadmap a {
        grid-template-columns: 25px minmax(0, 1fr);
        column-gap: 9px;
        padding: 18px 12px 19px;
    }

    .culture-roadmap a:nth-child(odd) {
        border-left: 0;
    }

    .culture-roadmap a:nth-child(n + 3) {
        border-top: 1px solid var(--culture-line);
    }

    .culture-roadmap a::after {
        right: 12px;
        left: 46px;
    }

    .culture-roadmap span {
        font-size: 0.93rem;
    }

    .culture-roadmap strong {
        font-size: 0.88rem;
    }

    .culture-roadmap small {
        font-size: 0.7rem;
    }

    .sleep-culture-page .culture-section {
        padding: 56px 0 !important;
        scroll-margin-top: 72px;
    }

    .culture-section--ancient::before {
        width: calc(100% - 36px);
    }

    .culture-section__header {
        margin-bottom: 30px;
    }

    .sleep-culture-page .culture-section__header h2 {
        font-size: 1.72rem !important;
        line-height: 1.31 !important;
    }

    .sleep-culture-page .culture-section__header > p:last-child {
        font-size: 0.96rem !important;
        line-height: 1.7 !important;
    }

    .culture-history-layout,
    .culture-modern-layout {
        gap: 27px;
    }

    .culture-history-image,
    .culture-modern-image {
        height: 205px;
        border-width: 4px;
        border-radius: 18px 5px 18px 5px;
        box-shadow: -7px 7px 0 rgba(203, 161, 116, 0.1), 0 12px 26px rgba(8, 20, 38, 0.1);
    }

    .culture-china-timeline article {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
        padding: 19px 0 20px;
    }

    .sleep-culture-page .culture-china-timeline h3,
    .sleep-culture-page .culture-rhythms h3,
    .sleep-culture-page .culture-material-strip h3,
    .sleep-culture-page .culture-compare-grid h3 {
        font-size: 1.05rem !important;
        line-height: 1.42 !important;
    }

    .sleep-culture-page .culture-china-timeline article > div:last-child > p:last-child,
    .sleep-culture-page .culture-rhythms article > div > p:last-child,
    .sleep-culture-page .culture-china-story__copy > p,
    .sleep-culture-page .culture-compare-grid article > div > p:last-child,
    .sleep-culture-page .culture-material-strip p,
    .sleep-culture-page .culture-posture-list p {
        font-size: 0.92rem !important;
        line-height: 1.66 !important;
    }

    .culture-world-note {
        grid-template-columns: 1fr;
        margin-top: 38px;
        padding: 27px 22px;
        border-radius: 15px;
    }

    .culture-world-note > div {
        grid-column: 1;
        padding-bottom: 20px;
    }

    .sleep-culture-page .culture-world-note h3 {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
    }

    .culture-world-note article,
    .culture-world-note article:first-of-type {
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }

    .sleep-culture-page .culture-world-note article p {
        font-size: 0.85rem !important;
        line-height: 1.64 !important;
    }

    .culture-rhythms article {
        grid-template-columns: 37px minmax(0, 1fr);
        gap: 13px;
        padding: 18px 0 19px;
    }

    .culture-rhythms article > span {
        width: 30px;
        height: 30px;
    }

    .culture-postures {
        grid-template-columns: 1fr;
        gap: 23px;
        margin-top: 40px;
        padding: 25px 20px;
        border-radius: 15px;
    }

    .sleep-culture-page .culture-postures__intro h3 {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
    }

    .sleep-culture-page .culture-postures__intro > p:last-child {
        font-size: 0.91rem !important;
        line-height: 1.66 !important;
    }

    .culture-posture-list {
        grid-template-columns: 1fr;
    }

    .culture-posture-list article {
        display: grid;
        grid-template-columns: 30px 74px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 15px 0;
        border-top: 1px solid #d5dfe6;
        border-left: 0;
    }

    .culture-posture-list article > span,
    .culture-posture-list h4,
    .culture-posture-list p {
        margin-bottom: 0;
    }

    .culture-china-stories {
        gap: 49px;
    }

    .culture-china-story,
    .culture-china-story:nth-child(even) {
        gap: 25px;
    }

    .culture-china-story figure {
        height: 205px;
        border-radius: 18px 5px 18px 5px;
    }

    .culture-china-story figure::after,
    .culture-china-story:nth-child(even) figure::after {
        inset: 8px -6px -8px 6px;
        border-radius: 18px 5px 18px 5px;
    }

    .sleep-culture-page .culture-china-story h3 {
        font-size: 1.3rem !important;
        line-height: 1.43 !important;
    }

    .culture-china-story dl {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
        padding-top: 15px;
    }

    .culture-material-strip {
        grid-template-columns: 1fr;
        margin-top: 49px;
    }

    .culture-material-strip article {
        padding: 22px 0 23px 45px;
    }

    .culture-material-strip article + article {
        border-top: 1px solid #cdd8df;
        border-left: 0;
    }

    .culture-material-strip article > span {
        position: absolute;
        top: 24px;
        left: 0;
    }

    .culture-material-strip article::after {
        top: 25px;
        bottom: auto;
        left: 27px;
        width: 10px;
    }

    .sleep-culture-page .culture-section--world {
        padding-top: 54px !important;
        padding-bottom: 52px !important;
    }

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

    .culture-compare-grid article {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .culture-compare-grid figure {
        height: 100%;
        min-height: 164px;
    }

    .culture-compare-grid article > div {
        padding: 18px 18px 20px;
    }

    .culture-sources {
        margin-top: 28px;
    }

    .culture-sources ul {
        grid-template-columns: 1fr;
        gap: 7px;
        padding-bottom: 19px;
    }

    .sleep-culture-page .culture-boundary {
        margin-top: 19px;
        font-size: 0.76rem !important;
        line-height: 1.6 !important;
    }

}

/* English editorial rhythm: shorter measures and Latin-first display type */
html[lang="en"] .sleep-culture-page main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html[lang="en"] .sleep-culture-page .culture-hero h1,
html[lang="en"] .sleep-culture-page .culture-section__header h2,
html[lang="en"] .sleep-culture-page .culture-world-note h3,
html[lang="en"] .sleep-culture-page .culture-postures__intro h3 {
    font-family: Georgia, "Times New Roman", serif;
}

html[lang="en"] .sleep-culture-page .culture-hero h1 {
    max-width: 700px;
    font-size: 3.34rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em;
}

html[lang="en"] .sleep-culture-page .culture-hero__lead {
    max-width: 610px;
}

html[lang="en"] .sleep-culture-page .culture-roadmap strong {
    letter-spacing: 0.01em;
}

html[lang="en"] .sleep-culture-page .culture-roadmap small {
    max-width: 190px;
}

html[lang="en"] .sleep-culture-page .culture-section__header h2 {
    max-width: 580px;
    font-size: 2.36rem !important;
    line-height: 1.2 !important;
}

html[lang="en"] .sleep-culture-page .culture-section__header > p:last-child {
    max-width: 620px;
    line-height: 1.72 !important;
}


html[lang="en"] .sleep-culture-page .culture-phase,
html[lang="en"] .sleep-culture-page .culture-region {
    letter-spacing: 0.085em;
}

html[lang="en"] .sleep-culture-page .culture-china-timeline h3,
html[lang="en"] .sleep-culture-page .culture-rhythms h3,
html[lang="en"] .sleep-culture-page .culture-compare-grid h3 {
    line-height: 1.38 !important;
}

html[lang="en"] .sleep-culture-page .culture-posture-list h4 {
    hyphens: auto;
    overflow-wrap: break-word;
}

@media (max-width: 1199px) {
    html[lang="en"] .sleep-culture-page .culture-hero h1 {
        max-width: 630px;
        font-size: 2.68rem !important;
    }

    html[lang="en"] .sleep-culture-page .culture-section__header h2 {
        font-size: 2.08rem !important;
    }
}

@media (max-width: 767px) {
    html[lang="en"] .sleep-culture-page .culture-hero h1 {
        max-width: 330px;
        font-size: 2.02rem !important;
        line-height: 1.1 !important;
    }

    html[lang="en"] .sleep-culture-page .culture-hero__lead {
        max-width: 355px;
        line-height: 1.66 !important;
    }

    html[lang="en"] .sleep-culture-page .culture-section__header h2 {
        font-size: 1.78rem !important;
        line-height: 1.24 !important;
    }

    html[lang="en"] .sleep-culture-page .culture-posture-list article {
        grid-template-columns: 30px 104px minmax(0, 1fr);
    }

    html[lang="en"] .sleep-culture-page .culture-compare-grid article {
        grid-template-columns: 106px minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .culture-skip,
    .culture-roadmap a,
    .culture-roadmap a::after {
        transition: none;
    }
}