/* ============================================================
   歷屆年度網站迴廊（/org/term-sites）
   年鑑書封（.ts-v1，2026-08-18 定稿）：橫向大卡、細金雙框、
   緞帶屆次、Slogan 置中、總監名片釘右。
   ============================================================ */

.ts-page {
    --ts-ink:    var(--ink-deep, #1A1530);
    --ts-paper:  var(--paper,    #F8F4ED);
    --ts-gold:   var(--gold,     #C8A45C);
    --ts-meta:   color-mix(in srgb, var(--ts-ink) 60%, transparent);
    --ts-border: color-mix(in srgb, var(--ts-ink) 14%, transparent);
    padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.ts-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

/* ── 頁首 ── */

.ts-head { margin-bottom: clamp(2rem, 5vw, 3.2rem); }

.ts-head__title {
    margin: 0;
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    color: var(--ts-ink);
    letter-spacing: 0.06em;
}

.ts-head__sub {
    margin: 0.6rem 0 0;
    font-size: 0.95rem;
    color: var(--ts-meta);
}

.ts-empty {
    padding: 3rem 0;
    text-align: center;
    color: var(--ts-meta);
}

/* ── 卡片共通內裝 ── */

.ts-card {
    display: block;
    position: relative;
    text-decoration: none;
    color: var(--ts-ink);
    background: var(--ts-paper);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ts-card:hover { transform: translateY(-4px); }

.ts-card__ribbon {
    position: absolute;
    top: 0;
    left: clamp(1.2rem, 3vw, 2rem);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.7rem 0.85rem;
    background: var(--ts-ink);
    color: var(--ts-paper);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.5rem), 0 100%);
    z-index: 2;
}

.ts-card__ribbon b {
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.08em;
}

.ts-card__ribbon em {
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--ts-paper) 75%, transparent);
}

.ts-card__stage {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.2rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 2.4rem);
}

.ts-card__logoplate {
    flex: 0 0 auto;
    width: clamp(88px, 11vw, 132px);
    height: clamp(88px, 11vw, 132px);
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px var(--ts-border), 0 6px 18px rgba(26, 21, 48, 0.12);
}

.ts-card__logoplate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ts-card__wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.ts-card__slogan {
    display: flex;
    flex-direction: column;
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
    font-size: clamp(1.45rem, 3.4vw, 2.2rem);
    letter-spacing: 0.14em;
    line-height: 1.3;
    color: var(--ts-ink);
}

.ts-card__sloganline { transform: translateX(calc(var(--line-i, 0) * 1.2em)); }

.ts-card__rule {
    width: 3.2em;
    height: 2px;
    margin: 0.55rem 0 0.4rem;
    background: linear-gradient(to right, transparent, var(--ts-gold), transparent);
}

.ts-card__sub {
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    color: var(--ts-meta);
}

.ts-card__person {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* .ts-card__stage 前綴提權：site.css 的 img.img-broken{width/height:100%} (0,1,1) 會把破圖撐成大橢圓。
   半身照直式構圖 → 3:4 圓角直框（圓形會裁到頭）、頂部對齊 */
.ts-card__stage .ts-card__portrait {
    width: clamp(84px, 9vw, 112px);
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 0.6rem;
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 0 0 1px var(--ts-border), 0 6px 16px rgba(26, 21, 48, 0.14);
}

.ts-card__portrait--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ts-ink);
    color: var(--ts-paper);
    font-family: 'Noto Serif TC', serif;
    font-size: 1.8rem;
}

.ts-card__personmeta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.ts-card__persontitle {
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: var(--ts-gold);
}

.ts-card__personname {
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    font-size: 1.3rem;
}

.ts-card__personclub {
    font-size: 0.78rem;
    color: var(--ts-meta);
}

.ts-card__cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0.7rem clamp(1.2rem, 3vw, 2rem);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--ts-gold);
    border-top: 1px solid var(--ts-border);
}

.ts-card:hover .ts-card__cta i { transform: translateX(4px); }
.ts-card__cta i { transition: transform 0.2s ease; }

.ts-v1 .ts-corridor {
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3.5vw, 2.2rem);
}

.ts-v1 .ts-card {
    border: 1px solid var(--ts-border);
    outline: 1px solid color-mix(in srgb, var(--ts-gold) 55%, transparent);
    outline-offset: 5px;
    box-shadow: 0 10px 30px rgba(26, 21, 48, 0.08);
}

.ts-v1 .ts-card:hover {
    outline-color: var(--ts-gold);
    box-shadow: 0 16px 42px rgba(26, 21, 48, 0.14);
}

/* ── 手機收斂 ── */

@media (max-width: 720px) {
    .ts-card__stage {
        flex-direction: column;
        gap: 1.1rem;
    }

    .ts-v1 .ts-card__stage { padding-top: 4.2rem; }

    .ts-card__sloganline { transform: translateX(calc(var(--line-i, 0) * 0.6em)); }

    .ts-card__person {
        width: 100%;
        justify-content: center;
        padding-top: 0.9rem;
        border-top: 1px dashed var(--ts-border);
    }
}