/* ═══ FOLIO · SHARED STYLES ═══ */
html {
  font-size: 20px;
}
@font-face {
  font-family: 'ZhCN';
  src: local('Noto Serif SC'), local('Source Han Serif SC'),
       local('Hiragino Mincho ProN'), local('STSong'), local('SimSun'), serif;
  font-weight: 500;
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF,
                 U+2E80-2EFF, U+3000-303F;
}
:root {
  --ink:   #08080c;
  --ash:   #13131c;
  --fog:   #252535;
  --bone:  #c8c4b8;
  --pale:  #ece8e0;
  --gold:  #b8956a;
  --gold2: #d4a96a;
  --ghost: #6a6a8a;
  --signal:#e84c4c;
  --ice:   #7a7a9a;
  --e1: cubic-bezier(0.16,1,0.3,1);
  --e2: cubic-bezier(0.34,1.56,0.64,1);
  --e3: cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { background:var(--ink); color:var(--bone); font-family:'Cormorant Garamond','ZhCN',serif; font-weight:500; cursor:none; overflow-x:hidden; min-height:100vh; }
@media(max-width:768px){ body{ cursor:auto; } }

/* GRAIN */
#grain { position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift .5s steps(1) infinite; }
@keyframes grainshift{0%{transform:translate(0,0)}20%{transform:translate(-2%,-1%)}40%{transform:translate(2%,1%)}60%{transform:translate(-1%,2%)}80%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}
#vignette { position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 90% 80% at 50% 50%,transparent 48%,rgba(8,8,12,.6) 100%); }
#progress-bar { position:fixed;top:0;left:0;height:1px;background:linear-gradient(90deg,var(--gold),#7a7a9a);width:0%;z-index:101;transition:width .1s linear;box-shadow:0 0 8px var(--gold); }

/* CURSOR */
#cursor { position:fixed;top:0;left:0;z-index:9999;pointer-events:none; }
#cur-dot { width:5px;height:5px;background:var(--pale);border-radius:50%;position:absolute;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:background .3s; }
#cur-ring { width:38px;height:38px;position:absolute;transform:translate(-50%,-50%);border:1px solid rgba(184,149,106,.45);border-radius:50%;transition:width .15s var(--e3),height .15s var(--e3),border-color .3s; }
body.cursor-click #cur-ring { transform:translate(-50%,-50%) scale(.65);opacity:.4 }
body.cursor-click #cur-dot  { transform:translate(-50%,-50%) scale(2.5);background:var(--gold) }
body.cursor-link  #cur-ring { width:50px;height:50px;border-color:var(--gold) }
body.cursor-view  #cur-ring { width:72px;height:72px;border-color:rgba(184,149,106,.8) }
body.cursor-view  #cur-dot  { opacity:0 }
@media(max-width:768px){ #cursor{ display:none; } }

/* CANVAS */
#canvas-bg { position:fixed;inset:0;z-index:0;opacity:.22;pointer-events:none; }

/* NAV */
nav {
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:2.2rem 4rem;
  transition:padding .5s var(--e1),background .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
nav.scrolled {
  padding:1.1rem 4rem;
  background:rgba(8,8,12,.35);
  border-color:rgba(37,37,53,.3);
  backdrop-filter:blur(20px);
}
.nav-logo {
  font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.18em;
  color:var(--pale);text-decoration:none;cursor:pointer;
  transition:letter-spacing .5s var(--e1);position:relative;
  justify-self:start;
}
.nav-logo::after {
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e1);
}
.nav-logo:hover { letter-spacing:.28em; }
.nav-logo:hover::after { transform:scaleX(1); }
.nav-links {
  display:flex;gap:2.5rem;list-style:none;
  justify-self:center;
}
.nav-links a, .nav-btn {
  font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.22em;
  color:var(--ghost);text-decoration:none;text-transform:uppercase;
  transition:color .3s;position:relative;padding-bottom:5px;
  display:inline-block;background:none;border:none;cursor:pointer;
}
.nav-links a::after, .nav-btn::after {
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:1px;background:var(--bone);transition:width .4s var(--e1);
}
.nav-links a:hover, .nav-btn:hover, .nav-links a.active { color:var(--pale); }
.nav-links a:hover::after, .nav-btn:hover::after, .nav-links a.active::after { width:100%; }
.nav-right {
  display:flex;align-items:center;gap:1.5rem;
  justify-self:end;
}
.nav-cta {
  font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.2em;
  color:var(--gold);border:1px solid rgba(184,149,106,.35);
  padding:.5rem 1.2rem;text-decoration:none;
  transition:all .3s var(--e1);cursor:pointer;background:none;
}
.nav-cta:hover { background:rgba(184,149,106,.12);border-color:var(--gold);color:var(--pale); }
.nav-user-badge {
  font-family:'Space Mono',monospace;font-size:.5rem;letter-spacing:.2em;
  color:var(--gold);border:1px solid rgba(184,149,106,.3);padding:.4rem .9rem;
}
@media(max-width:768px) {
  nav { display:flex;flex-wrap:wrap;gap:.8rem;padding:1.2rem 1.5rem; }
  .nav-logo { order:1; }
  .nav-right { order:2;margin-left:auto; }
  .nav-links { order:3;width:100%;justify-content:center;gap:1rem; }
}

/* FOOTER */
footer { border-top:1px solid var(--fog);padding:2.5rem 4rem;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden; }
footer::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,149,106,.3),var(--gold),rgba(184,149,106,.3),transparent); }
.ft-logo { font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:.2em;color:transparent;-webkit-text-stroke:1px var(--fog);transition:color .4s,-webkit-text-stroke-color .4s,letter-spacing .5s;cursor:pointer; }
.ft-logo:hover { color:var(--pale);-webkit-text-stroke-color:var(--pale);letter-spacing:.3em; }
.ft-mono { font-family:'Space Mono',monospace;font-size:.52rem;letter-spacing:.22em;color:var(--ghost);text-transform:uppercase;line-height:2; }
@media(max-width:768px){ footer{padding:1.5rem;flex-direction:column;gap:1.2rem;align-items:flex-start} }

/* FORM ELEMENTS */
.field { display:flex;flex-direction:column;gap:.6rem; }
.field label { font-family:'Space Mono',monospace;font-size:.5rem;letter-spacing:.3em;color:var(--ghost);text-transform:uppercase; }
.field input,.field textarea,.field select { background:var(--ash);border:1px solid rgba(37,37,53,.8);color:var(--pale);font-family:'Cormorant Garamond','ZhCN',serif;font-weight:500;font-size:1rem;padding:.9rem 1.2rem;outline:none;transition:border-color .3s,background .3s;width:100%; }
.field input:focus,.field textarea:focus { border-color:rgba(184,149,106,.5);background:rgba(19,19,28,.8); }
.field input::placeholder,.field textarea::placeholder { color:var(--ghost);opacity:.5; }
.field-hint { font-family:'Space Mono',monospace;font-size:.45rem;letter-spacing:.15em;color:var(--ghost);margin-top:.3rem;line-height:1.7; }
.field textarea { resize:vertical;min-height:80px; }

/* BUTTONS */
.btn-primary { font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);background:var(--gold);border:none;padding:.9rem 2.2rem;cursor:pointer;transition:all .4s var(--e1);position:relative;overflow:hidden;display:inline-block; }
.btn-primary::before { content:'';position:absolute;inset:0;background:var(--pale);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e1); }
.btn-primary:hover::before { transform:scaleX(1); }
.btn-primary span,.btn-primary > * { position:relative;z-index:1; }
.btn-ghost { font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ghost);background:none;border:1px solid rgba(200,196,184,.18);padding:.9rem 2rem;cursor:pointer;transition:all .4s var(--e1);display:inline-block; }
.btn-ghost:hover { color:var(--pale);border-color:rgba(200,196,184,.5); }
.btn-danger { font-family:'Space Mono',monospace;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--signal);background:none;border:1px solid rgba(232,76,76,.3);padding:.7rem 1.4rem;cursor:pointer;transition:all .3s; }
.btn-danger:hover { background:rgba(232,76,76,.08); }

/* TOAST */
.toast { position:fixed;bottom:2rem;right:2rem;z-index:9990;font-family:'Space Mono',monospace;font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;padding:.9rem 1.5rem;background:var(--ash);border:1px solid rgba(184,149,106,.35);color:var(--gold);transform:translateY(20px);opacity:0;transition:all .4s var(--e1);pointer-events:none;backdrop-filter:blur(10px); }
.toast.show { transform:translateY(0);opacity:1; }
.toast.err  { border-color:rgba(232,76,76,.35);color:var(--signal); }

/* MSG BOX */
.msg { font-family:'Space Mono',monospace;font-size:.5rem;letter-spacing:.15em;padding:.8rem 1rem;border:1px solid;display:none; }
.msg.ok  { color:#6ad4a8;border-color:rgba(106,212,168,.3);background:rgba(106,212,168,.05); }
.msg.err { color:var(--signal);border-color:rgba(232,76,76,.3);background:rgba(232,76,76,.05); }
.msg.show { display:block; }

/* MARQUEE */
.marquee-wrap { overflow:hidden;padding:.85rem 0;position:relative; }
.marquee-wrap::before,.marquee-wrap::after { content:'';position:absolute;left:0;right:0;height:1px; }
.marquee-wrap::before { top:0;background:linear-gradient(90deg,transparent,var(--fog),rgba(184,149,106,.4),var(--fog),transparent); }
.marquee-wrap::after  { bottom:0;background:linear-gradient(90deg,transparent,var(--fog),transparent); }
.mq-fade-l { position:absolute;top:0;bottom:0;left:0;width:120px;background:linear-gradient(90deg,var(--ink),transparent);z-index:2;pointer-events:none; }
.mq-fade-r { position:absolute;top:0;bottom:0;right:0;width:120px;background:linear-gradient(-90deg,var(--ink),transparent);z-index:2;pointer-events:none; }
.marquee-track { display:flex;gap:3.5rem;width:max-content;animation:marq 22s linear infinite;font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ghost); }
.mi { white-space:nowrap;display:flex;align-items:center;gap:1.8rem; }
.mi-dot { color:var(--gold);font-size:.35rem; }
@keyframes marq{ to{transform:translateX(-50%)} }

/* MASONRY CARDS */
.masonry-wrap { padding:0 4rem 8rem;column-count:3;column-gap:1.2rem; }
@media(max-width:1100px){ .masonry-wrap{column-count:2} }
@media(max-width:600px)  { .masonry-wrap{column-count:1;padding:0 1.2rem 4rem} }

.card { break-inside:avoid;margin-bottom:1.2rem;position:relative;overflow:hidden;cursor:pointer;background:var(--ash);opacity:0;transform:translateY(40px) scale(.96);transition:opacity .7s var(--e1),transform .7s var(--e1),box-shadow .5s,border-color .4s;border:1px solid transparent;transform-style:preserve-3d; }
.card.visible { opacity:1;transform:translateY(0) scale(1); }
.card:hover   { border-color:rgba(184,149,106,.22);box-shadow:0 32px 80px rgba(0,0,0,.72);z-index:10; }
.card::before { content:'';position:absolute;inset:-2px;z-index:-1;background:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),rgba(184,149,106,.18),transparent 70%);opacity:0;transition:opacity .4s; }
.card:hover::before { opacity:1; }
.card-img { width:100%;position:relative;overflow:hidden; }
.card-img-inner { width:100%;display:block;transition:transform 1.1s var(--e1),filter .6s;filter:saturate(.75) brightness(.88); }
.card:hover .card-img-inner { transform:scale(1.08);filter:saturate(1.15) brightness(1.08); }
.card-shimmer { position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.05) 50%,transparent 65%);transform:translateX(-120%) skewX(-15deg); }
.card:hover .card-shimmer { transform:translateX(120%) skewX(-15deg);transition:transform .8s var(--e3); }
.card-overlay { position:absolute;inset:0;z-index:4;background:linear-gradient(to top,rgba(8,8,12,.96) 0%,rgba(8,8,12,.22) 50%,transparent 100%);opacity:0;transition:opacity .4s; }
.card:hover .card-overlay { opacity:1; }
.card-info { position:absolute;bottom:0;left:0;right:0;z-index:5;padding:2.2rem 1.6rem 1.6rem;transform:translateY(14px);opacity:0;transition:transform .5s var(--e1),opacity .4s; }
.card:hover .card-info { transform:translateY(0);opacity:1; }
.card-cat { font-family:'Space Mono',monospace;font-size:.5rem;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;margin-bottom:.6rem;display:flex;align-items:center;gap:.7rem; }
.card-cat-line { display:block;width:0;height:1px;background:var(--gold);transition:width .5s var(--e1) .1s; }
.card:hover .card-cat-line { width:20px; }
.card-title { font-family:'Bebas Neue',sans-serif;font-size:1.55rem;letter-spacing:.06em;color:var(--pale);line-height:1.05;margin-bottom:.4rem; }
.card-sub   { font-style:italic;font-size:.76rem;color:var(--ghost);line-height:1.6;font-weight:500; }
.card-year  { position:absolute;top:.9rem;right:.9rem;z-index:5;font-family:'Space Mono',monospace;font-size:.45rem;letter-spacing:.12em;color:rgba(200,196,184,.6);background:rgba(8,8,12,.42);border:1px solid rgba(255,255,255,.06);padding:.28rem .65rem;backdrop-filter:blur(10px);opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s; }
.card:hover .card-year { opacity:1;transform:translateY(0); }
.c-tl,.c-br { position:absolute;z-index:5;width:18px;height:18px;opacity:0;transition:opacity .35s,transform .45s var(--e2); }
.c-tl { top:.8rem;left:.8rem;border-top:1px solid var(--gold);border-left:1px solid var(--gold);transform:scale(.4) translate(-6px,-6px); }
.c-br { bottom:1rem;right:.8rem;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);transform:scale(.4) translate(6px,6px); }
.card:hover .c-tl { opacity:1;transform:scale(1) translate(0,0); }
.card:hover .c-br { opacity:1;transform:scale(1) translate(0,0); }
.card-line { position:absolute;bottom:0;left:0;right:0;height:2px;z-index:5;background:linear-gradient(90deg,var(--gold),#7a7a9a,var(--gold));background-size:200%;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e1); }
.card:hover .card-line { transform:scaleX(1); }

/* LIGHTBOX */
#lightbox { position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;background:rgba(6,6,10,.97);backdrop-filter:blur(20px); }
#lightbox::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(184,149,106,.05) 0%,transparent 65%);pointer-events:none; }
#lightbox.open { opacity:1;visibility:visible; }
.lb-inner { position:relative;max-width:min(980px,90vw);width:100%;transform:scale(.88) translateY(40px);transition:transform .6s var(--e1);z-index:1; }
#lightbox.open .lb-inner { transform:none; }
.lb-img { width:100%;height:auto;max-height:72vh;object-fit:contain;display:block;box-shadow:0 60px 120px rgba(0,0,0,.9); }
.lb-caption { padding:1.6rem 0 1rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--fog);margin-top:1.2rem;position:relative; }
.lb-caption::before { content:'';position:absolute;top:0;left:0;width:40px;height:1px;background:var(--gold); }
.lb-title { font-family:'Bebas Neue',sans-serif;font-size:clamp(1.8rem,4vw,3.5rem);letter-spacing:.05em;color:var(--pale);line-height:1; }
.lb-meta  { font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.18em;color:var(--ghost);text-align:right;line-height:2.2; }
.lb-close { position:absolute;top:-1.8rem;right:-1.8rem;width:46px;height:46px;background:var(--ash);border:1px solid var(--fog);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .45s var(--e2);overflow:hidden; }
.lb-close::before { content:'';position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:bottom;transition:transform .3s; }
.lb-close:hover { transform:rotate(90deg); } .lb-close:hover::before { transform:scaleY(1); }
.lb-close svg { width:14px;height:14px;stroke:var(--pale);stroke-width:1.5;fill:none;position:relative;z-index:1; }
.lb-nav { position:absolute;top:50%;transform:translateY(-55%);background:rgba(8,8,12,.4);border:1px solid var(--fog);width:52px;height:52px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;backdrop-filter:blur(10px);color:var(--bone);font-family:'Bebas Neue',sans-serif;font-size:1.3rem;overflow:hidden; }
.lb-nav::before { content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transition:transform .3s; }
#lb-prev::before { transform-origin:right; } #lb-next::before { transform-origin:left; }
.lb-nav:hover { color:var(--ink);border-color:var(--gold); } .lb-nav:hover::before { transform:scaleX(1); }
.lb-nav span { position:relative;z-index:1; }
#lb-prev { left:-68px; } #lb-next { right:-68px; }
.lb-progress { position:absolute;bottom:-1.6rem;left:0;right:0;height:1px;background:var(--fog); }
.lb-progress-fill { height:100%;background:var(--gold);transition:width .35s;box-shadow:0 0 6px var(--gold); }
@media(max-width:700px){ #lb-prev{left:.5rem;top:auto;bottom:8rem;transform:none} #lb-next{right:.5rem;top:auto;bottom:8rem;transform:none} }

/* EMPTY STATE */
.empty-state { padding:5rem 2rem;text-align:center;border:1px dashed rgba(37,37,53,.8); }
.empty-icon  { font-family:'Bebas Neue',sans-serif;font-size:4rem;color:rgba(184,149,106,.15);display:block;margin-bottom:1rem; }
.empty-text  { font-style:italic;color:var(--ghost);font-size:.9rem;line-height:1.8;font-weight:500; }

/* RIPPLE */
.ripple { position:fixed;pointer-events:none;z-index:9000;border-radius:50%;border:1px solid rgba(184,149,106,.35);animation:rip 1s var(--e1) forwards; }
@keyframes rip{ from{transform:scale(0);opacity:.9} to{transform:scale(10);opacity:0} }

/* SECTION EYE */
.section-eye { display:flex;align-items:center;gap:1rem;margin-bottom:3rem; }
.section-eye-line { display:block;width:32px;height:1px;background:var(--gold); }
.section-eye-text { font-family:'Space Mono',monospace;font-size:.52rem;letter-spacing:.35em;color:var(--ghost);text-transform:uppercase; }

/* MODAL */
.modal-overlay { position:fixed;inset:0;z-index:8000;background:rgba(6,6,10,.92);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s; }
.modal-overlay.open { opacity:1;visibility:visible; }
.modal-box { background:var(--ash);border:1px solid rgba(37,37,53,.8);padding:2.5rem;width:100%;max-width:460px;position:relative;transform:translateY(30px) scale(.96);transition:transform .5s var(--e1); }
.modal-overlay.open .modal-box { transform:none; }
.modal-box::before { content:'';position:absolute;top:-1px;left:-1px;width:18px;height:18px;border-top:1px solid var(--gold);border-left:1px solid var(--gold); }
.modal-box::after  { content:'';position:absolute;bottom:-1px;right:-1px;width:18px;height:18px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold); }
.modal-title  { font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.08em;color:var(--pale);margin-bottom:2rem; }
.modal-close  { position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:none;border:1px solid var(--fog);color:var(--ghost);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s; }
.modal-close:hover { color:var(--pale);border-color:var(--pale); }
.modal-form   { display:flex;flex-direction:column;gap:1.4rem; }
.modal-actions { display:flex;gap:1rem;margin-top:2rem;justify-content:flex-end; }
.modal-btn    { font-family:'Space Mono',monospace;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;padding:.7rem 1.4rem;cursor:pointer;transition:all .3s;background:none; }
.modal-btn.cancel  { border:1px solid var(--fog);color:var(--ghost); } .modal-btn.cancel:hover  { color:var(--pale);border-color:var(--pale); }
.modal-btn.confirm { border:1px solid rgba(184,149,106,.4);color:var(--gold); } .modal-btn.confirm:hover { background:rgba(184,149,106,.12); }