/* =========================
   Yuan Liu — minimal system
   ========================= */

:root{
  --bg:#fff;
  --fg:#111;
  --muted:rgba(0,0,0,0.55);
  --rule:#111;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================
   Home (index)
   ========================= */

.page{
  min-height:100vh;
  padding:56px 20px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.top{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6vh;
}

.hr{
  display:inline-block;
  width:18px;
  height:1px;
  background:var(--rule);
  margin:6px auto;
}

.bottom{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* =========================
   Shared layout blocks
   ========================= */

.container{
  max-width:820px;
  width:100%;
  margin:0 auto;
  padding:56px 20px 56px;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:28px;
}

.nav{ display:flex; gap:14px; }

.section-title{
  font-size:13px;
  color:var(--muted);
  margin:18px 0 10px;
}

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.small{ font-size:13px; color:var(--muted); }

.project-title{
  font-size:16px;
  margin:0 0 8px;
  font-weight:600;
}

.meta{
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
}

.text{
  margin:0 0 18px;
  max-width:70ch;
}

.gallery{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ph{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  padding:18px;
  color:var(--muted);
  font-size:13px;
}

/* =========================
   Top centered "home"
   ========================= */

.top-nav{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* =========================
   Info page
   ========================= */

.page-info .info-layout{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:120px;
  margin: 110px 120px 120px;
}

.page-info .info-text{ max-width:260px; }
.page-info .muted{ color:var(--muted); }

.page-info .info-image{ margin:0; margin-left:auto; }
.page-info .info-image img{
  width: 200px;   /* 头像 size */
  height:auto;
  display:block;
}

@media (max-width: 900px){
  .page-info .info-layout{
    flex-direction:column;
    gap:24px;
    margin: 90px 24px 90px;
  }
  .page-info .info-image img{
    width: min(240px, 100%);
  }
}

/* =========================
   Projects page
   ========================= */
.page-projects .projects-wrap,
.page-archive .projects-wrap{
  width: 100%;
  margin: 0;                 /* 不要把 main 固定在左侧 */
  padding-top: 120px;        /* 给 home 留空间 + 统一顶部距离 */
}

.page-projects .projects-group,
.page-archive .projects-group{
  margin-bottom: 48px;
}

.page-projects .project-link,
.page-archive .project-link{
  display:block;
  margin: 0 0 14px 0;
}
/* ===== center-up list (projects & archive) ===== */

.center-list{
  width: 100%;
  max-width: 320px;
  margin: 18vh auto 0;       /* 上移/下移只调 18vh */
   text-align: center;   /* 👈 就是这句 */
}

/* =========================
   Centered list system
   ========================= */

.center-list{
  margin-top: 18vh;      /* 中间偏上 */
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;
  text-align: center;
}

.project-link{
  display: block;
  margin-bottom: 14px;
}

.project-title{
  font-size: 16px;
  margin-bottom: 12px;
}
/* =========================
   Project page (Boxman)
   ========================= */

.page-project{
  background:#fff;
}

.project-page{
  max-width: 640px;
  margin: 120px auto 160px;
  padding: 0 20px;
  text-align: center;
}

.project-header{
  margin-bottom: 64px;
}

.project-name{
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

.project-meta{
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 24px;
}

.project-text{
  font-size: 13px;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

/* works */

.project-works{
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.work-img{
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

/* =========================
   Lightbox (Quinn-like)
   ========================= */

.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: pointer;
}

.lightbox img{
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.lightbox.hidden{
  display: none;
}
/* =========================
   Work page (single-image click-through)
   ========================= */

.page-work .work-wrap{
  max-width: 900px;
  margin: 110px auto 140px;
  padding: 0 20px;
}

.page-work .work-figure{
  margin: 0;
  text-align: center;
  cursor: pointer; /* 告诉观众：可以点 */
}

.page-work .work-img{
  display: block;
  width: min(760px, 92vw);
  height: auto;
  margin: 0 auto;
}

.page-work .work-caption{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.4;
}

.page-work .work-title{
  font-style: italic;
  margin-bottom: 4px;
}

.page-work .work-meta{
  color: rgba(0,0,0,0.7);
}

/* =========================
   Boxman gallery
   ========================= */

.boxman-gallery {
  display: flex;
  justify-content: center;
  margin-top: 120px;
}

.boxman-frame {
  max-width: 520px;     /* ⭐ 核心：控制“作品尺度” */
  width: 100%;
  text-align: center;
}

.boxman-frame img {
  width: 100%;
  height: auto;         /* 等比例 */
  display: block;
}
/* =========================
   Single-work page (Boxman / Bodily Images)
   ========================= */

.page-work .work-wrap{
  min-height: 100vh;
  padding: 96px 20px 80px;   /* 给顶部 home 留空间 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-work .work-figure{
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.page-work .work-figure img{
  display: block;
  width: auto;               /* 保持等比 */
  height: auto;              /* 保持等比 */
  max-width: min(780px, 86vw); /* 关键：别撑满 */
  max-height: 70vh;          /* 关键：别太高 */
}

.page-work .work-caption{
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
}

.page-work .work-title{
  font-style: italic;        /* 像 Quinn 那种感觉 */
}

.page-work .work-meta{
  color: rgba(0,0,0,0.65);
}