/* ══ 文明阁 · 影像之路 共享样式 ══ */
:root{
  --stone:#09080d; --line:#2a2732;
  --ink:#e8e0d4; --ink-dim:#d8d0be; --dim:#9a8b72; --faint:#6b5d4a;
  --brass:#C0904C; --brass-dim:#b8975a; --teal:#6FA9A6; --violet:#a99bd6; --ember:#e8a45c;
  --acc:#C0904C;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --lat:   "Cormorant Garamond", Georgia, serif;
  --uif:1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:#000}
body{background:var(--stone);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}

#film{position:fixed;inset:0;z-index:1;overflow:hidden;background:#000}
.slide{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:0;
  will-change:transform,opacity,filter}
#fx{position:fixed;inset:0;z-index:2;display:block;pointer-events:none}

.bar{position:fixed;left:0;right:0;height:44px;background:#000;z-index:8}
.bar.top{top:0}.bar.bot{bottom:0}
#vig{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 46%,transparent 55%,rgba(0,0,0,.55) 100%)}
#grain{position:fixed;inset:-100px;z-index:9;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:gr .42s steps(4) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-38px,22px)}50%{transform:translate(24px,-30px)}75%{transform:translate(-16px,-14px)}100%{transform:translate(0,0)}}

#loader{position:fixed;inset:0;z-index:20;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transition:opacity 1.1s ease}
#loader.off{opacity:0;pointer-events:none}
#loader .lt{font-size:13px;letter-spacing:.55em;color:var(--dim);text-indent:.55em}
#loader .lk{font-family:var(--lat);font-size:9.5px;letter-spacing:.5em;color:var(--faint);text-transform:uppercase}
#lbar{width:180px;height:1px;background:rgba(232,224,212,.12);position:relative;overflow:hidden}
#lfill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--acc);transition:width .3s}

.masthead{position:fixed;left:4.5vw;top:calc(6.5vh + 44px);z-index:6;user-select:none}
.masthead .kicker{font-family:var(--lat);font-size:10px;letter-spacing:.5em;color:var(--faint);text-transform:uppercase}
.masthead h1{font-size:clamp(22px,2.2vw,32px);font-weight:600;letter-spacing:.1em;margin:.4em 0 .25em;
  text-shadow:0 2px 18px rgba(0,0,0,.9)}
.masthead .sub{font-family:var(--lat);font-style:italic;font-size:13px;letter-spacing:.22em;color:var(--dim);opacity:.85}
.masthead a.back{display:inline-block;margin-top:1.2em;font-size:11.5px;letter-spacing:.22em;color:var(--dim);
  text-decoration:none;border-bottom:1px solid transparent;transition:.25s}
.masthead a.back:hover{color:var(--ink);border-color:var(--brass-dim)}

.ladder{position:fixed;left:4.5vw;top:50%;transform:translateY(-50%);z-index:5;user-select:none;pointer-events:none;
  opacity:var(--uif);transition:opacity .5s}
.ladder div{font-size:10.5px;letter-spacing:.24em;color:var(--faint);padding:.3em 0;transition:.3s;opacity:.5;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}
.ladder div i{font-family:var(--lat);font-style:normal;font-size:8.5px;margin-right:.9em}
.ladder div.on{color:var(--acc);opacity:1}

.card{position:fixed;right:6vw;top:50%;width:min(400px,80vw);z-index:5;
  transform:translateY(-50%);pointer-events:none;user-select:none;
  background:rgba(9,8,13,.34);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-left:1px solid var(--acc);padding:26px 30px}
.card .cno{font-family:var(--lat);font-size:10px;letter-spacing:.45em;color:var(--brass-dim);text-transform:uppercase;margin-bottom:1.1em}
.card h2{font-size:clamp(19px,1.8vw,25px);font-weight:600;letter-spacing:.04em;line-height:1.6;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.card p{margin-top:1.1em;font-size:13.5px;line-height:2.05;letter-spacing:.04em;color:var(--ink-dim);opacity:.92;
  text-shadow:0 1px 10px rgba(0,0,0,.8)}

.veil{position:fixed;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;transition:opacity .8s ease}
.veil .in p{font-size:15px;letter-spacing:.14em;line-height:2.4;color:var(--ink);
  text-shadow:0 2px 20px rgba(0,0,0,.95)}
.veil .in .s{font-family:var(--lat);font-size:10px;letter-spacing:.5em;color:var(--faint);text-transform:uppercase;margin-top:2.2em}
.veil .in a{pointer-events:auto;display:inline-block;margin:1.6em 12px 0;font-size:12px;letter-spacing:.22em;
  color:var(--dim);text-decoration:none;border-bottom:1px solid rgba(192,144,76,.4);padding-bottom:3px;transition:.3s}
.veil .in a:hover{color:var(--ink)}
#outro{opacity:0}

.hint{position:fixed;right:6vw;bottom:calc(7vh + 44px);z-index:6;font-family:var(--lat);font-size:9.5px;
  letter-spacing:.34em;color:var(--faint);text-transform:uppercase;pointer-events:none;transition:opacity .6s;
  opacity:var(--uif)}

@media (max-width:760px){
  .ladder{display:none}
  .masthead .sub{display:none}
  .card{right:6vw;left:6vw;width:auto;top:auto;bottom:calc(14vh + 44px);transform:none;padding:18px 20px}
  .card p{line-height:1.9}
  .bar{height:0}
  .masthead{top:5vh}
  .hint{bottom:5vh}
}