/*
 * 门户样式。
 *
 * 2026-09-13 改版：从「手绘海岛」换成克制的现代风——大留白、大字重对比、
 * 卡片 + 发丝边、吸顶玻璃栏、统一的缓动曲线，并支持深色模式。
 *
 * 2026-09-21 调色：整体从中性冷灰换成**暖奶油**，取自首页那张发财饭团的画像
 * （用 PIL 抽样量化出来的：底色 #f8f0d8 一档、红衣 #e85050、绿衣 #e0e8b8、
 * 木椅 #584848）。原来那套 #fbfbfd 偏蓝，和画像并排时像两个网站。
 *
 * 但有一条原来的结论保留下来了：**卡片底色仍是暖白，不是米色**。
 * 原注释里写得对——米色会和卡片插画里的沙滩、纸张抢。现在的做法是
 * 页面底色走米色、卡片走暖白，靠这一档明度差把卡片托起来，
 * 插画照样落在接近白的底上，不糊。
 *
 * 颜色仍然让给内容：十几张卡片各自的手绘插画还是这一页主要的色彩来源，
 * 强调色只用在链接、选中态和少数标记上。
 */

:root {
  color-scheme: light dark;

  /* 表面与文字。灰一律带一点暖——纯中性灰摆在奶油底上会发青。 */
  --bg: #faf4e6;
  --bg-soft: #f3ebd8;
  --surface: #fffcf4;
  --ink: #3a322a;
  --ink-2: #7b6f60;
  --ink-3: #9b8e7d;
  /* 发丝边用暖褐的半透明，不用纯黑：纯黑压在奶油上偏冷，像脏了一道 */
  --hairline: rgba(90, 70, 45, 0.12);
  --hairline-strong: rgba(90, 70, 45, 0.2);

  /* 强调色取画像里那件红衣（#e85050），压暗降饱和后能过对比度 */
  --accent: #c2554b;
  --accent-soft: rgba(194, 85, 75, 0.11);

  /* 玻璃栏 */
  --glass: rgba(250, 244, 230, 0.78);

  /* 阴影分两级：静止几乎看不见，悬停才浮起来。
     关键不是阴影重，而是「静止时极轻、交互时才给反馈」。
     色相也偏暖——中性黑阴影落在奶油底上会显灰。 */
  --shadow: 0 1px 2px rgba(92, 66, 36, 0.05), 0 4px 14px rgba(92, 66, 36, 0.06);
  --shadow-lift: 0 2px 6px rgba(92, 66, 36, 0.08), 0 14px 36px rgba(92, 66, 36, 0.16);

  /* 一条缓动曲线管全站。多套曲线混用会让不同元件的动感对不上。 */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 0.18s var(--ease);
  --base: 0.28s var(--ease);

  --radius-card: 20px;
  --radius-tile: 16px;
  --maxw: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 深色也跟着暖：纯黑配暖色内容会让插画看起来像贴上去的。
       这里是把奶油那套压到暗处，不是另起一套配色。 */
    --bg: #14100c;
    --bg-soft: #1b1611;
    --surface: #241e18;
    --ink: #f3ece0;
    --ink-2: #b0a293;
    --ink-3: #8e8173;
    --hairline: rgba(255, 238, 214, 0.12);
    --hairline-strong: rgba(255, 238, 214, 0.2);
    /* 暗底上那个红要提亮才看得清，否则和背景糊在一起 */
    --accent: #e8897d;
    --accent-soft: rgba(232, 137, 125, 0.16);
    --glass: rgba(22, 18, 13, 0.76);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 36px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  /* 先取系统 UI 字体：macOS/iOS 上是 SF，Windows 上是 Segoe，
     中文再落到苹方/微软雅黑。自带字体一个都不引——为一页导航加载
     几百 KB 字体，是把首屏时间换成了排版洁癖。 */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ---- 顶部 ---- */
.topband {
  position: relative;
  overflow: hidden;
  /* 极浅的一层光晕，只在顶部透出一点颜色。
     完全不给色彩会显得像未完成的线框图。
     两团光取自画像里那两件衣服——左边红、右边绿，位置也照着来：
     发财在左、饭团在右。原来这里是海蓝 + 紫，压在奶油底上会发灰发冷。 */
  background:
    radial-gradient(60% 120% at 20% -10%, rgba(232, 80, 80, 0.10), transparent 60%),
    radial-gradient(50% 110% at 82% -20%, rgba(150, 170, 100, 0.10), transparent 62%),
    var(--bg);
}
.topband::after { content: none; }

.hero {
  text-align: center;
  padding: 72px 20px 44px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-art {
  /* 原来这儿是 64px 的小图元，换成画像之后要给它足够分量才撑得起「头图」，
     但也不能铺满——它是一张 1:1 的方图，满宽会把整个首屏吃掉。 */
  width: clamp(140px, 34vw, 172px);
  margin: 0 auto 22px;
}
.hero-art img {
  width: 100%; height: auto; display: block;
  border-radius: 24px;
  /* 画像四周是奶油色，和页面底色几乎一样——不描边看不出图在哪儿结束 */
  border: 1px solid var(--hairline);
  /* 阴影跟着整站偏暖，中性黑落在奶油底上会显灰 */
  box-shadow: 0 6px 20px rgba(92, 66, 36, 0.16);
}
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero h1 {
  margin: 0 0 12px;
  /* 大标题跟着视口缩放：窄屏 32px、宽屏 56px 封顶。
     写死字号的话，手机上这行会占掉半屏。 */
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
}
/* ---- 两位董事长 ---- */
/* 默认收起的一行，展开才是档案。画像已经当头图了，这里不再重复放一张。 */
.pets {
  max-width: 900px;
  margin: 0 auto 4px;
  padding: 0 20px;
}
.pets-sum {
  /* 去掉浏览器默认的三角，自己画一个——默认那个在各家浏览器里长得不一样，
     而且没法跟着文字基线走。 */
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  /* 箭头走绝对定位而不是 margin-left:auto：窄屏上副标题会换行，
     flex 里的箭头会被挤到第三行去单独占一行，很难看。 */
  position: relative;
  padding: 10px 34px 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  transition: background var(--fast), border-color var(--fast);
}
.pets-sum::-webkit-details-marker { display: none; }
.pets-sum:hover { border-color: var(--hairline-strong); }
.pets-sum::after {
  content: '';
  position: absolute; right: 15px; top: 16px;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--fast);
}
.pets[open] .pets-sum::after { transform: rotate(-135deg); top: 19px; }
.pets[open] .pets-sum { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.pets-sum-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.pets-sum-d { font-size: 12.5px; color: var(--ink-3); }
.pets-text {
  padding: 4px 14px 14px;
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--surface);
}
.pets-text h2 { margin: 0 0 8px; font-size: 18px; }
.pets-text p { margin: 0 0 8px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.pets-text p:last-child { margin-bottom: 0; }

/* 两张档案卡并排。窄屏塌成一列——并排的话「10 斤」会被挤成两行。 */
.pet-cards { display: flex; gap: 12px; margin: 12px 0 10px; flex-wrap: wrap; }
/* 底色和描边一律走主题变量。上一版这里写死了 rgba(255,255,255,…)，
   深色下看着没问题，切到浅色就是白压白——卡片边界整个消失。 */
.pet-card {
  flex: 1 1 200px; min-width: 0;
  padding: 11px 13px; border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.pet-card h3 {
  margin: 0 0 8px; font-size: 15px; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
/* 品种跟在名字后面，小一号、淡一档——它是补充说明，不该和名字一样重 */
.pet-card h3 span { font-size: 12px; font-weight: 400; color: var(--ink-2); opacity: 0.8; }
/* 两列网格：左列标签定宽，右列取值。定宽是为了两张卡的取值能上下对齐，
   否则「年龄 / 性别 / 体重」字数一样但渲染宽度有差，看着像没对齐。 */
.pet-card dl {
  margin: 0; display: grid; grid-template-columns: 3.2em 1fr;
  row-gap: 3px; column-gap: 8px; font-size: 13px; line-height: 1.6;
}
.pet-card dt { color: var(--ink-2); opacity: 0.65; }
.pet-card dd { margin: 0; color: var(--ink-2); }
.pet-card .pet-note {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.6;
  color: var(--ink-2); opacity: 0.6;
}
.pets-foot { margin-top: 10px !important; }
.pets-text strong { color: var(--ink); font-weight: 600; }
.pets-text code { font-size: 13px; opacity: 0.85; }

@media (max-width: 620px) {
  /* 窄屏上摘要那行的副标题换行摆到第二行，别和标题挤 */
  .pets-sum { padding: 9px 12px; }
  .pets-sum-d { flex-basis: 100%; }
}

/* 标语里的 <strong> 只用来点出「发财」「饭团」「财团」这几个字是怎么拼出来的。
   不加粗不变色的话，那句话读起来像绕口令；加太重又会喧宾夺主，所以只提一档颜色。 */
.tagline strong { font-weight: 600; color: var(--ink); }

.tagline {
  margin: 0 auto;
  max-width: 30em;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 400;
}

/* ---- 吸顶玻璃栏：筛选 + 搜索 ---- */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass);
  /* saturate 是关键：只 blur 的话，玻璃后面的彩色卡片会糊成灰的。 */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 980px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.chip:hover { background: var(--bg-soft); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--bg); }
.chip em {
  font-style: normal;
  font-size: 11.5px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.searchbar { position: relative; flex: 0 1 260px; }
.searchbar input {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 980px;
  padding: 7px 30px 7px 14px;
  transition: border-color var(--fast), background var(--fast);
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
}
.searchbar input::-webkit-search-cancel-button { cursor: pointer; }
.hintkey {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  padding: 0 5px;
  pointer-events: none;
}
.searchbar.on .hintkey { display: none; }

/* ---- 分类区块 ---- */
.board {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 20px 8px;
}
.group + .group { margin-top: 56px; }
.group-head { margin-bottom: 18px; }
.group-head h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.group-head h2 .n {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.group-head p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 52em;
}

/* ---- 卡片 ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.grid.dense { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; }

.card {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform var(--base), box-shadow var(--base), border-color var(--base);
}
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}
a.card:active { transform: translateY(-1px); transition-duration: 0.08s; }
a.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.card.wip { opacity: 0.55; }

.card-art {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
}
.card-art svg { width: 38px; height: 38px; display: block; }

.card-body { min-width: 0; flex: 1 1 auto; }
.card-body h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.card-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.badge {
  font-size: 11px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 980px;
  background: var(--bg-soft);
  color: var(--ink-3);
  border: 1px solid var(--hairline);
}
.badge.out { background: transparent; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tags span {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 980px;
  background: var(--bg-soft);
  color: var(--ink-2);
}

.children { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.children a {
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 980px;
  background: var(--accent-soft);
  transition: background var(--fast);
}
.children a:hover { background: var(--accent); color: #fff; }

/* 「进入」改成一个箭头，跟着悬停往右挪一点——
   比一个方块按钮轻，也不会和卡片本身抢点击目标。 */
.go {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-size: 13px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: transform var(--base);
}
a.card:hover .go { transform: translateX(3px); }

/* 带封面的卡片：图在上、字在下 */
.card.showcase {
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.card-cover {
  width: 100%;
  aspect-ratio: 480 / 170;
  background: var(--bg-soft);
  overflow: hidden;
}
.card-cover svg { width: 100%; height: 100%; display: block; transition: transform 0.5s var(--ease); }
a.card.showcase:hover .card-cover svg { transform: scale(1.035); }
.card.showcase .card-body { padding: 18px 20px 22px; }
.card.showcase .card-body h3 { font-size: 19px; }
.card.showcase .go { right: 20px; bottom: 20px; }

/* 密排：小工具那种一屏扫完名字的 */
.card.sm { padding: 14px; gap: 12px; border-radius: var(--radius-tile); }
.card.sm .card-art { width: 42px; height: 42px; border-radius: 11px; }
.card.sm .card-art svg { width: 30px; height: 30px; }
.card.sm .card-body h3 { font-size: 14.5px; margin-bottom: 4px; }
.card.sm .card-body p {
  font-size: 12.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty-hint {
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  padding: 40px 20px;
}

/* ---- 页脚 ---- */
.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
  padding: 56px 20px 48px;
  font-size: 12.5px;
  color: var(--ink-3);
  border-top: 1px solid var(--hairline);
  margin-top: 56px;
}
.foot .sep { margin: 0 8px; opacity: 0.5; }
.foot .board { margin: 10px 0 0; padding: 0; font-size: 12.5px; letter-spacing: 0.08em; }
/* 备案号。压到最小最淡，但**不能**做成 hover 才显示或颜色贴底看不清——
   工信部年检要求它在首页底部可见可点。链接色不特殊化，跟着页脚走。 */
.foot .icp { margin: 8px 0 0; padding: 0; font-size: 12px; opacity: 0.75; }
.foot .icp a { color: inherit; text-decoration: none; }
.foot .icp a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .hero { padding: 44px 18px 30px; }
  .hero-art { width: 52px; height: 52px; margin-bottom: 14px; }
  .grid, .grid.wide { grid-template-columns: 1fr; }
  .grid.dense { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .card.sm { flex-direction: column; gap: 10px; }
  .bar-inner { padding: 8px 14px; gap: 8px; }
  .searchbar { flex: 1 1 100%; order: -1; }
  .board { padding: 28px 14px 8px; }
  .group + .group { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}