:root {
    --ink: var(--ink);
    --coal: var(--ink-soft);
    --paper: var(--paper);
    --mist: var(--paper-low);
    --stone: var(--paper-mid);
    --brass: var(--gold);
    --brass-soft: rgba(201, 165, 111, 0.4);
    --slate: var(--muted);
    --text: var(--text);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--text);
    background: linear-gradient(180deg, var(--paper), var(--mist));
    font-family: var(--sans);
}

body, p, li, article {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    text-align: justify;
    text-justify: inter-character;
}

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

/* ── Hero 板块 ── */
.hero {
    min-height: 500px;
    padding: 112px 24px 64px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(7, 17, 27, 0.92), rgba(7, 17, 27, 0.7) 44%, rgba(7, 17, 27, 0.25)),
        linear-gradient(180deg, rgba(7, 17, 27, 0.15), rgba(7, 17, 27, 0.75)),
        url("assets/case-law-books-photo.jpg");
    background-size: cover;
    background-position: center;
}
.hero-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 28px;
}
.eyebrow, .label {
    color: var(--brass);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.eyebrow::before, .label::before {
    content: "";
    display: inline-block;
    width: 58px;
    height: 1px;
    margin-right: 14px;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--brass), transparent);
}
.hero h1 {
    max-width: 900px;
    margin: 24px 0 0;
    font-family: var(--serif);
    font-size: clamp(48px, 4.6vw, 60px);
    line-height: 1.12;
    font-weight: 600;
}
.hero p {
    max-width: 720px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 17px;
    line-height: 1.85;
}

/* ── Section 网格与布局 ── */
.section {
    padding: 84px 24px;
}
.section-alt {
    background: var(--mist);
    border-top: 1px solid rgba(201,165,111,0.12);
    border-bottom: 1px solid rgba(201,165,111,0.12);
}
.section-dark {
    background: var(--ink);
    color: #fff;
}
.section-inner,
.section-grid,
.metric-grid {
    max-width: 1400px;
    margin: 0 auto;
}
.section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 64px;
    align-items: start;
}
.section h2 {
    margin: 18px 0 0;
    max-width: 760px;
    font-family: var(--serif);
    font-size: 42px;
    line-height: 1.22;
    font-weight: 600;
}
.section p {
    max-width: 760px;
    color: var(--slate);
    font-size: 16px;
    line-height: 1.9;
}
.section-dark p { color: rgba(255,255,255,.66); }
.copy-stack {
    margin-top: 28px;
    display: grid;
    gap: 14px;
}

/* ── Panel 控制 ── */
.panel {
    border: none;
    border-top: 1.5px solid rgba(201, 165, 111, 0.28);
    background: transparent;
    padding: 32px 0 16px 0;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel::before {
    content: "";
    position: absolute;
    top: -1.5px;
    left: 0;
    width: 0%;
    height: 1.5px;
    background: var(--brass);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.panel:hover::before {
    width: 100%;
}

.section-dark .panel {
    border-color: rgba(255, 255, 255, 0.08);
    background: transparent;
}
.list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
    color: var(--slate);
    font-size: 15px;
    line-height: 1.7;
}
.list li {
    padding-top: 14px;
    border-top: 1px solid rgba(201,165,111,0.18);
}
.section-dark .list { color: rgba(255,255,255,.66); }
.section-dark .list li { border-top-color: rgba(201,165,111,0.22); }

/* ── Metric 度量衡 ── */
.metric-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(201,165,111,0.2);
    border-bottom: 1px solid rgba(201,165,111,0.2);
}
.metric {
    padding: 26px;
    border-right: 1px solid rgba(201,165,111,0.2);
}
.metric:last-child { border-right: 0; }
.metric strong {
    display: block;
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--brass);
}
.metric span {
    display: block;
    margin-top: 10px;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.7;
}

/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    background: var(--ink);
    color: var(--brass);
    border: 1px solid rgba(201, 165, 111, 0.4);
    font-size: 20px;
    cursor: pointer;
    z-index: 99;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
}
.back-to-top:hover {
    background: var(--brass);
    color: var(--ink);
}

@media (max-width: 1120px) {
    .section-grid { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric:nth-child(2n) { border-right: 0; }
}
@media (max-width: 640px) {
    .hero { min-height: 45vh; padding: 122px 20px 54px; }
    .hero h1 { font-size: clamp(32px, 6vw, 42px); }
    .hero p { font-size: 15px; }
    .section { padding: 62px 20px; }
    .section h2 { font-size: clamp(26px, 5vw, 32px); }
    .panel { padding: 26px 0; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric { border-right: 0; border-bottom: 1px solid rgba(201,165,111,0.2); }
    .metric:last-child { border-bottom: 0; }
}