/* WORK — password-gated case study archive. Extends styles.css tokens. */

.gate{position:fixed;inset:0;z-index:500;background:var(--black);display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.gate-shell{width:100%;max-width:520px;background:#050805;border:1px solid #18351d;box-shadow:0 45px 130px rgba(0,0,0,.4)}
.gate-top{height:54px;border-bottom:1px solid #18351d;display:flex;justify-content:space-between;align-items:center;padding:0 22px;color:#7c9882;font:500 9px "DM Mono",monospace;letter-spacing:.08em;background:#071008}
.gate-body{padding:42px}
.gate-body p.label{color:#6eff8a;font:500 10px "DM Mono",monospace;letter-spacing:.12em;margin:0 0 18px}
.gate-body h1{font-family:"DM Mono",monospace;font-weight:500;color:#e7f5e9;font-size:clamp(28px,4vw,40px);line-height:1.05;letter-spacing:-.03em;margin:0 0 16px}
.gate-body p.desc{color:#9ab59f;font-family:"DM Mono",monospace;font-size:14px;line-height:1.6;margin:0 0 30px}
.gate-form{display:flex;gap:10px}
.gate-form input{flex:1;border:1px solid #21482a;background:#071008;color:#d9f6df;font-family:"DM Mono",monospace;font-size:15px;padding:14px 16px;outline:0}
.gate-form input::placeholder{color:#49674e}
.gate-form input:focus{border-color:#6eff8a}
.gate-form button{background:#6eff8a;color:#031004;border:0;padding:0 22px;font:600 10px "DM Mono",monospace;letter-spacing:.06em;cursor:pointer}
.gate-error{color:var(--red);font:500 10px "DM Mono",monospace;letter-spacing:.06em;margin-top:16px;min-height:14px}
.gate-hint{margin-top:28px;padding-top:22px;border-top:1px solid #18351d;color:#49674e;font:500 9px "DM Mono",monospace;letter-spacing:.05em;line-height:1.6}
.gate.unlocked{display:none}
.nav-lock{opacity:.55}
.nav-lock::before{content:"⚿ ";}
#work-content{display:none}
#work-content.visible{display:block}

.work-hero{padding:160px var(--pad) 90px;background:var(--white);color:#080808}
.work-hero .section-label{color:#666}
.work-hero h1{font-size:clamp(52px,8vw,120px);line-height:.82;letter-spacing:-.06em;margin:26px 0 30px}
.work-hero h1 span{color:var(--red)}
.work-hero p{font-size:clamp(17px,1.8vw,24px);line-height:1.4;max-width:680px;color:#333;margin:0}
.work-meta{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap;font:500 10px "DM Mono",monospace;letter-spacing:.06em;color:#777}

.index-bar{position:sticky;top:72px;z-index:50;display:flex;overflow-x:auto;background:#0a0a0a;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.index-bar a{flex:none;padding:14px 18px;font:500 9px "DM Mono",monospace;letter-spacing:.08em;color:#777;border-right:1px solid var(--line);white-space:nowrap}
.index-bar a:hover{color:#fff}

.reel{position:relative;min-height:92vh;overflow:hidden;border-top:1px solid #1a1a1a;display:flex;flex-direction:column;justify-content:flex-end}
.reel picture,.reel>img,.reel>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.55}
.reel-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.1) 100%)}
.reel-head{position:relative;z-index:2;padding:40px var(--pad) 46px}
.reel-num{display:block;color:#fff;opacity:.8;font:600 9px "DM Mono",monospace;letter-spacing:.14em;margin-bottom:16px}
.reel-title{color:#fff;font-size:clamp(38px,6vw,96px);font-weight:800;letter-spacing:-.045em;line-height:.9;margin:0}
.reel-sub{color:rgba(255,255,255,.7);font-size:clamp(15px,1.5vw,20px);line-height:1.4;max-width:52ch;margin:16px 0 0}
.reel-stat{margin-top:20px}
.reel-stat b{color:var(--red);font-size:26px;font-weight:800;margin-right:8px}
.reel-stat span{color:rgba(255,255,255,.55);font:500 9px "DM Mono",monospace;letter-spacing:.06em}
.reel-toggle{margin-top:28px;display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:13px 20px;font:600 10px "DM Mono",monospace;letter-spacing:.08em;cursor:pointer}
.reel-toggle:hover{border-color:#fff}
.reel-toggle .icon{transition:transform .3s}
.reel[data-open="true"] .reel-toggle .icon{transform:rotate(45deg)}

.reel-panel{position:relative;z-index:3;max-height:0;overflow:hidden;transition:max-height .5s var(--ease);background:rgba(4,4,4,.88);backdrop-filter:blur(6px)}
.reel[data-open="true"] .reel-panel{max-height:900px}
.reel-panel-inner{padding:10px var(--pad) 54px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.reel-block b{display:block;font:600 9px "DM Mono",monospace;letter-spacing:.12em;color:#6eff8a;margin-bottom:10px}
.reel-block p{margin:0;color:#d4d4d4;line-height:1.6;font-size:14px}
.reel-quote{grid-column:1/-1;border-left:2px solid var(--red);padding-left:16px;color:#eee;font-size:14px;line-height:1.55;font-style:italic;margin:6px 0 0}
.reel-quote cite{display:block;margin-top:6px;font:500 9px "DM Mono",monospace;color:#888;font-style:normal}
@media(max-width:900px){.reel-panel-inner{grid-template-columns:1fr;gap:20px}.reel-head{padding:30px 20px 34px}}

.category-divider{background:#0a0a0a;border-top:1px solid var(--line);padding:36px var(--pad) 20px;display:flex;align-items:baseline;gap:18px}
.category-divider .cat-num{color:#444;font:600 10px "DM Mono",monospace;letter-spacing:.1em}
.category-divider h3{color:#eee;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.03em;margin:0}
.category-divider p{color:#666;font:500 10px "DM Mono",monospace;letter-spacing:.04em;margin:0 0 0 auto}

.reel.no-asset{background:#101010}
.reel.no-asset .reel-tint,.reel.no-asset .reel-scrim{display:none}
.reel-pending{position:absolute;top:24px;right:var(--pad);z-index:2;color:#665;font:500 8px "DM Mono",monospace;letter-spacing:.08em;border:1px solid #333;padding:8px 12px}

.overview-reel{background:var(--white);padding:0 var(--pad) 70px}
.overview-reel video{width:100%;max-height:80vh;display:block;background:#000;border:1px solid #1a1a1a}
.overview-note{background:#0a0a0a;border:1px solid var(--line);padding:22px 26px;margin-bottom:26px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.overview-note .tag{color:var(--red);font:600 9px "DM Mono",monospace;letter-spacing:.1em;margin:0}
.overview-note .txt{color:#bbb;font-size:13.5px;line-height:1.6;margin:0}