/* ========================================================
   光谱 SPECTRUM · HDBJ Secondary School Magazine
   ======================================================== */

:root{
  --paper:      #f7f4ee;
  --paper-deep: #efe9df;
  --ink:        #14120f;
  --ink-soft:   #46413a;
  --muted:      #8b8478;
  --gold:       #b3903f;
  --gold-soft:  #cbab6d;
  --line:       rgba(20,18,15,.13);
  --line-soft:  rgba(20,18,15,.07);
  --shadow-s:   0 2px 8px rgba(28,22,14,.06);
  --shadow-m:   0 18px 40px -18px rgba(28,22,14,.35);
  --shadow-l:   0 42px 80px -32px rgba(28,22,14,.45);
  --serif:      "Songti SC","Source Han Serif SC","Noto Serif SC","STSong",Georgia,"Times New Roman",serif;
  --sans:       "PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bar-h:      68px;
  --ease:       cubic-bezier(.22,.72,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 18px); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* 纸感纹理 */
.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(179,144,63,.05), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(20,18,15,.045), transparent 50%),
    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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------------- 顶栏 ---------------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:0 clamp(16px,3.4vw,44px);
  background:rgba(247,244,238,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:transform .45s var(--ease), opacity .3s;
}
.bar.hide{ transform:translateY(-100%); opacity:0; }

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-seal{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  background:var(--ink); color:var(--gold-soft);
  font-family:var(--serif); font-size:13px; letter-spacing:-.04em;
  white-space:nowrap; line-height:1;
  border-radius:2px;
  position:relative;
}
.brand-seal span{ font-size:13px; }
.brand-meta{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.brand-meta b{ font-size:12px; letter-spacing:.34em; font-weight:600; }
.brand-meta i{
  font-style:normal; font-size:11px; color:var(--muted); letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.bar-right{ display:flex; align-items:center; gap:clamp(10px,2vw,22px); }
.issue-chip{
  font-size:11px; letter-spacing:.16em; color:var(--ink-soft); white-space:nowrap;
  padding-right:clamp(0px,1.4vw,14px); border-right:1px solid var(--line);
  display:flex; gap:6px; align-items:center;
}
.issue-chip b{ font-weight:600; }
.issue-chip em{ font-style:normal; color:var(--line); }

.langs{ display:flex; gap:2px; background:rgba(20,18,15,.045); padding:3px; border-radius:100px; }
.langs button{
  padding:6px 13px; border-radius:100px;
  font-size:12.5px; letter-spacing:.02em; color:var(--ink-soft);
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s;
  white-space:nowrap;
}
.langs button:hover{ color:var(--ink); }
.langs button.on{
  background:var(--ink); color:#f7f4ee; box-shadow:0 2px 10px rgba(20,18,15,.24);
}
.langs button .full{ display:inline; }
.langs button .short{ display:none; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; z-index:1;
  min-height:100vh; min-height:100svh;
  padding:calc(var(--bar-h) + clamp(28px,6vh,74px)) clamp(18px,5vw,72px) clamp(40px,7vh,80px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:clamp(24px,4vw,64px);
  max-width:1560px; margin:0 auto;
}

.hero-copy{ max-width:640px; }

.kicker{
  display:flex; align-items:center; gap:14px;
  font-size:12.5px; letter-spacing:.22em; color:var(--gold);
  margin:0 0 clamp(14px,2.6vh,26px); text-transform:uppercase;
}
.kicker .rule{ width:clamp(28px,4vw,58px); height:1px; background:var(--gold); opacity:.5; }

.masthead{ margin:0; display:flex; flex-direction:column; gap:.16em; }
.masthead-cn{
  font-family:var(--sans);
  font-size:clamp(74px,11.2vw,168px);
  font-weight:800; letter-spacing:-.045em; line-height:.86;
  display:flex;
}
.masthead-en{
  font-family:var(--serif);
  font-size:clamp(19px,2.3vw,34px);
  letter-spacing:.42em; color:var(--gold);
  font-weight:400; margin-left:.24em;
  text-indent:.42em;
}

.lead{
  font-size:clamp(14px,1.18vw,16.5px);
  line-height:1.95; color:var(--ink-soft);
  margin:clamp(20px,3vh,34px) 0 0;
  max-width:34em;
  text-align:justify;
}

.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3.4vh,38px); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px;
  font-size:13.5px; letter-spacing:.1em;
  transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s, border-color .3s;
}
.btn svg{ width:17px; height:17px; flex:0 0 17px; transition:transform .35s var(--ease); }
.btn-solid{ background:var(--ink); color:#f8f5ef; box-shadow:0 10px 26px -12px rgba(20,18,15,.7); }
.btn-solid:hover{ background:#000; transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(20,18,15,.75); }
.btn-solid:hover svg{ transform:translateX(3px); }
.btn-line{ border:1px solid var(--line); color:var(--ink-soft); }
.btn-line:hover{ border-color:var(--ink); color:var(--ink); background:rgba(20,18,15,.03); transform:translateY(-2px); }
.btn-line:hover svg{ transform:translateY(2px); }

.meta-list{ margin:clamp(26px,4.4vh,48px) 0 0; display:grid; gap:6px; }
.meta-list div{ display:flex; flex-direction:column; gap:1px; }
.meta-list dt{ font-size:11.5px; letter-spacing:.14em; color:var(--muted); }
.meta-list dd{ margin:0; font-size:11.5px; color:var(--muted); letter-spacing:.04em; }

/* 封面 */
.hero-cover{ position:relative; display:flex; justify-content:center; align-items:center; }
.cover-frame{
  position:relative; margin:0; z-index:2;
  width:min(100%,460px);
  transform:rotate(-1.6deg);
  transition:transform .8s var(--ease);
  filter:drop-shadow(0 40px 60px rgba(28,22,14,.28));
}
.cover-frame:hover{ transform:rotate(-.4deg) translateY(-6px); }
.cover-frame img{ width:100%; height:auto; aspect-ratio:3189/4489; border-radius:1px; background:#fff; }
.cover-tag{
  position:absolute; left:-16px; bottom:-14px;
  background:var(--ink); color:#f7f4ee;
  padding:9px 15px; display:flex; flex-direction:column; gap:1px;
  font-size:10px; letter-spacing:.18em;
  box-shadow:var(--shadow-m);
}
.cover-tag em{ font-style:normal; color:var(--gold-soft); font-size:9px; }

.cover-ghost{ display:none; }

/* ---------------- 阅读区 ---------------- */
.reader{
  position:relative; z-index:1;
  padding:clamp(28px,4.4vh,56px) clamp(16px,4vw,56px) clamp(40px,6vh,72px);
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  border-top:1px solid var(--line-soft);
}

.reader-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  max-width:1400px; margin:0 auto clamp(18px,3vh,30px);
}
.reader-head h2{
  display:flex; align-items:baseline; gap:14px;
  margin:0; font-size:clamp(19px,2vw,26px); font-weight:600; letter-spacing:.02em;
}
.sec-no{
  flex:0 0 auto;
  font-family:var(--serif); font-size:12px; letter-spacing:.16em;
  color:var(--gold); border:1px solid rgba(179,144,63,.35);
  padding:2px 7px; border-radius:2px;
}

.view-toggle{ display:flex; gap:2px; background:rgba(20,18,15,.06); padding:3px; border-radius:100px; }
.view-toggle button{
  padding:6px 16px; border-radius:100px; font-size:12.5px; color:var(--ink-soft);
  transition:background .28s, color .28s, box-shadow .28s;
}
.view-toggle button.on{ background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(20,18,15,.12); }

.stage{
  position:relative; max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:clamp(6px,1.6vw,20px);
  min-height:clamp(300px,62vh,720px);
}

.holder{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,2vh,22px) 0;
}

.sheet{
  position:relative; cursor:zoom-in;
  background:#fff;
  display:block;
  box-shadow:var(--shadow-l);
  transition:transform .5s var(--ease), box-shadow .5s;
  animation:sheetIn .6s var(--ease) both;
}
@keyframes sheetIn{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.sheet img{ display:block; width:auto; height:auto; max-width:100%; max-height:min(63vh, 800px); }
.sheet:hover{ box-shadow:0 52px 90px -30px rgba(28,22,14,.5); }
.sheet.single{ max-width:min(100%, 620px); }
.sheet.spread{ max-width:100%; }

/* 页码点 */
.steps{ display:flex; justify-content:center; align-items:center; gap:7px; margin-top:clamp(14px,2vh,20px); }
.steps button{
  width:6px; height:6px; padding:0; border-radius:50%;
  background:rgba(20,18,15,.2);
  transition:background .3s var(--ease), width .3s var(--ease);
}
.steps button.on{ background:var(--ink); width:22px; border-radius:100px; }
.sheet::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.08);
}
.sheet .fold{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:linear-gradient(180deg, transparent, rgba(20,18,15,.16) 12%, rgba(20,18,15,.16) 88%, transparent);
  pointer-events:none;
}

.arrow{
  flex:0 0 auto;
  width:clamp(38px,3.4vw,50px); height:clamp(38px,3.4vw,50px);
  border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-soft);
  background:rgba(255,255,255,.6);
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease), opacity .3s;
}
.arrow svg{ width:20px; height:20px; }
.arrow:hover{ background:var(--ink); color:#f7f4ee; border-color:var(--ink); transform:scale(1.06); }
.arrow:disabled{ opacity:.28; pointer-events:none; }

/* 缩略图条 */
.thumbs{
  max-width:1400px; margin:clamp(12px,1.8vh,20px) auto 0;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.thumb{
  width:clamp(50px,4.8vw,66px);
  display:flex; flex-direction:column; gap:7px;
  opacity:.5; transition:opacity .3s, transform .3s var(--ease);
}
.thumb img{
  width:100%; aspect-ratio:1/1.41; object-fit:cover; object-position:top center;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-s);
}
.thumb span{
  font-size:10px; letter-spacing:.1em; color:var(--muted); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.thumb.on{ opacity:1; transform:translateY(-4px); }
.thumb.on img{ border-color:var(--gold); box-shadow:0 10px 22px -10px rgba(28,22,14,.5); }
.thumb.on span{ color:var(--ink); }

.hint{
  max-width:1400px; margin:clamp(14px,2vh,20px) auto 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:11px; letter-spacing:.08em; color:var(--muted);
}
.hint svg{ width:15px; height:15px; opacity:.7; }

/* 移动端滚动阅读 */
.flow{ display:flex; flex-direction:column; gap:clamp(22px,5vw,40px); width:100%; }
.flow-item{ display:flex; flex-direction:column; gap:10px; }
.flow-cap{ display:flex; align-items:baseline; gap:10px; padding:0 2px; }
.flow-cap b{ font-family:var(--serif); font-size:12px; letter-spacing:.16em; color:var(--gold); }
.flow-cap span{ font-size:13px; color:var(--ink-soft); letter-spacing:.02em; }
.flow-item img{
  width:100%; height:auto; background:#fff;
  box-shadow:0 16px 34px -18px rgba(28,22,14,.45);
  cursor:zoom-in;
}

/* ---------------- 页脚 ---------------- */
.foot{
  position:relative; z-index:1;
  padding:clamp(40px,7vh,76px) clamp(20px,5vw,60px) clamp(46px,7vh,70px);
  text-align:center; background:var(--ink); color:rgba(247,244,238,.72);
}
.foot-mark{
  font-family:var(--serif); font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.34em; color:var(--gold-soft); margin-bottom:16px;
}
.foot p{ margin:0; font-size:12px; line-height:2; letter-spacing:.06em; }
.foot-issue{ margin-top:10px !important; color:rgba(247,244,238,.38); font-size:11px !important; letter-spacing:.2em !important; }

/* ---------------- 放大阅读层 ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(12,10,8,.988);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
  overscroll-behavior:contain;
}
.lightbox.open{ opacity:1; visibility:visible; }

.lb-stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  touch-action:none;
}
.lb-stage img{
  max-width:none; max-height:none;
  will-change:transform;
  user-select:none; -webkit-user-drag:none;
  transform-origin:center center;
}

.lb-bar{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px clamp(14px,3vw,28px);
  background:linear-gradient(180deg, rgba(10,9,8,.9), transparent);
  color:rgba(247,244,238,.9);
}
.lb-title{ font-size:12.5px; letter-spacing:.14em; opacity:.8; }
.lb-actions{ display:flex; align-items:center; gap:8px; }
.lb-actions button, .lb-actions a{
  min-width:44px; height:38px; padding:0 13px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(247,244,238,.22); border-radius:100px;
  font-size:11.5px; letter-spacing:.1em; color:rgba(247,244,238,.9);
  transition:background .25s, border-color .25s, color .25s;
}
.lb-actions button:hover, .lb-actions a:hover{ background:rgba(247,244,238,.14); border-color:rgba(247,244,238,.45); }
.lb-actions button.on{ background:#f7f4ee; color:#141210; border-color:#f7f4ee; }
.lb-close{ width:38px; padding:0 !important; }
.lb-close svg{ width:18px; height:18px; }

.lb-progress{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:rgba(247,244,238,.14);
}
.lb-progress i{ display:block; height:100%; background:var(--gold-soft); width:0; transition:width .35s; }

/* ---------------- 响应式 ---------------- */
@media (max-width:1180px){
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(18px,3vw,36px); }
  .cover-frame{ width:min(100%,380px); }
  .cover-ghost{ display:none; }
}

@media (max-width:900px){
  :root{ --bar-h:60px; }
  .bar-right{ gap:10px; }
  .issue-chip{ display:none; }
  .langs button{ padding:6px 10px; font-size:12px; }
  .langs button .full{ display:none; }
  .langs button .short{ display:inline; }
  .brand-meta i{ display:none; }

  .hero{
    grid-template-columns:1fr;
    padding-top:calc(var(--bar-h) + 26px);
    text-align:left;
    min-height:auto;
    gap:clamp(22px,5vw,40px);
  }
  .hero-copy{ order:1; max-width:none; }
  .hero-cover{ order:2; }
  .masthead-cn{ font-size:clamp(72px,20vw,120px); }
  .masthead-en{ font-size:clamp(18px,4.4vw,26px); letter-spacing:.34em; }
  .lead{ font-size:14.5px; line-height:1.85; }
  .cover-frame{ width:min(78%,340px); transform:rotate(-1deg); }
  .cover-tag{ left:-8px; bottom:14px; padding:7px 12px; }

  .actions{ gap:10px; }
  .btn{ padding:13px 22px; font-size:13px; }

  .reader{ padding:clamp(36px,6vh,54px) 16px clamp(44px,7vh,70px); }
  .reader-head h2{ font-size:18px; }
  .stage{ min-height:0; display:block; }
  .arrow, .view-toggle, .thumbs, .hint{ display:none !important; }
  .holder{ padding:0; }
}

@media (max-width:420px){
  .masthead-cn{ font-size:clamp(64px,19vw,96px); }
  .brand-seal{ width:34px; height:34px; flex-basis:34px; font-size:13px; }
  .langs{ padding:2px; }
  .langs button{ padding:5px 8px; font-size:11.5px; }
}

/* 触摸设备取消 hover 位移 */
@media (hover:none){
  .cover-frame:hover{ transform:rotate(-1.6deg); }
  .btn:hover{ transform:none; }
  .arrow:hover{ background:rgba(255,255,255,.6); color:var(--ink-soft); border-color:var(--line); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}