/* ============================================================
   照片站 —— 共用样式

   ⚠️ 接的是从化请柬那套语言（assets/tokens.css 直接搬过来的）：
   **零容器基底** —— 不做卡片、圆角容器、box-shadow、边框、半透明底板。
   层级只靠字号、字重、位置和光建立。

   唯一必须偏离的地方是照片墙：它天然需要网格。
   做法是**只给间距，不给容器** —— 照片之间靠留白和错位分开，
   而不是各自套一个白框。加了框就变成后台管理系统。
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{
  margin:0;background:var(--c-sand);color:var(--ink);
  font-family:var(--f-sans);font-weight:300;line-height:1.85;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- 页眉：题签，不是导航条 ----------
   不做 sticky header —— 那是工具站的做法。这里只是一行落款。 */
.top{padding:var(--sp-4) 0 var(--sp-3);text-align:center}
.top .mono{width:64px;margin:0 auto var(--sp-1);opacity:.9}
.top h1{
  margin:0;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(2rem,9vw,3.4rem);letter-spacing:.06em;
  color:var(--c-forest-dp);line-height:1;
}
.top .sub{
  margin:.35em 0 0;font-family:var(--f-hand);
  font-size:var(--t-h);color:var(--c-terracotta);
}

/* ---------- 段落语汇 ---------- */
.eyebrow{
  display:block;font-family:var(--f-disp);font-weight:700;
  font-size:var(--t-small);letter-spacing:.3em;
  color:var(--c-camel);text-transform:uppercase;
}
.lead{font-family:var(--f-serif);font-size:var(--t-body);margin:0 0 var(--sp-2)}
.whisper{font-size:var(--t-small);color:var(--ink-soft);margin:var(--sp-1) 0 0}
.hand{font-family:var(--f-hand);color:var(--c-terracotta)}

/* ---------- 按钮：一条描边 + 一块实心，没有第三种 ---------- */
.btn{
  appearance:none;cursor:pointer;display:inline-block;
  min-height:48px;                     /* ⚠️ 触控下限，不随字号缩 */
  padding:.7em 1.7em;border:0;border-radius:2px;
  font-family:var(--f-sans);font-weight:400;
  font-size:max(15px,var(--t-body));letter-spacing:.12em;
  background:var(--c-forest);color:var(--c-cream);
  transition:transform var(--d-fast) var(--ease),opacity var(--d-fast);
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--c-forest-dp);
           box-shadow:inset 0 0 0 1px rgba(49,63,42,.4)}
.btn.clay{background:var(--c-terracotta)}

/* ---------- 章节入口 ----------
   插画直接坐在底色上，不加边框。标题压在画的下缘，跟着画走。 */
.chapters{
  display:grid;gap:var(--sp-4) var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding:var(--sp-3) 0 var(--sp-5);
}
.chapter{text-decoration:none;display:block}
.chapter .art{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;background:var(--c-champagne);
}
.chapter .art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease);
}
.chapter:hover .art img{transform:scale(1.035)}
/* 画的下缘化进底色，去掉那条硬边 —— 硬边一出现就成了卡片 */
.chapter .art::after{
  content:"";position:absolute;inset:auto 0 0;height:34%;
  background:linear-gradient(transparent,var(--c-sand));
}
.chapter h3{
  margin:.5em 0 0;font-family:var(--f-serif);font-weight:500;
  font-size:var(--t-h);color:var(--c-forest-dp);
}
.chapter .n{font-family:var(--f-disp);font-weight:700;
            font-size:var(--t-small);letter-spacing:.2em;color:var(--c-camel)}
.chapter .desc{margin:.1em 0 0;font-family:var(--f-hand);
               font-size:var(--t-body);color:var(--c-terracotta)}

/* ---------- 照片墙 ----------
   ⚠️ 用 CSS column 而不是 grid：手机上 2 列、桌面 4 列，
   高矮不一的照片自然错位，不需要 JS 算瀑布流。 */
.grid{columns:2 200px;column-gap:10px;padding:var(--sp-2) 0 var(--sp-5)}
@media (min-width:900px){.grid{column-gap:14px}}
.tile{
  position:relative;break-inside:avoid;margin:0 0 10px;
  display:block;width:100%;padding:0;border:0;
  background:var(--c-champagne);cursor:zoom-in;
  transition:opacity var(--d-fast);
}
.tile img{width:100%;height:auto}
.tile:hover{opacity:.92}
/* 视频角标：一个小三角，不做播放器皮肤 */
.tile .vid{
  position:absolute;right:8px;bottom:8px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(27,35,24,.62);
  display:grid;place-items:center;
}
.tile .vid::after{
  content:"";width:0;height:0;margin-left:2px;
  border:5px solid transparent;border-left-color:var(--c-cream);
}
.tile .by{
  position:absolute;inset:auto 0 0;padding:1.2em .6em .4em;
  font-family:var(--f-hand);font-size:var(--t-small);color:var(--c-cream);
  background:linear-gradient(transparent,rgba(27,35,24,.55));
  opacity:0;transition:opacity var(--d-fast);
}
.tile:hover .by{opacity:1}

/* ---------- 灯箱 ---------- */
.box{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(20,26,18,.94);
  align-items:center;justify-content:center;padding:var(--sp-2);
}
.box.on{display:flex}
.box img,.box video{max-width:100%;max-height:86vh;width:auto;height:auto;margin:auto}
.box .x{
  position:absolute;top:14px;right:16px;z-index:2;
  width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(244,234,217,.16);color:var(--c-cream);
  font-size:24px;line-height:1;cursor:pointer;
}
.box .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:72px;border:0;background:transparent;
  color:var(--c-cream);font-size:34px;opacity:.55;cursor:pointer;
}
.box .nav:hover{opacity:1}
.box .prev{left:2px}.box .next{right:2px}
.box .cap{
  position:absolute;inset:auto 0 0;padding:var(--sp-2);text-align:center;
  font-size:var(--t-small);color:var(--c-cream);opacity:.72;
}

/* ---------- 页脚 ---------- */
.foot{
  padding:var(--sp-4) 0 var(--sp-3);text-align:center;
  border-top:1px solid rgba(49,63,42,.14);
}
.foot .cats{width:76px;margin:0 auto var(--sp-1);opacity:.75}
.foot p{margin:.2em 0;font-size:var(--t-small);color:var(--ink-soft)}
.foot a{color:var(--c-camel)}

.center{text-align:center}
.hidden{display:none !important}