/* ============================================================
   Drust Marketing Website — lore.css
   Page-specific styles for lore.html (World Archive).
   Uses design tokens defined in main.css :root.
   ============================================================ */

.lore-main{padding-top:70px}

.lore-hero{padding:clamp(70px,10vw,120px) 0 clamp(50px,7vw,80px);background:radial-gradient(circle at 85% 20%,rgba(86,217,245,.08),transparent 45%),#0a0e16;border-bottom:1px solid var(--line)}
.lore-crumb{font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lore-crumb a{color:var(--cyan)}
.lore-crumb a:hover{text-decoration:underline}
.lore-hero h1{margin-top:20px;font:600 clamp(2.4rem,6vw,4.6rem)/1.05 var(--display);letter-spacing:-.03em}
.lore-hero h1 em{font-style:normal;color:var(--amber)}
.lore-hero p{max-width:640px;margin-top:20px;color:var(--muted);font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.8}

/* ── Path toggle ───────────────────────────────────────── */
.path-toggle{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.path-toggle__btn{min-height:56px;padding:0 26px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font:600 .8rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.path-toggle__btn span{font:400 .68rem var(--body);letter-spacing:0;text-transform:none;color:var(--dim)}
.path-toggle__btn:hover{border-color:#3b5269;color:var(--white)}
.path-toggle__btn.is-active[data-path-btn="human"]{border-color:var(--amber);color:var(--amber);box-shadow:0 0 26px rgba(255,184,79,.12)}
.path-toggle__btn.is-active[data-path-btn="elf"]{border-color:#6ee787;color:#6ee787;box-shadow:0 0 26px rgba(110,231,135,.12)}

/* ── Zones ─────────────────────────────────────────────── */
.lore-zones{padding:clamp(70px,9vw,110px) 0}
[data-path-section]{display:none}
[data-path-section].is-active{display:block}
.zone-list{display:flex;flex-direction:column;gap:26px}
.zone-card{display:grid;grid-template-columns:280px 1fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.zone-card--noimg{grid-template-columns:1fr}
.zone-card__image{position:relative;min-height:260px;background:#06080d;overflow:hidden}
.zone-card__image img{height:100%;object-fit:cover}
.zone-card__imgcap{position:absolute;left:14px;bottom:14px;font:600 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--white);background:rgba(8,11,18,.72);padding:6px 10px;border-radius:4px}
.zone-card__body{padding:30px 34px}
.zone-badge{display:inline-flex;gap:10px;align-items:center;font:600 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:4px;border:1px solid currentColor}
.zone-card__level{color:var(--dim);font:600 .68rem var(--mono);letter-spacing:.08em}
.zone-card__body h3{margin-top:14px;font:600 clamp(1.35rem,2.6vw,1.9rem)/1.2 var(--display)}
.zone-card__tone{margin-top:6px;color:var(--dim);font-size:.82rem;font-style:italic}
.zone-card__body p.zone-card__text{margin-top:16px;color:var(--muted);line-height:1.8}
.zone-card__learns{margin-top:18px;padding-left:18px;color:var(--muted);font-size:.9rem;line-height:1.75}
.zone-card__npcs{margin-top:18px;font:500 .78rem var(--mono);color:var(--dim)}
.zone-card__npcs strong{color:var(--white);font-weight:600}
.zone-card__question{margin-top:18px;padding:14px 16px;border-left:2px solid var(--cyan);background:rgba(86,217,245,.05);color:var(--white);font-style:italic;font-size:.94rem}

@media(max-width:820px){.zone-card{grid-template-columns:1fr}.zone-card__image{min-height:220px}}

/* ── Evidence archive ──────────────────────────────────── */
.lore-evidence{padding:clamp(60px,8vw,100px) 0;background:#090d14;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clearance-meter{max-width:420px;margin-top:26px}
.clearance-meter__label{display:flex;justify-content:space-between;font:600 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.clearance-meter__label b{color:var(--cyan)}
.clearance-bar{margin-top:8px;height:6px;border-radius:3px;background:var(--raised);overflow:hidden}
.clearance-bar__fill{height:100%;background:var(--cyan);border-radius:3px;transition:width .4s var(--ease);width:0}
.evidence-grid{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.doc-card{text-align:left;padding:20px;border-radius:10px;background:var(--paper);border:1px solid var(--line);cursor:pointer;transition:.25s var(--ease)}
.doc-card:hover{border-color:#3b5269;transform:translateY(-3px)}
.doc-card__tag{display:block;font:600 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.doc-card__title{display:block;margin-top:10px;font:600 1rem/1.3 var(--display)}
.doc-card__state{display:block;margin-top:14px;font:600 .62rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.doc-card.is-examined .doc-card__state{color:#6ee787}
.doc-card.is-examined{border-color:rgba(110,231,135,.4)}

/* ── Vault (spoiler-gated shared path) ─────────────────── */
.lore-vault{position:relative;padding:clamp(70px,9vw,110px) 0}
.vault-content{display:none}
.lore-vault.is-unlocked .vault-content{display:block}
.lore-vault.is-unlocked .vault-lock{display:none}
.vault-lock{max-width:560px;margin:0 auto;text-align:center;padding:50px 34px;border:1px dashed var(--line);border-radius:14px;background:var(--paper)}
.vault-lock h3{font:600 1.6rem var(--display)}
.vault-lock p{margin-top:14px;color:var(--muted);line-height:1.75}
.vault-lock .clearance-meter{margin:26px auto 0}
.vault-actions{margin-top:28px;display:flex;flex-direction:column;gap:12px;align-items:center}
.vault-actions .btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.vault-bypass{background:transparent;border:0;color:var(--dim);font:500 .72rem var(--mono);text-decoration:underline;cursor:pointer}
.vault-bypass:hover{color:var(--white)}

/* ── Doc modal ─────────────────────────────────────────── */
.doc-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(6,8,13,.82);backdrop-filter:blur(6px)}
.doc-modal.is-open{display:flex}
.doc-modal__panel{max-width:520px;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:34px;position:relative}
.doc-modal__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--raised);color:var(--muted);font-size:1.1rem}
.doc-modal__close:hover{color:var(--white)}
.doc-modal__tag{display:block;font:600 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.doc-modal__title{margin-top:10px;font:600 1.5rem var(--display)}
.doc-modal__excerpt{margin-top:18px;color:var(--white);line-height:1.85;font-style:italic}
.doc-modal__proves{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;line-height:1.75}
.doc-modal__proves strong{color:var(--cyan);font-weight:600;text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;display:block;margin-bottom:6px}

@media(max-width:640px){.lore-evidence,.lore-zones,.lore-vault{padding-top:60px;padding-bottom:60px}.evidence-grid{grid-template-columns:1fr 1fr}}