/* ==========================================================================
   我爱摄影 · 极简单页
   一屏一张照片，纯白背景，黑白灰，零圆角、无阴影，只靠细线、字距和留白。
   照片右下角外侧贴一张白色说明卡（只有一条极细的描边，没有投影）。
   字体全部自托管（无外部 CDN）。
   ========================================================================== */

/* --- 字体 ---------------------------------------------------------------- */
@font-face {
  font-family: "HanSerif";
  src: url("../fonts/source-han-serif-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HanSerif";
  src: url("../fonts/source-han-serif-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- 变量 ---------------------------------------------------------------- */
:root {
  --bg: #ffffff;                /* 纯白背景，不放底纹 */

  --ink: #101010;
  --ink-2: #6c6c6c;
  --ink-3: #a5a5a5;
  --line: #e0e0e0;
  --card: #ffffff;
  --card-line: rgba(0, 0, 0, 0.08);

  --serif: "HanSerif", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  /* 元信息里既有拉丁也有中文（地点名），所以等宽字体后面接思源宋体，
     让中文也用衬线显示，而不是掉到系统黑体上 */
  --mono: "JetBrains Mono", "HanSerif", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fade: 460ms;
  --reserve: 0px;               /* 舞台底部为说明卡留出的高度，由脚本写入 */
}

/* --- 基础 ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; border-radius: 0; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  min-height: 100svh;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 3vh, 32px);
  padding: clamp(20px, 4.6vh, 48px) clamp(18px, 5vw, 56px) clamp(26px, 4.4vh, 46px);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* --- 标题 ---------------------------------------------------------------- */
.masthead { display: grid; justify-items: center; }

.masthead__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 26px);
  line-height: 1.2;
  letter-spacing: 0.42em;
  margin-right: -0.42em;      /* 抵消字距在末尾留下的空隙，保持视觉居中 */
}

/* --- 照片 ---------------------------------------------------------------- */
.stage-wrap {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
}

.frame {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* 舞台高度 = 整个框架减去为说明卡留出的空间，
   照片在这个区域里居中，卡片就落在它下面的右侧。 */
.stage {
  grid-row: 1;
  position: relative;
  display: block;
  width: 100%;
  height: calc(100% - var(--reserve, 0px));
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stage picture {
  position: absolute;
  inset: 0;
  display: block;
}
.stage__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.stage__img.is-ready { opacity: 1; }

/* 键盘聚焦时不在照片四周画框 —— 那块区域比照片大得多，看起来像多出来的装饰。
   改成把说明卡的描边加深，同样能看出焦点在哪，但照片本身干干净净。 */
.stage:focus-visible { outline: none; }
.stage:focus-visible ~ .plate { border-color: var(--ink); }

/* 以黑白呈现照片（photos.config.json 里 site.grayscale = true 时启用） */
.is-grayscale .stage__img { filter: grayscale(1); }

/* --- 说明卡（画展标签，贴在照片右下角外侧）------------------------------
   只有一条极细的描边，没有投影、没有底色层次：纯白页面上一张平贴的白卡。 */
.plate {
  position: absolute;
  z-index: 2;
  right: var(--plate-right, 0px);
  top: var(--plate-top, 0px);
  width: max-content;
  max-width: min(292px, 74%);
  padding: 12px 14px 11px;
  display: grid;
  gap: 3px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: none;
}

/* 内容填好之前先不显示，避免首屏出现一个空白的框 */
.plate[hidden] { display: none; }

.plate__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(12.5px, 1.25vw, 14.5px);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.plate__desc {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(9.5px, 0.9vw, 11px);
  line-height: 1.55;
  color: var(--ink-2);
}
.plate__rule {
  display: block;
  height: 1px;
  background: var(--line);
  margin: 5px 0 4px;
}
.plate__line {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(9px, 0.8vw, 10px);
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: #5c5c5c;
  text-wrap: pretty;
}
.plate__desc[hidden],
.plate__line[hidden],
.plate__rule[hidden] { display: none; }

.status {
  justify-self: center;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.status[hidden] { display: none; }

/* --- 页脚：器材线稿 + 一句版权声明 ------------------------------------- */
.foot { display: grid; justify-items: center; }

.gear {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 3vw, 38px);
  color: #9e9e9e;               /* 细线稿：浅灰，安静地待在页脚 */
}
.gear li { display: block; }
.gear svg {
  display: block;
  height: clamp(32px, 4.2vh, 50px);
  width: auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  /* 线宽固定为 1px：各张图 viewBox 大小不同，这样线看起来一样细 */
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foot__line {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-align: center;
}

/* --- 窄屏：说明卡改为压在照片下方的流式布局 ------------------------------ */
@media (max-width: 620px) {
  .stage { height: 100%; }
  .frame { grid-template-rows: minmax(0, 1fr) auto; }
  .plate {
    position: static;
    grid-row: 2;
    justify-self: end;
    width: auto;
    max-width: none;
    margin-top: 10px;
    padding: 11px 13px 10px;
  }
  .masthead__title { letter-spacing: 0.3em; margin-right: -0.3em; }
  .foot__line { font-size: 10px; letter-spacing: 0.04em; }
}

/* --- 减少动效 ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .stage__img { transition: none; }
}

/* --- 404 页 -------------------------------------------------------------
   样式放在这里而不是页面里的 <style>，这样才能在严格的 CSP 下正常显示。 */
.is-404 {
  display: block;
  padding: 0;
}

.err {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 8vh 6vw;
  text-align: center;
}
.err__code {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: clamp(44px, 13vw, 104px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.err__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}
.err__lead {
  margin: 0;
  max-width: 34em;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-2);
}
.err__link {
  margin-top: 14px;
  padding-bottom: 3px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
  transition: border-color 150ms ease;
}
.err__link:hover { border-bottom-color: var(--ink); }
.err__link:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }