/* ============================================================
   GRAND-ROUTE LOGISTICS · 宏途联运
   视觉语言：越野地形等高线 + 货运调度单据 + 警示斜纹
   规则：无圆角卡片、无毛玻璃、无紫色、异形切角按钮
   ============================================================ */

:root {
    --ink: #0d0f0a;
    --ink-2: #14180f;
    --ink-3: #1f2418;
    --paper: #e7e3d5;
    --paper-2: #dcd7c4;
    --sand: #cbc2a7;
    --amber: #efa310;
    --amber-d: #bd7c04;
    --rust: #a5391a;
    --olive: #4b5a2c;
    --moss: #74874a;
    --steel: #767d6c;
    --plate: #00337a;
    --line: rgba(13, 15, 10, .2);
    --line-soft: rgba(13, 15, 10, .1);

    --rail: 62px;
    --gutter: clamp(18px, 4vw, 68px);
    --measure: 1320px;

    --font-display: "Oswald", "Barlow Condensed", "Arial Narrow", "Haettenschweiler", "Microsoft YaHei", sans-serif;
    --font-body: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --font-mono: "JetBrains Mono", "Consolas", "SFMono-Regular", "Courier New", monospace;

    --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%230d0f0a' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M-30 34 Q 20 4 60 34 T 150 34 T 230 34'/%3E%3Cpath d='M-30 66 Q 20 36 60 66 T 150 66 T 230 66'/%3E%3Cpath d='M-30 98 Q 20 68 60 98 T 150 98 T 230 98'/%3E%3Cpath d='M-30 130 Q 20 100 60 130 T 150 130 T 230 130'/%3E%3C/g%3E%3C/svg%3E");
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.28'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background-color: var(--paper);
    background-image: var(--grain), var(--contour);
    background-blend-mode: multiply, normal;
    color: var(--ink);
    font: 15px/1.75 var(--font-body);
    overflow-x: hidden;
}

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

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

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: .98; letter-spacing: .02em; }

p { margin: 0 0 1.1em; }

/* ---------- 通用条带 ---------- */

.hazard-strip {
    height: 11px;
    background: repeating-linear-gradient(135deg, var(--ink) 0 11px, var(--amber) 11px 22px);
}

.tread-strip {
    height: 16px;
    background-color: var(--ink);
    background-image: repeating-linear-gradient(102deg, rgba(231, 227, 213, .16) 0 5px, transparent 5px 13px);
}

.rule-road {
    height: 3px;
    background-image: repeating-linear-gradient(90deg, var(--ink) 0 30px, transparent 30px 54px);
    opacity: .55;
}

/* ---------- 页面骨架 ---------- */

.shell { padding-left: var(--rail); }

.rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    background: var(--ink);
    border-right: 1px solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 18px;
    z-index: 40;
}

.rail__plate {
    width: 40px;
    border: 2px solid var(--paper);
    background: var(--paper);
    color: var(--ink);
    font: 700 11px/1 var(--font-mono);
    text-align: center;
    letter-spacing: .04em;
    padding: 5px 0 5px 8px;
    position: relative;
    overflow: hidden;
}

.rail__plate::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: var(--plate);
}

.rail__vertical {
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--sand);
}

.rail__km {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--amber);
    writing-mode: vertical-rl;
    letter-spacing: .1em;
}

.rail__km span { color: var(--steel); font-size: 11px; font-family: var(--font-mono); }

/* ---------- 顶部信息栏 + 导航 ---------- */

.topbar {
    background: var(--ink);
    color: var(--sand);
    font: 11px/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 9px var(--gutter);
    display: flex;
    gap: 26px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.topbar b { color: var(--amber); font-weight: 500; }

.masthead {
    padding: 26px var(--gutter) 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

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

.brand__mark {
    width: 54px; height: 54px;
    background: var(--ink);
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
    flex: none;
}

.brand__mark::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid var(--amber);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

.brand__mark::after {
    content: "GR";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 17px/1 var(--font-display);
    letter-spacing: .06em;
    color: var(--paper);
    padding-right: 4px;
}

.brand__cn { font-family: var(--font-display); font-size: clamp(25px, 3.4vw, 35px); letter-spacing: .16em; }

.brand__en {
    font: 500 10.5px/1.4 var(--font-mono);
    letter-spacing: .3em;
    color: var(--steel);
    text-transform: uppercase;
    margin-top: 4px;
}

.nav { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }

.nav__link {
    padding: 8px 15px 9px;
    display: block;
    border-bottom: 3px solid transparent;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.nav__no { display: block; font: 500 10px/1 var(--font-mono); letter-spacing: .2em; color: var(--steel); }

.nav__cn { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: .14em; margin-top: 5px; }

.nav__link:hover { background: var(--paper-2); border-bottom-color: var(--ink); }

.nav__link.is-active { background: var(--ink); border-bottom-color: var(--amber); }
.nav__link.is-active .nav__cn { color: var(--paper); }
.nav__link.is-active .nav__no { color: var(--amber); }

.nav-toggle { display: none; }

.masthead__edge { padding: 14px var(--gutter) 0; }

/* ---------- 内容容器 ---------- */

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.wrap--narrow { max-width: 1040px; }

/* ---------- 区块标题 ---------- */

.sect-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: clamp(14px, 3vw, 40px);
    padding: clamp(38px, 6vw, 74px) 0 20px;
}

.sect-head__no {
    font-family: var(--font-display);
    font-size: clamp(58px, 11vw, 132px);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(13, 15, 10, .32);
    letter-spacing: -.02em;
}

.sect-head__body { padding-bottom: 6px; }

.kicker {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--rust);
    display: flex;
    align-items: center;
    gap: 10px;
}

.kicker::before { content: ""; width: 26px; height: 2px; background: var(--rust); flex: none; }

.sect-head__title {
    font-size: clamp(30px, 5vw, 54px);
    letter-spacing: .1em;
    margin: 14px 0 10px;
}

.sect-head__lead { max-width: 62ch; color: #3b3f31; margin: 0; }

.sect-head__meta {
    margin-top: 14px;
    font: 500 11px/1 var(--font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--steel);
}

/* ---------- 异形按钮 ---------- */

.btn {
    --notch: 13px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 26px;
    border: 0;
    background: var(--ink);
    color: var(--paper);
    font: 600 13px/1 var(--font-display);
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.btn:hover { background: var(--ink-3); transform: translate(-2px, -2px); }

.btn:active { transform: translate(0, 0); }

.btn-primary { background: var(--amber); color: var(--ink); }
.btn-primary:hover { background: #ffb524; }

.btn-rust { background: var(--rust); color: #f6efe2; }
.btn-rust:hover { background: #bd451f; }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-lg { padding: 17px 34px; font-size: 15px; --notch: 17px; }
.btn-sm { padding: 9px 16px; font-size: 11px; --notch: 9px; letter-spacing: .16em; }

.btn-arrow {
    clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
    padding-right: 34px;
}

.btn-wedge {
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    padding: 13px 30px;
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- 标签 / 徽记 ---------- */

.tag {
    display: inline-block;
    padding: 5px 13px 6px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

.tag--amber { background: var(--amber); color: var(--ink); }
.tag--rust { background: var(--rust); color: #f6efe2; }
.tag--olive { background: var(--olive); color: #eef0e1; }
.tag--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- 首页 ---------- */

.hero {
    position: relative;
    padding: clamp(46px, 8vw, 108px) 0 clamp(30px, 5vw, 56px);
    overflow: hidden;
}

.hero__ghost {
    position: absolute;
    right: -4vw;
    top: 8%;
    font-family: var(--font-display);
    font-size: clamp(90px, 18vw, 250px);
    line-height: .78;
    color: transparent;
    -webkit-text-stroke: 1px rgba(13, 15, 10, .13);
    letter-spacing: -.03em;
    pointer-events: none;
    user-select: none;
    text-align: right;
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr);
    gap: clamp(26px, 5vw, 70px);
    align-items: end;
}

.hero__title {
    font-size: clamp(50px, 11vw, 128px);
    letter-spacing: .06em;
    line-height: .9;
    margin: 18px 0 8px;
}

.hero__title em {
    font-style: normal;
    display: block;
    font-size: .3em;
    letter-spacing: .34em;
    color: transparent;
    -webkit-text-stroke: 1.2px var(--ink);
    margin-top: 16px;
}

.hero__lead { max-width: 52ch; font-size: 16px; color: #35392c; }

.hero__slab {
    display: inline-block;
    background: var(--amber);
    color: var(--ink);
    font: 600 13px/1 var(--font-display);
    letter-spacing: .26em;
    text-transform: uppercase;
    padding: 9px 20px 10px;
    transform: skewX(-11deg);
    margin-bottom: 22px;
}

.hero__slab span { display: inline-block; transform: skewX(11deg); }

.readout { border-top: 3px solid var(--ink); padding-top: 14px; }

.readout__title {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 12px;
}

.readout__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
}

.readout__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: #3b3f31; }

.readout__dots { flex: 1; border-bottom: 1px dotted rgba(13, 15, 10, .35); transform: translateY(-4px); }

.readout__value { font-family: var(--font-display); font-size: 26px; letter-spacing: .04em; }

.readout__value small { font-size: 11px; font-family: var(--font-mono); color: var(--steel); margin-left: 4px; }

.route-ribbon {
    margin: clamp(30px, 5vw, 58px) 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 18px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--steel);
    flex-wrap: wrap;
}

.route-ribbon__line {
    flex: 1;
    min-width: 120px;
    height: 12px;
    background-image:
        repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 34px);
    opacity: .5;
}

.route-ribbon__tick { width: 11px; height: 11px; background: var(--rust); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* 首页入口索引 */

.gateway { border-top: 3px solid var(--ink); margin-top: clamp(30px, 5vw, 54px); }

.gateway__item {
    display: grid;
    grid-template-columns: clamp(58px, 8vw, 110px) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);
    padding: clamp(20px, 3vw, 30px) 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: padding-left .22s ease, background-color .22s ease;
}

.gateway__item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--amber);
    transition: width .22s ease;
}

.gateway__item:hover { padding-left: 22px; background: var(--paper-2); }
.gateway__item:hover::before { width: 7px; }

.gateway__no {
    font-family: var(--font-display);
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(13, 15, 10, .4);
}

.gateway__cn { font-family: var(--font-display); font-size: clamp(21px, 3vw, 31px); letter-spacing: .13em; }

.gateway__desc { color: #4a4f3f; font-size: 13.5px; margin: 7px 0 0; max-width: 56ch; }

.gateway__en { font: 500 10.5px/1 var(--font-mono); letter-spacing: .26em; color: var(--steel); text-transform: uppercase; }

.gateway__go {
    width: 46px; height: 46px;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 66%, 66% 100%, 0 100%);
    position: relative;
    flex: none;
}

.gateway__go::after {
    content: "";
    position: absolute;
    left: 15px; top: 18px;
    width: 14px; height: 9px;
    border-right: 2px solid var(--amber);
    border-bottom: 2px solid var(--amber);
    transform: rotate(-45deg);
}

/* ---------- 单据式列表（新闻） ---------- */

.manifest { border-top: 3px solid var(--ink); }

.manifest__row {
    display: grid;
    grid-template-columns: 58px 168px minmax(0, 1fr) auto;
    gap: clamp(14px, 2.6vw, 30px);
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background-color .2s ease, padding-left .2s ease;
}

.manifest__row:hover { background: var(--paper-2); padding-left: 18px; }

.manifest__no {
    font-family: var(--font-display);
    font-size: 27px;
    color: transparent;
    -webkit-text-stroke: 1.3px rgba(13, 15, 10, .45);
    letter-spacing: .02em;
}

.manifest__shot {
    width: 168px; height: 106px;
    background: var(--ink-3);
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 76%, 88% 100%, 0 100%);
    position: relative;
}

.manifest__shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.06); transition: filter .25s ease, transform .4s ease; }

.manifest__row:hover .manifest__shot img { filter: saturate(1.05) contrast(1.1); transform: scale(1.04); }

.manifest__shot--void {
    background-image: repeating-linear-gradient(135deg, var(--ink-3) 0 8px, var(--ink-2) 8px 16px);
}

.manifest__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 10px;
}

.manifest__meta b { color: var(--rust); font-weight: 500; }

.manifest__title { font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .07em; line-height: 1.14; }

.manifest__row:hover .manifest__title { color: var(--rust); }

.manifest__sub { color: #4a4f3f; font-size: 13.5px; margin: 9px 0 0; }

.manifest__go {
    font: 600 11px/1 var(--font-display);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.manifest__go i { width: 26px; height: 2px; background: var(--ink); display: block; transition: width .2s ease; }

.manifest__row:hover .manifest__go i { width: 42px; background: var(--rust); }

.manifest__pin {
    position: absolute;
    left: -6px; top: 18px;
    background: var(--rust);
    color: #f7f0e3;
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: .2em;
    padding: 4px 9px 5px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ---------- 文章页 ---------- */

.article__head { padding: clamp(34px, 6vw, 70px) 0 24px; }

.article__title { font-size: clamp(31px, 5.4vw, 62px); letter-spacing: .06em; line-height: 1.02; margin: 16px 0 14px; max-width: 24ch; }

.article__sub { font-size: 17px; color: #3d4133; max-width: 60ch; }

.waybill {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 3px solid var(--ink);
    border-bottom: 1px solid var(--line);
    margin: 22px 0 0;
}

.waybill__cell {
    padding: 14px 26px 14px 0;
    margin-right: 26px;
    border-right: 1px solid var(--line-soft);
}

.waybill__cell:last-child { border-right: 0; }

.waybill__k { font: 500 10px/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--steel); }

.waybill__v { font-family: var(--font-display); font-size: 19px; letter-spacing: .08em; margin-top: 7px; }

.article__hero { margin: 30px 0 0; clip-path: polygon(0 0, 100% 0, 100% 90%, 96% 100%, 0 100%); }

.article__hero img { width: 100%; max-height: 68vh; object-fit: cover; }

.article__body {
    display: grid;
    grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
    gap: clamp(16px, 4vw, 46px);
    padding: clamp(30px, 5vw, 56px) 0;
}

.article__marginalia {
    font: 500 10px/1.7 var(--font-mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--steel);
    border-top: 2px solid var(--ink);
    padding-top: 12px;
}

.prose { max-width: 74ch; font-size: 16.5px; line-height: 1.95; color: #23261c; }

.prose > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3.3em;
    float: left;
    line-height: .82;
    padding: 6px 12px 0 0;
    color: var(--rust);
}

.prose h2, .prose h3 { font-size: 25px; letter-spacing: .07em; margin: 34px 0 14px; padding-left: 14px; border-left: 5px solid var(--amber); }

.prose img { margin: 22px 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 97% 100%, 0 100%); }

.prose ul, .prose ol { padding-left: 20px; }

.prose li { margin-bottom: 8px; }

.prose blockquote {
    margin: 24px 0;
    padding: 6px 0 6px 22px;
    border-left: 3px solid var(--rust);
    color: #3d4133;
    font-size: 17px;
}

.prose a { color: var(--rust); border-bottom: 1px solid rgba(165, 57, 26, .5); }

.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; }

/* 图组：错落条带，非卡片 */

.gallery { padding: 6px 0 clamp(34px, 6vw, 60px); }

.gallery__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.gallery__item { position: relative; }

.gallery__item:nth-child(3n+2) { transform: translateY(24px); }
.gallery__item:nth-child(4n+3) { transform: translateY(-14px); }

.gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 84%, 90% 100%, 0 100%);
    filter: saturate(.85) contrast(1.05);
    transition: filter .25s ease;
}

.gallery__item:hover img { filter: saturate(1.08) contrast(1.1); }

.gallery__cap {
    font: 500 10px/1.6 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--steel);
    margin-top: 9px;
    padding-left: 10px;
    border-left: 2px solid var(--amber);
}

/* ---------- 房间开放（发车时刻板） ---------- */

.board { border-top: 3px solid var(--ink); }

.board__row {
    display: grid;
    grid-template-columns: 152px minmax(0, 1.5fr) minmax(0, 1fr) 140px;
    gap: clamp(14px, 2.4vw, 30px);
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    align-items: start;
}

.board__row::before {
    content: "";
    position: absolute;
    left: -14px; top: 26px; bottom: 26px;
    width: 5px;
    background: var(--steel);
}

.board__row.is-open::before { background: var(--amber); }
.board__row.is-locked::before { background: var(--rust); }
.board__row.is-closed::before { background: var(--steel); opacity: .5; }

.board__clock { font-family: var(--font-mono); }

.board__date { font-size: 12px; letter-spacing: .18em; color: var(--steel); text-transform: uppercase; }

.board__time { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: .04em; margin: 6px 0 8px; }

.board__count { font-size: 11px; letter-spacing: .12em; color: var(--rust); }

.board__name { font-size: clamp(21px, 2.7vw, 30px); letter-spacing: .08em; line-height: 1.12; }

.board__route {
    margin: 13px 0 0;
    display: flex;
    align-items: center;
    gap: 11px;
    font: 500 12px/1.5 var(--font-mono);
    letter-spacing: .1em;
    color: #3b3f31;
}

.board__route::before { content: ""; width: 9px; height: 9px; background: var(--olive); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); flex: none; }

.board__note { color: #4a4f3f; font-size: 13.5px; margin: 12px 0 0; }

.board__specs { display: grid; gap: 11px; }

.spec { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: baseline; }

.spec__k { font: 500 10px/1.6 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }

.spec__v { font-size: 13.5px; color: #23261c; word-break: break-word; }

.board__status { text-align: right; }

.board__pill {
    display: inline-block;
    padding: 8px 16px 9px;
    font: 600 11.5px/1 var(--font-display);
    letter-spacing: .2em;
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
    background: var(--amber);
    color: var(--ink);
}

.is-locked .board__pill { background: var(--rust); color: #f7f0e3; }
.is-closed .board__pill { background: transparent; color: var(--steel); box-shadow: inset 0 0 0 1.5px var(--steel); }

.board__pwd { margin-top: 12px; font: 500 11px/1.6 var(--font-mono); letter-spacing: .14em; color: var(--steel); }
.board__pwd b { color: var(--ink); letter-spacing: .2em; }

/* ---------- 成员公示（名册） ---------- */

.roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 0 clamp(24px, 5vw, 68px);
    border-top: 3px solid var(--ink);
}

.roster__item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.roster__item::after {
    content: "";
    position: absolute;
    right: 0; bottom: -1px;
    width: 0; height: 2px;
    background: var(--amber);
    transition: width .25s ease;
}

.roster__item:hover::after { width: 100%; }

.roster__no {
    font-family: var(--font-display);
    font-size: 30px;
    color: transparent;
    -webkit-text-stroke: 1.3px rgba(13, 15, 10, .4);
}

.roster__item:hover .roster__no { -webkit-text-stroke-color: var(--rust); }

.roster__name { font-family: var(--font-display); font-size: 25px; letter-spacing: .1em; }

.roster__pos {
    display: inline-block;
    margin-top: 8px;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--sand);
    padding: 5px 11px 6px;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.roster__note { display: block; margin-top: 9px; font-size: 13px; color: #4a4f3f; }

/* ---------- 官方动态 ---------- */

.feed { border-top: 3px solid var(--ink); }

.feed__row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    gap: clamp(14px, 2.6vw, 30px);
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    transition: background-color .2s ease, padding-left .2s ease;
}

.feed__row:hover { background: var(--paper-2); padding-left: 16px; }

.feed__shot {
    width: 130px; height: 88px;
    overflow: hidden;
    background-image: repeating-linear-gradient(135deg, var(--ink-3) 0 8px, var(--ink-2) 8px 16px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 78%);
}

.feed__shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }

.feed__src {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 10px;
}

.feed__src b { color: var(--olive); font-weight: 500; }

.feed__title { font-size: clamp(18px, 2.3vw, 25px); letter-spacing: .06em; line-height: 1.2; }

.feed__row:hover .feed__title { color: var(--rust); }

.feed__sum { color: #4a4f3f; font-size: 13.5px; margin: 9px 0 0; }

.feed__ext {
    width: 42px; height: 42px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--line);
    clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
    position: relative;
    flex: none;
}

.feed__ext::after {
    content: "";
    position: absolute;
    left: 13px; top: 16px;
    width: 12px; height: 8px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(-45deg);
}

.feed__row:hover .feed__ext { box-shadow: inset 0 0 0 2px var(--rust); }

/* ---------- 空状态 ---------- */

.void {
    margin: 26px 0 clamp(40px, 7vw, 80px);
    padding: 30px 26px 32px;
    border-top: 3px solid var(--ink);
    border-left: 6px solid var(--rust);
    background: rgba(203, 194, 167, .35);
}

.void__title { font-family: var(--font-display); font-size: 25px; letter-spacing: .14em; margin-bottom: 10px; }

.void__text { font: 500 12px/1.9 var(--font-mono); letter-spacing: .06em; color: #3b3f31; margin: 0; max-width: 70ch; }

/* ---------- 分页 ---------- */

.pager { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: clamp(28px, 5vw, 52px) 0; }

.pager__item {
    min-width: 44px;
    padding: 11px 14px;
    text-align: center;
    font: 600 12px/1 var(--font-display);
    letter-spacing: .14em;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--line);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.pager__item:hover { background: var(--ink); color: var(--paper); box-shadow: none; }

.pager__item.is-current { background: var(--amber); color: var(--ink); box-shadow: none; }

.pager__info { font: 500 11px/1 var(--font-mono); letter-spacing: .16em; color: var(--steel); margin-left: auto; text-transform: uppercase; }

/* ---------- 页脚 ---------- */

.footer { background: var(--ink); color: var(--sand); margin-top: clamp(40px, 7vw, 90px); }

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(22px, 5vw, 60px);
    padding: clamp(34px, 6vw, 62px) var(--gutter);
    max-width: var(--measure);
    margin: 0 auto;
}

.footer__brand { font-family: var(--font-display); font-size: 31px; letter-spacing: .16em; color: var(--paper); }

.footer__en { font: 500 10.5px/1.6 var(--font-mono); letter-spacing: .3em; color: var(--steel); text-transform: uppercase; margin-top: 8px; }

.footer__text { color: #a9a795; font-size: 13.5px; margin-top: 16px; max-width: 46ch; }

.footer__h {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--amber);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(231, 227, 213, .18);
    margin-bottom: 14px;
}

.footer__link { display: block; padding: 7px 0; color: #cfcbb8; font-size: 14px; }
.footer__link:hover { color: var(--amber); padding-left: 8px; transition: padding-left .2s ease; }

.footer__bottom {
    border-top: 1px solid rgba(231, 227, 213, .14);
    padding: 16px var(--gutter);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font: 500 10.5px/1.6 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--steel);
    max-width: var(--measure);
    margin: 0 auto;
}

/* ---------- 响应式 ---------- */

@media (max-width: 1080px) {
    .hero__grid { grid-template-columns: 1fr; }
    .board__row { grid-template-columns: 130px minmax(0, 1fr); }
    .board__specs { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); display: grid; }
    .board__status { grid-column: 1 / -1; text-align: left; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    :root { --rail: 0px; }
    .rail { display: none; }
    .shell { padding-left: 0; }

    .masthead { align-items: center; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--ink);
        color: var(--paper);
        border: 0;
        padding: 12px 18px;
        font: 600 12px/1 var(--font-display);
        letter-spacing: .2em;
        text-transform: uppercase;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
        cursor: pointer;
    }

    .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 2px solid var(--ink);
        margin-top: 14px;
    }

    .nav.is-open { display: flex; }

    .nav__link { border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; padding: 15px 6px; }
    .nav__cn { margin-top: 0; }

    .manifest__row { grid-template-columns: 44px minmax(0, 1fr); }
    .manifest__shot { grid-column: 1 / -1; width: 100%; height: 190px; }
    .manifest__go { grid-column: 1 / -1; }

    .article__body { grid-template-columns: 1fr; }
    .article__marginalia { border-top: 0; border-left: 3px solid var(--ink); padding: 0 0 0 12px; }

    .feed__row { grid-template-columns: 96px minmax(0, 1fr); }
    .feed__shot { width: 96px; height: 68px; }
    .feed__ext { display: none; }

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

    .gallery__item:nth-child(3n+2),
    .gallery__item:nth-child(4n+3) { transform: none; }
}

/* ---------- 图片查看层 ---------- */

.zoom-layer {
    position: fixed;
    inset: 0;
    background: rgba(13, 15, 10, .95);
    display: none;
    place-items: center;
    padding: 5vh 5vw;
    z-index: 90;
    cursor: zoom-out;
}

.zoom-layer.is-on { display: grid; }

.zoom-layer img { max-width: 100%; max-height: 84vh; object-fit: contain; }

.zoom-layer__close {
    position: absolute;
    top: 22px; right: 26px;
    font: 600 12px/1 var(--font-display);
    letter-spacing: .22em;
    color: var(--amber);
}

@media (max-width: 520px) {
    .waybill__cell { border-right: 0; margin-right: 0; width: 50%; }
    .board__row { grid-template-columns: 1fr; }
    .board__row::before { left: -8px; }
    .prose > p:first-of-type::first-letter { font-size: 2.6em; }
}

/* ============================================================
   BEAUTIFY LAYER · 大众化 / 国际 3A 质感（仅视觉，不改 HTML 结构）
   ============================================================ */

:root {
    /* 引入更现代的正文字体（Latin），中文仍走系统字体 */
    --font-body: "Sora", "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --glow-amber: rgba(239, 163, 16, .65);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 全局电影感氛围：极淡的固定径向光晕，不干扰阅读 */
.shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 88% -8%, rgba(239, 163, 16, .10), transparent 60%),
        radial-gradient(52vw 52vw at -6% 102%, rgba(116, 135, 74, .10), transparent 60%);
}

::selection { background: var(--amber); color: var(--ink); }

a:focus-visible, button:focus-visible, .nav__link:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

/* ---------- HERO 电影感 ---------- */
.hero__ghost {
    -webkit-text-stroke: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, rgba(239, 163, 16, .28), rgba(13, 15, 10, .05));
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .92;
}

.topbar { letter-spacing: .24em; }

.nav__link.is-active { box-shadow: inset 0 0 0 1px rgba(239, 163, 16, .22); }

/* ---------- 卡片 / 列表 深度与悬停 ---------- */
.gateway__item,
.board__row,
.roster__item,
.feed__row,
.manifest__row {
    transition: padding-left .22s ease, background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.gateway__item:hover,
.board__row:hover,
.roster__item:hover,
.feed__row:hover,
.manifest__row:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -30px rgba(13, 15, 10, .6);
    background-color: var(--paper-2);
}

.gateway__no { -webkit-text-stroke: 1.4px rgba(239, 163, 16, .5); }
.gateway__item:hover .gateway__no { -webkit-text-stroke-color: var(--amber); }

.roster__item:hover .roster__no { -webkit-text-stroke-color: var(--amber); }
.feed__row:hover .feed__title { color: var(--rust); }

/* ---------- 按钮发光 ---------- */
.btn-primary { box-shadow: 0 12px 30px -12px var(--glow-amber); }
.btn-primary:hover { background: #ffb524; box-shadow: 0 18px 40px -10px var(--glow-amber); transform: translate(-2px, -2px); }
.btn-arrow { transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, padding-right .18s ease; }
.btn-arrow:hover { padding-right: 40px; }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--ink), 0 14px 30px -18px rgba(13, 15, 10, .5); }

/* ---------- 图片更通透 ---------- */
.manifest__shot img,
.feed__shot img,
.gallery__item img,
.article__hero img { transition: filter .3s ease, transform .5s ease; }

/* ============================================================
   DARK CINEMATIC THEME · 暗色电影版（仅视觉覆盖层，结构/功能不变）
   深墨底 + 琥珀辉光 + 大字幽灵标题
   ============================================================ */

:root {
    --paper: #0c0e09;            /* 页面深墨底 */
    --paper-2: #1f2517;          /* 悬停表面 */
    --ink: #ece7d6;              /* 主文本（浅） */
    --ink-2: #11150c;
    --ink-3: #1a1f13;            /* 深色表面（顶栏/按钮/页脚/车牌） */
    --sand: #c7c1a9;
    --rust: #cf5a36;             /* 暗底上提亮锈红 */
    --moss: #8fa35e;
    --steel: #90967d;
    --plate: #3f74c0;
    --line: rgba(236, 231, 214, .16);
    --line-soft: rgba(236, 231, 214, .09);
    --line-strong: rgba(236, 231, 214, .32);
    --glow-amber: rgba(239, 163, 16, .7);
    --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ece7d6' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M-30 34 Q 20 4 60 34 T 150 34 T 230 34'/%3E%3Cpath d='M-30 66 Q 20 36 60 66 T 150 66 T 230 66'/%3E%3Cpath d='M-30 98 Q 20 68 60 98 T 150 98 T 230 98'/%3E%3Cpath d='M-30 130 Q 20 100 60 130 T 150 130 T 230 130'/%3E%3C/g%3E%3C/svg%3E");
}

::selection { background: var(--amber); color: #0c0e09; }

/* 全局电影氛围：加深琥珀/橄榄辉光（覆盖美化层） */
.shell::before {
    background:
        radial-gradient(58vw 58vw at 86% -10%, rgba(239, 163, 16, .16), transparent 60%),
        radial-gradient(50vw 50vw at -8% 104%, rgba(116, 135, 74, .14), transparent 60%);
}

/* ---------- 条带 / 侧栏 / 顶栏 ---------- */
.rule-road { background-image: repeating-linear-gradient(90deg, rgba(236,231,214,.4) 0 30px, transparent 30px 54px); }
.rail { background: var(--ink-3); border-right: 1px solid rgba(236,231,214,.14); }
.rail__plate { background: #ece7d6; color: #0c0e09; }
.rail__plate::before { background: var(--plate); }
.rail__vertical { color: var(--sand); }
.topbar { background: var(--ink-3); color: var(--sand); }
.topbar b { color: var(--amber); }

/* ---------- 导航 / 品牌 ---------- */
.nav__link:hover { background: var(--ink-3); border-bottom-color: var(--ink); }
.nav__link.is-active { background: var(--ink-3); border-bottom-color: var(--amber); }
.nav__link.is-active .nav__cn { color: #ece7d6; }
.nav__link.is-active .nav__no { color: var(--amber); }
.brand__mark { background: var(--ink-3); }
.brand__mark::after { color: #ece7d6; }

/* ---------- 按钮 / 标签 ---------- */
.btn { background: var(--ink-3); color: #ece7d6; }
.btn:hover { background: #232a18; }
.btn-primary { background: var(--amber); color: #0c0e09; }
.btn-primary:hover { background: #ffb524; color: #0c0e09; box-shadow: 0 18px 40px -10px var(--glow-amber); transform: translate(-2px,-2px); }
.btn-rust { background: var(--rust); color: #f7efe3; }
.btn-rust:hover { background: #e06a45; }
.btn-ghost { color: #ece7d6; box-shadow: inset 0 0 0 2px rgba(236,231,214,.55); }
.btn-ghost:hover { background: rgba(236,231,214,.08); color: #ece7d6; box-shadow: inset 0 0 0 2px #ece7d6, 0 14px 30px -18px rgba(0,0,0,.7); }
.tag { background: var(--ink-3); color: #ece7d6; }
.tag--amber { background: var(--amber); color: #0c0e09; }
.tag--rust { background: var(--rust); color: #f7efe3; }
.tag--olive { background: var(--olive); color: #ece7d6; }
.tag--outline { color: #ece7d6; box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- HERO 暗色电影版 ---------- */
.hero {
    position: relative;
    background:
        radial-gradient(120% 130% at 78% -10%, rgba(239,163,16,.18), transparent 55%),
        radial-gradient(95% 95% at 8% 115%, rgba(116,135,74,.14), transparent 62%),
        #0a0c07;
}
.hero__title { color: #f3eede; text-shadow: 0 2px 34px rgba(0,0,0,.55); }
.hero__title em {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.4px rgba(239,163,16,.6);
}
.hero__lead { color: #b6b09b; }
.hero__slab { color: #0c0e09; }
.hero__ghost {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.6px rgba(239,163,16,.34);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    text-shadow: 0 0 46px rgba(239,163,16,.28);
    opacity: .92;
}

/* ---------- 区块标题 / 读数 / 路线带 ---------- */
.sect-head__no { -webkit-text-stroke: 1.6px rgba(236,231,214,.22); }
.sect-head__lead { color: #a39e88; }
.readout { border-top: 3px solid var(--line-strong); }
.readout__title { color: var(--steel); }
.readout__label { color: #9a957f; }
.readout__dots { border-bottom: 1px dotted rgba(236,231,214,.28); }
.route-ribbon { color: var(--steel); border-top: 1px solid var(--line); }
.route-ribbon__line { background-image: repeating-linear-gradient(90deg, rgba(236,231,214,.5) 0 18px, transparent 18px 34px); opacity: .6; }

/* ---------- 入口索引 / 单据列表 ---------- */
.gateway { border-top: 3px solid var(--line-strong); }
.gateway__item:hover { background-color: var(--paper-2); }
.gateway__desc { color: #9a957f; }
.gateway__go { background: var(--ink-3); }
.manifest { border-top: 3px solid var(--line-strong); }
.manifest__row:hover { background: var(--paper-2); }
.manifest__no { -webkit-text-stroke: 1.3px rgba(236,231,214,.3); }
.manifest__sub { color: #9a957f; }
.manifest__go { color: #ece7d6; }

/* ---------- 文章 ---------- */
.article__title { color: #f3eede; }
.article__sub { color: #a39e88; }
.waybill { border-top: 3px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.waybill__cell { border-right: 1px solid var(--line-soft); }
.waybill__k { color: var(--steel); }
.article__marginalia { border-top: 2px solid var(--line-strong); color: var(--steel); }
.prose { color: #c4bfac; }
.prose blockquote { color: #a39e88; border-left: 3px solid var(--rust); }
.prose a { color: var(--rust); border-bottom: 1px solid rgba(207,90,54,.5); }
.prose th, .prose td { border-bottom: 1px solid var(--line); }

/* ---------- 房间板 ---------- */
.board { border-top: 3px solid var(--line-strong); }
.board__row:hover { background: var(--paper-2); }
.board__pill { color: #0c0e09; }
.board__route { color: #9a957f; }
.board__note { color: #9a957f; }
.spec__v { color: #c4bfac; }
.board__pwd b { color: var(--ink); }

/* ---------- 名册 ---------- */
.roster { border-top: 3px solid var(--line-strong); }
.roster__item:hover { background: var(--paper-2); }
.roster__no { -webkit-text-stroke: 1.3px rgba(236,231,214,.3); }
.roster__name { color: #ece7d6; }
.roster__pos { background: var(--ink-3); color: var(--sand); }
.roster__note { color: #9a957f; }

/* ---------- 官方动态 ---------- */
.feed { border-top: 3px solid var(--line-strong); }
.feed__row:hover { background: var(--paper-2); }
.feed__sum { color: #9a957f; }
.feed__ext { box-shadow: inset 0 0 0 2px var(--line); }
.feed__ext::after { border-right-color: #ece7d6; border-bottom-color: #ece7d6; }

/* ---------- 空状态 / 分页 / 页脚 ---------- */
.void { background: rgba(28,33,22,.5); border-top: 3px solid var(--line-strong); }
.void__text { color: #9a957f; }
.pager__item { box-shadow: inset 0 0 0 1.5px var(--line); }
.pager__item:hover { background: var(--ink-3); color: #ece7d6; box-shadow: none; }
.pager__item.is-current { background: var(--amber); color: #0c0e09; box-shadow: none; }
.footer { background: var(--ink-3); color: var(--sand); }
.footer__brand { color: #ece7d6; }
.footer__text { color: #9a957f; }
.footer__link { color: #b9b39c; }

/* ---------- 移动端导航 ---------- */
.nav-toggle { background: var(--ink-3); color: #ece7d6; }
.nav { border-top: 2px solid var(--line); }
.nav__link { border-bottom: 1px solid var(--line); }