/* ============================================================
   拾光 LIGHT ARCHIVE —— AI 生成影像陈列馆
   暗色 / 胶片颗粒 / 展览馆式排版
   ============================================================ */

:root{
  --bg:      #0A0A0C;
  --bg-2:    #121216;
  --ink:     #EDE9DF;
  --mut:     #9A9488;
  --dim:     #69645A;
  --amber:   #E5A94D;
  --amber-2: #F2C57E;
  --line:    rgba(237,233,223,.14);
  --line-2:  rgba(237,233,223,.06);

  --serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --sans:  "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono:  "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --radius: 5px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:86px; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--amber); color:#1A1206; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

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

/* ---------- 顶栏 ---------- */
.top{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1.05rem 2.4rem;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid var(--line-2);
}
.brand{ display:flex; align-items:baseline; gap:.9rem; text-decoration:none; color:var(--ink); }
.brand-mark{
  width:22px; height:22px; position:relative;
  border:1.5px solid var(--amber); border-radius:50%;
  align-self:center;
}
.brand-mark i{
  position:absolute; inset:-3px; border:1px solid color-mix(in srgb, var(--amber) 60%, transparent);
  border-radius:50%;
}
.brand-name{ font-family:var(--serif); font-size:22px; letter-spacing:.12em; }
.brand-en{ font-size:10.5px; letter-spacing:.22em; color:var(--mut); }
.nav{ display:flex; gap:2.2rem; }
.nav a{
  color:var(--mut); text-decoration:none; font-size:14px; letter-spacing:.08em;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .2s;
}
.nav a:hover{ color:var(--amber); }
.top-est{
  margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.3em;
  color:var(--dim);
}

/* ---------- 主视觉 ---------- */
.hero{
  padding:11rem 2.4rem 4.5rem;
  min-height:100vh;
  display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:3rem;
  max-width:1500px; margin:0 auto;
}
.eyebrow{
  font-family:var(--serif); font-size:13.5px; letter-spacing:.28em; color:var(--mut);
  text-transform:uppercase;
}
.eyebrow span{ color:var(--amber); margin:0 .4em; }
.hero-title{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(5rem, 17vw, 11.5rem);
  letter-spacing:.04em; line-height:1;
  color:var(--ink);
  text-shadow:0 0 1px rgba(237,233,223,.25);
}
.hero-sub{
  margin-top:1.1rem; font-family:var(--serif); font-size:clamp(19px,2.4vw,28px);
  line-height:1.4; color:var(--ink);
}
.hero-sub b{ color:var(--amber); }
.hero-lead{ margin-top:.9rem; font-size:15.5px; color:var(--mut); line-height:1.9; }
.hero-cta{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.btn{
  font-size:14.5px; letter-spacing:.1em; padding:.95rem 1.7rem;
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none;
}
.btn-solid{ background:var(--amber); color:#1C1405; border:none; }
.btn-solid:hover{ background:var(--amber-2); }
.btn-ghost{
  color:var(--ink); border:1px solid var(--line); background:transparent;
}
.btn-ghost:hover{
  border-color:var(--amber); color:var(--amber); background:color-mix(in srgb, var(--bg) 90%, var(--amber) 10%);
}

.hero-side{ display:flex; flex-direction:column; gap:2.4rem; }
.orb{
  width:min(30vw, 340px); aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(242,197,126,.9), transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--amber) 18%, var(--bg)), var(--bg) 68%);
  position:relative;
}
.orb::before{
  content:""; position:absolute; inset:-6%; border-radius:50%;
  background:conic-gradient(from 120deg, transparent, var(--amber), transparent 20%, var(--amber-2), transparent 40%, var(--amber), transparent 55%, var(--amber-2), transparent 72%, var(--amber));
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 59%, #000 62%, transparent 63%);
  mask:radial-gradient(circle, transparent 58%, #000 59%, #000 62%, transparent 63%);
  animation:orbSpin 26s linear infinite;
}
@keyframes orbSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

.hero-stats{ list-style:none; font-family:var(--mono); }
.hero-stats li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line-2);
  font-size:12.5px; letter-spacing:.12em;
}
.hero-stats li span:last-child{ color:var(--amber); }

/* ---------- 跑马灯 ---------- */
.ticker{ overflow:hidden; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:1.05rem 0; }
.ticker-track{
  display:flex; white-space:nowrap; width:max-content;
  animation:tick 22s linear infinite;
}
.ticker-track .tk{ font-family:var(--serif); font-size:16px; letter-spacing:.14em; color:var(--ink); }
.ticker-track .tk em{ color:var(--amber); }
.ticker-track .tk b{ color:var(--dim); }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- 序言 ---------- */
.preface{ padding:8.5rem 2.4rem; max-width:1500px; margin:0 auto; }
.sec-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  line-height:1.16; color:var(--ink);
  margin:.4rem 0 0;
}
.sec-title b{ color:var(--amber); }
.preface-grid{
  margin-top:3.4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:2.6rem 3.2rem; align-items:start;
}
.preface-copy{ font-family:var(--serif); font-size:17px; line-height:2.05; }
.preface-copy b{ color:var(--amber); }
.preface-copy p{ margin-bottom:1.1rem; }

.channel-cards{ list-style:none; display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem 1.4rem; }
.channel-card{
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-left:3px solid var(--cn, var(--amber));
  padding:1.25rem 1.15rem 1.1rem;
  transition:border-color .25s, transform .25s;
  cursor:default;
}
.channel-card:hover{
  border-color:color-mix(in srgb, var(--cn, var(--amber)) 55%, var(--line));
  transform:translateY(-2px);
}
.channel-card .no{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--dim); }
.channel-card h4{ font-family:var(--serif); font-size:21px; margin-top:.55rem; color:var(--ink); }
.channel-card .en{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--mut); margin-top:.4rem; }
.channel-card p{ font-size:13.5px; line-height:1.75; color:var(--mut); margin-top:.75rem; }

/* ---------- 陈列区 ---------- */
.gallery-sec{ padding:6.5rem 2.4rem 7rem; background:
  linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent), transparent 30%),
  var(--bg);
}
.gal-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; max-width:1500px; margin:0 auto 0 0; }
.gal-head .sec-title{ font-size:clamp(2rem, 4vw, 3.4rem); }
.gal-head .sec-title span{ color:var(--amber); }
.chips{ display:flex; gap:.7rem; flex-wrap:wrap; padding:2.6rem 2.4rem 0; max-width:1500px; margin:0 auto; }
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--line); border-radius:999px;
  padding:.5rem .9rem; font-size:13px; color:var(--mut);
  cursor:pointer; user-select:none;
  transition:all .2s; background:transparent;
}
.chip i{ width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--cn, var(--amber)) 85%, white); display:inline-block; }
.chip b{ font-family:var(--mono); font-size:10.5px; color:var(--dim); }
.chip.active{
  background:color-mix(in srgb, var(--cn, var(--amber)) 16%, var(--bg));
  border-color:color-mix(in srgb, var(--cn, var(--amber)) 60%, transparent);
  color:var(--ink);
}
.chip.active b{ color:var(--amber); }

.grid{
  column-count:1; column-gap:20px;
  max-width:1500px; margin:5rem auto 0;
  list-style:none;
}
@media (min-width:640px){ #grid{ column-count:2; } }
@media (min-width:1040px){ #grid{ column-count:3; } }
@media (min-width:1560px){ #grid{ column-count:4; } }

.card{
  break-inside:avoid; page-break-inside:avoid;
  margin-bottom:22px;
  border:1px solid var(--line-2);
  background:var(--bg-2);
  cursor:zoom-in;
  transition:transform .3s, border-color .3s;
  opacity:0; transform:translateY(22px);
}
.card.in{ opacity:1; transform:none; transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s, opacity .5s; }
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--cn, var(--amber)) 48%, var(--line)); }
.card .shot{
  position:relative; width:100%; aspect-ratio:var(--ar, 4/3);
  overflow:hidden; background:var(--bg);
}
.card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease, filter .4s;
}
.card:hover img{ transform:scale(1.045); }
.card .no{
  position:absolute; top:.8rem; left:.9rem; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  padding:.3rem .55rem; border:1px solid var(--line-2);
}
.card .hint{
  position:absolute; left:.9rem; right:.9rem; bottom:.9rem; z-index:2;
  font-size:12px; line-height:1.6; color:#EDE9DF;
  background:linear-gradient(180deg, transparent, rgba(10,10,12,.86));
  padding:.55rem .7rem .6rem;
  opacity:0; transform:translateY(8px); transition:.3s;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card:hover .hint{ opacity:1; transform:none; }
.card figcaption{ padding:.9rem 1.05rem 1rem; }
.card figcaption h3{ font-family:var(--serif); font-size:17.5px; color:var(--ink); margin:0; line-height:1.35; }
.card figcaption .meta{
  display:flex; align-items:center; gap:.6rem; margin-top:.55rem;
  font-size:12px; color:var(--mut); letter-spacing:.05em;
}
.card figcaption .meta span:first-child{ color:var(--cn, var(--amber)); }
.card figcaption .meta span:last-child{ font-family:var(--mono); }

/* ---------- 灯箱 ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(6,6,8,.88); backdrop-filter:blur(10px);
}
.lightbox.open{ display:flex; align-items:center; justify-content:center; }
body:has(.lightbox.open){ overflow:hidden; }
.lb-card{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:2.4rem; align-items:center;
  width:min(1420px, calc(100vw - 4rem)); height:min(88vh, 1000px);
  max-height:calc(100vh - 3rem);
  padding:1.6rem 2rem;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.lb-visual{ height:100%; min-width:0; }
.lb-visual img{
  display:block; width:100%; height:100%;
  object-fit:contain; max-height:calc(100vh - 6rem);
  background:var(--bg);
}
.lb-meta{ min-width:0; align-self:stretch; display:flex; flex-direction:column; gap:1.05rem; }
.lb-top{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; }
.lb-top .lb-counter{ font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; color:var(--mut); }
.lb-meta h3{ font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.2; color:var(--ink); }
.lb-note{ font-family:var(--serif); font-size:16px; line-height:1.95; color:var(--mut); }
.lb-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.lb-tags span{
  font-size:11.5px; color:var(--dim); border:1px solid var(--line-2);
  padding:.28rem .6rem; font-family:var(--mono); letter-spacing:.1em;
}
.lb-prompt{ border:1px solid var(--line-2); background:color-mix(in srgb, var(--bg) 92%, transparent); }
.lb-prompt summary{
  font-size:13px; color:var(--ink); cursor:pointer; padding:.65rem .85rem; letter-spacing:.05em;
}
.lb-prompt summary span{ color:var(--amber); font-family:var(--mono); font-size:10.5px; }
.lb-prompt p{
  font-family:var(--mono); font-size:12.5px; line-height:1.85; color:#CFC9BC;
  padding:.85rem 1.05rem; white-space:pre-wrap;
}
.lb-close{
  position:fixed; top:1.3rem; right:1.5rem; z-index:101;
  width:42px; height:42px; border-radius:50%;
  background:rgba(237,233,223,.06); color:var(--ink);
  border:1px solid var(--line); font-size:22px; line-height:1;
  cursor:pointer;
}
.lb-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:101;
  width:46px; height:58px; background:rgba(10,10,12,.55); color:var(--amber);
  border:1px solid var(--line); font-size:20px; cursor:pointer;
  backdrop-filter:blur(6px);
}
.lb-prev{ left:1.1rem; }
.lb-next{ right:1.1rem; }
.lb-close:hover, .lb-nav:hover{
  background:color-mix(in srgb, var(--amber) 22%, var(--bg));
  color:var(--amber-2);
}
body.lb-open{ overflow:hidden; }

/* ---------- 页脚 ---------- */
.foot{
  border-top:1px solid var(--line);
  padding:7rem 2.4rem 2.6rem; text-align:center;
}
.foot-title{ font-family:var(--serif); font-weight:900; font-size:clamp(3.4rem, 9vw, 7rem); letter-spacing:.06em; }
.foot-title::after{ content:"·"; color:var(--amber); margin-left:.05em; }
.foot-quote{ font-family:var(--serif); font-size:22px; margin-top:1rem; color:var(--ink); }
.foot-note{ font-size:14.5px; color:var(--mut); line-height:1.9; margin-top:2rem; }
.foot-note .mono{ color:var(--amber); font-family:var(--mono); }
.foot-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--dim); margin-top:2rem; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; gap:2rem; padding-top:8.5rem; }
  .hero-side{ display:none; }
  .nav{ display:none; }
  .preface-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .channel-cards{ grid-template-columns:1fr; }
  .gal-head{ flex-direction:column; align-items:flex-start; }
  .lb-card{ grid-template-columns:1fr; overflow:auto; gap:1.4rem; padding:4.6rem 1.6rem; }
  .lb-visual{ max-height:52vh; }
}
@media (max-width: 580px){
  .hero-title{ font-size:clamp(3.6rem, 16vw, 6.5rem); }
  .sec-title{ font-size:2rem; }
  #grid{ column-count:1; }
  .chips{ padding-left:0; }
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
  .orb::before{ animation:none; }
  .card{ opacity:1; transform:none; }
}