/* Rumah Akuarium — 版式照源站 aquariumsource.com 独立重建
   顶部细条 + 居中大品牌名 + 副标 + 下方独立导航条（左对齐菜单）
   首页：居中 hero → 头牌大卡 → 两列竖卡网格
   与站群其他站（左品牌右导航 / 整宽 hero / 单栏文章流 / 横行卡 / 竖排投影卡）均不同。 */
:root{
  --ink:#12272b;
  --muted:#5d7075;
  --teal:#0e4f5c;
  --teal-soft:#0f7d8c;
  --line:#dde5e6;
  --bg:#f5f8f8;
  --card:#ffffff;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-soft);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:8px 12px;z-index:20}
.skip-link:focus{left:8px;top:8px}

/* ── masthead：顶条 + 居中品牌 + 独立导航条 ── */
.topbar{background:var(--teal);color:#cfe4e7;font-size:12.5px;letter-spacing:.06em}
.topbar-inner{height:34px;display:flex;align-items:center;text-transform:uppercase}
.brandbar{padding:30px 20px 20px;text-align:center;border-bottom:1px solid var(--line);background:#fff}
.brand-name{font-size:40px;font-weight:700;letter-spacing:-.02em;color:var(--teal)}
.brand-tag{margin:8px 0 0;font-size:16px;color:var(--muted)}
.nav-primary{background:var(--teal)}
.nav-inner{display:flex;align-items:center}
.menu{list-style:none;display:flex;flex-wrap:nowrap;gap:26px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{display:block;padding:14px 0;font-size:14.5px;font-weight:500;color:#e4f0f2;white-space:nowrap}
.menu a:hover{text-decoration:none;color:#fff}
.menu a.is-active{color:#fff;box-shadow:inset 0 -3px 0 #8fd3dd}

/* ── hero ── */
.hero{text-align:center;padding:46px 0 34px;max-width:800px;margin:0 auto}
.hero-kicker{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-soft);font-weight:600}
.hero-title{margin:14px 0 0;font-size:44px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.hero-lead{margin:16px 0 0;font-size:19px;color:var(--muted)}
.hero-note{margin:14px 0 0;font-size:14px;color:var(--muted)}

/* ── 卡片 ── */
.grid-lead{margin-bottom:34px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.card-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card-cat{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--teal-soft);text-transform:uppercase}
.card-title{margin:8px 0 0;font-size:21px;line-height:1.3;font-weight:600}
.card-title a{color:var(--ink)}
.card-meta{margin:8px 0 0;font-size:13px;color:var(--muted)}
.card-excerpt{margin:10px 0 0;font-size:15.5px;color:var(--muted)}
.card-more{margin:auto 0 0;padding-top:12px;font-size:14px;font-weight:600}
.card--lead .card-media img{aspect-ratio:16/9}
.card--lead .card-title{font-size:30px}
.card--lead .card-excerpt{font-size:17px}
.grid-heading{margin:0 0 18px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.more-link{margin-top:26px;font-weight:600}

/* ── 页头/正文 ── */
.crumbs{margin:26px 0 0;font-size:13.5px;color:var(--muted)}
.page-head{max-width:760px;margin:0 auto;padding:26px 0 20px;text-align:center}
.page-head h1{margin:0;font-size:38px;line-height:1.18;letter-spacing:-.02em;font-weight:700}
.page-lead{margin:14px 0 0;font-size:18px;color:var(--muted)}
.page-note{margin:12px 0 0;font-size:15.5px;color:var(--muted)}
.page-body{max-width:720px;margin:0 auto 26px;padding:16px 20px;background:#fff;border-left:3px solid var(--teal);border-radius:4px;font-size:16px;color:var(--muted)}
.card-grid{padding-bottom:40px}

.article{max-width:720px;margin:0 auto}
.article-head{padding:24px 0 18px;text-align:center}
.article-meta{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-soft);font-weight:600}
.article-head h1{margin:12px 0 0;font-size:36px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.article-lead{margin:14px 0 0;font-size:18px;color:var(--muted)}
.article-figure{margin:0 0 24px}
.article-figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.article-body{background:#fff;padding:30px 34px;border:1px solid var(--line);border-radius:6px}
.article-body h2{margin:30px 0 12px;font-size:23px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.article-body h2:first-child{margin-top:0}
.article-body p{margin:0 0 16px}
.article-body ul{margin:0 0 18px;padding-left:22px}
.article-body li{margin-bottom:8px}
.disclaimer{margin:26px auto 0;max-width:720px;font-size:14px;color:var(--muted);font-style:italic}
.related{max-width:720px;margin:34px auto 0;background:#eef3f3;border:1px solid var(--line);border-radius:6px;padding:20px 24px}
.related h2{margin:0 0 10px;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.related ul{margin:0;padding-left:20px;font-size:15px}
.related li{margin-bottom:8px}
.next-link{max-width:720px;margin:26px auto 40px;font-weight:600}
.karta{max-width:760px;margin:0 auto 40px;font-size:16px}
.karta ul{margin:6px 0 10px;padding-left:24px;font-size:15px}

/* ── 页脚 ── */
.site-footer{background:var(--teal);color:#d7e8ea;margin-top:40px}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding:40px 20px}
.footer-title{margin:0 0 10px;font-size:20px;color:#fff}
.footer-lead p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#c3d9dc}
.footer-mail a{color:#fff}
.footer-col h3{margin:0 0 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#9fc3c8}
.footer-col ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.footer-col li{margin-bottom:7px}
.footer-col a{color:#d7e8ea}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding:16px 20px;font-size:13px;color:#a9c6ca}
.footer-bottom p{margin:0}

@media (max-width:860px){
  .grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  .brandbar{padding:18px 16px 14px}
  .brand-name{font-size:27px}
  .brand-tag{font-size:14px}
  .menu{gap:18px}
  .menu a{font-size:13.5px;padding:11px 0}
  .hero{padding:26px 0 20px}
  .hero-title{font-size:29px}
  .hero-lead{font-size:16.5px}
  .card--lead .card-title{font-size:23px}
  .page-head h1{font-size:28px}
  .article-head h1{font-size:27px}
  .article-body{padding:22px 18px}
}

/* == 整卡可点补丁 v1 (2026-09-23) == */
/* 正文卡片：原本只有「图片锚点 + 标题锚点」两个并列链接，卡片其余区域点不动。
   把标题链接拉伸成整卡大小的透明面（stretched link），整卡可点。
   z-index 取 1，低于页头(90)/遮罩(100)/抽屉(110)，不干扰移动端导航。 */
article.card { position: relative; }
article.card h2.card-title > a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
article.card:focus-within { outline: 2px solid currentColor; outline-offset: 3px; }
/* == /整卡可点补丁 v1 == */

/* ==== nav-fold v3 (移动端折叠导航) ==== */
/* 设计：<=760px 时页头压成单条吸顶栏（左品牌 + 右上汉堡），菜单收进全屏抽屉。
   规则放在文件最末尾 —— 媒体查询不参与权重，同权重比先后，
   移动端规则必须晚于桌面规则，否则会被反向覆盖。 */

.nav-top,
.nav-scrim { display: none; }

@media (max-width: 760px) {
  .masthead {
    position: sticky;
    top: 0;
    z-index: 90;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* akuariumhobi 专用：topbar（地点注记行）在手机上收起，吸顶栏保持单条 */
  .masthead .topbar { display: none !important; }
  /* 顶栏：品牌 + 右侧按钮位（品牌结构各站不同，用通用选择器一次拿下） */
  .masthead .brandbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 60px;
    max-height: 68px;                 /* 硬上限：内部元素不许把顶栏撑高 */
    overflow: hidden;
    padding: 0 74px 0 20px !important;   /* 左右：0 起 / 给按钮留 74 */
    margin: 0 !important;
  }
  /* 品牌容器：占满剩余宽度、单行省略 */
  .masthead .brandbar > .site-title,
  .masthead .brandbar > .brand,
  .masthead .brandbar > .nameplate {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: left !important;
    overflow: hidden;
  }
  /* 品牌名：统一字号 + 单行省略 */
  .masthead .brandbar > .site-title,
  .masthead .brandbar > .brand,
  .masthead .brandbar .brand-name {
    font-size: 22px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 品牌副标题 / 装饰符 / tagline：手机上全部收起 */
  .masthead .brandbar .brand-tag,
  .masthead .brandbar .site-tagline,
  .masthead .brandbar .brand-mark,
  .masthead .brandbar .site-title span { display: none !important; }

  /* 汉堡按钮：绝对定位钉在右上角 */
  .masthead .nav-top-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 120;
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: var(--accent, var(--brand, var(--green, #7a5b32)));
  }
  .masthead .nav-top-label__text { display: none; }
  .masthead .nav-top-label__bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid currentColor;
    border-radius: 3px;
  }
  .masthead .nav-top-label__bars i {
    display: block; width: 20px; height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-top:checked + .nav-top-label .nav-top-label__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-top:checked + .nav-top-label .nav-top-label__bars i:nth-child(2) { opacity: 0; }
  .nav-top:checked + .nav-top-label .nav-top-label__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* 展开时按钮固定右上角、变白以便压在深色抽屉上 */
  .nav-top:checked + .nav-top-label {
    position: fixed;
    top: 12px;
    right: 18px;
    transform: none;
    color: #fff;
    z-index: 130;
  }
  .nav-top:checked + .nav-top-label .nav-top-label__bars { border-color: rgba(255,255,255,.6); }

  /* 抽屉：铺满视口；覆盖 nav 在内层容器内 / 外两种结构 */
  /* ⚠ 底色显式深色实底：浅色站的 --ink 是正文深灰，继承会「文字色==底色」全隐形 */
  .masthead .nav-primary {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 110;
    margin: 0 !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 76px 22px 34px;
    background: #1c262c;
    color: #f2f5f4;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .40);
    transform: translateY(-102%);
    transition: transform .26s ease;
  }
  /* 🔴 visibility:visible 必须写在使用点自证（类型6）：
     抽屉长在 .brandbar 内、而下方「展开藏品牌」把祖先设 hidden 时，
     不显式声明 visible 抽屉会继承隐形（cvorovi 实测）。 */
  .nav-top:checked ~ .nav-primary,
  .nav-top:checked ~ .brandbar .nav-primary { transform: translateY(0); visibility: visible; }

  .masthead .nav-primary .wrap { display: block !important; padding-left: 0 !important; padding-right: 0 !important; }
  .masthead .nav-primary .menu {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    justify-content: flex-start !important;
  }
  .masthead .nav-primary .menu > li {
    display: block !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .masthead .nav-primary .menu > li:first-child { border-top: 0; }
  /* 提高权重压过各站原有的 `.menu a{color:...}` */
  .masthead .nav-primary .menu a,
  .masthead .nav-primary .menu > li > a,
  .masthead .nav-primary .menu a.is-active {
    display: block !important;
    padding: 15px 2px !important;
    font-size: 16.5px !important;
    line-height: 1.4;
    text-align: left !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: normal !important;
    color: #f2f5f4 !important;
    text-decoration: none;
  }
  .masthead .nav-primary .menu a.is-active { color: #ffffff !important; font-weight: 600; }

  /* 遮罩 */
  .masthead .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(8, 16, 22, .52);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
  }
  .nav-top:checked ~ .nav-scrim { opacity: 1; visibility: visible; }

  /* 展开时把品牌整体藏掉，避免与抽屉内容重叠 */
  .nav-top:checked ~ .brandbar { visibility: hidden; }
}

/* 桌面端：折叠零件隐藏（写在末尾，不覆盖上面的移动端规则） */
.nav-top-label,
.nav-scrim { display: none; }
/* ==== /nav-fold v3 ==== */

/* ==== nav-skin akuariumhobi (每站抽屉皮肤 · 防站群 · 2026-09-24) ==== */
@media (max-width: 760px) {
  .masthead .nav-top-label { color: var(--teal-soft) !important; }
  .masthead .nav-primary { background: #0e4f5c !important; color: #f5f8f8 !important; }
  .masthead .nav-primary .menu > li { border-top: 1px solid rgba(245, 248, 248, 0.18) !important; }
  .masthead .nav-primary .menu > li:first-child { border-top: 0 !important; }
  .masthead .nav-primary .menu a, .masthead .nav-primary .menu > li > a, .masthead .nav-primary .menu a.is-active { color: #f5f8f8 !important; }
  .masthead .nav-primary .menu a.is-active { color: #ffffff !important; }
  .nav-top:checked + .nav-top-label { color: #ffffff !important; }
  .masthead .nav-primary {
    right: auto !important;
    width: min(80vw, 340px);
    height: 100vh; height: 100dvh; max-height: 100dvh;
    transform: translateX(-105%) !important;
    border-top: 0; border-right: 3px solid #0f7d8c;
    box-shadow: 14px 0 36px rgba(0, 0, 0, .38);
  }
  .nav-top:checked ~ .nav-primary,
  .nav-top:checked ~ * .nav-primary { transform: translateX(0) !important; visibility: visible; }
  .masthead .nav-top-label { border-radius: 8px; }
  .masthead .nav-top-label__bars { border: 0 !important; border-radius: 0; }
  .masthead .nav-top-label__bars i:nth-child(2) { display: none; }
}
/* ==== /nav-skin akuariumhobi ==== */