/* =====================================================================
   JiaHsin Colorist — 前台樣式（V1.0.0）
   深色電影感：影像為主角，文字退後；等寬字體作為標籤與數據。
   ===================================================================== */
:root {
    --bg: #0c0c0d;
    --bg-raised: #151517;
    --line: #26262a;
    --text: #e9e6e1;
    --text-dim: #8d8a85;
    --accent: #d8a35b;          /* 暖色調光點綴：像 LUT 裡的高光 */
    --font-sans: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --gutter: clamp(16px, 4vw, 48px);
    --max: 1440px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.mono {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.text-link { border-bottom: 1px solid var(--line); transition: border-color .2s, color .2s; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(12, 12, 13, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.brand__name { font-family: var(--font-serif); font-size: 26px; font-weight: 500; letter-spacing: .02em; line-height: 1; }
.brand__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }

.site-nav { display: flex; gap: 28px; }
.site-nav a {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color .2s;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--text); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--text); margin: 6px 0; transition: transform .25s; }

@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 14px var(--gutter); border-top: 1px solid var(--line); }
    .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

.site-main { min-height: 70vh; }

/* ---------- Hero / Intro ---------- */
.hero { max-width: var(--max); margin: 0 auto; padding: var(--gutter) var(--gutter) 0; }
.hero__media { position: relative; display: block; aspect-ratio: 2.39 / 1; overflow: hidden; background: var(--bg-raised); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.hero__media:hover img { transform: scale(1.025); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .78)); }
.hero__caption { position: absolute; left: clamp(16px, 3vw, 40px); right: 16px; bottom: clamp(16px, 3vw, 36px); }
.hero__caption h1 { margin: 6px 0 4px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 5vw, 64px); line-height: 1.05; }
.hero__sub { color: var(--text-dim); font-size: 14px; }
@media (max-width: 720px) { .hero__media { aspect-ratio: 16 / 10; } }

.intro { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 10vw, 120px) var(--gutter) 24px; }
.intro h1 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 8vw, 96px); line-height: 1; }

/* ---------- Filter + Grid ---------- */
.work-section { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 80px; scroll-margin-top: 64px; }

.filter { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.filter a {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--text-dim);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}
.filter a:hover { color: var(--text); }
.filter a.is-active { color: var(--text); border-color: var(--accent); }

.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
@media (min-width: 1200px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.work-card { display: block; }
.work-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-raised); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.92); transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.work-card:hover .work-card__media img { transform: scale(1.04); filter: saturate(1.05) brightness(1); }
.work-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--text-dim); background: linear-gradient(135deg, #18181b, #0f0f11); }
.work-card__duration { position: absolute; right: 10px; bottom: 8px; color: var(--text); background: rgba(0, 0, 0, .55); padding: 2px 8px; }
.work-card__meta { padding-top: 14px; }
.work-card__eyebrow { display: flex; justify-content: space-between; gap: 12px; }
.work-card__eyebrow span:first-child { color: var(--accent); }
.work-card__title { margin: 6px 0 2px; font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; transition: color .2s; }
.work-card:hover .work-card__title { color: var(--accent); }
.work-card__role { margin: 0; color: var(--text-dim); font-size: 13px; }

.empty { color: var(--text-dim); padding: 60px 0; text-align: center; }

/* ---------- Work detail ---------- */
.work-detail { max-width: var(--max); margin: 0 auto; padding: var(--gutter) var(--gutter) 80px; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player iframe, .player video, .player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.player img { object-fit: cover; }

.work-detail__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 48px; padding: 40px 0 32px; border-bottom: 1px solid var(--line); }
.work-detail__head > .mono { grid-column: 1 / -1; color: var(--accent); }
.work-detail__head h1 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 5vw, 60px); line-height: 1.05; }

.facts { margin: 0; display: grid; gap: 10px; align-content: start; }
.facts > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); padding-top: 3px; }
.facts dd { margin: 0; }

.work-detail__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; padding: 40px 0; }
.description p { margin: 0 0 1.2em; max-width: 62ch; white-space: pre-line; }
.credits h2 { margin: 0 0 16px; font-weight: 400; }
.credits dl { margin: 0; }
.credits dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 6px 0; font-size: 14px; }
.credits dt { color: var(--text-dim); }
.credits dd { margin: 0; }

@media (max-width: 860px) {
    .work-detail__head, .work-detail__body { grid-template-columns: minmax(0, 1fr); }
}

.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding-top: 32px; border-top: 1px solid var(--line); }
.pager a { display: flex; flex-direction: column; gap: 4px; transition: color .2s; }
.pager a:hover { color: var(--accent); }
.pager__next { text-align: right; align-items: flex-end; }
.pager__all { align-items: center; }
.pager span:not(.mono) { font-family: var(--font-serif); font-size: 20px; }
@media (max-width: 640px) {
    .pager { grid-template-columns: 1fr 1fr; }
    .pager__all { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- About ---------- */
.about { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 8vw, 100px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; }
.about__head h1 { margin: 8px 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 7vw, 84px); line-height: 1; }
.about__role { color: var(--text-dim); margin: 0; }
.about__body p { margin: 0 0 1.2em; max-width: 60ch; font-size: 16px; }
.about__body .facts { margin-top: 32px; }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-dim); }


/* V1.0.6 RWD 補強：手機上分類列改為可橫向滑動，避免換成多行佔掉首屏 */
@media (max-width: 640px) {
    .filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
    .filter::-webkit-scrollbar { display: none; }
    .filter a { flex: 0 0 auto; white-space: nowrap; }
    .work-section { padding-top: 24px; }
    .site-header__inner { padding-top: 14px; padding-bottom: 14px; }
    .brand__name { font-size: 22px; }
    .facts > div { grid-template-columns: 80px 1fr; }
    .credits dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0; }
}