/* Sunlit Jar —— 落地页样式。
   调性照游戏本体：奶油纸面 + 暖木 + 深棕字，衬线标题，像一页田野笔记。
   ⚠ 刻意不用参考站那套「居中 hero + 等距卡片网格」，布局走偏心与分栏。 */
:root{
  --paper:#FBF3E2; --paper-2:#F3E6CC; --ink:#4A331C; --ink-soft:#7A6144;
  --wood:#8A5A2B; --wood-dark:#5C3A1E; --leaf:#4E8A3C; --water:#2F7F8C;
  --rule:#D9C49A; --shadow:0 1px 0 #fff6, 0 10px 30px #4a331c1a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.75 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--water)}
/* ⚠ `height:auto` 不能省。HTML 里写了 width/height 属性（给浏览器算
   长宽比、避免加载时跳版），CSS 只约束 max-width 的话，浏览器会拿属性里
   那个 height 当实际高度 —— 图就被纵向拉长（2026-09-22 用户发现）。 */
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

/* 顶栏：隐私 / 条款按要求放这里 */
.bar{
  position:sticky; top:0; z-index:9; background:#FBF3E2F2;
  border-bottom:1px solid var(--rule); backdrop-filter:blur(6px);
}
.bar .wrap{display:flex; align-items:center; gap:18px; height:62px}
.mark{display:flex; align-items:center; gap:10px; font-weight:700;
  letter-spacing:.2px; text-decoration:none; color:var(--ink)}
.mark img{width:34px; height:34px; border-radius:8px}
.bar nav{margin-left:auto; display:flex; gap:20px; flex-wrap:wrap}
.bar nav a{color:var(--ink-soft); text-decoration:none; font-size:15px}
.bar nav a:hover, .bar nav a[aria-current]{color:var(--ink);
  text-decoration:underline; text-underline-offset:4px}

/* 首屏：左文右图，偏心 */
.top{padding:64px 0 48px; border-bottom:1px solid var(--rule)}
.top .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:48px;
  align-items:center}
.eyebrow{font:600 13px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--leaf); margin:0 0 14px}
h1{font-size:clamp(34px,5vw,52px); line-height:1.12; margin:0 0 18px; font-weight:600}
h1 em{font-style:normal; color:var(--wood)}
.lede{font-size:18px; color:var(--ink-soft); margin:0 0 26px; max-width:46ch}
.facts{list-style:none; margin:0; padding:0; display:flex; gap:26px; flex-wrap:wrap}
.facts li{font:600 14px/1.4 ui-sans-serif,system-ui,sans-serif}
.facts span{display:block; font-weight:400; color:var(--ink-soft); font-size:13px}
.shot-lead{margin:0 auto; max-width:252px; border-radius:22px;
  box-shadow:var(--shadow); border:1px solid #0000000f}

/* 分区通用 */
section{padding:56px 0; border-bottom:1px solid var(--rule)}
h2{font-size:clamp(24px,3vw,32px); margin:0 0 8px; font-weight:600}
.sub{color:var(--ink-soft); margin:0 0 30px; max-width:62ch}

/* 三层结构：竖向堆叠，不是卡片网格 */
.layers{display:flex; flex-direction:column; gap:0; border:1px solid var(--rule);
  border-radius:14px; overflow:hidden; background:#fff8}
.layer{display:grid; grid-template-columns:150px 1fr; gap:22px; padding:20px 22px;
  align-items:baseline}
.layer + .layer{border-top:1px dashed var(--rule)}
.layer b{font:600 15px/1.4 ui-sans-serif,system-ui,sans-serif; color:var(--wood-dark)}
.layer b span{display:block; font-weight:400; color:var(--ink-soft); font-size:13px}
.layer p{margin:0; color:var(--ink)}

/* 七个物种：表格式，一行一句规则 */
table.species{width:100%; border-collapse:collapse; font-size:15px}
table.species th{text-align:left; font:600 13px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  padding:0 12px 10px; border-bottom:2px solid var(--rule)}
table.species td{padding:13px 12px; border-bottom:1px solid var(--rule);
  vertical-align:top}
table.species tr td:first-child{font-weight:600; white-space:nowrap}
table.species tr:hover td{background:#fff9}

/* 七口缸：宽屏铺开成七格，窄屏自动换行 —— 不用横向滚动，
   否则桌面上只露出前六口，看着像内容缺了一块 */
.jars{display:grid; grid-template-columns:repeat(7,1fr); gap:12px}
.jar{background:var(--paper-2);
  border:1px solid var(--rule); border-radius:12px; padding:14px 16px}
.jar i{display:block; font:600 12px/1 ui-sans-serif,system-ui,sans-serif;
  color:var(--leaf); font-style:normal; letter-spacing:.1em; margin-bottom:8px}
.jar b{display:block; font-size:16px; margin-bottom:4px}
.jar p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.6}

/* 截图：横向胶片条 */
.film{display:flex; gap:20px; overflow-x:auto; padding:4px 0 14px;
  scroll-snap-type:x proximity}
.film figure{flex:0 0 240px; margin:0; scroll-snap-align:start}
.film img{border-radius:18px; box-shadow:var(--shadow); border:1px solid #0000000f}
.film figcaption{font-size:13.5px; color:var(--ink-soft); padding-top:10px}

/* 页脚 */
footer{padding:44px 0 60px; color:var(--ink-soft); font-size:14.5px}
footer .wrap{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer nav{margin-left:auto; display:flex; gap:18px}
.note{background:var(--paper-2); border-left:3px solid var(--leaf);
  padding:16px 18px; border-radius:0 10px 10px 0; margin:26px 0 0;
  font-size:15px}

/* 法务页：窄栏正文 */
.legal{max-width:760px}
.legal h2{margin-top:38px}
.legal h3{font-size:18px; margin:26px 0 6px; font-weight:600}
.legal p, .legal li{color:#3E2B17}
.legal ul{padding-left:22px}
.legal .updated{color:var(--ink-soft); font-size:14px; margin-top:-2px}

/* ⚠ 窄屏必须把物种表拆成竖向堆叠。四列文字表格压不到 342px 以下
   （min-content 撑着），390px 的 iPhone 上会让**整页横向溢出**
   —— 页面被推得比视口宽，左右都切掉（2026-09-22 用户截图里就是这个）。
   让它横向滚也能解决溢出，但手机上侧滑看表格很难用，所以改成堆叠。 */
@media (max-width:660px){
  table.species thead{display:none}
  table.species tr{display:block; padding:14px 0;
    border-bottom:1px solid var(--rule)}
  table.species tr:hover td{background:none}
  table.species td{display:block; border:0; padding:2px 0}
  table.species td:first-child{font-size:17px; margin-bottom:6px;
    white-space:normal}
  table.species td[data-l]::before{content:attr(data-l) " — ";
    font:600 11.5px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.07em;
    text-transform:uppercase; color:var(--ink-soft)}
}

@media (max-width:1000px){
  .jars{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:660px){
  .jars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .top .wrap{grid-template-columns:1fr; gap:34px}
  .shot-lead{max-width:260px}
  .layer{grid-template-columns:1fr; gap:6px}
  .bar .wrap{height:auto; padding:12px 24px; flex-wrap:wrap}
  .bar nav{margin-left:0; width:100%}
}