/* ============================================================
   横湾市立信实验学校 · 官方网站（2016 存档版）
   刻意做成 2016 年国内中学官网的质感：960 定宽、表格布局、
   宋体正文、蓝白配色、无圆角、右栏通知公告滚动。
   ============================================================ */

* { box-sizing: content-box; }          /* 老站不用 border-box */

body {
  margin: 0;
  padding: 0;
  font: 14px/1.75 SimSun, "宋体", "Microsoft YaHei", sans-serif;
  color: #333;
  background: #eef2f7;
  text-align: center;                    /* 老站居中布局 */
}

a { color: #003c7d; text-decoration: none; }
a:hover { color: #c00; text-decoration: underline; }

img { border: 0; vertical-align: middle; }

/* ---------- 960 定宽容器 ---------- */
.w960 { width: 960px; margin: 0 auto; text-align: left; }

/* ---------- 顶部小条 ---------- */
.topbar {
  background: #003c7d; color: #cfe0f2; font-size: 12px;
  padding: 5px 0; border-bottom: 1px solid #002f63;
}
.topbar .w960 { display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #cfe0f2; }
.topbar .welcome { color: #ffd76e; }

/* ---------- 头部：校徽 + 校名 + banner ---------- */
.header { background: #fff; padding: 12px 0 0; }
.header .w960 { display: flex; align-items: center; }
.header .badge { width: 96px; height: 96px; margin-right: 18px; }
.header .names { flex: 1; }
.header .cn {
  font: bold 30px/1.2 "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #003c7d; letter-spacing: 3px;
}
.header .en {
  font: 11px/1.6 Arial, sans-serif; color: #8a9bb0;
  letter-spacing: 1px; margin-top: 2px;
}
.header .motto {
  font: 12px/1.6 SimSun, serif; color: #a08a5a;
  letter-spacing: 4px; margin-top: 6px;
}
/* 顶部横幅：用校训墙实景照，压一层深色让白字可读 */
.banner {
  width: 960px; height: 200px; margin: 12px auto 0;
  position: relative; overflow: hidden; text-align: center;
  background: #003c7d;
}
.banner img {
  width: 960px; height: 200px; object-fit: cover;
  object-position: center 42%;
  display: block;
}
.banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,32,72,.62) 0%,
    rgba(0,32,72,.28) 45%,
    rgba(0,32,72,.72) 100%);
}
.banner .slogan {
  position: absolute; left: 0; right: 0; top: 62px; z-index: 2;
  font: bold 25px/1.4 "Microsoft YaHei", sans-serif;
  color: #fff; letter-spacing: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------------
   横幅右下角的"装饰纹样"—— 其实是摩斯电码（P04）。
   点划由 puzzle.js 的 WXP.morseHTML() 生成。

   设计要点：**要够隐秘**。
     · 不做成整行 + 分隔线（那看起来像功能按钮，玩家一眼就注意到）
     · 改成**右下角一小块、贴着底边**的纹样
     · 点划**又细又小、半透明**，远看就是一条装饰边纹
     · 不居中、不占满宽度 —— 像版式上顺手加的装饰
     · 只有凑近看（或截图放大）才认得出是点划

   玩家发现它的路径应该是：
       "右下角那个花纹有点怪" → 放大 → 发现是点划 → 去查对照表
   ------------------------------------------------------------------ */
/* 外层 <a>：锚到横幅（.banner）的右下角。
   它是 .banner 的**直接子元素**，所以 bottom 相对横幅底边算。

   隐秘度的关键是三点：
     1. 只有 300px 宽，不是整行 —— 不做成横贯全幅的纹样
     2. 透明度 .34 —— 远看就是底边一小块淡纹
     3. 点划做得又细又小（3.5px / 9px），不像 UI 元素 */
.banner > a.morse-link {
  position: absolute;
  right: 14px; bottom: 9px;
  z-index: 4;
  display: inline-block;
  width: auto;
  text-decoration: none;
}

.banner .morse-deco {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0;
  max-width: 290px;
  justify-content: flex-end;
  padding: 3px 6px 4px;
  opacity: .34;
  cursor: help;
  transition: opacity .45s ease;
}
/* 悬停只"稍微清楚一点"，不做成一悬停就发光 —— 那就太像按钮了 */
.banner .morse-deco:hover { opacity: .8; }

.banner .morse-deco i {
  display: inline-block;
  background: #cfdce9;
  margin: 0 1.6px;
  vertical-align: middle;
}
/* 点：小圆点 */
.banner .morse-deco i:not(.dash) {
  width: 3.5px; height: 3.5px; border-radius: 50%;
}
/* 划：短横 */
.banner .morse-deco i.dash {
  width: 9px; height: 3.5px; border-radius: 1px;
}
.banner .morse-deco:hover i { background: #eaf0f7; }

.banner .sub {
  position: absolute; left: 0; right: 0; top: 106px; z-index: 2;
  font: 13px/1.4 SimSun, serif; color: #dbe8f5; letter-spacing: 3px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* ---------- 主导航 ---------- */
.nav {
  background: #00539b; border-bottom: 3px solid #ffd76e;
  margin-top: 0;
}
.nav .w960 { display: flex; }
.nav a {
  display: block; padding: 10px 22px; color: #fff;
  font: bold 14px/1.4 "Microsoft YaHei", sans-serif;
}
.nav a:hover { background: #003c7d; color: #ffd76e; text-decoration: none; }
.nav a.on { background: #003c7d; color: #ffd76e; }

/* ---------- 主体两栏 ---------- */
.main { display: flex; gap: 14px; padding: 14px 0 30px; }
.left { width: 660px; }
.right { width: 286px; }

/* ---------- 通用面板 ---------- */
.panel { background: #fff; border: 1px solid #cdd9e6; margin-bottom: 14px; }
.panel > h2 {
  margin: 0; padding: 8px 12px; font: bold 15px/1.4 "Microsoft YaHei", sans-serif;
  color: #003c7d; background: #eaf1f8; border-bottom: 1px solid #cdd9e6;
}
.panel > h2 .more { float: right; font: 12px/1.6 SimSun, serif; font-weight: normal; }
.panel .bd { padding: 12px 14px; }

/* ---------- 通知公告列表 ---------- */
.notice-list { margin: 0; padding: 0; list-style: none; }
.notice-list li {
  padding: 7px 0 7px 14px; border-bottom: 1px dotted #dde5ee;
  position: relative; font-size: 13.5px;
}
.notice-list li:last-child { border-bottom: 0; }
.notice-list li::before {
  content: "▪"; position: absolute; left: 0; color: #00539b;
}
.notice-list .date { float: right; color: #97a6b8; font-size: 12px; }
.notice-list .tag {
  display: inline-block; font-size: 11px; color: #fff; background: #d9534f;
  padding: 0 5px; margin-left: 6px; vertical-align: 1px;
}

/* ---------- 滚动新闻（老站经典） ---------- */
.scrollbox { height: 132px; overflow: hidden; position: relative; }
.scrollbox ul { margin: 0; padding: 0; list-style: none; }
.scrollbox li { padding: 6px 0; border-bottom: 1px dotted #dde5ee; font-size: 13px; }

/* ---------- 校长寄语 ---------- */
.principal { display: flex; gap: 16px; }
/* 证件照按 3:4 显示，整块控制在 84×112，避免头像压过正文 */
.principal .photo {
  width: 84px; height: 112px; flex: none;
  border: 1px solid #b9c6d4; overflow: hidden; background: #ccd6e0;
}
.principal .photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  display: block;
}
.principal .txt { flex: 1; font-size: 13.5px; line-height: 2; color: #444; }
.principal .txt p { margin: 0 0 10px; text-indent: 2em; }
.principal .sign {
  text-align: right; font: 13px/1.6 SimSun, serif; color: #666;
  margin-top: 6px; text-indent: 0;
}
.principal .sign b { color: #003c7d; }

/* ---------- 宣传片 ---------- */
.promo { display: flex; gap: 14px; align-items: flex-start; }
/* 视频是 1280x720（16:9）。固定宽 240px -> 高 135px，小巧不抢版面 */
.promo .player {
  width: 240px; flex: none; background: #000; position: relative;
  border: 1px solid #cdd9e6; line-height: 0;
}
.promo .player video {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  display: block; background: #000;
}
.promo .player .badge {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(0,40,80,.72); color: #fff; font-size: 11px;
  padding: 2px 7px; text-align: center; line-height: 1.6;
}
.promo .desc { flex: 1; font-size: 13px; line-height: 1.95; color: #555; }
.promo .desc p { margin: 0 0 9px; }
.promo .desc .go {
  display: inline-block; margin-top: 4px; padding: 4px 13px;
  background: #00539b; color: #fff; font-size: 12.5px;
}
.promo .desc .go:hover { background: #003c7d; text-decoration: none; }

/* ---------- 领导介绍 ---------- */
.leader { display: flex; gap: 20px; padding: 6px 0 2px; }
/* 证件照 3:4，控制在 150×200，正文才有呼吸空间 */
.leader .pic {
  width: 150px; flex: none; border: 1px solid #cdd9e6; background: #fff; padding: 4px;
}
.leader .pic img { width: 100%; height: auto; display: block; }
.leader .info { flex: 1; }
.leader .name {
  font: bold 19px/1.4 "Microsoft YaHei", sans-serif; color: #003c7d;
  letter-spacing: 1px;
}
.leader .title { font-size: 13px; color: #7a8b9e; margin: 4px 0 14px; }
.leader table { border-collapse: collapse; width: 100%; font-size: 13px; }
.leader table th, .leader table td {
  border: 1px solid #dde5ee; padding: 7px 10px; text-align: left;
}
.leader table th { background: #f5f8fb; color: #4a5b6d; width: 92px; font-weight: normal; }
.leader .bio { font-size: 13.5px; line-height: 2.05; color: #444; margin-top: 14px; }
.leader .bio p { margin: 0 0 10px; text-indent: 2em; }

/* ---------- 通用内页表格 ---------- */
table.list { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.list th, table.list td { border: 1px solid #dde5ee; padding: 8px 12px; }
table.list th { background: #eaf1f8; color: #003c7d; font-weight: bold; text-align: left; }
table.list td.c { text-align: center; }
table.list tr:nth-child(even) td { background: #f9fbfd; }
table.list a.dl { color: #00539b; }

/* ---------- 联系页信息块 ---------- */
.contact-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-grid .box {
  flex: 1; min-width: 240px; border: 1px solid #dde5ee; background: #fafcfe;
  padding: 14px 16px; font-size: 13.5px; line-height: 2.1; color: #4a5b6d;
}
.contact-grid .box h3 {
  margin: 0 0 8px; font: bold 14px/1.4 "Microsoft YaHei", sans-serif; color: #003c7d;
}

/* ---------- 荣誉栏 ---------- */
.honor-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.honor-list li {
  padding: 6px 0; border-bottom: 1px dotted #dde5ee;
  display: flex; justify-content: space-between;
}
.honor-list .y { color: #97a6b8; font-size: 12px; }

/* ---------- 页脚 ---------- */
.footer {
  background: #003c7d; color: #a8c6e8; font-size: 12px;
  padding: 16px 0; line-height: 2; border-top: 3px solid #ffd76e;
}
.footer a { color: #a8c6e8; }
.footer .icp { color: #7fa3c9; }

/* ---------- 内页通用 ---------- */
.crumb {
  font-size: 12px; color: #7a8b9e; padding: 10px 0;
}
.crumb a { color: #7a8b9e; }
.page-title {
  font: bold 18px/1.4 "Microsoft YaHei", sans-serif; color: #003c7d;
  text-align: center; padding: 14px 0 10px;
  border-bottom: 2px solid #cdd9e6; margin-bottom: 16px;
}
.article { background: #fff; border: 1px solid #cdd9e6; padding: 24px 30px 30px; }
.article p { margin: 0 0 14px; text-indent: 2em; font-size: 14px; line-height: 2; }
.article .meta {
  text-align: center; font-size: 12px; color: #97a6b8;
  padding-bottom: 14px; border-bottom: 1px dotted #dde5ee; margin-bottom: 18px;
}

/* ---------- 数据表格（公示用） ---------- */
table.data {
  border-collapse: collapse; width: 100%; font-size: 13px;
  background: #fff;
}
table.data th, table.data td {
  border: 1px solid #cdd9e6; padding: 6px 10px; text-align: center;
}
table.data th { background: #eaf1f8; color: #003c7d; font-weight: bold; }
table.data td.l { text-align: left; }
table.data tr:nth-child(even) td { background: #f7fafd; }

/* 隐藏的第三页翻页按钮 —— 这是谜题 P02 的关键 */
.pager { text-align: center; padding: 14px 0 4px; font-size: 13px; }
.pager a, .pager span {
  display: inline-block; min-width: 22px; padding: 3px 8px; margin: 0 3px;
  border: 1px solid #cdd9e6; background: #fff; color: #003c7d;
}
.pager .cur { background: #00539b; color: #fff; border-color: #00539b; }
.pager a.dead { color: #b9c6d4; border-color: #e2e9f0; }

/* ---------- 校园风光缩略图 ---------- */
.gallery { display: flex; gap: 8px; }
.gallery .ph {
  flex: 1; height: 104px; border: 1px solid #cdd9e6;
  position: relative; overflow: hidden; display: block;
  background: #dde5ee;
}
.gallery .ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.gallery .ph:hover img { transform: scale(1.06); }
.gallery .ph span {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,40,80,.62); color: #fff;
  font-size: 11.5px; padding: 3px 6px; text-align: center;
}

/* ---------- 相册页：网格 ---------- */
.album-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.album-grid figure {
  margin: 0; background: #fff; border: 1px solid #cdd9e6; padding: 5px;
}
.album-grid img {
  width: 100%; height: 132px; object-fit: cover; display: block;
  background: #eef2f7;
}
.album-grid figcaption {
  font-size: 11.5px; color: #6b7c8f; text-align: center;
  padding: 5px 2px 2px; line-height: 1.5;
}
.album-grid figcaption .d { color: #a9b7c6; font-size: 11px; }