/* --------------------------------------------------------------------------
   NEURAL CRITIC — WHAT TO PLAY
   Modern editorial discovery with NeuralHustle neon used as recommendation
   and interaction signal rather than as a full-surface treatment.
   -------------------------------------------------------------------------- */
body.wtp-active .category-work-page{
  width:min(1260px,calc(100% - 56px));
  padding:60px 0 104px;
}
body.wtp-active .category-work-hero,
body.wtp-active #category-spotlight,
body.wtp-active .category-work-content{display:none!important}

.wtp-hub{
  --wtp-cyan:#52e2f7;
  --wtp-violet:#7768ff;
  --wtp-purple:#a56cff;
  display:grid;
  gap:68px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Intro */
.wtp-hero-copy{
  max-width:900px;
  margin:0;
  text-align:left;
}
.wtp-eyebrow,
.wtp-section-head small,
.wtp-collection small,
.wtp-platform small,
.wtp-story-copy>span{
  color:var(--wtp-cyan);
  font:800 8px/1 Inter,system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.wtp-hero-copy h1{
  max-width:780px;
  margin:11px 0 16px;
  color:var(--text,#f7f8ff);
  font:650 clamp(54px,6vw,80px)/.92 Inter,system-ui,sans-serif;
  letter-spacing:-.064em;
  text-wrap:balance;
}
.wtp-hero-copy h1::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  margin-top:18px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--wtp-cyan),var(--wtp-violet));
}
.wtp-hero-copy p{
  width:min(720px,100%);
  margin:0;
  color:var(--muted,#939bb6);
  font:450 15px/1.62 Inter,system-ui,sans-serif;
  letter-spacing:-.012em;
}
.wtp-hero-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
  margin-top:24px;
  color:var(--muted);
  font:750 8px/1 Inter,system-ui,sans-serif;
  letter-spacing:.08em;
}
.wtp-hero-meta a{
  color:var(--wtp-cyan);
  border-bottom:1px solid rgba(82,226,247,.42);
  padding-bottom:3px;
  transition:color .2s,transform .2s;
}
.wtp-hero-meta a:hover{color:#fff;transform:translateX(2px)}

/* Lead recommendation */
.wtp-lead{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(330px,.72fr);
  min-height:500px;
  overflow:hidden;
  border:1px solid rgba(124,142,255,.22);
  border-radius:22px;
  background:#0b1020;
  box-shadow:0 24px 66px rgba(3,7,18,.24);
  transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .28s;
}
.wtp-lead:hover{
  transform:translateY(-3px);
  border-color:rgba(82,226,247,.42);
  box-shadow:0 30px 76px rgba(3,7,18,.30);
}
.wtp-lead::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--wtp-cyan),var(--wtp-violet),transparent 74%);
  pointer-events:none;
}
.wtp-lead-media{position:relative;min-height:500px;overflow:hidden}
.wtp-lead-media img,
.wtp-card-media img,
.wtp-story-media img{
  display:block;
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.wtp-lead:hover .wtp-lead-media img,
.wtp-card:hover .wtp-card-media img,
.wtp-story:hover .wtp-story-media img{transform:scale(1.032)}
.wtp-lead-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 58%,rgba(6,9,22,.52)),linear-gradient(0deg,rgba(4,6,17,.18),transparent 46%);
}
.wtp-lead-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px 38px;
  background:radial-gradient(circle at 100% 0%,rgba(119,104,255,.16),transparent 36%),linear-gradient(145deg,#12182c,#0a1020);
}
.wtp-lead-copy>span{
  display:inline-flex;
  width:max-content;
  padding:6px 9px;
  border:1px solid rgba(82,226,247,.45);
  border-radius:999px;
  background:rgba(82,226,247,.075);
  color:var(--wtp-cyan);
  font:800 7.5px/1 Inter,system-ui,sans-serif;
  letter-spacing:.11em;
}
.wtp-lead-copy h2{
  margin:14px 0 14px;
  color:#f8f9ff;
  font:650 clamp(34px,3.4vw,48px)/.99 Inter,system-ui,sans-serif;
  letter-spacing:-.052em;
  text-wrap:balance;
}
.wtp-lead-copy p{
  margin:0;
  color:#a5afc0;
  font:450 13px/1.62 Inter,system-ui,sans-serif;
  letter-spacing:-.008em;
}
.wtp-lead-byline{
  margin-top:21px;
  color:#77839a;
  font:750 7.5px/1.35 Inter,system-ui,sans-serif;
  letter-spacing:.055em;
}
.wtp-lead-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-top:22px;
  padding-bottom:4px;
  border-bottom:1px solid var(--wtp-cyan);
  color:#f5f8ff;
  font:800 8px/1 Inter,system-ui,sans-serif;
  letter-spacing:.07em;
}
.wtp-placeholder{
  display:grid;place-items:center;
  width:100%;height:100%;min-height:220px;
  background:radial-gradient(circle at 26% 24%,rgba(119,104,255,.28),transparent 34%),radial-gradient(circle at 72% 65%,rgba(82,226,247,.20),transparent 34%),#0a0f1e;
  color:#74809a;
  font:800 9px/1 Inter,system-ui,sans-serif;
  letter-spacing:.18em;
}

/* Section system */
.wtp-section{display:grid;gap:20px}
.wtp-section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:34px;
  padding-bottom:15px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent);
}
.wtp-section-head h2{
  margin:7px 0 0;
  color:var(--text,#f7f8ff);
  font:650 clamp(30px,3.4vw,42px)/.98 Inter,system-ui,sans-serif;
  letter-spacing:-.05em;
}
.wtp-section-head p{
  max-width:460px;
  margin:0;
  color:var(--muted);
  font:450 11px/1.55 Inter,system-ui,sans-serif;
  text-align:right;
}

/* Curated desks */
.wtp-collections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wtp-collection{
  position:relative;
  min-height:218px;
  padding:22px;
  overflow:hidden;
  border:1px solid rgba(124,142,255,.19);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(18,22,42,.92),rgba(9,13,28,.96));
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.wtp-collection::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:72px;height:2px;
  background:linear-gradient(90deg,var(--wtp-cyan),var(--wtp-violet));
}
.wtp-collection::after{
  content:"";
  position:absolute;
  width:150px;height:150px;
  right:-74px;bottom:-78px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(119,104,255,.15),transparent 68%);
}
.wtp-collection:hover{
  transform:translateY(-3px);
  border-color:rgba(82,226,247,.42);
  box-shadow:0 18px 44px rgba(3,7,18,.20);
}
.wtp-collection b{
  position:relative;
  display:block;
  max-width:205px;
  margin:12px 0 9px;
  color:#f4f7ff;
  font:650 23px/1.02 Inter,system-ui,sans-serif;
  letter-spacing:-.042em;
}
.wtp-collection p{
  position:relative;
  margin:0;
  color:#8994a9;
  font:450 10.5px/1.52 Inter,system-ui,sans-serif;
}
.wtp-collection footer{
  position:absolute;
  z-index:2;
  left:22px;right:22px;bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--wtp-cyan);
  font:800 7px/1 Inter,system-ui,sans-serif;
  letter-spacing:.08em;
}
.wtp-desk-count.empty{color:#69738e}

/* Platform lanes */
.wtp-platforms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wtp-platform{
  position:relative;
  min-height:114px;
  padding:20px;
  border:1px solid rgba(124,142,255,.17);
  border-radius:15px;
  background:color-mix(in srgb,var(--surface,#0c1020) 92%,transparent);
  transition:transform .2s,border-color .2s,background .2s;
}
.wtp-platform:hover{
  transform:translateY(-2px);
  border-color:rgba(82,226,247,.42);
  background:color-mix(in srgb,var(--surface,#0c1020) 86%,#52e2f7 6%);
}
.wtp-platform strong{
  display:block;
  margin:7px 0 5px;
  color:var(--text,#f7f8ff);
  font:650 19px/1 Inter,system-ui,sans-serif;
  letter-spacing:-.035em;
}
.wtp-platform span{color:var(--muted);font:450 8.5px/1.4 Inter,system-ui,sans-serif}
.wtp-platform em{
  position:absolute;
  right:17px;top:17px;
  color:var(--wtp-cyan);
  font:500 16px/1 Inter,system-ui,sans-serif;
  font-style:normal;
}

/* Optional start cards */
.wtp-start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.wtp-card{
  display:block;
  overflow:hidden;
  border:1px solid rgba(124,142,255,.18);
  border-radius:17px;
  background:var(--surface,#0c1020);
  transition:transform .23s,border-color .23s,box-shadow .23s;
}
.wtp-card:hover{transform:translateY(-3px);border-color:rgba(82,226,247,.40);box-shadow:0 18px 46px rgba(3,7,18,.20)}
.wtp-card-media{height:210px;overflow:hidden;background:#0a0d1c}
.wtp-card-copy{padding:18px 19px 20px}
.wtp-card-copy>span{color:var(--wtp-cyan);font:800 7.5px/1 Inter,system-ui,sans-serif;letter-spacing:.14em}
.wtp-card-copy h3{margin:8px 0 9px;color:var(--text);font:650 22px/1.04 Inter,system-ui,sans-serif;letter-spacing:-.04em}
.wtp-card-copy p{margin:0;color:var(--muted);font:450 10.5px/1.52 Inter,system-ui,sans-serif}
.wtp-card-copy small{display:block;margin-top:14px;color:#6f7894;font:750 7.5px/1 Inter,system-ui,sans-serif}

/* Latest recommendations */
.wtp-latest-layout{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:36px;align-items:start}
.wtp-story-list{display:grid}
.wtp-story{
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  transition:transform .2s;
}
.wtp-story:first-child{padding-top:2px}
.wtp-story:hover{transform:translateX(3px)}
.wtp-story-media{height:142px;border-radius:13px;overflow:hidden;background:#0a0d1b}
.wtp-story-copy{align-self:center;min-width:0}
.wtp-story-copy h3{margin:7px 0 8px;color:var(--text);font:650 22px/1.05 Inter,system-ui,sans-serif;letter-spacing:-.038em}
.wtp-story-copy p{margin:0;color:var(--muted);font:450 10.5px/1.52 Inter,system-ui,sans-serif}
.wtp-story-copy small{display:block;margin-top:11px;color:#707a91;font:750 7.5px/1 Inter,system-ui,sans-serif}

.wtp-side{display:grid;gap:14px;position:sticky;top:104px}
.wtp-side-card{
  position:relative;
  padding:21px;
  border:1px solid rgba(124,142,255,.18);
  border-radius:17px;
  background:color-mix(in srgb,var(--surface,#0d1020) 92%,transparent);
}
.wtp-side-card:first-child::before{
  content:"";
  position:absolute;inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--wtp-cyan),var(--wtp-violet),transparent 78%);
}
.wtp-side-card>small{color:var(--wtp-cyan);font:800 7.5px/1 Inter,system-ui,sans-serif;letter-spacing:.17em}
.wtp-side-card h3{margin:8px 0 12px;color:var(--text);font:650 20px/1.04 Inter,system-ui,sans-serif;letter-spacing:-.04em}
.wtp-side-links{display:grid}
.wtp-side-links a{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font:650 9.5px/1.3 Inter,system-ui,sans-serif}
.wtp-side-links a:last-child{border:0}.wtp-side-links span{color:var(--wtp-cyan)}
.wtp-side-note{margin:0;color:var(--muted);font:450 9.5px/1.55 Inter,system-ui,sans-serif}

/* Light mode */
html[data-theme=light] .wtp-hero-copy h1{color:#151b24}
html[data-theme=light] .wtp-lead,
html[data-theme=light] .wtp-card,
html[data-theme=light] .wtp-story,
html[data-theme=light] .wtp-collection,
html[data-theme=light] .wtp-platform,
html[data-theme=light] .wtp-side-card{
  border-color:#dde2e8;
  background:#fff;
  box-shadow:0 12px 32px rgba(31,43,59,.045);
}
html[data-theme=light] .wtp-lead{box-shadow:0 22px 54px rgba(31,43,59,.09)}
html[data-theme=light] .wtp-lead-copy{background:radial-gradient(circle at 100% 0%,rgba(119,104,255,.09),transparent 36%),linear-gradient(145deg,#f8fafc,#f0f5f8)}
html[data-theme=light] .wtp-lead-copy h2,
html[data-theme=light] .wtp-card-copy h3,
html[data-theme=light] .wtp-story-copy h3,
html[data-theme=light] .wtp-collection b,
html[data-theme=light] .wtp-platform strong,
html[data-theme=light] .wtp-side-card h3{color:#17212f}
html[data-theme=light] .wtp-lead-copy p,
html[data-theme=light] .wtp-card-copy p,
html[data-theme=light] .wtp-story-copy p,
html[data-theme=light] .wtp-collection p{color:#657180}
html[data-theme=light] .wtp-lead-cta{color:#17212f;border-color:#1ebed7}
html[data-theme=light] .wtp-placeholder{background:linear-gradient(135deg,#eef1ff,#e8f8fb);color:#71808c}

@media(max-width:980px){
  body.wtp-active .category-work-page{width:min(100% - 32px,1260px);padding-top:48px}
  .wtp-lead{grid-template-columns:1fr;min-height:0}
  .wtp-lead-media{min-height:410px}
  .wtp-lead-media::after{background:linear-gradient(0deg,rgba(5,8,20,.50),transparent 58%)}
  .wtp-collections,.wtp-platforms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wtp-start-grid{grid-template-columns:1fr 1fr}.wtp-card:last-child{grid-column:1/-1}
  .wtp-latest-layout{grid-template-columns:1fr}.wtp-side{position:static;grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body.wtp-active .category-work-page{width:calc(100% - 24px);padding:40px 0 72px}
  .wtp-hub{gap:50px}
  .wtp-hero-copy h1{font-size:clamp(48px,15vw,68px)}
  .wtp-hero-copy p{font-size:14px}
  .wtp-lead{border-radius:18px}.wtp-lead-media{min-height:290px}.wtp-lead-copy{padding:26px 21px}.wtp-lead-copy h2{font-size:32px}
  .wtp-section-head{display:block}.wtp-section-head p{margin-top:10px;text-align:left}
  .wtp-collections,.wtp-platforms,.wtp-start-grid,.wtp-side{grid-template-columns:1fr}
  .wtp-card:last-child{grid-column:auto}.wtp-collection{min-height:202px}.wtp-card-media{height:200px}
  .wtp-story{grid-template-columns:1fr;gap:13px;padding:17px 0}.wtp-story-media{height:205px}
}