/* =========================================================
   June & Aurora
   公共样式：变量、基础结构、页头与页脚
   ========================================================= */

:root{
    --cream:#f7f2ea;
    --paper:#fffdf8;
    --black:#2d2722;
    --orange:#d87f4d;
    --orange-dark:#b96336;
    --orange-light:#f1d4a8;
    --sage:#9cbfb1;
    --walnut:#543a24;
    --sand:#d0b694;
    --gray:#d8d1c6;
    --soft-gray:#ece6dc;
    --muted:#6f675f;
    --white:#ffffff;
    --display:"Archivo Black","Arial Black",sans-serif;
    --cover-display:"Bebas Neue","Arial Narrow",sans-serif;
    --serif:"Cormorant Garamond",Georgia,serif;
    --body:Inter,Arial,sans-serif;
    --page-width:1540px;
    --line:rgba(45,39,34,.16);
    --radius-large:18px;
    --radius-medium:14px;
    --radius-small:10px;
    --shadow-soft:0 12px 35px rgba(84,58,36,.08);
}



/* =========================================================
   Reset
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--black);
    background:
        radial-gradient(
            rgba(21, 21, 21, 0.035) 0.65px,
            transparent 0.65px
        ),
        var(--cream);
    background-size: 5px 5px;
    font-family: var(--body);
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    top: 20px;
    left: 20px;
    z-index: 1000;
    padding: 12px 18px;
    background: var(--white);
    border: 1px solid var(--black);
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
    width: min(var(--page-width), calc(100% - 72px));
    min-height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.wordmark {
    color: var(--black);
    font-family: var(--serif);
    font-size: 31px;
    font-weight: 600;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.wordmark i {
    color: var(--orange);
    font-size: 35px;
    font-weight: 500;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-header nav a {
    position: relative;
    color: var(--black);
    font-family: var(--cover-display);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.site-header nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width 0.22s ease;
}

.site-header nav a:hover,
.site-header nav a:focus {
    color: var(--orange);
}

.site-header nav a:hover::after,
.site-header nav a:focus::after {
    width: 100%;
}

/* =========================================================
   Main container
   ========================================================= */

main {
    width: min(var(--page-width), calc(100% - 72px));
    margin: 0 auto;
}

/* =========================================================
   Generic inner pages
   ========================================================= */

.page-intro {
    min-height: 650px;
    padding: 100px 5vw;
}

.page-intro h1 {
    font-family: var(--display);
    font-size: clamp(70px, 8vw, 130px);
    line-height: 0.85;
    text-transform: uppercase;
}

.page-intro > p:not(.folio) {
    max-width: 700px;
    color: var(--muted);
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.55;
}

.empty-note {
    margin-top: 60px;
    padding: 45px;
    background: var(--paper);
    border: 1px solid var(--line);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
    width:min(var(--page-width),calc(100% - 72px));
    margin:90px auto 28px;
    padding:58px 62px 24px;
    color:var(--paper);
    background:var(--walnut);
    border-radius:var(--radius-large);
}
.site-footer-main{
    display:grid;
    grid-template-columns:1.4fr .55fr .55fr;
    gap:70px;
    padding-bottom:45px;
}
.site-footer-logo{
    color:var(--paper);
    font-family:var(--serif);
    font-size:34px;
    font-weight:600;
    text-decoration:none;
}
.site-footer-logo i{
    color:var(--orange);
    font-weight:500;
}
.site-footer-brand p{
    max-width:470px;
    margin:22px 0 0;
    color:rgba(255,253,248,.72);
    font-family:var(--serif);
    font-size:17px;
    font-style:italic;
    line-height:1.55;
}
.site-footer-brand p i{
    margin-left:7px;
    color:var(--orange);
    font-size:16px;
    font-style:normal;
    vertical-align:middle;
}
.site-footer-brand p span{
    margin-left:9px;
    color:var(--sage);
    font-family:var(--body);
    font-size:13px;
    font-style:normal;
    white-space:nowrap;
}
.site-footer-nav,
.site-footer-contact{
    display:flex;
    flex-direction:column;
    gap:15px;
}
.site-footer-nav a,
.site-footer-contact a{
    color:var(--paper);
    font-size:10px;
    font-weight:600;
    letter-spacing:.13em;
    text-decoration:none;
    text-transform:uppercase;
}
.site-footer-nav a:hover,
.site-footer-contact a:hover{
    color:var(--orange);
}
.site-footer-bottom{
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    gap:30px;
    color:rgba(255,253,248,.55);
    border-top:1px solid rgba(255,255,255,.14);
    font-size:8px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* =========================================================
   公共响应式：平板与手机
   只处理全站容器、页头、页脚，不包含页面专属布局
   ========================================================= */

@media (max-width: 760px) {
    .site-header,
    main,
    .site-footer {
        width: min(100% - 28px, var(--page-width));
    }

    .site-header {
        min-height: 85px;
        padding-top: 22px;
        align-items: flex-start;
    }

    .wordmark {
        font-size: 23px;
    }

    .site-header nav {
        max-width: 220px;
        gap: 12px 18px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .site-header nav a {
        font-size: 15px;
        letter-spacing: 0.06em;
    }
}

@media (max-width: 430px) {
    .site-header nav {
        max-width: 180px;
        gap: 10px 13px;
    }

    .site-header nav a {
        font-size: 13px;
    }
}

/* =========================================================
   无障碍：减少动态效果
   ========================================================= */

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

    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   轻微前后景视差
   大字为后景，人物为前景
   ========================================================= */

[data-parallax-back],
[data-parallax-front] {
    --parallax-y: 0px;

    transform: translate3d(
        var(--base-x, 0),
        var(--parallax-y),
        0
    );

    will-change: transform;
}

/*
 * 居中元素原本需要 translateX(-50%)。
 * 通过变量保留横向定位，避免视差覆盖原 transform。
 */

.cover-person,
.journal-cover-person,
.journal-cover-title {
    --base-x: -50%;
}

/* 后景大字移动更慢 */

[data-parallax-back] {
    transition: transform 0.08s linear;
}

/* 前景人物移动稍快 */

[data-parallax-front] {
    transition: transform 0.06s linear;
}

/* =========================================================
   Rich content: Related Content cards
   ========================================================= */

.ja-related-card {
    width: min(100%, 920px);
    margin: 2rem auto;
    overflow: hidden;
    border: 1px solid rgba(31, 43, 58, .16);
    background: #f8f2e8;
    color: #1f2b3a;
    box-shadow: 0 14px 36px rgba(53, 44, 34, .08);
}

.ja-related-card__link {
    display: grid;
    color: inherit;
    text-decoration: none;
}

.ja-related-card__media {
    min-width: 0;
    overflow: hidden;
    background: #e8dfd1;
}

.ja-related-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.ja-related-card__image--empty {
    min-height: 150px;
    background: linear-gradient(135deg, #dfd3c1, #f3eadc);
}

.ja-related-card__link:hover .ja-related-card__image {
    transform: scale(1.025);
}

.ja-related-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(1.15rem, 3vw, 2.25rem);
}

.ja-related-card__eyebrow {
    margin-bottom: .65rem;
    color: #a24f2d;
    font: 600 .72rem/1.2 Inter, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ja-related-card__title {
    color: #1f2b3a;
    font: 600 clamp(1.4rem, 3vw, 2.25rem)/1.05 "Cormorant Garamond", serif;
}

.ja-related-card__description {
    margin-top: .7rem;
    color: #5c5a55;
    font: 400 .95rem/1.65 Inter, sans-serif;
}

.ja-related-card__cta {
    display: inline-flex;
    gap: .45rem;
    margin-top: 1.15rem;
    color: #a24f2d;
    font: 600 .78rem/1 Inter, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ja-related-card--compact .ja-related-card__link {
    grid-template-columns: minmax(120px, 28%) 1fr;
}


.ja-related-card--compact .ja-related-card__title {
    font-size: clamp(1.25rem, 2.3vw, 1.7rem);
}

.ja-related-card--compact .ja-related-card__cta {
    display: none;
}

.ja-related-card--feature .ja-related-card__link {
    grid-template-columns: minmax(280px, 52%) 1fr;
}

.ja-related-card--feature .ja-related-card__media {
    min-height: 330px;
}

.ja-related-card--product {
    width: min(100%, 720px);
}

.ja-related-card--product .ja-related-card__link {
    grid-template-columns: minmax(220px, 45%) 1fr;
}

.ja-related-card--product .ja-related-card__media {
    min-height: 300px;
    background: #f1e9dc;
}

.ja-related-card--product .ja-related-card__image {
    object-fit: contain;
 
}

.ja-related-card--product .ja-related-card__description {
    display: none;
}

.ja-related-card--missing {
    padding: 1rem 1.25rem;
    border-style: dashed;
    box-shadow: none;
    color: #755e50;
    font: 400 .9rem/1.5 Inter, sans-serif;
}

@media (max-width: 680px) {
    .ja-related-card__link,
    .ja-related-card--compact .ja-related-card__link,
    .ja-related-card--feature .ja-related-card__link,
    .ja-related-card--product .ja-related-card__link {
        grid-template-columns: 1fr;
    }

    .ja-related-card--compact .ja-related-card__media,
    .ja-related-card--feature .ja-related-card__media,
    .ja-related-card--product .ja-related-card__media {
        min-height: 210px;
        max-height: 300px;
    }
}

/* 用户要求减少动画时完全关闭 */

@media (prefers-reduced-motion: reduce) {
    [data-parallax-back],
    [data-parallax-front] {
        --parallax-y: 0px !important;
        transform: translate3d(
            var(--base-x, 0),
            0,
            0
        ) !important;
        transition: none !important;
    }
}