/* =========================================================
   China TA · GOODS
   Recent official sync + frozen static history
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 74% 10%,
            rgba(184, 155, 104, 0.055),
            transparent 30%
        ),
        #080808;

    color: #f3f0ea;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        sans-serif;
}

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

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

.goods-shell {
    width: min(1420px, calc(100% - 80px));
    margin: 0 auto;
}


/* Header */

.goods-site-header {
    min-height: 112px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 36px;

    padding:
        28px
        clamp(32px, 4.5vw, 74px);

    border-bottom:
        1px solid rgba(184, 155, 104, 0.16);

    background:
        rgba(5, 5, 5, 0.90);

    backdrop-filter: blur(12px);
}

.goods-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.goods-brand-teamayu {
    width: auto;
    height: 30px;
}

.goods-brand-divider {
    width: 1px;
    height: 28px;

    background:
        rgba(255, 255, 255, 0.28);
}

.goods-brand-china {
    width: 120px;
    height: auto;
}

.goods-mini-nav {
    display: flex;
    align-items: center;

    gap:
        clamp(18px, 2.2vw, 38px);

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 11px;

    letter-spacing:
        .08em;
}

.goods-mini-nav a {
    position: relative;
    padding: 12px 0;
}

.goods-mini-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 5px;

    height: 1px;

    background: #b89b68;

    transition:
        right .25s ease;
}

.goods-mini-nav a:hover,
.goods-mini-nav a.is-current {
    color:
        rgba(255, 255, 255, 0.92);
}

.goods-mini-nav a:hover::after,
.goods-mini-nav a.is-current::after {
    right: 0;
}


/* Hero */

.goods-hero {
    padding:
        clamp(90px, 9vw, 150px)
        0
        clamp(76px, 7vw, 112px);

    border-bottom:
        1px solid rgba(184, 155, 104, 0.17);
}

.goods-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, .42fr);

    align-items: end;

    gap:
        clamp(60px, 8vw, 150px);
}

.goods-section-index,
.goods-browser-kicker {
    margin: 0 0 24px;

    color: #b89b68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: .20em;
}

.goods-hero h1 {
    margin: 0;

    font-size:
        clamp(52px, 7vw, 104px);

    font-weight: 300;

    line-height: .98;

    letter-spacing: .02em;
}

.goods-hero-copy {
    max-width: 680px;

    margin: 30px 0 0;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 13px;

    line-height: 2;

    letter-spacing: .055em;
}

.goods-hero-aside {
    display: grid;
    gap: 12px;

    padding-bottom: 6px;

    color:
        rgba(255, 255, 255, 0.25);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: .18em;
}


/* Archive */

.goods-browser {
    padding:
        clamp(70px, 7vw, 110px)
        0
        clamp(120px, 12vw, 180px);
}

.goods-browser-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 46px;

    padding-bottom: 28px;

    border-bottom:
        1px solid rgba(184, 155, 104, 0.20);
}

.goods-browser-kicker {
    margin-bottom: 12px;
}

.goods-browser-head h2 {
    margin: 0;

    font-size:
        clamp(36px, 4vw, 56px);

    font-weight: 300;
}

.goods-legend {
    display: flex;
    align-items: center;

    gap: 24px;

    color:
        rgba(255, 255, 255, 0.32);

    font-size: 9px;

    letter-spacing: .10em;
}

.goods-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.goods-dot {
    width: 5px;
    height: 5px;

    display: inline-block;

    border-radius: 999px;
}

.goods-dot-recent {
    background: #b89b68;
}

.goods-dot-history {
    border:
        1px solid rgba(184, 155, 104, 0.72);
}

.goods-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid rgba(255, 255, 255, 0.11);

    border-left:
        1px solid rgba(255, 255, 255, 0.11);
}

.goods-card {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        clamp(28px, 3vw, 42px);

    border-right:
        1px solid rgba(255, 255, 255, 0.11);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.11);

    background:
        #0d0d0d;

    transition:
        background-color .28s ease;
}

.goods-card:hover {
    background:
        #141414;
}

.goods-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.goods-card-index,
.goods-card-status {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px;

    letter-spacing: .16em;
}

.goods-card-index {
    color:
        rgba(255, 255, 255, 0.24);
}

.goods-card-status {
    color:
        rgba(184, 155, 104, 0.68);
}

.goods-card-copy {
    margin-top: 80px;
}

.goods-card-kicker {
    margin:
        0 0 14px;

    color:
        #b89b68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: .17em;
}

.goods-card h2 {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.88);

    font-size:
        clamp(20px, 1.7vw, 27px);

    font-weight: 400;

    line-height: 1.55;
}

.goods-card-summary {
    margin:
        18px 0 0;

    display: -webkit-box;

    overflow: hidden;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 11px;

    line-height: 1.8;
}

.goods-card-meta {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-top: 46px;

    color:
        rgba(255, 255, 255, 0.26);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px;

    letter-spacing: .12em;
}

.goods-card-arrow {
    color:
        rgba(184, 155, 104, 0.54);
}


/* Detail */

.goods-detail-shell {
    width:
        min(1120px, calc(100% - 80px));

    margin: 0 auto;

    padding:
        clamp(80px, 8vw, 132px)
        0
        clamp(120px, 12vw, 190px);
}

.goods-detail-back {
    display: inline-flex;

    margin-bottom: 54px;

    color:
        rgba(194, 166, 111, 0.68);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: .15em;
}

.goods-detail-kicker {
    margin:
        0 0 22px;

    color:
        rgba(184, 155, 104, 0.58);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: .18em;
}

.goods-detail-title {
    max-width: 980px;

    margin: 0;

    color: #f4f1eb;

    font-size:
        clamp(36px, 5vw, 68px);

    font-weight: 300;

    line-height: 1.25;
}

.goods-detail-summary {
    max-width: 800px;

    margin:
        30px 0 0;

    color:
        rgba(255, 255, 255, 0.46);

    font-size: 14px;

    line-height: 2;
}

.goods-detail-facts {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    max-width: 900px;

    margin-top:
        clamp(42px, 5vw, 66px);

    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    border-left:
        1px solid rgba(255, 255, 255, 0.09);
}

.goods-detail-fact {
    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        20px 22px;

    border-right:
        1px solid rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}

.goods-detail-fact span {
    color:
        rgba(184, 155, 104, 0.52);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px;

    letter-spacing: .16em;
}

.goods-detail-fact strong {
    color:
        rgba(255, 255, 255, 0.76);

    font-size: 12px;

    font-weight: 400;

    line-height: 1.65;
}

.goods-detail-rule {
    height: 1px;

    margin:
        clamp(50px, 6vw, 82px)
        0;

    background:
        linear-gradient(
            90deg,
            rgba(184, 155, 104, 0.38),
            rgba(184, 155, 104, 0.07) 70%,
            transparent
        );
}

.goods-detail-gallery {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom:
        clamp(52px, 6vw, 80px);
}

.goods-detail-gallery img {
    width: 100%;
    height: auto;

    background: #060606;

    border:
        1px solid rgba(184, 155, 104, 0.10);
}

.goods-detail-content {
    max-width: 840px;
}

.goods-detail-content p {
    margin:
        0 0 24px;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 14px;

    line-height: 2.05;

    text-indent: 0;
    white-space: normal;
}

.goods-source-box {
    margin-top:
        clamp(60px, 7vw, 100px);

    padding:
        30px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    color:
        rgba(255, 255, 255, 0.34);

    font-size: 11px;
}

.goods-source-box a {
    color:
        rgba(194, 166, 111, 0.82);
}


/* Status / footer */

.goods-status {
    margin: 72px 0;

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 12px;

    line-height: 1.9;
}

.goods-footer {
    border-top:
        1px solid rgba(184, 155, 104, 0.14);

    background: #050505;
}

.goods-footer .goods-shell {
    min-height: 112px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    color:
        rgba(255, 255, 255, 0.26);

    font-size: 10px;

    letter-spacing: .07em;
}

.goods-footer a {
    color:
        rgba(184, 155, 104, 0.58);
}

.ayu-inline-logo {
    width: auto;
    height: .82em;

    display: inline-block;

    margin:
        0 .08em;

    vertical-align: -.06em;

    filter:
        brightness(0)
        invert(1);
}


/* Responsive */

@media (max-width: 1040px) {

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

    .goods-site-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .goods-mini-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 24px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .goods-mini-nav::-webkit-scrollbar {
        display: none;
    }

}

@media (max-width: 720px) {

    .goods-shell,
    .goods-detail-shell {
        width:
            min(100% - 36px, 100%);
    }

    .goods-site-header {
        min-height: 88px;
        padding: 20px 18px;
    }

    .goods-brand-teamayu {
        height: 24px;
    }

    .goods-brand-china {
        width: 96px;
    }

    .goods-hero {
        padding:
            72px 0
            64px;
    }

    .goods-hero-grid {
        grid-template-columns: 1fr;
    }

    .goods-hero-aside {
        display: none;
    }

    .goods-browser-head,
    .goods-source-box,
    .goods-footer .goods-shell {
        align-items: flex-start;
        flex-direction: column;
    }

    .goods-grid {
        grid-template-columns: 1fr;
    }

    .goods-card {
        min-height: 320px;
    }

    .goods-detail-facts,
    .goods-detail-gallery {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   GOODS · item catalog
========================================================= */

.goods-products {
    margin-top:
        clamp(72px, 8vw, 124px);

    border-top:
        1px solid rgba(184, 155, 104, 0.22);

    padding-top:
        clamp(42px, 5vw, 72px);
}

.goods-products-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 32px;

    margin-bottom:
        clamp(34px, 4vw, 58px);
}

.goods-products-kicker {
    margin: 0 0 12px;

    color: #b89b68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: .20em;
}

.goods-products-heading h2 {
    margin: 0;

    font-size:
        clamp(30px, 3.2vw, 48px);

    font-weight: 300;

    letter-spacing: .02em;
}

.goods-products-heading > span {
    color:
        rgba(255, 255, 255, .34);

    font-size: 10px;

    letter-spacing: .14em;
}

.goods-products-list {
    border-top:
        1px solid rgba(255, 255, 255, .09);
}

.goods-product {
    display: grid;

    grid-template-columns:
        74px
        minmax(0, 1fr);

    gap:
        clamp(22px, 3vw, 48px);

    padding:
        clamp(30px, 4vw, 52px)
        0;

    border-bottom:
        1px solid rgba(255, 255, 255, .09);
}

.goods-product-number {
    padding-top: 4px;

    color:
        rgba(184, 155, 104, .68);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    letter-spacing: .10em;
}

.goods-product-main {
    min-width: 0;
}

.goods-product-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap:
        clamp(24px, 4vw, 72px);
}

.goods-product-head h3 {
    margin: 0;

    max-width: 900px;

    font-size:
        clamp(19px, 2vw, 30px);

    font-weight: 400;

    line-height: 1.45;

    letter-spacing: .015em;
}

.goods-product-price {
    margin: 5px 0 0;

    color: #d3ba86;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    white-space: nowrap;

    letter-spacing: .03em;
}

.goods-product-description {
    max-width: 860px;

    margin-top: 20px;

    color:
        rgba(255, 255, 255, .56);

    font-size: 13px;

    line-height: 1.9;
}

.goods-product-description p {
    margin:
        0
        0
        10px;
}

.goods-product-specs {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        0
        clamp(30px, 5vw, 80px);

    max-width: 1040px;

    margin:
        28px
        0
        0;
}

.goods-product-specs > div {
    display: grid;

    grid-template-columns:
        86px
        minmax(0, 1fr);

    gap: 18px;

    padding:
        13px
        0;

    border-top:
        1px solid rgba(255, 255, 255, .07);
}

.goods-product-specs dt {
    color:
        rgba(255, 255, 255, .30);

    font-size: 11px;

    letter-spacing: .06em;
}

.goods-product-specs dd {
    margin: 0;

    color:
        rgba(255, 255, 255, .72);

    font-size: 12px;

    line-height: 1.75;
}

.goods-product .ayu-inline-logo {
    display: inline-block;

    width: auto;
    height: .82em;

    margin:
        0
        .08em;

    vertical-align:
        -.04em;

    filter:
        brightness(0)
        invert(1);

    opacity: .92;
}

@media (
    max-width: 760px
) {
    .goods-products-heading {
        align-items: start;
        flex-direction: column;

        gap: 14px;
    }

    .goods-product {
        grid-template-columns:
            42px
            minmax(0, 1fr);
    }

    .goods-product-head {
        grid-template-columns:
            1fr;

        gap: 10px;
    }

    .goods-product-price {
        white-space: normal;
    }

    .goods-product-specs {
        grid-template-columns:
            1fr;
    }
}
