*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:#0A0A0A;color:#F5F5F5;font-family:'DM Sans','Inter',-apple-system,sans-serif;font-variant-ligatures:none}
::selection{background:rgba(139,115,85,0.4);color:#F5F5F5}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:#0A0A0A}
::-webkit-scrollbar-thumb{background:rgba(139,115,85,0.3);border-radius:2px}

/* Loader */
#loader{position:fixed;inset:0;background:#0A0A0A;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .8s cubic-bezier(.22,1,.36,1)}
#loader.done{opacity:0;pointer-events:none}
#loader-text{font-family:'DM Sans','Inter',sans-serif;font-size:14px;letter-spacing:8px;text-transform:uppercase;color:rgba(139,115,85,0.5);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:0.7}}

/* Nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:28px 40px;position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,10,0.88);backdrop-filter:blur(24px);border-bottom:1px solid rgba(245,245,245,0.05)}
.nav-brand{font-family:'DM Sans','Inter',sans-serif;font-weight:300;font-size:22px;letter-spacing:8px;text-transform:uppercase;color:#F5F5F5;text-decoration:none}
.nav-brand .slash{color:#8B7355;margin:0 2px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:rgba(245,245,245,0.4);text-decoration:none;font-size:9px;letter-spacing:3px;text-transform:uppercase;font-weight:400;transition:color .3s ease}
.nav-links a:hover{color:#F5F5F5}
.genre-filter{appearance:none;background:transparent;border:1px solid rgba(245,245,245,0.1);color:rgba(245,245,245,0.4);padding:6px 28px 6px 12px;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:'DM Sans','Inter',sans-serif;cursor:pointer;border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(245,245,245,0.3)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.genre-filter:hover{border-color:rgba(245,245,245,0.25);color:#F5F5F5}

/* Split layout */
.layout{display:flex;min-height:100vh;margin-top:80px}
.image-panel{position:sticky;top:80px;width:58%;height:calc(100vh - 80px);overflow:hidden;background:#0A0A0A;z-index:1}
.scroll-panel{width:42%;padding:0;position:relative;z-index:2}

/* Image crossfade */
.panel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1);filter:brightness(0.55) saturate(0.8)}
.panel-img.active{opacity:1}
.panel-img.exiting{opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1)}

/* Post sections */
.post-section{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:60px 48px 80px;border-bottom:1px solid rgba(245,245,245,0.04);position:relative}
.post-section:first-child{padding-top:0}
.post-section:last-child{border-bottom:none}
.post-section .post-link{display:block;text-decoration:none;color:inherit;position:relative;z-index:2}

/* Post text */
.post-number{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:#8B7355;margin-bottom:16px;font-weight:500}
.post-genre{display:inline-block;font-size:8px;letter-spacing:2.5px;text-transform:uppercase;color:#8B7355;border:1px solid rgba(139,115,85,0.4);padding:3px 8px;margin-bottom:20px;font-weight:500}
.post-title{font-family:'DM Sans','Inter',sans-serif;font-size:32px;font-weight:400;line-height:1.2;color:#F5F5F5;margin-bottom:12px;letter-spacing:-0.02em}
.post-desc{font-family:'DM Sans','Inter',sans-serif;font-size:14px;line-height:1.7;color:rgba(245,245,245,0.5);margin-bottom:16px;font-weight:300;max-width:420px}
.post-source{font-family:'DM Sans','Inter',sans-serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(245,245,245,0.2);transition:color .3s ease}
.post-section:hover .post-source{color:rgba(245,245,245,0.5)}
.post-arrow{display:inline-block;margin-left:6px;font-size:11px;color:#8B7355;opacity:0;transform:translateX(-4px);transition:opacity .3s ease,transform .3s ease}
.post-section:hover .post-arrow{opacity:1;transform:translateX(0)}

/* Scroll indicator */
.scroll-indicator{position:fixed;left:58%;top:50%;transform:translateY(-50%);z-index:10;opacity:0;transition:opacity .5s ease}
.scroll-indicator.visible{opacity:1}
.scroll-dot{width:2px;height:8px;background:rgba(139,115,85,0.4);margin:4px auto;border-radius:1px}
.scroll-dot.active{background:#8B7355;height:16px}

/* Footer */
.footer{text-align:center;padding:80px 40px;color:rgba(245,245,245,0.08);font-family:'DM Sans','Inter',sans-serif;font-size:13px;letter-spacing:8px;text-transform:uppercase;clear:both}

/* Mobile */
@media(max-width:768px){
  .layout{flex-direction:column}
  .image-panel{position:relative;top:0;width:100%;height:56vh;order:1}
  .scroll-panel{width:100%;order:2}
  .post-section{min-height:auto;padding:24px 20px 48px}
  .post-title{font-size:24px}
  .post-desc{font-size:13px}
  .nav{padding:16px 20px}
  .nav-links{gap:16px}
  .image-panel{position:sticky;top:0;height:56vh;z-index:1}
  .scroll-panel{position:relative;z-index:2;background:#0A0A0A;margin-top:0}
}