/* ==========================================================================
   Andrew Garfield 影迷站 —— 设计系统
   方向：剧场熄灯后的暗场 + 一束暖金聚光。
   依据来自站内内容本身：他是舞台剧演员出身（两次托尼奖），
   站内那句「从学校的戏剧舞台走到好莱坞最闪耀的聚光灯下」正是这套视觉的出处。
   结构线：年份。生平、作品、获奖本来就是按年份排的，所以年份做轴是信息而非装饰。
   ========================================================================== */

:root {
    /* 底色：偏冷的深炭，像熄了灯的观众席 */
    --ink:      #0e1013;
    --ink-2:    #16191f;   /* 抬起的表面：卡片 */
    --ink-3:    #1e232b;   /* 发丝线、描边 */
    --ink-4:    #2a3038;   /* 描边悬停 */

    /* 文字：暖白纸色，不用纯白（纯白在深底上过于刺眼） */
    --paper:     #ece7de;  /* 15.5:1 */
    --paper-dim: #9aa0ab;  /* 7.3:1  */

    /* 强调：暖金。取自颁奖礼与剧场招贴，刻意压低饱和度，不要霓虹感 */
    --gold:     #c9a34e;   /* 8.0:1  */
    --gold-hot: #e8c877;   /* 11.8:1 */
    --gold-dim: rgba(201, 163, 78, 0.18);

    /* 字体：招贴用高对比衬线，正文用系统无衬线，年份与说明用等宽（场记板的语汇） */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                    "Songti SC", "STSong", SimSun, Georgia, serif;
    --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                    "Microsoft YaHei", "Hiragino Sans GB", Roboto, Helvetica, Arial, sans-serif;
    --font-mono:    "SF Mono", SFMono-Regular, ui-monospace, Consolas,
                    "Liberation Mono", Menlo, monospace;

    --shell: 1160px;      /* 内容最大宽度 */
    --gut:   clamp(20px, 5vw, 56px);
    --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
    margin: 0;
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--gold-hot); }

/* 键盘焦点必须可见 */
a:focus-visible,
button:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold-hot);
    outline-offset: 3px;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }


/* ==========================================================================
   招贴式页头 —— 全站 6 个页面共用同一套，这是把原来 6 种配色收拢成一体的关键
   ========================================================================== */

.bill {
    position: relative;
    border-bottom: 1px solid var(--ink-3);
    /* 一束从上方打下的光 */
    background:
        radial-gradient(ellipse 70% 120% at 50% -30%, rgba(201, 163, 78, 0.10), transparent 68%),
        var(--ink);
}

.bill-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 18px var(--gut);
}

/* 站名：小号等宽大写，像票根上的印字 */
.bill-mark {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--ease);
}
.bill-mark:hover { color: var(--gold); }

/* 页面标题区 */
.bill-head {
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(28px, 6vw, 64px) var(--gut) clamp(30px, 5vw, 56px);
    text-align: center;
}

/* 眉标：每页写一条内容本身为真的信息，不是装饰性标签 */
.bill-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 18px;
}

.bill-head h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.1rem, 6.4vw, 4.4rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0;
}

.bill-head h1 em {
    display: block;
    font-size: 0.4em;
    font-style: normal;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin-top: 20px;
    font-family: var(--font-mono);
}


/* ---------- 导航 ---------- */

.bill-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bill-nav a {
    position: relative;
    display: inline-block;
    padding: 4px 0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--paper-dim);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

/* 下划线由左向右抹入 */
.bill-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s var(--ease);
}

.bill-nav a:hover { color: var(--paper); }
.bill-nav a:hover::after { transform: scaleX(1); }

.bill-nav a[aria-current="page"] { color: var(--gold); }
.bill-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* 语言切换 */
.bill-nav .lang-switch a {
    padding: 3px 11px;
    border: 1px solid var(--ink-4);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--paper);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.bill-nav .lang-switch a::after { display: none; }
.bill-nav .lang-switch a:hover {
    border-color: var(--gold);
    background-color: var(--gold-dim);
    color: var(--gold-hot);
}


/* ==========================================================================
   区块通用
   ========================================================================== */

main { display: block; }

.band { padding: clamp(44px, 7vw, 88px) 0; }
.band + .band { border-top: 1px solid var(--ink-3); }

.band-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.band-head h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
}

/* 标题右侧延伸的发丝线，把标题「挂」在版面上 */
.band-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--ink-4), transparent);
}

.band-note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin: 0;
    white-space: nowrap;
}


/* ==========================================================================
   首页
   ========================================================================== */

/* ---------- 主视觉：聚光灯下的肖像 ---------- */

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ink-3);
}

/* 这束光是整站唯一的一处张扬，其余地方全部保持安静 */
.hero::before {
    content: "";
    position: absolute;
    top: -30%; left: 50%;
    width: min(1100px, 130%);
    height: 160%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 46% 50% at 50% 34%,
                rgba(201, 163, 78, 0.20),
                rgba(201, 163, 78, 0.055) 46%,
                transparent 72%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(40px, 7vw, 84px) var(--gut);
}

.hero-portrait {
    position: relative;
    border: 1px solid var(--ink-4);
    background: var(--ink-2);
}

.hero-portrait img { width: 100%; }

/* 肖像下沿的一条金线，像舞台边缘 */
.hero-portrait::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.hero-lede {
    font-family: var(--font-display);
    font-size: clamp(1.06rem, 2.1vw, 1.4rem);
    line-height: 1.68;
    color: var(--paper);
    margin: 0 0 26px;
}

/* 基本资料：用等宽标签 + 发丝线分隔，读起来像制作单 */
.facts {
    width: 100%;
    border-collapse: collapse;
}

.facts th,
.facts td {
    text-align: left;
    vertical-align: top;
    padding: 11px 0;
    border-bottom: 1px solid var(--ink-3);
}

.facts th {
    width: 9.5em;
    padding-right: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-dim);
    white-space: nowrap;
    padding-top: 15px;
}

.facts td { font-size: 0.95rem; }
.facts tr:last-child th,
.facts tr:last-child td { border-bottom: 0; }


/* ---------- 年份轴 —— 全站贯穿的结构线 ---------- */

.reel { margin: 0; padding: 0; list-style: none; }

.reel-item {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0 clamp(18px, 3vw, 30px);
}

.reel-year {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.reel-body {
    position: relative;
    border-left: 1px solid var(--ink-3);
    padding: 0 0 30px clamp(20px, 3vw, 32px);
}

/* 轴上的节点 */
.reel-body::before {
    content: "";
    position: absolute;
    left: -4px; top: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid var(--gold);
    transition: background-color 0.25s var(--ease);
}

.reel-item:hover .reel-body::before { background: var(--gold); }

.reel-item:last-child .reel-body { border-left-color: transparent; padding-bottom: 0; }

.reel-body p { margin: 0; }

.reel-body cite { font-style: italic; color: var(--paper); }


/* ---------- 评价 ---------- */

.quote-grid {
    display: grid;
    gap: clamp(20px, 3vw, 32px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.quote {
    margin: 0;
    padding: clamp(24px, 3vw, 34px);
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    transition: border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.quote:hover { border-color: var(--ink-4); transform: translateY(-2px); }

/* 开引号做成压在角上的装饰字，但只用一次，不铺满 */
.quote::before {
    content: "\201C";
    display: block;
    font-family: var(--font-display);
    font-size: 3.2rem;
    line-height: 0.7;
    color: var(--gold);
    opacity: 0.55;
    margin-bottom: 12px;
}

.quote p {
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 18px;
}

.quote footer {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

.quote cite { font-style: normal; }


/* ==========================================================================
   影视作品页
   ========================================================================== */

.films { display: grid; gap: clamp(18px, 2.5vw, 26px); }

.film {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: stretch;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    overflow: hidden;
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.film:hover { border-color: var(--ink-4); transform: translateY(-3px); }

.film-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 3.4vw, 40px);
}

.film-year {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--gold);
    margin: 0 0 12px;
    font-variant-numeric: tabular-nums;
}

.film-title h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    line-height: 1.15;
    margin: 0 0 12px;
}

.film-title h3 cite { font-style: normal; }

.film-role {
    font-size: 0.92rem;
    color: var(--paper-dim);
    margin: 0 0 16px;
}

.film-more {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-hot);
    text-decoration: none;
    align-self: flex-start;
    border-bottom: 1px solid transparent;
    transition: border-color 0.24s var(--ease);
}
.film-more:hover { border-color: var(--gold-hot); }

/* 剧照：容器裁切，图片悬停缓慢放大 */
.film-still { overflow: hidden; background: var(--ink); }

.film-still img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}

.film:hover .film-still img { transform: scale(1.04); }


/* ==========================================================================
   单部影片页
   ========================================================================== */

.film-page {
    display: grid;
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.film-main { min-width: 0; }

.film-media {
    border: 1px solid var(--ink-3);
    background: var(--ink-2);
    padding: 10px;
}

.film-media video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.film-caption {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-dim);
    margin: 12px 2px 0;
}

.synopsis { margin-top: clamp(28px, 4vw, 44px); }

.synopsis p {
    max-width: 68ch;
    margin: 0 0 1.2em;
}

.synopsis p:first-of-type {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.9vw, 1.28rem);
    line-height: 1.7;
    color: var(--paper);
}

.film-side { display: grid; gap: clamp(18px, 2.5vw, 26px); min-width: 0; }

.side-card {
    padding: clamp(20px, 2.6vw, 28px);
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
}

.side-card h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.12rem;
    margin: 0 0 14px;
}

.side-card p { margin: 0 0 1em; font-size: 0.93rem; }
.side-card p:last-child { margin-bottom: 0; }

.side-still { overflow: hidden; border: 1px solid var(--ink-3); }
.side-still img { width: 100%; transition: transform 0.7s var(--ease); }
.side-still:hover img { transform: scale(1.05); }


/* ==========================================================================
   获奖页
   ========================================================================== */

.awards-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}

.stage { min-width: 0; }

.display-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 轮播换图用交叉淡入，不要硬切 */
.display-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: opacity 0.4s var(--ease);
}

.display-frame.is-swapping img { opacity: 0; }

.awardlist {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.gallery-nav {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ink-4);
    border-radius: 50%;
    background: transparent;
    color: var(--paper-dim);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.22s var(--ease), color 0.22s var(--ease), background-color 0.22s var(--ease);
}

.gallery-nav:hover {
    border-color: var(--gold);
    color: var(--gold-hot);
    background-color: var(--gold-dim);
}

.gallery { flex: 1 1 auto; min-width: 0; overflow-x: auto; }

.gallery ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 2px;
}

.gallery button {
    display: block;
    padding: 0;
    border: 1px solid var(--ink-3);
    background: none;
    cursor: pointer;
    line-height: 0;
    opacity: 0.55;
    transition: opacity 0.24s var(--ease), border-color 0.24s var(--ease);
}

.gallery button:hover { opacity: 1; }

.gallery button[aria-current="true"] {
    opacity: 1;
    border-color: var(--gold);
}

.gallery img { width: 62px; height: auto; }

/* 获奖记录：年份继续用等宽做轴 */
.ledger { display: grid; gap: 26px; }

.ledger-year {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0 20px;
}

.ledger-year h3 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin: 2px 0 0;
    font-variant-numeric: tabular-nums;
}

.ledger-year ul {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    border-left: 1px solid var(--ink-3);
}

.ledger-year li {
    position: relative;
    font-size: 0.92rem;
    line-height: 1.65;
    padding-bottom: 12px;
}

.ledger-year li:last-child { padding-bottom: 0; }
.ledger-year li cite { font-style: italic; color: var(--paper); }


/* ==========================================================================
   媒体页
   ========================================================================== */

.media-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.media-main { display: grid; gap: clamp(20px, 3vw, 30px); min-width: 0; }

.piece {
    padding: clamp(24px, 3.2vw, 38px);
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
}

.piece h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    margin: 0 0 20px;
}

.piece p { margin: 0 0 1.15em; }
.piece p:last-child { margin-bottom: 0; }

/* 采访对话：引语用衬线，缩进并带金色竖线 */
.piece .said {
    font-family: var(--font-display);
    font-size: 1.06rem;
    line-height: 1.72;
    border-left: 2px solid var(--gold);
    padding-left: 18px;
    margin-left: 2px;
}

.note {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--paper-dim);
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--ink-3);
}

.media-side { display: grid; gap: clamp(18px, 2.5vw, 26px); min-width: 0; }


/* ---------- 评论 ---------- */

.commentfrm {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.commentfrm > img {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--ink-4);
}

.commentfrm textarea {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 9px 12px;
    height: 42px;
    color: var(--paper);
    background-color: var(--ink);
    border: 1px solid var(--ink-4);
    border-radius: 2px;
    resize: vertical;
    transition: height 0.25s var(--ease), border-color 0.22s var(--ease);
}

.commentfrm textarea::placeholder { color: var(--paper-dim); }
.commentfrm textarea:focus { height: 84px; border-color: var(--gold); }

.commentfrm button {
    flex: 0 0 auto;
    min-width: 74px;
    height: 42px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    background-color: var(--gold);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.22s var(--ease);
}

.commentfrm button:hover { background-color: var(--gold-hot); }

.comment {
    display: flex;
    gap: 14px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--ink-3);
}

.comment > img {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ink-3);
}

.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-body p { margin: 0 0 6px; font-size: 0.93rem; }
.comment-body p:last-child { margin-bottom: 0; }

.commentname {
    font-family: var(--font-mono);
    font-size: 0.74rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.commentinfo {
    font-family: var(--font-mono);
    font-size: 0.68rem !important;
    letter-spacing: 0.06em;
    color: var(--paper-dim);
}


/* ==========================================================================
   页脚
   ========================================================================== */

.site-foot {
    border-top: 1px solid var(--ink-3);
    padding: clamp(34px, 5vw, 56px) 0;
    margin-top: clamp(24px, 4vw, 40px);
}

.foot-line {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.6;
    color: var(--paper);
    margin: 0 0 22px;
    max-width: 46ch;
}

.foot-line cite { font-style: normal; color: var(--paper-dim); }

.foot-meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.9;
    letter-spacing: 0.08em;
    color: var(--paper-dim);
    margin: 0;
}


/* ==========================================================================
   动效 —— 克制：只有入场淡入上移、悬停反馈、图片缓慢缩放
   ========================================================================== */

/* 页头载入序列：站名 → 眉标 → 标题 → 导航，短促交错 */
.bill-mark,
.bill-nav,
.bill-eyebrow,
.bill-head h1 {
    animation: rise 0.62s var(--ease) both;
}

.bill-mark    { animation-delay: 0.04s; }
.bill-nav     { animation-delay: 0.10s; }
.bill-eyebrow { animation-delay: 0.16s; }
.bill-head h1 { animation-delay: 0.22s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* 滚动进入时淡入上移，由 JS 加 .is-in */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* 内容绝不能因为脚本没跑起来而永久隐藏：
   .no-js      —— 浏览器禁用了 JS
   .reveal-all —— 内联保险计时器触发（site.js 加载失败） */
.no-js .reveal,
.reveal-all .reveal {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   响应式
   ========================================================================== */

@media screen and (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-portrait { max-width: 260px; }
    .film-page,
    .awards-layout,
    .media-layout { grid-template-columns: 1fr; }
    .film { grid-template-columns: 1fr; }
    .film-still { order: -1; max-height: 320px; }
}

@media screen and (max-width: 680px) {
    .bill-top {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .bill-nav ul { justify-content: center; gap: 4px 16px; }
    .bill-head { text-align: left; }
    .band-head { flex-wrap: wrap; gap: 8px 16px; }
    .band-head::after { display: none; }
    .band-note { white-space: normal; }
    .reel-item { grid-template-columns: 3.4rem minmax(0, 1fr); }
    .facts th { width: auto; display: block; padding-bottom: 0; border: 0; }
    .facts td { display: block; padding-top: 2px; }
    .facts tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--ink-3); }
    .facts th, .facts td { padding-left: 0; padding-right: 0; }
    .facts tr:last-child { border-bottom: 0; }
    .commentfrm { flex-wrap: wrap; }
    .commentfrm textarea { flex: 1 1 100%; order: 2; }
    .commentfrm button { order: 3; width: 100%; }
}


/* ==========================================================================
   尊重系统的「减少动态效果」偏好 —— 全部动效关掉，布局不变
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}