/* ═══ STATION DETAIL PAGES — OSE-style ═══ */

/* Transparent nav on station pages */
.nav{background:transparent;backdrop-filter:none;border-bottom:none}
.nav.scrolled{background:rgba(10,10,10,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}

/* Hero with background image — full viewport */
.station-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 0 clamp(3rem,6vw,5rem);background-size:cover;background-position:center;overflow:hidden}
.station-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.4) 30%,rgba(10,10,10,.7) 60%,rgba(10,10,10,.95) 100%);z-index:1}

/* Hero scroll-away block effect */
.station-hero-blocks{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 48px, rgba(10,10,10,.85) 48px, rgba(10,10,10,.85) 50px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 48px, rgba(10,10,10,.85) 48px, rgba(10,10,10,.85) 50px);
  background-size:50px 50px;
  transition:opacity .1s linear}

.station-hero-title{font-size:clamp(3rem,8vw,6rem);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;color:var(--text);position:relative;z-index:3}

/* Station nav icons */
.station-nav{margin-bottom:2rem}
.station-nav-row{display:grid;grid-template-columns:repeat(7,40px);gap:.6rem}
.station-nav-item{width:40px;height:40px;color:var(--text-dim);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);background:rgba(10,10,10,.6);backdrop-filter:blur(4px);transition:all .25s;padding:8px}
.station-nav-item svg{width:100%;height:100%}
.station-nav-item:hover{color:var(--accent);border-color:rgba(74,239,121,.3);background:rgba(10,10,10,.8)}
.station-nav-active{color:var(--accent);border-color:var(--accent);pointer-events:none}

/* Two-column content section */
.station-content{padding:clamp(5rem,10vw,8rem) 0;background:var(--bg);position:relative;z-index:1}
.station-two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:start}
.station-left .label{margin-bottom:.8rem}
.station-tagline{font-size:clamp(1.2rem,2vw,1.6rem);color:var(--text);font-weight:700;line-height:1.3;text-transform:none;letter-spacing:-.01em;margin-bottom:1.5rem}
.station-body{font-size:.95rem;color:var(--text-muted);line-height:1.7;max-width:480px}

/* Skills accordion */
.skills-accordion{border-top:1px solid var(--border)}
.skill-item{border-bottom:1px solid var(--border)}
.skill-q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1.2rem 0;font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;text-align:left}
.skill-toggle{font-size:1.2rem;color:var(--accent);flex-shrink:0;margin-left:1rem}
.skill-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.skill-item.open .skill-a{max-height:200px}
.skill-a p{padding:0 0 1.2rem;font-size:.88rem;color:var(--text-muted);line-height:1.6}

/* Pack articles (case study style) */
.station-packs{padding:clamp(5rem,10vw,8rem) 0;background:var(--bg);position:relative;z-index:1}
.station-packs h2{text-transform:none;font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--text);margin-bottom:3rem}
.pack-articles{border-top:1px solid var(--border)}
.pack-article{display:grid;grid-template-columns:50px 1fr 50px;gap:1.5rem;align-items:center;padding:clamp(1.2rem,2.5vw,2rem) 0;border-bottom:1px solid var(--border);transition:background .3s}
.pack-article:hover{background:rgba(255,255,255,.015)}
.pack-tag{width:40px;height:40px;color:var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pack-tag svg{width:28px;height:28px}
.pack-article-body h3{font-size:clamp(1rem,1.8vw,1.3rem);color:var(--text);font-weight:600;text-transform:none;letter-spacing:-.01em;margin-bottom:.4rem}
.pack-article-body p{font-size:.85rem;color:var(--text-muted);line-height:1.5;margin-bottom:.3rem}
.pack-frameworks{font-family:var(--mono);font-size:.62rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.pack-arrow{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);font-size:1rem;color:var(--text-dim);transition:all .25s;flex-shrink:0}
.pack-article:hover .pack-arrow{border-color:rgba(74,239,121,.3);color:var(--accent)}

/* Breadcrumb */
.station-breadcrumb{padding:2rem 0;font-family:var(--mono);font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;background:var(--bg);position:relative;z-index:1}
.station-breadcrumb a{color:var(--text-dim);transition:color .2s}
.station-breadcrumb a:hover{color:var(--accent)}
.station-breadcrumb strong{color:var(--text)}

/* CTA — same gradient as homepage */
.station-cta{position:relative;padding:clamp(16rem,30vw,28rem) 0 0;background:linear-gradient(180deg,#0a0a0a 0%,#0f0f0f 8%,#1a1a1a 18%,#2a2a2a 30%,#4a4a4a 45%,#777 60%,#aaa 75%,#d0d0d0 88%,#fff 100%);overflow:hidden;z-index:1}
.station-cta .container{padding-bottom:clamp(14rem,25vw,22rem)}
.station-cta .gradient-cta-lines{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.station-cta .gradient-cta-line{position:absolute;top:0;bottom:0;width:auto;background:none;font-family:var(--mono);font-size:.55rem;letter-spacing:.04em;white-space:nowrap;color:rgba(255,255,255,.12);pointer-events:none}
.station-cta .gradient-cta-line::before{content:var(--tk,'amc');position:absolute;animation:tokenFloat var(--dur,6s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
.station-cta .gradient-cta-line::after{content:var(--tk2,'_');position:absolute;left:4px;font-size:.45rem;color:rgba(255,255,255,.07);animation:tokenFloat var(--dur,6s) ease-in-out infinite alternate-reverse;animation-delay:calc(var(--delay,0s) + 3s)}
@keyframes tokenFloat{0%{top:5%}100%{top:90%}}
.station-cta .gradient-cta-watermark{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:clamp(16rem,35vw,32rem);font-weight:900;color:rgba(0,0,0,.04);line-height:1;letter-spacing:-.06em;pointer-events:none;text-transform:lowercase;white-space:nowrap}
.station-cta h2{text-transform:uppercase;color:var(--text);margin-bottom:2.5rem}

/* Footer on station pages */
.footer{background:#ffffff;color:#555}

/* Responsive */
@media(max-width:900px){.station-two-col{grid-template-columns:1fr}.pack-article{grid-template-columns:50px 1fr 42px;gap:1rem}}
@media(max-width:640px){.station-nav-row{grid-template-columns:repeat(7,36px);gap:.4rem}.station-nav-item{width:36px;height:36px;padding:6px}}

/* Reuse homepage keyframes */
@keyframes lineFloat{0%{top:10%}100%{top:80%}}
.blink-cursor{display:inline-block;animation:blinkCursor 1s steps(2,end) infinite}
@keyframes blinkCursor{0%,48%{opacity:1}50%,100%{opacity:.1}}