:root{--bg-primary:#0D0D0D;--bg-secondary:#1A1A1A;--bg-elevated:#242424;--accent-brick:#D4563C;--accent-amber:#FF8F4F;--accent-cyan:#00E5FF;--accent-gold:#FFD700;--accent-vinyl:#FF3D00;--era-birth:#FF8A65;--era-wildstyle:#4DD0E1;--era-golden:#FFD54F;--era-bicoastal:#EF5350;--era-digital:#E0E0E0;--text-primary:rgba(255,255,255,0.95);--text-secondary:rgba(255,255,255,0.75);--text-muted:rgba(255,255,255,0.55);--text-faint:rgba(255,255,255,0.35);--font-display:"Anton","Impact",sans-serif;--font-quote:"Playfair Display",Georgia,serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:"IBM Plex Mono",monospace;--font-size-hero:2.75rem;--font-size-chapter:1.75rem;--font-size-section:1.5rem;--font-size-body:18px;--line-height-body:1.65;--section-padding:4rem 1.25rem;--content-max-width:720px;--duration-beat:150ms;--duration-bar:300ms;--duration-phrase:600ms;--duration-verse:1200ms;--ease-break:cubic-bezier(0.16,1,0.3,1);--ease-groove:cubic-bezier(0.4,0,0.2,1);--ease-scratch:cubic-bezier(0.34,1.56,0.64,1)}@media (min-width:768px){:root{--font-size-hero:5rem;--font-size-chapter:2.75rem;--font-size-section:2rem;--font-size-body:20px;--section-padding:6rem 2rem}}.hip-hop-history{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:var(--font-size-body);line-height:var(--line-height-body);min-height:100vh;overflow-x:hidden;position:relative;touch-action:pan-y;-webkit-overflow-scrolling:touch}.hip-hop-history *{box-sizing:border-box}.mixtape-progress{position:fixed;left:0;top:0;bottom:0;width:48px;z-index:100;pointer-events:none;padding:1rem 0;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent)}.mixtape-progress,.mixtape-shell{display:flex;flex-direction:column;align-items:center}.mixtape-shell{position:relative;width:40px;height:100%}.mixtape-tracks{position:absolute;top:5%;bottom:5%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;justify-content:space-between;align-items:center}.mixtape-track{width:20px;height:2px;background:rgba(255,255,255,.15);transition:background var(--duration-bar) var(--ease-groove);position:relative}.mixtape-track.passed{background:var(--accent-gold)}.mixtape-track:before{content:attr(data-track);position:absolute;left:24px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:.625rem;color:var(--text-faint);white-space:nowrap;opacity:0;transition:opacity var(--duration-bar)}.mixtape-track:hover:before{opacity:1}.mixtape-head{width:12px;height:12px;border-radius:50%;background:var(--accent-vinyl);box-shadow:0 0 10px var(--accent-vinyl),0 0 20px rgba(255,61,0,.4);transition:top .1s linear}.mixtape-fill,.mixtape-head{position:absolute;left:50%;transform:translateX(-50%)}.mixtape-fill{top:5%;width:4px;background:linear-gradient(to bottom,var(--era-birth) 0,var(--era-wildstyle) 20%,var(--era-golden) 45%,var(--era-bicoastal) 70%,var(--era-digital) 100%);transition:height .1s linear}@media (max-width:767px){.mixtape-progress{display:none}.mixtape-progress-mobile{display:block;position:fixed;bottom:0;left:0;right:0;height:4px;z-index:100;background:rgba(255,255,255,.08)}.mixtape-progress-mobile .mixtape-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(to right,var(--era-birth) 0,var(--era-wildstyle) 20%,var(--era-golden) 45%,var(--era-bicoastal) 70%,var(--era-digital) 100%)}}.hero-section{position:relative;height:100vh;height:100dvh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;background:var(--bg-primary)}.hip-hop-history .hero-background{position:absolute;inset:0;background:var(--bg-primary);transition:background .3s ease}.hip-hop-history .hero-background--with-image{background-size:cover;background-position:center 30%;background-repeat:no-repeat;filter:brightness(.35) saturate(.7)}.hip-hop-history .hero-background:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(255,143,79,calc(.2 * var(--light-intensity, 1))) 0,transparent 60%);transition:opacity .3s ease}.hip-hop-history .hero-background:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:calc(.15 * var(--grain-intensity, 1));pointer-events:none;mix-blend-mode:overlay}.hip-hop-history .hero-content{position:relative;z-index:10;max-width:900px;padding:0 2rem;display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity var(--duration-verse) var(--ease-break),transform var(--duration-verse) var(--ease-break)}.hero-overline{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent-amber);margin-bottom:1.5rem}.hip-hop-history .hero-title{font-family:var(--font-display);font-size:var(--font-size-hero);font-weight:400;line-height:1;margin:0 0 1rem;text-transform:uppercase;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent-gold) 0,var(--accent-amber) 50%,var(--accent-brick) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-family:var(--font-quote);font-size:1.25rem;font-style:italic;color:var(--text-secondary);margin-bottom:0}@media (min-width:768px){.hero-subtitle{font-size:1.75rem}}.hero-phase-text{top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;z-index:5;pointer-events:none}.hero-phase-text,.phase-text{position:absolute;left:0;right:0;padding:0 2rem;text-align:center}.phase-text{font-family:var(--font-quote);font-size:1.5rem;font-style:italic;color:var(--text-primary);transition:opacity var(--duration-phrase) var(--ease-groove),transform var(--duration-phrase) var(--ease-groove);margin:0;opacity:0;transform:translateY(20px);visibility:hidden}@media (min-width:768px){.phase-text{font-size:2rem}}.phase-text.active{opacity:1;transform:translateY(0);visibility:visible}.phase-text.past{opacity:0;transform:translateY(-30px);visibility:hidden}.hero-scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:opacity .5s ease;z-index:10}.scroll-text{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--accent-amber),transparent);animation:scroll-pulse 2s ease-in-out infinite}@keyframes scroll-pulse{0%,to{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.2)}}.hero-attribution{position:absolute;bottom:1rem;left:1.5rem;font-family:var(--font-mono);font-size:.625rem;color:var(--text-faint);opacity:.6;z-index:10;max-width:60%}@media (min-width:768px){.hero-attribution{font-size:.6875rem}}.hero-skip-button{position:absolute;bottom:2rem;right:2rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:.5rem 1rem;cursor:pointer;transition:all var(--duration-bar) ease;z-index:20}.hero-skip-button:hover{color:var(--text-muted);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}.chapter-section{position:relative;padding:var(--section-padding);min-height:100dvh;display:flex;flex-direction:column;justify-content:center}.chapter-section:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--duration-verse) var(--ease-break);pointer-events:none}.chapter-section.visible:before{opacity:1}.chapter-section[data-era=birth]:before{background:radial-gradient(ellipse at 50% 50%,rgba(255,138,101,.08) 0,transparent 70%)}.chapter-section[data-era=wildstyle]:before{background:radial-gradient(ellipse at 50% 50%,rgba(77,208,225,.08) 0,transparent 70%)}.chapter-section[data-era=golden]:before{background:radial-gradient(ellipse at 50% 50%,rgba(255,213,79,.08) 0,transparent 70%)}.chapter-section[data-era=bicoastal]:before{background:radial-gradient(ellipse at 50% 50%,rgba(239,83,80,.08) 0,transparent 70%)}.chapter-section[data-era=digital]:before{background:radial-gradient(ellipse at 50% 50%,rgba(224,224,224,.05) 0,transparent 70%)}.chapter-content{max-width:var(--content-max-width);margin:0 auto;width:100%}.chapter-image-container{margin:0 0 2.5rem;padding:0;opacity:0;transform:translateY(20px);transition:all var(--duration-phrase) var(--ease-break);transition-delay:.2s}.chapter-section.visible .chapter-image-container{opacity:1;transform:translateY(0)}.chapter-image{width:100%;height:auto;max-height:400px;object-fit:cover;border-radius:4px;filter:saturate(.85) contrast(1.05)}.chapter-image-attribution{font-family:var(--font-mono);font-size:.625rem;color:var(--text-faint);margin-top:.75rem;opacity:.7;text-align:center}.chapter-header{margin-bottom:3rem;opacity:0;transform:translateY(30px);transition:all var(--duration-verse) var(--ease-break)}.chapter-section.visible .chapter-header{opacity:1;transform:translateY(0)}.chapter-number{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--chapter-accent,var(--accent-amber));margin-bottom:.75rem;display:block}.chapter-title{font-family:var(--font-display);font-size:var(--font-size-chapter);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;margin:0 0 .5rem;color:var(--text-primary)}.chapter-subtitle{margin:0 0 1rem}.chapter-epigraph,.chapter-subtitle{font-family:var(--font-quote);font-size:1.125rem;font-style:italic;color:var(--text-muted)}.chapter-epigraph{padding-left:1rem;border-left:2px solid var(--chapter-accent,var(--accent-amber))}.chapter-epigraph cite{display:block;font-style:normal;font-size:.875rem;margin-top:.5rem;color:var(--text-faint)}.figure-profile{background:var(--bg-elevated);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:2rem 1.5rem;margin-bottom:2rem;opacity:0;transform:translateY(30px);transition:all var(--duration-phrase) var(--ease-break)}.chapter-section.visible .figure-profile{opacity:1;transform:translateY(0)}.figure-profile.featured{border-color:var(--figure-accent,var(--accent-gold));border-width:1px 1px 1px 3px}.figure-profile.has-image{display:grid;gap:1.5rem}@media (min-width:768px){.figure-profile.has-image{grid-template-columns:200px 1fr}}.figure-image-container{position:relative;overflow:hidden;border-radius:4px}.figure-image{width:100%;height:auto;max-height:280px;object-fit:cover;filter:grayscale(.15) contrast(1.05);transition:filter .3s ease}.figure-profile:hover .figure-image{filter:grayscale(0) contrast(1.1)}.figure-image-attribution{font-family:var(--font-mono);font-size:.5625rem;color:var(--text-faint);margin-top:.5rem;opacity:.7}.figure-text{display:flex;flex-direction:column}.figure-name{font-family:var(--font-display);font-size:1.5rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:var(--figure-accent,var(--accent-gold));margin:0 0 .25rem}.figure-epithet{font-family:var(--font-quote);font-size:1rem;font-style:italic;color:var(--text-muted);margin-bottom:1rem}.figure-meta{font-family:var(--font-mono);font-size:.75rem;color:var(--text-faint);margin-bottom:1rem}.figure-domains{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.figure-domain{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .75rem;background:rgba(255,255,255,.05);border-radius:100px;color:var(--text-secondary)}.figure-description{font-size:var(--font-size-body);color:var(--text-secondary);line-height:var(--line-height-body);margin-bottom:1.5rem}.figure-quote{font-family:var(--font-quote);font-style:italic;color:var(--text-muted);padding-left:1rem;border-left:2px solid var(--figure-accent,var(--accent-gold))}.narrative-block{margin-bottom:2rem;opacity:0;transform:translateY(20px);transition:all var(--duration-phrase) var(--ease-break)}.chapter-section.visible .narrative-block{opacity:1;transform:translateY(0)}.narrative-block p{font-size:var(--font-size-body);color:var(--text-secondary);line-height:var(--line-height-body);margin-bottom:1.5rem}.narrative-block p:last-child{margin-bottom:0}.narrative-block.has-dropcap p:first-of-type:first-letter{font-family:var(--font-display);font-size:4rem;float:left;line-height:.8;padding-right:.75rem;padding-top:.25rem;color:var(--chapter-accent,var(--accent-amber))}.quote-monument{padding:4rem 1.5rem;margin:3rem 0;text-align:center;position:relative;opacity:0;transform:scale(.95);transition:all var(--duration-verse) var(--ease-break)}.chapter-section.visible .quote-monument{opacity:1;transform:scale(1)}.quote-monument:before{content:'"';font-family:var(--font-display);font-size:6rem;color:var(--chapter-accent,var(--accent-gold));opacity:.2;position:absolute;top:0;left:50%;transform:translateX(-50%);line-height:1}.quote-monument blockquote{font-family:var(--font-quote);font-size:1.5rem;font-style:italic;color:var(--text-primary);line-height:1.5;max-width:600px;margin:0 auto 1.5rem}@media (min-width:768px){.quote-monument blockquote{font-size:2rem}}.quote-monument cite{font-family:var(--font-mono);font-size:.875rem;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.transition-divider{height:1px;margin:4rem auto;max-width:200px;position:relative;overflow:hidden}.transition-divider:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--divider-color,var(--accent-amber)),transparent);opacity:.5}.transition-divider[data-era=birth]{--divider-color:var(--era-birth)}.transition-divider[data-era=wildstyle]{--divider-color:var(--era-wildstyle)}.transition-divider[data-era=golden]{--divider-color:var(--era-golden)}.transition-divider[data-era=bicoastal]{--divider-color:var(--era-bicoastal)}.transition-divider[data-era=digital]{--divider-color:var(--era-digital)}.chapter-section.visible .figure-profile:first-child{transition-delay:.1s}.chapter-section.visible .figure-profile:nth-child(2){transition-delay:.2s}.chapter-section.visible .figure-profile:nth-child(3){transition-delay:.3s}.chapter-section.visible .narrative-block:first-child{transition-delay:.1s}.chapter-section.visible .narrative-block:nth-child(2){transition-delay:.2s}.chapter-section.visible .narrative-block:nth-child(3){transition-delay:.3s}.sources-section{padding:4rem 1.5rem;background:linear-gradient(135deg,#0D0D0D,#050505);border-top:1px solid rgba(255,255,255,.06)}.sources-content{max-width:var(--content-max-width);margin:0 auto}.sources-title{font-family:var(--font-display);font-size:1.5rem;font-weight:400;text-transform:uppercase;color:var(--text-primary);margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,215,0,.3)}.sources-list{list-style:none;padding:0;margin:0 0 2rem}.sources-list li{margin-bottom:.75rem;padding-left:1.5rem;position:relative}.sources-list li:before{content:">";font-family:var(--font-mono);position:absolute;left:0;color:var(--accent-gold)}.sources-list a{font-size:.9375rem;color:var(--text-muted);text-decoration:none;transition:color .2s ease}.sources-list a:hover{color:var(--accent-gold);text-decoration:underline}.sources-note{font-size:.8125rem;font-style:italic;color:var(--text-faint);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.06)}.epilogue-section{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--section-padding);position:relative}.epilogue-text{font-family:var(--font-quote);font-size:1.25rem;font-style:italic;color:var(--text-secondary);max-width:500px;line-height:1.6}@media (min-width:768px){.epilogue-text{font-size:1.5rem}}.content-warning{background:rgba(239,83,80,.1);border-left:3px solid var(--era-bicoastal);padding:1rem 1.5rem;margin:1.5rem 0;font-size:.875rem}.content-warning-label{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--era-bicoastal);margin-bottom:.5rem}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.scroll-line{animation:none}.hip-hop-history .hero-content{transition-duration:.01ms}}.hip-hop-history a:focus-visible,.hip-hop-history button:focus-visible{outline:2px solid var(--accent-gold);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}