/* ==========================================================================
阿甘游学官网样式
设计令牌直接取自客户《四年走遍中国·侠士护照 视觉设计稿 V6》，
保证官网上线物料与品牌物料同源，不让 AI 在不同渠道读到两套视觉身份。
========================================================================== */
:root{
/* —— 取自护照设计稿 :root —— */
--navy:#1e3f8f; --navy-deep:#14295e; --gold:#c8912a; --gold-lt:#e6c875; --gold-dk:#8a5a2b;
--paper:#fbf8f1; --ink:#3a332a; --grey:#767065; --line:#ddd3c0;
--snow:#2f7fc1; --plain:#c8912a; --grass:#8a4b9e; --west:#a05a2c; --south:#e0762f;
--bronze:#b08d57; --silver:#9aa3ad; --goldmedal:#d4af37;
/* —— 排版 —— */
--serif: "Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,"Times New Roman",serif;
--sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
--maxw: 1080px;
--radius: 6px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.85;
text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(30,63,143,.28);}
a:hover{border-bottom-color:var(--navy);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
/* ============================ 顶部 ============================ */
/* 顶栏：深色。
它是 40px 的"页框上沿"（一行工具信息），不是 hero 那种大面积色带：
有它页面才有顶边，并与深蓝页脚上下呼应；去掉后整页会显得悬空。
客户"不要 100% 满屏"针对的是 hero 色块，不适用于这条细框。 */
.topbar{
background:var(--navy-deep);color:#cfd8ee;font-size:13px;
letter-spacing:.02em;
}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-top:8px;padding-bottom:8px;}
.topbar a{color:#e6c875;border-bottom-color:rgba(230,200,117,.4);}
.topbar .sp{flex:1;}
.topbar .flag{color:var(--gold-lt);}
header.site{
background:var(--paper);
/* 不设下边框：让导航与页头连成一片连续纸面（客户 2026-10 指示） */
position:sticky;top:0;z-index:20;
}
header.site .wrap{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px;}
.brandmark{display:flex;align-items:center;flex:none;border:0;}
/* 黄底版：按原稿呈现（藏蓝压亮黄），轻微圆角以免在纸面上显得像贴片。
客户 2026-10 调整：内边距 20%→12%，显示高度 50→42px，黄面积减少约 23%。 */
.brandmark img{height:42px;width:auto;display:block;border-radius:3px;}
nav.main{flex:1;display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:flex-end;font-size:14.5px;}
nav.main a{border:0;color:var(--ink);padding:4px 0;border-bottom:2px solid transparent;}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold);}
/* ============================ 面包屑 ============================ */
.crumbs{font-size:12.5px;color:var(--grey);background:transparent;}
.crumbs .wrap{padding-top:9px;padding-bottom:9px;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 8px;}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--line);}
.crumbs a{border:0;color:var(--grey);}
.crumbs a:hover{color:var(--navy);}
.crumbs li[aria-current]{color:var(--ink);}
/* ============================ 页头 ============================ */
/* —— 页头 ——
内页：不做整幅底色、不加整幅分隔线，与其它栏目同处一个内容列（"第一栏与其余栏目同风格"）。
首页：全站唯一的深蓝封面（.hero--cover）。 */
.hero{padding:40px 0 4px;}
.hero h1{font-family:var(--serif);font-size:40px;line-height:1.28;font-weight:700;letter-spacing:.03em;color:var(--navy-deep);}
.hero h1 .gold{color:var(--gold-dk);}
.hero .lede{margin-top:16px;font-size:17px;line-height:1.95;color:#5a5346;max-width:70ch;}
.hero .meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;}
/* 备用封面样式：目前全站未使用（客户 2026-10 指示首页也统一为纸面）。
如需恢复"首页深蓝封面"，给首页 hero 加回 hero--cover 类即可。 */
.hero--cover{
background:linear-gradient(155deg,var(--navy) 0%,var(--navy-deep) 100%);
color:#f2e8cf;padding:56px 0 50px;position:relative;overflow:hidden;
}
.hero--cover::after{
content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
border:1px solid rgba(230,200,117,.28);border-radius:50%;
}
.hero--cover .wrap{position:relative;z-index:1;}
.hero--cover .eyebrow{color:var(--gold-lt);}
.hero--cover h1{color:#fff;}
.hero--cover h1 .gold{background:linear-gradient(180deg,#f4dfa0,#c8912a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero--cover .lede{color:#dfe5f3;}
.chip{
display:inline-block;font-size:12.5px;padding:4px 12px;border-radius:999px;
border:1px solid var(--line);color:var(--gold-dk);background:#f4efe3;
}
.hero--cover .chip{
border-color:rgba(230,200,117,.5);color:var(--gold-lt);background:rgba(230,200,117,.08);
}
main{padding:40px 0 64px;}
h2{
font-family:var(--serif);font-size:26px;color:var(--navy);font-weight:700;
letter-spacing:.02em;margin:44px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--line);
}
h2:first-child{margin-top:0;}
h3{font-size:18.5px;color:var(--navy-deep);margin:26px 0 8px;font-weight:700;letter-spacing:.01em;}
h4{font-size:16px;color:var(--gold-dk);margin:18px 0 6px;font-weight:700;}
p{margin:10px 0;}
ul,ol{margin:10px 0 10px 1.4em;}
li{margin:5px 0;}
section.block{margin-bottom:44px;}
/* ============================ 卡片 ============================ */
.grid{display:grid;gap:18px;}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:20px 22px;
}
.card.plain{background:transparent;}
.metric{
background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
border-radius:var(--radius);padding:16px 18px;
}
.metric .num{font-family:var(--serif);font-size:30px;color:var(--navy);font-weight:700;line-height:1.2;}
.metric .num small{font-size:15px;color:var(--gold-dk);margin-left:3px;font-family:var(--sans);}
.metric .lbl{font-size:13px;color:var(--grey);margin-top:2px;}
.metric .cond{font-size:12px;color:var(--grey);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);}
/* 板块色调 */
.tone-snow{border-left-color:var(--snow);}
.tone-plain{border-left-color:var(--plain);}
.tone-west{border-left-color:var(--west);}
.tone-south{border-left-color:var(--south);}
.tone-snow .num{color:var(--snow);}
.tone-plain .num{color:var(--plain);}
.tone-west .num{color:var(--west);}
.tone-south .num{color:var(--south);}
/* ============================ 表格 ============================ */
.tablewrap{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px;}
caption{caption-side:top;text-align:left;padding:12px 16px 0;font-size:13px;color:var(--grey);}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{background:#f4efe3;color:var(--navy-deep);font-weight:700;white-space:nowrap;font-size:13.5px;}
tbody tr:last-child td{border-bottom:0;}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
/* 事实页对照表的“说明子行”：承接上一行的备注，视觉上归属该条 */
tbody tr.sub td{border-bottom:1px solid var(--line);padding-top:0;background:#fdfcf8;color:var(--grey);}
tbody tr.sub:last-child td{border-bottom:0;}
/* 五列对照表在窄屏需要更宽的滚动区，避免角标与列名换行错位 */
.tablewrap.wide table{min-width:880px;}
/* ============================ 待确认角标 ============================ */
/* 用法：待确认 —— 文本由模板给出，CSS 只负责样式。
注意：早期版本在 ::before 里注入“待确认”字样，若模板同时传文本会显示两遍，
故改为纯样式类，字样一律由调用方决定。 */
.pending{
display:inline-block;font-size:11.5px;line-height:1.6;padding:1px 8px;border-radius:999px;
background:#fdf3e0;color:#8a5a2b;border:1px solid #e3c48d;white-space:nowrap;
font-family:var(--sans);
}
.pending-x{
display:inline-block;font-size:11.5px;line-height:1.6;padding:1px 8px;border-radius:999px;
background:#f6eef6;color:#5d3a63;border:1px solid #d6bcd8;white-space:nowrap;
}
.note{
background:#f4f7fd;border:1px solid #cfdcf5;border-left:4px solid var(--navy);
border-radius:var(--radius);padding:14px 18px;margin:16px 0;font-size:14.5px;
}
.note.warn{background:#fdf6ea;border-color:#e8d1a5;border-left-color:var(--gold);}
.note.quote{background:#fff;border-color:var(--line);border-left-color:var(--gold-dk);}
.note .t{font-weight:700;color:var(--navy-deep);display:block;margin-bottom:4px;}
/* ============================ FAQ ============================ */
.faq{margin:16px 0;}
details.qa{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
margin-bottom:10px;overflow:hidden;
}
details.qa[open]{border-color:#c9bfa6;}
details.qa>summary{
cursor:pointer;list-style:none;padding:14px 46px 14px 18px;position:relative;
font-weight:700;color:var(--navy-deep);font-size:15.5px;
}
details.qa>summary::-webkit-details-marker{display:none;}
details.qa>summary::after{
content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
color:var(--gold);font-size:20px;font-weight:400;
}
details.qa[open]>summary::after{content:"−";}
details.qa .a{padding:0 18px 16px;font-size:15px;color:var(--ink);}
details.qa .a p{margin:0;}
/* ============================ 线路卡片 ============================ */
.route-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:0;overflow:hidden;display:flex;flex-direction:column;
}
.route-card .bar{height:5px;background:var(--gold);}
.route-card.tone-snow .bar{background:var(--snow);}
.route-card.tone-plain .bar{background:var(--plain);}
.route-card.tone-west .bar{background:var(--west);}
.route-card.tone-south .bar{background:var(--south);}
.route-card .body{padding:18px 20px 20px;}
.route-card .yr{font-size:12px;letter-spacing:.22em;color:var(--grey);}
.route-card h3{margin:4px 0 6px;font-family:var(--serif);font-size:23px;color:var(--navy);}
.route-card .days{font-size:13.5px;color:var(--gold-dk);font-weight:700;}
.route-card .q{font-size:14.5px;color:var(--ink);margin-top:10px;}
/* ============================ 页脚 ============================ */
footer.site{
background:var(--navy-deep);color:#c3cde6;font-size:14px;padding:40px 0 28px;
}
footer.site a{color:#e6c875;border-bottom-color:rgba(230,200,117,.32);}
footer.site h4{color:#fff;font-size:14px;letter-spacing:.14em;margin:0 0 10px;font-weight:700;}
footer.site .cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
footer.site ul{list-style:none;margin:0;}
footer.site li{margin:6px 0;}
footer.site .legal{
margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
font-size:12.5px;color:#93a1c4;line-height:2;
}
footer.site .legal .row{display:flex;flex-wrap:wrap;gap:4px 18px;}
/* ============================ 其他 ============================ */
.kicker{font-size:12.5px;letter-spacing:.24em;color:var(--gold-dk);text-transform:uppercase;margin-bottom:6px;}
.lede{font-size:17px;color:var(--ink);max-width:72ch;}
.small{font-size:13px;color:var(--grey);}
.hr{height:1px;background:var(--line);margin:34px 0;}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;}
.toc ol{margin:8px 0 0 1.3em;}
.badge{
display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;
background:#f4efe3;color:var(--gold-dk);border:1px solid var(--line);
white-space:nowrap;
}
.badge.ok{background:#eef7ef;color:#2f6b3a;border-color:#bfdcc4;}
.badge.no{background:#fdefef;color:#8a3030;border-color:#e5bcbc;}
figure{margin:18px 0;}
figure img{border:1px solid var(--line);border-radius:var(--radius);}
figcaption{font-size:13px;color:var(--grey);margin-top:8px;line-height:1.7;}
@media (max-width:720px){
.hero h1{font-size:30px;}
.hero{padding:36px 0 32px;}
h2{font-size:22px;}
nav.main{font-size:13.5px;gap:2px 12px;}
header.site .wrap{flex-wrap:wrap;gap:10px;}
nav.main{justify-content:flex-start;}
}
@media print{
header.site,footer.site,.topbar,.crumbs{display:none;}
body{background:#fff;}
}
/* ============================================================================
档案层（Dossier Layer）
---------------------------------------------------------------------------
2026-10 重设计新增：纸质档案 / 侠士护照视觉体系。
配色沿用护照原色（藏蓝 + 金 + 米白），新增「印章朱红」——
朱红只用于「已核验 / 盖章」这一种语义，不作装饰色，以保住印章的强度。
设计原则：表格优先于卡片。
档案本来就是表格化的；而且表格里的结构化数据比卡片里的散句更容易被
AI 抽取 —— 视觉选择与 GEO 目标是同一件事，不是两件事。
========================================================================== */
:root{
--seal:#a8261c; /* 印章朱红：仅用于「已核验 / 盖章」 */
--paper-2:#f4efe3; /* 次级纸面：表格底、卡槽 */
/* 档案层的标签与小字用色。原 --grey (#8a8378) 在白底上只有 3.74:1，
不到 AA；档案表格左列与图注都是小字，故另设一个达标值 5.50:1。 */
--grey-ink:#6f685e;
}
/* —— 档案块：编号条 + 内容 —— */
.dossier{
background:#fff;border:1px solid var(--line);border-radius:2px;
margin:22px 0;overflow:hidden;
}
.dossier>.no{
display:block;padding:7px 16px;background:var(--paper-2);
border-bottom:1px solid var(--line);
font-size:11.5px;letter-spacing:.2em;color:var(--gold-dk);
}
.dossier>.body{padding:18px 20px 20px;}
.dossier>.body>:first-child{margin-top:0;}
.dossier>.body>:last-child{margin-bottom:0;}
/* —— 档案表格：左列标签 + 虚线行，无竖线 —— */
table.ledger{width:100%;border-collapse:collapse;font-size:14.5px;min-width:0;}
table.ledger th,table.ledger td{
text-align:left;padding:9px 0;vertical-align:top;
border-bottom:1px dashed var(--line);
}
table.ledger tr:last-child th,table.ledger tr:last-child td{border-bottom:0;}
table.ledger th{
width:7.5em;white-space:nowrap;font-weight:400;
color:var(--grey-ink);letter-spacing:.06em;padding-right:16px;
}
table.ledger td{color:var(--ink);}
table.ledger td strong{color:var(--navy);}
/* —— 印章 —— */
.seal{
display:inline-block;font-family:var(--serif);font-weight:700;
font-size:13px;letter-spacing:.18em;line-height:1.5;
color:var(--seal);border:2px solid var(--seal);border-radius:3px;
padding:2px 10px;transform:rotate(-3.5deg);opacity:.9;white-space:nowrap;
}
.seal.sm{font-size:11px;padding:1px 7px;border-width:1.5px;letter-spacing:.12em;}
.seal.round{
border-radius:50%;width:5.4em;height:5.4em;padding:0;
display:inline-flex;align-items:center;justify-content:center;
text-align:center;line-height:1.3;
}
/* —— 图版与图注：照片按档案插图处理，不铺满 —— */
.plate{margin:0;}
.plate>img,.plate>a>img{
border:1px solid var(--line);border-radius:2px;background:#fff;padding:5px;
}
.plate>.cap{
font-size:12.5px;color:var(--grey-ink);line-height:1.75;
margin-top:9px;padding-top:7px;border-top:1px dashed var(--line);
}
.plate>.cap b{color:var(--ink);font-weight:600;}
.plate>.cap .meta{color:var(--gold-dk);}
/* —— 骑缝线 —— */
.perforation{position:relative;height:0;border-top:1px dashed var(--line);margin:30px 0;}
.perforation::after{
content:"✂";position:absolute;right:2px;top:-9px;
font-size:12px;color:var(--line);background:var(--paper);padding:0 4px;
}
/* —— 页头里的档案编号 —— */
.hero .dossier-no{
display:inline-block;font-size:11.5px;letter-spacing:.24em;
color:var(--gold-dk);border-bottom:1px solid var(--line);
padding-bottom:3px;margin-bottom:16px;
}
.hero--cover .dossier-no{
color:var(--gold-lt);border-bottom-color:rgba(230,200,117,.4);
}
@media (max-width:720px){
table.ledger th{width:6em;padding-right:10px;font-size:13.5px;}
table.ledger{font-size:14px;}
}
/* ============================ 实地影像 ============================ */
/* 图注承担 SEO/GEO 作用：写清地点、线路、年月与活动，而不是"活动照片"。 */
.photo-grid{display:grid;gap:16px 14px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin-top:8px;}
.photo{margin:0;background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.photo img{width:100%;height:auto;display:block;}
.photo figcaption{font-size:12.5px;line-height:1.65;color:var(--grey-ink);padding:9px 11px 10px;border-top:1px solid var(--line);}
.photo figcaption b{color:var(--navy-deep);font-weight:700;}
@media (max-width:720px){
.photo-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 10px;}
.photo figcaption{font-size:11.5px;padding:7px 9px 8px;}
}
/* ============================ 家长说 ============================ */
.voice{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:2px;padding:15px 17px 14px;margin:0;}
.voice .who{font-weight:700;color:var(--navy-deep);font-size:14.5px;}
.voice .stars{color:var(--gold);letter-spacing:2px;font-size:12.5px;margin-left:8px;}
.voice .meta{display:block;font-size:12px;color:var(--grey-ink);margin-top:5px;letter-spacing:.02em;}
.voice blockquote{margin:10px 0 0;font-size:14.5px;line-height:1.95;color:var(--ink);}
.voice details{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px;}
.voice summary{cursor:pointer;font-size:13px;color:var(--navy);}
.voice details[open] summary{margin-bottom:11px;}
.voice .full{font-size:14px;line-height:1.95;color:var(--ink);white-space:pre-wrap;margin:0;}
.voice .shot{margin:12px 0 0;}
.voice .shot img{max-width:330px;width:100%;height:auto;border:1px solid var(--line);border-radius:2px;display:block;}
.voice .shot figcaption{font-size:11.5px;color:var(--grey-ink);margin-top:6px;}
/* ====================================================================
移动端页头重构（2026-10-19）
问题：10 项导航在手机上折成 5 行，页头吃掉约 1/4 屏。
做法：<=1024px 时导航收进汉堡抽屉——纯 CSS（复选框 + 兄弟选择器），
不引入 JavaScript，正文依然不依赖脚本渲染。
复选框不用 hidden 属性，保持键盘可达（Tab 聚焦 + 空格切换）。
==================================================================== */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.burger{display:none;}
/* 断点 1024 而非 900：实测视口 934px 时 10 项导航会折成 2 行（页头 66px → 100px），
900 的断点正好落在"汉堡已收起、桌面导航还放不下"的缝里，1024 覆盖这段过渡区。 */
@media (max-width: 1024px){
/* 顶栏：隐去愿景句，只留品牌旗与电话，压成一行 */
.topbar .vision{display:none;}
.topbar .wrap{flex-wrap:nowrap;padding-top:6px;padding-bottom:6px;font-size:12px;gap:0 12px;}
/* 页头一行：logo + 汉堡 */
header.site .wrap{position:relative;flex-wrap:nowrap;gap:12px;padding-top:8px;padding-bottom:8px;}
.brandmark img{height:30px;}
.burger{
display:flex;flex-direction:column;justify-content:center;gap:4px;
margin-left:auto;width:42px;height:34px;padding:0 10px;cursor:pointer;
border:1px solid var(--line);border-radius:3px;background:#fff;
}
.burger span{display:block;height:2px;background:var(--navy);border-radius:1px;}
.nav-toggle:focus-visible + .burger{outline:2px solid var(--gold);outline-offset:2px;}
/* 抽屉：绝对定位浮在内容之上，不占布局高度 */
nav.main{
display:none;position:absolute;left:0;right:0;top:100%;z-index:30;
flex-direction:column;flex-wrap:nowrap;gap:0;justify-content:flex-start;
background:var(--paper);border-top:1px solid var(--line);
box-shadow:0 16px 30px rgba(20,41,94,.14);
padding:4px 0 8px;font-size:15.5px;
}
.nav-toggle:checked ~ nav.main{display:flex;}
nav.main a{
padding:12px 20px;border-bottom:0;border-left:3px solid transparent;
}
nav.main a[aria-current="page"]{
border-left-color:var(--gold);background:rgba(200,145,42,.07);border-bottom-color:transparent;
}
}
/* ====================================================================
a11y 补齐（2026-10-19）
==================================================================== */
/* 跳到主内容：键盘/读屏用户不必 Tab 过 10 项导航。默认移出视口，聚焦时滑入。 */
.skip{
position:absolute;left:-9999px;top:0;z-index:100;
background:var(--navy-deep);color:#fff;padding:10px 18px;
font-size:14px;border-radius:0 0 3px 0;text-decoration:none;
}
.skip:focus{left:0;outline:2px solid var(--gold-lt);outline-offset:2px;}
/* 动效敏感用户：关闭所有过渡与动画 */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
transition-duration:.01ms !important;
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
}
}
/* 移动端抽屉不做滑入动画时，也要保证能正常开合 */
@media (prefers-reduced-motion: reduce){
nav.main{transition:none;}
}
/* 默认是 inline，内部 img 为 block 时会留下基线空隙 */
.photo picture{display:block;}