/* =====================================================================
   复古印刷风 · 作品循环展墙
   配色偏暖纸感，明度不压，整体是"旧杂志内页"而不是"暗房"
   ===================================================================== */

:root{
  /* 纸张 */
  --paper:      #F1E7D5;
  --paper-2:    #FBF5E8;
  --paper-3:    #E7DAC2;

  /* 油墨 */
  --ink:        #2B2620;
  --ink-soft:   #6A5F4F;
  --ink-faint:  #9C8F79;
  --line:       #C9BCA3;

  /* 印色 */
  --accent:     #C0522C;   /* 铁锈红 */
  --accent-2:   #2E6F6A;   /* 松绿 */
  --accent-3:   #C99433;   /* 芥末黄 */
  --accent-4:   #45628F;   /* 旧蓝 */

  --card-h:     clamp(240px, 54vh, 520px);
  --pad:        12px;
  --cap-h:      52px;
  --radius:     2px;
  --shadow:     6px 6px 0 rgba(43,38,32,.10);
  --shadow-hi:  9px 13px 0 rgba(43,38,32,.16);

  --serif: Georgia, "Songti SC", "STSong", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  min-height:100%;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(192,82,44,.055), transparent 46%),
    radial-gradient(circle at 88% 92%, rgba(46,111,106,.055), transparent 46%);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* 纸面颗粒 */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.20; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ── 报头 ───────────────────────────────────────────── */

.masthead{
  padding:26px clamp(18px,4vw,54px) 0;
  flex:0 0 auto;
}
.masthead__row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding-bottom:12px;
  border-bottom:3px double var(--ink);
  flex-wrap:wrap;
}
.brand__name{
  margin:0;
  font-size:clamp(26px,3.4vw,44px);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.05;
}
.brand__sub{
  margin:7px 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.meta{
  display:flex; align-items:center; gap:18px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:4px;
}
.meta__item--live{ color:var(--accent); }
.meta__item--live.is-off{ color:var(--ink-faint); }

/* ── 跑马灯 ─────────────────────────────────────────── */

.ticker{
  flex:0 0 auto;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:rgba(43,38,32,.035);
  padding:7px 0;
}
.ticker__track{
  display:flex; width:max-content;
  animation:ticker 42s linear infinite;
}
.ticker__track span{
  padding-right:0;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
@keyframes ticker{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* ── 舞台 ───────────────────────────────────────────── */

.stage{
  flex:1 1 auto;
  display:flex; align-items:center;
  position:relative;
  padding:clamp(22px,4.5vh,52px) 0 clamp(16px,3vh,34px);
}

.marquee{
  width:100%;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  padding:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.marquee.is-dragging{ cursor:grabbing; }

.track{
  display:flex;
  gap:clamp(16px,2vw,30px);
  width:max-content;
  will-change:transform;
}

/* ── 卡片 ───────────────────────────────────────────── */

.card{
  flex:0 0 auto;
  height:var(--card-h);
  min-width:230px;
  padding:var(--pad) var(--pad) 0;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  position:relative;
  user-select:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), border-color .4s;
}
.card::after{          /* 内框细线，印刷品味道 */
  content:""; position:absolute; inset:4px; border:1px solid rgba(43,38,32,.10);
  pointer-events:none; border-radius:1px;
}
.card:hover{
  transform:translateY(-8px) rotate(-.35deg);
  box-shadow:var(--shadow-hi);
  border-color:var(--ink-faint);
}

.card__media{
  height:calc(var(--card-h) - var(--cap-h) - var(--pad));
  align-self:center;
  overflow:hidden;
  background:var(--paper-3);
  position:relative;
  z-index:1;
}
.card__media img{
  height:100%; width:auto; max-width:72vw;
  display:block; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card__media img{ transform:scale(1.035); }

/* 占位色块 */
.ph{
  height:100%;
  aspect-ratio:var(--ar,1);
  background-image:
    repeating-linear-gradient(45deg, rgba(43,38,32,.13) 0 1px, transparent 1px 9px);
  background-color:var(--ph,#C0522C);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
}
.ph__n{
  font-family:var(--serif);
  font-size:clamp(38px,5vw,82px); font-weight:700; line-height:1;
  color:rgba(255,255,255,.9);
  text-shadow:3px 3px 0 rgba(43,38,32,.22);
}
.ph__t{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.card__cap{
  height:var(--cap-h);
  display:flex; align-items:center; gap:10px;
  padding:0 2px;
  font-size:13px;
  overflow:hidden;
  position:relative; z-index:1;
}
.card__no{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--accent); flex:0 0 auto;
}
.card__title{
  font-weight:700; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:0 1 auto;
}
.card__note{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
  margin-left:auto; white-space:nowrap; flex:0 0 auto;
}

/* 空状态 */
.empty{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:14px; color:var(--ink-soft); text-align:center; margin:0;
}
.empty code{
  font-family:var(--mono); font-size:12px;
  background:rgba(43,38,32,.07); padding:2px 6px; border-radius:2px;
}

/* ── 控制台 ─────────────────────────────────────────── */

.console{
  flex:0 0 auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:0 clamp(18px,4vw,54px) 16px;
  flex-wrap:wrap;
}
.console__group{ display:flex; align-items:center; gap:10px; }
.console__label{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
}
.btn, .seg__b{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:999px;
  padding:7px 15px; cursor:pointer;
  transition:all .22s;
}
.seg{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper-2); }
.seg__b{ border:0; border-radius:0; padding:7px 14px; background:transparent; }
.seg__b + .seg__b{ border-left:1px solid var(--line); }
.seg__b:hover, .btn:hover{ background:var(--paper-3); }
.seg__b.is-active{ background:var(--ink); color:var(--paper-2); }
.btn--toggle.is-on{ background:var(--accent); border-color:var(--accent); color:#FBF5E8; }
.btn:active, .seg__b:active{ transform:translateY(1px); }

.console__hint{
  margin-left:auto;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; color:var(--ink-faint);
}

/* ── 页脚 ───────────────────────────────────────────── */

.foot{
  flex:0 0 auto;
  display:flex; justify-content:space-between; gap:16px;
  padding:11px clamp(18px,4vw,54px);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── 大图 ───────────────────────────────────────────── */

.lightbox{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,2vw,26px);
  padding:clamp(14px,3vw,42px);
}
.lightbox[hidden]{ display:none; }
.lb__backdrop{
  position:absolute; inset:0;
  background:rgba(43,38,32,.72);
  backdrop-filter:blur(3px);
  animation:fade .28s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }

.lb__figure{
  position:relative; z-index:2;
  margin:0;
  max-width:min(1080px, 88vw);
  max-height:88vh;
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:14px 14px 0;
  box-shadow:0 26px 70px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
  animation:pop .34s cubic-bezier(.2,.9,.25,1);
}
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }

.lb__media{
  overflow:hidden; background:var(--paper-3);
  display:flex; align-items:center; justify-content:center;
  min-height:120px;
}
.lb__media img{ max-width:100%; max-height:66vh; display:block; }
.lb__media .ph{ height:auto; max-height:66vh; width:auto; max-width:100%; aspect-ratio:var(--ar,1); }

.lb__cap{
  display:flex; align-items:baseline; gap:12px;
  padding:13px 4px 15px; flex-wrap:wrap;
}
.lb__no{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--accent);
}
.lb__title{ margin:0; font-size:clamp(17px,2vw,24px); font-weight:700; letter-spacing:.02em; }
.lb__note{
  margin:0 0 0 auto;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}

.lb__close{
  position:absolute; top:-14px; right:-14px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--ink); color:var(--paper-2);
  font-size:13px; cursor:pointer; display:grid; place-items:center;
  transition:transform .2s;
}
.lb__close:hover{ transform:rotate(90deg); }

.lb__nav{
  position:relative; z-index:2;
  width:52px; height:52px; flex:0 0 auto;
  border-radius:50%; border:1px solid rgba(251,245,232,.5);
  background:rgba(251,245,232,.14); color:var(--paper-2);
  font-size:26px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .22s, transform .22s;
}
.lb__nav:hover{ background:rgba(251,245,232,.3); transform:scale(1.06); }

/* ── 响应式 ─────────────────────────────────────────── */

@media (max-width:760px){
  :root{ --card-h:clamp(200px,40vh,340px); --cap-h:46px; }
  .meta__item:nth-child(1){ display:none; }
  .console__hint{ display:none; }
  .lb__nav{ width:40px; height:40px; font-size:20px; }
  .lb__close{ top:-10px; right:-6px; }
}

@media (prefers-reduced-motion:reduce){
  .card, .card__media img{ transition:none; }
  .ticker__track{ animation:none; }
}